ltcai 4.0.1 → 4.2.0

package/frontend/src/pages/Ask.tsx

@@ -0,0 +1,200 @@
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ImagePlus, MessageSquare, Send, Trash2 } from "lucide-react";
+import { latticeApi } from "@/api/client";
+import { DataPanel, EmptyState, EntityList, JsonView, SourceBadge } 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 { asArray } from "@/lib/utils";
+
+type Msg = { role?: string; content?: string; timestamp?: string };
+
+function fileToDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+export function AskPage() {
+  const qc = useQueryClient();
+  const history = useQuery({ queryKey: ["chatHistory"], queryFn: latticeApi.chatHistory });
+  const models = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
+  const [conversationId, setConversationId] = React.useState<string | null>(null);
+  const conversation = useQuery({
+    queryKey: ["conversation", conversationId],
+    queryFn: () => latticeApi.conversation(conversationId || ""),
+    enabled: !!conversationId,
+  });
+  const [messages, setMessages] = React.useState<Msg[]>([]);
+  const [draft, setDraft] = React.useState("");
+  const [imageData, setImageData] = React.useState<string | null>(null);
+  const [trace, setTrace] = React.useState<unknown>(null);
+  const [streaming, setStreaming] = React.useState(false);
+
+  React.useEffect(() => {
+    if (conversation.data?.ok) setMessages(asArray<Msg>((conversation.data.data as Record<string, unknown>).messages || conversation.data.data));
+  }, [conversation.data]);
+
+  const send = async () => {
+    const message = draft.trim();
+    if (!message || streaming) return;
+    setDraft("");
+    setMessages((items) => [...items, { role: "user", content: message }, { role: "assistant", content: "" }]);
+    setStreaming(true);
+    try {
+      const result = await latticeApi.streamChat(
+        { message, conversation_id: conversationId || undefined, image_data: imageData || undefined },
+        {
+          onChunk: (_delta, fullText) => {
+            setMessages((items) => {
+              const next = [...items];
+              const last = next[next.length - 1] || { role: "assistant" };
+              next[next.length - 1] = { ...last, role: "assistant", content: fullText };
+              return next;
+            });
+          },
+          onTrace: setTrace,
+        },
+      );
+      if (result.error) {
+        setMessages((items) => {
+          const next = [...items];
+          next[next.length - 1] = { role: "assistant", content: `Unavailable: ${result.error}` };
+          return next;
+        });
+      }
+    } finally {
+      setStreaming(false);
+      setImageData(null);
+      await qc.invalidateQueries({ queryKey: ["chatHistory"] });
+    }
+  };
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => latticeApi.deleteConversation(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["chatHistory"] }),
+  });
+
+  return (
+    <div className="grid min-h-[calc(100vh-7rem)] 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>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <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"
+            >
+              <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">
+                <span>{String(item.updated_at || "")}</span>
+                <Trash2
+                  className="h-3.5 w-3.5"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    deleteMutation.mutate(String(item.id));
+                  }}
+                />
+              </div>
+            </button>
+          )) : <EmptyState title="No conversations" detail="Start a new exchange or sign in to load history." />}
+        </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">
+          <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>
+          </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">
+          {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="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>
+        <div className="border-t border-border p-4">
+          {imageData ? <Badge variant="success" className="mb-2">image attached</Badge> : null}
+          <Textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                void send();
+              }
+            }}
+            placeholder="Ask the brain..."
+          />
+          <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
+              <input
+                type="file"
+                accept="image/*"
+                className="sr-only"
+                onChange={async (e) => {
+                  const file = e.target.files?.[0];
+                  if (file) setImageData(await fileToDataUrl(file));
+                }}
+              />
+            </label>
+            <Button disabled={!draft.trim() || streaming} onClick={() => void send()}>
+              <Send className="h-4 w-4" /> Send
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <aside className="space-y-4">
+        <ContextPreview question={draft || [...messages].reverse().find((m: Msg) => m.role === "user")?.content || ""} trace={trace} />
+      </aside>
+    </div>
+  );
+}
+
+function ContextPreview({ question, trace }: { question: string; trace: unknown }) {
+  const hybrid = useQuery({
+    queryKey: ["askHybrid", question],
+    queryFn: () => latticeApi.hybridSearch(question),
+    enabled: question.trim().length > 2,
+  });
+  const graph = useQuery({ queryKey: ["graph"], queryFn: latticeApi.graph });
+  return (
+    <>
+      <DataPanel title="Retrieval 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}>
+        {(data) => <EntityList items={(data as Record<string, unknown>).nodes} titleKey="title" metaKey="type" limit={5} />}
+      </DataPanel>
+      <Card>
+        <CardHeader>
+          <CardTitle>Why this context</CardTitle>
+          <CardDescription>Trace emitted by `/chat` when the backend includes it.</CardDescription>
+        </CardHeader>
+        <CardContent>{trace ? <JsonView value={trace} /> : <EmptyState title="No trace yet" />}</CardContent>
+      </Card>
+    </>
+  );
+}

package/frontend/src/pages/Brain.tsx

@@ -0,0 +1,267 @@
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import cytoscape, { Core } from "cytoscape";
+import { BrainCircuit, DatabaseBackup, Network, Search, Sparkles } from "lucide-react";
+import { latticeApi } from "@/api/client";
+import { ActionButton, DataPanel, EntityList, JsonView, LoadingPanel, StatGrid, 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 { asArray, pct } from "@/lib/utils";
+
+type BrainTab = "overview" | "graph" | "search" | "memory" | "provenance" | "portability";
+
+const tabs: Array<{ id: BrainTab; label: string }> = [
+  { id: "overview", label: "Overview" },
+  { id: "graph", label: "Graph" },
+  { id: "search", label: "Search" },
+  { id: "memory", label: "Memory" },
+  { id: "provenance", label: "Provenance" },
+  { id: "portability", label: "Portability" },
+];
+
+function graphElements(data: unknown) {
+  const graph = data as { nodes?: Array<Record<string, unknown>>; edges?: Array<Record<string, unknown>> };
+  const nodes = asArray<Record<string, unknown>>(graph.nodes).slice(0, 160).map((node) => ({
+    data: {
+      id: String(node.id || node.node_id || node.title),
+      label: String(node.title || node.label || node.id || "Node"),
+      type: String(node.type || "Node"),
+    },
+  }));
+  const nodeIds = new Set(nodes.map((node) => node.data.id));
+  const edges = asArray<Record<string, unknown>>(graph.edges).slice(0, 260).flatMap((edge, index) => {
+    const source = String(edge.from || edge.source || edge.source_id || "");
+    const target = String(edge.to || edge.target || edge.target_id || "");
+    if (!nodeIds.has(source) || !nodeIds.has(target)) return [];
+    return [{
+      data: {
+        id: String(edge.id || `edge-${index}`),
+        source,
+        target,
+        label: String(edge.type || edge.label || ""),
+      },
+    }];
+  });
+  return [...nodes, ...edges];
+}
+
+function CytoscapeGraph({ data }: { data: unknown }) {
+  const hostRef = React.useRef<HTMLDivElement | null>(null);
+  const cyRef = React.useRef<Core | null>(null);
+  React.useEffect(() => {
+    if (!hostRef.current) return;
+    const elements = graphElements(data);
+    cyRef.current?.destroy();
+    cyRef.current = cytoscape({
+      container: hostRef.current,
+      elements,
+      style: [
+        {
+          selector: "node",
+          style: {
+            "background-color": "#21c7bd",
+            "border-color": "#88fff5",
+            "border-width": 1,
+            color: "#f7ffff",
+            label: "data(label)",
+            "font-size": 9,
+            "text-outline-color": "#071012",
+            "text-outline-width": 2,
+            width: 22,
+            height: 22,
+          },
+        },
+        {
+          selector: "edge",
+          style: {
+            width: 1.2,
+            "line-color": "#6b7893",
+            "target-arrow-shape": "triangle",
+            "target-arrow-color": "#6b7893",
+            "curve-style": "bezier",
+          },
+        },
+      ],
+      layout: { name: "cose", animate: false, idealEdgeLength: 110, nodeRepulsion: 4500 },
+      wheelSensitivity: 0.25,
+    });
+    return () => cyRef.current?.destroy();
+  }, [data]);
+  return <div ref={hostRef} data-testid="brain-cytoscape" className="h-[520px] w-full overflow-hidden rounded-lg border border-border bg-background brain-grid" />;
+}
+
+export function BrainPage({ initialTab }: { initialTab?: string }) {
+  const [tab, setTab] = React.useState<BrainTab>((initialTab as BrainTab) || "graph");
+  React.useEffect(() => {
+    if (initialTab && tabs.some((item) => item.id === initialTab)) setTab(initialTab as BrainTab);
+  }, [initialTab]);
+  const graph = useQuery({ queryKey: ["graph"], queryFn: latticeApi.graph });
+  const stats = useQuery({ queryKey: ["graphStats"], queryFn: latticeApi.graphStats });
+  const index = useQuery({ queryKey: ["index"], queryFn: latticeApi.indexStatus });
+  const coverage = useQuery({ queryKey: ["coverage"], queryFn: latticeApi.graphCoverage });
+  const provenance = useQuery({ queryKey: ["provenance"], queryFn: () => latticeApi.graphProvenance(50) });
+  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>
+          <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">
+            The visible knowledge substrate: graph, memory, provenance, retrieval, and local portability. Empty states come from API availability, not canned data.
+          </p>
+        </div>
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="text-xs uppercase text-muted-foreground">Provenance 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>
+      </header>
+      <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as BrainTab)} />
+
+      {tab === "overview" ? (
+        <div className="grid gap-4 xl:grid-cols-2">
+          <DataPanel title="Brain status" result={stats.data}>
+            {(data) => <StatGrid stats={[
+              { label: "Nodes", value: (data as Record<string, unknown>).total_nodes ?? 0 },
+              { label: "Edges", value: (data as Record<string, unknown>).total_edges ?? 0 },
+              { label: "Node types", value: Object.keys(((data as Record<string, unknown>).nodes as Record<string, unknown>) || {}).length },
+              { label: "Edge types", value: Object.keys(((data as Record<string, unknown>).edges as Record<string, unknown>) || {}).length },
+            ]} />}
+          </DataPanel>
+          <DataPanel title="Retrieval index" result={index.data}>
+            {(data) => <JsonView value={data} />}
+          </DataPanel>
+          <DataPanel title="Memory tiers" result={memory.data}>
+            {(data) => <EntityList items={(data as Record<string, unknown>).tiers || (data as Record<string, unknown>).sources} titleKey="name" metaKey="health" />}
+          </DataPanel>
+          <DataPanel title="Recent provenance" result={provenance.data}>
+            {(data) => <EntityList items={(data as Record<string, unknown>).items || data} titleKey="source" metaKey="source_type" />}
+          </DataPanel>
+        </div>
+      ) : null}
+
+      {tab === "graph" ? (
+        graph.isLoading ? <LoadingPanel title="Knowledge graph" /> : (
+          <DataPanel title="Knowledge graph" description="Cytoscape.js explorer backed by /knowledge-graph/graph." result={graph.data}>
+            {(data) => <CytoscapeGraph data={data} />}
+          </DataPanel>
+        )
+      ) : null}
+
+      {tab === "search" ? <HybridSearch /> : null}
+      {tab === "memory" ? <MemoryPanel /> : null}
+      {tab === "provenance" ? <ProvenancePanel /> : null}
+      {tab === "portability" ? <PortabilityPanel /> : null}
+    </div>
+  );
+}
+
+function HybridSearch() {
+  const [query, setQuery] = React.useState("lattice brain");
+  const search = useMutation({ mutationFn: () => latticeApi.hybridSearch(query) });
+  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 per-result source scores when returned.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Input placeholder="lattice brain" value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={(e) => e.key === "Enter" && search.mutate()} />
+          <Button onClick={() => search.mutate()} disabled={!query.trim() || search.isPending}>Search</Button>
+        </div>
+        {search.data ? (
+          <DataPanel title="Results" result={search.data}>
+            {(data) => <EntityList items={(data as Record<string, unknown>).matches || data} titleKey="title" metaKey="type" limit={12} />}
+          </DataPanel>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+function MemoryPanel() {
+  const [query, setQuery] = React.useState("");
+  const manager = useQuery({ queryKey: ["memoryManager"], queryFn: latticeApi.memoryManager });
+  const recall = useMutation({ mutationFn: () => latticeApi.memoryRecall(query, 25) });
+  return (
+    <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
+      <DataPanel title="Memory manager" result={manager.data}>
+        {(data) => <JsonView value={data} />}
+      </DataPanel>
+      <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>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Recall memories about..." />
+          <div className="flex gap-2">
+            <Button disabled={!query.trim() || recall.isPending} onClick={() => recall.mutate()}>Recall</Button>
+            <ActionButton label="Compact" action={() => latticeApi.memoryCompact()} />
+            <ActionButton label="Rebuild vector" action={() => latticeApi.memoryRebuild()} />
+          </div>
+          {recall.data ? <JsonView value={recall.data.data} /> : null}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function ProvenancePanel() {
+  const provenance = useQuery({ queryKey: ["provenance"], queryFn: () => latticeApi.graphProvenance(80) });
+  const coverage = useQuery({ queryKey: ["coverage"], queryFn: latticeApi.graphCoverage });
+  return (
+    <div className="grid gap-4 xl:grid-cols-[0.8fr_1.2fr]">
+      <DataPanel title="Coverage" result={coverage.data}>
+        {(data) => <JsonView value={data} />}
+      </DataPanel>
+      <DataPanel title="Recent ingestion provenance" result={provenance.data}>
+        {(data) => <EntityList items={(data as Record<string, unknown>).items || data} titleKey="source" metaKey="source_type" limit={14} />}
+      </DataPanel>
+    </div>
+  );
+}
+
+function PortabilityPanel() {
+  const qc = useQueryClient();
+  const [artifact, setArtifact] = React.useState("");
+  const port = useQuery({ queryKey: ["portability"], queryFn: latticeApi.graphPortability });
+  const importMutation = useMutation({
+    mutationFn: () => latticeApi.graphImport(JSON.parse(artifact), true),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["portability"] }),
+  });
+  return (
+    <div className="grid gap-4 xl:grid-cols-2">
+      <DataPanel title="Portability status" result={port.data}>
+        {(data) => <JsonView value={data} />}
+      </DataPanel>
+      <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 pasted JSON.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex flex-wrap gap-2">
+            <ActionButton label="Export graph JSON" action={() => latticeApi.graphExport()} />
+            <ActionButton label="Create backup" action={() => latticeApi.graphBackup()} />
+          </div>
+          <Textarea value={artifact} onChange={(e) => setArtifact(e.target.value)} placeholder="Paste an export artifact JSON for dry-run import" />
+          <Button
+            variant="outline"
+            disabled={!artifact.trim() || importMutation.isPending}
+            onClick={() => importMutation.mutate()}
+          >
+            Dry-run import
+          </Button>
+          {importMutation.data ? <JsonView value={importMutation.data.data} /> : null}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/frontend/src/pages/Capture.tsx

@@ -0,0 +1,158 @@
+import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { FolderPlus, Globe2, HardDrive, Upload } from "lucide-react";
+import { latticeApi } from "@/api/client";
+import { ActionButton, DataPanel, EntityList, JsonView, Tabs } from "@/components/primitives";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { asArray } from "@/lib/utils";
+
+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" },
+];
+
+export function CapturePage({ initialTab }: { initialTab?: string }) {
+  const [tab, setTab] = React.useState<CaptureTab>((initialTab as CaptureTab) || "files");
+  React.useEffect(() => {
+    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>
+      </header>
+      <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as CaptureTab)} />
+      {tab === "files" ? <FilesPanel /> : null}
+      {tab === "local" ? <LocalPanel /> : null}
+      {tab === "browser" ? <BrowserPanel /> : null}
+      {tab === "pipeline" ? <PipelinePanel /> : null}
+    </div>
+  );
+}
+
+function FilesPanel() {
+  const qc = useQueryClient();
+  const docs = useQuery({ queryKey: ["documents"], queryFn: () => latticeApi.documents(200) });
+  const upload = useMutation({
+    mutationFn: (files: FileList) => Promise.all(Array.from(files).map((file) => latticeApi.uploadDocument(file))),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["documents"] }),
+  });
+  return (
+    <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>
+        </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">
+            <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>
+            <input type="file" multiple className="sr-only" onChange={(e) => e.target.files && upload.mutate(e.target.files)} />
+          </label>
+          {upload.data ? <JsonView value={upload.data.map((item) => item.data)} /> : null}
+        </CardContent>
+      </Card>
+      <DataPanel title="Uploaded documents" result={docs.data}>
+        {(data) => <EntityList items={(data as Record<string, unknown>).documents || data} titleKey="filename" metaKey="ingest_state" limit={12} />}
+      </DataPanel>
+    </div>
+  );
+}
+
+function LocalPanel() {
+  const qc = useQueryClient();
+  const [path, setPath] = React.useState("");
+  const local = useQuery({ queryKey: ["localSources"], queryFn: latticeApi.localSources });
+  const agent = useQuery({ queryKey: ["localAgent"], queryFn: latticeApi.localAgent });
+  const connect = useMutation({
+    mutationFn: () => latticeApi.connectFolder(path),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["localSources"] }),
+  });
+  return (
+    <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>
+        </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>
+          {connect.data ? <JsonView value={connect.data.data || connect.data.error} /> : null}
+        </CardContent>
+      </Card>
+      <DataPanel title="Connected sources" result={local.data}>
+        {(data) => (
+          <div className="space-y-3">
+            <EntityList items={(data as Record<string, unknown>).sources} titleKey="path" metaKey="status" />
+            {asArray<Record<string, unknown>>((data as Record<string, unknown>).sources).map((source) => (
+              <ActionButton
+                key={String(source.id || source.source_id || source.path)}
+                label={`Stop ${String(source.path || source.id || "source")}`}
+                action={() => latticeApi.localWatchStop(String(source.id || source.source_id))}
+                invalidate={["localSources"]}
+              />
+            ))}
+          </div>
+        )}
+      </DataPanel>
+      <DataPanel title="Local runtime probe" result={agent.data} className="xl:col-span-2">
+        {(data) => <JsonView value={data} />}
+      </DataPanel>
+    </div>
+  );
+}
+
+function BrowserPanel() {
+  const [url, setUrl] = React.useState("");
+  const read = useMutation({ mutationFn: () => latticeApi.browserReadUrl(url) });
+  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>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Input value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com/article" />
+          <Button disabled={!url.trim() || read.isPending} onClick={() => read.mutate()}>Capture URL</Button>
+        </div>
+        {read.data ? <JsonView value={read.data.data || read.data.error} /> : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+function PipelinePanel() {
+  const index = useQuery({ queryKey: ["index"], queryFn: latticeApi.indexStatus });
+  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}>
+        {(data) => <JsonView value={data} />}
+      </DataPanel>
+      <DataPanel title="Graph totals" result={stats.data}>
+        {(data) => <JsonView 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>
+        </CardHeader>
+        <CardContent>
+          <ActionButton label="Rebuild retrieval index" action={() => latticeApi.rebuildIndex()} invalidate={["index"]} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}