ltcai 4.3.3 → 4.5.1

package/frontend/src/pages/Ask.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ImagePlus, MessageSquare, Send, Trash2 } from "lucide-react";
+import { ImagePlus, MessageSquare, Send, Sparkles, Trash2 } from "lucide-react";
 import { latticeApi } from "@/api/client";
 import { DataPanel, EmptyState, EntityList, SourceBadge, StructuredView } 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 { Textarea } from "@/components/ui/textarea";
+import { useAppStore } from "@/store/appStore";
 import { asArray } from "@/lib/utils";
 
 type Msg = { role?: string; content?: string; timestamp?: string };
@@ -81,19 +82,25 @@ export function AskPage() {
   });
 
   return (
-    <div className="grid min-h-[calc(100vh-7rem)] gap-4 xl:grid-cols-[18rem_minmax(0,1fr)_22rem]">
+    <div className="space-y-5">
+      <header className="page-hero">
+        <div className="page-kicker"><MessageSquare className="h-4 w-4" /> Ask</div>
+        <h1 className="page-title">Think out loud with Lattice.</h1>
+        <p className="page-copy">Ask in plain language, attach an image, and let your private memory shape the answer.</p>
+      </header>
+      <div className="grid min-h-[calc(100vh-13rem)] gap-4 xl:grid-cols-[18rem_minmax(0,1fr)_22rem]">
       <Card className="overflow-hidden">
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><MessageSquare className="h-4 w-4" /> Conversations</CardTitle>
-          <CardDescription>Durable history from the backend conversation store.</CardDescription>
+          <CardDescription>Pick up where you left off.</CardDescription>
         </CardHeader>
-        <CardContent className="space-y-2">
+        <CardContent className="soft-scrollbar max-h-[42rem] space-y-2 overflow-auto">
           <SourceBadge result={history.data} />
           {asArray<Record<string, unknown>>(history.data?.data).length ? asArray<Record<string, unknown>>(history.data?.data).map((item) => (
             <button
               key={String(item.id)}
               onClick={() => setConversationId(String(item.id))}
-              className="block w-full rounded-md border border-border bg-background p-3 text-left text-sm transition hover:bg-muted"
+              className="block w-full rounded-lg border border-border bg-background/55 p-3 text-left text-sm transition hover:bg-muted"
             >
               <div className="font-medium">{String(item.title || item.id)}</div>
               <div className="mt-1 flex items-center justify-between gap-2 text-xs text-muted-foreground">
@@ -111,28 +118,35 @@ export function AskPage() {
         </CardContent>
       </Card>
 
-      <section className="flex min-h-[40rem] flex-col rounded-lg border border-border bg-card">
-        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border p-4">
+      <section className="premium-surface flex min-h-[42rem] flex-col overflow-hidden rounded-lg">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border p-5">
           <div>
-            <h1 className="text-xl font-semibold">Ask</h1>
-            <p className="text-sm text-muted-foreground">Streams through `/chat`; no local answer is fabricated when the model is unavailable.</p>
+            <h2 className="text-xl font-semibold">New conversation</h2>
+            <p className="text-sm text-muted-foreground">Lattice answers only when a real model is available.</p>
           </div>
           <div className="flex flex-wrap items-center gap-2">
             <Badge variant="muted">{String((models.data?.data as Record<string, unknown>)?.current || "no model loaded")}</Badge>
             <SourceBadge result={models.data} />
           </div>
         </div>
-        <div className="scrollbar-thin flex-1 space-y-3 overflow-auto p-4">
+        <div className="soft-scrollbar flex-1 space-y-4 overflow-auto p-5">
           {messages.length ? messages.map((msg, index) => (
             <div key={index} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
-              <div className={`max-w-[78%] rounded-lg border p-3 text-sm ${msg.role === "user" ? "border-primary/30 bg-primary/15" : "border-border bg-background"}`}>
+              <div className={`max-w-[78%] rounded-lg border p-4 text-sm leading-6 ${msg.role === "user" ? "border-primary/30 bg-primary/15" : "border-border bg-background/68"}`}>
                 <div className="mb-1 text-xs uppercase text-muted-foreground">{msg.role || "message"}</div>
                 <div className="whitespace-pre-wrap">{msg.content}</div>
               </div>
             </div>
-          )) : <EmptyState title="Ready" detail="Ask a question once the backend and model are available." />}
+          )) : (
+            <div className="grid min-h-full place-items-center">
+              <EmptyState
+                title="What should we think through?"
+                detail="Ask about a document, a project, a memory, or a question you want Lattice to connect across your workspace."
+              />
+            </div>
+          )}
         </div>
-        <div className="border-t border-border p-4">
+        <div className="border-t border-border bg-background/28 p-5">
           {imageData ? <Badge variant="success" className="mb-2">image attached</Badge> : null}
           <Textarea
             value={draft}
@@ -143,12 +157,12 @@ export function AskPage() {
                 void send();
               }
             }}
-            placeholder="Ask the brain..."
+            placeholder="Ask anything about your work..."
           />
           <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
             <label className="inline-flex h-9 cursor-pointer items-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted">
               <ImagePlus className="h-4 w-4" />
-              Attach image
+              Image
               <input
                 type="file"
                 accept="image/*"
@@ -169,20 +183,38 @@ export function AskPage() {
       <aside className="space-y-4">
         <ContextPreview question={draft || [...messages].reverse().find((m: Msg) => m.role === "user")?.content || ""} trace={trace} />
       </aside>
+      </div>
     </div>
   );
 }
 
 function ContextPreview({ question, trace }: { question: string; trace: unknown }) {
+  const mode = useAppStore((state) => state.mode);
   const hybrid = useQuery({
     queryKey: ["askHybrid", question],
     queryFn: () => latticeApi.hybridSearch(question),
     enabled: question.trim().length > 2,
   });
   const graph = useQuery({ queryKey: ["graph"], queryFn: latticeApi.graph });
+  if (mode === "basic") {
+    return (
+      <>
+        <DataPanel title="Relevant memories" result={hybrid.data}>
+          {(data) => <EntityList items={(data as Record<string, unknown>).matches || data} titleKey="title" metaKey="type" limit={5} />}
+        </DataPanel>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2"><Sparkles className="h-4 w-4" /> Sources</CardTitle>
+            <CardDescription>Lattice shows supporting memories when an answer uses them.</CardDescription>
+          </CardHeader>
+          <CardContent>{trace ? <StructuredView value={trace} /> : <EmptyState title="Ask to see sources" />}</CardContent>
+        </Card>
+      </>
+    );
+  }
   return (
     <>
-      <DataPanel title="Retrieval preview" result={hybrid.data}>
+      <DataPanel title="Memory preview" result={hybrid.data}>
         {(data) => <EntityList items={(data as Record<string, unknown>).matches || data} titleKey="title" metaKey="type" limit={5} />}
       </DataPanel>
       <DataPanel title="Graph context" result={graph.data}>
@@ -190,10 +222,10 @@ function ContextPreview({ question, trace }: { question: string; trace: unknown
       </DataPanel>
       <Card>
         <CardHeader>
-          <CardTitle>Why this context</CardTitle>
-          <CardDescription>Trace emitted by `/chat` when the backend includes it.</CardDescription>
+          <CardTitle className="flex items-center gap-2"><Sparkles className="h-4 w-4" /> Why this context</CardTitle>
+          <CardDescription>Signals Lattice used to choose supporting memories.</CardDescription>
         </CardHeader>
-        <CardContent>{trace ? <StructuredView value={trace} /> : <EmptyState title="No trace yet" />}</CardContent>
+        <CardContent>{trace ? <StructuredView value={trace} /> : <EmptyState title="Ask to see context" />}</CardContent>
       </Card>
     </>
   );

package/frontend/src/pages/Brain.tsx

@@ -3,12 +3,13 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import cytoscape, { Core, ElementDefinition } from "cytoscape";
 import { BrainCircuit, DatabaseBackup, Filter, Focus, Layers3, LocateFixed, Search, Sparkles } from "lucide-react";
 import { latticeApi } from "@/api/client";
-import { ActionButton, DataPanel, EmptyState, EntityList, LoadingPanel, OperationResult, StatGrid, StructuredView, Tabs } from "@/components/primitives";
+import { ActionButton, DataPanel, EmptyState, EntityList, KeyValueList, LoadingPanel, 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";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { useAppStore } from "@/store/appStore";
 import { asArray, fmtNumber, pct, shortId, titleize } from "@/lib/utils";
 
 type BrainTab = "overview" | "graph" | "search" | "memory" | "provenance" | "portability";
@@ -60,11 +61,11 @@ type ExplorerModel = ParsedGraph & {
 };
 
 const tabs: Array<{ id: BrainTab; label: string }> = [
-  { id: "overview", label: "Overview" },
-  { id: "graph", label: "Graph" },
+  { id: "overview", label: "Today" },
+  { id: "graph", label: "Map" },
   { id: "search", label: "Search" },
   { id: "memory", label: "Memory" },
-  { id: "provenance", label: "Provenance" },
+  { id: "provenance", label: "Sources" },
   { id: "portability", label: "Portability" },
 ];
 
@@ -405,13 +406,14 @@ function CytoscapeGraph({
     <div
       ref={hostRef}
       data-testid="brain-cytoscape"
-      className="h-[620px] min-h-[32rem] w-full overflow-hidden rounded-md border border-border bg-background brain-grid"
+      className="brain-grid h-[620px] min-h-[32rem] w-full overflow-hidden rounded-lg border border-border bg-background/80"
     />
   );
 }
 
 export function BrainPage({ initialTab }: { initialTab?: string }) {
-  const [tab, setTab] = React.useState<BrainTab>((initialTab as BrainTab) || "graph");
+  const mode = useAppStore((state) => state.mode);
+  const [tab, setTab] = React.useState<BrainTab>((initialTab as BrainTab) || "overview");
   React.useEffect(() => {
     if (initialTab && tabs.some((item) => item.id === initialTab)) setTab(initialTab as BrainTab);
   }, [initialTab]);
@@ -423,19 +425,19 @@ export function BrainPage({ initialTab }: { initialTab?: string }) {
   const memory = useQuery({ queryKey: ["memoryManager"], queryFn: latticeApi.memoryManager });
 
   return (
-    <div className="space-y-4">
-      <header className="grid gap-4 xl:grid-cols-[1.4fr_0.6fr]">
+    <div className="space-y-5">
+      <header className="page-hero grid gap-4 xl:grid-cols-[1.4fr_0.6fr]">
         <div>
-          <div className="flex items-center gap-2 text-sm text-primary"><BrainCircuit className="h-4 w-4" /> Graph-first Digital Brain</div>
-          <h1 className="mt-2 text-3xl font-semibold tracking-normal">Brain</h1>
-          <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
-            Explore the knowledge graph, memory, provenance, retrieval, and portable brain state. Empty states reflect live API availability.
+          <div className="page-kicker"><BrainCircuit className="h-4 w-4" /> Home</div>
+          <h1 className="page-title">Start from the shape of your work.</h1>
+          <p className="page-copy">
+            Lattice turns what you add into a living memory map, then keeps every answer tied back to its source.
           </p>
         </div>
-        <div className="rounded-md border border-border bg-card p-4">
-          <div className="text-xs uppercase text-muted-foreground">Provenance coverage</div>
+        <div className="rounded-lg border border-border bg-background/58 p-4">
+          <div className="text-xs uppercase text-muted-foreground">Source coverage</div>
           <div className="mt-2 text-3xl font-semibold">{pct((coverage.data?.data as Record<string, unknown>)?.coverage_ratio)}</div>
-          <div className="mt-2 text-sm text-muted-foreground">Source: {coverage.data?.source || "loading"}</div>
+          <div className="mt-2 text-sm text-muted-foreground">{coverage.data?.ok ? "Sources are linked to graph records." : "Checking source coverage."}</div>
         </div>
       </header>
       <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as BrainTab)} />
@@ -451,7 +453,7 @@ export function BrainPage({ initialTab }: { initialTab?: string }) {
           <DataPanel title="Memory tiers" result={memory.data}>
             {(data) => <MemoryStatus data={data as Record<string, unknown>} />}
           </DataPanel>
-          <DataPanel title="Recent provenance" result={provenance.data}>
+          <DataPanel title="Recent sources" result={provenance.data}>
             {(data) => <EntityList items={(data as Record<string, unknown>).items || data} titleKey="source" metaKey="source_type" />}
           </DataPanel>
         </div>
@@ -459,7 +461,7 @@ export function BrainPage({ initialTab }: { initialTab?: string }) {
 
       {tab === "graph" ? (
         graph.isLoading ? <LoadingPanel title="Knowledge graph" /> : (
-          <DataPanel title="Digital Brain explorer" description="Interactive Cytoscape.js explorer backed by /knowledge-graph/graph." result={graph.data}>
+          <DataPanel title="Brain map" description={mode === "basic" ? "Search, focus, and filter the ideas Lattice has learned from your workspace." : "Explore relationships, sources, and graph structure."} result={graph.data}>
             {(data) => <DigitalBrainExplorer data={data} />}
           </DataPanel>
         )
@@ -474,6 +476,7 @@ export function BrainPage({ initialTab }: { initialTab?: string }) {
 }
 
 function GraphStatus({ data }: { data: Record<string, unknown> }) {
+  const mode = useAppStore((state) => state.mode);
   const nodeTypes = Object.keys((data.nodes as Record<string, unknown>) || {});
   const edgeTypes = Object.keys((data.edges as Record<string, unknown>) || {});
   return (
@@ -484,7 +487,11 @@ function GraphStatus({ data }: { data: Record<string, unknown> }) {
         { label: "Node types", value: nodeTypes.length },
         { label: "Edge types", value: edgeTypes.length },
       ]} />
-      <StructuredView value={{ node_types: nodeTypes, edge_types: edgeTypes }} />
+      {mode === "basic" ? (
+        <div className="flex flex-wrap gap-1">
+          {[...nodeTypes, ...edgeTypes].slice(0, 10).map((item) => <Badge key={item} variant="muted">{titleize(item)}</Badge>)}
+        </div>
+      ) : <StructuredView value={{ node_types: nodeTypes, edge_types: edgeTypes }} />}
     </div>
   );
 }
@@ -515,10 +522,11 @@ function MemoryStatus({ data }: { data: Record<string, unknown> }) {
 }
 
 function DigitalBrainExplorer({ data }: { data: unknown }) {
+  const mode = useAppStore((state) => state.mode);
   const parsed = React.useMemo(() => parseGraph(data), [data]);
   const [search, setSearch] = React.useState("");
   const [groupFilter, setGroupFilter] = React.useState("all");
-  const [minImportance, setMinImportance] = React.useState(0);
+  const [minImportance, setMinImportance] = React.useState(mode === "basic" ? 0.1 : 0);
   const [labelMode, setLabelMode] = React.useState<LabelMode>("important");
   const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(new Set());
   const [selectedId, setSelectedId] = React.useState<string | null>(null);
@@ -544,11 +552,14 @@ function DigitalBrainExplorer({ data }: { data: unknown }) {
       return next;
     });
   };
+  React.useEffect(() => {
+    if (mode === "basic" && minImportance < 0.1) setMinImportance(0.1);
+  }, [mode, minImportance]);
   if (!parsed.nodes.length) {
     return (
       <EmptyState
         title="No graph records yet"
-        detail="Capture a document, note, or local folder to create graph nodes with provenance."
+        detail="Capture a document, note, or local folder to create connected ideas with sources."
       />
     );
   }
@@ -557,7 +568,7 @@ function DigitalBrainExplorer({ data }: { data: unknown }) {
       <div className="grid gap-3 xl:grid-cols-[1fr_220px_180px_170px]">
         <div className="relative">
           <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input className="pl-9" value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search graph labels, types, provenance..." />
+          <Input className="pl-9" value={search} onChange={(event) => setSearch(event.target.value)} placeholder={mode === "basic" ? "Search ideas, files, people, and notes..." : "Search graph labels, types, provenance..."} />
         </div>
         <select className="h-9 rounded-md border border-border bg-background px-3 text-sm" value={groupFilter} onChange={(event) => setGroupFilter(event.target.value)}>
           <option value="all">All semantic groups</option>
@@ -574,9 +585,9 @@ function DigitalBrainExplorer({ data }: { data: unknown }) {
         <Card>
           <CardHeader className="flex-row items-start justify-between gap-3">
             <div>
-              <CardTitle className="flex items-center gap-2"><Layers3 className="h-4 w-4" /> Semantic map</CardTitle>
+              <CardTitle className="flex items-center gap-2"><Layers3 className="h-4 w-4" /> Knowledge map</CardTitle>
               <CardDescription>
-                Showing {fmtNumber(model.visibleNodes.length)} nodes and {fmtNumber(model.visibleEdges.length)} relationships from {fmtNumber(model.totalNodes)} graph nodes.
+                Showing {fmtNumber(model.visibleNodes.length)} ideas and {fmtNumber(model.visibleEdges.length)} connections from {fmtNumber(model.totalNodes)} saved items.
               </CardDescription>
             </div>
             <Badge variant={model.hiddenByFilters ? "warning" : "success"}>{model.hiddenByFilters ? `${fmtNumber(model.hiddenByFilters)} filtered` : "all in view"}</Badge>
@@ -598,7 +609,7 @@ function DigitalBrainExplorer({ data }: { data: unknown }) {
               />
               <Badge variant="muted">{Math.round(minImportance * 100)}%+</Badge>
               {selectedId ? <Button variant="outline" size="sm" onClick={() => setSelectedId(null)}>Clear focus</Button> : null}
-              {search.trim() ? <Button variant="outline" size="sm" onClick={() => backendSearch.mutate()} disabled={backendSearch.isPending}>Search brain</Button> : null}
+              {search.trim() ? <Button variant="outline" size="sm" onClick={() => backendSearch.mutate()} disabled={backendSearch.isPending}>Search all memories</Button> : null}
             </div>
             <div className="flex flex-wrap gap-2">
               {model.groups.map((group) => (
@@ -620,7 +631,7 @@ function DigitalBrainExplorer({ data }: { data: unknown }) {
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2"><Focus className="h-4 w-4" /> Focus</CardTitle>
-              <CardDescription>Click a node to inspect its neighborhood.</CardDescription>
+              <CardDescription>Click any idea to see why it matters.</CardDescription>
             </CardHeader>
             <CardContent className="space-y-3">
               {selected ? (
@@ -634,11 +645,18 @@ function DigitalBrainExplorer({ data }: { data: unknown }) {
                     </div>
                   </div>
                   {selected.summary ? <p className="text-sm text-muted-foreground">{selected.summary}</p> : null}
-                  <StructuredView value={{
-                    id: selected.id,
-                    degree: selected.degree,
-                    source: selected.source || "not reported",
-                  }} />
+                  {mode === "basic" ? (
+                    <KeyValueList data={{
+                      connections: selected.degree,
+                      source: selected.source || "not reported",
+                    }} />
+                  ) : (
+                    <StructuredView value={{
+                      id: selected.id,
+                      degree: selected.degree,
+                      source: selected.source || "not reported",
+                    }} />
+                  )}
                 </>
               ) : selectedGroup ? (
                 <div className="space-y-2">
@@ -651,8 +669,8 @@ function DigitalBrainExplorer({ data }: { data: unknown }) {
           </Card>
           <Card>
             <CardHeader>
-              <CardTitle>Important nodes</CardTitle>
-              <CardDescription>Highest-ranked visible graph records.</CardDescription>
+              <CardTitle>Important ideas</CardTitle>
+              <CardDescription>What Lattice thinks is most connected right now.</CardDescription>
             </CardHeader>
             <CardContent className="space-y-2">
               {model.visibleNodes.slice(0, 8).map((node) => (
@@ -687,8 +705,8 @@ function HybridSearch() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2"><Search className="h-4 w-4" /> Hybrid search</CardTitle>
-        <CardDescription>Calls the backend fused search endpoint and renders records with returned source scores.</CardDescription>
+        <CardTitle className="flex items-center gap-2"><Search className="h-4 w-4" /> Brain search</CardTitle>
+        <CardDescription>Find ideas across memories, documents, and connections.</CardDescription>
       </CardHeader>
       <CardContent className="space-y-3">
         <div className="flex flex-col gap-2 sm:flex-row">
@@ -717,7 +735,7 @@ function MemoryPanel() {
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><Sparkles className="h-4 w-4" /> Recall</CardTitle>
-          <CardDescription>Searches the real memory recall endpoint.</CardDescription>
+          <CardDescription>Bring back related memories from your workspace.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
           <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Recall memories about..." />
@@ -741,7 +759,7 @@ function ProvenancePanel() {
       <DataPanel title="Coverage" result={coverage.data}>
         {(data) => <StructuredView value={data} />}
       </DataPanel>
-      <DataPanel title="Recent ingestion provenance" result={provenance.data}>
+      <DataPanel title="Recent sources" result={provenance.data}>
         {(data) => <EntityList items={(data as Record<string, unknown>).items || data} titleKey="source" metaKey="source_type" limit={14} />}
       </DataPanel>
     </div>
@@ -770,22 +788,22 @@ function PortabilityPanel() {
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><DatabaseBackup className="h-4 w-4" /> Export, backup, import</CardTitle>
-          <CardDescription>Every control calls a real portability endpoint. Import is dry-run by default from a pasted export artifact.</CardDescription>
+          <CardDescription>Export, back up, or preview an import before changing your brain.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
           <div className="flex flex-wrap gap-2">
-            <ActionButton label="Export graph artifact" action={() => latticeApi.graphExport()} />
+            <ActionButton label="Export brain map" action={() => latticeApi.graphExport()} />
             <ActionButton label="Create backup" action={() => latticeApi.graphBackup()} />
           </div>
-          <Textarea value={artifact} onChange={(e) => setArtifact(e.target.value)} placeholder="Paste an exported graph artifact for dry-run import" />
+          <Textarea value={artifact} onChange={(e) => setArtifact(e.target.value)} placeholder="Paste an exported brain map to preview import" />
           <Button
             variant="outline"
             disabled={!artifact.trim() || importMutation.isPending}
             onClick={() => importMutation.mutate()}
           >
-            Dry-run import
+            Preview import
           </Button>
-          {importMutation.data ? <OperationResult result={importMutation.data} successLabel="Dry run completed" /> : null}
+          {importMutation.data ? <OperationResult result={importMutation.data} successLabel="Import preview completed" /> : null}
         </CardContent>
       </Card>
     </div>
@@ -798,7 +816,7 @@ function PortabilityStatus({ data }: { data: Record<string, unknown> }) {
   return (
     <div className="space-y-3">
       <StatGrid stats={[
-        { label: "Schema", value: data.graph_schema_version || data.schema_version || "reported" },
+        { label: "Graph version", value: data.graph_schema_version || data.schema_version || "reported" },
         { label: "Nodes", value: (stats.total_nodes as number) || Object.values((stats.nodes as Record<string, unknown>) || {}).reduce((sum: number, value) => sum + Number(value || 0), 0) },
         { label: "Edges", value: (stats.total_edges as number) || Object.values((stats.edges as Record<string, unknown>) || {}).reduce((sum: number, value) => sum + Number(value || 0), 0) },
         { label: "Storage", value: storage.engine || "reported" },

package/frontend/src/pages/Capture.tsx

@@ -12,9 +12,9 @@ type CaptureTab = "files" | "local" | "browser" | "pipeline";
 
 const tabs: Array<{ id: CaptureTab; label: string }> = [
   { id: "files", label: "Files" },
-  { id: "local", label: "Local folders" },
-  { id: "browser", label: "Web capture" },
-  { id: "pipeline", label: "Pipeline" },
+  { id: "local", label: "Folders" },
+  { id: "browser", label: "Web" },
+  { id: "pipeline", label: "Flow" },
 ];
 
 export function CapturePage({ initialTab }: { initialTab?: string }) {
@@ -23,11 +23,11 @@ export function CapturePage({ initialTab }: { initialTab?: string }) {
     if (initialTab === "pipeline" || initialTab === "local" || initialTab === "files") setTab(initialTab);
   }, [initialTab]);
   return (
-    <div className="space-y-4">
-      <header>
-        <div className="flex items-center gap-2 text-sm text-primary"><Upload className="h-4 w-4" /> One ingestion door</div>
-        <h1 className="mt-2 text-3xl font-semibold">Capture</h1>
-        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">Documents, folders, and URLs enter the brain through existing ingestion endpoints with provenance.</p>
+    <div className="space-y-5">
+      <header className="page-hero">
+        <div className="page-kicker"><Upload className="h-4 w-4" /> Add</div>
+        <h1 className="page-title">Feed the brain what matters.</h1>
+        <p className="page-copy">Drop in files, connect folders, or save a page. Lattice remembers the origin of every idea it learns.</p>
       </header>
       <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as CaptureTab)} />
       {tab === "files" ? <FilesPanel /> : null}
@@ -49,14 +49,14 @@ function FilesPanel() {
     <div className="grid gap-4 xl:grid-cols-[0.75fr_1.25fr]">
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2"><Upload className="h-4 w-4" /> Upload documents</CardTitle>
-          <CardDescription>Multipart upload to `/upload/document`; accepted files are parsed and indexed by the backend.</CardDescription>
+          <CardTitle className="flex items-center gap-2"><Upload className="h-4 w-4" /> Add documents</CardTitle>
+          <CardDescription>Choose files and Lattice will prepare them for search and memory.</CardDescription>
         </CardHeader>
         <CardContent>
-          <label className="flex min-h-44 cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-muted/30 p-5 text-center">
+          <label className="flex min-h-56 cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-muted/30 p-6 text-center transition hover:bg-muted/50">
             <Upload className="h-7 w-7 text-primary" />
-            <span className="font-medium">Choose files</span>
-            <span className="text-sm text-muted-foreground">PDF, DOCX, XLSX, PPTX, TXT, MD, CSV according to backend policy.</span>
+            <span className="text-lg font-semibold">Choose files</span>
+            <span className="max-w-sm text-sm leading-6 text-muted-foreground">PDF, Office files, notes, markdown, text, and spreadsheets are all welcome.</span>
             <input type="file" multiple className="sr-only" onChange={(e) => e.target.files && upload.mutate(e.target.files)} />
           </label>
           {upload.data ? (
@@ -86,12 +86,12 @@ function LocalPanel() {
     <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2"><FolderPlus className="h-4 w-4" /> Connect folder</CardTitle>
-          <CardDescription>The click is explicit consent; the backend still enforces its permission workflow.</CardDescription>
+          <CardTitle className="flex items-center gap-2"><FolderPlus className="h-4 w-4" /> Connect a folder</CardTitle>
+          <CardDescription>Point Lattice at a folder you want it to remember.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
-          <Input value={path} onChange={(e) => setPath(e.target.value)} placeholder="/Users/me/Documents/project" />
-          <Button disabled={!path.trim() || connect.isPending} onClick={() => connect.mutate()}>Connect and watch</Button>
+          <Input value={path} onChange={(e) => setPath(e.target.value)} placeholder="Folder path on this Mac" />
+          <Button disabled={!path.trim() || connect.isPending} onClick={() => connect.mutate()}>Connect Folder</Button>
           {connect.data ? <OperationResult result={connect.data} successLabel="Folder connection requested" /> : null}
         </CardContent>
       </Card>
@@ -110,7 +110,7 @@ function LocalPanel() {
           </div>
         )}
       </DataPanel>
-      <DataPanel title="Local runtime probe" result={agent.data} className="xl:col-span-2">
+      <DataPanel title="Folder access" result={agent.data} className="xl:col-span-2">
         {(data) => <StructuredView value={data} />}
       </DataPanel>
     </div>
@@ -123,8 +123,8 @@ function BrowserPanel() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2"><Globe2 className="h-4 w-4" /> URL capture</CardTitle>
-        <CardDescription>Fetches a URL locally through `/api/browser/read-url` and ingests the content with provenance.</CardDescription>
+        <CardTitle className="flex items-center gap-2"><Globe2 className="h-4 w-4" /> Save a web page</CardTitle>
+        <CardDescription>Capture a page so Lattice can remember the useful parts.</CardDescription>
       </CardHeader>
       <CardContent className="space-y-3">
         <div className="flex flex-col gap-2 sm:flex-row">
@@ -142,16 +142,16 @@ function PipelinePanel() {
   const stats = useQuery({ queryKey: ["graphStats"], queryFn: latticeApi.graphStats });
   return (
     <div className="grid gap-4 xl:grid-cols-2">
-      <DataPanel title="Index pipeline" result={index.data}>
+      <DataPanel title="Processing status" result={index.data}>
         {(data) => <StructuredView value={data} />}
       </DataPanel>
-      <DataPanel title="Graph totals" result={stats.data}>
+      <DataPanel title="Brain growth" result={stats.data}>
         {(data) => <StructuredView value={data} />}
       </DataPanel>
       <Card className="xl:col-span-2">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2"><HardDrive className="h-4 w-4" /> Rebuild controls</CardTitle>
-          <CardDescription>Rebuild calls the existing index endpoint. No background work is implied unless the API accepts it.</CardDescription>
+          <CardTitle className="flex items-center gap-2"><HardDrive className="h-4 w-4" /> Refresh memory</CardTitle>
+          <CardDescription>Refresh search when you want Lattice to re-check captured material.</CardDescription>
         </CardHeader>
         <CardContent>
           <ActionButton label="Rebuild retrieval index" action={() => latticeApi.rebuildIndex()} invalidate={["index"]} />