ltcai 4.4.0 → 4.6.0

package/frontend/src/App.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Command, Menu, Moon, Search, Sun, X } from "lucide-react";
+import { BrainCircuit, Command, Menu, Moon, Search, Sun, X } from "lucide-react";
 import { latticeApi } from "@/api/client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { ProductFlow, readProductFlowComplete } from "@/components/ProductFlow";
 import { useAppStore } from "@/store/appStore";
 import { commandRoutes, go, parseHash, primaryRoutes, PrimaryRoute } from "@/routes";
 import { BrainPage } from "@/pages/Brain";
-import { AskPage } from "@/pages/Ask";
 import { CapturePage } from "@/pages/Capture";
 import { ActPage } from "@/pages/Act";
 import { LibraryPage } from "@/pages/Library";
@@ -25,7 +25,7 @@ function useRoute() {
 }
 
 function Page({ primary, tab }: { primary: PrimaryRoute; tab?: string }) {
-  if (primary === "ask") return <AskPage />;
+  if (primary === "memory") return <BrainPage initialTab="memory" />;
   if (primary === "capture") return <CapturePage initialTab={tab} />;
   if (primary === "act") return <ActPage initialTab={tab} />;
   if (primary === "library") return <LibraryPage initialTab={tab} />;
@@ -33,9 +33,26 @@ function Page({ primary, tab }: { primary: PrimaryRoute; tab?: string }) {
   return <BrainPage initialTab={tab} />;
 }
 
+function AmbientBrain() {
+  return (
+    <div className="ambient-brain" aria-hidden="true">
+      <span className="signal-line signal-line-a" />
+      <span className="signal-line signal-line-b" />
+      <span className="signal-line signal-line-c" />
+      <span className="signal-tile signal-tile-a" />
+      <span className="signal-tile signal-tile-b" />
+      <span className="signal-tile signal-tile-c" />
+    </div>
+  );
+}
+
 function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void }) {
   const [query, setQuery] = React.useState("");
-  const matches = commandRoutes.filter((route) => route.label.toLowerCase().includes(query.toLowerCase()) || route.key.includes(query.toLowerCase()));
+  const normalized = query.trim().toLowerCase();
+  const matches = commandRoutes.filter((route) => (
+    route.label.toLowerCase().includes(normalized) || route.key.includes(normalized)
+  ));
+
   React.useEffect(() => {
     if (!open) return;
     const onKey = (event: KeyboardEvent) => {
@@ -44,16 +61,17 @@ function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
+
   if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50 bg-background/80 p-4 backdrop-blur-sm" role="dialog" aria-modal="true">
-      <div className="mx-auto mt-16 max-w-xl rounded-lg border border-border bg-card shadow-xl">
-        <div className="flex items-center gap-2 border-b border-border p-3">
+    <div className="command-scrim" role="dialog" aria-modal="true" aria-label="Lattice command palette">
+      <div className="command-panel">
+        <div className="command-search">
           <Search className="h-4 w-4 text-muted-foreground" />
-          <Input value={query} onChange={(e) => setQuery(e.target.value)} autoFocus placeholder="Jump to a capability" />
-          <Button variant="ghost" size="icon" onClick={onClose}><X className="h-4 w-4" /></Button>
+          <Input value={query} onChange={(event) => setQuery(event.target.value)} autoFocus placeholder="Jump to anything in Lattice" />
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close command palette"><X className="h-4 w-4" /></Button>
         </div>
-        <div className="max-h-96 overflow-auto p-2">
+        <div className="command-list soft-scrollbar">
           {matches.map((route) => {
             const Icon = route.icon;
             return (
@@ -63,10 +81,13 @@ function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void
                   go(route.key);
                   onClose();
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm hover:bg-muted"
+                className="command-row"
               >
-                <Icon className="h-4 w-4 text-primary" />
-                {route.label}
+                <span className="command-icon"><Icon className="h-4 w-4" /></span>
+                <span>
+                  <span className="block text-sm font-semibold">{route.label}</span>
+                  <span className="block text-xs text-muted-foreground">Open {route.key.replace(/[-/]/g, " ")}</span>
+                </span>
               </button>
             );
           })}
@@ -76,23 +97,49 @@ function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void
   );
 }
 
+function PrimaryDock({ active, onNavigate }: { active: PrimaryRoute; onNavigate?: () => void }) {
+  return (
+    <nav className="primary-dock" aria-label="Primary navigation">
+      {primaryRoutes.map((item) => {
+        const Icon = item.icon;
+        const selected = active === item.id;
+        return (
+          <button
+            key={item.id}
+            className={cn("dock-button", selected && "is-active")}
+            onClick={() => {
+              go(item.id);
+              onNavigate?.();
+            }}
+            aria-current={selected ? "page" : undefined}
+          >
+            <Icon className="h-4 w-4" />
+            <span>{item.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
+
 export default function App() {
   const route = useRoute();
-  const { theme, setTheme, mode, setMode } = useAppStore();
+  const { theme, setTheme } = useAppStore();
   const [drawer, setDrawer] = React.useState(false);
   const [palette, setPalette] = React.useState(false);
-  const health = useQuery({ queryKey: ["health"], queryFn: latticeApi.health });
+  const [flowComplete, setFlowComplete] = React.useState(readProductFlowComplete);
+  const health = useQuery({ queryKey: ["health"], queryFn: latticeApi.health, enabled: flowComplete });
   const desktop = useQuery({
     queryKey: ["desktopBackendStatus"],
     queryFn: latticeApi.desktopBackendStatus,
-    enabled: Boolean(window.__TAURI_INTERNALS__),
+    enabled: flowComplete && Boolean(window.__TAURI_INTERNALS__),
     refetchInterval: 5000,
   });
-  const workspace = useQuery({ queryKey: ["workspaceOs"], queryFn: latticeApi.workspaceOs });
 
   React.useEffect(() => {
     document.documentElement.dataset.theme = theme;
   }, [theme]);
+
   React.useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
@@ -104,95 +151,70 @@ export default function App() {
     return () => window.removeEventListener("keydown", onKey);
   }, []);
 
+  if (!flowComplete) {
+    return <ProductFlow onComplete={() => {
+      setFlowComplete(true);
+      go("brain");
+    }} />;
+  }
+
   const healthData = (health.data?.data || {}) as Record<string, unknown>;
-  const appVersion = typeof healthData.version === "string" ? healthData.version : null;
   const desktopData = (desktop.data?.data || {}) as Record<string, unknown>;
-  const desktopError = typeof desktopData.last_error === "string" ? desktopData.last_error : desktop.data?.error;
-
-  const rail = (
-    <aside className="flex h-full w-64 shrink-0 flex-col border-r border-border bg-card">
-      <div className="flex h-16 items-center gap-3 border-b border-border px-4">
-        <div className="grid h-9 w-9 place-items-center rounded-md bg-primary text-primary-foreground font-bold">LA</div>
-        <div>
-          <div className="font-semibold">Lattice AI</div>
-          <div className="text-xs text-muted-foreground">Digital Brain Desktop</div>
-        </div>
-      </div>
-      <nav className="flex-1 space-y-1 overflow-auto p-3">
-        {primaryRoutes.map((item) => {
-          const Icon = item.icon;
-          const active = route.primary === item.id;
-          return (
-            <button
-              key={item.id}
-              onClick={() => {
-                go(item.id);
-                setDrawer(false);
-              }}
-              className={cn(
-                "flex min-h-14 w-full items-center gap-3 rounded-md px-3 py-2 text-left transition",
-                active ? "bg-primary/14 text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
-              )}
-            >
-              <Icon className="h-5 w-5" />
-              <span>
-                <span className="block text-sm font-medium">{item.label}</span>
-                <span className="block text-xs">{item.description}</span>
-              </span>
-            </button>
-          );
-        })}
-      </nav>
-      <div className="border-t border-border p-3 text-xs text-muted-foreground">
-        <div>Server: {health.data?.ok ? "online" : "unavailable"}</div>
-        {window.__TAURI_INTERNALS__ ? (
-          <div>Sidecar: {desktopData.running ? "running" : desktopError ? `unavailable (${desktopError})` : "starting"}</div>
-        ) : null}
-        <div>Workspace: {String((workspace.data?.data as Record<string, unknown>)?.active_workspace || "local")}</div>
-      </div>
-    </aside>
-  );
+  const backendReady = Boolean(health.data?.ok);
+  const desktopReady = !window.__TAURI_INTERNALS__ || Boolean(desktopData.running);
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div className="app-backdrop min-h-screen text-foreground">
+      <AmbientBrain />
       <CommandPalette open={palette} onClose={() => setPalette(false)} />
-      <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:block">{rail}</div>
-      {drawer ? (
-        <div className="fixed inset-0 z-40 lg:hidden">
-          <button className="absolute inset-0 bg-background/70" aria-label="Close navigation" onClick={() => setDrawer(false)} />
-          <div className="relative h-full">{rail}</div>
+
+      <header className="app-chrome">
+        <div className="brand-lockup">
+          <button className="mobile-menu" onClick={() => setDrawer(true)} aria-label="Open navigation"><Menu className="h-5 w-5" /></button>
+          <button className="brand-mark" onClick={() => go("brain")} aria-label="Open Lattice Brain">
+            <BrainCircuit className="h-5 w-5" />
+          </button>
+          <div className="brand-copy">
+            <div className="brand-name">Lattice</div>
+            <div className="brand-subtitle">Living Brain</div>
+          </div>
         </div>
-      ) : null}
-      <div className="lg:pl-64">
-        <header className="sticky top-0 z-30 flex h-16 items-center justify-between gap-3 border-b border-border bg-background/95 px-4 backdrop-blur">
-          <div className="flex min-w-0 items-center gap-2">
-            <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setDrawer(true)}><Menu className="h-5 w-5" /></Button>
-            <div className="min-w-0">
-              <div className="truncate text-sm text-muted-foreground">{appVersion ? `v${appVersion}` : "Version unavailable"}</div>
-              <div className="truncate font-medium">{primaryRoutes.find((item) => item.id === route.primary)?.label}</div>
+
+        <div className="desktop-dock">
+          <PrimaryDock active={route.primary} />
+        </div>
+
+        <div className="chrome-actions">
+          <button className="status-chip" onClick={() => go("settings")}>
+            <span className={cn("status-light", backendReady && desktopReady ? "is-ready" : "is-waiting")} />
+            <span>{backendReady && desktopReady ? "Ready" : "Starting"}</span>
+          </button>
+          <Button variant="outline" onClick={() => setPalette(true)}><Command className="h-4 w-4" /> Find</Button>
+          <Button variant="outline" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} aria-label="Toggle theme">
+            {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+          </Button>
+        </div>
+      </header>
+
+      {drawer ? (
+        <div className="mobile-drawer">
+          <button className="drawer-scrim" aria-label="Close navigation" onClick={() => setDrawer(false)} />
+          <div className="drawer-panel">
+            <div className="drawer-header">
+              <div>
+                <div className="font-semibold">Lattice</div>
+                <div className="text-xs text-muted-foreground">Choose a layer</div>
+              </div>
+              <Button variant="ghost" size="icon" onClick={() => setDrawer(false)} aria-label="Close navigation"><X className="h-4 w-4" /></Button>
             </div>
+            <PrimaryDock active={route.primary} onNavigate={() => setDrawer(false)} />
           </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" onClick={() => setPalette(true)}><Command className="h-4 w-4" /> Search</Button>
-            <select
-              value={mode}
-              onChange={(e) => setMode(e.target.value as "basic" | "advanced" | "admin")}
-              className="h-9 rounded-md border border-border bg-background px-2 text-sm"
-              aria-label="Workspace mode"
-            >
-              <option value="basic">Basic</option>
-              <option value="advanced">Advanced</option>
-              <option value="admin">Admin</option>
-            </select>
-            <Button variant="outline" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} aria-label="Toggle theme">
-              {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-            </Button>
-          </div>
-        </header>
-        <main className="p-4 lg:p-6">
-          <Page primary={route.primary} tab={route.tab} />
-        </main>
-      </div>
+        </div>
+      ) : null}
+
+      <main className="page-shell">
+        <Page primary={route.primary} tab={route.tab} />
+      </main>
     </div>
   );
 }

package/frontend/src/api/client.ts

@@ -77,6 +77,21 @@ function workspaceHeaders(): Record<string, string> {
   return workspaceId ? { "X-Workspace-Id": workspaceId } : {};
 }
 
+function friendlyError(error: unknown, fallback: string) {
+  if (!error) return fallback;
+  const record = typeof error === "object" && error !== null ? error as Record<string, unknown> : null;
+  const detail = record?.detail;
+  if (typeof detail === "string") return detail;
+  const detailRecord = typeof detail === "object" && detail !== null ? detail as Record<string, unknown> : null;
+  if (detailRecord) {
+    const message = detailRecord.user_message || detailRecord.reason || detailRecord.action || detailRecord.status;
+    if (message) return String(message);
+  }
+  const message = record?.message || record?.error;
+  if (message) return String(message);
+  return fallback;
+}
+
 async function apiJson<T>(
   method: HttpMethod,
   path: string,
@@ -108,7 +123,7 @@ async function apiJson<T>(
       status: response.status,
       data: emptyFor(opts.shape),
       source: "unavailable",
-      error: error ? JSON.stringify(error) : response.statusText,
+      error: friendlyError(error, response.statusText),
     };
   } catch (err) {
     return {
@@ -163,6 +178,69 @@ export type ChatEventHandlers = {
   signal?: AbortSignal;
 };
 
+export type ModelPrepareHandlers = {
+  onProgress?: (data: Record<string, unknown>) => void;
+  onDone?: (data: Record<string, unknown>) => void;
+  onError?: (data: Record<string, unknown>) => void;
+  signal?: AbortSignal;
+};
+
+async function streamModelPrepare(
+  body: { model: string; engine?: string; allow_download?: boolean },
+  handlers: ModelPrepareHandlers = {},
+) {
+  const base = await apiBase();
+  const res = await fetch(`${base}/engines/prepare-model/stream`, {
+    method: "POST",
+    credentials: "same-origin",
+    signal: handlers.signal,
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "text/event-stream",
+      ...workspaceHeaders(),
+    } satisfies HeadersInit,
+    body: JSON.stringify({ engine: null, allow_download: false, ...body }),
+  });
+  if (!res.ok || !res.body || !(res.headers.get("content-type") || "").includes("text/event-stream")) {
+    const payload = await res.json().catch(() => null);
+    const detail = payload?.detail && typeof payload.detail === "object" ? payload.detail : payload;
+    const message = friendlyError(payload, res.statusText);
+    handlers.onError?.({ status: "error", user_message: message, ...(detail || {}) });
+    return { source: "live" as const, ok: false, status: res.status, data: detail || {}, error: message };
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let eventName = "message";
+  let finalData: Record<string, unknown> = {};
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const parts = buffer.split("\n\n");
+    buffer = parts.pop() || "";
+    for (const part of parts) {
+      const lines = part.split("\n");
+      eventName = lines.find((item) => item.startsWith("event:"))?.slice(6).trim() || "message";
+      const dataLine = lines.find((item) => item.startsWith("data:"));
+      if (!dataLine) continue;
+      const raw = dataLine.slice(5).trim();
+      const data = raw ? JSON.parse(raw) as Record<string, unknown> : {};
+      if (eventName === "progress") handlers.onProgress?.(data);
+      if (eventName === "error") {
+        const detail = typeof data.detail === "object" && data.detail !== null ? data.detail as Record<string, unknown> : data;
+        handlers.onError?.(detail);
+        return { source: "live" as const, ok: false, status: Number(data.status_code || 500), data: detail, error: friendlyError({ detail }, "Model setup failed") };
+      }
+      if (eventName === "done") {
+        finalData = data;
+        handlers.onDone?.(data);
+      }
+    }
+  }
+  return { source: "live" as const, ok: true, status: 200, data: finalData };
+}
+
 async function streamChat(body: Record<string, unknown>, handlers: ChatEventHandlers = {}) {
   const base = await apiBase();
   const res = await fetch(`${base}/chat`, {
@@ -263,6 +341,11 @@ export const latticeApi = {
   connectFolder: (path: string) => post("/knowledge-graph/local/index", { path, approved: true, watch_enabled: true, consent: { approved: true, source: "desktop-spa" } }, {}),
   localWatchStop: (source_id: string) => post("/knowledge-graph/local/watch/stop", { source_id }, {}),
   models: () => get("/models", { catalog: [], loaded: [], recommended: [] }),
+  setupScan: () => get("/setup/scan", { environment: {}, recommendations: {}, zero_config: {} }),
+  modelRecommendations: (engine = "local_mlx") => get("/models/recommendations", { profile: {}, recommendations: { models: [], families: [], counts: {} } }, { engine }),
+  installEngine: (engine: string) => post("/engines/install", { engine }, {}),
+  prepareModel: (model: string, engine?: string, allow_download = false) => post("/engines/prepare-model", { model, engine: engine || null, allow_download }, {}),
+  streamModelPrepare,
   loadModel: (model_id: string, engine?: string, allow_download = false) => post("/models/load", { model_id, engine: engine || null, allow_download }, {}),
   unloadModel: (model_id: string) => del(`/models/unload/${encodeURIComponent(model_id)}`, {}),
   embeddingsStatus: () => get("/api/embeddings/status", {}),