@schlessera/brain-ui-react 0.34.1 → 0.36.0

package/src/components/chat/tool-cards/location-card.tsx

@@ -0,0 +1,159 @@
+/**
+ * The `get_current_location` result, drawn on the kit's `MapView` (S9: the
+ * first in-chat component rendered end to end from its contract; D37 moved
+ * the span rule, the uncertainty ring, the note and the width cap into the
+ * kit, so the card is now the fetch and the caption).
+ *
+ * Typed `LocationPayload` — the contract's payload type — so the fields it
+ * reads are the fields the handler is contracted to send. The pin, the
+ * span and the caption are pure functions of that payload. What is not pure
+ * is the shoreline: `MapView` fetches nothing (kit D13), so this card is the
+ * container that asks the server's `/geo/coastline` for the geometry around
+ * the fix and hands it down as `paths` and `land`. The request is cancelled
+ * on unmount, and any failure — no server, an older server without the
+ * route, an Overpass outage — leaves a map with a correct pin, a graticule
+ * and a true scale bar, which is a good locator on its own.
+ *
+ * The bounding box asked for is the envelope of every box `MapView` can draw
+ * for the pin — 1.5 spans across, 1.0 down, the same rule the kit's fixture
+ * generator uses (`viewBox` says why those numbers). The server clips to the
+ * box it is given and quantises its cache key to ~110 m, so the request has
+ * to cover the drawn frame itself; and because the envelope is a function of
+ * the pin and the span alone, the same fix at any card width is one cache
+ * entry rather than a fresh request to a shared service.
+ */
+
+import { MapView, type MapLand, type MapPath } from "@schlessera/brain-ui-kit";
+import type { LocationPayload } from "@schlessera/brain-ui-sdk/client";
+import { useEffect, useState } from "react";
+import { useBrainApi } from "../../../root-context.js";
+import type { CoastlineGeometry } from "../../../lib/api-client.js";
+
+/** 4 decimal places is ~11 m — finer than any browser fix is honest about. */
+function coord(value: number): string {
+  return value.toFixed(4);
+}
+
+function accuracy(meters: number): string {
+  return meters >= 1000
+    ? `±${(meters / 1000).toFixed(meters >= 10_000 ? 0 : 1)} km`
+    : `±${Math.round(meters)} m`;
+}
+
+/** `MapView`'s own default projection width. */
+const WIDTH = 330;
+
+/**
+ * How far past the span to fetch, per axis, as a multiple of `spanKm`. The
+ * kit's ruling (README, sixth pass, §10) bounds a card at 420px wide with a
+ * viewport of 110-260px, and `MapView` draws a single pin as 1.24 spans across
+ * (12% margins each side) at any width and 1.24 × H/W spans down: 0.32 for
+ * 420×110, 0.77 for 420×260, and this card leaves the height at its 170
+ * default, so 1.0 down covers it at any width from 211px up. The square
+ * 2.4-span bleed this replaced fetched geometry of which only 23% could ever
+ * be drawn (measured on the kit's Messina fixture).
+ */
+const BLEED_ACROSS = 1.5;
+const BLEED_DOWN = 1.0;
+
+/**
+ * The view's span across its width, in kilometres — the kit's own rule
+ * (`max(1.6 km, 6 × accuracy)`, D37), repeated here only so the coastline
+ * request covers the box the kit will draw. The kit computes it again from
+ * `accuracyM`; the two must agree, and `tests/location-card.test.ts` pins
+ * this one.
+ */
+export function spanFor(accuracyMeters: number): number {
+  return Math.max(1.6, (accuracyMeters * 6) / 1000);
+}
+
+/**
+ * The box to fetch for one pin, as `[west, south, east, north]`: the span at
+ * the pin's latitude, grown to the envelope above and centred on the pin.
+ * Clamped to the server's 5° limit and to the poles.
+ */
+export function viewBox(lat: number, lon: number, spanKm: number): [number, number, number, number] {
+  const cos = Math.max(0.2, Math.cos((lat * Math.PI) / 180));
+  const degLon = Math.min(4.5, (spanKm / 111 / cos) * BLEED_ACROSS);
+  const degLat = Math.min(4.5, (spanKm / 111) * BLEED_DOWN);
+  const west = Math.max(-180, lon - degLon / 2);
+  const east = Math.min(180, lon + degLon / 2);
+  const south = Math.max(-89, lat - degLat / 2);
+  const north = Math.min(89, lat + degLat / 2);
+  return [west, south, east, north];
+}
+
+/** The server's tiers as `MapView` paths, at the kit fixtures' weights. */
+export function geometryPaths(geo: CoastlineGeometry): MapPath[] {
+  return [
+    ...geo.coastline.map((coords) => ({ coords, tone: "neutral" as const, width: 1 })),
+    ...geo.roads.map((coords) => ({ coords, tone: "neutral" as const, width: 0.6 })),
+    ...geo.streets.map((coords) => ({ coords, tone: "neutral" as const, width: 0.35 })),
+  ];
+}
+
+export function LocationResultCard({
+  latitude,
+  longitude,
+  accuracyMeters,
+  place,
+  address,
+  note,
+  retrievedAt,
+}: LocationPayload) {
+  const api = useBrainApi();
+  const spanKm = spanFor(accuracyMeters);
+  const [geo, setGeo] = useState<CoastlineGeometry | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setGeo(null);
+    // The box is BLEED_ACROSS times the drawn span, so the width sent with it
+    // is BLEED_ACROSS times the drawn width: the server takes its tolerance
+    // and its detail tier from the box's width over that many pixels, and the
+    // bare 330 would ask for a view half again coarser than the one drawn —
+    // a 2 km span asking for streets and getting roads. The server buckets
+    // 495 up to 660, which errs on the fine side, never towards an empty map.
+    api
+      .geoCoastline(viewBox(latitude, longitude, spanKm), {
+        width: WIDTH * BLEED_ACROSS,
+        signal: controller.signal,
+      })
+      .then((result) => {
+        if (!controller.signal.aborted) setGeo(result);
+      })
+      .catch(() => {
+        // A plainer map, on purpose. The pin is the answer; the shore is
+        // context, and context that cannot be had is not an error to show.
+      });
+    return () => controller.abort();
+  }, [api, latitude, longitude, spanKm]);
+
+  const when = new Date(retrievedAt);
+  const stamp = Number.isNaN(when.getTime())
+    ? retrievedAt
+    : when.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const paths = geo ? geometryPaths(geo) : [];
+  const land: MapLand | undefined = geo && geo.land.length ? { rings: geo.land } : undefined;
+  const drawn = paths.length > 0 || land !== undefined;
+
+  return (
+    // The kit owns the span rule, the uncertainty ring, the note and the
+    // 420px cap (D37); the card passes the payload through.
+    <MapView
+      pins={[{ lat: latitude, lon: longitude, label: place ?? "Here", meta: accuracy(accuracyMeters), tone: "amber" }]}
+      accuracyM={accuracyMeters}
+      paths={paths}
+      land={land}
+      // The place name is the answer; coordinates are the evidence for it,
+      // so they stay visible but quiet rather than leading.
+      title={place ?? "Coordinates only"}
+      subtitle={address && address !== place ? address : undefined}
+      meta={`${coord(latitude)}, ${coord(longitude)} · ${accuracy(accuracyMeters)} · ${stamp}`}
+      note={note}
+      // The credit is the licence's, not the design's: it appears exactly
+      // when OpenStreetMap geometry is on the map.
+      attribution={drawn ? geo?.attribution : undefined}
+    />
+  );
+}

package/src/components/chat/tool-views.tsx

@@ -15,16 +15,19 @@ import {
   MapPin,
   ChevronRight,
 } from "lucide-react";
+import { DiffBlock } from "@schlessera/brain-ui-kit";
 import type { ToolCall } from "../../stores/chat-store.js";
 import { cn } from "../../lib/utils.js";
 import { linkifyPaths, FileLink } from "./brain-markdown.js";
 import { MarkdownContent } from "./markdown-content.js";
 import { isInternalRepoPath } from "../../stores/file-store.js";
 import { GET_LOCATION_TOOL_NAME, normalizeToolName } from "../../lib/tool-names.js";
-import { computeDiffRows, type WordToken } from "../../lib/diff.js";
+import { computeDiffRows, diffText } from "../../lib/diff.js";
+import { formatRelativeTime } from "../../lib/format-time.js";
 
 // Re-exported so existing imports of the diff engine from this module keep working.
-export { computeDiffRows };
+export { computeDiffRows, diffText };
+export { formatRelativeTime };
 
 // ============================================================
 // Shared helpers
@@ -84,19 +87,6 @@ export function formatTokenCount(n: number): string {
   return String(n);
 }
 
-/** Relative timestamp for list rows ("3m ago"); dates beyond a week. */
-export function formatRelativeTime(ms: number): string {
-  const diff = Date.now() - ms;
-  const minutes = Math.floor(diff / 60000);
-  if (minutes < 1) return "just now";
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
-  return new Date(ms).toLocaleDateString();
-}
-
 export function countLines(text: string): number {
   let n = 1;
   for (let i = 0; i < text.length; i++) if (text[i] === "\n") n++;
@@ -243,7 +233,7 @@ export function ToolInputView({ tool }: { tool: ToolCall }) {
     return (
       <div className="flex items-center gap-2 rounded-md bg-background/60 p-2 text-[11px] text-muted-foreground/60">
         <span
-          className="inline-block h-1.5 w-1.5 rounded-full bg-primary"
+          className="inline-block h-1.5 w-1.5 rounded-full bg-primary-mark"
           style={{ animation: "breathe 1.5s ease-in-out infinite" }}
         />
         Preparing input…
@@ -283,7 +273,7 @@ function PathHeader({ path, badge }: { path: string | null; badge?: string | nul
         {path ? fileLabel(path) : "unknown file"}
       </span>
       {badge && (
-        <span className="ml-auto shrink-0 rounded bg-primary/15 px-1.5 py-0.5 text-[10px] text-primary">
+        <span className="ml-auto shrink-0 rounded bg-primary-fill/15 px-1.5 py-0.5 text-[10px] text-primary">
           {badge}
         </span>
       )}
@@ -291,28 +281,17 @@ function PathHeader({ path, badge }: { path: string | null; badge?: string | nul
   );
 }
 
-/** Render a diff line, emphasizing changed word tokens when refined. */
-function DiffLine({ tokens, line, changedClass }: {
-  tokens: WordToken[] | null;
-  line: string;
-  changedClass: string;
-}) {
-  if (!tokens) return <>{line}</>;
-  return (
-    <>
-      {tokens.map((t, i) =>
-        t.changed ? (
-          <span key={i} className={cn("rounded-sm", changedClass)}>
-            {t.text}
-          </span>
-        ) : (
-          <span key={i}>{t.text}</span>
-        )
-      )}
-    </>
-  );
-}
-
+/**
+ * The Edit tool's diff, on the kit `DiffBlock` in its `tinted` mode: this is
+ * the one diff where the lines ARE the decision — an edit the user may still
+ * be asked to approve — so removed rows take the red ground and added rows the
+ * teal one, with the sign column at full tone weight. Long lines wrap with the
+ * kit's hanging indent; nothing scrolls sideways and nothing truncates.
+ *
+ * The app used to add a word-level highlight inside a single changed line
+ * pair. The design's diff has no such thing — the sign and the ground are the
+ * whole vocabulary — so it was dropped with the seventh drop.
+ */
 export function EditDiffView({ tool }: { tool: ToolCall }) {
   const rows = computeDiffRows(str(tool.input.old_string) ?? "", str(tool.input.new_string) ?? "");
   return (
@@ -321,37 +300,8 @@ export function EditDiffView({ tool }: { tool: ToolCall }) {
         path={str(tool.input.file_path)}
         badge={tool.input.replace_all ? "replace all" : null}
       />
-      <div className="max-h-64 overflow-y-auto bg-background/60 py-1 font-[family-name:var(--font-mono)] text-[11px] leading-relaxed">
-        {rows.map((row, i) => {
-          if (row.kind === "same") {
-            return (
-              <div key={`s${i}`} className="flex">
-                <span className="w-5 shrink-0 select-none text-center text-muted-foreground/30"> </span>
-                <span className="min-w-0 whitespace-pre-wrap break-all pr-2 text-muted-foreground/70">
-                  {row.line}
-                </span>
-              </div>
-            );
-          }
-          if (row.kind === "del") {
-            return (
-              <div key={`d${i}`} className="flex bg-red-500/10">
-                <span className="w-5 shrink-0 select-none text-center text-red-400/70">-</span>
-                <span className="min-w-0 whitespace-pre-wrap break-all pr-2 text-red-200/90">
-                  <DiffLine tokens={row.tokens} line={row.line} changedClass="bg-red-500/30" />
-                </span>
-              </div>
-            );
-          }
-          return (
-            <div key={`i${i}`} className="flex bg-emerald-500/10">
-              <span className="w-5 shrink-0 select-none text-center text-emerald-400/70">+</span>
-              <span className="min-w-0 whitespace-pre-wrap break-all pr-2 text-emerald-200/90">
-                <DiffLine tokens={row.tokens} line={row.line} changedClass="bg-emerald-500/30" />
-              </span>
-            </div>
-          );
-        })}
+      <div className="max-h-64 overflow-y-auto" data-edit-diff>
+        <DiffBlock tinted variant="inset" text={diffText(rows)} />
       </div>
     </div>
   );
@@ -402,7 +352,7 @@ export function BashCommandView({ tool }: { tool: ToolCall }) {
               className={cn(
                 "rounded px-1.5 py-0.5 text-[10px]",
                 f === "sandbox disabled"
-                  ? "bg-destructive/15 text-destructive"
+                  ? "bg-destructive-fill/15 text-destructive"
                   : "bg-surface-raised text-muted-foreground"
               )}
             >
@@ -511,7 +461,7 @@ export function ClampedPre({ text, isError }: { text: string; isError?: boolean
           className={cn(
             "overflow-x-auto rounded-md p-2 pr-7 font-[family-name:var(--font-mono)] text-[11px] leading-relaxed",
             isError
-              ? "bg-destructive/10 text-destructive"
+              ? "bg-destructive-fill/10 text-destructive"
               : "bg-background/60 text-muted-foreground"
           )}
         >
@@ -646,7 +596,7 @@ export function FileRowsView({ output, pattern }: { output: string; pattern?: st
         {prefix && <span>{linkifyPaths(prefix)}</span>}
         {splitMatches(content, re).map((seg, i) =>
           seg.match ? (
-            <mark key={i} className="rounded-sm bg-amber-400/25 px-0.5 text-amber-100">
+            <mark key={i} className="rounded-sm bg-primary-fill/25 px-0.5 text-foreground">
               {seg.text}
             </mark>
           ) : (

package/src/components/chat/transcript-turn.tsx

@@ -0,0 +1,108 @@
+import { Chip, Disclosure, Icon, MessageBubble, StatusDot } from "@schlessera/brain-ui-kit";
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils.js";
+
+/**
+ * The pieces of one transcript turn that are pure presentation (S7, the
+ * `chat` directory). `MessageBubble` in `message-bubble.tsx` stays the
+ * memoized container that reads the message, groups its parts and routes
+ * the tool timelines, ask cards and markdown; these draw the frame around
+ * them on the kit.
+ *
+ * A user turn is the design's tucked bubble (kit `MessageBubble role="user"`,
+ * right-aligned, one corner cut); a brain turn has no bubble — "the answer is
+ * the page" — and the kit's decorative action row is off, because the app's
+ * share menu is real and sits under the last text block. The thinking blurb
+ * is a kit `Disclosure` whose summary says what is hidden ("Thought for ~N
+ * tokens"), controlled by the container so it can auto-collapse when the
+ * stream ends.
+ */
+export interface TurnHeaderProps {
+  who: string;
+  /** Mono time, already formatted. */
+  when: string;
+  /** The user turn came in by voice: which kind. */
+  voice?: "voice-dictate" | "voice-conversation";
+  tone: "user" | "brain";
+}
+
+export function TurnHeader(p: TurnHeaderProps) {
+  return (
+    <div className="mb-2 flex items-center gap-3">
+      <span
+        className={cn(
+          "select-none font-[family-name:var(--font-mono)] text-xs font-semibold uppercase tracking-widest",
+          p.tone === "user" ? "text-primary/80" : "text-accent/80",
+        )}
+      >
+        {p.who}
+      </span>
+      <div className="h-px flex-1 bg-border/40" />
+      {p.voice && (
+        <span
+          role="img"
+          aria-label={p.voice === "voice-conversation" ? "Voice conversation" : "Voice dictation"}
+          className={p.voice === "voice-conversation" ? "flex text-primary/70" : "flex text-primary/50"}
+        >
+          <Icon icon="mic" size={12} />
+        </span>
+      )}
+      <span className="font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/40">{p.when}</span>
+    </div>
+  );
+}
+
+/** The user's bubble: attachments above the text, both the container's. */
+export function UserTurn({ children }: { children: ReactNode }) {
+  return (
+    <MessageBubble role="user" text="">
+      <div className="space-y-2 text-left">{children}</div>
+    </MessageBubble>
+  );
+}
+
+/** A resumed message knows only how many images it carried. */
+export function AttachmentCount({ count }: { count: number }) {
+  return <Chip label={`${count} image${count === 1 ? "" : "s"}`} icon="image" variant="outline" tone="neutral" mono={false} />;
+}
+
+export interface ThinkingBlockProps {
+  content: ReactNode;
+  /** Roughly how much was thought; the collapsed summary's number. */
+  chars: number;
+  streaming: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ThinkingBlock(p: ThinkingBlockProps) {
+  if (p.streaming) {
+    return (
+      <div className="rounded-lg bg-surface/50 px-4 py-3">
+        <div className="font-[family-name:var(--font-mono)] text-xs italic leading-relaxed text-muted-foreground/60 whitespace-pre-wrap">
+          {p.content}
+          <span className="ml-1 inline-flex align-middle">
+            <StatusDot tone="amber" pulse size={6} />
+          </span>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <Disclosure label={`Thought for ~${Math.round(p.chars / 4)} tokens`} icon="agent" open={p.open} onOpenChange={p.onOpenChange}>
+      <div className="font-[family-name:var(--font-mono)] text-xs italic leading-relaxed text-muted-foreground/60 whitespace-pre-wrap">
+        {p.content}
+      </div>
+    </Disclosure>
+  );
+}
+
+/** Nothing has arrived yet: the one breathing dot the design allows. */
+export function ThinkingIndicator() {
+  return (
+    <div className="flex items-center gap-2 text-xs text-muted-foreground" aria-live="polite">
+      <StatusDot tone="amber" pulse size={6} />
+      Thinking...
+    </div>
+  );
+}

package/src/components/chat/use-chat-commands.ts

@@ -1,8 +1,6 @@
+import type { BrainUiRoot } from "../../root.js";
+import { useBrainUiRoot } from "../../root-context.js";
 import { useCallback } from "react";
-import { useChatStore } from "../../stores/chat-store.js";
-import { useConnectionStore } from "../../stores/connection-store.js";
-import { useUIStore } from "../../stores/ui-store.js";
-import { api } from "../../lib/api-client.js";
 
 /**
  * Slash-command dispatch, shared by the composer's palette and the welcome
@@ -15,8 +13,9 @@ import { api } from "../../lib/api-client.js";
  * identity per character would defeat the memoization around it.
  */
 export function useChatCommands(): (command: string) => void {
+  const root = useBrainUiRoot();
   return useCallback((command: string) => {
-    const ui = useUIStore.getState();
+    const ui = root.stores.ui.getState();
 
     // Search and add talk to the brain CLI over REST, not to the agent — they
     // stay available while a turn streams or the socket is down.
@@ -29,11 +28,11 @@ export function useChatCommands(): (command: string) => void {
         return;
     }
 
-    const chat = useChatStore.getState();
+    const chat = root.stores.chat.getState();
     const sessionId = chat.activeSessionId;
     const buffer = sessionId ? chat.buffers[sessionId] : chat.draft;
     const disabled =
-      useConnectionStore.getState().wsStatus !== "connected" ||
+      root.stores.connection.getState().wsStatus !== "connected" ||
       Boolean(buffer?.isStreaming);
     if (disabled) return;
 
@@ -45,19 +44,19 @@ export function useChatCommands(): (command: string) => void {
         ui.setWhatsupPanelOpen(true);
         break;
       case "stats":
-        void runStats(sessionId);
+        void runStats(root, sessionId);
         break;
     }
-  }, []);
+  }, [root]);
 }
 
 /** Brain statistics rendered into the transcript as an assistant turn. */
-async function runStats(sessionId: string | null): Promise<void> {
-  const chat = useChatStore.getState();
+async function runStats(root: BrainUiRoot, sessionId: string | null): Promise<void> {
+  const chat = root.stores.chat.getState();
   chat.addUserMessage(sessionId, "Stats");
   chat.startAssistantMessage(sessionId);
   try {
-    const stats = await api.brainStats();
+    const stats = await root.api.brainStats();
     const result = [
       `**Brain Statistics**`,
       `- Documents: ${stats.documents}`,
@@ -73,15 +72,14 @@ async function runStats(sessionId: string | null): Promise<void> {
         .map(([s, n]) => `${s} (${n})`)
         .join(", ")}`,
     ].join("\n");
-    useChatStore.getState().appendText(sessionId, result);
+    root.stores.chat.getState().appendText(sessionId, result);
   } catch (err) {
-    useChatStore
-      .getState()
+    root.stores.chat.getState()
       .appendText(
         sessionId,
         `**Error:** ${err instanceof Error ? err.message : "Action failed"}`
       );
   } finally {
-    useChatStore.getState().finishAssistantMessage(sessionId);
+    root.stores.chat.getState().finishAssistantMessage(sessionId);
   }
 }

package/src/components/chat/welcome-state.tsx

@@ -1,6 +1,13 @@
-import { Brain, Newspaper, Search, BarChart3 } from "lucide-react";
+import { EmptyState, SuggestionChips } from "@schlessera/brain-ui-kit";
 import { motion } from "framer-motion";
 
+/**
+ * The chat's empty transcript, on the kit (S7): the design's `1h` first-run
+ * `EmptyState` — a medallion, a serif title, one sentence — and the three
+ * starting points as `SuggestionChips`, "follow-ups phrased as prompts the
+ * user could have typed". Already props-only; the chat page routes the
+ * action.
+ */
 export function WelcomeState({
   onAction,
 }: {
@@ -8,98 +15,36 @@ export function WelcomeState({
 }) {
   return (
     <div className="flex min-h-full items-center justify-center px-4 py-8">
-      <div className="flex flex-col items-center gap-8 text-center">
-        {/* Brain icon with breathe animation */}
-        <motion.div
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4, ease: "easeOut" }}
-        >
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface">
-            <Brain className="h-8 w-8 text-primary" style={{ animation: "breathe 3s ease-in-out infinite" }} />
-          </div>
-        </motion.div>
-
-        {/* Headline */}
-        <motion.h1
-          className="font-[family-name:var(--font-display)] text-3xl text-foreground"
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4, delay: 0.1, ease: "easeOut" }}
-        >
-          What do you need to know?
-        </motion.h1>
-
-        {/* Suggestion cards */}
-        <motion.div
-          className="flex flex-col sm:flex-row gap-3"
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4, delay: 0.2, ease: "easeOut" }}
-        >
-          <SuggestionCard
-            icon={Newspaper}
-            label="What's new?"
-            description="Daily briefing"
-            onClick={() => onAction("whatsup")}
-            delay={0}
-          />
-          <SuggestionCard
-            icon={Search}
-            label="Search..."
-            description="Find anything"
-            onClick={() => onAction("search")}
-            delay={0.05}
+      <motion.div
+        className="flex w-full max-w-md flex-col items-center gap-4"
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      >
+        <EmptyState
+          variant="first-run"
+          icon="brain"
+          tone="amber"
+          title="What do you need to know?"
+          body="Ask in your own words. The brain reads its files, cites what it used, and asks before it writes."
+          meta=""
+          titleSize={26}
+          pad={8}
+        />
+        <div className="w-full">
+          <SuggestionChips
+            label="Start with"
+            items={[
+              { label: "What's new?", icon: "digest", tone: "amber", onClick: () => onAction("whatsup") },
+              { label: "Search…", icon: "search", onClick: () => onAction("search") },
+              { label: "Brain stats", icon: "health", tone: "teal", onClick: () => onAction("stats") },
+            ]}
           />
-          <SuggestionCard
-            icon={BarChart3}
-            label="Brain stats"
-            description="Overview"
-            onClick={() => onAction("stats")}
-            delay={0.1}
-          />
-        </motion.div>
-
-        {/* Keyboard hints */}
-        <motion.div
-          className="text-xs text-muted-foreground/40"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.4, delay: 0.4 }}
-        >
+        </div>
+        <div className="text-xs text-muted-foreground/60">
           <span className="font-mono">/</span> for commands
-        </motion.div>
-      </div>
+        </div>
+      </motion.div>
     </div>
   );
 }
-
-function SuggestionCard({
-  icon: Icon,
-  label,
-  description,
-  onClick,
-  delay,
-}: {
-  icon: typeof Brain;
-  label: string;
-  description: string;
-  onClick: () => void;
-  delay: number;
-}) {
-  return (
-    <motion.button
-      onClick={onClick}
-      className="flex w-44 flex-col items-center gap-2 rounded-xl border border-border bg-surface p-4 text-center transition-all duration-200 hover:border-primary/40 hover:bg-surface-raised"
-      initial={{ opacity: 0, y: 8 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3, delay: 0.25 + delay, ease: "easeOut" }}
-    >
-      <Icon className="h-5 w-5 text-primary" />
-      <div>
-        <div className="text-sm font-medium text-foreground">{label}</div>
-        <div className="text-[11px] text-muted-foreground">{description}</div>
-      </div>
-    </motion.button>
-  );
-}