diff --git a/.design-sync/NOTES.md b/.design-sync/NOTES.md
index e3a3880b..0dce557f 100644
--- a/.design-sync/NOTES.md
+++ b/.design-sync/NOTES.md
@@ -37,7 +37,19 @@ Tailwind and TypeScript). Nothing there reimplements a component.
 - Fixed overlays (`Dialog`, `Confirm`, `Toaster`) render inside a box with `transform:
   translateZ(0)`, which makes it their containing block; without it the per-story capture is
   0 px tall.
-- `ListAvatar` is excluded (cfg.componentSrcMap): a wrapper over `BotAvatar` that needs a bot object.
+- The app screens (`Sidebar`, `CrewBots`, `BotRun`, `InboundRow`, `ApprovalCard`) read the app's
+  store and API. `pkg/provider.tsx` (`BotloftProvider`) wires the app's own `DaemonProvider` and
+  `HostProvider` to `FakeBotloft` and `FakeHost`, seeded with the crews and bots it is given, and
+  turns `approvals.answer` into an `onAnswer` callback. `pkg/scene.ts` builds protocol objects
+  (`makeCrew`, `makeBot`, `makeMessage`, `chat.*`) with the fake daemon's defaults; request
+  inputs and summaries follow the daemon (`crates/botloft-core/src/chat.rs` `tool_summary`,
+  `crates/botloftd/src/tools/browser_sites.rs`): a site request is `{site, url}` with the site as
+  its summary.
+- Type emission covers the whole package with the repo as root; `.design-sync` is renamed to `ds`
+  in `dist/types/emit` (ts-morph skips dot folders), and `paths` points bare imports at
+  `app/node_modules` (`@types` first, or React resolves to its JS). `vite/client.d.ts` is added
+  for the fake daemon's `?raw` import.
+- Bot colors come from `AVATAR_PALETTE` (protocol.gen.ts); previews and conventions use it.
 
 ## Known render warns
 
@@ -45,6 +57,10 @@ Tailwind and TypeScript). Nothing there reimplements a component.
   Mono ships. Accepted.
 - `Menu` shows only its closed button: opening takes a click.
 - `SelectField` Disabled looks like the enabled one: the app's own control does not style disabled.
+- `[RENDER_ERRORS] AbortError: Transition was skipped` on the app screens: each preview cell has
+  its own `BotloftProvider`, and each opens its first crew with the app's view transition
+  (`ui/motion.ts`); the transitions of several cells on one page cut each other off. Renders fine;
+  a design uses one provider.
 
 ## Re-sync risks
 
@@ -54,5 +70,8 @@ Tailwind and TypeScript). Nothing there reimplements a component.
   ranges. Change both together.
 - The icon set follows the app's imports: an icon the app stops using disappears from `icons`.
 - Bot colors in previews and conventions are sample values, not tokens.
-- The scope is the base pieces plus the bot badges (owner's choice on 2026-10-02). Chat rows,
-  approval cards and the sidebar are not in the package.
+- Scope (owner's choices on 2026-10-02): the base pieces, the bot badges, and the app screens the
+  explainer video needs (sidebar, crew cards, a bot's turn, messages, requests). Not in it yet:
+  the whole crew view, the composer, the browser and screens panels, routines, settings.
+- `scene.ts` mirrors protocol shapes and daemon summaries by hand; a protocol change
+  (`protocol.gen.ts`) or a new request kind needs it updated, or the tsc step fails.
diff --git a/.design-sync/config.json b/.design-sync/config.json
index 009509e0..03c3e62c 100644
--- a/.design-sync/config.json
+++ b/.design-sync/config.json
@@ -21,10 +21,13 @@
     "SelectField": "label: string; hint?: string; options: { value: string; label: string }[]; value?: string; defaultValue?: string; onChange?: React.ChangeEventHandler<HTMLSelectElement>; name?: string; className?: string; id?: string; style?: React.CSSProperties; disabled?: boolean; autoFocus?: boolean; ",
     "BotStateBadge": "/** The bot: its state and whether the owner paused it. */ bot: { state: \"offline\" | \"launching\" | \"idle\" | \"busy\" | \"needs_approval\" | \"rate_limited\" | \"auth_error\" | \"backoff\" | \"archived\"; paused: boolean }; /** A paused crew shows its stopped bots as paused. */ crewPaused?: boolean; compact?: boolean;",
     "ChiefBadge": "/** The crew this bot leads; only its name is read, for the tooltip. */ crew: { name: string }; /** Just the crown, for tight rows. */ compact?: boolean;",
-    "Menu": "/** Accessible name of the button that opens the menu. */ label: string; /** An icon from window.Botloft.icons, e.g. icons.Ellipsis. */ icon: React.ComponentType<{ size?: number; strokeWidth?: number }>; items: { label: string; icon?: React.ComponentType<{ size?: number; strokeWidth?: number }>; danger?: boolean; disabled?: boolean; /** Makes the item one of a set of choices, marked when chosen. */ checked?: boolean; onSelect: () => void }[];"
-  },
-  "componentSrcMap": {
-    "ListAvatar": null
+    "Menu": "/** Accessible name of the button that opens the menu. */ label: string; /** An icon from window.Botloft.icons, e.g. icons.Ellipsis. */ icon: React.ComponentType<{ size?: number; strokeWidth?: number }>; items: { label: string; icon?: React.ComponentType<{ size?: number; strokeWidth?: number }>; danger?: boolean; disabled?: boolean; /** Makes the item one of a set of choices, marked when chosen. */ checked?: boolean; onSelect: () => void }[];",
+    "ApprovalCard": "/** A request: Botloft.chat.askCommand / askSite / suggestBot / askPlan(...).body. The card follows its toolName (command, website, suggested bot, plan) and its status (pending, allowed, denied, expired). Needs BotloftProvider around it. */ approval: any; /** A bot from Botloft.makeBot(...). */ bot: any;",
+    "BotRun": "/** One turn of the bot, in order: items from Botloft.chat.reply / tool / askCommand / askSite / suggestBot / askPlan / turn(bot, ...). Needs BotloftProvider around it. */ items: any[]; /** A bot from Botloft.makeBot(...). */ bot: any; /** The turn in progress: the reply being written (draft) or the working dots (working). Only a live run moves the avatar. */ live?: { draft: string; working: boolean };",
+    "InboundRow": "/** A message from Botloft.makeMessage({ from, to, body }). From \"owner\" it is your bubble on the right; from a bot or \"system\" it sits on the left with the sender's avatar. The sender must be among BotloftProvider bots. */ message: any; /** The bot whose chat this is: the message's recipient. */ /** A bot from Botloft.makeBot(...). */ bot: any;",
+    "CrewBots": "/** A crew from Botloft.makeCrew(...). */ crew: any; /** Its bots, from Botloft.makeBot({ crew, ... }); the Chief (chief: true) gets the crown. Pass the same ones to BotloftProvider. */ bots: any[]; onNewBot: () => void;",
+    "Sidebar": "/** No props: it lists the crews and bots given to BotloftProvider, with each bot's state and last activity, and the account at the bottom. Give it a fixed height. */ className?: never;",
+    "BotloftProvider": "/** Crews from Botloft.makeCrew(...). */ crews?: any[]; /** Bots from Botloft.makeBot(...). A new array updates them, e.g. to change a state over time. */ bots?: any[]; /** The bot whose chat is open: highlighted in the sidebar. */ selectedBotId?: string; /** Called when Allow or Deny is clicked on a request card. */ onAnswer?: (answer: { approvalId: string; allow: boolean; note?: string }) => void; children: React.ReactNode;"
   },
   "overrides": {
     "Dialog": {
@@ -44,6 +47,26 @@
     "Toaster": {
       "cardMode": "single",
       "primaryStory": "ErrorNotice"
+    },
+    "Sidebar": {
+      "cardMode": "single",
+      "viewport": "320x620"
+    },
+    "BotRun": {
+      "cardMode": "column"
+    },
+    "InboundRow": {
+      "cardMode": "column"
+    },
+    "ApprovalCard": {
+      "cardMode": "column"
+    },
+    "CrewBots": {
+      "cardMode": "column"
+    },
+    "BotloftProvider": {
+      "cardMode": "single",
+      "viewport": "1000x560"
     }
   },
   "readmeHeader": ".design-sync/conventions.md"
diff --git a/.design-sync/conventions.md b/.design-sync/conventions.md
index 59a9d64b..11fc1a3b 100644
--- a/.design-sync/conventions.md
+++ b/.design-sync/conventions.md
@@ -5,7 +5,13 @@ mascot in its own color. The look is quiet and warm: neutral surfaces, one orang
 
 ## Setup
 
-- No provider is needed. Link `styles.css` and load `_ds_bundle.js`; components are on `window.Botloft`.
+- Link `styles.css` and load `_ds_bundle.js`; components are on `window.Botloft`. The basic pieces
+  (Button, fields, Dialog, Callout, BotAvatar, BotStateBadge...) need nothing around them.
+- **App screens need `BotloftProvider`.** `Sidebar`, `CrewBots`, `BotRun`, `InboundRow` and
+  `ApprovalCard` are the app's real screens and read the app's data: wrap them in one
+  `<BotloftProvider crews={[...]} bots={[...]}>` per design (not one per piece). Build the data
+  with `makeCrew`, `makeBot`, `makeMessage` and `chat.*` (below); never write a bot object by hand.
+  A new `bots` array updates every screen, which is how a design animates states.
 - **Theme:** light by default. Put `data-theme="dark"` on a wrapper (or `<html>`) and every token
   switches. Give the page `bg-canvas text-ink` so the background follows the theme.
 - **Language:** the components' own words (state labels, Close, Cancel) follow the browser's
@@ -34,8 +40,29 @@ use `style={{ height: 360 }}` for one-off sizes.
 The tokens behind them are CSS variables: `--canvas`, `--panel`, `--sunken`, `--line`,
 `--line-strong`, `--ink`, `--ink-soft`, `--muted`, `--accent`, `--ok`, `--work`, `--warn`,
 `--danger`. Use `var(--accent)` in inline styles; never hard-code hex for UI colors.
-Bot colors are the exception: each bot has its own (`#FF7A59` Botloft orange, `#4FC382`, `#6EA6FF`,
-`#F0B24A`, `#C084FC`), passed to `BotAvatar`.
+Bot colors are the exception: each bot has its own from `Botloft.AVATAR_PALETTE` (`#FF7A59`
+Botloft orange, `#5EC8FF`, `#A48BFF`, `#9BE564`, `#FFC857`, `#FF7EB6`, `#3DD9C1`, `#E8D5B0`);
+`makeBot` hands them out in that order.
+
+## Data for the app screens
+
+```jsx
+const { makeCrew, makeBot, makeMessage, chat } = window.Botloft;
+const crew = makeCrew({ name: "Research" });
+const chief = makeBot({ crew, name: "Chief", chief: true, state: "idle" });
+const scout = makeBot({ crew, name: "Scout", state: "busy", role: "Finds sources.",
+  activity: { kind: "tool", text: "on-device AI news", tool: "WebSearch" } }); // sidebar line
+```
+
+- `state`: `idle`, `busy` (working), `needs_approval`, `launching`, `rate_limited`, `backoff`,
+  `auth_error`, `offline` (with `paused: true` it reads Paused).
+- A bot's turn is a list for `BotRun`: `chat.reply(bot, markdown)`, `chat.tool(bot, { name:
+  "WebSearch" | "WebFetch" | "Read" | "Write" | "Bash", summary })`, `chat.askSite(bot, url)`,
+  `chat.askCommand(bot, command, { explanation })`, `chat.suggestBot(chief, { name, role, model,
+  instructions, reason })`, `chat.askPlan(bot, markdown)`, `chat.turn(bot, seconds)`. Each takes
+  `{ status: "allowed" | "denied" }` to show it answered. `ApprovalCard` takes one of them's `.body`.
+- `makeMessage({ from: bot | "owner" | "system", to: bot, body, kind: "note" | "task" })` for
+  `InboundRow`: yours on the right, a bot's or Botloft's on the left.
 
 ## Components and their roles
 
@@ -47,6 +74,11 @@ Bot colors are the exception: each bot has its own (`#FF7A59` Botloft orange, `#
   `Toaster` + `notifyError(what, error)` for failures away from a form.
 - Fields: `TextField`, `TextArea`, `SelectField` (labeled), `Select` (custom dropdown),
   `Choices` (2-6 options side by side), `Switch`, `Tabs`, `Menu`, `Details`, `SidePanel`.
+- App screens: `Sidebar` (crews and bots, 288px wide, give it a height), `CrewBots` (a crew's bot
+  cards), `BotRun` (one turn of a bot in its chat, inside a `<ul>`), `InboundRow` (a message in a
+  chat, inside a `<ul>`), `ApprovalCard` (a request: a website, a command, a suggested bot, a plan).
+  The app's window is the `Sidebar` on the left and the open bot's chat on the right, on `bg-canvas`.
+  `BotloftProvider`'s `onAnswer` hears Allow and Deny on request cards.
 
 Read `components/<group>/<Name>/<Name>.prompt.md` for each one's props.
 
@@ -58,24 +90,29 @@ you"), never "the agent" or "Claude". Never say "daemon"; say "Botloft" or "in t
 ## Example
 
 ```jsx
-const { BotAvatar, BotStateBadge, Button, Callout, icons, setLocaleChoice } = window.Botloft;
+const { BotloftProvider, Sidebar, BotRun, BotStateBadge, makeCrew, makeBot, chat, setLocaleChoice } =
+  window.Botloft;
 setLocaleChoice("en");
+const crew = makeCrew({ name: "Research" });
+const chief = makeBot({ crew, name: "Chief", chief: true });
+const scout = makeBot({ crew, name: "Scout", state: "needs_approval" });
+const site = chat.askSite(scout, "https://arxiv.org/abs/2609.01234");
 
-function CrewCard() {
+function AppWindow() {
+  const [allowed, setAllowed] = React.useState(false);
+  const scoutNow = allowed ? { ...scout, state: "busy" } : scout;
+  const card = allowed ? { ...site, body: { ...site.body, status: "allowed" } } : site;
   return (
-    <div className="flex max-w-md flex-col gap-3 rounded-xl border border-line bg-panel p-4">
-      <div className="flex items-center gap-3">
-        <BotAvatar color="#4FC382" size={36} mood="working" />
-        <div className="min-w-0 flex-1">
-          <p className="font-semibold text-ink text-sm">Scout</p>
-          <BotStateBadge bot={{ state: "busy", paused: false }} compact />
-        </div>
-        <Button variant="ghost" icon={icons.Pause} label="Pause Scout" />
+    <BotloftProvider crews={[crew]} bots={[chief, scoutNow]} selectedBotId={scout.id}
+      onAnswer={(answer) => setAllowed(answer.allow)}>
+      <div className="flex bg-canvas text-ink" style={{ height: 560 }}>
+        <Sidebar />
+        <ul className="flex min-w-0 flex-1 flex-col gap-5 p-5">
+          <BotRun bot={scoutNow} items={[chat.reply(scout, "I need to open this paper."), card]}
+            live={{ draft: "", working: allowed }} />
+        </ul>
       </div>
-      <Callout tone="warn" title="Scout needs your approval">
-        It wants to open arxiv.org for the first time.
-      </Callout>
-    </div>
+    </BotloftProvider>
   );
 }
 ```
diff --git a/.design-sync/pkg/build.mjs b/.design-sync/pkg/build.mjs
index fb4c34d0..8afbda82 100644
--- a/.design-sync/pkg/build.mjs
+++ b/.design-sync/pkg/build.mjs
@@ -6,7 +6,7 @@
 //   node .design-sync/pkg/build.mjs
 
 import { execFileSync } from "node:child_process";
-import { existsSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { readdirSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
@@ -87,29 +87,32 @@ await build({
   rmSync(noFonts, { force: true });
 }
 
-// Types: declarations for the app files the entry re-exports, then an
-// index.d.ts that is the entry with its paths pointed at them.
-const entry = readFileSync(join(here, "index.ts"), "utf8");
-const sources = [...entry.matchAll(/from "\.\.\/\.\.\/app\/src\/([^"]+)"/g)].map(
-  (match) =>
-    existsSync(join(app, `src/${match[1]}.tsx`)) ? `src/${match[1]}.tsx` : `src/${match[1]}/index.ts`,
-);
+// Types: declarations for the whole entry (the app files it re-exports and
+// the package's own provider and builders), emitted under dist/types/emit
+// with the repo as the root. The .design-sync folder is renamed to ds there,
+// since tools skip dot folders; the relative imports between the two trees
+// keep their depth, so they still resolve.
 const tsconfig = join(here, "tsconfig.types.json");
+const slash = (path) => path.replaceAll("\\", "/");
+const modules = join(app, "node_modules");
 writeFileSync(
   tsconfig,
   `${JSON.stringify(
     {
-      extends: join(app, "tsconfig.json").replaceAll("\\", "/"),
+      extends: slash(join(app, "tsconfig.json")),
       compilerOptions: {
         noEmit: false,
         declaration: true,
         emitDeclarationOnly: true,
-        rootDir: join(app, "src").replaceAll("\\", "/"),
-        outDir: join(dist, "types", "app").replaceAll("\\", "/"),
+        rootDir: slash(resolve(here, "../..")),
+        outDir: slash(join(dist, "types", "emit")),
         types: [],
-        typeRoots: [join(app, "node_modules", "@types").replaceAll("\\", "/")],
+        typeRoots: [slash(join(modules, "@types"))],
+        // The package sits outside the app: its imports resolve in the app's node_modules.
+        paths: { "*": [slash(join(modules, "@types", "*")), slash(join(modules, "*"))] },
       },
-      files: sources.map((source) => join(app, source).replaceAll("\\", "/")),
+      // `?raw` and the other Vite imports the app uses.
+      files: [slash(join(here, "index.ts")), slash(join(modules, "vite", "client.d.ts"))],
       include: [],
     },
     null,
@@ -118,20 +121,10 @@ writeFileSync(
 );
 try {
   const tsc = join(dirname(require.resolve("typescript/package.json")), "bin", "tsc");
-  execFileSync(process.execPath, [tsc, "-p", tsconfig], {
-    stdio: "inherit",
-  });
+  execFileSync(process.execPath, [tsc, "-p", tsconfig], { stdio: "inherit" });
 } finally {
   rmSync(tsconfig, { force: true });
 }
-writeFileSync(
-  join(dist, "types", "index.d.ts"),
-  entry
-    .split("\n")
-    .filter((line) => !line.startsWith("import ") && !line.startsWith("//"))
-    .join("\n")
-    .replaceAll("../../app/src/", "./app/")
-    .trimStart(),
-);
-writeFileSync(join(dist, "types", "icons.gen.d.ts"), iconsModule);
+renameSync(join(dist, "types", "emit", ".design-sync"), join(dist, "types", "emit", "ds"));
+writeFileSync(join(dist, "types", "index.d.ts"), 'export * from "./emit/ds/pkg/index";\n');
 console.log(`built ${dist}`);
diff --git a/.design-sync/pkg/index.ts b/.design-sync/pkg/index.ts
index b5b75d2a..ad3083e6 100644
--- a/.design-sync/pkg/index.ts
+++ b/.design-sync/pkg/index.ts
@@ -1,13 +1,20 @@
 // The pieces of Botloft's interface that the design system shares with
 // claude.ai/design: the app's own components, re-exported as they are, and
 // its stylesheet (tokens, fonts and the Tailwind utilities the app uses).
-// Built by build.mjs; nothing here reimplements a component.
+// Built by build.mjs; nothing here reimplements a component. provider.tsx
+// and scene.ts only wire the app's providers and build sample data.
 
 import "./styles.css";
 
-export { BOTLOFT_COLOR, BotAvatar, ListAvatar, type Mood } from "../../app/src/features/bots/BotAvatar";
+export { BOTLOFT_COLOR, BotAvatar, type Mood } from "../../app/src/features/bots/BotAvatar";
 export { BotStateBadge } from "../../app/src/features/bots/BotStateBadge";
 export { ChiefBadge } from "../../app/src/features/bots/ChiefBadge";
+export { ApprovalCard } from "../../app/src/features/chat/ApprovalCard";
+export { BotRun } from "../../app/src/features/chat/BotRun";
+export { InboundRow } from "../../app/src/features/chat/InboundRow";
+export { CrewBots } from "../../app/src/features/crews/CrewBots";
+export { Sidebar } from "../../app/src/features/crews/Sidebar";
+export { setLocaleChoice } from "../../app/src/i18n";
 export { Button, type ButtonVariant } from "../../app/src/ui/Button";
 export { Callout } from "../../app/src/ui/Callout";
 export { Choices } from "../../app/src/ui/Choices";
@@ -21,5 +28,6 @@ export { SidePanel } from "../../app/src/ui/SidePanel";
 export { Switch } from "../../app/src/ui/Switch";
 export { type Tab, Tabs } from "../../app/src/ui/Tabs";
 export { notifyError, Toaster } from "../../app/src/ui/toast";
-export { setLocaleChoice } from "../../app/src/i18n";
 export * as icons from "./icons.gen";
+export { BotloftProvider, type BotloftProviderProps } from "./provider";
+export { AVATAR_PALETTE, chat, makeBot, makeCrew, makeMessage } from "./scene";
diff --git a/.design-sync/pkg/provider.tsx b/.design-sync/pkg/provider.tsx
new file mode 100644
index 00000000..5a2cc320
--- /dev/null
+++ b/.design-sync/pkg/provider.tsx
@@ -0,0 +1,81 @@
+// What Botloft's screens need around them: the app's own providers (the
+// daemon API, the app store, the native host), here backed by the app's
+// in-memory fake daemon (FakeBotloft, the one `pnpm dev` and the tests use)
+// instead of a running Botloft. Crews and bots passed in become the fake
+// daemon's, so the sidebar, the crew view and the chat read them as the app
+// would; a new array updates them, which lets a design animate states.
+
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import type { ApprovalsAnswerParams, Bot, BotId, Crew } from "../../app/src/lib/protocol.gen";
+import { FakeBotloft } from "../../app/src/lib/fake";
+import { FakeHost } from "../../app/src/lib/fakeHost";
+import { DaemonProvider, HostProvider, useApp, useAppStore } from "../../app/src/store/context";
+
+export interface BotloftProviderProps {
+  crews?: Crew[];
+  bots?: Bot[];
+  /** The bot whose chat is open: highlighted in the sidebar. */
+  selectedBotId?: BotId | null;
+  /** Called when Allow or Deny is clicked on a request card. */
+  onAnswer?: (answer: { approvalId: string; allow: boolean; note?: string }) => void;
+  children: ReactNode;
+}
+
+function Selection({ botId }: { botId: BotId | null | undefined }) {
+  const store = useAppStore();
+  const loaded = useApp((state) => state.loaded);
+  useEffect(() => {
+    if (loaded && botId) {
+      store.getState().selectBot(botId);
+    }
+  }, [store, loaded, botId]);
+  return null;
+}
+
+export function BotloftProvider({ crews = [], bots = [], selectedBotId, onAnswer, children }: BotloftProviderProps) {
+  const answer = useRef(onAnswer);
+  answer.current = onAnswer;
+  const [fake] = useState(() => {
+    const api = new FakeBotloft();
+    for (const crew of crews) api.crews.set(crew.id, crew);
+    for (const bot of bots) api.bots.set(bot.id, bot);
+    const call = api.call.bind(api) as FakeBotloft["call"];
+    // A request card's answer goes to the design, not to a daemon.
+    api.call = ((method: string, ...params: unknown[]) => {
+      if (method === "approvals.answer") {
+        const asked = params[0] as ApprovalsAnswerParams;
+        answer.current?.({
+          approvalId: asked.approvalId,
+          allow: asked.allow,
+          ...(asked.note ? { note: asked.note } : {}),
+        });
+        return Promise.resolve({});
+      }
+      return (call as (method: string, ...params: unknown[]) => Promise<unknown>)(method, ...params);
+    }) as FakeBotloft["call"];
+    return api;
+  });
+  const [host] = useState(() => new FakeHost());
+
+  useEffect(() => {
+    for (const crew of crews) {
+      fake.crews.set(crew.id, crew);
+      fake.changedCrew(crew);
+    }
+  }, [fake, crews]);
+  useEffect(() => {
+    for (const bot of bots) {
+      fake.bots.set(bot.id, bot);
+      fake.changedBot(bot);
+    }
+  }, [fake, bots]);
+
+  return (
+    <HostProvider host={host}>
+      <DaemonProvider api={fake}>
+        <Selection botId={selectedBotId} />
+        {children}
+      </DaemonProvider>
+    </HostProvider>
+  );
+}
diff --git a/.design-sync/pkg/scene.ts b/.design-sync/pkg/scene.ts
new file mode 100644
index 00000000..47936a66
--- /dev/null
+++ b/.design-sync/pkg/scene.ts
@@ -0,0 +1,229 @@
+// Builders for the data Botloft's screens show: crews, bots, chat items and
+// messages, in the protocol's exact shape (app/src/lib/protocol.gen.ts) and
+// with the defaults the app's fake daemon gives new ones. A design passes
+// them to BotloftProvider and to the chat components, so it never has to
+// spell out every field of a Bot by hand.
+
+import { SITE_TOOL } from "../../app/src/features/browser/SiteCard";
+import { PLAN_TOOL } from "../../app/src/features/chat/PlanCard";
+import { SUGGEST_TOOL } from "../../app/src/features/chat/SuggestionCard";
+import {
+  AVATAR_PALETTE,
+  type Activity,
+  type ApprovalItem,
+  type ApprovalStatus,
+  type Bot,
+  type BotModel,
+  type BotState,
+  type ChatItem,
+  type ChatBody,
+  type Crew,
+  type Message,
+  type MessageKind,
+  type PermissionMode,
+  type ToolStatus,
+} from "../../app/src/lib/protocol.gen";
+
+let counter = 0;
+const id = (prefix: string) => `${prefix}_${String(++counter).padStart(6, "0")}`;
+const ago = (minutes: number) => Date.now() - minutes * 60_000;
+const slug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "bot";
+
+export interface CrewSeed {
+  name: string;
+  paused?: boolean;
+}
+
+export function makeCrew({ name, paused = false }: CrewSeed): Crew {
+  const folder = slug(name);
+  return {
+    id: id("crw"),
+    name,
+    slug: folder,
+    workFolder: `C:\\Users\\owner\\Botloft\\${folder}\\shared`,
+    workFolderChosen: false,
+    leadBotId: null,
+    paused,
+    createdAt: ago(60 * 24 * 3),
+    archivedAt: null,
+  };
+}
+
+export interface BotSeed {
+  crew: Crew;
+  name: string;
+  role?: string;
+  /** Defaults to the next color of the app's own palette. */
+  color?: string;
+  state?: BotState;
+  paused?: boolean;
+  model?: BotModel;
+  permissionMode?: PermissionMode;
+  /** Makes it the crew's Chief (sets `crew.leadBotId`). */
+  chief?: boolean;
+  /** What the sidebar shows under its name. */
+  activity?: { kind: Activity["kind"]; text: string; tool?: string; minutesAgo?: number };
+  /** Marks it unread in the sidebar: it replied after the owner last looked. */
+  repliedMinutesAgo?: number;
+}
+
+let paletteIndex = 0;
+
+export function makeBot(seed: BotSeed): Bot {
+  const handle = slug(seed.name);
+  const bot: Bot = {
+    id: id("bot"),
+    crewId: seed.crew.id,
+    name: seed.name,
+    handle,
+    slug: handle,
+    role: seed.role ?? "",
+    instructions: "",
+    color: seed.color ?? AVATAR_PALETTE[paletteIndex++ % AVATAR_PALETTE.length] ?? "#FF7A59",
+    paused: seed.paused ?? false,
+    permissionMode: seed.permissionMode ?? "default",
+    model: seed.model ?? "default",
+    modelInUse: null,
+    effort: "default",
+    effortDefault: null,
+    context: null,
+    state: seed.state ?? "idle",
+    generation: 1,
+    workspace: `C:\\Users\\owner\\Botloft\\${seed.crew.slug}\\${handle}`,
+    lastActivity: seed.activity
+      ? {
+          kind: seed.activity.kind,
+          text: seed.activity.text,
+          tool: seed.activity.tool ?? null,
+          at: ago(seed.activity.minutesAgo ?? 2),
+        }
+      : null,
+    lastReplyAt: seed.repliedMinutesAgo === undefined ? null : ago(seed.repliedMinutesAgo),
+    createdAt: ago(60 * 24 * 2),
+    archivedAt: null,
+  };
+  if (seed.chief) {
+    seed.crew.leadBotId = bot.id;
+  }
+  return bot;
+}
+
+function item(bot: Bot, body: ChatBody, minutesAgo: number): ChatItem {
+  const at = ago(minutesAgo);
+  return { id: id("cht"), botId: bot.id, body, createdAt: at, updatedAt: at };
+}
+
+function ask(
+  bot: Bot,
+  toolName: string,
+  input: unknown,
+  summary: string,
+  extra: { status?: ApprovalStatus; explanation?: string; always?: ApprovalItem["always"]; minutesAgo?: number },
+): ChatItem {
+  return item(
+    bot,
+    {
+      kind: "approval",
+      approvalId: id("apr"),
+      toolName,
+      summary,
+      explanation: extra.explanation ?? null,
+      input: JSON.stringify(input),
+      status: extra.status ?? "pending",
+      note: null,
+      always: extra.always ?? null,
+    },
+    extra.minutesAgo ?? 0,
+  );
+}
+
+/** One turn of a bot is a list of these, in order, passed to BotRun. */
+export const chat = {
+  reply(bot: Bot, text: string, minutesAgo = 0): ChatItem {
+    return item(bot, { kind: "reply", text }, minutesAgo);
+  },
+  /** A tool call, e.g. `{ name: "WebSearch", summary: "on-device AI news" }`. */
+  tool(
+    bot: Bot,
+    tool: { name: string; summary: string; status?: ToolStatus; output?: string; file?: string },
+    minutesAgo = 0,
+  ): ChatItem {
+    return item(
+      bot,
+      {
+        kind: "tool",
+        toolUseId: id("tool"),
+        name: tool.name,
+        summary: tool.summary,
+        explanation: null,
+        input: "{}",
+        status: tool.status ?? "done",
+        output: tool.output ?? null,
+        file: tool.file ?? null,
+      },
+      minutesAgo,
+    );
+  },
+  /** The bot asks to run a command. */
+  askCommand(
+    bot: Bot,
+    command: string,
+    extra: { explanation?: string; status?: ApprovalStatus; minutesAgo?: number } = {},
+  ): ChatItem {
+    return ask(bot, "Bash", { command }, command, {
+      ...extra,
+      always: { toolName: "Bash", kind: "command", value: command },
+    });
+  },
+  /** The bot asks to use a website it has not used before; the card names its site. */
+  askSite(bot: Bot, url: string, extra: { status?: ApprovalStatus; minutesAgo?: number } = {}): ChatItem {
+    const site = new URL(url).hostname.replace(/^www\./, "");
+    return ask(bot, SITE_TOOL, { site, url }, site, extra);
+  },
+  /** A Chief suggests a new bot for its crew. */
+  suggestBot(
+    chief: Bot,
+    bot: { name: string; role: string; instructions?: string; model?: BotModel; reason: string },
+    extra: { status?: ApprovalStatus; minutesAgo?: number } = {},
+  ): ChatItem {
+    return ask(chief, SUGGEST_TOOL, { instructions: "", ...bot }, bot.name, extra);
+  },
+  /** A plan, in markdown, the bot asks to follow. */
+  askPlan(bot: Bot, plan: string, extra: { status?: ApprovalStatus; minutesAgo?: number } = {}): ChatItem {
+    // As the daemon does: the plan's first line without its heading marks.
+    const title = plan.split("\n").map((line) => line.replace(/^#+/, "").trim()).find(Boolean) ?? "";
+    return ask(bot, PLAN_TOOL, { plan }, title, extra);
+  },
+  /** How the turn ended; closes a BotRun. */
+  turn(bot: Bot, seconds: number, minutesAgo = 0): ChatItem {
+    return item(bot, { kind: "turn", durationMs: seconds * 1000, tokens: null, error: null }, minutesAgo);
+  },
+};
+
+export interface MessageSeed {
+  /** A bot, or "owner" for you, or "system" for Botloft itself. */
+  from: Bot | "owner" | "system";
+  to: Bot;
+  body: string;
+  kind?: MessageKind;
+  minutesAgo?: number;
+}
+
+export function makeMessage({ from, to, body, kind = "note", minutesAgo = 0 }: MessageSeed): Message {
+  const sender = typeof from === "string" ? null : from;
+  return {
+    id: id("msg"),
+    crewId: to.crewId,
+    fromKind: sender ? "bot" : (from as "owner" | "system"),
+    fromBotId: sender?.id ?? null,
+    toBotId: to.id,
+    kind,
+    body,
+    taskId: null,
+    routineId: null,
+    attachments: [],
+    createdAt: ago(minutesAgo),
+  };
+}
+
+export { AVATAR_PALETTE };
diff --git a/.design-sync/previews/ApprovalCard.tsx b/.design-sync/previews/ApprovalCard.tsx
new file mode 100644
index 00000000..53de902f
--- /dev/null
+++ b/.design-sync/previews/ApprovalCard.tsx
@@ -0,0 +1,72 @@
+import { ApprovalCard, BotloftProvider, chat, makeBot, makeCrew, setLocaleChoice } from "@botloft/ui";
+
+// The app follows the browser's language; the cards are in English.
+setLocaleChoice("en");
+
+const crew = makeCrew({ name: "Research" });
+const chief = makeBot({ crew, name: "Chief", chief: true });
+const scout = makeBot({ crew, name: "Scout", state: "needs_approval" });
+
+function Card({ approval, bot }: { approval: Parameters<typeof ApprovalCard>[0]["approval"]; bot: typeof scout }) {
+  return (
+    <BotloftProvider crews={[crew]} bots={[chief, scout]}>
+      <div className="bg-canvas p-4" style={{ maxWidth: 640 }}>
+        <ApprovalCard approval={approval} bot={bot} />
+      </div>
+    </BotloftProvider>
+  );
+}
+
+export function Website() {
+  return <Card bot={scout} approval={chat.askSite(scout, "https://arxiv.org/abs/2609.01234").body} />;
+}
+
+export function Command() {
+  return (
+    <Card
+      bot={scout}
+      approval={
+        chat.askCommand(scout, "python charts/plot.py --week 40", {
+          explanation: "Draws this week's benchmark chart for the summary.",
+        }).body
+      }
+    />
+  );
+}
+
+export function SuggestedBot() {
+  return (
+    <Card
+      bot={chief}
+      approval={
+        chat.suggestBot(chief, {
+          name: "Editor",
+          role: "Checks facts and tone before the summary goes out.",
+          model: "sonnet",
+          instructions: "Read Writer's draft every Friday morning. Check each number against its source.",
+          reason: "Summaries go out without a second look today.",
+        }).body
+      }
+    />
+  );
+}
+
+export function Plan() {
+  return (
+    <Card
+      bot={chief}
+      approval={
+        chat.askPlan(
+          chief,
+          "## Friday summary\n\n1. Scout gathers sources Monday to Thursday\n2. Writer drafts on Thursday night\n3. Editor checks it Friday morning\n4. I send it to you at 9:00",
+        ).body
+      }
+    />
+  );
+}
+
+export function Allowed() {
+  return (
+    <Card bot={scout} approval={chat.askSite(scout, "https://arxiv.org/abs/2609.01234", { status: "allowed" }).body} />
+  );
+}
diff --git a/.design-sync/previews/BotAvatar.tsx b/.design-sync/previews/BotAvatar.tsx
index 64427a2e..1b99bf35 100644
--- a/.design-sync/previews/BotAvatar.tsx
+++ b/.design-sync/previews/BotAvatar.tsx
@@ -5,10 +5,10 @@ setLocaleChoice("en");
 
 const crew = [
   { name: "Chief", color: "#FF7A59" },
-  { name: "Scout", color: "#4FC382" },
-  { name: "Writer", color: "#6EA6FF" },
-  { name: "Editor", color: "#F0B24A" },
-  { name: "Ops", color: "#C084FC" },
+  { name: "Scout", color: "#5EC8FF" },
+  { name: "Writer", color: "#A48BFF" },
+  { name: "Editor", color: "#9BE564" },
+  { name: "Ops", color: "#FFC857" },
 ];
 
 export function Colors() {
@@ -30,7 +30,7 @@ export function Moods() {
     <div className="flex items-end gap-5 p-4">
       {moods.map((mood) => (
         <div key={mood} className="flex flex-col items-center gap-1.5">
-          <BotAvatar color="#4FC382" size={48} mood={mood} still />
+          <BotAvatar color="#5EC8FF" size={48} mood={mood} still />
           <span className="text-muted text-xs">{mood}</span>
         </div>
       ))}
@@ -42,7 +42,7 @@ export function Sizes() {
   return (
     <div className="flex items-end gap-4 p-4">
       {[20, 28, 40, 64].map((size) => (
-        <BotAvatar key={size} color="#6EA6FF" size={size} />
+        <BotAvatar key={size} color="#A48BFF" size={size} />
       ))}
     </div>
   );
diff --git a/.design-sync/previews/BotRun.tsx b/.design-sync/previews/BotRun.tsx
new file mode 100644
index 00000000..cd3d10e3
--- /dev/null
+++ b/.design-sync/previews/BotRun.tsx
@@ -0,0 +1,78 @@
+import { BotloftProvider, BotRun, chat, makeBot, makeCrew, setLocaleChoice } from "@botloft/ui";
+
+// The app follows the browser's language; the cards are in English.
+setLocaleChoice("en");
+
+const crew = makeCrew({ name: "Research" });
+const chief = makeBot({ crew, name: "Chief", chief: true, state: "idle" });
+const scout = makeBot({ crew, name: "Scout", state: "busy" });
+const writer = makeBot({ crew, name: "Writer", state: "needs_approval" });
+
+export function ReplyWithTools() {
+  const items = [
+    chat.tool(scout, { name: "WebSearch", summary: "on-device AI news this week" }, 3),
+    chat.tool(scout, { name: "WebFetch", summary: "https://example.com/llm-on-phones" }, 3),
+    chat.tool(scout, { name: "Write", summary: "sources.md", file: "C:\\Users\\owner\\Botloft\\research\\shared\\sources.md" }, 2),
+    chat.reply(
+      scout,
+      "Found **6 sources** this week. The best three are in `sources.md`:\n\n1. A 3B model running fully on a phone\n2. New NPU benchmarks\n3. A survey of on-device RAG\n\nI sent them to @writer.",
+      2,
+    ),
+    chat.turn(scout, 48, 2),
+  ];
+  return (
+    <BotloftProvider crews={[crew]} bots={[chief, scout, writer]}>
+      <ul className="bg-canvas p-4" style={{ maxWidth: 720 }}>
+        <BotRun items={items} bot={scout} />
+      </ul>
+    </BotloftProvider>
+  );
+}
+
+export function AsksForASite() {
+  const items = [
+    chat.reply(writer, "To check the benchmark numbers I need the paper itself.", 0),
+    chat.askSite(writer, "https://arxiv.org/abs/2609.01234"),
+  ];
+  return (
+    <BotloftProvider crews={[crew]} bots={[chief, scout, writer]}>
+      <ul className="bg-canvas p-4" style={{ maxWidth: 720 }}>
+        <BotRun items={items} bot={writer} live={{ draft: "", working: false }} />
+      </ul>
+    </BotloftProvider>
+  );
+}
+
+export function ChiefSuggestsABot() {
+  const items = [
+    chat.reply(chief, "For a weekly summary the crew needs someone to check facts before it goes out.", 1),
+    chat.suggestBot(chief, {
+      name: "Editor",
+      role: "Checks facts and tone before the summary goes out.",
+      model: "sonnet",
+      instructions: "Read Writer's draft every Friday morning. Check each number against its source.",
+      reason: "Summaries go out without a second look today.",
+    }),
+  ];
+  return (
+    <BotloftProvider crews={[crew]} bots={[chief, scout, writer]}>
+      <ul className="bg-canvas p-4" style={{ maxWidth: 720 }}>
+        <BotRun items={items} bot={chief} live={{ draft: "", working: false }} />
+      </ul>
+    </BotloftProvider>
+  );
+}
+
+export function Writing() {
+  return (
+    <BotloftProvider crews={[crew]} bots={[chief, scout, writer]}>
+      <ul className="bg-canvas p-4" style={{ maxWidth: 720 }}>
+        <BotRun
+          items={[chat.tool(scout, { name: "WebSearch", summary: "NPU benchmarks 2026", status: "running" })]}
+          bot={scout}
+          live={{ draft: "Two of the new chips run a 3B model at more than", working: true }}
+        />
+      </ul>
+    </BotloftProvider>
+  );
+}
diff --git a/.design-sync/previews/BotloftProvider.tsx b/.design-sync/previews/BotloftProvider.tsx
new file mode 100644
index 00000000..39294645
--- /dev/null
+++ b/.design-sync/previews/BotloftProvider.tsx
@@ -0,0 +1,64 @@
+import {
+  BotloftProvider,
+  BotRun,
+  BotStateBadge,
+  chat,
+  InboundRow,
+  makeBot,
+  makeCrew,
+  makeMessage,
+  setLocaleChoice,
+  Sidebar,
+} from "@botloft/ui";
+import { useState } from "react";
+
+// The app follows the browser's language; the cards are in English.
+setLocaleChoice("en");
+
+const crew = makeCrew({ name: "Research" });
+const chief = makeBot({ crew, name: "Chief", chief: true, state: "idle" });
+const scout = makeBot({
+  crew,
+  name: "Scout",
+  state: "needs_approval",
+  activity: { kind: "approval", text: "arxiv.org", tool: "mcp__botloft__browser", minutesAgo: 0 },
+});
+const writer = makeBot({ crew, name: "Writer", state: "idle" });
+const site = chat.askSite(scout, "https://arxiv.org/abs/2609.01234");
+
+// The app's layout, put together: sidebar on the left, the open bot's chat
+// on the right. Allow on the card moves Scout back to work.
+export function AppScreen() {
+  const [allowed, setAllowed] = useState(false);
+  const scoutNow = allowed ? { ...scout, state: "busy" as const } : scout;
+  const card = allowed ? { ...site, body: { ...site.body, status: "allowed" as const } } : site;
+  return (
+    <BotloftProvider
+      crews={[crew]}
+      bots={[chief, scoutNow, writer]}
+      selectedBotId={scout.id}
+      onAnswer={(answer) => setAllowed(answer.allow)}
+    >
+      <div className="flex border border-line bg-canvas" style={{ height: 520 }}>
+        <Sidebar />
+        <main className="flex min-w-0 flex-1 flex-col">
+          <header className="flex h-12 items-center gap-3 border-line border-b px-5">
+            <span className="font-semibold">Scout</span>
+            <BotStateBadge bot={scoutNow} compact />
+          </header>
+          <ul className="flex flex-col gap-5 overflow-y-auto p-5">
+            <InboundRow
+              bot={scout}
+              message={makeMessage({ from: chief, to: scout, kind: "task", body: "Find this week's best sources on on-device AI.", minutesAgo: 6 })}
+            />
+            <BotRun
+              items={[chat.tool(scout, { name: "WebSearch", summary: "on-device AI news this week" }, 4), chat.reply(scout, "One paper looks key. I need to open it.", 1), card]}
+              bot={scoutNow}
+              live={{ draft: "", working: allowed }}
+            />
+          </ul>
+        </main>
+      </div>
+    </BotloftProvider>
+  );
+}
diff --git a/.design-sync/previews/CrewBots.tsx b/.design-sync/previews/CrewBots.tsx
new file mode 100644
index 00000000..b74aac88
--- /dev/null
+++ b/.design-sync/previews/CrewBots.tsx
@@ -0,0 +1,43 @@
+import { BotloftProvider, CrewBots, makeBot, makeCrew, setLocaleChoice } from "@botloft/ui";
+
+// The app follows the browser's language; the cards are in English.
+setLocaleChoice("en");
+
+const crew = makeCrew({ name: "Research" });
+const bots = [
+  makeBot({ crew, name: "Chief", chief: true, state: "idle", role: "Plans the work and keeps the crew on track." }),
+  makeBot({ crew, name: "Scout", state: "busy", role: "Finds sources on on-device AI and passes the best ones on." }),
+  makeBot({ crew, name: "Writer", state: "needs_approval", role: "Turns Scout's sources into the Friday summary." }),
+  makeBot({ crew, name: "Editor", state: "offline", paused: true, role: "Checks facts and tone before it goes out." }),
+];
+
+export function ResearchCrew() {
+  return (
+    <BotloftProvider crews={[crew]} bots={bots}>
+      <div className="bg-canvas p-4">
+        <CrewBots crew={crew} bots={bots} onNewBot={() => {}} />
+      </div>
+    </BotloftProvider>
+  );
+}
+
+export function DarkTheme() {
+  return (
+    <BotloftProvider crews={[crew]} bots={bots}>
+      <div data-theme="dark" className="bg-canvas p-4 text-ink">
+        <CrewBots crew={crew} bots={bots} onNewBot={() => {}} />
+      </div>
+    </BotloftProvider>
+  );
+}
+
+export function Empty() {
+  const fresh = makeCrew({ name: "Launch" });
+  return (
+    <BotloftProvider crews={[fresh]}>
+      <div className="bg-canvas p-4">
+        <CrewBots crew={fresh} bots={[]} onNewBot={() => {}} />
+      </div>
+    </BotloftProvider>
+  );
+}
diff --git a/.design-sync/previews/InboundRow.tsx b/.design-sync/previews/InboundRow.tsx
new file mode 100644
index 00000000..950b0bf9
--- /dev/null
+++ b/.design-sync/previews/InboundRow.tsx
@@ -0,0 +1,64 @@
+import { BotloftProvider, InboundRow, makeBot, makeCrew, makeMessage, setLocaleChoice } from "@botloft/ui";
+
+// The app follows the browser's language; the cards are in English.
+setLocaleChoice("en");
+
+const crew = makeCrew({ name: "Research" });
+const chief = makeBot({ crew, name: "Chief", chief: true });
+const scout = makeBot({ crew, name: "Scout" });
+const writer = makeBot({ crew, name: "Writer" });
+
+export function FromAnotherBot() {
+  return (
+    <BotloftProvider crews={[crew]} bots={[chief, scout, writer]}>
+      <ul className="flex flex-col gap-4 bg-canvas p-4" style={{ maxWidth: 720 }}>
+        <InboundRow
+          bot={writer}
+          message={makeMessage({
+            from: scout,
+            to: writer,
+            kind: "task",
+            body: "Three sources for Friday's summary are in sources.md. The NPU benchmarks are the strongest.",
+            minutesAgo: 2,
+          })}
+        />
+      </ul>
+    </BotloftProvider>
+  );
+}
+
+export function FromYou() {
+  return (
+    <BotloftProvider crews={[crew]} bots={[chief, scout, writer]}>
+      <ul className="flex flex-col gap-4 bg-canvas p-4" style={{ maxWidth: 720 }}>
+        <InboundRow
+          bot={chief}
+          message={makeMessage({
+            from: "owner",
+            to: chief,
+            body: "Follow what's new in on-device AI and send me a summary on Fridays.",
+            minutesAgo: 5,
+          })}
+        />
+      </ul>
+    </BotloftProvider>
+  );
+}
+
+export function FromBotloft() {
+  return (
+    <BotloftProvider crews={[crew]} bots={[chief, scout, writer]}>
+      <ul className="flex flex-col gap-4 bg-canvas p-4" style={{ maxWidth: 720 }}>
+        <InboundRow
+          bot={scout}
+          message={makeMessage({
+            from: "system",
+            to: scout,
+            kind: "system",
+            body: "Your usage limit resets at 4:10 PM. Scout continues on its own then.",
+          })}
+        />
+      </ul>
+    </BotloftProvider>
+  );
+}
diff --git a/.design-sync/previews/Menu.tsx b/.design-sync/previews/Menu.tsx
index bee1c7d0..a1bc4b18 100644
--- a/.design-sync/previews/Menu.tsx
+++ b/.design-sync/previews/Menu.tsx
@@ -8,7 +8,7 @@ const noop = () => {};
 export function BotMenu() {
   return (
     <div className="flex items-center gap-2 p-4">
-      <BotAvatar color="#4FC382" size={28} />
+      <BotAvatar color="#5EC8FF" size={28} />
       <span className="font-semibold text-ink text-sm">Scout</span>
       <Menu
         label="More for Scout"
diff --git a/.design-sync/previews/SidePanel.tsx b/.design-sync/previews/SidePanel.tsx
index 43127236..a337aaf8 100644
--- a/.design-sync/previews/SidePanel.tsx
+++ b/.design-sync/previews/SidePanel.tsx
@@ -9,7 +9,7 @@ export function FilesBesideChat() {
     <div className="flex w-full border border-line bg-canvas" style={{ height: 360 }}>
       <main className="flex min-w-0 flex-1 flex-col gap-3 p-4">
         <div className="flex items-center gap-2">
-          <BotAvatar color="#6EA6FF" size={28} />
+          <BotAvatar color="#A48BFF" size={28} />
           <span className="font-semibold text-ink text-sm">Writer</span>
         </div>
         <p className="max-w-sm rounded-xl bg-panel px-3 py-2 text-ink text-sm">
diff --git a/.design-sync/previews/Sidebar.tsx b/.design-sync/previews/Sidebar.tsx
new file mode 100644
index 00000000..7a4a057c
--- /dev/null
+++ b/.design-sync/previews/Sidebar.tsx
@@ -0,0 +1,46 @@
+import { BotloftProvider, makeBot, makeCrew, setLocaleChoice, Sidebar } from "@botloft/ui";
+
+// The app follows the browser's language; the cards are in English.
+setLocaleChoice("en");
+
+const research = makeCrew({ name: "Research" });
+const launch = makeCrew({ name: "Launch" });
+const bots = [
+  makeBot({
+    crew: research,
+    name: "Chief",
+    chief: true,
+    state: "idle",
+    activity: { kind: "reply", text: "Scout and Writer are on it. Summary on Friday.", minutesAgo: 12 },
+  }),
+  makeBot({
+    crew: research,
+    name: "Scout",
+    state: "busy",
+    activity: { kind: "tool", text: "on-device AI benchmarks 2026", tool: "WebSearch", minutesAgo: 1 },
+  }),
+  makeBot({
+    crew: research,
+    name: "Writer",
+    state: "needs_approval",
+    activity: { kind: "approval", text: "arxiv.org", tool: "mcp__botloft__browser", minutesAgo: 0 },
+  }),
+  makeBot({
+    crew: launch,
+    name: "Designer",
+    chief: true,
+    state: "idle",
+    activity: { kind: "reply", text: "The landing page is ready for a look.", minutesAgo: 40 },
+    repliedMinutesAgo: 40,
+  }),
+];
+
+export function TwoCrews() {
+  return (
+    <BotloftProvider crews={[research, launch]} bots={bots} selectedBotId={bots[1]?.id}>
+      <div className="flex bg-canvas" style={{ height: 600 }}>
+        <Sidebar />
+      </div>
+    </BotloftProvider>
+  );
+}