ltcai 6.2.0 → 6.3.1

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

@@ -0,0 +1,59 @@
+import { Button } from "@/components/ui/button";
+import { t, type Language } from "@/i18n";
+import { useAppStore } from "@/store/appStore";
+import { fallbackModel, type RecommendedModel } from "./recommendationModel";
+
+export function RecommendationScreen({
+  recommendations,
+  onBack,
+  onSkipModel,
+  onSelect,
+}: {
+  recommendations: RecommendedModel[];
+  onBack: () => void;
+  onSkipModel: () => void;
+  onSelect: (model: RecommendedModel) => void;
+}) {
+  const language = useAppStore((state) => state.language);
+  const items = recommendations.length ? recommendations : [fallbackModel()];
+  return (
+    <div>
+      <div className="ritual-title">{t(language, "flow.recommend.title")}</div>
+      <div className="ritual-subtitle">{t(language, "flow.recommend.body")}</div>
+
+      <div className="ritual-model-list">
+        {items[0]?.supported ? (
+          <Button onClick={() => onSelect(items[0])} className="ritual-primary-model-button">
+            {t(language, "flow.recommend.primary")}
+          </Button>
+        ) : null}
+        {items.slice(0, 3).map((model, index) => (
+          <button
+            key={`${model.role}-${model.id}`}
+            className="ritual-model-card"
+            onClick={() => model.supported && onSelect(model)}
+            disabled={!model.supported}
+          >
+            <div className="role">{rankLabel(model.role, index, language)}</div>
+            <div className="name">{model.shortName}</div>
+            <div className="reason">{model.reason} · {model.size || t(language, "flow.recommend.sizeReady")}</div>
+            {!model.supported && <div className="ritual-model-warning">{t(language, "flow.recommend.unsupported")}</div>}
+          </button>
+        ))}
+      </div>
+
+      <div className="ritual-action-row">
+        <Button variant="ghost" onClick={onBack}>{t(language, "flow.recommend.back")}</Button>
+        <Button variant="outline" onClick={onSkipModel}>{t(language, "flow.recommend.skip")}</Button>
+        <div className="ritual-muted-hint">{t(language, "flow.recommend.hint")}</div>
+      </div>
+    </div>
+  );
+}
+
+function rankLabel(role: RecommendedModel["role"], index: number, language: Language) {
+  if (role === "best") return t(language, "flow.recommend.rank.best");
+  if (role === "faster") return t(language, "flow.recommend.rank.faster");
+  if (role === "advanced") return t(language, "flow.recommend.rank.advanced");
+  return t(language, "flow.recommend.rank.choice", { index: index + 1 });
+}

package/frontend/src/components/onboarding/recommendationModel.ts

@@ -0,0 +1,132 @@
+import { asArray } from "@/lib/utils";
+
+export type FlowStep = "login" | "analysis" | "recommend" | "install";
+export type ApiData = Record<string, unknown>;
+
+export type FlowAnalysis = {
+  setup?: ApiData | null;
+  models?: ApiData | null;
+  recommendations?: ApiData | null;
+  sysinfo?: ApiData | null;
+};
+
+export type RecommendedModel = {
+  id: string;
+  loadId: string;
+  engine: string;
+  name: string;
+  shortName: string;
+  family: string;
+  size: string;
+  role: "best" | "faster" | "advanced";
+  reason: string;
+  supported: boolean;
+  downloadRequired: boolean;
+  downloadSize: string;
+  storageLocation: string;
+  externalHost: string;
+};
+
+export function buildRecommendations(analysis: FlowAnalysis | null): RecommendedModel[] {
+  const models = asRecord(analysis?.models);
+  const modelRows = [
+    ...asArray<ApiData>(models.recommended),
+    ...asArray<ApiData>(models.catalog),
+  ];
+  const recommendationRoot = asRecord(analysis?.recommendations?.recommendations);
+  const recRows = asArray<ApiData>(recommendationRoot.models);
+  const topPick = asRecord(recommendationRoot.top_pick);
+  const merged = new Map<string, ApiData>();
+  for (const row of [...recRows, ...modelRows]) {
+    const id = String(row.id || row.model_id || row.recommended_load_id || "");
+    if (!id) continue;
+    merged.set(id, { ...(merged.get(id) || {}), ...row });
+  }
+  if (topPick.id && !merged.has(String(topPick.id))) merged.set(String(topPick.id), topPick);
+  const all = Array.from(merged.values()).map(toRecommendedModel).filter((item) => item.id);
+  const supported = all.filter((item) => item.supported);
+  const pool = supported.length ? supported : all;
+  const byName = (pattern: RegExp) => pool.find((item) => pattern.test(`${item.name} ${item.id}`));
+  const byId = (id?: unknown) => pool.find((item) => item.id === String(id));
+  const best = byId(topPick.id) || byName(/gemma.*12|12b/i) || pool[0];
+  const faster = pool.find((item) => item.id !== best?.id && /qwen|8b|7b/i.test(`${item.name} ${item.id}`)) || pool.find((item) => item.id !== best?.id);
+  const advanced = pool.find((item) => item.id !== best?.id && item.id !== faster?.id && /26b|32b|70b|advanced/i.test(`${item.name} ${item.id}`))
+    || pool.find((item) => item.id !== best?.id && item.id !== faster?.id);
+  return [
+    best ? { ...best, role: "best" as const, reason: best.reason || "best" } : null,
+    faster ? { ...faster, role: "faster" as const, reason: faster.reason || "faster" } : null,
+    advanced ? { ...advanced, role: "advanced" as const, reason: advanced.reason || "advanced" } : null,
+  ].filter(Boolean) as RecommendedModel[];
+}
+
+export function fallbackModel(): RecommendedModel {
+  return {
+    id: "mlx-community/Qwen3-VL-8B-Instruct-4bit",
+    loadId: "mlx-community/Qwen3-VL-8B-Instruct-4bit",
+    engine: "local_mlx",
+    name: "Qwen3-VL 8B",
+    shortName: "Qwen 3",
+    family: "Qwen 3",
+    size: "",
+    role: "best",
+    reason: "best",
+    supported: true,
+    downloadRequired: false,
+    downloadSize: "",
+    storageLocation: "~/.latticeai/models",
+    externalHost: "",
+  };
+}
+
+function toRecommendedModel(row: ApiData): RecommendedModel {
+  const compatibility = asRecord(row.runtime_compatibility);
+  const id = String(row.id || row.model_id || row.recommended_load_id || "");
+  const loadId = String(row.recommended_load_id || row.load_id || id);
+  const name = String(row.display_name || row.name || id || "recommended_brain");
+  const supported = row.load_status !== "unsupported"
+    && row.load_status !== "runtime_update_needed"
+    && row.status !== "not_recommended"
+    && compatibility.supported !== false;
+  return {
+    id,
+    loadId,
+    engine: String(row.recommended_engine || row.engine || "local_mlx"),
+    name,
+    shortName: friendlyModelName(name || id),
+    family: friendlyModelName(String(row.family || name || "local_brain")),
+    size: String(row.size || ""),
+    role: "best",
+    reason: String(row.reason || ""),
+    supported,
+    downloadRequired: Boolean(row.download_required),
+    downloadSize: String(row.download_size || row.size || ""),
+    storageLocation: String(row.storage_location || row.local_path || "~/.latticeai/models"),
+    externalHost: externalHostLabel(row),
+  };
+}
+
+function externalHostLabel(row: ApiData) {
+  const raw = String(row.source_url || row.download_url || row.repository || row.provider || row.id || "");
+  if (!raw) return "";
+  if (/huggingface|hf\\.co|mlx-community/i.test(raw)) return "huggingface";
+  if (/ollama/i.test(raw)) return "ollama";
+  return raw.replace(/^https?:\/\//, "").split("/")[0] || raw;
+}
+
+export function friendlyModelName(value: string) {
+  return String(value || "recommended_brain")
+    .replace(/^mlx-community\//i, "")
+    .replace(/[-_]?Instruct/gi, "")
+    .replace(/[-_]?4bit/gi, "")
+    .replace(/Qwen3[-_ ]?VL/gi, "Qwen 3")
+    .replace(/Qwen3/gi, "Qwen 3")
+    .replace(/Gemma[-_ ]?4/gi, "Gemma 4")
+    .replace(/A4B/gi, "")
+    .replace(/[-_]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+export function asRecord(value: unknown): ApiData {
+  return value && typeof value === "object" && !Array.isArray(value) ? value as ApiData : {};
+}

package/frontend/src/features/admin/AdminConsole.tsx

@@ -29,7 +29,7 @@ export function AdminConsole({ onBack }: { onBack: () => void }) {
   const retention = (retentionQ.data?.data || {}) as ApiRecord;
 
   return (
-    <main className="admin-console" aria-label="Lattice Admin">
+    <main className="admin-console" aria-label={t(language, "admin.aria.console")}>
       <header className="admin-console-header">
         <button className="admin-back-button" type="button" onClick={onBack}>
           <ArrowLeft className="h-4 w-4" />

package/frontend/src/features/brain/BrainCarePanel.tsx

@@ -0,0 +1,254 @@
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Archive, ChevronDown, DatabaseBackup, Download, Eye, RotateCcw, ShieldCheck } from "lucide-react";
+import { latticeApi, type ApiResult } from "@/api/client";
+import { Button } from "@/components/ui/button";
+import { t, type Language } from "@/i18n";
+import { isRecord, textValue } from "./brainData";
+
+export function BrainCarePanel({ language }: { language: Language }) {
+  const qc = useQueryClient();
+  const [expanded, setExpanded] = React.useState(false);
+  const [archivePath, setArchivePath] = React.useState("");
+  const [passphrase, setPassphrase] = React.useState("");
+  const [passphraseConfirm, setPassphraseConfirm] = React.useState("");
+  const [latestResult, setLatestResult] = React.useState<ApiResult | null>(null);
+  const portabilityQ = useQuery({ queryKey: ["portability"], queryFn: latticeApi.graphPortability });
+  const backupHealthQ = useQuery({ queryKey: ["backupHealth"], queryFn: latticeApi.backupHealth });
+  const rememberResult = React.useCallback((result: ApiResult) => setLatestResult(result), []);
+  const pathProblem = archivePath.trim() ? archivePathProblem(archivePath.trim(), language) : "";
+  const passphraseProblem = passphrase.trim() ? passphraseStrengthProblem(passphrase, language) : "";
+  const passphrasesMatch = !passphrase || passphrase === passphraseConfirm;
+  const canArchive = Boolean(passphrase.trim()) && passphrasesMatch && !passphraseProblem;
+  const canUseExistingArchive = Boolean(archivePath.trim()) && !pathProblem;
+
+  const exportGraph = useCareMutation(() => latticeApi.graphExport(), undefined, rememberResult);
+  const backupGraph = useCareMutation(() => latticeApi.graphBackup(), () => {
+    void qc.invalidateQueries({ queryKey: ["backupHealth"] });
+    void qc.invalidateQueries({ queryKey: ["portability"] });
+  }, rememberResult);
+  const archiveBrain = useCareMutation(
+    () => latticeApi.brainArchive({ path: archivePath.trim() || null, passphrase }),
+    () => void qc.invalidateQueries({ queryKey: ["backupHealth"] }),
+    rememberResult,
+  );
+  const inspectArchive = useCareMutation(() => latticeApi.brainArchiveInspect({
+    path: archivePath.trim(),
+    passphrase: passphrase || null,
+  }), undefined, rememberResult);
+  const restorePreview = useCareMutation(() => latticeApi.brainArchiveRestore({
+    path: archivePath.trim(),
+    passphrase,
+    dry_run: true,
+    confirm: false,
+  }), undefined, rememberResult);
+
+  const portableFormat = portabilityLabel(portabilityQ.data?.data);
+  const backupStatus = backupHealthLabel(backupHealthQ.data?.data, language);
+
+  return (
+    <section className={`brain-care-panel ${expanded ? "is-expanded" : "is-collapsed"}`} aria-label={t(language, "care.title")}>
+      <button
+        className="brain-care-summary"
+        type="button"
+        aria-expanded={expanded}
+        aria-controls="brain-care-details"
+        onClick={() => setExpanded((value) => !value)}
+      >
+        <span className="brain-care-summary-main">
+          <span><ShieldCheck className="h-3.5 w-3.5" /> {t(language, "care.title")}</span>
+          <strong>{t(language, "care.subtitle")}</strong>
+        </span>
+        <div className="brain-care-proof" aria-label={t(language, "care.ownershipModel")}>
+          <span>{t(language, "care.private")}</span>
+          <span>{portableFormat}</span>
+          <span>{backupStatus}</span>
+        </div>
+        <ChevronDown className="brain-care-toggle h-4 w-4" aria-hidden="true" />
+      </button>
+
+      {expanded ? (
+        <div id="brain-care-details" className="brain-care-details">
+          <div className="brain-care-actions">
+            <CareButton
+              icon={<Download className="h-3.5 w-3.5" />}
+              label={t(language, "care.export")}
+              detail={t(language, "care.export.detail")}
+              pendingLabel={t(language, "care.working")}
+              pending={exportGraph.isPending}
+              onClick={() => exportGraph.mutate()}
+            />
+            <CareButton
+              icon={<DatabaseBackup className="h-3.5 w-3.5" />}
+              label={t(language, "care.backup")}
+              detail={t(language, "care.backup.detail")}
+              pendingLabel={t(language, "care.working")}
+              pending={backupGraph.isPending}
+              onClick={() => backupGraph.mutate()}
+            />
+            <CareButton
+              icon={<Archive className="h-3.5 w-3.5" />}
+              label={t(language, "care.archive")}
+              detail={t(language, "care.archive.detail")}
+              pendingLabel={t(language, "care.working")}
+              pending={archiveBrain.isPending}
+              disabled={!canArchive}
+              onClick={() => archiveBrain.mutate()}
+            />
+          </div>
+
+          <div className="brain-care-archive">
+            <input
+              value={archivePath}
+              onChange={(event) => setArchivePath(event.target.value)}
+              placeholder={t(language, "care.path.placeholder")}
+              aria-label={t(language, "care.path.label")}
+            />
+            <input
+              type="password"
+              value={passphrase}
+              onChange={(event) => setPassphrase(event.target.value)}
+              placeholder={t(language, "care.passphrase.placeholder")}
+              aria-label={t(language, "care.passphrase.label")}
+            />
+            <input
+              type="password"
+              value={passphraseConfirm}
+              onChange={(event) => setPassphraseConfirm(event.target.value)}
+              placeholder={t(language, "care.passphrase.confirmPlaceholder")}
+              aria-label={t(language, "care.passphrase.confirmLabel")}
+            />
+            <div className="brain-care-guidance" role="status">
+              {pathProblem ? <span className="is-error">{pathProblem}</span> : archivePath.trim() ? <span>{t(language, "care.path.ready")}</span> : null}
+              {passphraseProblem ? <span className="is-error">{passphraseProblem}</span> : passphrase ? <span>{t(language, "care.passphrase.strong")}</span> : null}
+              {!passphrasesMatch ? <span className="is-error">{t(language, "care.passphrase.mismatch")}</span> : null}
+            </div>
+            <div className="brain-care-archive-actions">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!canUseExistingArchive || inspectArchive.isPending}
+                onClick={() => inspectArchive.mutate()}
+              >
+                <Eye className="h-3.5 w-3.5" /> {t(language, "care.inspect")}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!canUseExistingArchive || !passphrase.trim() || !passphrasesMatch || restorePreview.isPending}
+                onClick={() => restorePreview.mutate()}
+              >
+                <RotateCcw className="h-3.5 w-3.5" /> {t(language, "care.restorePreview")}
+              </Button>
+            </div>
+          </div>
+
+          {latestResult ? (
+            <div className={`brain-care-result ${latestResult.ok ? "is-ok" : "is-error"}`} role="status">
+              <CareResultSummary result={latestResult} language={language} />
+            </div>
+          ) : (
+            <p className="brain-care-note">
+              {t(language, "care.note")}
+            </p>
+          )}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function useCareMutation<T extends ApiResult>(
+  mutationFn: () => Promise<T>,
+  onSuccess?: () => void,
+  onResult?: (result: T) => void,
+) {
+  return useMutation({
+    mutationFn,
+    onSuccess: (result) => {
+      onResult?.(result);
+      onSuccess?.();
+    },
+  });
+}
+
+function CareButton({
+  icon,
+  label,
+  detail,
+  pendingLabel,
+  pending,
+  disabled,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  detail: string;
+  pendingLabel: string;
+  pending?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button className="brain-care-button" type="button" disabled={disabled || pending} onClick={onClick}>
+      {icon}
+      <span>
+        <strong>{pending ? pendingLabel : label}</strong>
+        <small>{detail}</small>
+      </span>
+    </button>
+  );
+}
+
+function portabilityLabel(data: unknown) {
+  const record = isRecord(data) ? data : {};
+  return textValue(record, ["archive_format", "format", "graph_schema_version", "schema_version"], ".latticebrain");
+}
+
+function backupHealthLabel(data: unknown, language: Language) {
+  const record = isRecord(data) ? data : {};
+  const count = record.count || record.backups || record.available;
+  if (count !== undefined && count !== null && count !== "") return t(language, "care.backup.count", { count: String(count) });
+  return t(language, "care.backup.ready");
+}
+
+function CareResultSummary({ result, language }: { result: ApiResult; language: Language }) {
+  if (!result.ok) return <>{result.error || t(language, "care.result.error")}</>;
+  const data = isRecord(result.data) ? result.data : {};
+  const path = textValue(data, ["path", "archive_path", "backup_path", "export_path", "latest_backup"]);
+  const status = textValue(data, ["message", "status", "result"], t(language, "care.result.completed"));
+  const counts = {
+    memories: textValue(data, ["nodes", "total_nodes", "memories", "memory_count"]),
+    links: textValue(data, ["edges", "total_edges", "relationships", "relationship_count"]),
+    conversations: textValue(data, ["conversations", "conversation_count"]),
+  };
+  return (
+    <div className="brain-care-result-summary">
+      <strong>{status}</strong>
+      {path ? <span>{t(language, "care.result.path", { path })}</span> : null}
+      {counts.memories || counts.links || counts.conversations ? (
+        <span>
+          {t(language, "care.result.contents", {
+            memories: counts.memories || "0",
+            links: counts.links || "0",
+            conversations: counts.conversations || "0",
+          })}
+        </span>
+      ) : null}
+      {data.dry_run === true ? <span>{t(language, "care.result.dryRun")}</span> : null}
+    </div>
+  );
+}
+
+function archivePathProblem(path: string, language: Language) {
+  if (/[<>:"|?*]/.test(path)) return t(language, "care.path.invalidChars");
+  if (!/\.(latticebrain|zip|json)$/i.test(path)) return t(language, "care.path.extension");
+  return "";
+}
+
+function passphraseStrengthProblem(value: string, language: Language) {
+  if (value.length < 12) return t(language, "care.passphrase.tooShort");
+  const variety = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((pattern) => pattern.test(value)).length;
+  if (variety < 3) return t(language, "care.passphrase.tooSimple");
+  return "";
+}

package/frontend/src/features/brain/BrainComposer.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { ImagePlus, Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { t, type Language } from "@/i18n";
+
+export function BrainComposer({
+  language,
+  draft,
+  streaming,
+  imageData,
+  onDraftChange,
+  onImageDataChange,
+  onSend,
+}: {
+  language: Language;
+  draft: string;
+  streaming: boolean;
+  imageData: string | null;
+  onDraftChange: (value: string) => void;
+  onImageDataChange: (value: string | null) => void;
+  onSend: () => void;
+}) {
+  return (
+    <div className="brain-composer">
+      <textarea
+        value={draft}
+        onChange={(event) => onDraftChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            onSend();
+          }
+        }}
+        placeholder={t(language, "brain.placeholder")}
+      />
+      <div className="brain-composer-actions">
+        <label className="brain-image-input">
+          <ImagePlus className="h-3.5 w-3.5" />
+          <span>{t(language, "brain.image")}</span>
+          <input
+            type="file"
+            accept="image/*"
+            className="sr-only"
+            onChange={async (event) => {
+              const file = event.target.files?.[0];
+              if (file) onImageDataChange(await fileToDataUrl(file));
+            }}
+          />
+        </label>
+        {imageData ? <span className="brain-quiet-success">{t(language, "brain.imageAttached")}</span> : null}
+        <Button onClick={onSend} disabled={!draft.trim() || streaming} className="rounded-full px-5">
+          <Send className="h-4 w-4" /> {t(language, "brain.send")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function fileToDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}

package/frontend/src/features/brain/BrainConversation.tsx

@@ -0,0 +1,131 @@
+import * as React from "react";
+import { ShieldCheck } from "lucide-react";
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { t, type Language } from "@/i18n";
+import type { BrainDepth, KnowledgeConcept, MemoryFragment, Message } from "./types";
+import { BrainCarePanel } from "./BrainCarePanel";
+import { BrainComposer } from "./BrainComposer";
+import { BrainOverviewPanel } from "./BrainOverviewPanel";
+
+export function BrainConversation({
+  language,
+  explorationDepth,
+  modelName,
+  messages,
+  starterPrompts,
+  memoryFeedback,
+  draft,
+  streaming,
+  imageData,
+  streamRef,
+  memories,
+  concepts,
+  onOpenDepth,
+  onDraftChange,
+  onImageDataChange,
+  onSend,
+}: {
+  language: Language;
+  explorationDepth: BrainDepth;
+  modelName: string;
+  messages: Message[];
+  starterPrompts: string[];
+  memoryFeedback: string | null;
+  draft: string;
+  streaming: boolean;
+  imageData: string | null;
+  streamRef: React.RefObject<HTMLDivElement | null>;
+  memories: MemoryFragment[];
+  concepts: KnowledgeConcept[];
+  onOpenDepth: (depth: BrainDepth) => void;
+  onDraftChange: (value: string) => void;
+  onImageDataChange: (value: string | null) => void;
+  onSend: () => void;
+}) {
+  return (
+    <section className="brain-conversation" aria-label={t(language, "brain.aria.conversation")}>
+      <div className="brain-conversation-header">
+        <div>
+          <h1>{t(language, "brain.title")}</h1>
+          <span>{t(language, `brain.depth.${explorationDepth}`)}</span>
+        </div>
+        <LanguageSwitcher compact />
+        <div className="brain-ownership-strip" aria-label={t(language, "brain.aria.ownership")}>
+          <span>{t(language, "brain.local")}</span>
+          <span>{t(language, "brain.portable")}</span>
+          <span>{t(language, "brain.private")}</span>
+        </div>
+        <div>{modelName}</div>
+        <button className="brain-admin-link" type="button" onClick={() => navigateHash("/admin")}>
+          <ShieldCheck className="h-3.5 w-3.5" />
+          {t(language, "brain.admin")}
+        </button>
+      </div>
+
+      <div ref={streamRef} className="brain-stream">
+        <BrainOverviewPanel
+          memories={memories}
+          concepts={concepts}
+          onOpenDepth={onOpenDepth}
+        />
+        {messages.length === 0 ? (
+          <BrainEmptyState language={language} starterPrompts={starterPrompts} onDraftChange={onDraftChange} />
+        ) : (
+          messages.map((message, index) => (
+            <div key={`${message.role}-${index}`} className={`brain-message ${message.role}`}>
+              <div className="brain-message-bubble">{message.content}</div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {memoryFeedback ? <div className="brain-save-feedback" role="status">{memoryFeedback}</div> : null}
+
+      <BrainCarePanel language={language} />
+
+      <BrainComposer
+        language={language}
+        draft={draft}
+        streaming={streaming}
+        imageData={imageData}
+        onDraftChange={onDraftChange}
+        onImageDataChange={onImageDataChange}
+        onSend={onSend}
+      />
+    </section>
+  );
+}
+
+function BrainEmptyState({
+  language,
+  starterPrompts,
+  onDraftChange,
+}: {
+  language: Language;
+  starterPrompts: string[];
+  onDraftChange: (value: string) => void;
+}) {
+  return (
+    <div className="mind-empty">
+      <div className="mind-empty-kicker">{t(language, "brain.empty.kicker")}</div>
+      <div className="mind-empty-title">{t(language, "brain.empty.title")}</div>
+      <p>{t(language, "brain.empty.body")}</p>
+      <div className="mind-empty-prompts" aria-label={t(language, "brain.aria.starterPrompts")}>
+        {starterPrompts.map((prompt) => (
+          <button key={prompt} type="button" onClick={() => onDraftChange(prompt)}>
+            {prompt}
+          </button>
+        ))}
+      </div>
+      <div className="mind-empty-trail" aria-label={t(language, "brain.empty.trail.label")}>
+        <span>{t(language, "brain.empty.trail.save")}</span>
+        <span>{t(language, "brain.empty.trail.recall")}</span>
+        <span>{t(language, "brain.empty.trail.backup")}</span>
+      </div>
+    </div>
+  );
+}
+
+function navigateHash(route: string) {
+  window.location.hash = route;
+}