ltcai 4.4.0 → 4.5.1

package/frontend/src/pages/Library.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Boxes, Cpu, PackagePlus, Plug, Puzzle } from "lucide-react";
+import { Boxes, CheckCircle2, Cpu, Download, PackagePlus, PlayCircle, Plug, ShieldAlert } from "lucide-react";
 import { latticeApi } from "@/api/client";
-import { ActionButton, DataPanel, EntityList, OperationResult, StructuredView, Tabs } from "@/components/primitives";
+import { ActionButton, DataPanel, EmptyState, EntityList, OperationResult, StatGrid, StructuredView, Tabs, ValuePreview } from "@/components/primitives";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { useAppStore } from "@/store/appStore";
 import { asArray } from "@/lib/utils";
 
 type LibraryTab = "models" | "skills" | "mcp" | "marketplace";
@@ -14,23 +15,25 @@ type LibraryTab = "models" | "skills" | "mcp" | "marketplace";
 const tabs: Array<{ id: LibraryTab; label: string }> = [
   { id: "models", label: "Models" },
   { id: "skills", label: "Skills" },
-  { id: "mcp", label: "MCP" },
+  { id: "mcp", label: "Connections" },
   { id: "marketplace", label: "Marketplace" },
 ];
 
 export function LibraryPage({ initialTab }: { initialTab?: string }) {
+  const mode = useAppStore((state) => state.mode);
   const [tab, setTab] = React.useState<LibraryTab>((initialTab as LibraryTab) || "models");
   React.useEffect(() => {
     if (tabs.some((item) => item.id === initialTab)) setTab(initialTab as LibraryTab);
   }, [initialTab]);
+  const visibleTabs = tabs.map((item) => item.id === "mcp" && mode !== "basic" ? { ...item, label: "MCP / tools" } : item);
   return (
-    <div className="space-y-4">
-      <header>
-        <div className="flex items-center gap-2 text-sm text-primary"><Boxes className="h-4 w-4" /> Replaceable runtime assets</div>
-        <h1 className="mt-2 text-3xl font-semibold">Library</h1>
-        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">Models, skills, MCP servers, plugins, and templates are managed by local backend registries.</p>
+    <div className="space-y-5">
+      <header className="page-hero">
+        <div className="page-kicker"><Boxes className="h-4 w-4" /> Library</div>
+        <h1 className="page-title">Choose what powers Lattice.</h1>
+        <p className="page-copy">Pick a private local model, add skills, and connect tools without learning runtime internals.</p>
       </header>
-      <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as LibraryTab)} />
+      <Tabs tabs={visibleTabs} value={tab} onChange={(id) => setTab(id as LibraryTab)} />
       {tab === "models" ? <ModelsPanel /> : null}
       {tab === "skills" ? <SkillsPanel /> : null}
       {tab === "mcp" ? <McpPanel /> : null}
@@ -40,15 +43,115 @@ export function LibraryPage({ initialTab }: { initialTab?: string }) {
 }
 
 function ModelsPanel() {
+  const qc = useQueryClient();
+  const mode = useAppStore((state) => state.mode);
   const models = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
+  const recs = useQuery({ queryKey: ["modelRecommendations", "local_mlx"], queryFn: () => latticeApi.modelRecommendations("local_mlx") });
   const emb = useQuery({ queryKey: ["embeddings"], queryFn: latticeApi.embeddingsStatus });
+  const [consent, setConsent] = React.useState(false);
+  const [activeModel, setActiveModel] = React.useState<string | null>(null);
+  const [progress, setProgress] = React.useState<Record<string, unknown>[]>([]);
+  const [lastResult, setLastResult] = React.useState<Record<string, unknown> | null>(null);
+  const [lastError, setLastError] = React.useState<Record<string, unknown> | null>(null);
+  const [busy, setBusy] = React.useState(false);
   const catalog = [
     ...asArray<Record<string, unknown>>((models.data?.data as Record<string, unknown>)?.catalog),
     ...asArray<Record<string, unknown>>((models.data?.data as Record<string, unknown>)?.recommended),
   ];
+  const recommendationRows = asArray<Record<string, unknown>>(
+    ((recs.data?.data as Record<string, unknown>)?.recommendations as Record<string, unknown> | undefined)?.models,
+  );
+  const recommendationById = new Map(recommendationRows.map((item) => [String(item.id), item]));
+  const loadedIds = asArray<string>((models.data?.data as Record<string, unknown> | undefined)?.loaded);
+  const currentId = String((models.data?.data as Record<string, unknown> | undefined)?.current || "");
+  const current = catalog.find((model) => loadedIds.includes(String(model.id)) || String(model.id) === currentId);
+  const topPick = (((recs.data?.data as Record<string, unknown> | undefined)?.recommendations as Record<string, unknown> | undefined)?.top_pick || null) as Record<string, unknown> | null;
+  const latestProgress = progress[progress.length - 1] || null;
+
+  const modelMessage = React.useCallback((message: unknown) => {
+    const text = String(message || "This model is not ready to load yet.");
+    if (mode !== "basic") return text;
+    return text
+      .replace(/gemma4_unified/gi, "this local model format")
+      .replace(/mlx[-_ ]?vlm|mlx[-_ ]?lm|local_mlx|\bmlx\b|\bgguf\b|\bollama\b|hugging face/gi, "local model support")
+      .replace(/runtime/gi, "model support")
+      .replace(/model_type/gi, "model format")
+      .replace(/this local model format local model support format/gi, "this local model format")
+      .replace(/local model support model support/gi, "local model support");
+  }, [mode]);
+
+  async function prepareModel(loadId: string, engine: string, allowDownload: boolean) {
+    setBusy(true);
+    setActiveModel(loadId);
+    setProgress([]);
+    setLastResult(null);
+    setLastError(null);
+    const result = await latticeApi.streamModelPrepare(
+      { model: loadId, engine: engine || "local_mlx", allow_download: allowDownload },
+      {
+        onProgress: (event) => setProgress((items) => [...items.slice(-8), event]),
+        onDone: (event) => setLastResult(event),
+        onError: (event) => setLastError(event),
+      },
+    );
+    setBusy(false);
+    await qc.invalidateQueries({ queryKey: ["models"] });
+    await qc.invalidateQueries({ queryKey: ["modelRecommendations", "local_mlx"] });
+    if (!result.ok && !lastError) setLastError(result.data as Record<string, unknown>);
+  }
+
   return (
     <div className="grid gap-4 xl:grid-cols-[1.2fr_0.8fr]">
-      <DataPanel title="Model catalog" result={models.data}>
+      <div className="space-y-4">
+        <DataPanel title="Guided model setup" description="Analyze this Mac, recommend a model, install only with consent, validate it, then load it." result={recs.data}>
+          {(data) => {
+            const recommendation = (data as Record<string, unknown>).recommendations as Record<string, unknown> | undefined;
+            const profile = (data as Record<string, unknown>).profile as Record<string, unknown> | undefined;
+            return (
+              <div className="space-y-4">
+                <StatGrid stats={[
+                  { label: "Computer", value: profile?.os ? `${String(profile.os)} ${String(profile.arch || "")}` : "detected" },
+                  { label: "Memory", value: recommendation?.ram_gb ? `${String(recommendation.ram_gb)} GB` : "checking" },
+                  { label: "Top pick", value: topPick?.name || topPick?.id || "choose below" },
+                  { label: "Current", value: current?.name || currentId || "none" },
+                ]} />
+                <div className="grid gap-2 md:grid-cols-3 xl:grid-cols-6">
+                  {[
+                    ["Environment Analysis", true, Cpu],
+                    ["Recommended Models", Boolean(topPick || catalog.length), CheckCircle2],
+                    ["Install", Boolean(current || latestProgress?.stage === "engine"), PackagePlus],
+                    ["Download Progress", Boolean(current || latestProgress?.stage === "download"), Download],
+                    ["Validate", Boolean(current || latestProgress?.stage === "smoke_test"), ShieldAlert],
+                    ["Load / Ready", Boolean(current || lastResult), PlayCircle],
+                  ].map(([label, done, Icon]) => (
+                    <div key={String(label)} className="rounded-lg border border-border bg-background/55 p-3">
+                      {React.createElement(Icon as typeof Cpu, { className: "h-4 w-4 text-primary" })}
+                      <div className="mt-2 text-sm font-medium">{String(label)}</div>
+                      <Badge variant={done ? "success" : "muted"}>{done ? "ready" : "pending"}</Badge>
+                    </div>
+                  ))}
+                </div>
+                <label className="flex items-start gap-2 rounded-lg border border-border bg-background/55 p-3 text-sm leading-6">
+                  <input className="mt-1" type="checkbox" checked={consent} onChange={(event) => setConsent(event.target.checked)} />
+                  <span>
+                    Allow Lattice to install a missing local model component or download model files for this action.
+                  </span>
+                </label>
+                {latestProgress ? (
+                  <div className="rounded-lg border border-border bg-background/55 p-3 text-sm">
+                    <div className="font-medium">{String(latestProgress.message || "Preparing model")}</div>
+                    <div className="mt-2 h-2 overflow-hidden rounded-full bg-muted">
+                      <div className="h-full bg-primary" style={{ width: `${Number(latestProgress.percent || 8)}%` }} />
+                    </div>
+                    {latestProgress.detail ? <div className="mt-2 text-xs text-muted-foreground">{String(latestProgress.detail)}</div> : null}
+                  </div>
+                ) : null}
+                {lastError ? <ModelRecovery error={lastError} /> : null}
+              </div>
+            );
+          }}
+        </DataPanel>
+        <DataPanel title="Recommended models" result={models.data}>
         {(data) => (
           <div className="grid gap-2">
             {(catalog.length ? catalog : asArray<Record<string, unknown>>((data as Record<string, unknown>).loaded)).slice(0, 14).map((model, index) => {
@@ -56,34 +159,120 @@ function ModelsPanel() {
               const loaded = asArray<string>((data as Record<string, unknown>).loaded).includes(id) || (data as Record<string, unknown>).current === id || model.state === "loaded";
               const loadId = String(model.recommended_load_id || id);
               const engine = String(model.recommended_engine || model.engine || "");
-              const loadAvailable = Boolean(model.load_available) || loaded;
+              const recommendation = recommendationById.get(id) || recommendationById.get(loadId) || {};
+              const compatibility = (model.runtime_compatibility || recommendation.runtime_compatibility || {}) as Record<string, unknown>;
+              const fallbackAvailable = String(compatibility.status || "") === "fallback_available";
+              const unsupported = model.load_status === "unsupported" || compatibility.supported === false;
+              const downloadRequired = Boolean(model.download_required);
+              const loadAvailable = (Boolean(model.load_available) || loaded) && !unsupported;
               const loadStatus = String(model.load_status || (loaded ? "loaded" : "unavailable"));
-              const unavailableReason = String(model.unavailable_reason || "Unavailable until the backend reports a local model/runtime ready.");
+              const unavailableReason = modelMessage(model.unavailable_reason || "This model is not ready to load yet.");
+              const runtimeLabel = String(model.runtime_label || compatibility.preferred_runtime || engine || "local_mlx");
+              const actionLabel = String(compatibility.action || loadStatus.replace(/_/g, " "));
+              const badgeLabel = unsupported && mode === "basic" ? "needs attention" : unsupported ? actionLabel : loadStatus;
+              const canPrepare = loadAvailable || downloadRequired;
               return (
-                <div key={id} className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background p-3">
-                  <div>
-                    <div className="font-medium">{String(model.name || id)}</div>
-                    <div className="text-sm text-muted-foreground">{String(model.family || model.engine || model.recommended_engine || "local")}</div>
-                    {!loaded && !loadAvailable ? <div className="mt-1 text-xs text-muted-foreground">{unavailableReason}</div> : null}
+                <div key={id} className="grid gap-3 rounded-lg border border-border bg-background/55 p-4 md:grid-cols-[1fr_auto]">
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                        <div className="text-base font-semibold">{String(model.name || id)}</div>
+                      {topPick?.id === id ? <Badge variant="success">recommended</Badge> : null}
+                    </div>
+                    <div className="mt-1 text-sm text-muted-foreground">
+                      {mode === "basic"
+                        ? [
+                          modelMessage(model.family || recommendation.family || "Local model"),
+                          /mlx|gguf|ollama/i.test(String(model.size || recommendation.size || "")) ? "" : model.size || recommendation.size,
+                        ].filter(Boolean).map(String).join(" · ")
+                        : [model.family || recommendation.family || "local", model.size || recommendation.size].filter(Boolean).map(String).join(" · ")}
+                    </div>
+                    {unsupported ? (
+                      <div className="mt-3 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm">
+                        <div className="font-medium">{mode === "basic" ? "Needs attention before loading" : actionLabel}</div>
+                        <div className="text-muted-foreground">{modelMessage(compatibility.user_message || unavailableReason)}</div>
+                      </div>
+                    ) : fallbackAvailable ? (
+                      <div className="mt-3 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm">
+                        <div className="font-medium">{mode === "basic" ? "Compatible loading path available" : "Runtime fallback available"}</div>
+                        <div className="text-muted-foreground">{modelMessage(compatibility.user_message || "Lattice will try the compatible local runtime path before showing this model as unsupported.")}</div>
+                      </div>
+                    ) : !loaded && !loadAvailable ? <div className="mt-1 text-xs text-muted-foreground">{unavailableReason}</div> : null}
+                    {mode !== "basic" ? (
+                      <div className="mt-2 text-xs text-muted-foreground">
+                        {runtimeLabel} · {loadId}
+                      </div>
+                    ) : null}
+                    {unsupported || fallbackAvailable ? <AlternativeModels compatibility={compatibility} /> : null}
                   </div>
-                  <div className="flex items-center gap-2">
-                    <Badge variant={loaded ? "success" : loadAvailable ? "muted" : "warning"}>{loaded ? "loaded" : loadStatus}</Badge>
-                    <ActionButton
-                      label={loaded ? "Unload" : "Load"}
-                      action={() => loaded ? latticeApi.unloadModel(loadId) : latticeApi.loadModel(loadId, engine, false)}
-                      invalidate={["models"]}
-                      disabled={!loaded && !loadAvailable}
-                    />
+                  <div className="flex flex-wrap items-center gap-2 md:justify-end">
+                    <Badge variant={loaded ? "success" : loadAvailable ? "muted" : "warning"}>{loaded ? "loaded" : badgeLabel}</Badge>
+                    {loaded ? (
+                      <ActionButton label="Unload" action={() => latticeApi.unloadModel(loadId)} invalidate={["models"]} />
+                    ) : (
+                      <Button
+                        variant="outline"
+                        disabled={busy || unsupported || !canPrepare || (downloadRequired && !consent)}
+                        onClick={() => prepareModel(loadId, engine || "local_mlx", consent)}
+                      >
+                        {activeModel === loadId && busy ? "Preparing" : downloadRequired ? "Install & Load" : "Validate & Load"}
+                      </Button>
+                    )}
                   </div>
                 </div>
               );
             })}
           </div>
         )}
-      </DataPanel>
-      <DataPanel title="Embedding provider" result={emb.data}>
-        {(data) => <StructuredView value={data} />}
-      </DataPanel>
+        </DataPanel>
+      </div>
+      <div className="space-y-4">
+        <DataPanel title={mode === "basic" ? "Memory search support" : "Embedding provider"} result={emb.data}>
+          {(data) => mode === "basic" ? <ValuePreview value={(data as Record<string, unknown>).state || "ready"} /> : <StructuredView value={data} />}
+        </DataPanel>
+        <DataPanel title="Model validation" result={models.data}>
+          {(data) => {
+            const profiles = asArray<Record<string, unknown>>((data as Record<string, unknown>).compat_profiles);
+            return profiles.length ? (
+              <EntityList items={profiles.map((profile) => ({
+                ...profile,
+                name: mode === "basic" ? profile.name || profile.display_name || "Loaded model" : profile.name || profile.display_name || profile.model_id,
+                status: profile.quality_status || profile.load_status || "checked",
+              }))} titleKey="name" metaKey="status" limit={6} />
+            ) : (
+              <EmptyState title="No model checked yet" detail="Load a model to confirm it can answer before you start using it." />
+            );
+          }}
+        </DataPanel>
+      </div>
+    </div>
+  );
+}
+
+function AlternativeModels({ compatibility }: { compatibility: Record<string, unknown> }) {
+  const mode = useAppStore((state) => state.mode);
+  const alternatives = asArray<Record<string, unknown>>(compatibility.alternatives);
+  if (!alternatives.length) return null;
+  return (
+    <div className="mt-2 flex flex-wrap gap-1">
+      {alternatives.slice(0, 3).map((item) => (
+        <Badge key={String(item.id || item.name)} variant="muted">
+          {mode === "basic" && /mlx|gguf|ollama|lm studio/i.test(String(item.name || item.id)) ? "Compatible alternative" : String(item.name || item.id)}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+function ModelRecovery({ error }: { error: Record<string, unknown> }) {
+  const guidance = asArray<string>(error.recovery_guidance);
+  return (
+    <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm">
+      <div className="font-medium">{String(error.user_message || "Model setup needs attention.")}</div>
+      {guidance.length ? (
+        <ul className="mt-2 list-inside list-disc text-muted-foreground">
+          {guidance.slice(0, 3).map((item) => <li key={item}>{item}</li>)}
+        </ul>
+      ) : null}
     </div>
   );
 }
@@ -133,18 +322,19 @@ function SkillsPanel() {
 }
 
 function McpPanel() {
+  const mode = useAppStore((state) => state.mode);
   const [query, setQuery] = React.useState("github");
   const tools = useQuery({ queryKey: ["mcpTools"], queryFn: latticeApi.mcpTools });
   const rec = useMutation({ mutationFn: () => latticeApi.mcpRecommend(query) });
   return (
     <div className="grid gap-4 xl:grid-cols-[1fr_1fr]">
-      <DataPanel title="MCP tools" result={tools.data}>
+      <DataPanel title={mode === "basic" ? "Tool connections" : "MCP tools"} result={tools.data}>
         {(data) => <EntityList items={(data as Record<string, unknown>).tools || (data as Record<string, unknown>).installed_mcps} titleKey="name" metaKey="status" />}
       </DataPanel>
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><Plug className="h-4 w-4" /> Recommend connector</CardTitle>
-          <CardDescription>Calls `/mcp/recommend`; returned installability depends on available connectors.</CardDescription>
+          <CardDescription>Describe what you want to connect and Lattice will suggest a connector.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
           <div className="flex gap-2">
@@ -176,7 +366,7 @@ function MarketplacePanel() {
       <Card className="xl:col-span-3">
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><PackagePlus className="h-4 w-4" /> Template install</CardTitle>
-          <CardDescription>Install controls are enabled only for template records returned by the backend.</CardDescription>
+          <CardDescription>Start from a reusable workspace pattern.</CardDescription>
         </CardHeader>
         <CardContent>
           {asArray<Record<string, unknown>>((templates.data?.data as Record<string, unknown>)?.templates).length ? (

package/frontend/src/pages/System.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Network, ShieldCheck, UserCircle, Users } from "lucide-react";
 import { latticeApi } from "@/api/client";
-import { ActionButton, DataPanel, EmptyState, EntityList, KeyValueList, OperationResult, StatGrid, StructuredView, Tabs } from "@/components/primitives";
+import { ActionButton, DataPanel, EmptyState, EntityList, KeyValueList, ModeGate, OperationResult, StatGrid, StructuredView, Tabs } from "@/components/primitives";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -14,27 +14,28 @@ type SystemTab = "account" | "workspaces" | "snapshots" | "activity" | "network"
 
 const tabs: Array<{ id: SystemTab; label: string }> = [
   { id: "account", label: "Account" },
-  { id: "workspaces", label: "Workspaces" },
+  { id: "workspaces", label: "Spaces" },
   { id: "snapshots", label: "Snapshots" },
-  { id: "activity", label: "Activity" },
-  { id: "network", label: "Network" },
-  { id: "settings", label: "Settings" },
+  { id: "activity", label: "History" },
+  { id: "network", label: "Devices" },
+  { id: "settings", label: "Preferences" },
   { id: "admin", label: "Admin" },
 ];
 
 export function SystemPage({ initialTab }: { initialTab?: string }) {
+  const mode = useAppStore((state) => state.mode);
   const [tab, setTab] = React.useState<SystemTab>((initialTab as SystemTab) || "account");
   React.useEffect(() => {
     if (tabs.some((item) => item.id === initialTab)) setTab(initialTab as SystemTab);
   }, [initialTab]);
   return (
-    <div className="space-y-4">
-      <header>
-        <div className="flex items-center gap-2 text-sm text-primary"><ShieldCheck className="h-4 w-4" /> Local-first control plane</div>
-        <h1 className="mt-2 text-3xl font-semibold">System</h1>
-        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">Identity, workspaces, snapshots, activity, network exchange, runtime settings, and admin status.</p>
+    <div className="space-y-5">
+      <header className="page-hero">
+        <div className="page-kicker"><ShieldCheck className="h-4 w-4" /> Care</div>
+        <h1 className="page-title">Keep your brain safe and portable.</h1>
+        <p className="page-copy">Manage identity, spaces, backups, trusted devices, and safeguards from one calm place.</p>
       </header>
-      <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as SystemTab)} />
+      <Tabs tabs={mode === "basic" ? tabs.filter((item) => item.id !== "admin") : tabs} value={tab} onChange={(id) => setTab(id as SystemTab)} />
       {tab === "account" ? <AccountPanel /> : null}
       {tab === "workspaces" ? <WorkspacePanel /> : null}
       {tab === "snapshots" ? <SnapshotsPanel /> : null}
@@ -66,8 +67,8 @@ function AccountPanel() {
       </DataPanel>
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2"><UserCircle className="h-4 w-4" /> Token-native account</CardTitle>
-          <CardDescription>Login, registration, profile update, and password change all call existing auth endpoints.</CardDescription>
+          <CardTitle className="flex items-center gap-2"><UserCircle className="h-4 w-4" /> Account</CardTitle>
+          <CardDescription>Sign in, create a local account, and keep your profile current.</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3">
           <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email" />
@@ -89,7 +90,7 @@ function AccountPanel() {
           ))}
         </CardContent>
       </Card>
-      <DataPanel title="SSO config" result={sso.data} className="xl:col-span-2">
+      <DataPanel title="Sign-in options" result={sso.data} className="xl:col-span-2">
         {(data) => <StructuredView value={data} />}
       </DataPanel>
     </div>
@@ -110,7 +111,7 @@ function WorkspacePanel() {
   const workspaces = asArray<Record<string, unknown>>((registry.data?.data as Record<string, unknown>)?.workspaces);
   return (
     <div className="grid gap-4 xl:grid-cols-[1.1fr_0.9fr]">
-      <DataPanel title="Workspace registry" result={registry.data}>
+      <DataPanel title="Your workspaces" result={registry.data}>
         {() => (
           <div className="grid gap-2">
             {workspaces.map((workspace) => {
@@ -137,7 +138,7 @@ function WorkspacePanel() {
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><Users className="h-4 w-4" /> Organizations and invitations</CardTitle>
-          <CardDescription>Local invite tokens and workspace creation are backend-owned.</CardDescription>
+          <CardDescription>Create or join a workspace before adding knowledge.</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3">
           <Input value={orgName} onChange={(e) => setOrgName(e.target.value)} placeholder="New organization name" />
@@ -187,7 +188,7 @@ function SnapshotsPanel() {
       <Card>
         <CardHeader>
           <CardTitle>Snapshot actions</CardTitle>
-          <CardDescription>Create and compare through Workspace OS endpoints.</CardDescription>
+          <CardDescription>Create checkpoints and compare changes over time.</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3">
           <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="snapshot name" />
@@ -240,14 +241,14 @@ function NetworkPanel() {
       </DataPanel>
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2"><Network className="h-4 w-4" /> Pair peer</CardTitle>
-          <CardDescription>Manual peer pairing for signed workspace bundle exchange.</CardDescription>
+          <CardTitle className="flex items-center gap-2"><Network className="h-4 w-4" /> Pair device</CardTitle>
+        <CardDescription>Pair a trusted device for workspace exchange.</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3">
-          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="peer name" />
-          <Input value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)} placeholder="http://peer.local:8765" />
+          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="device name" />
+          <Input value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)} placeholder="trusted device address" />
           <Input value={publicKey} onChange={(e) => setPublicKey(e.target.value)} placeholder="trusted public key" />
-          <Button disabled={!name || !baseUrl || !publicKey || pair.isPending} onClick={() => pair.mutate()}>Pair</Button>
+          <Button disabled={!name || !baseUrl || !publicKey || pair.isPending} onClick={() => pair.mutate()}>Pair device</Button>
           {pair.data ? <OperationResult result={pair.data} successLabel="Peer pairing request completed" /> : null}
         </CardContent>
       </Card>
@@ -344,8 +345,15 @@ function SettingsPanel() {
       <DataPanel title="Server health" result={health.data}>
         {(data) => <HealthView data={data as Record<string, unknown>} />}
       </DataPanel>
-      <DataPanel title="Host telemetry" result={sys.data}>
-        {(data) => <StructuredView value={data} />}
+      <DataPanel title={mode === "basic" ? "Computer readiness" : "Host telemetry"} result={sys.data}>
+        {(data) => mode === "basic" ? (
+          <StatGrid stats={[
+            { label: "CPU", value: `${String((data as Record<string, unknown>).cpu_pct || "0")}%` },
+            { label: "Memory", value: `${String((data as Record<string, unknown>).ram_pct || "0")}%` },
+            { label: "GPU memory", value: `${String((data as Record<string, unknown>).gpu_mem_pct || "0")}%` },
+            { label: "Local status", value: "ready" },
+          ]} />
+        ) : <StructuredView value={data} />}
       </DataPanel>
       <DataPanel title="Brain storage" result={storage.data} className="xl:col-span-3">
         {(data) => <StorageView data={data as Record<string, unknown>} />}
@@ -356,7 +364,7 @@ function SettingsPanel() {
       <Card className="xl:col-span-3">
         <CardHeader>
           <CardTitle>.latticebrain portability</CardTitle>
-          <CardDescription>Encrypted export, inspect, verify, dry-run restore, and confirmed restore use the Brain portability API.</CardDescription>
+          <CardDescription>Create an encrypted portable brain file, verify one, or preview a restore before applying it.</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3">
           <div className="grid gap-2 sm:grid-cols-[1fr_1fr]">
@@ -386,15 +394,15 @@ function SettingsPanel() {
           ))}
         </CardContent>
       </Card>
-      <Card className="xl:col-span-3">
+      {mode !== "basic" ? <Card className="xl:col-span-3">
         <CardHeader>
-          <CardTitle>Postgres scale mode</CardTitle>
-          <CardDescription>Opt-in migration and Docker setup; SQLite remains the default.</CardDescription>
+          <CardTitle>Scale mode</CardTitle>
+          <CardDescription>Optional advanced storage. Local SQLite remains the default.</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3">
           <div className="grid gap-2 sm:grid-cols-[1fr_220px]">
-            <Input value={dsn} onChange={(e) => setDsn(e.target.value)} placeholder="postgresql://user:pass@127.0.0.1:5432/lattice_brain" />
-            <Input value={schema} onChange={(e) => setSchema(e.target.value)} placeholder="schema" />
+            <Input value={dsn} onChange={(e) => setDsn(e.target.value)} placeholder="Postgres connection string" />
+            <Input value={schema} onChange={(e) => setSchema(e.target.value)} placeholder="database schema" />
           </div>
           <div className="flex flex-wrap gap-2">
             <Button variant="outline" onClick={() => docker.mutate(false)} disabled={docker.isPending}>Docker plan</Button>
@@ -408,7 +416,7 @@ function SettingsPanel() {
           {docker.data ? <OperationResult result={docker.data} successLabel="Docker setup request completed" /> : null}
           {migration.data ? <OperationResult result={migration.data} successLabel="Migration plan completed" /> : null}
         </CardContent>
-      </Card>
+      </Card> : null}
       <DataPanel title="Computer memory" result={comp.data} className="xl:col-span-3">
         {(data) => (
           <div className="space-y-3">
@@ -441,7 +449,16 @@ function PresenceView({ data }: { data: Record<string, unknown> }) {
 }
 
 function DeviceIdentityView({ data }: { data: Record<string, unknown> }) {
+  const mode = useAppStore((state) => state.mode);
   const publicKey = textValue(data.public_key, "");
+  if (mode === "basic") {
+    return (
+      <div className="space-y-3">
+        <StatusCard title="This Mac" status="trusted" detail="This device can participate in local workspace exchange when you pair another trusted device." />
+        <Badge variant="muted">{textValue(data.algorithm, "local identity")}</Badge>
+      </div>
+    );
+  }
   return (
     <div className="space-y-3">
       <div className="flex flex-wrap items-center gap-2">
@@ -458,15 +475,16 @@ function DeviceIdentityView({ data }: { data: Record<string, unknown> }) {
 }
 
 function HealthView({ data }: { data: Record<string, unknown> }) {
+  const mode = useAppStore((state) => state.mode);
   return (
     <div className="space-y-3">
       <StatGrid stats={[
         { label: "Status", value: data.status || data.ok || "reported" },
         { label: "Version", value: data.version || "not reported" },
         { label: "Mode", value: data.mode || data.environment || "local" },
-        { label: "Port", value: data.port || data.backend_port || "configured" },
+        ...(mode === "basic" ? [] : [{ label: "Port", value: data.port || data.backend_port || "configured" }]),
       ]} />
-      <StructuredView value={data} />
+      {mode === "basic" ? null : <StructuredView value={data} />}
     </div>
   );
 }
@@ -543,7 +561,7 @@ function HardeningView({ data }: { data: Record<string, unknown> }) {
         { label: "Backups", value: backup.count || backup.available || "reported" },
       ]} />
       <div className="grid gap-3 md:grid-cols-2">
-        <StatusCard title="Startup" status={startup.network_exposed ? "network exposed" : "local-only"} detail={`Host ${textValue(startup.host, "127.0.0.1")} on port ${textValue(startup.port, "configured")}.`} />
+        <StatusCard title="Startup" status={startup.network_exposed ? "network exposed" : "local-only"} detail="Lattice starts locally by default and reports when network access is enabled." />
         <StatusCard title="Integrations" status={privacy.local_only_default === false ? "review required" : "opt-in"} detail="External integrations remain disabled until the user explicitly enables them." />
         <StatusCard title="Device identity" status={textValue(identity.algorithm || identity.fingerprint, "reported")} detail={textValue(identity.storage, "Stored locally and used for signed bundle exchange.")} />
         <StatusCard title="Permissions" status={permissions.destructive_restore_requires_confirmation === false ? "review required" : "guarded"} detail="Export, import, and destructive restore permissions are surfaced through admin status." />
@@ -569,6 +587,7 @@ function SecurityView({ data }: { data: Record<string, unknown> }) {
 }
 
 function AdminPanel() {
+  const mode = useAppStore((state) => state.mode);
   const summary = useQuery({ queryKey: ["adminSummary"], queryFn: latticeApi.adminSummary });
   const users = useQuery({ queryKey: ["adminUsers"], queryFn: latticeApi.adminUsers });
   const audit = useQuery({ queryKey: ["adminAudit"], queryFn: latticeApi.adminAudit });
@@ -577,6 +596,9 @@ function AdminPanel() {
   const hardening = useQuery({ queryKey: ["adminProductHardening"], queryFn: latticeApi.adminProductHardening });
   const security = useQuery({ queryKey: ["adminSecurity"], queryFn: latticeApi.adminSecurity });
   const vpc = useQuery({ queryKey: ["vpcStatus"], queryFn: latticeApi.vpcStatus });
+  if (mode !== "admin") {
+    return <ModeGate title="Admin controls" detail="Switch to Admin mode to review users, audit events, policies, security posture, and private networking diagnostics." target="admin" />;
+  }
   return (
     <div className="grid gap-4 xl:grid-cols-2">
       <DataPanel title="Admin summary" result={summary.data}>{(data) => <KeyValueList data={data as Record<string, unknown>} />}</DataPanel>

package/frontend/src/routes.ts

@@ -15,16 +15,17 @@ import {
 export type PrimaryRoute = "brain" | "ask" | "capture" | "act" | "library" | "system";
 
 export const primaryRoutes = [
-  { id: "brain", label: "Brain", icon: Brain, description: "Knowledge graph, retrieval, memory, provenance" },
-  { id: "ask", label: "Ask", icon: MessageSquare, description: "Chat, conversations, context trace" },
-  { id: "capture", label: "Capture", icon: FolderInput, description: "Documents, local folders, browser ingestion" },
-  { id: "act", label: "Act", icon: Workflow, description: "Agents, workflows, approvals, hooks" },
-  { id: "library", label: "Library", icon: Library, description: "Models, skills, MCP, templates" },
-  { id: "system", label: "System", icon: Settings, description: "Account, workspaces, snapshots, network, admin" },
+  { id: "brain", label: "Home", icon: Brain, description: "The living map of what Lattice knows" },
+  { id: "ask", label: "Ask", icon: MessageSquare, description: "Think with remembered context" },
+  { id: "capture", label: "Add", icon: FolderInput, description: "Bring in files, folders, and pages" },
+  { id: "act", label: "Automate", icon: Workflow, description: "Turn goals into supervised runs" },
+  { id: "library", label: "Library", icon: Library, description: "Choose models, skills, and tools" },
+  { id: "system", label: "Care", icon: Settings, description: "Keep your brain safe and portable" },
 ] as const;
 
 export const routeAliases: Record<string, { primary: PrimaryRoute; tab?: string }> = {
   home: { primary: "brain", tab: "overview" },
+  onboarding: { primary: "system", tab: "account" },
   "knowledge-graph": { primary: "brain", tab: "graph" },
   "hybrid-search": { primary: "brain", tab: "search" },
   memory: { primary: "brain", tab: "memory" },
@@ -57,16 +58,17 @@ export const routeAliases: Record<string, { primary: PrimaryRoute; tab?: string
 };
 
 export const commandRoutes = [
-  { key: "brain", label: "Brain", icon: Brain },
-  { key: "knowledge-graph", label: "Knowledge Graph", icon: Network },
-  { key: "hybrid-search", label: "Hybrid Search", icon: Zap },
+  { key: "brain", label: "Home", icon: Brain },
+  { key: "onboarding", label: "First 10 Minutes", icon: Settings },
+  { key: "knowledge-graph", label: "Memory Map", icon: Network },
+  { key: "hybrid-search", label: "Search Everything", icon: Zap },
   { key: "memory", label: "Memory", icon: Database },
   { key: "chat", label: "Ask", icon: MessageSquare },
-  { key: "files", label: "Capture Files", icon: FolderInput },
-  { key: "agents", label: "Agents", icon: Workflow },
-  { key: "workflows", label: "Workflows", icon: Workflow },
+  { key: "files", label: "Add Files", icon: FolderInput },
+  { key: "agents", label: "Start a Run", icon: Workflow },
+  { key: "workflows", label: "Automations", icon: Workflow },
   { key: "models", label: "Models", icon: Library },
-  { key: "network", label: "Brain Network", icon: Network },
+  { key: "network", label: "Trusted Devices", icon: Network },
   { key: "activity", label: "Activity", icon: Activity },
   { key: "admin/security", label: "Security", icon: Shield },
 ];