ltcai 4.4.0 → 4.6.0

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

@@ -1,34 +1,31 @@
 import {
-  Activity,
   Brain,
   Database,
   FolderInput,
   Library,
-  MessageSquare,
-  Network,
   Settings,
-  Shield,
   Workflow,
-  Zap,
 } from "lucide-react";
 
-export type PrimaryRoute = "brain" | "ask" | "capture" | "act" | "library" | "system";
+export type PrimaryRoute = "brain" | "memory" | "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: "Brain", icon: Brain, description: "Talk with your living Brain" },
+  { id: "memory", label: "Memory", icon: Database, description: "Recall what your Brain remembers" },
+  { id: "capture", label: "Files", icon: FolderInput, description: "Bring in files, folders, and pages" },
+  { id: "act", label: "Automations", icon: Workflow, description: "Turn goals into supervised runs" },
+  { id: "library", label: "Models", icon: Library, description: "Choose the local model powering your Brain" },
+  { id: "system", label: "Settings", 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" },
+  home: { primary: "brain", tab: "conversation" },
+  onboarding: { primary: "system", tab: "account" },
   "knowledge-graph": { primary: "brain", tab: "graph" },
-  "hybrid-search": { primary: "brain", tab: "search" },
-  memory: { primary: "brain", tab: "memory" },
-  chat: { primary: "ask", tab: "chat" },
+  "hybrid-search": { primary: "brain", tab: "knowledge" },
+  memory: { primary: "memory", tab: "memory" },
+  ask: { primary: "brain", tab: "conversation" },
+  chat: { primary: "brain", tab: "conversation" },
   files: { primary: "capture", tab: "files" },
   pipeline: { primary: "capture", tab: "pipeline" },
   "my-computer": { primary: "capture", tab: "local" },
@@ -58,17 +55,11 @@ 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: "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: "Files", icon: FolderInput },
+  { key: "workflows", label: "Automations", icon: Workflow },
   { key: "models", label: "Models", icon: Library },
-  { key: "network", label: "Brain Network", icon: Network },
-  { key: "activity", label: "Activity", icon: Activity },
-  { key: "admin/security", label: "Security", icon: Shield },
+  { key: "settings", label: "Settings", icon: Settings },
 ];
 
 export function parseHash() {

package/frontend/src/store/appStore.ts

@@ -30,10 +30,17 @@ function readMode(): WorkspaceMode {
   return "basic";
 }
 
+function readWorkspaceId(): string | null {
+  try {
+    return localStorage.getItem("lattice.workspace") || null;
+  } catch {}
+  return null;
+}
+
 export const useAppStore = create<AppState>((set) => ({
   theme: readTheme(),
   mode: readMode(),
-  workspaceId: null,
+  workspaceId: readWorkspaceId(),
   apiBase: null,
   setTheme: (theme) => {
     document.documentElement.dataset.theme = theme;