ltcai 6.1.0 → 6.3.0

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

@@ -0,0 +1,294 @@
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Activity, ArrowLeft, ListFilter, RotateCcw, Search, ServerCog, ShieldCheck, Users } from "lucide-react";
+import { latticeApi, type AdminAuditFilters, type ApiResult } from "@/api/client";
+import { Button } from "@/components/ui/button";
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { useAppStore } from "@/store/appStore";
+import { asArray } from "@/lib/utils";
+import { t } from "@/i18n";
+
+type ApiRecord = Record<string, unknown>;
+type AdminFilterState = Required<Pick<AdminAuditFilters, "q" | "actor" | "action" | "severity">> & { limit: number };
+
+export function AdminConsole({ onBack }: { onBack: () => void }) {
+  const qc = useQueryClient();
+  const language = useAppStore((state) => state.language);
+  const [filters, setFilters] = React.useState<AdminFilterState>({ q: "", actor: "", action: "", severity: "", limit: 50 });
+  const { summaryQ, statsQ, usersQ, auditQ, securityQ, securityEventsQ, policiesQ, rolesQ, retentionQ, indexQ } = useAdminConsoleData(filters);
+  const rebuildIndex = useMutation({
+    mutationFn: latticeApi.rebuildIndex,
+    onSuccess: () => void qc.invalidateQueries({ queryKey: ["indexStatus"] }),
+  });
+
+  const users = asArray(usersQ.data?.data);
+  const auditEvents = asArray((auditQ.data?.data as ApiRecord | undefined)?.recent_events);
+  const securityEvents = asArray((securityEventsQ.data?.data as ApiRecord | undefined)?.events);
+  const policies = asArray((policiesQ.data?.data as ApiRecord | undefined)?.policies);
+  const roles = asArray((rolesQ.data?.data as ApiRecord | undefined)?.roles);
+  const retention = (retentionQ.data?.data || {}) as ApiRecord;
+
+  return (
+    <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" />
+          {t(language, "admin.back")}
+        </button>
+        <div>
+          <span>{t(language, "admin.kicker")}</span>
+          <h1>{t(language, "admin.title")}</h1>
+          <p>{t(language, "admin.body")}</p>
+        </div>
+        <LanguageSwitcher compact />
+      </header>
+
+      <section className="admin-metrics" aria-label={t(language, "admin.overview")}>
+        <AdminMetric icon={<Users className="h-4 w-4" />} label={t(language, "admin.metric.users")} value={String(users.length)} detail={sourceLabel(usersQ.data, language)} />
+        <AdminMetric
+          icon={<Activity className="h-4 w-4" />}
+          label={t(language, "admin.metric.logs")}
+          value={String(auditEvents.length + securityEvents.length)}
+          detail={sourceLabel(auditQ.data, language)}
+        />
+        <AdminMetric
+          icon={<ShieldCheck className="h-4 w-4" />}
+          label={t(language, "admin.metric.security")}
+          value={adminStatusLabel(securityQ.data?.data, "status") || (securityQ.data?.ok ? t(language, "admin.status.ready") : t(language, "admin.status.unavailable"))}
+          detail={sourceLabel(securityQ.data, language)}
+        />
+        <AdminMetric
+          icon={<ServerCog className="h-4 w-4" />}
+          label={t(language, "admin.metric.index")}
+          value={adminStatusLabel(indexQ.data?.data, "status") || (indexQ.data?.ok ? t(language, "admin.status.indexed") : t(language, "admin.status.unknown"))}
+          detail={indexDetail(indexQ.data?.data, language)}
+        />
+      </section>
+
+      <section className="admin-grid">
+        <AdminPanel title={t(language, "admin.panel.users")} eyebrow={t(language, "admin.panel.people")}>
+          <AdminList
+            items={users.slice(0, 8)}
+            empty={t(language, "admin.empty.users")}
+            render={(item) => {
+              const user = item as ApiRecord;
+              return (
+                <>
+                  <strong>{stringValue(user.name || user.email || user.id, t(language, "admin.fallback.localUser"))}</strong>
+                  <span>{stringValue(user.role || user.status || user.workspace_id, t(language, "admin.fallback.member"))}</span>
+                </>
+              );
+            }}
+          />
+        </AdminPanel>
+
+        <AdminPanel title={t(language, "admin.panel.roles")} eyebrow={t(language, "admin.panel.access")}>
+          <AdminList
+            items={roles.slice(0, 6)}
+            empty={t(language, "admin.empty.roles")}
+            render={(item) => {
+              const role = item as ApiRecord;
+              return (
+                <>
+                  <strong>{stringValue(role.role, t(language, "admin.fallback.role"))} · {stringValue(role.members, "0")} {t(language, "admin.metric.users")}</strong>
+                  <span>{asArray(role.caps).slice(0, 4).map((cap) => stringValue(cap, "")).filter(Boolean).join(", ") || t(language, "admin.fallback.noCaps")}</span>
+                </>
+              );
+            }}
+          />
+        </AdminPanel>
+
+        <AdminPanel title={t(language, "admin.panel.logs")} eyebrow={t(language, "admin.panel.audit")}>
+          <AdminLogFilters language={language} filters={filters} onChange={setFilters} matched={(auditQ.data?.data as ApiRecord | undefined)?.filters as ApiRecord | undefined} />
+          <AdminList
+            items={auditEvents.slice(0, 8)}
+            empty={t(language, "admin.empty.audit")}
+            render={(item) => renderLogRow(item as ApiRecord, language)}
+          />
+        </AdminPanel>
+
+        <AdminPanel title={t(language, "admin.panel.securityEvents")} eyebrow={t(language, "admin.panel.protection")}>
+          <AdminList
+            items={securityEvents.slice(0, 8)}
+            empty={t(language, "admin.empty.security")}
+            render={(item) => renderLogRow(item as ApiRecord, language)}
+          />
+        </AdminPanel>
+
+        <AdminPanel title={t(language, "admin.panel.brainOps")} eyebrow={t(language, "admin.panel.maintenance")}>
+          <div className="admin-operation">
+            <div>
+              <strong>{indexDetail(indexQ.data?.data, language)}</strong>
+              <span>{summaryText(summaryQ.data?.data) || summaryText(statsQ.data?.data) || t(language, "admin.brain.summaryFallback")}</span>
+            </div>
+            <Button variant="outline" size="sm" disabled={rebuildIndex.isPending} onClick={() => rebuildIndex.mutate()}>
+              <RotateCcw className="h-3.5 w-3.5" />
+              {rebuildIndex.isPending ? t(language, "admin.brain.rebuilding") : t(language, "admin.brain.rebuild")}
+            </Button>
+          </div>
+          <div className="admin-policy-strip">
+            {policies.slice(0, 5).map((item, index) => {
+              const policy = item as ApiRecord;
+              return <span key={`${stringValue(policy.id || policy.name, "policy")}-${index}`}>{stringValue(policy.label || policy.name || policy.id, t(language, "admin.policy.fallback"))}</span>;
+            })}
+            {!policies.length ? <span>{t(language, "admin.policy.quiet")}</span> : null}
+          </div>
+          <div className="admin-retention">
+            <strong>{t(language, "admin.retention.days", { days: stringValue(retention.retention_days, "90") })}</strong>
+            <span>{t(language, "admin.retention.detail", { events: stringValue(retention.retained_events, "0"), candidates: stringValue(retention.prune_candidates, "0") })}</span>
+          </div>
+        </AdminPanel>
+
+      </section>
+    </main>
+  );
+}
+
+function useAdminConsoleData(filters: AdminFilterState) {
+  const auditFilters = React.useMemo<AdminAuditFilters>(() => ({
+    q: filters.q || undefined,
+    actor: filters.actor || undefined,
+    action: filters.action || undefined,
+    severity: filters.severity || undefined,
+    limit: filters.limit,
+  }), [filters]);
+
+  return {
+    summaryQ: useQuery({ queryKey: ["adminSummary"], queryFn: latticeApi.adminSummary }),
+    statsQ: useQuery({ queryKey: ["adminStats"], queryFn: latticeApi.adminStats }),
+    usersQ: useQuery({ queryKey: ["adminUsers"], queryFn: latticeApi.adminUsers }),
+    auditQ: useQuery({ queryKey: ["adminAudit", auditFilters], queryFn: () => latticeApi.adminAudit(auditFilters) }),
+    securityQ: useQuery({ queryKey: ["adminSecurity"], queryFn: latticeApi.adminSecurity }),
+    securityEventsQ: useQuery({ queryKey: ["adminSecurityEvents"], queryFn: () => latticeApi.adminSecurityEvents(50) }),
+    policiesQ: useQuery({ queryKey: ["adminPolicies"], queryFn: latticeApi.adminPolicies }),
+    rolesQ: useQuery({ queryKey: ["adminRoles"], queryFn: latticeApi.adminRoles }),
+    retentionQ: useQuery({ queryKey: ["adminLogRetention"], queryFn: latticeApi.adminLogRetention }),
+    indexQ: useQuery({ queryKey: ["indexStatus"], queryFn: latticeApi.indexStatus }),
+  };
+}
+
+function AdminLogFilters({
+  filters,
+  matched,
+  onChange,
+  language,
+}: {
+  filters: AdminFilterState;
+  matched?: ApiRecord;
+  onChange: React.Dispatch<React.SetStateAction<AdminFilterState>>;
+  language: "ko" | "en";
+}) {
+  return (
+    <div className="admin-log-filters" aria-label={t(language, "admin.filters.label")}>
+      <label>
+        <Search className="h-3.5 w-3.5" />
+        <input
+          value={filters.q}
+          onChange={(event) => onChange((current) => ({ ...current, q: event.target.value }))}
+          placeholder={t(language, "admin.filters.search")}
+          aria-label={t(language, "admin.filters.searchAria")}
+        />
+      </label>
+      <label>
+        <ListFilter className="h-3.5 w-3.5" />
+        <select
+          value={filters.severity}
+          onChange={(event) => onChange((current) => ({ ...current, severity: event.target.value }))}
+          aria-label={t(language, "admin.filters.severityAria")}
+        >
+          <option value="">{t(language, "admin.filters.all")}</option>
+          <option value="informational">{t(language, "admin.filters.informational")}</option>
+          <option value="notice">{t(language, "admin.filters.notice")}</option>
+          <option value="warning">{t(language, "admin.filters.warning")}</option>
+          <option value="high">{t(language, "admin.filters.high")}</option>
+        </select>
+      </label>
+      <span>{t(language, "admin.filters.matched", { count: stringValue(matched?.matched_events, "0") })}</span>
+    </div>
+  );
+}
+
+function AdminMetric({ icon, label, value, detail }: { icon: React.ReactNode; label: string; value: string; detail: string }) {
+  return (
+    <div className="admin-metric">
+      <div>{icon}</div>
+      <span>{label}</span>
+      <strong>{value}</strong>
+      <small>{detail}</small>
+    </div>
+  );
+}
+
+function AdminPanel({ eyebrow, title, children }: { eyebrow: string; title: string; children: React.ReactNode }) {
+  return (
+    <section className="admin-panel">
+      <div className="admin-panel-head">
+        <span>{eyebrow}</span>
+        <h2>{title}</h2>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function AdminList({ items, empty, render }: { items: unknown[]; empty: string; render: (item: unknown) => React.ReactNode }) {
+  if (!items.length) return <div className="admin-empty">{empty}</div>;
+  return <div className="admin-list">{items.map((item, index) => <div key={index} className="admin-list-row">{render(item)}</div>)}</div>;
+}
+
+function renderLogRow(event: ApiRecord, language: "ko" | "en") {
+  const action = stringValue(event.action || event.event || event.type || event.name, t(language, "admin.log.event"));
+  const actor = stringValue(event.actor || event.user || event.user_id || event.workspace_id, t(language, "admin.log.system"));
+  const when = stringValue(event.timestamp || event.time || event.created_at || event.ts, t(language, "admin.log.recently"));
+  return (
+    <>
+      <strong>{action}</strong>
+      <span>{actor} · {when}</span>
+    </>
+  );
+}
+
+function sourceLabel(result: ApiResult<unknown> | undefined, language: "ko" | "en") {
+  if (!result) return t(language, "admin.source.loading");
+  return result.ok ? t(language, "admin.source.live") : result.error || t(language, "admin.status.unavailable");
+}
+
+function adminStatusLabel(data: unknown, key: string) {
+  const record = isRecord(data) ? data : {};
+  return textValue(record, [key, "health", "state", "overall_status"]);
+}
+
+function indexDetail(data: unknown, language: "ko" | "en") {
+  const record = isRecord(data) ? data : {};
+  const docs = record.documents ?? record.document_count ?? record.docs;
+  const chunks = record.chunks ?? record.chunk_count ?? record.vectors;
+  if (docs !== undefined || chunks !== undefined) {
+    return `${stringValue(docs, "0")} docs · ${stringValue(chunks, "0")} chunks`;
+  }
+  return textValue(record, ["message", "detail", "status"], t(language, "admin.index.ready"));
+}
+
+function summaryText(data: unknown) {
+  const record = isRecord(data) ? data : {};
+  return textValue(record, ["summary", "message", "status", "detail"]);
+}
+
+function stringValue(value: unknown, fallback = "") {
+  if (typeof value === "string" && value.trim()) return value;
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  if (typeof value === "boolean") return value ? "true" : "false";
+  return fallback;
+}
+
+function isRecord(value: unknown): value is ApiRecord {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
+function textValue(record: ApiRecord, keys: string[], fallback = "") {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) return value;
+    if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  }
+  return fallback;
+}

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