ltcai 4.4.0 → 4.6.0

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"]} />

package/frontend/src/pages/Library.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Boxes, Cpu, PackagePlus, Plug, Puzzle } from "lucide-react";
+import { Boxes, CheckCircle2, Cpu, Download, PackagePlus, PlayCircle, Plug, ShieldAlert } from "lucide-react";
 import { latticeApi } from "@/api/client";
-import { ActionButton, DataPanel, EntityList, OperationResult, StructuredView, Tabs } from "@/components/primitives";
+import { ActionButton, DataPanel, EmptyState, EntityList, OperationResult, StatGrid, StructuredView, Tabs, ValuePreview } 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 { useAppStore } from "@/store/appStore";
 import { asArray } from "@/lib/utils";
 
 type LibraryTab = "models" | "skills" | "mcp" | "marketplace";
@@ -14,23 +15,25 @@ type LibraryTab = "models" | "skills" | "mcp" | "marketplace";
 const tabs: Array<{ id: LibraryTab; label: string }> = [
   { id: "models", label: "Models" },
   { id: "skills", label: "Skills" },
-  { id: "mcp", label: "MCP" },
+  { id: "mcp", label: "Connections" },
   { id: "marketplace", label: "Marketplace" },
 ];
 
 export function LibraryPage({ initialTab }: { initialTab?: string }) {
+  const mode = useAppStore((state) => state.mode);
   const [tab, setTab] = React.useState<LibraryTab>((initialTab as LibraryTab) || "models");
   React.useEffect(() => {
     if (tabs.some((item) => item.id === initialTab)) setTab(initialTab as LibraryTab);
   }, [initialTab]);
+  const visibleTabs = tabs.map((item) => item.id === "mcp" && mode !== "basic" ? { ...item, label: "MCP / tools" } : item);
   return (
-    <div className="space-y-4">
-      <header>
-        <div className="flex items-center gap-2 text-sm text-primary"><Boxes className="h-4 w-4" /> Replaceable runtime assets</div>
-        <h1 className="mt-2 text-3xl font-semibold">Library</h1>
-        <p className="mt-2 max-w-3xl text-sm text-muted-foreground">Models, skills, MCP servers, plugins, and templates are managed by local backend registries.</p>
+    <div className="space-y-5">
+      <header className="page-hero">
+        <div className="page-kicker"><Boxes className="h-4 w-4" /> Library</div>
+        <h1 className="page-title">Choose what powers Lattice.</h1>
+        <p className="page-copy">Pick a private local model, add skills, and connect tools without learning runtime internals.</p>
       </header>
-      <Tabs tabs={tabs} value={tab} onChange={(id) => setTab(id as LibraryTab)} />
+      <Tabs tabs={visibleTabs} value={tab} onChange={(id) => setTab(id as LibraryTab)} />
       {tab === "models" ? <ModelsPanel /> : null}
       {tab === "skills" ? <SkillsPanel /> : null}
       {tab === "mcp" ? <McpPanel /> : null}
@@ -40,15 +43,115 @@ export function LibraryPage({ initialTab }: { initialTab?: string }) {
 }
 
 function ModelsPanel() {
+  const qc = useQueryClient();
+  const mode = useAppStore((state) => state.mode);
   const models = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
+  const recs = useQuery({ queryKey: ["modelRecommendations", "local_mlx"], queryFn: () => latticeApi.modelRecommendations("local_mlx") });
   const emb = useQuery({ queryKey: ["embeddings"], queryFn: latticeApi.embeddingsStatus });
+  const [consent, setConsent] = React.useState(false);
+  const [activeModel, setActiveModel] = React.useState<string | null>(null);
+  const [progress, setProgress] = React.useState<Record<string, unknown>[]>([]);
+  const [lastResult, setLastResult] = React.useState<Record<string, unknown> | null>(null);
+  const [lastError, setLastError] = React.useState<Record<string, unknown> | null>(null);
+  const [busy, setBusy] = React.useState(false);
   const catalog = [
     ...asArray<Record<string, unknown>>((models.data?.data as Record<string, unknown>)?.catalog),
     ...asArray<Record<string, unknown>>((models.data?.data as Record<string, unknown>)?.recommended),
   ];
+  const recommendationRows = asArray<Record<string, unknown>>(
+    ((recs.data?.data as Record<string, unknown>)?.recommendations as Record<string, unknown> | undefined)?.models,
+  );
+  const recommendationById = new Map(recommendationRows.map((item) => [String(item.id), item]));
+  const loadedIds = asArray<string>((models.data?.data as Record<string, unknown> | undefined)?.loaded);
+  const currentId = String((models.data?.data as Record<string, unknown> | undefined)?.current || "");
+  const current = catalog.find((model) => loadedIds.includes(String(model.id)) || String(model.id) === currentId);
+  const topPick = (((recs.data?.data as Record<string, unknown> | undefined)?.recommendations as Record<string, unknown> | undefined)?.top_pick || null) as Record<string, unknown> | null;
+  const latestProgress = progress[progress.length - 1] || null;
+
+  const modelMessage = React.useCallback((message: unknown) => {
+    const text = String(message || "This model is not ready to load yet.");
+    if (mode !== "basic") return text;
+    return text
+      .replace(/gemma4_unified/gi, "this local model format")
+      .replace(/mlx[-_ ]?vlm|mlx[-_ ]?lm|local_mlx|\bmlx\b|\bgguf\b|\bollama\b|hugging face/gi, "local model support")
+      .replace(/runtime/gi, "model support")
+      .replace(/model_type/gi, "model format")
+      .replace(/this local model format local model support format/gi, "this local model format")
+      .replace(/local model support model support/gi, "local model support");
+  }, [mode]);
+
+  async function prepareModel(loadId: string, engine: string, allowDownload: boolean) {
+    setBusy(true);
+    setActiveModel(loadId);
+    setProgress([]);
+    setLastResult(null);
+    setLastError(null);
+    const result = await latticeApi.streamModelPrepare(
+      { model: loadId, engine: engine || "local_mlx", allow_download: allowDownload },
+      {
+        onProgress: (event) => setProgress((items) => [...items.slice(-8), event]),
+        onDone: (event) => setLastResult(event),
+        onError: (event) => setLastError(event),
+      },
+    );
+    setBusy(false);
+    await qc.invalidateQueries({ queryKey: ["models"] });
+    await qc.invalidateQueries({ queryKey: ["modelRecommendations", "local_mlx"] });
+    if (!result.ok && !lastError) setLastError(result.data as Record<string, unknown>);
+  }
+
   return (
     <div className="grid gap-4 xl:grid-cols-[1.2fr_0.8fr]">
-      <DataPanel title="Model catalog" result={models.data}>
+      <div className="space-y-4">
+        <DataPanel title="Guided model setup" description="Analyze this Mac, recommend a model, install only with consent, validate it, then load it." result={recs.data}>
+          {(data) => {
+            const recommendation = (data as Record<string, unknown>).recommendations as Record<string, unknown> | undefined;
+            const profile = (data as Record<string, unknown>).profile as Record<string, unknown> | undefined;
+            return (
+              <div className="space-y-4">
+                <StatGrid stats={[
+                  { label: "Computer", value: profile?.os ? `${String(profile.os)} ${String(profile.arch || "")}` : "detected" },
+                  { label: "Memory", value: recommendation?.ram_gb ? `${String(recommendation.ram_gb)} GB` : "checking" },
+                  { label: "Top pick", value: topPick?.name || topPick?.id || "choose below" },
+                  { label: "Current", value: current?.name || currentId || "none" },
+                ]} />
+                <div className="grid gap-2 md:grid-cols-3 xl:grid-cols-6">
+                  {[
+                    ["Environment Analysis", true, Cpu],
+                    ["Recommended Models", Boolean(topPick || catalog.length), CheckCircle2],
+                    ["Install", Boolean(current || latestProgress?.stage === "engine"), PackagePlus],
+                    ["Download Progress", Boolean(current || latestProgress?.stage === "download"), Download],
+                    ["Validate", Boolean(current || latestProgress?.stage === "smoke_test"), ShieldAlert],
+                    ["Load / Ready", Boolean(current || lastResult), PlayCircle],
+                  ].map(([label, done, Icon]) => (
+                    <div key={String(label)} className="rounded-lg border border-border bg-background/55 p-3">
+                      {React.createElement(Icon as typeof Cpu, { className: "h-4 w-4 text-primary" })}
+                      <div className="mt-2 text-sm font-medium">{String(label)}</div>
+                      <Badge variant={done ? "success" : "muted"}>{done ? "ready" : "pending"}</Badge>
+                    </div>
+                  ))}
+                </div>
+                <label className="flex items-start gap-2 rounded-lg border border-border bg-background/55 p-3 text-sm leading-6">
+                  <input className="mt-1" type="checkbox" checked={consent} onChange={(event) => setConsent(event.target.checked)} />
+                  <span>
+                    Allow Lattice to install a missing local model component or download model files for this action.
+                  </span>
+                </label>
+                {latestProgress ? (
+                  <div className="rounded-lg border border-border bg-background/55 p-3 text-sm">
+                    <div className="font-medium">{String(latestProgress.message || "Preparing model")}</div>
+                    <div className="mt-2 h-2 overflow-hidden rounded-full bg-muted">
+                      <div className="h-full bg-primary" style={{ width: `${Number(latestProgress.percent || 8)}%` }} />
+                    </div>
+                    {latestProgress.detail ? <div className="mt-2 text-xs text-muted-foreground">{String(latestProgress.detail)}</div> : null}
+                  </div>
+                ) : null}
+                {lastError ? <ModelRecovery error={lastError} /> : null}
+              </div>
+            );
+          }}
+        </DataPanel>
+        <DataPanel title="Recommended models" result={models.data}>
         {(data) => (
           <div className="grid gap-2">
             {(catalog.length ? catalog : asArray<Record<string, unknown>>((data as Record<string, unknown>).loaded)).slice(0, 14).map((model, index) => {
@@ -56,34 +159,120 @@ function ModelsPanel() {
               const loaded = asArray<string>((data as Record<string, unknown>).loaded).includes(id) || (data as Record<string, unknown>).current === id || model.state === "loaded";
               const loadId = String(model.recommended_load_id || id);
               const engine = String(model.recommended_engine || model.engine || "");
-              const loadAvailable = Boolean(model.load_available) || loaded;
+              const recommendation = recommendationById.get(id) || recommendationById.get(loadId) || {};
+              const compatibility = (model.runtime_compatibility || recommendation.runtime_compatibility || {}) as Record<string, unknown>;
+              const fallbackAvailable = String(compatibility.status || "") === "fallback_available";
+              const unsupported = model.load_status === "unsupported" || compatibility.supported === false;
+              const downloadRequired = Boolean(model.download_required);
+              const loadAvailable = (Boolean(model.load_available) || loaded) && !unsupported;
               const loadStatus = String(model.load_status || (loaded ? "loaded" : "unavailable"));
-              const unavailableReason = String(model.unavailable_reason || "Unavailable until the backend reports a local model/runtime ready.");
+              const unavailableReason = modelMessage(model.unavailable_reason || "This model is not ready to load yet.");
+              const runtimeLabel = String(model.runtime_label || compatibility.preferred_runtime || engine || "local_mlx");
+              const actionLabel = String(compatibility.action || loadStatus.replace(/_/g, " "));
+              const badgeLabel = unsupported && mode === "basic" ? "needs attention" : unsupported ? actionLabel : loadStatus;
+              const canPrepare = loadAvailable || downloadRequired;
               return (
-                <div key={id} className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-background p-3">
-                  <div>
-                    <div className="font-medium">{String(model.name || id)}</div>
-                    <div className="text-sm text-muted-foreground">{String(model.family || model.engine || model.recommended_engine || "local")}</div>
-                    {!loaded && !loadAvailable ? <div className="mt-1 text-xs text-muted-foreground">{unavailableReason}</div> : null}
+                <div key={id} className="grid gap-3 rounded-lg border border-border bg-background/55 p-4 md:grid-cols-[1fr_auto]">
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                        <div className="text-base font-semibold">{String(model.name || id)}</div>
+                      {topPick?.id === id ? <Badge variant="success">recommended</Badge> : null}
+                    </div>
+                    <div className="mt-1 text-sm text-muted-foreground">
+                      {mode === "basic"
+                        ? [
+                          modelMessage(model.family || recommendation.family || "Local model"),
+                          /mlx|gguf|ollama/i.test(String(model.size || recommendation.size || "")) ? "" : model.size || recommendation.size,
+                        ].filter(Boolean).map(String).join(" · ")
+                        : [model.family || recommendation.family || "local", model.size || recommendation.size].filter(Boolean).map(String).join(" · ")}
+                    </div>
+                    {unsupported ? (
+                      <div className="mt-3 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm">
+                        <div className="font-medium">{mode === "basic" ? "Needs attention before loading" : actionLabel}</div>
+                        <div className="text-muted-foreground">{modelMessage(compatibility.user_message || unavailableReason)}</div>
+                      </div>
+                    ) : fallbackAvailable ? (
+                      <div className="mt-3 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm">
+                        <div className="font-medium">{mode === "basic" ? "Compatible loading path available" : "Runtime fallback available"}</div>
+                        <div className="text-muted-foreground">{modelMessage(compatibility.user_message || "Lattice will try the compatible local runtime path before showing this model as unsupported.")}</div>
+                      </div>
+                    ) : !loaded && !loadAvailable ? <div className="mt-1 text-xs text-muted-foreground">{unavailableReason}</div> : null}
+                    {mode !== "basic" ? (
+                      <div className="mt-2 text-xs text-muted-foreground">
+                        {runtimeLabel} · {loadId}
+                      </div>
+                    ) : null}
+                    {unsupported || fallbackAvailable ? <AlternativeModels compatibility={compatibility} /> : null}
                   </div>
-                  <div className="flex items-center gap-2">
-                    <Badge variant={loaded ? "success" : loadAvailable ? "muted" : "warning"}>{loaded ? "loaded" : loadStatus}</Badge>
-                    <ActionButton
-                      label={loaded ? "Unload" : "Load"}
-                      action={() => loaded ? latticeApi.unloadModel(loadId) : latticeApi.loadModel(loadId, engine, false)}
-                      invalidate={["models"]}
-                      disabled={!loaded && !loadAvailable}
-                    />
+                  <div className="flex flex-wrap items-center gap-2 md:justify-end">
+                    <Badge variant={loaded ? "success" : loadAvailable ? "muted" : "warning"}>{loaded ? "loaded" : badgeLabel}</Badge>
+                    {loaded ? (
+                      <ActionButton label="Unload" action={() => latticeApi.unloadModel(loadId)} invalidate={["models"]} />
+                    ) : (
+                      <Button
+                        variant="outline"
+                        disabled={busy || unsupported || !canPrepare || (downloadRequired && !consent)}
+                        onClick={() => prepareModel(loadId, engine || "local_mlx", consent)}
+                      >
+                        {activeModel === loadId && busy ? "Preparing" : downloadRequired ? "Install & Load" : "Validate & Load"}
+                      </Button>
+                    )}
                   </div>
                 </div>
               );
             })}
           </div>
         )}
-      </DataPanel>
-      <DataPanel title="Embedding provider" result={emb.data}>
-        {(data) => <StructuredView value={data} />}
-      </DataPanel>
+        </DataPanel>
+      </div>
+      <div className="space-y-4">
+        <DataPanel title={mode === "basic" ? "Memory search support" : "Embedding provider"} result={emb.data}>
+          {(data) => mode === "basic" ? <ValuePreview value={(data as Record<string, unknown>).state || "ready"} /> : <StructuredView value={data} />}
+        </DataPanel>
+        <DataPanel title="Model validation" result={models.data}>
+          {(data) => {
+            const profiles = asArray<Record<string, unknown>>((data as Record<string, unknown>).compat_profiles);
+            return profiles.length ? (
+              <EntityList items={profiles.map((profile) => ({
+                ...profile,
+                name: mode === "basic" ? profile.name || profile.display_name || "Loaded model" : profile.name || profile.display_name || profile.model_id,
+                status: profile.quality_status || profile.load_status || "checked",
+              }))} titleKey="name" metaKey="status" limit={6} />
+            ) : (
+              <EmptyState title="No model checked yet" detail="Load a model to confirm it can answer before you start using it." />
+            );
+          }}
+        </DataPanel>
+      </div>
+    </div>
+  );
+}
+
+function AlternativeModels({ compatibility }: { compatibility: Record<string, unknown> }) {
+  const mode = useAppStore((state) => state.mode);
+  const alternatives = asArray<Record<string, unknown>>(compatibility.alternatives);
+  if (!alternatives.length) return null;
+  return (
+    <div className="mt-2 flex flex-wrap gap-1">
+      {alternatives.slice(0, 3).map((item) => (
+        <Badge key={String(item.id || item.name)} variant="muted">
+          {mode === "basic" && /mlx|gguf|ollama|lm studio/i.test(String(item.name || item.id)) ? "Compatible alternative" : String(item.name || item.id)}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+function ModelRecovery({ error }: { error: Record<string, unknown> }) {
+  const guidance = asArray<string>(error.recovery_guidance);
+  return (
+    <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm">
+      <div className="font-medium">{String(error.user_message || "Model setup needs attention.")}</div>
+      {guidance.length ? (
+        <ul className="mt-2 list-inside list-disc text-muted-foreground">
+          {guidance.slice(0, 3).map((item) => <li key={item}>{item}</li>)}
+        </ul>
+      ) : null}
     </div>
   );
 }
@@ -133,18 +322,19 @@ function SkillsPanel() {
 }
 
 function McpPanel() {
+  const mode = useAppStore((state) => state.mode);
   const [query, setQuery] = React.useState("github");
   const tools = useQuery({ queryKey: ["mcpTools"], queryFn: latticeApi.mcpTools });
   const rec = useMutation({ mutationFn: () => latticeApi.mcpRecommend(query) });
   return (
     <div className="grid gap-4 xl:grid-cols-[1fr_1fr]">
-      <DataPanel title="MCP tools" result={tools.data}>
+      <DataPanel title={mode === "basic" ? "Tool connections" : "MCP tools"} result={tools.data}>
         {(data) => <EntityList items={(data as Record<string, unknown>).tools || (data as Record<string, unknown>).installed_mcps} titleKey="name" metaKey="status" />}
       </DataPanel>
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><Plug className="h-4 w-4" /> Recommend connector</CardTitle>
-          <CardDescription>Calls `/mcp/recommend`; returned installability depends on available connectors.</CardDescription>
+          <CardDescription>Describe what you want to connect and Lattice will suggest a connector.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
           <div className="flex gap-2">
@@ -176,7 +366,7 @@ function MarketplacePanel() {
       <Card className="xl:col-span-3">
         <CardHeader>
           <CardTitle className="flex items-center gap-2"><PackagePlus className="h-4 w-4" /> Template install</CardTitle>
-          <CardDescription>Install controls are enabled only for template records returned by the backend.</CardDescription>
+          <CardDescription>Start from a reusable workspace pattern.</CardDescription>
         </CardHeader>
         <CardContent>
           {asArray<Record<string, unknown>>((templates.data?.data as Record<string, unknown>)?.templates).length ? (