Backlog/v12 home chat

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>
+  )
+}

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, { openPanel: false, scope: 'home' })
+    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, { 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}
+            </button>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}