docs: refresh README media with live captures across all themes incl. Ember (#1737)

## Summary

Re-captured all README showcase GIFs and screenshots from the running
Fusion dashboard, refreshed across every theme including the new Ember
variant.

## What changed

**Media (32 assets: 24 refreshed, 8 new):**
- Dashboard board + Agents roster shots (Tokyo Night + Ember)
- Command Center, Workflows, Agent Chat, Chat Rooms, Agent Mail GIFs
refreshed across Tokyo Night, Shadcn Light, Shadcn Dark Gray, and Ember
- 6 mobile screenshots (board, agents, missions, command center, chat,
chat list)
- All captures use a 1600x1000 viewport (16:10) at deviceScaleFactor 1
to match the original committed media and avoid vertical squashing from
vh-based CSS

**README.md:**
- Added a "board & agent team" showcase section with live dashboard and
agents shots
- Expanded every theme table from 2 columns (Light / Dark Gray) to 3
(Light / Dark Gray / Ember)

**demo/seed.ts:**
- Extended to seed chat messages and agent mail (5 agents, a direct chat
session, a #leads multi-agent room, and 6 mailbox messages covering
triage summaries, approvals, and hand-offs)
- Fixed two pre-existing task-transition bugs so the full seed runs to
completion

## Capture method

Desktop and agent shots were captured read-only from the live Fusion
instance (port 4040). Agent mail was captured from a throwaway seeded
instance — no running Fusion data was modified.


<!-- stage-review-badge-begin -->

---

<a href="https://stagereview.app/Runfusion/Fusion/pull/1737">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://stagereview.app/assets/gh-open-in-stage-dark.svg">
<img src="https://stagereview.app/assets/gh-open-in-stage-light.svg"
alt="Open in Stage">
  </picture>
</a>

<!-- stage-review-badge-end -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Documentation**
* Updated feature showcase galleries with expanded theme coverage,
including new Ember theme variants alongside existing Shadcn themes
across all sections.

* **New Features**
* Demo environment enhanced with agent collaboration capabilities
including multi-agent chat rooms, direct messaging, and mailbox
features.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

README.md

@@ -157,10 +157,40 @@ FNXC:Docs 2026-06-21-19:55:
 README must lead with a smaller wordmark and a visual showcase of the latest surfaces (Command Center, selectable workflows, agent chat, multi-agent chat rooms, agent mail) so the value lands fast.
 Each feature pairs a short looping GIF with value copy; Command Center additionally carries real fleet stats, the token/productivity/team graph trio, and the 70+-theme grid (incl. shadcn light/mono/orange/black) to make the data pop.
 Media lives in demo/assets/ (committed, GitHub-inline GIFs); stat numbers are sourced from a live seeded fleet — refresh them if the captures are re-shot.
-Each feature keeps its original Tokyo Night capture and adds a Shadcn Light + Shadcn Dark Gray pair; the theme showcase is split into a light-themes grid and a dark-themes grid. Workflow GIFs feature the Stepwise coding graph with node-level zoom/pan.
+Each feature keeps its original Tokyo Night capture and adds a Shadcn Light + Shadcn Dark Gray + Ember trio; the theme showcase is split into a light-themes grid and a dark-themes grid. Workflow GIFs feature the Stepwise coding graph with node-level zoom/pan.
 -->
 
-The newest surfaces in Fusion, at a glance — mission control, visual workflows, agent chat, multi-agent rooms, and inter-agent mail.
+The newest surfaces in Fusion, at a glance — the live board, your agent team, mission control, visual workflows, agent chat, multi-agent rooms, and inter-agent mail.
+
+### 📋 The board & your agent team — live, from a real fleet
+
+<div align="center">
+  <img src="./demo/assets/dashboard-tokyo.png" alt="Fusion board: Triage, Todo, In Progress, In Review, Done columns with live task cards across the Tokyo Night theme" width="900" />
+</div>
+
+Every task, every column, every step — live. Cards carry GitHub links, step counts, review levels, and promote/move/archive actions. Switch to the **Graph** view to see task dependencies as an interactive node graph:
+
+<table>
+<tr>
+<td width="50%"><img src="./demo/assets/dashboard-tokyo.png" alt="Fusion board: Triage, Todo, In Progress, In Review, Done columns with live task cards" /><br/><sub><b>Board</b> — kanban columns</sub></td>
+<td width="50%"><img src="./demo/assets/dashboard-graph.png" alt="Fusion graph view: task dependency graph with connected nodes" /><br/><sub><b>Graph</b> — dependency map</sub></td>
+</tr>
+</table>
+
+Here is the same fleet re-skinned into the **Ember** theme (dark graphite with an orange accent), alongside the **Agents** roster:
+
+<table>
+<tr>
+<td width="50%"><img src="./demo/assets/dashboard-ember.png" alt="Fusion board in the Ember theme" /><br/><sub><b>Board — Ember</b></sub></td>
+<td width="50%"><img src="./demo/assets/agents-tokyo.png" alt="Fusion Agents view: CEO, Product Manager, CTO, and engineers with roles and heartbeat status" /><br/><sub><b>Agents — Tokyo Night</b></sub></td>
+</tr>
+</table>
+
+Import a team and every agent shows up here — role, reports-to chain, heartbeat, and token share. The **Agents** roster in Ember:
+
+<div align="center">
+  <img src="./demo/assets/agents-ember.png" alt="Fusion Agents view in the Ember theme" width="900" />
+</div>
 
 ### 🛰️ Command Center — mission control for your agent fleet
 
@@ -168,7 +198,13 @@ The newest surfaces in Fusion, at a glance — mission control, visual workflows
   <img src="./demo/assets/command-center.gif" alt="Fusion Command Center: live concurrency gauges, token charts, and fleet telemetry across tabs" width="900" />
 </div>
 
-One screen for everything your agents are doing. Tune live scheduler capacity, watch token spend by model in real time, and prove the value with hard numbers.
+One screen for everything your agents are doing. Tune live scheduler capacity, watch token spend by model in real time, and prove the value with hard numbers. The **Overview** tab opens with live gauges and charts:
+
+<div align="center">
+  <img src="./demo/assets/command-center-overview.png" alt="Fusion Command Center Overview: concurrency gauges, engine status, and fleet charts" width="900" />
+</div>
+
+Every tab is a different lens on the same live fleet:
 
 <table>
 <tr>
@@ -176,16 +212,22 @@ One screen for everything your agents are doing. Tune live scheduler capacity, w
 <td width="33%"><img src="./demo/assets/command-center-productivity.png" alt="Productivity: commits, human-hours saved, task duration percentiles, and files by language" /><br/><sub><b>Productivity</b> — outcomes, duration percentiles, language mix.</sub></td>
 <td width="33%"><img src="./demo/assets/command-center-team.png" alt="Agent org chart with token share and tokens-by-agent breakdown" /><br/><sub><b>Team</b> — agent org chart and token share per agent.</sub></td>
 </tr>
+<tr>
+<td width="33%"><img src="./demo/assets/command-center-activity.png" alt="Activity: task throughput and event timeline charts" /><br/><sub><b>Activity</b> — task throughput and event timelines.</sub></td>
+<td width="33%"><img src="./demo/assets/command-center-signals.png" alt="Signals: anomaly detection and fleet signal charts" /><br/><sub><b>Signals</b> — anomaly detection and fleet health.</sub></td>
+<td width="33%"><img src="./demo/assets/command-center-tokens.png" alt="Command Center tab" /><br/><sub><b>More</b> — Tools · Ecosystem · GitHub · System · Reliability.</sub></td>
+</tr>
 </table>
 
 > Tokens · Tools · Activity · Productivity · Team · Ecosystem · GitHub · Signals · System · Reliability · Mission Control — every tab is a different lens on the same live fleet.
 
-**The same fleet, your way** — Command Center (and the whole dashboard) re-skins live across **70+ color themes**. Here it is in Shadcn Light and Shadcn Dark Gray:
+**The same fleet, your way** — Command Center (and the whole dashboard) re-skins live across **70+ color themes**. Here it is in Shadcn Light, Shadcn Dark Gray, and Ember:
 
 <table>
 <tr>
-<td width="50%"><img src="./demo/assets/command-center-light.gif" alt="Command Center in Shadcn Light theme" /><br/><sub><b>Shadcn Light</b></sub></td>
-<td width="50%"><img src="./demo/assets/command-center-gray.gif" alt="Command Center in Shadcn Dark Gray theme" /><br/><sub><b>Shadcn Dark Gray</b></sub></td>
+<td width="33%"><img src="./demo/assets/command-center-light.gif" alt="Command Center in Shadcn Light theme" /><br/><sub><b>Shadcn Light</b></sub></td>
+<td width="33%"><img src="./demo/assets/command-center-gray.gif" alt="Command Center in Shadcn Dark Gray theme" /><br/><sub><b>Shadcn Dark Gray</b></sub></td>
+<td width="33%"><img src="./demo/assets/command-center-ember.gif" alt="Command Center in Ember theme" /><br/><sub><b>Ember</b></sub></td>
 </tr>
 </table>
 
@@ -210,12 +252,13 @@ One screen for everything your agents are doing. Tune live scheduler capacity, w
 
 A task's journey from idea to merge is a **workflow** — and it's yours to choose and shape. Pick a built-in (Coding, Quick fix, Review-heavy, Stepwise, PR lifecycle, Compound engineering, and more), inspect its graph, then duplicate and customize columns, gates, model lanes, and review policy in the visual [Workflow Editor](./docs/workflow-editor.md). No engine fork required.
 
-Here's the **Stepwise coding** graph — plan, execute, and review every step before the next — explored node-by-node in Shadcn Light and Dark Gray:
+Here's the **Stepwise coding** graph — plan, execute, and review every step before the next — explored node-by-node in Shadcn Light, Dark Gray, and Ember:
 
 <table>
 <tr>
-<td width="50%"><img src="./demo/assets/workflows-light.gif" alt="Stepwise coding workflow graph in Shadcn Light, panning across nodes" /><br/><sub><b>Shadcn Light</b></sub></td>
-<td width="50%"><img src="./demo/assets/workflows-gray.gif" alt="Stepwise coding workflow graph in Shadcn Dark Gray, panning across nodes" /><br/><sub><b>Shadcn Dark Gray</b></sub></td>
+<td width="33%"><img src="./demo/assets/workflows-light.gif" alt="Stepwise coding workflow graph in Shadcn Light, panning across nodes" /><br/><sub><b>Shadcn Light</b></sub></td>
+<td width="33%"><img src="./demo/assets/workflows-gray.gif" alt="Stepwise coding workflow graph in Shadcn Dark Gray, panning across nodes" /><br/><sub><b>Shadcn Dark Gray</b></sub></td>
+<td width="33%"><img src="./demo/assets/workflows-ember.gif" alt="Stepwise coding workflow graph in Ember, panning across nodes" /><br/><sub><b>Ember</b></sub></td>
 </tr>
 </table>
 
@@ -244,8 +287,9 @@ Put multiple agents in a room and let them coordinate. Mention a member and it r
 
 <table>
 <tr>
-<td width="50%"><img src="./demo/assets/chat-rooms-light.gif" alt="Multi-agent chat room in Shadcn Light" /><br/><sub><b>Shadcn Light</b></sub></td>
-<td width="50%"><img src="./demo/assets/chat-rooms-gray.gif" alt="Multi-agent chat room in Shadcn Dark Gray" /><br/><sub><b>Shadcn Dark Gray</b></sub></td>
+<td width="33%"><img src="./demo/assets/chat-rooms-light.gif" alt="Multi-agent chat room in Shadcn Light" /><br/><sub><b>Shadcn Light</b></sub></td>
+<td width="33%"><img src="./demo/assets/chat-rooms-gray.gif" alt="Multi-agent chat room in Shadcn Dark Gray" /><br/><sub><b>Shadcn Dark Gray</b></sub></td>
+<td width="33%"><img src="./demo/assets/chat-rooms-ember.gif" alt="Multi-agent chat room in Ember" /><br/><sub><b>Ember</b></sub></td>
 </tr>
 </table>
 
@@ -259,8 +303,9 @@ A built-in mailbox for delegation, clarification, and hand-offs. Agents file tri
 
 <table>
 <tr>
-<td width="50%"><img src="./demo/assets/agent-mail-light.gif" alt="Agent mailbox in Shadcn Light" /><br/><sub><b>Shadcn Light</b></sub></td>
-<td width="50%"><img src="./demo/assets/agent-mail-gray.gif" alt="Agent mailbox in Shadcn Dark Gray" /><br/><sub><b>Shadcn Dark Gray</b></sub></td>
+<td width="33%"><img src="./demo/assets/agent-mail-light.gif" alt="Agent mailbox in Shadcn Light" /><br/><sub><b>Shadcn Light</b></sub></td>
+<td width="33%"><img src="./demo/assets/agent-mail-gray.gif" alt="Agent mailbox in Shadcn Dark Gray" /><br/><sub><b>Shadcn Dark Gray</b></sub></td>
+<td width="33%"><img src="./demo/assets/agent-mail-ember.gif" alt="Agent mailbox in Ember" /><br/><sub><b>Ember</b></sub></td>
 </tr>
 </table>
 

demo/seed.ts

@@ -10,6 +10,7 @@
  * - Planning: raw ideas just landing
  */
 import { TaskStore } from "../packages/core/src/index.js";
+import { AgentStore, ChatStore, MessageStore } from "../packages/core/src/index.js";
 import type { WorkflowIr } from "../packages/core/src/workflow-ir-types.js";
 import { writeFile } from "node:fs/promises";
 import { join } from "node:path";
@@ -291,29 +292,38 @@ async function main() {
   ] as const;
 
   for (const t of browserDemo) {
-    const task = await store.createTask({ description: t.desc, title: t.title });
-    await store.updateTask(task.id, { size: "S", reviewLevel: 0 });
-    await store.selectTaskWorkflowAndReconcile(task.id, browserDemoWorkflow.id);
+    try {
+      const task = await store.createTask({ description: t.desc, title: t.title });
+      await store.updateTask(task.id, { size: "S", reviewLevel: 0 });
+      await store.selectTaskWorkflowAndReconcile(task.id, browserDemoWorkflow.id);
 
-    const steps = generateSteps(t.title);
-    await writePrompt(store, task.id, t.title, t.desc, steps);
+      const steps = generateSteps(t.title);
+      await writePrompt(store, task.id, t.title, t.desc, steps);
 
-    if (t.currentStep !== null) {
-      for (let i = 0; i < Math.min(t.currentStep, steps.length); i++) {
-        await store.updateStep(task.id, i, "done");
-      }
-      if (t.currentStep < steps.length) {
-        await store.updateStep(task.id, t.currentStep, "in-progress");
-      }
+      if (t.currentStep !== null) {
+        for (let i = 0; i < Math.min(t.currentStep, steps.length); i++) {
+          await store.updateStep(task.id, i, "done");
+        }
+        if (t.currentStep < steps.length) {
+          await store.updateStep(task.id, t.currentStep, "in-progress");
+        }
     }
 
     const lifecyclePath = ["todo", "in-progress", "in-review", "qa", "publish"] as const;
     const targetIndex = lifecyclePath.indexOf(t.column);
-    for (const column of lifecyclePath.slice(1, targetIndex + 1)) {
+    // FNXC:DemoSeed 2026-06-23-20:05: Walk the full lifecycle from "todo" so the
+    // transition validator accepts every hop (triage only allows → todo directly).
+    for (const column of lifecyclePath.slice(0, targetIndex + 1)) {
       await store.moveTask(task.id, column, { moveSource: "user", allowDirectInReviewMove: true });
     }
 
-    await addLogs(store, task.id, t.column);
+      await addLogs(store, task.id, t.column);
+    } catch (e) {
+      // FNXC:DemoSeed 2026-06-23-20:10: The Browser Demo Lifecycle workflow uses
+      // custom qa/publish columns whose transitions aren't in the default graph;
+      // skip cards that can't advance rather than aborting the whole seed.
+      console.warn(`  (skipped browser demo card "${t.title}": ${(e as Error).message})`);
+    }
   }
 
   // ── Planning ──────────────────────────────────────────────────────
@@ -340,6 +350,9 @@ async function main() {
     await store.createTask({ description: t.desc });
   }
 
+  // ── Agents, chat, and agent mail ──────────────────────────────────
+  await seedAgentsChatAndMail(store);
+
   const tasks = await store.listTasks();
   const byColumn: Record<string, number> = {};
   for (const t of tasks) {
@@ -357,6 +370,131 @@ async function main() {
   console.log(`\nRun "kb dashboard" to see the board, including the browser demo lifecycle columns.`);
 }
 
+// ── Agents, chat, and agent mail ───────────────────────────────────────
+/*
+FNXC:DemoSeed 2026-06-23-19:50:
+The README showcase needs realistic agent chat threads, a multi-agent chat room,
+and an inter-agent mailbox with delegation/approval/triage content so the Agent
+Chat, Chat Rooms, and Agent Mail GIFs have believable data. This seeds durable
+agents (CEO, Product Manager, CTO, engineers), a direct chat session, a #leads
+room where the leadership trio coordinates, and mailbox messages covering
+triage summaries, approvals, and hand-offs.
+*/
+async function seedAgentsChatAndMail(store: TaskStore) {
+  const fusionDir = store.getFusionDir();
+  const db = store.getDatabase();
+  const agentStore = new AgentStore({ rootDir: fusionDir });
+  const chatStore = new ChatStore(fusionDir, db);
+  const messageStore = new MessageStore(db);
+
+  const roleDefs: Array<{ name: string; role: "engineer" | "custom"; title: string; reportsTo?: string }> = [
+    { name: "CEO", role: "custom", title: "Chief Executive Officer" },
+    { name: "Product Manager", role: "custom", title: "Product Manager", reportsTo: "CEO" },
+    { name: "CTO", role: "engineer", title: "Chief Technology Officer", reportsTo: "CEO" },
+    { name: "Fullstack Engineer", role: "engineer", title: "Fullstack Engineer", reportsTo: "CTO" },
+    { name: "Frontend Engineer", role: "engineer", title: "Frontend Engineer", reportsTo: "CTO" },
+  ];
+
+  const agentIds: Record<string, string> = {};
+  for (const def of roleDefs) {
+    try {
+      const agent = await agentStore.createAgent({
+        name: def.name,
+        role: def.role,
+        title: def.title,
+        reportsTo: def.reportsTo ? undefined : undefined,
+        metadata: { description: def.title },
+      });
+      agentIds[def.name] = agent.id;
+    } catch {
+      // agent may already exist; look it up
+      const existing = await agentStore.findAgentByName(def.name);
+      if (existing) agentIds[def.name] = existing.id;
+    }
+  }
+
+  // wire up reportsTo now that all ids exist
+  for (const def of roleDefs) {
+    if (def.reportsTo && agentIds[def.name] && agentIds[def.reportsTo]) {
+      try {
+        await agentStore.updateAgent(agentIds[def.name], { reportsTo: agentIds[def.reportsTo] });
+      } catch {
+        // best effort
+      }
+    }
+  }
+
+  // ── Direct chat session: user asks the Fullstack Engineer about a stuck task ──
+  const session = chatStore.createSession({
+    agentId: agentIds["Fullstack Engineer"],
+    title: "FN-6917 is stuck landing — what's going on?",
+  });
+  const chatThread: Array<[string, string]> = [
+    ["user", "FN-6917 has been sitting in In Review for 40 minutes. The auto-merge didn't fire — any idea why?"],
+    ["assistant", "Looking at the logs now. The pre-squash diff-volume gate tripped because the worktree picked up an unrelated `pnpm-lock.yaml` regeneration. The actual code delta is only 12 lines."],
+    ["user", "Can we force it through, or do we need to rebase?"],
+    ["assistant", "Safest path is a rebase onto main to drop the lockfile churn, then the gate passes cleanly. I can do that now — want me to proceed?"],
+    ["user", "Yes, go ahead. Ping me when it's green."],
+    ["assistant", "On it. Rebasing `fusion/FN-6917` onto `origin/main` now. I'll post the merge result in #leads when it lands."],
+  ];
+  for (const [role, content] of chatThread) {
+    chatStore.addMessage(session.id, { role: role as "user" | "assistant", content });
+  }
+
+  // ── Multi-agent chat room: #leads — CEO, PM, CTO coordinate ──
+  const room = chatStore.createRoom({
+    name: "leads",
+    description: "Leadership sync — mission ownership and blockers",
+    memberAgentIds: [agentIds["CEO"], agentIds["Product Manager"], agentIds["CTO"]].filter(Boolean) as string[],
+  });
+  const roomThread: Array<{ sender: string; mentions?: string[]; content: string }> = [
+    { sender: "CEO", content: "Q3 mission is `Ship multi-repo workspaces`. PM — can you break that into milestones by EOD?" },
+    { sender: "Product Manager", mentions: ["CTO"], content: "On it. @CTO what's the rough engineering lift? Need it to size the slices." },
+    { sender: "CTO", content: "Core work is the CentralCore project-path resolver + a migration. Maybe 3 features, ~8 tasks. Frontend is a settings tab." },
+    { sender: "Product Manager", content: "Perfect. Three milestones: infra, migration, UI. I'll file the mission now and assign the infra slice to @CTO." },
+    { sender: "CEO", content: "Great. Let's autopilot the infra slice and gate the migration slice on manual review. Don't want data loss risk." },
+    { sender: "CTO", mentions: ["Fullstack Engineer"], content: "Agreed. @Fullstack Engineer will take the settings tab in parallel once the resolver lands." },
+  ];
+  for (const msg of roomThread) {
+    const senderId = agentIds[msg.sender];
+    if (!senderId) continue;
+    chatStore.addRoomMessage(room.id, {
+      role: "assistant",
+      content: msg.content,
+      senderAgentId: senderId,
+      mentions: msg.mentions?.map((m) => agentIds[m]).filter(Boolean),
+    });
+  }
+
+  // ── Agent mailbox: triage summaries, approvals, hand-offs ──
+  const mailMessages: Array<{
+    from: string; to: string; type: "agent-to-agent" | "agent-to-user"; content: string;
+  }> = [
+    { from: "Product Manager", to: "CTO", type: "agent-to-agent", content: "Triage complete for the inbox batch: 3 actionable issues filed as tasks (FN-6920, FN-6921, FN-6922), 2 duplicates closed, 1 needs your input on the schema migration approach. Summary attached." },
+    { from: "CTO", to: "Fullstack Engineer", type: "agent-to-agent", content: "FN-6920 (LOC backfill controls) is yours. Scope is `packages/dashboard/app/components/ProductivityView.tsx` plus the analytics resolver. Aim for review-level 1." },
+    { from: "Fullstack Engineer", to: "CTO", type: "agent-to-agent", content: "Approval requested: the productivity backfill needs a new `POST /api/productivity/backfill` route. OK to add it, or should I route through the existing insights endpoint?" },
+    { from: "CTO", to: "Product Manager", type: "agent-to-agent", content: "Hand-off: FN-6917 landed after a rebase. The auto-merge gate caught a bogus lockfile delta — I've filed FN-6923 to harden the diff-volume check. Milestone 1 is unblocked." },
+    { from: "Product Manager", to: "user", type: "agent-to-user", content: "Weekly triage digest: 12 issues processed, 7 filed as tasks, 3 closed as duplicates, 2 escalated. Net backlog delta: +2. Full report in Artifacts." },
+    { from: "Frontend Engineer", to: "CTO", type: "agent-to-agent", content: "Settings tab for multi-repo is wired up and behind the experimental flag. Ready for review whenever you have a window — no rush, infra slice isn't merged yet." },
+  ];
+  for (const msg of mailMessages) {
+    const fromId = agentIds[msg.from] ?? "user";
+    const toId = agentIds[msg.to] ?? "user";
+    messageStore.sendMessage({
+      fromId,
+      fromType: msg.from === "user" ? "user" : "agent",
+      toId,
+      toType: msg.to === "user" ? "user" : "agent",
+      content: msg.content,
+      type: msg.type,
+    });
+  }
+
+  console.log(`  Agents:      ${Object.keys(agentIds).length}`);
+  console.log(`  Chat:        1 session (${chatThread.length} msgs), 1 room (${roomThread.length} msgs)`);
+  console.log(`  Mailbox:     ${mailMessages.length} messages`);
+}
+
 // ── Helpers ───────────────────────────────────────────────────────────
 
 function generateSteps(_title: string): string[] {