fix[frontend](home): make agent responses be on the chat hero home page

Author: AlexSanchez-bit

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}

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

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>

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