ltcai 4.4.0 → 4.5.1

package/frontend/src/pages/Act.tsx

@@ -3,37 +3,39 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import ReactFlow, { Background, Controls, Edge, Node } from "reactflow";
 import { Bot, GitBranch, PauseCircle, Play, Workflow } from "lucide-react";
 import { latticeApi } from "@/api/client";
-import { ActionButton, DataPanel, EntityList, KeyValueList, OperationResult, StructuredView, Tabs } from "@/components/primitives";
+import { ActionButton, DataPanel, EntityList, KeyValueList, ModeGate, OperationResult, 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, shortId } from "@/lib/utils";
 
 type ActTab = "agents" | "runs" | "workflows" | "hooks" | "tools";
 
 const tabs: Array<{ id: ActTab; label: string }> = [
-  { id: "agents", label: "Agents" },
+  { id: "agents", label: "Goals" },
   { id: "runs", label: "Runs" },
-  { id: "workflows", label: "Workflows" },
-  { id: "hooks", label: "Hooks" },
-  { id: "tools", label: "Tools" },
+  { id: "workflows", label: "Recipes" },
+  { id: "hooks", label: "Safeguards" },
+  { id: "tools", label: "Permissions" },
 ];
 
 export function ActPage({ initialTab }: { initialTab?: string }) {
+  const mode = useAppStore((state) => state.mode);
   const [tab, setTab] = React.useState<ActTab>((initialTab as ActTab) || "agents");
   React.useEffect(() => {
     if (tabs.some((item) => item.id === initialTab)) setTab(initialTab as ActTab);
   }, [initialTab]);
   return (
-    <div className="space-y-4">
-      <header>
-        <div className="flex items-center gap-2 text-sm text-primary"><Workflow className="h-4 w-4" /> Durable execution</div>
-        <h1 className="mt-2 text-3xl font-semibold">Act</h1>
-        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">Agents, workflows, approvals, hooks, and governed tools. Pauses and unavailable states are surfaced honestly.</p>
+    <div className="space-y-5">
+      <header className="page-hero">
+        <div className="page-kicker"><Workflow className="h-4 w-4" /> Automate</div>
+        <h1 className="page-title">Make work move, with a hand on the door.</h1>
+        <p className="page-copy">Give Lattice a goal, review each run, and approve sensitive actions before anything important changes.</p>
       </header>
-      <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as ActTab)} />
+      <Tabs tabs={tabs.map((item) => mode === "basic" ? item : item.id === "hooks" ? { ...item, label: "Hooks" } : item.id === "tools" ? { ...item, label: "Tools" } : item)} value={tab} onChange={(id) => setTab(id as ActTab)} />
       {tab === "agents" ? <AgentsPanel /> : null}
       {tab === "runs" ? <RunsPanel /> : null}
       {tab === "workflows" ? <WorkflowsPanel /> : null}
@@ -45,6 +47,7 @@ export function ActPage({ initialTab }: { initialTab?: string }) {
 
 function AgentsPanel() {
   const qc = useQueryClient();
+  const mode = useAppStore((state) => state.mode);
   const [goal, setGoal] = React.useState("");
   const runtime = useQuery({ queryKey: ["agentRuntime"], queryFn: latticeApi.agentRuntime });
   const registry = useQuery({ queryKey: ["agentRegistry"], queryFn: latticeApi.agentRegistry });
@@ -61,17 +64,17 @@ function AgentsPanel() {
   const runtimeData = (runtime.data?.data || {}) as Record<string, unknown>;
   const runtimeMeta = (runtimeData.runtime || {}) as Record<string, unknown>;
   const runtimeReady = Boolean(runtimeMeta.ready);
-  const runtimeReason = String(runtimeMeta.unavailable_reason || "Load an LLM-backed model before running agents.");
+  const runtimeReason = mode === "basic" ? "Load a local model before running agents." : String(runtimeMeta.unavailable_reason || "Load an LLM-backed model before running agents.");
   const canRunAgent = Boolean(goal.trim()) && runtimeReady && !run.isPending;
   return (
     <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2"><Bot className="h-4 w-4" /> Run agent pipeline</CardTitle>
-          <CardDescription>POST `/agents/api/run` creates a durable run; mode is determined by backend model availability.</CardDescription>
+          <CardTitle className="flex items-center gap-2"><Bot className="h-4 w-4" /> Start with a goal</CardTitle>
+          <CardDescription>Lattice will plan, execute, and review only when the local model is ready.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
-          <Textarea value={goal} onChange={(e) => setGoal(e.target.value)} placeholder="Describe the objective..." />
+          <Textarea value={goal} onChange={(e) => setGoal(e.target.value)} placeholder="What should Lattice help you accomplish?" />
           {!runtimeReady ? <Badge variant="warning">{runtimeReason}</Badge> : null}
           <Button
             className="w-full"
@@ -79,15 +82,30 @@ function AgentsPanel() {
             disabled={!canRunAgent}
             onClick={() => run.mutate()}
           >
-            <Play className="h-4 w-4" /> {runtimeReady ? "Run pipeline" : "Agent execution unavailable"}
+            <Play className="h-4 w-4" /> {runtimeReady ? "Start Run" : "Load a model first"}
           </Button>
           {run.data ? <OperationResult result={run.data} successLabel="Agent run request completed" /> : null}
         </CardContent>
       </Card>
-      <DataPanel title="Runtime status" result={runtime.data}>
-        {(data) => <StructuredView value={data} />}
+      <DataPanel title="Readiness" result={runtime.data}>
+        {(data) => mode === "basic" ? (
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div className="rounded-lg border border-border bg-background/55 p-3">
+              <div className="text-sm font-medium">Model</div>
+              <Badge variant={runtimeReady ? "success" : "warning"}>{runtimeReady ? "ready" : "needed"}</Badge>
+            </div>
+            <div className="rounded-lg border border-border bg-background/55 p-3">
+              <div className="text-sm font-medium">Planner</div>
+              <Badge variant="muted">{runtimeReady ? "available" : "waiting"}</Badge>
+            </div>
+            <div className="rounded-lg border border-border bg-background/55 p-3">
+              <div className="text-sm font-medium">Review</div>
+              <Badge variant="success">approval required</Badge>
+            </div>
+          </div>
+        ) : <StructuredView value={data} />}
       </DataPanel>
-      <DataPanel title="Agent registry" result={registry.data}>
+      <DataPanel title="Agent team" result={registry.data}>
         {(data) => (
           <div className="space-y-3">
             <EntityList items={(data as Record<string, unknown>).agents} titleKey="name" metaKey="type" />
@@ -98,7 +116,7 @@ function AgentsPanel() {
           </div>
         )}
       </DataPanel>
-      <DataPanel title="Agent capabilities" result={caps.data}>
+      <DataPanel title={mode === "basic" ? "What Lattice can do" : "What agents can do"} result={caps.data}>
         {(data) => <StructuredView value={data} />}
       </DataPanel>
     </div>
@@ -106,6 +124,7 @@ function AgentsPanel() {
 }
 
 function RunsPanel() {
+  const mode = useAppStore((state) => state.mode);
   const runtime = useQuery({ queryKey: ["agentRuntime"], queryFn: latticeApi.agentRuntime });
   const workflows = useQuery({ queryKey: ["workflowRuns"], queryFn: latticeApi.workflowRuns });
   const pending = useQuery({ queryKey: ["permissions"], queryFn: latticeApi.permissionsPending });
@@ -125,10 +144,10 @@ function RunsPanel() {
           const rows = Object.entries(pendingMap);
           return rows.length ? (
             <div className="grid gap-2">
-              {rows.map(([token, value]) => (
+              {rows.map(([token, value], index) => (
                 <div key={token} className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border p-3">
                   <div>
-                    <div className="font-medium">{shortId(token, 16)}</div>
+                    <div className="font-medium">{mode === "basic" ? `Approval request ${index + 1}` : shortId(token, 16)}</div>
                     <div className="mt-2">
                       <KeyValueList data={(value || {}) as Record<string, unknown>} limit={5} />
                     </div>
@@ -209,7 +228,7 @@ function WorkflowsPanel() {
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><GitBranch className="h-4 w-4" /> Workflow graph</CardTitle>
-          <CardDescription>React Flow view of workflow definitions. Running a workflow calls its backend run endpoint.</CardDescription>
+          <CardDescription>See your saved workflows as a simple map.</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="h-[440px] rounded-lg border border-border">
@@ -228,7 +247,7 @@ function WorkflowsPanel() {
                 <Input value={name} onChange={(event) => setName(event.target.value)} placeholder="Workflow name" />
                 <Button disabled={create.isPending} onClick={() => create.mutate()}>Create</Button>
               </div>
-              <Textarea value={importText} onChange={(event) => setImportText(event.target.value)} placeholder="Paste exported workflow JSON" />
+              <Textarea value={importText} onChange={(event) => setImportText(event.target.value)} placeholder="Paste a workflow export" />
               <Button variant="outline" disabled={!importText.trim() || importWorkflow.isPending} onClick={() => importWorkflow.mutate()}>Import</Button>
               {create.data ? <OperationResult result={create.data} successLabel="Workflow created" /> : null}
               {importWorkflow.data ? <OperationResult result={importWorkflow.data} successLabel="Workflow imported" /> : null}
@@ -248,7 +267,7 @@ function WorkflowsPanel() {
           </div>
         )}
       </DataPanel>
-      <DataPanel title="Trigger configuration" result={triggers.data} className="xl:col-span-2">
+      <DataPanel title="Automation triggers" result={triggers.data} className="xl:col-span-2">
         {(data) => <StructuredView value={data} />}
       </DataPanel>
     </div>
@@ -275,8 +294,19 @@ function manualWorkflowNodes(): Array<Record<string, unknown>> {
 }
 
 function HooksPanel() {
+  const mode = useAppStore((state) => state.mode);
   const hooks = useQuery({ queryKey: ["hooks"], queryFn: latticeApi.hooks });
   const runs = useQuery({ queryKey: ["hookRuns"], queryFn: latticeApi.hookRuns });
+  if (mode === "basic") {
+    return (
+      <div className="grid gap-4 xl:grid-cols-2">
+        <DataPanel title="Safeguards" result={hooks.data}>
+          {(data) => <EntityList items={(data as Record<string, unknown>).hooks} titleKey="name" metaKey="kind" />}
+        </DataPanel>
+        <ModeGate title="Detailed hook logs" detail="Switch to Advanced when you need hook run logs and manual diagnostic controls." />
+      </div>
+    );
+  }
   return (
     <div className="grid gap-4 xl:grid-cols-2">
       <DataPanel title="Hooks" result={hooks.data}>
@@ -287,8 +317,8 @@ function HooksPanel() {
       </DataPanel>
       <Card className="xl:col-span-2">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2"><PauseCircle className="h-4 w-4" /> Manual hook fire</CardTitle>
-          <CardDescription>Uses `/api/hooks/run`; no hook is treated as successful unless the backend records it.</CardDescription>
+        <CardTitle className="flex items-center gap-2"><PauseCircle className="h-4 w-4" /> Run manual hooks</CardTitle>
+          <CardDescription>Trigger hooks deliberately and review the recorded result.</CardDescription>
         </CardHeader>
         <CardContent>
           <ActionButton label="Run all manual hooks" action={() => latticeApi.hookRun({ event: "manual" })} invalidate={["hookRuns"]} />
@@ -301,7 +331,7 @@ function HooksPanel() {
 function ToolsPanel() {
   const tools = useQuery({ queryKey: ["toolPermissions"], queryFn: latticeApi.toolPermissions });
   return (
-    <DataPanel title="Tool governance" result={tools.data}>
+    <DataPanel title="Action permissions" result={tools.data}>
       {(data) => <EntityList items={(data as Record<string, unknown>).permissions || data} titleKey="tool" metaKey="risk" />}
     </DataPanel>
   );

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>
     </>
   );