ltcai 6.7.0 → 7.1.0

package/frontend/src/components/BrainConversation.tsx

@@ -3,13 +3,17 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ImagePlus, MessageSquare, Plus, Send, Trash2 } from "lucide-react";
 import { latticeApi } from "@/api/client";
 import { EmptyState, EntityList, SourceBadge, StructuredView } from "@/components/primitives";
+import { FeedbackState } from "@/components/FeedbackState";
 import { type BrainState, LivingBrain } from "@/components/LivingBrain";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { asArray } from "@/lib/utils";
+import { t, type Language } from "@/i18n";
+import { useAppStore } from "@/store/appStore";
 
-type Msg = { role?: string; content?: string; timestamp?: string };
+type Citation = { id: string; source: string; title: string; snippet: string; score: number | null };
+type Msg = { role?: string; content?: string; timestamp?: string; citations?: Citation[] };
 type BrainActivity = BrainState;
 type BrainVitals = {
   connected: boolean;
@@ -49,7 +53,58 @@ function usageNumber(data: unknown, key: string) {
   return Number.isFinite(value) ? value : null;
 }
 
+// Pull human-readable citation records out of the heterogeneous streaming trace.
+// The backend trace shape varies, so we defensively scan the common containers
+// (matches / sources / retrieved / context / chunks) for source-like records.
+function extractCitations(trace: unknown): Citation[] {
+  if (!trace || typeof trace !== "object") return [];
+  const record = trace as Record<string, unknown>;
+  const containerKeys = ["matches", "sources", "retrieved", "context", "chunks", "citations", "evidence"];
+  let rows: Array<Record<string, unknown>> = [];
+  for (const key of containerKeys) {
+    const candidate = asArray<Record<string, unknown>>(record[key]);
+    if (candidate.length) {
+      rows = candidate;
+      break;
+    }
+  }
+  if (!rows.length && Array.isArray(trace)) rows = trace as Array<Record<string, unknown>>;
+
+  const seen = new Set<string>();
+  const citations: Citation[] = [];
+  for (const row of rows) {
+    if (!row || typeof row !== "object") continue;
+    const title = String(row.title || row.name || row.heading || row.label || row.id || "").trim();
+    const source = String(row.source || row.type || row.origin || row.kind || row.provider || "memory").trim();
+    const snippet = String(row.snippet || row.text || row.content || row.summary || row.excerpt || "").trim();
+    if (!title && !snippet) continue;
+    const scoreRaw = Number(row.score ?? row.relevance ?? row.similarity);
+    const score = Number.isFinite(scoreRaw) ? Math.round((scoreRaw <= 1 ? scoreRaw * 100 : scoreRaw)) : null;
+    const id = String(row.id || `${source}:${title}:${snippet.slice(0, 24)}`);
+    if (seen.has(id)) continue;
+    seen.add(id);
+    citations.push({ id, source: source || "memory", title: title || snippet.slice(0, 48), snippet, score });
+    if (citations.length >= 6) break;
+  }
+  return citations;
+}
+
+// Anchor citation chips after the first N sentences (conservative heuristic).
+// Each segment carries an optional citation index so chips stay tied to text.
+function splitWithCitations(content: string, citationCount: number): Array<{ text: string; citation: number | null }> {
+  if (!citationCount || !content) return [{ text: content, citation: null }];
+  const sentences = content.match(/[^.!?。！？\n]+[.!?。！？]?\s*/g);
+  if (!sentences || sentences.length <= 1) return [{ text: content, citation: 0 }];
+  const segments: Array<{ text: string; citation: number | null }> = [];
+  sentences.forEach((sentence, index) => {
+    const citation = index < citationCount ? index : null;
+    segments.push({ text: sentence, citation });
+  });
+  return segments;
+}
+
 export function BrainConversation({ className }: { className?: string }) {
+  const language = useAppStore((state) => state.language);
   const qc = useQueryClient();
   const history = useQuery({ queryKey: ["chatHistory"], queryFn: latticeApi.chatHistory });
   const models = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
@@ -94,7 +149,20 @@ export function BrainConversation({ className }: { className?: string }) {
               return next;
             });
           },
-          onTrace: setTrace,
+          onTrace: (incoming) => {
+            setTrace(incoming);
+            const citations = extractCitations(incoming);
+            if (citations.length) {
+              setMessages((items) => {
+                const next = [...items];
+                const last = next[next.length - 1];
+                if (last && last.role === "assistant") {
+                  next[next.length - 1] = { ...last, citations };
+                }
+                return next;
+              });
+            }
+          },
         },
       );
       if (result.error) {
@@ -167,7 +235,15 @@ export function BrainConversation({ className }: { className?: string }) {
               <div key={`${msg.role || "message"}-${index}`} className={`brain-message-row ${msg.role === "user" ? "from-user" : "from-brain"}`}>
                 <div className="brain-message-bubble">
                   <div className="brain-message-role">{msg.role === "user" ? "You" : "Brain"}</div>
-                  <div className="whitespace-pre-wrap">{msg.content}</div>
+                  {msg.role === "user" ? (
+                    <div className="whitespace-pre-wrap">{msg.content}</div>
+                  ) : (
+                    <MessageWithCitations
+                      language={language}
+                      content={msg.content || ""}
+                      citations={msg.citations || []}
+                    />
+                  )}
                 </div>
               </div>
             )) : (
@@ -239,6 +315,122 @@ export function BrainConversation({ className }: { className?: string }) {
   );
 }
 
+// Renders assistant text with inline, keyboard-accessible citation chips that are
+// linked to a proof list below. Selecting a chip highlights and reveals its source.
+function MessageWithCitations({
+  language,
+  content,
+  citations,
+}: {
+  language: Language;
+  content: string;
+  citations: Citation[];
+}) {
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+  const [announce, setAnnounce] = React.useState("");
+  const listRef = React.useRef<HTMLOListElement | null>(null);
+
+  if (!citations.length) {
+    return <div className="whitespace-pre-wrap">{content}</div>;
+  }
+
+  const segments = splitWithCitations(content, citations.length);
+
+  const focusListItem = (id: string) => {
+    const node = listRef.current?.querySelector<HTMLLIElement>(`[data-citation-target="${id}"]`);
+    node?.focus?.();
+    node?.scrollIntoView?.({ block: "nearest" });
+  };
+
+  const toggle = (citation: Citation) => {
+    setActiveId((prev) => {
+      const next = prev === citation.id ? null : citation.id;
+      if (next) {
+        const idx = citations.findIndex((c) => c.id === citation.id) + 1;
+        setAnnounce(t(language, "brain.citation.announce.open", { num: idx, title: citation.title }));
+        focusListItem(citation.id);
+      } else {
+        setAnnounce(t(language, "brain.citation.announce.close"));
+      }
+      return next;
+    });
+  };
+
+  const onChipKey = (event: React.KeyboardEvent<HTMLSpanElement>, citation: Citation) => {
+    if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+      event.preventDefault();
+      toggle(citation);
+    } else if (event.key === "Escape" && activeId) {
+      event.preventDefault();
+      setActiveId(null);
+      setAnnounce(t(language, "brain.citation.announce.close"));
+    }
+  };
+
+  return (
+    <div className="brain-message-cited">
+      <div className="whitespace-pre-wrap brain-message-text">
+        {segments.map((segment, index) => {
+          const citation = segment.citation != null ? citations[segment.citation] : null;
+          const num = segment.citation != null ? segment.citation + 1 : 0;
+          return (
+            <React.Fragment key={index}>
+              {segment.text}
+              {citation ? (
+                <span
+                  role="button"
+                  tabIndex={0}
+                  className={`citation-chip ${activeId === citation.id ? "is-active" : ""}`}
+                  data-citation-id={citation.id}
+                  aria-pressed={activeId === citation.id}
+                  aria-label={t(language, "brain.citation.chip.long", { num, title: citation.title })}
+                  onClick={() => toggle(citation)}
+                  onKeyDown={(event) => onChipKey(event, citation)}
+                >
+                  {t(language, "brain.citation.chip", { num })}
+                </span>
+              ) : null}
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      <div className="brain-answer-proof" aria-label={t(language, "brain.citation.region")}>
+        <div className="brain-answer-proof-head">
+          <span>{t(language, "brain.answerProof.title")}</span>
+          <strong>{t(language, "brain.citation.count", { count: citations.length })}</strong>
+        </div>
+        <ol ref={listRef}>
+          {citations.map((citation, index) => {
+            const isActive = activeId === citation.id;
+            return (
+              <li
+                key={citation.id}
+                data-citation-target={citation.id}
+                className={isActive ? "is-cited" : ""}
+                tabIndex={-1}
+                aria-current={isActive ? "true" : undefined}
+              >
+                <span>{t(language, "brain.citation.preview.from")}{citation.source}</span>
+                <strong>{t(language, "brain.citation.chip", { num: index + 1 })} · {citation.title}</strong>
+                {citation.snippet ? (
+                  <small>{t(language, "brain.citation.preview.snippet")}{citation.snippet}</small>
+                ) : null}
+                {citation.score != null ? (
+                  <small className="brain-citation-score">{t(language, "brain.citation.score", { score: citation.score })}</small>
+                ) : null}
+              </li>
+            );
+          })}
+        </ol>
+        <small className="brain-citation-tip">{t(language, "brain.citation.keyboard.tip")}</small>
+      </div>
+
+      <div className="sr-only" role="status" aria-live="polite">{announce}</div>
+    </div>
+  );
+}
+
 function RecentConversations({
   conversations,
   result,
@@ -248,23 +440,32 @@ function RecentConversations({
   onDelete,
 }: {
   conversations: Array<Record<string, unknown>>;
-  result?: Parameters<typeof SourceBadge>[0]["result"];
+  result?: { source?: string; ok?: boolean; status?: number; error?: string };
   activeId: string | null;
   onNew: () => void;
   onSelect: (id: string) => void;
   onDelete: (id: string) => void;
 }) {
+  const language = useAppStore((state) => state.language);
   return (
     <section className="brain-side-panel">
       <div className="brain-side-head">
         <div>
           <h3>Recent conversations</h3>
-          <SourceBadge result={result} />
+          <SourceBadge result={result as Parameters<typeof SourceBadge>[0]["result"]} />
         </div>
         <Button variant="outline" size="sm" onClick={onNew}><Plus className="h-4 w-4" /> New</Button>
       </div>
       <div className="brain-conversation-list soft-scrollbar">
-        {conversations.length ? conversations.slice(0, 8).map((item) => {
+        {!result?.ok && result?.source === "unavailable" ? (
+          <FeedbackState
+            tone="error"
+            language={language}
+            title={t(language, "feedback.error.title")}
+            body={result.error || t(language, "feedback.error.body")}
+            onAction={() => window.location.reload()}
+          />
+        ) : conversations.length ? conversations.slice(0, 8).map((item) => {
           const id = String(item.id || item.conversation_id || "");
           return (
             <div key={id} className={`brain-conversation-item ${activeId === id ? "is-active" : ""}`}>
@@ -277,13 +478,23 @@ function RecentConversations({
               </button>
             </div>
           );
-        }) : <EmptyState title="No conversations yet" detail="New exchanges will appear here." />}
+        }) : (
+          <FeedbackState
+            tone="empty"
+            language={language}
+            title="No conversations yet"
+            body="New exchanges will appear here."
+            actionLabel="Start a conversation"
+            onAction={onNew}
+          />
+        )}
       </div>
     </section>
   );
 }
 
 function MemoryNearby({ question, trace }: { question: string; trace: unknown }) {
+  const language = useAppStore((state) => state.language);
   const hybrid = useQuery({
     queryKey: ["brainNearbyMemory", question],
     queryFn: () => latticeApi.hybridSearch(question),
@@ -299,10 +510,23 @@ function MemoryNearby({ question, trace }: { question: string; trace: unknown })
       </div>
       {hybrid.data?.ok ? (
         <EntityList items={(hybrid.data.data as Record<string, unknown>).matches || hybrid.data.data} titleKey="title" metaKey="type" limit={4} />
+      ) : hybrid.data?.source === "unavailable" ? (
+        <FeedbackState
+          tone="error"
+          language={language}
+          title={t(language, "feedback.error.title")}
+          body={hybrid.data.error || t(language, "feedback.error.body")}
+          onAction={() => void hybrid.refetch()}
+        />
       ) : trace ? (
         <StructuredView value={trace} limit={4} />
       ) : (
-        <EmptyState title="Quiet for now" detail="Relevant memory wakes up as the conversation gets specific." />
+        <FeedbackState
+          tone="empty"
+          language={language}
+          title="Quiet for now"
+          body="Relevant memory wakes up as the conversation gets specific."
+        />
       )}
     </section>
   );

package/frontend/src/components/FeedbackState.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { AlertTriangle, Inbox, RotateCcw } from "lucide-react";
+import { t, type Language } from "@/i18n";
+
+export type FeedbackTone = "empty" | "error";
+
+/**
+ * Shared empty / error feedback surface so every view tells the user what just
+ * happened and what to do next, instead of a blank or silent failure.
+ */
+export function FeedbackState({
+  tone,
+  language,
+  title,
+  body,
+  actionLabel,
+  onAction,
+}: {
+  tone: FeedbackTone;
+  language: Language;
+  title: string;
+  body?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}) {
+  const isError = tone === "error";
+  const resolvedActionLabel = actionLabel || (isError ? t(language, "feedback.retry") : undefined);
+  return (
+    <div className={`feedback-state is-${tone}`} role={isError ? "alert" : "status"}>
+      <span className="feedback-state-icon" aria-hidden="true">
+        {isError ? <AlertTriangle className="h-4 w-4" /> : <Inbox className="h-4 w-4" />}
+      </span>
+      <div className="feedback-state-body">
+        <strong>{title}</strong>
+        {body ? <span>{body}</span> : null}
+      </div>
+      {resolvedActionLabel && onAction ? (
+        <button type="button" className="feedback-state-action" onClick={onAction}>
+          {isError ? <RotateCcw className="h-3.5 w-3.5" /> : null}
+          {resolvedActionLabel}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/frontend/src/components/WorkspaceProfileSwitcher.tsx

@@ -0,0 +1,176 @@
+import * as React from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, ChevronDown, UserCircle, Building2, ArrowRightLeft } from "lucide-react";
+import { latticeApi } from "@/api/client";
+import { t, type Language } from "@/i18n";
+import { useAppStore } from "@/store/appStore";
+import { asArray } from "@/lib/utils";
+
+type WorkspaceRow = Record<string, unknown>;
+
+function workspaceId(row: WorkspaceRow): string {
+  return String(row.workspace_id || row.id || "");
+}
+
+function workspaceName(language: Language, row: WorkspaceRow): string {
+  const name = row.name;
+  if (typeof name === "string" && name.trim()) return name;
+  const id = workspaceId(row);
+  return id || t(language, "shell.workspace.personal");
+}
+
+function ownerEmail(profile: unknown): string | null {
+  if (!profile || typeof profile !== "object") return null;
+  const record = profile as Record<string, unknown>;
+  const candidate = record.email || record.owner_email || record.username || record.name;
+  return typeof candidate === "string" && candidate.trim() ? candidate : null;
+}
+
+/**
+ * Discoverable workspace + profile switcher for the Brain shell.
+ * Surfaces the active workspace and signed-in owner, and lets the user
+ * switch workspace or jump to account/workspace settings without hunting
+ * through the Settings tabs.
+ */
+export function WorkspaceProfileSwitcher({ language }: { language: Language }) {
+  const qc = useQueryClient();
+  const workspaceIdState = useAppStore((state) => state.workspaceId);
+  const setWorkspaceId = useAppStore((state) => state.setWorkspaceId);
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+  const profile = useQuery({ queryKey: ["profile"], queryFn: latticeApi.profile });
+  const registry = useQuery({ queryKey: ["workspaceRegistry"], queryFn: latticeApi.workspaceRegistry });
+
+  const workspaces = asArray<WorkspaceRow>(
+    (registry.data?.data as Record<string, unknown> | undefined)?.workspaces,
+  );
+  const owner = ownerEmail(profile.data?.data);
+
+  const activeWorkspace = workspaces.find((row) => workspaceId(row) === workspaceIdState);
+  const activeLabel = activeWorkspace
+    ? workspaceName(language, activeWorkspace)
+    : workspaceIdState || t(language, "shell.workspace.personal");
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onPointer = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("mousedown", onPointer);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onPointer);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const handleSwitch = (id: string) => {
+    if (id && id !== workspaceIdState) {
+      setWorkspaceId(id);
+      // Workspace scoping changes server responses; drop cached views.
+      qc.invalidateQueries();
+    }
+    setOpen(false);
+  };
+
+  return (
+    <div className="workspace-profile-switcher" ref={containerRef}>
+      <button
+        type="button"
+        className="workspace-profile-trigger"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-label={t(language, "shell.workspace.label")}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <Building2 className="h-3.5 w-3.5" aria-hidden="true" />
+        <span className="workspace-profile-trigger-text">
+          <span className="workspace-profile-trigger-name">{activeLabel}</span>
+          <span className="workspace-profile-trigger-owner">{owner || t(language, "shell.profile.signedOut")}</span>
+        </span>
+        <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
+      </button>
+
+      {open ? (
+        <div className="workspace-profile-popover" role="dialog" aria-label={t(language, "shell.workspace.label")}>
+          <section className="workspace-profile-section" aria-label={t(language, "shell.profile.label")}>
+            <div className="workspace-profile-section-head">
+              <UserCircle className="h-3.5 w-3.5" aria-hidden="true" />
+              <span>{t(language, "shell.profile.label")}</span>
+            </div>
+            <div className="workspace-profile-owner-row">
+              <span className="workspace-profile-owner-label">{t(language, "shell.profile.owner")}</span>
+              <span className="workspace-profile-owner-value">{owner || t(language, "shell.profile.signedOut")}</span>
+            </div>
+            <button
+              type="button"
+              className="workspace-profile-link"
+              onClick={() => {
+                setOpen(false);
+                window.location.hash = "/account";
+              }}
+            >
+              {t(language, "shell.profile.manage")}
+            </button>
+          </section>
+
+          <section className="workspace-profile-section" aria-label={t(language, "shell.workspace.current")}>
+            <div className="workspace-profile-section-head">
+              <Building2 className="h-3.5 w-3.5" aria-hidden="true" />
+              <span>{t(language, "shell.workspace.current")}</span>
+            </div>
+            {workspaces.length === 0 ? (
+              <p className="workspace-profile-empty">{t(language, "shell.workspace.empty")}</p>
+            ) : (
+              <ul className="workspace-profile-list">
+                {workspaces.map((row) => {
+                  const id = workspaceId(row);
+                  const isActive = id === workspaceIdState;
+                  return (
+                    <li key={id}>
+                      <button
+                        type="button"
+                        className={`workspace-profile-item ${isActive ? "is-active" : ""}`}
+                        aria-current={isActive ? "true" : undefined}
+                        onClick={() => handleSwitch(id)}
+                      >
+                        <span className="workspace-profile-item-name">{workspaceName(language, row)}</span>
+                        {isActive ? (
+                          <span className="workspace-profile-item-flag">
+                            <Check className="h-3 w-3" aria-hidden="true" />
+                            {t(language, "shell.workspace.active")}
+                          </span>
+                        ) : (
+                          <span className="workspace-profile-item-switch">
+                            <ArrowRightLeft className="h-3 w-3" aria-hidden="true" />
+                            {t(language, "shell.workspace.switch")}
+                          </span>
+                        )}
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+            <button
+              type="button"
+              className="workspace-profile-link"
+              onClick={() => {
+                setOpen(false);
+                window.location.hash = "/workspace-admin";
+              }}
+            >
+              {t(language, "shell.workspace.manageSpaces")}
+            </button>
+          </section>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/frontend/src/components/onboarding/AnalysisScreen.tsx

@@ -23,8 +23,11 @@ export function AnalysisScreen({
 
       <div className="ritual-fact-grid">
         {detected.map((item, idx) => (
-          <div key={idx} className="ritual-fact">
-            <div className="ritual-fact-label">{item.label}</div>
+          <div key={idx} className="ritual-fact ritual-fact--visual">
+            <div className="ritual-fact-head">
+              <span className="ritual-hardware-icon" aria-hidden="true">{item.icon}</span>
+              <div className="ritual-fact-label">{item.label}</div>
+            </div>
             <div className="ritual-fact-value">{item.value}</div>
             <div className="ritual-fact-detail">{item.detail}</div>
           </div>
@@ -57,11 +60,11 @@ export function AnalysisScreen({
 function buildDetectedFacts(analysis: FlowAnalysis | null, language: Language) {
   if (!analysis) {
     return [
-      { label: t(language, "flow.analysis.fact.computer"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.computerDetail") },
-      { label: t(language, "flow.analysis.fact.memory"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.memoryDetail") },
-      { label: t(language, "flow.analysis.fact.graphics"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.graphicsDetail") },
-      { label: t(language, "flow.analysis.fact.support"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.supportDetail") },
-      { label: t(language, "flow.analysis.fact.models"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.modelsDetail") },
+      { icon: t(language, "flow.analysis.hardware.icon.chip"), label: t(language, "flow.analysis.hardware.label.chip"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.computerDetail") },
+      { icon: t(language, "flow.analysis.hardware.icon.ram"), label: t(language, "flow.analysis.hardware.label.ram"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.memoryDetail") },
+      { icon: t(language, "flow.analysis.hardware.icon.gpu"), label: t(language, "flow.analysis.hardware.label.gpu"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.graphicsDetail") },
+      { icon: t(language, "flow.analysis.hardware.icon.support"), label: t(language, "flow.analysis.hardware.label.support"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.supportDetail") },
+      { icon: t(language, "flow.analysis.hardware.icon.models"), label: t(language, "flow.analysis.hardware.label.models"), value: t(language, "flow.analysis.checking"), detail: t(language, "flow.analysis.fact.modelsDetail") },
     ];
   }
   const setupEnv = asRecord(analysis.setup?.environment);
@@ -81,27 +84,32 @@ function buildDetectedFacts(analysis: FlowAnalysis | null, language: Language) {
   ];
   return [
     {
-      label: t(language, "flow.analysis.fact.computer"),
+      icon: t(language, "flow.analysis.hardware.icon.chip"),
+      label: t(language, "flow.analysis.hardware.label.chip"),
       value: appleSilicon ? t(language, "flow.analysis.apple") : friendlyOs(profile.os, language),
       detail: t(language, "flow.analysis.readyDetail"),
     },
     {
-      label: t(language, "flow.analysis.fact.memory"),
+      icon: t(language, "flow.analysis.hardware.icon.ram"),
+      label: t(language, "flow.analysis.hardware.label.ram"),
       value: ramGb ? `${Math.round(ramGb)} GB` : t(language, "flow.analysis.detected"),
       detail: t(language, "flow.analysis.memoryReadyDetail"),
     },
     {
-      label: t(language, "flow.analysis.fact.graphics"),
+      icon: t(language, "flow.analysis.hardware.icon.gpu"),
+      label: t(language, "flow.analysis.hardware.label.gpu"),
       value: gpu.vendor || sysinfo.gpu_mem_gb ? t(language, "flow.analysis.localReady") : t(language, "flow.analysis.standardLocal"),
       detail: t(language, "flow.analysis.graphicsReadyDetail"),
     },
     {
-      label: t(language, "flow.analysis.fact.support"),
+      icon: t(language, "flow.analysis.hardware.icon.support"),
+      label: t(language, "flow.analysis.hardware.label.support"),
       value: installedRuntimes.length ? t(language, "flow.analysis.supportReady") : t(language, "flow.analysis.supportInstall"),
       detail: installedRuntimes.length ? t(language, "flow.analysis.supportReadyDetail") : t(language, "flow.analysis.supportInstallDetail"),
     },
     {
-      label: t(language, "flow.analysis.fact.models"),
+      icon: t(language, "flow.analysis.hardware.icon.models"),
+      label: t(language, "flow.analysis.hardware.label.models"),
       value: loadedModels.length ? t(language, "flow.analysis.modelsInstalled", { count: loadedModels.length }) : t(language, "flow.analysis.noModels"),
       detail: loadedModels.length ? t(language, "flow.analysis.modelsReadyDetail") : t(language, "flow.analysis.modelsInstallDetail"),
     },