From 47b602eda82de4eaffe8136f8d4147f70b774578 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Thu, 9 Jul 2026 09:08:14 -0600
Subject: [PATCH 1/2] fix[frontend](home): refactored components on home page

---
 .../features/home/components/CardHeader.tsx   |  28 +
 .../src/features/home/components/ChatHero.tsx |  81 +++
 .../home/components/ComplianceCard.tsx        |  59 ++
 .../home/components/DatasourcesCard.tsx       |  53 ++
 .../features/home/components/EmptyState.tsx   |   3 +
 .../features/home/components/EventsChart.tsx  |  81 +++
 .../src/features/home/components/IconBtn.tsx  |  11 +
 .../src/features/home/components/KpiTile.tsx  |  51 ++
 .../home/components/MitreTechniquesCard.tsx   |  45 ++
 .../features/home/components/SkeletonRows.tsx |   9 +
 .../features/home/components/Sparkline.tsx    |  19 +
 .../home/components/SystemHealthCard.tsx      |  48 ++
 .../home/components/TopAssetsCard.tsx         |  51 ++
 .../src/features/home/components/helpers.ts   |  26 +
 frontend/src/features/home/pages/HomePage.tsx | 581 +-----------------
 15 files changed, 575 insertions(+), 571 deletions(-)
 create mode 100644 frontend/src/features/home/components/CardHeader.tsx
 create mode 100644 frontend/src/features/home/components/ChatHero.tsx
 create mode 100644 frontend/src/features/home/components/ComplianceCard.tsx
 create mode 100644 frontend/src/features/home/components/DatasourcesCard.tsx
 create mode 100644 frontend/src/features/home/components/EmptyState.tsx
 create mode 100644 frontend/src/features/home/components/EventsChart.tsx
 create mode 100644 frontend/src/features/home/components/IconBtn.tsx
 create mode 100644 frontend/src/features/home/components/KpiTile.tsx
 create mode 100644 frontend/src/features/home/components/MitreTechniquesCard.tsx
 create mode 100644 frontend/src/features/home/components/SkeletonRows.tsx
 create mode 100644 frontend/src/features/home/components/Sparkline.tsx
 create mode 100644 frontend/src/features/home/components/SystemHealthCard.tsx
 create mode 100644 frontend/src/features/home/components/TopAssetsCard.tsx
 create mode 100644 frontend/src/features/home/components/helpers.ts

diff --git a/frontend/src/features/home/components/CardHeader.tsx b/frontend/src/features/home/components/CardHeader.tsx
new file mode 100644
index 000000000..73618f791
--- /dev/null
+++ b/frontend/src/features/home/components/CardHeader.tsx
@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom'
+import { type LucideIcon } from 'lucide-react'
+
+export function CardHeader({
+  title,
+  icon: Icon,
+  iconClass,
+  action,
+}: {
+  title: string
+  icon?: LucideIcon
+  iconClass?: string
+  action?: { label: string; href: string }
+}) {
+  return (
+    <div className="flex items-center justify-between px-6 pt-5 pb-4">
+      <h3 className="flex items-center gap-2 text-sm font-semibold">
+        {Icon && <Icon size={16} strokeWidth={1.75} className={iconClass ?? 'text-muted-foreground'} />}
+        {title}
+      </h3>
+      {action && (
+        <Link to={action.href} className="text-xs font-medium text-primary hover:underline">
+          {action.label}
+        </Link>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/features/home/components/ChatHero.tsx b/frontend/src/features/home/components/ChatHero.tsx
new file mode 100644
index 000000000..559e38f62
--- /dev/null
+++ b/frontend/src/features/home/components/ChatHero.tsx
@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AtSign, Paperclip, Sparkles } from 'lucide-react'
+import { useSocAi } from '@/features/soc-ai/SocAiProvider'
+import { useSocAiConfigured } from '@/features/soc-ai/lib/useSocAiConfig'
+import { IconBtn } from './IconBtn'
+
+const SUGGESTION_KEYS = ['threatHunt', 'observableTriage', 'writeRule', 'systemStatus'] as const
+
+export function ChatHero() {
+  const { t } = useTranslation()
+  const configured = useSocAiConfigured()
+  const { submit } = useSocAi()
+  const [value, setValue] = useState('')
+
+  // Hidden entirely until SOC-AI has a provider configured — same gate the
+  // floating composer/panel use, so we never show a dead chat box.
+  if (!configured) return null
+
+  const send = () => {
+    const text = value.trim()
+    if (!text) return
+    submit(text)
+    setValue('')
+  }
+
+  return (
+    <section className="flex flex-col items-center">
+      <h2 className="mb-4 text-center text-base font-medium text-foreground">{t('home.hero.title')}</h2>
+      <div className="relative w-full max-w-3xl">
+        <div
+          aria-hidden
+          className="absolute -inset-px rounded-xl bg-[conic-gradient(from_180deg_at_50%_50%,#1a8cff_0deg,#0ea5e9_120deg,#2563eb_240deg,#1a8cff_360deg)] opacity-50 blur-[1px]"
+        />
+        <div className="relative rounded-xl bg-card p-4">
+          <textarea
+            rows={3}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                send()
+              }
+            }}
+            placeholder={t('home.hero.placeholder')}
+            className="w-full resize-none border-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+          />
+          <div className="mt-2 flex items-center justify-between">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <IconBtn label={t('home.hero.mention')}><AtSign size={16} strokeWidth={1.75} /></IconBtn>
+              <IconBtn label={t('home.hero.attach')}><Paperclip size={16} strokeWidth={1.75} /></IconBtn>
+            </div>
+            <button
+              onClick={send}
+              disabled={!value.trim()}
+              className="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-sm hover:opacity-90 disabled:opacity-40"
+              aria-label={t('home.hero.send')}
+            >
+              <Sparkles size={14} strokeWidth={2} />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 flex flex-wrap justify-center gap-2">
+        {SUGGESTION_KEYS.map((key) => {
+          const label = t(`home.hero.suggestions.${key}`)
+          return (
+            <button
+              key={key}
+              onClick={() => submit(label)}
+              className="rounded-full border border-border bg-card px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              {label}
+            </button>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
diff --git a/frontend/src/features/home/components/ComplianceCard.tsx b/frontend/src/features/home/components/ComplianceCard.tsx
new file mode 100644
index 000000000..9898d2c6f
--- /dev/null
+++ b/frontend/src/features/home/components/ComplianceCard.tsx
@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next'
+import { BadgeCheck } from 'lucide-react'
+import { cn } from '@/shared/lib/utils'
+import { useComplianceScores } from '../hooks/use-overview'
+import { CardHeader } from './CardHeader'
+import { EmptyState } from './EmptyState'
+
+export function ComplianceCard() {
+  const { t } = useTranslation()
+  const { items, isLoading } = useComplianceScores()
+  return (
+    <div className="h-full rounded-xl border border-border bg-card">
+      <CardHeader title={t('home.compliance.title')} icon={BadgeCheck} iconClass="text-emerald-500" action={{ label: t('home.compliance.reports'), href: '/compliance' }} />
+      <div className="px-6 pb-6">
+        {isLoading ? (
+          <div className="h-32 animate-pulse rounded-lg bg-muted" />
+        ) : items.length === 0 ? (
+          <EmptyState text={t('home.compliance.empty')} />
+        ) : (
+          <>
+            <div
+              className="grid items-end gap-3 h-32"
+              style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
+            >
+              {items.map((c) => (
+                <div key={c.key} className="flex h-full flex-col items-center justify-end">
+                  <div className="mb-1 font-mono text-[10px] tabular-nums">{c.score}%</div>
+                  <div
+                    className={cn(
+                      'w-full rounded-t-md',
+                      c.score >= 90
+                        ? 'bg-gradient-to-t from-emerald-600 to-emerald-400'
+                        : c.score >= 80
+                          ? 'bg-gradient-to-t from-sky-600 to-sky-400'
+                          : c.score >= 50
+                            ? 'bg-gradient-to-t from-amber-600 to-amber-400'
+                            : 'bg-gradient-to-t from-red-600 to-red-400',
+                    )}
+                    style={{ height: `${Math.max(c.score, 2)}%` }}
+                  />
+                </div>
+              ))}
+            </div>
+            <div
+              className="mt-2 grid gap-3 text-center text-[10px] uppercase tracking-wider text-muted-foreground"
+              style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
+            >
+              {items.map((c) => (
+                <div key={c.key} className="truncate" title={c.name}>
+                  {c.name}
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/features/home/components/DatasourcesCard.tsx b/frontend/src/features/home/components/DatasourcesCard.tsx
new file mode 100644
index 000000000..fbee21089
--- /dev/null
+++ b/frontend/src/features/home/components/DatasourcesCard.tsx
@@ -0,0 +1,53 @@
+import { useTranslation } from 'react-i18next'
+import { Database, TrendingUp } from 'lucide-react'
+import { useDatasourcesOverview } from '../hooks/use-overview'
+import { fmtCount, spanLabel } from './helpers'
+import { CardHeader } from './CardHeader'
+import { EventsChart } from './EventsChart'
+
+export function DatasourcesCard() {
+  const { t } = useTranslation()
+  const ds = useDatasourcesOverview()
+  return (
+    <div className="h-full rounded-xl border border-border bg-card">
+      <CardHeader title={t('home.datasources.title')} icon={Database} action={{ label: t('home.datasources.viewAll'), href: '/datasources' }} />
+      <div className="flex flex-wrap items-end gap-x-10 gap-y-4 px-6 pt-2">
+        <div>
+          {ds.isLoading ? (
+            <div className="h-12 w-20 animate-pulse rounded bg-muted" />
+          ) : (
+            <div className="text-5xl font-semibold leading-none tracking-tight text-emerald-500 tabular-nums dark:text-emerald-400">
+              {fmtCount(ds.activeSources)}
+            </div>
+          )}
+          <div className="mt-2 text-xs text-muted-foreground">
+            <span className="text-foreground">{t('home.datasources.ofTotal', { n: fmtCount(ds.total) })}</span>{' '}
+            {t('home.datasources.datasources')}
+            <br />
+            {t('home.datasources.sendingData')}
+          </div>
+        </div>
+        <div>
+          <div className="flex items-baseline gap-2">
+            {ds.isLoading ? (
+              <div className="h-12 w-28 animate-pulse rounded bg-muted" />
+            ) : (
+              <span className="text-5xl font-semibold leading-none tracking-tight tabular-nums">
+                {fmtCount(ds.events)}
+              </span>
+            )}
+            <TrendingUp size={20} strokeWidth={2} className="text-emerald-500 dark:text-emerald-400" />
+          </div>
+          <div className="mt-2 text-xs text-muted-foreground">
+            {t('home.datasources.totalEvents')}
+            <br />
+            {spanLabel(t, ds.from, ds.to)}
+          </div>
+        </div>
+      </div>
+      <div className="px-2 pb-2 pt-4">
+        <EventsChart points={ds.points} loading={ds.isLoading} />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/features/home/components/EmptyState.tsx b/frontend/src/features/home/components/EmptyState.tsx
new file mode 100644
index 000000000..ac60430c6
--- /dev/null
+++ b/frontend/src/features/home/components/EmptyState.tsx
@@ -0,0 +1,3 @@
+export function EmptyState({ text }: { text: string }) {
+  return <div className="py-4 text-center text-xs text-muted-foreground">{text}</div>
+}
diff --git a/frontend/src/features/home/components/EventsChart.tsx b/frontend/src/features/home/components/EventsChart.tsx
new file mode 100644
index 000000000..713c79b8f
--- /dev/null
+++ b/frontend/src/features/home/components/EventsChart.tsx
@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next'
+import { fmtCount, shortTime } from './helpers'
+
+export function EventsChart({ points, loading }: { points: { t: string; count: number }[]; loading: boolean }) {
+  const { t } = useTranslation()
+  const w = 700
+  const h = 180
+  const pl = 44
+  const pr = 16
+  const pt = 10
+  const pb = 24
+  const innerW = w - pl - pr
+  const innerH = h - pt - pb
+
+  if (loading) {
+    return <div className="mx-4 h-44 animate-pulse rounded-lg bg-muted" />
+  }
+  if (points.length < 2) {
+    return (
+      <div className="flex h-44 items-center justify-center text-xs text-muted-foreground">
+        {t('home.datasources.noData')}
+      </div>
+    )
+  }
+
+  const counts = points.map((p) => p.count)
+  const max = Math.max(...counts, 1)
+  const xs = points.map((_, i) => pl + (i * innerW) / (points.length - 1))
+  const ys = points.map((v) => pt + innerH - (v.count / max) * innerH)
+  const linePath = points.map((_, i) => `${i === 0 ? 'M' : 'L'} ${xs[i]} ${ys[i]}`).join(' ')
+  const areaPath = `${linePath} L ${xs[xs.length - 1]} ${pt + innerH} L ${xs[0]} ${pt + innerH} Z`
+
+  // Two reference gridlines (half + full scale) with compact labels.
+  const grids = [max / 2, max]
+  // A handful of evenly-spaced x labels so the axis stays readable.
+  const labelEvery = Math.max(1, Math.ceil(points.length / 6))
+
+  return (
+    <svg viewBox={`0 0 ${w} ${h}`} className="h-44 w-full" preserveAspectRatio="none">
+      <defs>
+        <pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+          <line x1="0" y1="0" x2="0" y2="6" className="stroke-foreground/5" strokeWidth="1" />
+        </pattern>
+        <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0" stopColor="#22d3ee" />
+          <stop offset="1" stopColor="#1a8cff" />
+        </linearGradient>
+      </defs>
+      <rect x={pl} y={pt} width={innerW} height={innerH} fill="url(#hatch)" />
+      <g className="fill-muted-foreground" fontSize="10">
+        {grids.map((v) => (
+          <text key={v} x={pl - 6} y={pt + innerH - (v / max) * innerH + 3} textAnchor="end">
+            {fmtCount(Math.round(v))}
+          </text>
+        ))}
+      </g>
+      {grids.map((v) => (
+        <line
+          key={v}
+          x1={pl}
+          x2={pl + innerW}
+          y1={pt + innerH - (v / max) * innerH}
+          y2={pt + innerH - (v / max) * innerH}
+          className="stroke-border/40"
+          strokeDasharray="2 4"
+        />
+      ))}
+      <path d={areaPath} className="fill-primary/10" />
+      <path d={linePath} fill="none" stroke="url(#lineGrad)" strokeWidth="2" strokeLinejoin="round" />
+      <g className="fill-muted-foreground" fontSize="10">
+        {points.map((p, i) =>
+          i % labelEvery === 0 ? (
+            <text key={i} x={xs[i]} y={h - 6} textAnchor="middle">
+              {shortTime(p.t)}
+            </text>
+          ) : null,
+        )}
+      </g>
+    </svg>
+  )
+}
diff --git a/frontend/src/features/home/components/IconBtn.tsx b/frontend/src/features/home/components/IconBtn.tsx
new file mode 100644
index 000000000..f2de4c2e0
--- /dev/null
+++ b/frontend/src/features/home/components/IconBtn.tsx
@@ -0,0 +1,11 @@
+export function IconBtn({ children, label }: { children: React.ReactNode; label: string }) {
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      className="flex h-7 w-7 items-center justify-center rounded-md hover:bg-muted hover:text-foreground"
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/frontend/src/features/home/components/KpiTile.tsx b/frontend/src/features/home/components/KpiTile.tsx
new file mode 100644
index 000000000..32961700f
--- /dev/null
+++ b/frontend/src/features/home/components/KpiTile.tsx
@@ -0,0 +1,51 @@
+import { Link } from 'react-router-dom'
+import { type LucideIcon } from 'lucide-react'
+import { Sparkline } from './Sparkline'
+
+export function KpiTile({
+  icon: Icon,
+  label,
+  value,
+  sublabel,
+  sparkline,
+  accent,
+  loading,
+  href,
+}: {
+  icon: LucideIcon
+  label: string
+  value: string
+  sublabel?: string
+  sparkline?: number[]
+  accent: string
+  loading?: boolean
+  href?: string
+}) {
+  const inner = (
+    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-4 transition-colors hover:border-primary/40">
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <Icon size={14} strokeWidth={1.75} className={accent} />
+        {label}
+      </div>
+      {loading ? (
+        <div className="mt-2 h-8 w-16 animate-pulse rounded bg-muted" />
+      ) : (
+        <div className="mt-2 text-3xl font-semibold tracking-tight tabular-nums">{value}</div>
+      )}
+      <div className="mt-3 -mx-1 min-h-[36px]">
+        {sparkline && sparkline.length > 1 ? (
+          <Sparkline data={sparkline} accent={accent} />
+        ) : sublabel ? (
+          <span className="text-xs text-muted-foreground">{sublabel}</span>
+        ) : null}
+      </div>
+    </div>
+  )
+  return href ? (
+    <Link to={href} className="block h-full">
+      {inner}
+    </Link>
+  ) : (
+    inner
+  )
+}
diff --git a/frontend/src/features/home/components/MitreTechniquesCard.tsx b/frontend/src/features/home/components/MitreTechniquesCard.tsx
new file mode 100644
index 000000000..70c3fb03a
--- /dev/null
+++ b/frontend/src/features/home/components/MitreTechniquesCard.tsx
@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next'
+import { Crosshair } from 'lucide-react'
+import { useTopTechniques } from '../hooks/use-overview'
+import { fmtCount } from './helpers'
+import { CardHeader } from './CardHeader'
+import { SkeletonRows } from './SkeletonRows'
+import { EmptyState } from './EmptyState'
+
+export function MitreTechniquesCard() {
+  const { t } = useTranslation()
+  const { items, isLoading } = useTopTechniques()
+  const max = Math.max(...items.map((m) => m.count), 1)
+  return (
+    <div className="h-full rounded-xl border border-border bg-card">
+      <CardHeader
+        title={t('home.mitre.title')}
+        icon={Crosshair}
+        iconClass="text-rose-500"
+        action={{ label: t('home.mitre.explore'), href: '/threat-management/alerts' }}
+      />
+      <div className="space-y-2.5 px-6 pb-5">
+        {isLoading ? (
+          <SkeletonRows rows={5} />
+        ) : items.length === 0 ? (
+          <EmptyState text={t('home.mitre.empty')} />
+        ) : (
+          items.map((m) => (
+            <div key={m.value} className="grid grid-cols-[1fr_auto] items-center gap-3 text-xs">
+              <div>
+                <span className="font-medium">{m.value}</span>
+                <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full rounded-full bg-gradient-to-r from-sky-400 to-blue-600"
+                    style={{ width: `${(m.count / max) * 100}%` }}
+                  />
+                </div>
+              </div>
+              <div className="font-mono text-sm tabular-nums">{fmtCount(m.count)}</div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/features/home/components/SkeletonRows.tsx b/frontend/src/features/home/components/SkeletonRows.tsx
new file mode 100644
index 000000000..f7e6214d2
--- /dev/null
+++ b/frontend/src/features/home/components/SkeletonRows.tsx
@@ -0,0 +1,9 @@
+export function SkeletonRows({ rows }: { rows: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="h-3 w-full animate-pulse rounded bg-muted" />
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/src/features/home/components/Sparkline.tsx b/frontend/src/features/home/components/Sparkline.tsx
new file mode 100644
index 000000000..74acdd261
--- /dev/null
+++ b/frontend/src/features/home/components/Sparkline.tsx
@@ -0,0 +1,19 @@
+import { cn } from '@/shared/lib/utils'
+
+export function Sparkline({ data, accent }: { data: number[]; accent: string }) {
+  const w = 200
+  const h = 36
+  const max = Math.max(...data)
+  const min = Math.min(...data)
+  const range = max - min || 1
+  const xs = data.map((_, i) => (i * w) / (data.length - 1))
+  const ys = data.map((v) => h - ((v - min) / range) * (h - 4) - 2)
+  const path = data.map((_, i) => `${i === 0 ? 'M' : 'L'} ${xs[i]} ${ys[i]}`).join(' ')
+  const area = `${path} L ${xs[xs.length - 1]} ${h} L ${xs[0]} ${h} Z`
+  return (
+    <svg viewBox={`0 0 ${w} ${h}`} className="h-9 w-full" preserveAspectRatio="none">
+      <path d={area} className={cn('opacity-15', accent.replace('text-', 'fill-'))} />
+      <path d={path} fill="none" strokeWidth="1.75" strokeLinejoin="round" className={cn('stroke-current', accent)} />
+    </svg>
+  )
+}
diff --git a/frontend/src/features/home/components/SystemHealthCard.tsx b/frontend/src/features/home/components/SystemHealthCard.tsx
new file mode 100644
index 000000000..299fa956d
--- /dev/null
+++ b/frontend/src/features/home/components/SystemHealthCard.tsx
@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next'
+import { Activity } from 'lucide-react'
+import { cn } from '@/shared/lib/utils'
+import { useSystemHealth, type HealthStatus } from '../hooks/use-overview'
+import { CardHeader } from './CardHeader'
+import { SkeletonRows } from './SkeletonRows'
+
+const HEALTH_META: Record<HealthStatus, { dot: string; badge: string }> = {
+  up: { dot: 'bg-emerald-500', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-300' },
+  degraded: { dot: 'bg-amber-500', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-300' },
+  down: { dot: 'bg-red-500', badge: 'bg-red-500/15 text-red-500 dark:text-red-300' },
+  unknown: { dot: 'bg-muted-foreground/50', badge: 'bg-muted text-muted-foreground' },
+}
+
+export function SystemHealthCard() {
+  const { t } = useTranslation()
+  const { services, isLoading } = useSystemHealth()
+  return (
+    <div className="h-full rounded-xl border border-border bg-card">
+      <CardHeader title={t('home.health.title')} icon={Activity} iconClass="text-emerald-500" action={{ label: t('home.health.details'), href: '/settings/about' }} />
+      <div className="divide-y divide-border">
+        {isLoading ? (
+          <div className="px-6 py-4">
+            <SkeletonRows rows={3} />
+          </div>
+        ) : (
+          services.map((p) => {
+            const meta = HEALTH_META[p.status]
+            return (
+              <div key={p.name} className="flex items-center justify-between px-6 py-2.5 text-xs">
+                <div className="flex items-center gap-2">
+                  <span className={cn('h-2 w-2 rounded-full', meta.dot)} />
+                  <span>{p.name}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-[10px] text-muted-foreground">{p.detail}</span>
+                  <span className={cn('rounded-md px-1.5 py-0.5 text-[10px] font-medium leading-none', meta.badge)}>
+                    {t(`about.status.${p.status}`)}
+                  </span>
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/features/home/components/TopAssetsCard.tsx b/frontend/src/features/home/components/TopAssetsCard.tsx
new file mode 100644
index 000000000..5472a78cc
--- /dev/null
+++ b/frontend/src/features/home/components/TopAssetsCard.tsx
@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next'
+import { Server } from 'lucide-react'
+import { useTopAssets } from '../hooks/use-overview'
+import { fmtCount } from './helpers'
+import { CardHeader } from './CardHeader'
+import { SkeletonRows } from './SkeletonRows'
+import { EmptyState } from './EmptyState'
+
+export function TopAssetsCard() {
+  const { t } = useTranslation()
+  const { items, isLoading } = useTopAssets()
+  const max = Math.max(...items.map((a) => a.count), 1)
+  return (
+    <div className="h-full rounded-xl border border-border bg-card">
+      <CardHeader title={t('home.assets.title')} icon={Server} action={{ label: t('home.assets.viewAll'), href: '/datasources' }} />
+      <div className="grid grid-cols-[1fr_70px] gap-3 px-6 pb-2 text-[11px] uppercase tracking-wider text-muted-foreground">
+        <div>{t('home.assets.asset')}</div>
+        <div className="text-right">{t('home.assets.alerts')}</div>
+      </div>
+      <div className="border-t border-border">
+        {isLoading ? (
+          <div className="px-6 py-4">
+            <SkeletonRows rows={5} />
+          </div>
+        ) : items.length === 0 ? (
+          <div className="px-6 py-6">
+            <EmptyState text={t('home.assets.empty')} />
+          </div>
+        ) : (
+          items.map((a) => (
+            <div
+              key={a.value}
+              className="grid grid-cols-[1fr_70px] items-center gap-3 border-b border-border px-6 py-2.5 text-xs last:border-b-0 hover:bg-muted/40"
+            >
+              <div className="min-w-0">
+                <div className="truncate font-mono text-[12px]">{a.value}</div>
+                <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full rounded-full bg-gradient-to-r from-rose-400 to-red-600"
+                    style={{ width: `${(a.count / max) * 100}%` }}
+                  />
+                </div>
+              </div>
+              <div className="text-right font-mono tabular-nums">{fmtCount(a.count)}</div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/features/home/components/helpers.ts b/frontend/src/features/home/components/helpers.ts
new file mode 100644
index 000000000..4294a3cc8
--- /dev/null
+++ b/frontend/src/features/home/components/helpers.ts
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next'
+
+export type TFn = ReturnType<typeof useTranslation>['t']
+
+export function fmtCount(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
+  return n.toLocaleString()
+}
+
+export function spanLabel(t: TFn, from?: string, to?: string): string {
+  if (!from || !to) return t('home.span.recent')
+  const ms = new Date(to).getTime() - new Date(from).getTime()
+  if (!Number.isFinite(ms) || ms <= 0) return t('home.span.recent')
+  const days = Math.round(ms / 86_400_000)
+  if (days >= 1) return t('home.span.days', { count: days })
+  const hours = Math.max(1, Math.round(ms / 3_600_000))
+  return t('home.span.hours', { n: hours })
+}
+
+export function shortTime(iso: string): string {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleString(undefined, { month: 'short', day: 'numeric' })
+}
diff --git a/frontend/src/features/home/pages/HomePage.tsx b/frontend/src/features/home/pages/HomePage.tsx
index 2acf101a1..4122c8f12 100644
--- a/frontend/src/features/home/pages/HomePage.tsx
+++ b/frontend/src/features/home/pages/HomePage.tsx
@@ -1,38 +1,14 @@
-import { useState } from 'react'
-import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import {
-  Activity,
-  AlertTriangle,
-  AtSign,
-  BadgeCheck,
-  Crosshair,
-  Database,
-  Flame,
-  Paperclip,
-  Server,
-  ShieldAlert,
-  Sparkles,
-  TrendingUp,
-  Workflow,
-  type LucideIcon,
-} from 'lucide-react'
-import { cn } from '@/shared/lib/utils'
-import { useSocAi } from '@/features/soc-ai/SocAiProvider'
-import { useSocAiConfigured } from '@/features/soc-ai/lib/useSocAiConfig'
-import {
-  useActivePlaybooks,
-  useAlertKpis,
-  useComplianceScores,
-  useDatasourcesOverview,
-  useOpenIncidents,
-  useSystemHealth,
-  useTopAssets,
-  useTopTechniques,
-  type HealthStatus,
-} from '../hooks/use-overview'
-
-type TFn = ReturnType<typeof useTranslation>['t']
+import { AlertTriangle, Flame, ShieldAlert, Workflow } from 'lucide-react'
+import { useActivePlaybooks, useAlertKpis, useOpenIncidents } from '../hooks/use-overview'
+import { fmtCount } from '../components/helpers'
+import { ChatHero } from '../components/ChatHero'
+import { KpiTile } from '../components/KpiTile'
+import { DatasourcesCard } from '../components/DatasourcesCard'
+import { SystemHealthCard } from '../components/SystemHealthCard'
+import { MitreTechniquesCard } from '../components/MitreTechniquesCard'
+import { TopAssetsCard } from '../components/TopAssetsCard'
+import { ComplianceCard } from '../components/ComplianceCard'
 
 export function HomePage() {
   const { t } = useTranslation()
@@ -110,540 +86,3 @@ export function HomePage() {
     </div>
   )
 }
-
-/* ─── Number / time helpers ────────────────────────────────────────────────── */
-
-function fmtCount(n: number): string {
-  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
-  return n.toLocaleString()
-}
-
-function spanLabel(t: TFn, from?: string, to?: string): string {
-  if (!from || !to) return t('home.span.recent')
-  const ms = new Date(to).getTime() - new Date(from).getTime()
-  if (!Number.isFinite(ms) || ms <= 0) return t('home.span.recent')
-  const days = Math.round(ms / 86_400_000)
-  if (days >= 1) return t('home.span.days', { count: days })
-  const hours = Math.max(1, Math.round(ms / 3_600_000))
-  return t('home.span.hours', { n: hours })
-}
-
-/* ─── AI chat hero ─────────────────────────────────────────────────────────── */
-
-const SUGGESTION_KEYS = ['threatHunt', 'observableTriage', 'writeRule', 'systemStatus'] as const
-
-function ChatHero() {
-  const { t } = useTranslation()
-  const configured = useSocAiConfigured()
-  const { submit } = useSocAi()
-  const [value, setValue] = useState('')
-
-  // Hidden entirely until SOC-AI has a provider configured — same gate the
-  // floating composer/panel use, so we never show a dead chat box.
-  if (!configured) return null
-
-  const send = () => {
-    const text = value.trim()
-    if (!text) return
-    submit(text)
-    setValue('')
-  }
-
-  return (
-    <section className="flex flex-col items-center">
-      <h2 className="mb-4 text-center text-base font-medium text-foreground">{t('home.hero.title')}</h2>
-      <div className="relative w-full max-w-3xl">
-        <div
-          aria-hidden
-          className="absolute -inset-px rounded-xl bg-[conic-gradient(from_180deg_at_50%_50%,#1a8cff_0deg,#0ea5e9_120deg,#2563eb_240deg,#1a8cff_360deg)] opacity-50 blur-[1px]"
-        />
-        <div className="relative rounded-xl bg-card p-4">
-          <textarea
-            rows={3}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault()
-                send()
-              }
-            }}
-            placeholder={t('home.hero.placeholder')}
-            className="w-full resize-none border-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
-          />
-          <div className="mt-2 flex items-center justify-between">
-            <div className="flex items-center gap-2 text-muted-foreground">
-              <IconBtn label={t('home.hero.mention')}><AtSign size={16} strokeWidth={1.75} /></IconBtn>
-              <IconBtn label={t('home.hero.attach')}><Paperclip size={16} strokeWidth={1.75} /></IconBtn>
-            </div>
-            <button
-              onClick={send}
-              disabled={!value.trim()}
-              className="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-sm hover:opacity-90 disabled:opacity-40"
-              aria-label={t('home.hero.send')}
-            >
-              <Sparkles size={14} strokeWidth={2} />
-            </button>
-          </div>
-        </div>
-      </div>
-      <div className="mt-4 flex flex-wrap justify-center gap-2">
-        {SUGGESTION_KEYS.map((key) => {
-          const label = t(`home.hero.suggestions.${key}`)
-          return (
-            <button
-              key={key}
-              onClick={() => submit(label)}
-              className="rounded-full border border-border bg-card px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-            >
-              {label}
-            </button>
-          )
-        })}
-      </div>
-    </section>
-  )
-}
-
-function IconBtn({ children, label }: { children: React.ReactNode; label: string }) {
-  return (
-    <button
-      aria-label={label}
-      title={label}
-      className="flex h-7 w-7 items-center justify-center rounded-md hover:bg-muted hover:text-foreground"
-    >
-      {children}
-    </button>
-  )
-}
-
-/* ─── KPI tiles ────────────────────────────────────────────────────────────── */
-
-function KpiTile({
-  icon: Icon,
-  label,
-  value,
-  sublabel,
-  sparkline,
-  accent,
-  loading,
-  href,
-}: {
-  icon: LucideIcon
-  label: string
-  value: string
-  sublabel?: string
-  sparkline?: number[]
-  accent: string
-  loading?: boolean
-  href?: string
-}) {
-  const inner = (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-4 transition-colors hover:border-primary/40">
-      <div className="flex items-center gap-2 text-xs text-muted-foreground">
-        <Icon size={14} strokeWidth={1.75} className={accent} />
-        {label}
-      </div>
-      {loading ? (
-        <div className="mt-2 h-8 w-16 animate-pulse rounded bg-muted" />
-      ) : (
-        <div className="mt-2 text-3xl font-semibold tracking-tight tabular-nums">{value}</div>
-      )}
-      <div className="mt-3 -mx-1 min-h-[36px]">
-        {sparkline && sparkline.length > 1 ? (
-          <Sparkline data={sparkline} accent={accent} />
-        ) : sublabel ? (
-          <span className="text-xs text-muted-foreground">{sublabel}</span>
-        ) : null}
-      </div>
-    </div>
-  )
-  return href ? (
-    <Link to={href} className="block h-full">
-      {inner}
-    </Link>
-  ) : (
-    inner
-  )
-}
-
-function Sparkline({ data, accent }: { data: number[]; accent: string }) {
-  const w = 200
-  const h = 36
-  const max = Math.max(...data)
-  const min = Math.min(...data)
-  const range = max - min || 1
-  const xs = data.map((_, i) => (i * w) / (data.length - 1))
-  const ys = data.map((v) => h - ((v - min) / range) * (h - 4) - 2)
-  const path = data.map((_, i) => `${i === 0 ? 'M' : 'L'} ${xs[i]} ${ys[i]}`).join(' ')
-  const area = `${path} L ${xs[xs.length - 1]} ${h} L ${xs[0]} ${h} Z`
-  return (
-    <svg viewBox={`0 0 ${w} ${h}`} className="h-9 w-full" preserveAspectRatio="none">
-      <path d={area} className={cn('opacity-15', accent.replace('text-', 'fill-'))} />
-      <path d={path} fill="none" strokeWidth="1.75" strokeLinejoin="round" className={cn('stroke-current', accent)} />
-    </svg>
-  )
-}
-
-/* ─── Datasources ──────────────────────────────────────────────────────────── */
-
-function DatasourcesCard() {
-  const { t } = useTranslation()
-  const ds = useDatasourcesOverview()
-  return (
-    <div className="h-full rounded-xl border border-border bg-card">
-      <CardHeader title={t('home.datasources.title')} icon={Database} action={{ label: t('home.datasources.viewAll'), href: '/datasources' }} />
-      <div className="flex flex-wrap items-end gap-x-10 gap-y-4 px-6 pt-2">
-        <div>
-          {ds.isLoading ? (
-            <div className="h-12 w-20 animate-pulse rounded bg-muted" />
-          ) : (
-            <div className="text-5xl font-semibold leading-none tracking-tight text-emerald-500 tabular-nums dark:text-emerald-400">
-              {fmtCount(ds.activeSources)}
-            </div>
-          )}
-          <div className="mt-2 text-xs text-muted-foreground">
-            <span className="text-foreground">{t('home.datasources.ofTotal', { n: fmtCount(ds.total) })}</span>{' '}
-            {t('home.datasources.datasources')}
-            <br />
-            {t('home.datasources.sendingData')}
-          </div>
-        </div>
-        <div>
-          <div className="flex items-baseline gap-2">
-            {ds.isLoading ? (
-              <div className="h-12 w-28 animate-pulse rounded bg-muted" />
-            ) : (
-              <span className="text-5xl font-semibold leading-none tracking-tight tabular-nums">
-                {fmtCount(ds.events)}
-              </span>
-            )}
-            <TrendingUp size={20} strokeWidth={2} className="text-emerald-500 dark:text-emerald-400" />
-          </div>
-          <div className="mt-2 text-xs text-muted-foreground">
-            {t('home.datasources.totalEvents')}
-            <br />
-            {spanLabel(t, ds.from, ds.to)}
-          </div>
-        </div>
-      </div>
-      <div className="px-2 pb-2 pt-4">
-        <EventsChart points={ds.points} loading={ds.isLoading} />
-      </div>
-    </div>
-  )
-}
-
-function EventsChart({ points, loading }: { points: { t: string; count: number }[]; loading: boolean }) {
-  const { t } = useTranslation()
-  const w = 700
-  const h = 180
-  const pl = 44
-  const pr = 16
-  const pt = 10
-  const pb = 24
-  const innerW = w - pl - pr
-  const innerH = h - pt - pb
-
-  if (loading) {
-    return <div className="mx-4 h-44 animate-pulse rounded-lg bg-muted" />
-  }
-  if (points.length < 2) {
-    return (
-      <div className="flex h-44 items-center justify-center text-xs text-muted-foreground">
-        {t('home.datasources.noData')}
-      </div>
-    )
-  }
-
-  const counts = points.map((p) => p.count)
-  const max = Math.max(...counts, 1)
-  const xs = points.map((_, i) => pl + (i * innerW) / (points.length - 1))
-  const ys = points.map((v) => pt + innerH - (v.count / max) * innerH)
-  const linePath = points.map((_, i) => `${i === 0 ? 'M' : 'L'} ${xs[i]} ${ys[i]}`).join(' ')
-  const areaPath = `${linePath} L ${xs[xs.length - 1]} ${pt + innerH} L ${xs[0]} ${pt + innerH} Z`
-
-  // Two reference gridlines (half + full scale) with compact labels.
-  const grids = [max / 2, max]
-  // A handful of evenly-spaced x labels so the axis stays readable.
-  const labelEvery = Math.max(1, Math.ceil(points.length / 6))
-
-  return (
-    <svg viewBox={`0 0 ${w} ${h}`} className="h-44 w-full" preserveAspectRatio="none">
-      <defs>
-        <pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
-          <line x1="0" y1="0" x2="0" y2="6" className="stroke-foreground/5" strokeWidth="1" />
-        </pattern>
-        <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
-          <stop offset="0" stopColor="#22d3ee" />
-          <stop offset="1" stopColor="#1a8cff" />
-        </linearGradient>
-      </defs>
-      <rect x={pl} y={pt} width={innerW} height={innerH} fill="url(#hatch)" />
-      <g className="fill-muted-foreground" fontSize="10">
-        {grids.map((v) => (
-          <text key={v} x={pl - 6} y={pt + innerH - (v / max) * innerH + 3} textAnchor="end">
-            {fmtCount(Math.round(v))}
-          </text>
-        ))}
-      </g>
-      {grids.map((v) => (
-        <line
-          key={v}
-          x1={pl}
-          x2={pl + innerW}
-          y1={pt + innerH - (v / max) * innerH}
-          y2={pt + innerH - (v / max) * innerH}
-          className="stroke-border/40"
-          strokeDasharray="2 4"
-        />
-      ))}
-      <path d={areaPath} className="fill-primary/10" />
-      <path d={linePath} fill="none" stroke="url(#lineGrad)" strokeWidth="2" strokeLinejoin="round" />
-      <g className="fill-muted-foreground" fontSize="10">
-        {points.map((p, i) =>
-          i % labelEvery === 0 ? (
-            <text key={i} x={xs[i]} y={h - 6} textAnchor="middle">
-              {shortTime(p.t)}
-            </text>
-          ) : null,
-        )}
-      </g>
-    </svg>
-  )
-}
-
-function shortTime(iso: string): string {
-  const d = new Date(iso)
-  if (Number.isNaN(d.getTime())) return ''
-  return d.toLocaleString(undefined, { month: 'short', day: 'numeric' })
-}
-
-/* ─── MITRE ATT&CK top techniques ──────────────────────────────────────────── */
-
-function MitreTechniquesCard() {
-  const { t } = useTranslation()
-  const { items, isLoading } = useTopTechniques()
-  const max = Math.max(...items.map((m) => m.count), 1)
-  return (
-    <div className="h-full rounded-xl border border-border bg-card">
-      <CardHeader
-        title={t('home.mitre.title')}
-        icon={Crosshair}
-        iconClass="text-rose-500"
-        action={{ label: t('home.mitre.explore'), href: '/threat-management/alerts' }}
-      />
-      <div className="space-y-2.5 px-6 pb-5">
-        {isLoading ? (
-          <SkeletonRows rows={5} />
-        ) : items.length === 0 ? (
-          <EmptyState text={t('home.mitre.empty')} />
-        ) : (
-          items.map((m) => (
-            <div key={m.value} className="grid grid-cols-[1fr_auto] items-center gap-3 text-xs">
-              <div>
-                <span className="font-medium">{m.value}</span>
-                <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted">
-                  <div
-                    className="h-full rounded-full bg-gradient-to-r from-sky-400 to-blue-600"
-                    style={{ width: `${(m.count / max) * 100}%` }}
-                  />
-                </div>
-              </div>
-              <div className="font-mono text-sm tabular-nums">{fmtCount(m.count)}</div>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  )
-}
-
-/* ─── System health (real backend / OpenSearch / SOC-AI) ───────────────────── */
-
-const HEALTH_META: Record<HealthStatus, { dot: string; badge: string }> = {
-  up: { dot: 'bg-emerald-500', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-300' },
-  degraded: { dot: 'bg-amber-500', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-300' },
-  down: { dot: 'bg-red-500', badge: 'bg-red-500/15 text-red-500 dark:text-red-300' },
-  unknown: { dot: 'bg-muted-foreground/50', badge: 'bg-muted text-muted-foreground' },
-}
-
-function SystemHealthCard() {
-  const { t } = useTranslation()
-  const { services, isLoading } = useSystemHealth()
-  return (
-    <div className="h-full rounded-xl border border-border bg-card">
-      <CardHeader title={t('home.health.title')} icon={Activity} iconClass="text-emerald-500" action={{ label: t('home.health.details'), href: '/settings/about' }} />
-      <div className="divide-y divide-border">
-        {isLoading ? (
-          <div className="px-6 py-4">
-            <SkeletonRows rows={3} />
-          </div>
-        ) : (
-          services.map((p) => {
-            const meta = HEALTH_META[p.status]
-            return (
-              <div key={p.name} className="flex items-center justify-between px-6 py-2.5 text-xs">
-                <div className="flex items-center gap-2">
-                  <span className={cn('h-2 w-2 rounded-full', meta.dot)} />
-                  <span>{p.name}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span className="font-mono text-[10px] text-muted-foreground">{p.detail}</span>
-                  <span className={cn('rounded-md px-1.5 py-0.5 text-[10px] font-medium leading-none', meta.badge)}>
-                    {t(`about.status.${p.status}`)}
-                  </span>
-                </div>
-              </div>
-            )
-          })
-        )}
-      </div>
-    </div>
-  )
-}
-
-/* ─── Top targeted assets (by alert volume) ────────────────────────────────── */
-
-function TopAssetsCard() {
-  const { t } = useTranslation()
-  const { items, isLoading } = useTopAssets()
-  const max = Math.max(...items.map((a) => a.count), 1)
-  return (
-    <div className="h-full rounded-xl border border-border bg-card">
-      <CardHeader title={t('home.assets.title')} icon={Server} action={{ label: t('home.assets.viewAll'), href: '/datasources' }} />
-      <div className="grid grid-cols-[1fr_70px] gap-3 px-6 pb-2 text-[11px] uppercase tracking-wider text-muted-foreground">
-        <div>{t('home.assets.asset')}</div>
-        <div className="text-right">{t('home.assets.alerts')}</div>
-      </div>
-      <div className="border-t border-border">
-        {isLoading ? (
-          <div className="px-6 py-4">
-            <SkeletonRows rows={5} />
-          </div>
-        ) : items.length === 0 ? (
-          <div className="px-6 py-6">
-            <EmptyState text={t('home.assets.empty')} />
-          </div>
-        ) : (
-          items.map((a) => (
-            <div
-              key={a.value}
-              className="grid grid-cols-[1fr_70px] items-center gap-3 border-b border-border px-6 py-2.5 text-xs last:border-b-0 hover:bg-muted/40"
-            >
-              <div className="min-w-0">
-                <div className="truncate font-mono text-[12px]">{a.value}</div>
-                <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted">
-                  <div
-                    className="h-full rounded-full bg-gradient-to-r from-rose-400 to-red-600"
-                    style={{ width: `${(a.count / max) * 100}%` }}
-                  />
-                </div>
-              </div>
-              <div className="text-right font-mono tabular-nums">{fmtCount(a.count)}</div>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  )
-}
-
-/* ─── Compliance score (latest snapshot per framework) ─────────────────────── */
-
-function ComplianceCard() {
-  const { t } = useTranslation()
-  const { items, isLoading } = useComplianceScores()
-  return (
-    <div className="h-full rounded-xl border border-border bg-card">
-      <CardHeader title={t('home.compliance.title')} icon={BadgeCheck} iconClass="text-emerald-500" action={{ label: t('home.compliance.reports'), href: '/compliance' }} />
-      <div className="px-6 pb-6">
-        {isLoading ? (
-          <div className="h-32 animate-pulse rounded-lg bg-muted" />
-        ) : items.length === 0 ? (
-          <EmptyState text={t('home.compliance.empty')} />
-        ) : (
-          <>
-            <div
-              className="grid items-end gap-3 h-32"
-              style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
-            >
-              {items.map((c) => (
-                <div key={c.key} className="flex h-full flex-col items-center justify-end">
-                  <div className="mb-1 font-mono text-[10px] tabular-nums">{c.score}%</div>
-                  <div
-                    className={cn(
-                      'w-full rounded-t-md',
-                      c.score >= 90
-                        ? 'bg-gradient-to-t from-emerald-600 to-emerald-400'
-                        : c.score >= 80
-                          ? 'bg-gradient-to-t from-sky-600 to-sky-400'
-                          : c.score >= 50
-                            ? 'bg-gradient-to-t from-amber-600 to-amber-400'
-                            : 'bg-gradient-to-t from-red-600 to-red-400',
-                    )}
-                    style={{ height: `${Math.max(c.score, 2)}%` }}
-                  />
-                </div>
-              ))}
-            </div>
-            <div
-              className="mt-2 grid gap-3 text-center text-[10px] uppercase tracking-wider text-muted-foreground"
-              style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
-            >
-              {items.map((c) => (
-                <div key={c.key} className="truncate" title={c.name}>
-                  {c.name}
-                </div>
-              ))}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}
-
-/* ─── Shared bits ──────────────────────────────────────────────────────────── */
-
-function SkeletonRows({ rows }: { rows: number }) {
-  return (
-    <div className="space-y-3">
-      {Array.from({ length: rows }).map((_, i) => (
-        <div key={i} className="h-3 w-full animate-pulse rounded bg-muted" />
-      ))}
-    </div>
-  )
-}
-
-function EmptyState({ text }: { text: string }) {
-  return <div className="py-4 text-center text-xs text-muted-foreground">{text}</div>
-}
-
-function CardHeader({
-  title,
-  icon: Icon,
-  iconClass,
-  action,
-}: {
-  title: string
-  icon?: LucideIcon
-  iconClass?: string
-  action?: { label: string; href: string }
-}) {
-  return (
-    <div className="flex items-center justify-between px-6 pt-5 pb-4">
-      <h3 className="flex items-center gap-2 text-sm font-semibold">
-        {Icon && <Icon size={16} strokeWidth={1.75} className={iconClass ?? 'text-muted-foreground'} />}
-        {title}
-      </h3>
-      {action && (
-        <Link to={action.href} className="text-xs font-medium text-primary hover:underline">
-          {action.label}
-        </Link>
-      )}
-    </div>
-  )
-}

From d1f68a44bf47230191c0cee557e3f0ef361bab8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Thu, 9 Jul 2026 09:24:25 -0600
Subject: [PATCH 2/2] fix[frontend](home): make agent responses be on the chat
 hero home page

---
 .../src/features/home/components/ChatHero.tsx |   4 +-
 .../home/components/HomeChatTranscript.tsx    |  29 ++++
 frontend/src/features/home/pages/HomePage.tsx |  11 +-
 .../src/features/soc-ai/SocAiProvider.tsx     |  38 +++--
 .../features/soc-ai/components/MessageRow.tsx | 138 ++++++++++++++++++
 .../features/soc-ai/components/SocAiPanel.tsx | 137 +----------------
 6 files changed, 205 insertions(+), 152 deletions(-)
 create mode 100644 frontend/src/features/home/components/HomeChatTranscript.tsx
 create mode 100644 frontend/src/features/soc-ai/components/MessageRow.tsx

diff --git a/frontend/src/features/home/components/ChatHero.tsx b/frontend/src/features/home/components/ChatHero.tsx
index 559e38f62..b784d51ad 100644
--- a/frontend/src/features/home/components/ChatHero.tsx
+++ b/frontend/src/features/home/components/ChatHero.tsx
@@ -20,7 +20,7 @@ export function ChatHero() {
   const send = () => {
     const text = value.trim()
     if (!text) return
-    submit(text)
+    submit(text, { openPanel: false, scope: 'home' })
     setValue('')
   }
 
@@ -68,7 +68,7 @@ export function ChatHero() {
           return (
             <button
               key={key}
-              onClick={() => submit(label)}
+              onClick={() => submit(label, { openPanel: false, scope: 'home' })}
               className="rounded-full border border-border bg-card px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
             >
               {label}
diff --git a/frontend/src/features/home/components/HomeChatTranscript.tsx b/frontend/src/features/home/components/HomeChatTranscript.tsx
new file mode 100644
index 000000000..9c0cb48d8
--- /dev/null
+++ b/frontend/src/features/home/components/HomeChatTranscript.tsx
@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+import { Trash2 } from 'lucide-react'
+import { useSocAi } from '@/features/soc-ai/SocAiProvider'
+import { MessageRow } from '@/features/soc-ai/components/MessageRow'
+
+export function HomeChatTranscript() {
+  const { t } = useTranslation()
+  const { homeMessages, clear } = useSocAi()
+
+  return (
+    <section className="mt-8">
+      <div className="flex justify-end">
+        <button
+          type="button"
+          onClick={() => clear('home')}
+          className="inline-flex items-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground"
+        >
+          <Trash2 size={13} />
+          {t('socAi.chat.clear')}
+        </button>
+      </div>
+      <div className="mt-4 flex flex-col gap-4 text-[13.5px] leading-relaxed">
+        {homeMessages.map((m) => (
+          <MessageRow key={m.id} message={m} />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/frontend/src/features/home/pages/HomePage.tsx b/frontend/src/features/home/pages/HomePage.tsx
index 4122c8f12..5abaf2d3d 100644
--- a/frontend/src/features/home/pages/HomePage.tsx
+++ b/frontend/src/features/home/pages/HomePage.tsx
@@ -9,18 +9,22 @@ import { SystemHealthCard } from '../components/SystemHealthCard'
 import { MitreTechniquesCard } from '../components/MitreTechniquesCard'
 import { TopAssetsCard } from '../components/TopAssetsCard'
 import { ComplianceCard } from '../components/ComplianceCard'
+import { useSocAi } from '@/features/soc-ai/SocAiProvider'
+import { HomeChatTranscript } from '../components/HomeChatTranscript'
 
 export function HomePage() {
   const { t } = useTranslation()
   const alerts = useAlertKpis()
   const incidents = useOpenIncidents()
   const playbooks = useActivePlaybooks()
+  const { homeMessages } = useSocAi()
 
   return (
     <div className="mx-auto w-full max-w-[1100px] px-6 py-10">
       <ChatHero />
 
-      <div className="mt-10 grid grid-cols-12 gap-4">
+      {homeMessages.length === 0 ? (
+        <div className="mt-10 grid grid-cols-12 gap-4">
         <div className="col-span-6 md:col-span-3">
           <KpiTile
             icon={AlertTriangle}
@@ -82,7 +86,10 @@ export function HomePage() {
         <div className="col-span-12">
           <ComplianceCard />
         </div>
-      </div>
+        </div>
+      ) : (
+        <HomeChatTranscript />
+      )}
     </div>
   )
 }
diff --git a/frontend/src/features/soc-ai/SocAiProvider.tsx b/frontend/src/features/soc-ai/SocAiProvider.tsx
index ead415b0b..78a46f72c 100644
--- a/frontend/src/features/soc-ai/SocAiProvider.tsx
+++ b/frontend/src/features/soc-ai/SocAiProvider.tsx
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useMemo, useRef, useState, type ReactNode } from 'react'
+import { createContext, useCallback, useContext, useMemo, useRef, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { extractNavigation, streamChat, type NavAction } from './lib/chat-stream'
@@ -18,16 +18,19 @@ export interface SocAiMessage {
   actions?: NavAction[]
 }
 
+export type SocAiScope = 'panel' | 'home'
+
 interface SocAiContextValue {
   open: boolean
   expanded: boolean
   messages: SocAiMessage[]
+  homeMessages: SocAiMessage[]
   openPanel: () => void
   closePanel: () => void
   togglePanel: () => void
   toggleExpand: () => void
-  submit: (text: string) => void
-  clear: () => void
+  submit: (text: string, opts?: { openPanel?: boolean; scope?: SocAiScope }) => void
+  clear: (scope?: SocAiScope) => void
 }
 
 const SocAiContext = createContext<SocAiContextValue | null>(null)
@@ -56,36 +59,43 @@ export function SocAiProvider({ children }: { children: ReactNode }) {
   const [open, setOpen] = useState(false)
   const [expanded, setExpanded] = useState(false)
   const [messages, setMessages] = useState<SocAiMessage[]>([])
+  const [homeMessages, setHomeMessages] = useState<SocAiMessage[]>([])
   const idRef = useRef(0)
   const nextId = () => ++idRef.current
   const abortRef = useRef<AbortController | null>(null)
   const location = useLocation()
   const { t, i18n } = useTranslation()
 
+  const setters: Record<SocAiScope, Dispatch<SetStateAction<SocAiMessage[]>>> = {
+    panel: setMessages,
+    home: setHomeMessages,
+  }
+
   const openPanel = useCallback(() => setOpen(true), [])
   const closePanel = useCallback(() => setOpen(false), [])
   const togglePanel = useCallback(() => setOpen((v) => !v), [])
   const toggleExpand = useCallback(() => setExpanded((v) => !v), [])
-  const clear = useCallback(() => {
+  const clear = useCallback((scope: SocAiScope = 'panel') => {
     abortRef.current?.abort()
-    setMessages([])
+    setters[scope]([])
   }, [])
 
-  const patchMsg = useCallback((id: number, fn: (m: SocAiMessage) => SocAiMessage) => {
-    setMessages((list) => list.map((m) => (m.id === id ? fn(m) : m)))
+  const patchMsg = useCallback((scope: SocAiScope, id: number, fn: (m: SocAiMessage) => SocAiMessage) => {
+    setters[scope]((list) => list.map((m) => (m.id === id ? fn(m) : m)))
   }, [])
 
   const submit = useCallback(
-    (raw: string) => {
+    (raw: string, opts?: { openPanel?: boolean; scope?: SocAiScope }) => {
       const text = raw.trim()
       if (!text) return
-      setOpen(true)
+      const scope: SocAiScope = opts?.scope ?? 'panel'
+      if (opts?.openPanel !== false) setOpen(true)
       abortRef.current?.abort()
       const ac = new AbortController()
       abortRef.current = ac
 
       const aiId = nextId()
-      setMessages((m) => [
+      setters[scope]((m) => [
         ...m,
         { id: nextId(), role: 'user', text },
         { id: aiId, role: 'ai', text: '', pending: true, steps: [] },
@@ -97,7 +107,7 @@ export function SocAiProvider({ children }: { children: ReactNode }) {
       streamChat(
         { task: text, page, lang },
         (ev) => {
-          patchMsg(aiId, (msg) => {
+          patchMsg(scope, aiId, (msg) => {
             switch (ev.kind) {
               case 'tool_call':
                 return { ...msg, steps: [...(msg.steps ?? []), { tool: ev.tool ?? 'tool', status: 'running' }] }
@@ -125,7 +135,7 @@ export function SocAiProvider({ children }: { children: ReactNode }) {
         ac.signal,
       ).catch((err) => {
         if (ac.signal.aborted) return
-        patchMsg(aiId, (msg) => ({
+        patchMsg(scope, aiId, (msg) => ({
           ...msg,
           text: err instanceof Error ? err.message : t('socAi.chat.errorUnreachable'),
           error: true,
@@ -137,8 +147,8 @@ export function SocAiProvider({ children }: { children: ReactNode }) {
   )
 
   const value = useMemo(
-    () => ({ open, expanded, messages, openPanel, closePanel, togglePanel, toggleExpand, submit, clear }),
-    [open, expanded, messages, openPanel, closePanel, togglePanel, toggleExpand, submit, clear],
+    () => ({ open, expanded, messages, homeMessages, openPanel, closePanel, togglePanel, toggleExpand, submit, clear }),
+    [open, expanded, messages, homeMessages, openPanel, closePanel, togglePanel, toggleExpand, submit, clear],
   )
 
   return <SocAiContext.Provider value={value}>{children}</SocAiContext.Provider>
diff --git a/frontend/src/features/soc-ai/components/MessageRow.tsx b/frontend/src/features/soc-ai/components/MessageRow.tsx
new file mode 100644
index 000000000..19843e456
--- /dev/null
+++ b/frontend/src/features/soc-ai/components/MessageRow.tsx
@@ -0,0 +1,138 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { AlertCircle, ArrowUpRight, Check, Copy, Loader2, Wrench, X } from 'lucide-react'
+import { cn } from '@/shared/lib/utils'
+import { useSocAi, type SocAiMessage, type ToolStep } from '../SocAiProvider'
+import type { NavAction } from '../lib/chat-stream'
+import { MarkdownMessage } from './MarkdownMessage'
+
+// Logical navigation destinations the agent may emit → app routes. Filters/time
+// travel in router state for the target page to apply (where supported).
+const DEST_ROUTE: Record<string, string> = {
+  'log-explorer': '/log-explorer',
+  alerts: '/threat-management/alerts',
+  incidents: '/threat-management/incidents',
+  adversaries: '/threat-management/adversaries',
+  compliance: '/compliance',
+  datasources: '/datasources',
+  dashboards: '/home',
+}
+
+export function MessageRow({ message }: { message: SocAiMessage }) {
+  if (message.role === 'user') {
+    return (
+      <div className="max-w-[80%] self-end rounded-2xl rounded-br-md bg-foreground/[0.07] px-3.5 py-1.5 text-foreground [overflow-wrap:anywhere]">
+        {message.text}
+      </div>
+    )
+  }
+
+  const hasSteps = (message.steps?.length ?? 0) > 0
+  return (
+    <div className="self-stretch">
+      {hasSteps && <Steps steps={message.steps!} />}
+      {message.pending && !message.text ? (
+        <TypingDots />
+      ) : message.error ? (
+        <div className="flex items-start gap-2 rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-600 dark:text-red-300">
+          <AlertCircle size={14} className="mt-0.5 shrink-0" />
+          <span>{message.text}</span>
+        </div>
+      ) : (
+        <>
+          <MarkdownMessage text={message.text} />
+          {message.actions && message.actions.length > 0 && <Actions actions={message.actions} />}
+          <CopyButton text={message.text} />
+        </>
+      )}
+    </div>
+  )
+}
+
+function Steps({ steps }: { steps: ToolStep[] }) {
+  return (
+    <div className="mb-2 space-y-1 rounded-md border border-border bg-muted/30 px-2.5 py-2">
+      {steps.map((s, i) => (
+        <div key={i} className="flex items-center gap-2 text-[11px] text-muted-foreground">
+          {s.status === 'running' ? (
+            <Loader2 size={12} className="shrink-0 animate-spin" />
+          ) : s.status === 'error' ? (
+            <X size={12} className="shrink-0 text-red-500" />
+          ) : (
+            <Check size={12} className="shrink-0 text-emerald-500" />
+          )}
+          <Wrench size={11} className="shrink-0 opacity-60" />
+          <span className="truncate font-mono">{s.tool}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function Actions({ actions }: { actions: NavAction[] }) {
+  const navigate = useNavigate()
+  const { closePanel } = useSocAi()
+
+  const go = (a: NavAction) => {
+    const route = DEST_ROUTE[a.destination]
+    if (!route) return
+    closePanel()
+    navigate(route, { state: { socaiFilters: a.filters ?? [], socaiTime: a.time } })
+  }
+
+  return (
+    <div className="mt-3 flex flex-wrap gap-2">
+      {actions
+        .filter((a) => DEST_ROUTE[a.destination])
+        .map((a, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={() => go(a)}
+            className="inline-flex items-center gap-1.5 rounded-md border border-primary/40 bg-primary/5 px-2.5 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/10"
+          >
+            {a.label || 'Open'}
+            <ArrowUpRight size={13} />
+          </button>
+        ))}
+    </div>
+  )
+}
+
+function TypingDots() {
+  return (
+    <div className="flex items-center gap-1 py-1 text-muted-foreground">
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="h-1.5 w-1.5 animate-bounce rounded-full bg-current"
+          style={{ animationDelay: `${i * 120}ms` }}
+        />
+      ))}
+    </div>
+  )
+}
+
+function CopyButton({ text }: { text: string }) {
+  const { t } = useTranslation()
+  const [copied, setCopied] = useState(false)
+  const copy = () => {
+    void navigator.clipboard?.writeText(text)
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1500)
+  }
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className={cn(
+        'mt-2.5 inline-flex h-6 items-center gap-1.5 rounded-md border border-transparent px-2 text-xs font-medium text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground',
+        copied && 'border-primary/35 bg-primary/10 text-primary',
+      )}
+    >
+      {copied ? <Check size={13} /> : <Copy size={13} />}
+      {copied ? t('socAi.chat.copied') : t('socAi.chat.copy')}
+    </button>
+  )
+}
diff --git a/frontend/src/features/soc-ai/components/SocAiPanel.tsx b/frontend/src/features/soc-ai/components/SocAiPanel.tsx
index 4d039efa8..b79ff871c 100644
--- a/frontend/src/features/soc-ai/components/SocAiPanel.tsx
+++ b/frontend/src/features/soc-ai/components/SocAiPanel.tsx
@@ -1,23 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
-import { AlertCircle, ArrowUp, ArrowUpRight, Check, Copy, Loader2, Maximize2, Minimize2, Sparkles, Trash2, Wrench, X } from 'lucide-react'
+import { ArrowUp, Maximize2, Minimize2, Sparkles, Trash2, X } from 'lucide-react'
 import { cn } from '@/shared/lib/utils'
-import { useSocAi, type SocAiMessage, type ToolStep } from '../SocAiProvider'
-import type { NavAction } from '../lib/chat-stream'
-import { MarkdownMessage } from './MarkdownMessage'
-
-// Logical navigation destinations the agent may emit → app routes. Filters/time
-// travel in router state for the target page to apply (where supported).
-const DEST_ROUTE: Record<string, string> = {
-  'log-explorer': '/log-explorer',
-  alerts: '/threat-management/alerts',
-  incidents: '/threat-management/incidents',
-  adversaries: '/threat-management/adversaries',
-  compliance: '/compliance',
-  datasources: '/datasources',
-  dashboards: '/home',
-}
+import { useSocAi } from '../SocAiProvider'
+import { MessageRow } from './MessageRow'
 
 export function SocAiPanel() {
   const { t } = useTranslation()
@@ -107,123 +93,6 @@ export function SocAiPanel() {
   )
 }
 
-function MessageRow({ message }: { message: SocAiMessage }) {
-  if (message.role === 'user') {
-    return (
-      <div className="max-w-[80%] self-end rounded-2xl rounded-br-md bg-foreground/[0.07] px-3.5 py-1.5 text-foreground [overflow-wrap:anywhere]">
-        {message.text}
-      </div>
-    )
-  }
-
-  const hasSteps = (message.steps?.length ?? 0) > 0
-  return (
-    <div className="self-stretch">
-      {hasSteps && <Steps steps={message.steps!} />}
-      {message.pending && !message.text ? (
-        <TypingDots />
-      ) : message.error ? (
-        <div className="flex items-start gap-2 rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-600 dark:text-red-300">
-          <AlertCircle size={14} className="mt-0.5 shrink-0" />
-          <span>{message.text}</span>
-        </div>
-      ) : (
-        <>
-          <MarkdownMessage text={message.text} />
-          {message.actions && message.actions.length > 0 && <Actions actions={message.actions} />}
-          <CopyButton text={message.text} />
-        </>
-      )}
-    </div>
-  )
-}
-
-function Steps({ steps }: { steps: ToolStep[] }) {
-  return (
-    <div className="mb-2 space-y-1 rounded-md border border-border bg-muted/30 px-2.5 py-2">
-      {steps.map((s, i) => (
-        <div key={i} className="flex items-center gap-2 text-[11px] text-muted-foreground">
-          {s.status === 'running' ? (
-            <Loader2 size={12} className="shrink-0 animate-spin" />
-          ) : s.status === 'error' ? (
-            <X size={12} className="shrink-0 text-red-500" />
-          ) : (
-            <Check size={12} className="shrink-0 text-emerald-500" />
-          )}
-          <Wrench size={11} className="shrink-0 opacity-60" />
-          <span className="truncate font-mono">{s.tool}</span>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function Actions({ actions }: { actions: NavAction[] }) {
-  const navigate = useNavigate()
-  const { closePanel } = useSocAi()
-
-  const go = (a: NavAction) => {
-    const route = DEST_ROUTE[a.destination]
-    if (!route) return
-    closePanel()
-    navigate(route, { state: { socaiFilters: a.filters ?? [], socaiTime: a.time } })
-  }
-
-  return (
-    <div className="mt-3 flex flex-wrap gap-2">
-      {actions
-        .filter((a) => DEST_ROUTE[a.destination])
-        .map((a, i) => (
-          <button
-            key={i}
-            type="button"
-            onClick={() => go(a)}
-            className="inline-flex items-center gap-1.5 rounded-md border border-primary/40 bg-primary/5 px-2.5 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/10"
-          >
-            {a.label || 'Open'}
-            <ArrowUpRight size={13} />
-          </button>
-        ))}
-    </div>
-  )
-}
-
-function TypingDots() {
-  return (
-    <div className="flex items-center gap-1 py-1 text-muted-foreground">
-      {[0, 1, 2].map((i) => (
-        <span
-          key={i}
-          className="h-1.5 w-1.5 animate-bounce rounded-full bg-current"
-          style={{ animationDelay: `${i * 120}ms` }}
-        />
-      ))}
-    </div>
-  )
-}
-
-function CopyButton({ text }: { text: string }) {
-  const { t } = useTranslation()
-  const [copied, setCopied] = useState(false)
-  const copy = () => {
-    void navigator.clipboard?.writeText(text)
-    setCopied(true)
-    window.setTimeout(() => setCopied(false), 1500)
-  }
-  return (
-    <button
-      type="button"
-      onClick={copy}
-      className={cn(
-        'mt-2.5 inline-flex h-6 items-center gap-1.5 rounded-md border border-transparent px-2 text-xs font-medium text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground',
-        copied && 'border-primary/35 bg-primary/10 text-primary',
-      )}
-    >
-      {copied ? <Check size={13} /> : <Copy size={13} />}
-      {copied ? t('socAi.chat.copied') : t('socAi.chat.copy')}
-    </button>
-  )
-}
 
 function IconBtn({ label, onClick, children }: { label: string; onClick: () => void; children: React.ReactNode }) {
   return (