From b5651dc0daf3161a895dbb6e659b883003250469 Mon Sep 17 00:00:00 2001
From: Phelipe Lorran <112786693+httpsphl@users.noreply.github.com>
Date: Fri, 2 Oct 2026 15:09:19 -0300
Subject: [PATCH] chore(design): app screens in the design system: sidebar,
 crew, chat, requests

Adds Sidebar, CrewBots, BotRun, InboundRow and ApprovalCard to the
claude.ai/design design system, so designs show Botloft's real screens.
They read the app's store and API: BotloftProvider wires the app's own
providers to the fake daemon, and scene.ts builds crews, bots, messages
and chat items in the protocol's shape, with request inputs and
summaries as the daemon makes them. Bot colors now come from
AVATAR_PALETTE. Types are emitted for the whole package.
---
 .design-sync/NOTES.md                     |  25 ++-
 .design-sync/config.json                  |  31 ++-
 .design-sync/conventions.md               |  71 +++++--
 .design-sync/pkg/build.mjs                |  45 ++---
 .design-sync/pkg/index.ts                 |  14 +-
 .design-sync/pkg/provider.tsx             |  81 ++++++++
 .design-sync/pkg/scene.ts                 | 229 ++++++++++++++++++++++
 .design-sync/previews/ApprovalCard.tsx    |  72 +++++++
 .design-sync/previews/BotAvatar.tsx       |  12 +-
 .design-sync/previews/BotRun.tsx          |  78 ++++++++
 .design-sync/previews/BotloftProvider.tsx |  64 ++++++
 .design-sync/previews/CrewBots.tsx        |  43 ++++
 .design-sync/previews/InboundRow.tsx      |  64 ++++++
 .design-sync/previews/Menu.tsx            |   2 +-
 .design-sync/previews/SidePanel.tsx       |   2 +-
 .design-sync/previews/Sidebar.tsx         |  46 +++++
 16 files changed, 818 insertions(+), 61 deletions(-)
 create mode 100644 .design-sync/pkg/provider.tsx
 create mode 100644 .design-sync/pkg/scene.ts
 create mode 100644 .design-sync/previews/ApprovalCard.tsx
 create mode 100644 .design-sync/previews/BotRun.tsx
 create mode 100644 .design-sync/previews/BotloftProvider.tsx
 create mode 100644 .design-sync/previews/CrewBots.tsx
 create mode 100644 .design-sync/previews/InboundRow.tsx
 create mode 100644 .design-sync/previews/Sidebar.tsx

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