ltcai 4.3.3 → 4.5.1

package/frontend/src/App.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Command, Menu, Moon, Search, Sun, X } from "lucide-react";
+import { BrainCircuit, CheckCircle2, Command, Menu, Moon, Search, Sparkles, Sun, X } from "lucide-react";
 import { latticeApi } from "@/api/client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useAppStore } from "@/store/appStore";
+import { FirstRunGuide } from "@/components/FirstRunGuide";
+import { useAppStore, WorkspaceMode } from "@/store/appStore";
 import { commandRoutes, go, parseHash, primaryRoutes, PrimaryRoute } from "@/routes";
 import { BrainPage } from "@/pages/Brain";
 import { AskPage } from "@/pages/Ask";
@@ -14,6 +15,12 @@ import { LibraryPage } from "@/pages/Library";
 import { SystemPage } from "@/pages/System";
 import { cn } from "@/lib/utils";
 
+const modes: Array<{ id: WorkspaceMode; label: string }> = [
+  { id: "basic", label: "Calm" },
+  { id: "advanced", label: "Deep" },
+  { id: "admin", label: "Admin" },
+];
+
 function useRoute() {
   const [route, setRoute] = React.useState(parseHash);
   React.useEffect(() => {
@@ -33,9 +40,26 @@ function Page({ primary, tab }: { primary: PrimaryRoute; tab?: string }) {
   return <BrainPage initialTab={tab} />;
 }
 
+function AmbientBrain() {
+  return (
+    <div className="ambient-brain" aria-hidden="true">
+      <span className="signal-line signal-line-a" />
+      <span className="signal-line signal-line-b" />
+      <span className="signal-line signal-line-c" />
+      <span className="signal-tile signal-tile-a" />
+      <span className="signal-tile signal-tile-b" />
+      <span className="signal-tile signal-tile-c" />
+    </div>
+  );
+}
+
 function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void }) {
   const [query, setQuery] = React.useState("");
-  const matches = commandRoutes.filter((route) => route.label.toLowerCase().includes(query.toLowerCase()) || route.key.includes(query.toLowerCase()));
+  const normalized = query.trim().toLowerCase();
+  const matches = commandRoutes.filter((route) => (
+    route.label.toLowerCase().includes(normalized) || route.key.includes(normalized)
+  ));
+
   React.useEffect(() => {
     if (!open) return;
     const onKey = (event: KeyboardEvent) => {
@@ -44,16 +68,17 @@ function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
+
   if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50 bg-background/80 p-4 backdrop-blur-sm" role="dialog" aria-modal="true">
-      <div className="mx-auto mt-16 max-w-xl rounded-lg border border-border bg-card shadow-xl">
-        <div className="flex items-center gap-2 border-b border-border p-3">
+    <div className="command-scrim" role="dialog" aria-modal="true" aria-label="Lattice command palette">
+      <div className="command-panel">
+        <div className="command-search">
           <Search className="h-4 w-4 text-muted-foreground" />
-          <Input value={query} onChange={(e) => setQuery(e.target.value)} autoFocus placeholder="Jump to a capability" />
-          <Button variant="ghost" size="icon" onClick={onClose}><X className="h-4 w-4" /></Button>
+          <Input value={query} onChange={(event) => setQuery(event.target.value)} autoFocus placeholder="Jump to anything in Lattice" />
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close command palette"><X className="h-4 w-4" /></Button>
         </div>
-        <div className="max-h-96 overflow-auto p-2">
+        <div className="command-list soft-scrollbar">
           {matches.map((route) => {
             const Icon = route.icon;
             return (
@@ -63,10 +88,13 @@ function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void
                   go(route.key);
                   onClose();
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm hover:bg-muted"
+                className="command-row"
               >
-                <Icon className="h-4 w-4 text-primary" />
-                {route.label}
+                <span className="command-icon"><Icon className="h-4 w-4" /></span>
+                <span>
+                  <span className="block text-sm font-semibold">{route.label}</span>
+                  <span className="block text-xs text-muted-foreground">Open {route.key.replace(/[-/]/g, " ")}</span>
+                </span>
               </button>
             );
           })}
@@ -76,6 +104,48 @@ function CommandPalette({ open, onClose }: { open: boolean; onClose: () => void
   );
 }
 
+function PrimaryDock({ active, onNavigate }: { active: PrimaryRoute; onNavigate?: () => void }) {
+  return (
+    <nav className="primary-dock" aria-label="Primary navigation">
+      {primaryRoutes.map((item) => {
+        const Icon = item.icon;
+        const selected = active === item.id;
+        return (
+          <button
+            key={item.id}
+            className={cn("dock-button", selected && "is-active")}
+            onClick={() => {
+              go(item.id);
+              onNavigate?.();
+            }}
+            aria-current={selected ? "page" : undefined}
+          >
+            <Icon className="h-4 w-4" />
+            <span>{item.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
+
+function ModeSwitch({ mode, setMode }: { mode: WorkspaceMode; setMode: (mode: WorkspaceMode) => void }) {
+  return (
+    <div className="mode-switch" aria-label="Experience mode">
+      {modes.map((item) => (
+        <button
+          key={item.id}
+          className={cn(mode === item.id && "is-active")}
+          onClick={() => setMode(item.id)}
+          aria-pressed={mode === item.id}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
 export default function App() {
   const route = useRoute();
   const { theme, setTheme, mode, setMode } = useAppStore();
@@ -93,6 +163,7 @@ export default function App() {
   React.useEffect(() => {
     document.documentElement.dataset.theme = theme;
   }, [theme]);
+
   React.useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
@@ -105,94 +176,84 @@ export default function App() {
   }, []);
 
   const healthData = (health.data?.data || {}) as Record<string, unknown>;
-  const appVersion = typeof healthData.version === "string" ? healthData.version : null;
+  const workspaceData = (workspace.data?.data || {}) as Record<string, unknown>;
   const desktopData = (desktop.data?.data || {}) as Record<string, unknown>;
-  const desktopError = typeof desktopData.last_error === "string" ? desktopData.last_error : desktop.data?.error;
-
-  const rail = (
-    <aside className="flex h-full w-64 shrink-0 flex-col border-r border-border bg-card">
-      <div className="flex h-16 items-center gap-3 border-b border-border px-4">
-        <div className="grid h-9 w-9 place-items-center rounded-md bg-primary text-primary-foreground font-bold">LA</div>
-        <div>
-          <div className="font-semibold">Lattice AI</div>
-          <div className="text-xs text-muted-foreground">Digital Brain Desktop</div>
-        </div>
-      </div>
-      <nav className="flex-1 space-y-1 overflow-auto p-3">
-        {primaryRoutes.map((item) => {
-          const Icon = item.icon;
-          const active = route.primary === item.id;
-          return (
-            <button
-              key={item.id}
-              onClick={() => {
-                go(item.id);
-                setDrawer(false);
-              }}
-              className={cn(
-                "flex min-h-14 w-full items-center gap-3 rounded-md px-3 py-2 text-left transition",
-                active ? "bg-primary/14 text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
-              )}
-            >
-              <Icon className="h-5 w-5" />
-              <span>
-                <span className="block text-sm font-medium">{item.label}</span>
-                <span className="block text-xs">{item.description}</span>
-              </span>
-            </button>
-          );
-        })}
-      </nav>
-      <div className="border-t border-border p-3 text-xs text-muted-foreground">
-        <div>Server: {health.data?.ok ? "online" : "unavailable"}</div>
-        {window.__TAURI_INTERNALS__ ? (
-          <div>Sidecar: {desktopData.running ? "running" : desktopError ? `unavailable (${desktopError})` : "starting"}</div>
-        ) : null}
-        <div>Workspace: {String((workspace.data?.data as Record<string, unknown>)?.active_workspace || "local")}</div>
-      </div>
-    </aside>
-  );
+  const appVersion = typeof healthData.version === "string" ? healthData.version : null;
+  const activeRoute = primaryRoutes.find((item) => item.id === route.primary);
+  const workspaceName = String(workspaceData.active_workspace || "Personal space");
+  const backendReady = Boolean(health.data?.ok);
+  const desktopReady = !window.__TAURI_INTERNALS__ || Boolean(desktopData.running);
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div className="app-backdrop min-h-screen text-foreground">
+      <AmbientBrain />
       <CommandPalette open={palette} onClose={() => setPalette(false)} />
-      <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:block">{rail}</div>
+
+      <header className="app-chrome">
+        <div className="brand-lockup">
+          <button className="mobile-menu" onClick={() => setDrawer(true)} aria-label="Open navigation"><Menu className="h-5 w-5" /></button>
+          <button className="brand-mark" onClick={() => go("brain")} aria-label="Open Lattice home">
+            <BrainCircuit className="h-5 w-5" />
+          </button>
+          <div className="brand-copy">
+            <div className="brand-name">Lattice</div>
+            <div className="brand-subtitle">Digital Brain</div>
+          </div>
+        </div>
+
+        <div className="desktop-dock">
+          <PrimaryDock active={route.primary} />
+        </div>
+
+        <div className="chrome-actions">
+          <button className="status-chip" onClick={() => go("settings")}>
+            <span className={cn("status-light", backendReady && desktopReady ? "is-ready" : "is-waiting")} />
+            <span>{backendReady && desktopReady ? "Ready" : "Starting"}</span>
+          </button>
+          <Button variant="outline" onClick={() => setPalette(true)}><Command className="h-4 w-4" /> Find</Button>
+          <Button variant="outline" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} aria-label="Toggle theme">
+            {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+          </Button>
+        </div>
+      </header>
+
       {drawer ? (
-        <div className="fixed inset-0 z-40 lg:hidden">
-          <button className="absolute inset-0 bg-background/70" aria-label="Close navigation" onClick={() => setDrawer(false)} />
-          <div className="relative h-full">{rail}</div>
+        <div className="mobile-drawer">
+          <button className="drawer-scrim" aria-label="Close navigation" onClick={() => setDrawer(false)} />
+          <div className="drawer-panel">
+            <div className="drawer-header">
+              <div>
+                <div className="font-semibold">Lattice</div>
+                <div className="text-xs text-muted-foreground">Choose a room</div>
+              </div>
+              <Button variant="ghost" size="icon" onClick={() => setDrawer(false)} aria-label="Close navigation"><X className="h-4 w-4" /></Button>
+            </div>
+            <PrimaryDock active={route.primary} onNavigate={() => setDrawer(false)} />
+          </div>
         </div>
       ) : null}
-      <div className="lg:pl-64">
-        <header className="sticky top-0 z-30 flex h-16 items-center justify-between gap-3 border-b border-border bg-background/95 px-4 backdrop-blur">
-          <div className="flex min-w-0 items-center gap-2">
-            <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setDrawer(true)}><Menu className="h-5 w-5" /></Button>
-            <div className="min-w-0">
-              <div className="truncate text-sm text-muted-foreground">{appVersion ? `v${appVersion}` : "Version unavailable"}</div>
-              <div className="truncate font-medium">{primaryRoutes.find((item) => item.id === route.primary)?.label}</div>
-            </div>
+
+      <main className="page-shell">
+        <section className="workspace-ribbon" aria-label="Current workspace">
+          <div className="min-w-0">
+            <div className="ribbon-kicker"><Sparkles className="h-4 w-4" /> {activeRoute?.label || "Home"}</div>
+            <h1>{activeRoute?.description || "A calm place to think with your knowledge."}</h1>
           </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" onClick={() => setPalette(true)}><Command className="h-4 w-4" /> Search</Button>
-            <select
-              value={mode}
-              onChange={(e) => setMode(e.target.value as "basic" | "advanced" | "admin")}
-              className="h-9 rounded-md border border-border bg-background px-2 text-sm"
-              aria-label="Workspace mode"
-            >
-              <option value="basic">Basic</option>
-              <option value="advanced">Advanced</option>
-              <option value="admin">Admin</option>
-            </select>
-            <Button variant="outline" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} aria-label="Toggle theme">
-              {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-            </Button>
+          <div className="ribbon-meta">
+            <div className="meta-card">
+              <CheckCircle2 className="h-4 w-4 text-primary" />
+              <span>{workspaceName}</span>
+            </div>
+            <div className="meta-card">
+              <span>{appVersion ? `v${appVersion}` : "Version checking"}</span>
+            </div>
+            <ModeSwitch mode={mode} setMode={setMode} />
           </div>
-        </header>
-        <main className="p-4 lg:p-6">
-          <Page primary={route.primary} tab={route.tab} />
-        </main>
-      </div>
+        </section>
+
+        <FirstRunGuide />
+        <Page primary={route.primary} tab={route.tab} />
+      </main>
     </div>
   );
 }

package/frontend/src/api/client.ts

@@ -77,6 +77,21 @@ function workspaceHeaders(): Record<string, string> {
   return workspaceId ? { "X-Workspace-Id": workspaceId } : {};
 }
 
+function friendlyError(error: unknown, fallback: string) {
+  if (!error) return fallback;
+  const record = typeof error === "object" && error !== null ? error as Record<string, unknown> : null;
+  const detail = record?.detail;
+  if (typeof detail === "string") return detail;
+  const detailRecord = typeof detail === "object" && detail !== null ? detail as Record<string, unknown> : null;
+  if (detailRecord) {
+    const message = detailRecord.user_message || detailRecord.reason || detailRecord.action || detailRecord.status;
+    if (message) return String(message);
+  }
+  const message = record?.message || record?.error;
+  if (message) return String(message);
+  return fallback;
+}
+
 async function apiJson<T>(
   method: HttpMethod,
   path: string,
@@ -108,7 +123,7 @@ async function apiJson<T>(
       status: response.status,
       data: emptyFor(opts.shape),
       source: "unavailable",
-      error: error ? JSON.stringify(error) : response.statusText,
+      error: friendlyError(error, response.statusText),
     };
   } catch (err) {
     return {
@@ -163,6 +178,69 @@ export type ChatEventHandlers = {
   signal?: AbortSignal;
 };
 
+export type ModelPrepareHandlers = {
+  onProgress?: (data: Record<string, unknown>) => void;
+  onDone?: (data: Record<string, unknown>) => void;
+  onError?: (data: Record<string, unknown>) => void;
+  signal?: AbortSignal;
+};
+
+async function streamModelPrepare(
+  body: { model: string; engine?: string; allow_download?: boolean },
+  handlers: ModelPrepareHandlers = {},
+) {
+  const base = await apiBase();
+  const res = await fetch(`${base}/engines/prepare-model/stream`, {
+    method: "POST",
+    credentials: "same-origin",
+    signal: handlers.signal,
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "text/event-stream",
+      ...workspaceHeaders(),
+    } satisfies HeadersInit,
+    body: JSON.stringify({ engine: null, allow_download: false, ...body }),
+  });
+  if (!res.ok || !res.body || !(res.headers.get("content-type") || "").includes("text/event-stream")) {
+    const payload = await res.json().catch(() => null);
+    const detail = payload?.detail && typeof payload.detail === "object" ? payload.detail : payload;
+    const message = friendlyError(payload, res.statusText);
+    handlers.onError?.({ status: "error", user_message: message, ...(detail || {}) });
+    return { source: "live" as const, ok: false, status: res.status, data: detail || {}, error: message };
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let eventName = "message";
+  let finalData: Record<string, unknown> = {};
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const parts = buffer.split("\n\n");
+    buffer = parts.pop() || "";
+    for (const part of parts) {
+      const lines = part.split("\n");
+      eventName = lines.find((item) => item.startsWith("event:"))?.slice(6).trim() || "message";
+      const dataLine = lines.find((item) => item.startsWith("data:"));
+      if (!dataLine) continue;
+      const raw = dataLine.slice(5).trim();
+      const data = raw ? JSON.parse(raw) as Record<string, unknown> : {};
+      if (eventName === "progress") handlers.onProgress?.(data);
+      if (eventName === "error") {
+        const detail = typeof data.detail === "object" && data.detail !== null ? data.detail as Record<string, unknown> : data;
+        handlers.onError?.(detail);
+        return { source: "live" as const, ok: false, status: Number(data.status_code || 500), data: detail, error: friendlyError({ detail }, "Model setup failed") };
+      }
+      if (eventName === "done") {
+        finalData = data;
+        handlers.onDone?.(data);
+      }
+    }
+  }
+  return { source: "live" as const, ok: true, status: 200, data: finalData };
+}
+
 async function streamChat(body: Record<string, unknown>, handlers: ChatEventHandlers = {}) {
   const base = await apiBase();
   const res = await fetch(`${base}/chat`, {
@@ -263,6 +341,10 @@ export const latticeApi = {
   connectFolder: (path: string) => post("/knowledge-graph/local/index", { path, approved: true, watch_enabled: true, consent: { approved: true, source: "desktop-spa" } }, {}),
   localWatchStop: (source_id: string) => post("/knowledge-graph/local/watch/stop", { source_id }, {}),
   models: () => get("/models", { catalog: [], loaded: [], recommended: [] }),
+  modelRecommendations: (engine = "local_mlx") => get("/models/recommendations", { profile: {}, recommendations: { models: [], families: [], counts: {} } }, { engine }),
+  installEngine: (engine: string) => post("/engines/install", { engine }, {}),
+  prepareModel: (model: string, engine?: string, allow_download = false) => post("/engines/prepare-model", { model, engine: engine || null, allow_download }, {}),
+  streamModelPrepare,
   loadModel: (model_id: string, engine?: string, allow_download = false) => post("/models/load", { model_id, engine: engine || null, allow_download }, {}),
   unloadModel: (model_id: string) => del(`/models/unload/${encodeURIComponent(model_id)}`, {}),
   embeddingsStatus: () => get("/api/embeddings/status", {}),

package/frontend/src/components/FirstRunGuide.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, CheckCircle2, Cpu, Download, Layers3, Library, PlayCircle, SlidersHorizontal, UserCircle, Users } from "lucide-react";
+import { latticeApi } from "@/api/client";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { useAppStore } from "@/store/appStore";
+import { go } from "@/routes";
+import { asArray } from "@/lib/utils";
+
+function readDismissed() {
+  try {
+    return localStorage.getItem("lattice.onboarding.dismissed") === "true";
+  } catch {}
+  return false;
+}
+
+export function FirstRunGuide() {
+  const [dismissed, setDismissed] = React.useState(readDismissed);
+  const mode = useAppStore((state) => state.mode);
+  const profile = useQuery({ queryKey: ["profile"], queryFn: latticeApi.profile });
+  const workspace = useQuery({ queryKey: ["workspaceOs"], queryFn: latticeApi.workspaceOs });
+  const models = useQuery({ queryKey: ["models"], queryFn: latticeApi.models });
+  const recs = useQuery({ queryKey: ["modelRecommendations", "local_mlx"], queryFn: () => latticeApi.modelRecommendations("local_mlx") });
+  if (dismissed) return null;
+
+  const profileData = (profile.data?.data || {}) as Record<string, unknown>;
+  const workspaceData = (workspace.data?.data || {}) as Record<string, unknown>;
+  const registry = (workspaceData.workspace_registry || {}) as Record<string, unknown>;
+  const modelData = (models.data?.data || {}) as Record<string, unknown>;
+  const recommendationData = ((recs.data?.data as Record<string, unknown> | undefined)?.recommendations || {}) as Record<string, unknown>;
+  const currentModel = String(modelData.current || "");
+  const loadedModels = asArray(modelData.loaded);
+  const topPick = recommendationData.top_pick as Record<string, unknown> | undefined;
+  const compatProfiles = asArray<Record<string, unknown>>(modelData.compat_profiles);
+  const readyProfile = compatProfiles.some((item) => item.chat_compatible || item.quality_status === "ok" || item.quality_status === "degraded");
+
+  const steps = [
+    { label: "Make it yours", done: Boolean(profileData.email), icon: UserCircle, action: "account", detail: "Sign in or keep a local profile." },
+    { label: "Choose a space", done: Boolean(registry.active_workspace || workspaceData.active_workspace), icon: Users, action: "workspace-admin", detail: "Decide where memories belong." },
+    { label: "Meet your Mac", done: recs.isSuccess, icon: Cpu, action: "models", detail: "Let Lattice inspect what can run locally." },
+    { label: "Pick a brain", done: Boolean(topPick || currentModel), icon: Library, action: "models", detail: "Use the recommended local model." },
+    { label: "Install locally", done: Boolean(currentModel || loadedModels.length), icon: Download, action: "models", detail: "Download only with explicit consent." },
+    { label: "Try a question", done: Boolean(readyProfile || currentModel || loadedModels.length), icon: PlayCircle, action: "chat", detail: "Confirm the model can answer." },
+    { label: "Set the pace", done: Boolean(mode), icon: SlidersHorizontal, action: "settings", detail: "Stay Calm or switch deeper." },
+    { label: "Explore memory", done: true, icon: Layers3, action: "knowledge-graph", detail: "Open the living map." },
+  ];
+  const completed = steps.filter((step) => step.done).length;
+  const nextStep = steps.find((step) => !step.done) || steps[steps.length - 1];
+  const progress = Math.round((completed / steps.length) * 100);
+
+  return (
+    <section className="arrival-panel" aria-label="First 10 minutes">
+      <div className="arrival-copy">
+        <div className="page-kicker"><CheckCircle2 className="h-4 w-4" /> First 10 minutes</div>
+        <h2>Build your Digital Brain without guessing.</h2>
+        <p>
+          Start with a space, let Lattice recommend a private local model, then add the first pieces of knowledge.
+          Every step keeps the next action visible.
+        </p>
+        <div className="arrival-actions">
+          <Button onClick={() => go(nextStep.action)}>{nextStep.done ? "Open memory map" : `Continue: ${nextStep.label}`}</Button>
+          <Button variant="outline" onClick={() => go("models")}>Set up model</Button>
+          <Button variant="ghost" onClick={() => {
+            try { localStorage.setItem("lattice.onboarding.dismissed", "true"); } catch {}
+            setDismissed(true);
+          }}>
+            Hide
+          </Button>
+        </div>
+      </div>
+      <div className="journey-panel">
+        <div className="journey-head">
+          <div>
+            <div className="text-sm font-semibold">{completed} of {steps.length} ready</div>
+            <div className="text-xs text-muted-foreground">{mode === "basic" ? "Calm mode" : `${mode} mode`}</div>
+          </div>
+          <Badge variant={progress === 100 ? "success" : "warning"}>{progress}%</Badge>
+        </div>
+        <div className="journey-progress"><span style={{ width: `${progress}%` }} /></div>
+        <div className="journey-steps">
+          {steps.map((step) => {
+            const Icon = step.icon;
+            return (
+              <button key={step.label} onClick={() => go(step.action)} className="journey-step">
+                <span className="journey-icon"><Icon className="h-4 w-4" /></span>
+                <span className="min-w-0">
+                  <span className="block truncate text-sm font-semibold">{step.label}</span>
+                  <span className="block truncate text-xs text-muted-foreground">{step.detail}</span>
+                </span>
+                <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}