ltcai 4.4.0 → 4.6.0

package/frontend/src/components/primitives.tsx

@@ -1,24 +1,28 @@
 import * as React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { AlertCircle, CheckCircle2, Loader2 } from "lucide-react";
-import { ApiResult } from "@/api/client";
+import { AlertCircle, CheckCircle2, Loader2, LockKeyhole, Sparkles } from "lucide-react";
+import type { ApiResult } from "@/api/client";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useAppStore } from "@/store/appStore";
 import { cn, asArray, fmtNumber, shortId, titleize } from "@/lib/utils";
 
 export function SourceBadge({ result }: { result?: Pick<ApiResult, "source" | "ok" | "status"> }) {
+  const mode = useAppStore((state) => state.mode);
   if (!result) return <Badge variant="muted">not loaded</Badge>;
-  if (result.source === "live" && result.ok) return <Badge variant="success">live API</Badge>;
-  return <Badge variant="warning">unavailable</Badge>;
+  if (result.source === "live" && result.ok) return <Badge variant="success">{mode === "basic" ? "ready" : "connected"}</Badge>;
+  return <Badge variant="warning">{mode === "basic" ? "needs setup" : "unavailable"}</Badge>;
 }
 
 export function EmptyState({ title = "Unavailable", detail }: { title?: string; detail?: React.ReactNode }) {
   return (
-    <div className="flex min-h-28 flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/30 p-5 text-center text-sm text-muted-foreground">
-      <AlertCircle className="h-5 w-5" />
-      <div className="font-medium text-foreground">{title}</div>
-      {detail ? <div>{detail}</div> : null}
+    <div className="flex min-h-36 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/24 p-6 text-center text-sm text-muted-foreground">
+      <div className="grid h-10 w-10 place-items-center rounded-md border border-border bg-card">
+        <Sparkles className="h-5 w-5 text-primary" />
+      </div>
+      <div className="text-base font-semibold text-foreground">{title}</div>
+      {detail ? <div className="max-w-md leading-6">{detail}</div> : null}
     </div>
   );
 }
@@ -36,8 +40,9 @@ export function DataPanel<T>({
   children: (data: T) => React.ReactNode;
   className?: string;
 }) {
+  const mode = useAppStore((state) => state.mode);
   return (
-    <Card className={className}>
+    <Card className={cn("overflow-hidden", className)}>
       <CardHeader className="flex-row items-start justify-between gap-3">
         <div>
           <CardTitle>{title}</CardTitle>
@@ -46,7 +51,9 @@ export function DataPanel<T>({
         <SourceBadge result={result} />
       </CardHeader>
       <CardContent>
-        {result?.ok ? children(result.data) : <EmptyState detail={result?.error || "The backend did not return this capability."} />}
+        {result?.ok ? children(result.data) : (
+          <EmptyState detail={mode === "basic" ? "This area needs setup or is not available yet." : result?.error || "This capability is not reporting right now."} />
+        )}
       </CardContent>
     </Card>
   );
@@ -71,10 +78,10 @@ export function StatGrid({ stats }: { stats: Array<{ label: string; value: unkno
   return (
     <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
       {stats.map((stat) => (
-        <div key={stat.label} className="rounded-md border border-border bg-background p-3">
-          <div className="text-xs uppercase tracking-wide text-muted-foreground">{stat.label}</div>
-          <div className="mt-1 text-2xl font-semibold">{typeof stat.value === "number" ? fmtNumber(stat.value) : String(stat.value ?? "-")}</div>
-          {stat.hint ? <div className="mt-1 text-xs text-muted-foreground">{stat.hint}</div> : null}
+        <div key={stat.label} className="rounded-lg border border-border bg-background/55 p-4">
+          <div className="text-xs uppercase text-muted-foreground">{stat.label}</div>
+          <div className="mt-2 text-2xl font-semibold leading-tight">{typeof stat.value === "number" ? fmtNumber(stat.value) : String(stat.value ?? "-")}</div>
+          {stat.hint ? <div className="mt-2 text-xs leading-5 text-muted-foreground">{stat.hint}</div> : null}
         </div>
       ))}
     </div>
@@ -92,6 +99,32 @@ function scalarText(value: unknown) {
   return String(value);
 }
 
+const BASIC_HIDDEN_KEY = /(^id$|_id$|token|secret|passphrase|fingerprint|public_key|private_key|dsn|schema|endpoint|base_url|localhost|127\.0\.0\.1|stack|trace|raw|runtime|engine|module|port|host|api|internal)/i;
+
+function hideInBasic(key: string) {
+  return BASIC_HIDDEN_KEY.test(key);
+}
+
+function humanText(value: unknown) {
+  const text = scalarText(value);
+  if (text === "-") return text;
+  if (text.includes("/") || text.includes("@") || /\.[a-z0-9]{2,5}$/i.test(text)) return text;
+  return titleize(text.replace(/^agent:/i, "").replace(/^tool:/i, ""));
+}
+
+function firstRecordList(value: Record<string, unknown>) {
+  const preferred = [
+    "documents", "sources", "items", "agents", "workflows", "runs", "events",
+    "permissions", "models", "peers", "invitations", "roles", "policies",
+    "hooks", "tools", "templates", "plugins", "recent_events",
+  ];
+  for (const key of preferred) {
+    const rows = asArray<Record<string, unknown>>(value[key]);
+    if (rows.length) return rows;
+  }
+  return [];
+}
+
 export function ValuePreview({ value }: { value: unknown }) {
   if (typeof value === "boolean") {
     return <Badge variant={value ? "success" : "muted"}>{value ? "enabled" : "disabled"}</Badge>;
@@ -119,7 +152,10 @@ export function ValuePreview({ value }: { value: unknown }) {
 }
 
 export function KeyValueList({ data, limit = 8 }: { data: Record<string, unknown>; limit?: number }) {
-  const rows = Object.entries(data || {}).slice(0, limit);
+  const mode = useAppStore((state) => state.mode);
+  const rows = Object.entries(data || {})
+    .filter(([key]) => mode !== "basic" || !hideInBasic(key))
+    .slice(0, limit);
   if (!rows.length) return <EmptyState title="No values" />;
   return (
     <div className="divide-y divide-border rounded-md border border-border">
@@ -144,8 +180,10 @@ export function StructuredView({
   metaKey?: string;
   limit?: number;
 }) {
+  const mode = useAppStore((state) => state.mode);
+  if (mode === "basic") return <FriendlySummary value={value} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
   if (Array.isArray(value)) {
-    if (!value.length) return <EmptyState title="No records" detail="The API returned an empty collection." />;
+    if (!value.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
     if (value.every((item) => isRecord(item))) {
       return <EntityList items={value} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
     }
@@ -164,6 +202,46 @@ export function StructuredView({
   );
 }
 
+export function FriendlySummary({
+  value,
+  titleKey = "title",
+  metaKey = "status",
+  limit = 6,
+}: {
+  value: unknown;
+  titleKey?: string;
+  metaKey?: string;
+  limit?: number;
+}) {
+  if (Array.isArray(value)) {
+    if (!value.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
+    if (value.every((item) => isRecord(item))) {
+      return <EntityList items={value} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
+    }
+    return (
+      <div className="flex flex-wrap gap-1 rounded-md border border-border bg-background/55 p-3">
+        {value.slice(0, limit).map((item, index) => <Badge key={`${String(item)}-${index}`} variant="muted">{humanText(item)}</Badge>)}
+        {value.length > limit ? <Badge variant="muted">+{value.length - limit}</Badge> : null}
+      </div>
+    );
+  }
+  if (isRecord(value)) {
+    const list = firstRecordList(value);
+    if (list.length) return <EntityList items={list} titleKey={titleKey} metaKey={metaKey} limit={limit} />;
+    const friendly = Object.fromEntries(
+      Object.entries(value)
+        .filter(([key]) => !hideInBasic(key))
+        .map(([key, item]) => [key, Array.isArray(item) ? `${fmtNumber(item.length)} items` : isRecord(item) ? "available" : item]),
+    );
+    return <KeyValueList data={friendly} limit={limit} />;
+  }
+  return (
+    <div className="rounded-md border border-border bg-background/55 p-3 text-sm">
+      {humanText(value)}
+    </div>
+  );
+}
+
 export function OperationResult({
   result,
   successLabel = "Request completed",
@@ -171,6 +249,7 @@ export function OperationResult({
   result?: ApiResult<unknown> | null;
   successLabel?: string;
 }) {
+  const mode = useAppStore((state) => state.mode);
   if (!result) return null;
   if (!result.ok) {
     return <EmptyState title="Request unavailable" detail={result.error || <ValuePreview value={result.data} />} />;
@@ -178,7 +257,7 @@ export function OperationResult({
   return (
     <div className="space-y-2 rounded-md border border-border bg-background p-3">
       <Badge variant="success">{successLabel}</Badge>
-      <StructuredView value={result.data} />
+      {mode === "basic" ? <FriendlySummary value={result.data} /> : <StructuredView value={result.data} />}
     </div>
   );
 }
@@ -194,20 +273,21 @@ export function EntityList({
   metaKey?: string;
   limit?: number;
 }) {
+  const mode = useAppStore((state) => state.mode);
   const rows = asArray<Record<string, unknown>>(items).slice(0, limit);
-  if (!rows.length) return <EmptyState title="No records" detail="The API returned an empty collection." />;
+  if (!rows.length) return <EmptyState title="Nothing here yet" detail="New items will appear here when Lattice has something to show." />;
   return (
     <div className="grid gap-2">
       {rows.map((item, index) => (
-        <div key={String(item.id || item.name || index)} className="rounded-md border border-border bg-background p-3">
+        <div key={String(item.id || item.name || index)} className="rounded-lg border border-border bg-background/55 p-3">
           <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="font-medium">{String(item[titleKey] || item.name || item.id || `Record ${index + 1}`)}</div>
-            <Badge variant="muted">{String(item[metaKey] || item.status || item.state || "record")}</Badge>
+            <div className="font-medium">{mode === "basic" ? humanText(item[titleKey] || item.name || item.label || `Item ${index + 1}`) : String(item[titleKey] || item.name || item.id || `Record ${index + 1}`)}</div>
+            <Badge variant="muted">{mode === "basic" ? humanText(item[metaKey] || item.status || item.state || "ready") : String(item[metaKey] || item.status || item.state || "record")}</Badge>
           </div>
           {item.summary || item.description || item.path || (item.id && item[titleKey] !== item.id) ? (
             <p className="mt-1 text-sm text-muted-foreground">{String(item.summary || item.description || item.path || item.id)}</p>
           ) : null}
-          {item.id && item[titleKey] !== item.id ? (
+          {mode !== "basic" && item.id && item[titleKey] !== item.id ? (
             <div className="mt-1 text-xs text-muted-foreground">{shortId(item.id, 48)}</div>
           ) : null}
         </div>
@@ -216,6 +296,32 @@ export function EntityList({
   );
 }
 
+export function ModeGate({
+  title = "Advanced controls",
+  detail = "Switch modes when you want diagnostics or administrative controls. Basic mode keeps the product focused on everyday use.",
+  target = "advanced",
+}: {
+  title?: string;
+  detail?: string;
+  target?: "advanced" | "admin";
+}) {
+  const setMode = useAppStore((state) => state.setMode);
+  return (
+    <Card>
+      <CardContent className="flex flex-col items-start gap-3 p-6">
+        <div className="grid h-10 w-10 place-items-center rounded-md border border-border bg-background/70">
+          <LockKeyhole className="h-5 w-5 text-primary" />
+        </div>
+        <div>
+          <div className="text-lg font-semibold">{title}</div>
+          <p className="mt-1 max-w-2xl text-sm leading-6 text-muted-foreground">{detail}</p>
+        </div>
+        <Button onClick={() => setMode(target)}>{target === "admin" ? "Switch to Admin" : "Switch to Advanced"}</Button>
+      </CardContent>
+    </Card>
+  );
+}
+
 export function ActionButton({
   label,
   successLabel = "Done",
@@ -268,14 +374,14 @@ export function Tabs({
   onChange: (id: string) => void;
 }) {
   return (
-    <div className="flex flex-wrap gap-1 rounded-md border border-border bg-muted/30 p-1">
+    <div className="inline-flex max-w-full flex-wrap gap-1 rounded-lg border border-border bg-muted/28 p-1">
       {tabs.map((tab) => (
         <button
           key={tab.id}
           onClick={() => onChange(tab.id)}
           className={cn(
-            "h-8 rounded px-3 text-sm font-medium transition",
-            value === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+            "h-9 rounded-md px-3.5 text-sm font-semibold transition",
+            value === tab.id ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:bg-card/60 hover:text-foreground",
           )}
         >
           {tab.label}

package/frontend/src/components/ui/badge.tsx

@@ -9,7 +9,7 @@ const variants = {
   default: "border-primary/25 bg-primary/12 text-primary",
   success: "border-emerald-500/25 bg-emerald-500/12 text-emerald-300",
   warning: "border-amber-500/25 bg-amber-500/12 text-amber-300",
-  muted: "border-border bg-muted text-muted-foreground",
+  muted: "border-border bg-muted/70 text-muted-foreground",
   danger: "border-destructive/30 bg-destructive/12 text-destructive",
 };
 
@@ -17,7 +17,7 @@ export function Badge({ className, variant = "default", ...props }: BadgeProps)
   return (
     <span
       className={cn(
-        "inline-flex min-h-6 items-center rounded-md border px-2 py-0.5 text-xs font-medium",
+        "inline-flex min-h-6 max-w-full items-center rounded-md border px-2 py-0.5 text-xs font-semibold leading-none",
         variants[variant],
         className,
       )}

package/frontend/src/components/ui/button.tsx

@@ -3,20 +3,20 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex h-9 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45",
+  "inline-flex h-10 max-w-full items-center justify-center gap-2 rounded-md px-3.5 text-sm font-semibold leading-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-muted text-foreground",
-        outline: "border border-border bg-background hover:bg-muted",
+        default: "bg-primary text-primary-foreground shadow-[0_10px_30px_hsl(var(--primary)/0.16)] hover:bg-primary/92",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/82",
+        ghost: "text-foreground hover:bg-muted",
+        outline: "border border-border bg-card/70 hover:bg-muted/88",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
       },
       size: {
         sm: "h-8 px-2.5 text-xs",
-        md: "h-9 px-3",
-        icon: "h-9 w-9 px-0",
+        md: "h-10 px-3.5",
+        icon: "h-10 w-10 px-0",
       },
     },
     defaultVariants: {

package/frontend/src/components/ui/card.tsx

@@ -2,21 +2,21 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <section className={cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className)} {...props} />;
+  return <section className={cn("premium-surface rounded-lg text-card-foreground", className)} {...props} />;
 }
 
 export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
+  return <div className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />;
 }
 
 export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
-  return <h2 className={cn("text-sm font-semibold tracking-normal", className)} {...props} />;
+  return <h2 className={cn("text-base font-semibold tracking-normal", className)} {...props} />;
 }
 
 export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
+  return <p className={cn("text-sm leading-6 text-muted-foreground", className)} {...props} />;
 }
 
 export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("p-4 pt-0", className)} {...props} />;
+  return <div className={cn("p-5 pt-0", className)} {...props} />;
 }

package/frontend/src/components/ui/input.tsx

@@ -6,7 +6,7 @@ export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttribute
     <input
       ref={ref}
       className={cn(
-        "h-9 w-full rounded-md border border-input bg-background px-3 text-sm outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "h-10 w-full rounded-md border border-input bg-background/70 px-3 text-sm outline-none transition placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring/35 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/frontend/src/components/ui/textarea.tsx

@@ -6,7 +6,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTML
     <textarea
       ref={ref}
       className={cn(
-        "min-h-24 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "min-h-28 w-full resize-y rounded-md border border-input bg-background/70 px-3 py-3 text-sm leading-6 outline-none transition placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring/35 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

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