From 700dbcd2859b6a341a33221d839e7da21264982b Mon Sep 17 00:00:00 2001
From: Renzo F <45401804+rennf93@users.noreply.github.com>
Date: Sun, 19 Jul 2026 18:59:54 +0200
Subject: [PATCH] =?UTF-8?q?feat(tg):=20Mini=20App=20V5=20=E2=80=94=20brand?=
 =?UTF-8?q?=20typography,=20icon=20depth,=20motion,=20detail=20sheets=20(#?=
 =?UTF-8?q?583)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(tg): Mini App V5 — brand typography, icon depth, motion, detail sheets

Share Tech Mono (the vendored motion-brand face) becomes the cockpit's
display voice via next/font/local scoped to #tg-shell; icon tiles, circle
actions, and avatars get gradient/ring depth; a dependency-free motion
vocabulary lands (spend count-up, tab rise-in, staggered sections,
sparkline draw-in, sheet slide-up with native BackButton dismiss); the
Board tab gains a tap-through task sheet (ACs, open findings, PR link),
Today's fleet opens a full-roster sheet, and Board/Inbox join the
/tg?demo=1 fixtures.

* feat(tg): custom RoboCo icon set + operations ring

The cockpit stops using stock lucide on its hero surfaces: a hand-drawn
duotone icon set (speedometer, seal, bell, kanban, brand-cursor bubble,
rocket, double-check, broom, robot head) covers the tab bar and the Today
ring. The ring itself stops duplicating the tab bar and becomes real
operations: Ship deep-focuses the release proposal in Approvals, Ack all
bulk-acknowledges pending notifications, Sweep runs the stale-branch
cleanup across every git-configured project behind a confirm sheet, and
Fleet opens the roster.

---------

Co-authored-by: Renn F <rennf93@users.noreply.github.com>
---
 .../(tg)/fonts/ShareTechMono-Regular.woff2    | Bin 0 -> 7408 bytes
 panel/src/app/(tg)/layout.tsx                 |  14 +-
 panel/src/app/(tg)/tg/page.tsx                |  25 +-
 panel/src/app/globals.css                     |  83 ++++++
 .../components/tasks/mobile-task-board.tsx    |  47 +++-
 .../components/tg/__tests__/motion.test.tsx   |  59 ++++
 .../tg/__tests__/tg-task-sheet.test.tsx       | 135 +++++++++
 .../tg/__tests__/tg-today-tab.test.tsx        | 126 ++++++++-
 panel/src/components/tg/charts.tsx            |   4 +-
 panel/src/components/tg/motion.tsx            | 105 +++++++
 panel/src/components/tg/tg-approvals-tab.tsx  |  22 +-
 panel/src/components/tg/tg-board-tab.tsx      |  28 +-
 panel/src/components/tg/tg-icons.tsx          | 175 ++++++++++++
 panel/src/components/tg/tg-inbox-tab.tsx      |  20 +-
 panel/src/components/tg/tg-tab-bar.tsx        |  35 ++-
 panel/src/components/tg/tg-task-sheet.tsx     | 151 ++++++++++
 panel/src/components/tg/tg-today-tab.tsx      | 261 +++++++++++++++---
 panel/src/components/tg/ui.tsx                |  40 +--
 panel/src/lib/telegram/demo-data.ts           | 238 +++++++++++++++-
 19 files changed, 1467 insertions(+), 101 deletions(-)
 create mode 100644 panel/src/app/(tg)/fonts/ShareTechMono-Regular.woff2
 create mode 100644 panel/src/components/tg/__tests__/motion.test.tsx
 create mode 100644 panel/src/components/tg/__tests__/tg-task-sheet.test.tsx
 create mode 100644 panel/src/components/tg/motion.tsx
 create mode 100644 panel/src/components/tg/tg-icons.tsx
 create mode 100644 panel/src/components/tg/tg-task-sheet.tsx

diff --git a/panel/src/app/(tg)/fonts/ShareTechMono-Regular.woff2 b/panel/src/app/(tg)/fonts/ShareTechMono-Regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..24081c3ac1bf9e4fcc53c24b4a4934b4bcb94a1d
GIT binary patch
literal 7408
zcmV<M91r7nPew8T0RR91037fD4FCWD08J<W034eD0RR9100000000000000000000
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

literal 0
HcmV?d00001

diff --git a/panel/src/app/(tg)/layout.tsx b/panel/src/app/(tg)/layout.tsx
index 8a5841a1..f746a6e0 100644
--- a/panel/src/app/(tg)/layout.tsx
+++ b/panel/src/app/(tg)/layout.tsx
@@ -1,4 +1,16 @@
 import Script from "next/script";
+import localFont from "next/font/local";
+
+// The brand display face — the same vendored Share Tech Mono the motion/
+// video compositions use for their headline moments. Exposed as a CSS
+// variable on the shell so `.tg-display` (globals.css) can reach it; body
+// text stays the root layout's Inter.
+const shareTechMono = localFont({
+  src: "./fonts/ShareTechMono-Regular.woff2",
+  weight: "400",
+  variable: "--font-share-tech",
+  display: "swap",
+});
 
 /**
  * Slim shell for the Telegram Mini App surface (`/tg`) — no Sidebar/Header/
@@ -26,7 +38,7 @@ export default function TelegramLayout({
   return (
     <div
       id="tg-shell"
-      className="mx-auto flex w-full max-w-[430px] flex-col overflow-hidden bg-background text-foreground sm:border-x"
+      className={`${shareTechMono.variable} mx-auto flex w-full max-w-[430px] flex-col overflow-hidden bg-background text-foreground sm:border-x`}
       style={{ height: "var(--tg-viewport-stable-height, 100dvh)" }}
     >
       <Script
diff --git a/panel/src/app/(tg)/tg/page.tsx b/panel/src/app/(tg)/tg/page.tsx
index 208ab1a6..cf2d0529 100644
--- a/panel/src/app/(tg)/tg/page.tsx
+++ b/panel/src/app/(tg)/tg/page.tsx
@@ -48,6 +48,12 @@ function CenteredMessage({ children }: { children: React.ReactNode }) {
 export default function TelegramMiniAppPage() {
   const [state, setState] = useState<BootstrapState>({ kind: "validating" });
   const [tab, setTab] = useState<TgTab>("today");
+  // Today's Ship action deep-focuses the release proposal in Approvals.
+  const [approvalsFocus, setApprovalsFocus] = useState<"release" | undefined>();
+  const navigate = (next: TgTab, intent?: "release") => {
+    setApprovalsFocus(next === "approvals" ? intent : undefined);
+    setTab(next);
+  };
 
   useEffect(() => {
     let cancelled = false;
@@ -137,13 +143,18 @@ export default function TelegramMiniAppPage() {
 
   return (
     <TgWebAppProvider webApp={state.webApp}>
-      <div className="p-3 pb-20">
-        {tab === "today" && <TgTodayTab onNavigate={setTab} />}
-        {tab === "approvals" && <TgApprovalsTab />}
-        {tab === "inbox" && <TgInboxTab />}
-        {tab === "board" && <TgBoardTab />}
-        {tab === "chat" && <TgChatTab />}
-        <TgTabBar active={tab} onChange={setTab} />
+      <div className="p-3 pb-24">
+        {/* Keyed by tab so every switch replays the rise-in entrance. */}
+        <div key={tab} className="tg-tab-in">
+          {tab === "today" && <TgTodayTab onNavigate={navigate} />}
+          {tab === "approvals" && (
+            <TgApprovalsTab initialFocus={approvalsFocus} />
+          )}
+          {tab === "inbox" && <TgInboxTab />}
+          {tab === "board" && <TgBoardTab />}
+          {tab === "chat" && <TgChatTab />}
+        </div>
+        <TgTabBar active={tab} onChange={navigate} />
       </div>
     </TgWebAppProvider>
   );
diff --git a/panel/src/app/globals.css b/panel/src/app/globals.css
index a49a9744..9f78838a 100644
--- a/panel/src/app/globals.css
+++ b/panel/src/app/globals.css
@@ -154,6 +154,89 @@
   --ring: oklch(0.8 0.13 78);
 }
 
+/* Cockpit brand typography + motion. `.tg-display` is the Share Tech Mono
+   display voice (labels, numerals, wordmark — never body text); the
+   animation classes are the Mini App's only motion vocabulary: rise-in for
+   tab/section entrances, slide-up for bottom sheets, a draw-in for the
+   spend sparkline. All animate transform/opacity only and collapse to
+   instant under prefers-reduced-motion via the global rule below. */
+#tg-shell .tg-display {
+  font-family: var(--font-share-tech), ui-monospace, "SF Mono", monospace;
+}
+#tg-shell .tg-tab-in {
+  animation: tg-rise 0.24s cubic-bezier(0.21, 0.61, 0.35, 1) backwards;
+}
+#tg-shell .tg-stagger > * {
+  animation: tg-rise 0.3s cubic-bezier(0.21, 0.61, 0.35, 1) backwards;
+}
+#tg-shell .tg-stagger > *:nth-child(2) {
+  animation-delay: 40ms;
+}
+#tg-shell .tg-stagger > *:nth-child(3) {
+  animation-delay: 80ms;
+}
+#tg-shell .tg-stagger > *:nth-child(4) {
+  animation-delay: 120ms;
+}
+#tg-shell .tg-stagger > *:nth-child(5) {
+  animation-delay: 160ms;
+}
+#tg-shell .tg-stagger > *:nth-child(n + 6) {
+  animation-delay: 200ms;
+}
+#tg-shell .tg-backdrop {
+  animation: tg-fade 0.2s ease-out backwards;
+}
+#tg-shell .tg-sheet {
+  animation: tg-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0.24, 1) backwards;
+}
+#tg-shell .tg-draw-line {
+  stroke-dasharray: 1;
+  animation: tg-draw 0.8s ease-out 0.1s backwards;
+}
+#tg-shell .tg-cursor {
+  animation: tg-blink 1.1s steps(1) infinite;
+}
+@keyframes tg-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes tg-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes tg-sheet-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes tg-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes tg-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
 /* Collapse/expand and other transform/opacity transitions (animate-in,
    animate-out, transition-transform, ...) become instant for users who
    asked the OS for reduced motion — the content still opens/closes, it
diff --git a/panel/src/components/tasks/mobile-task-board.tsx b/panel/src/components/tasks/mobile-task-board.tsx
index b6d945f2..6bfea541 100644
--- a/panel/src/components/tasks/mobile-task-board.tsx
+++ b/panel/src/components/tasks/mobile-task-board.tsx
@@ -43,9 +43,15 @@ const DEFAULT_OPEN = new Set<TaskStatus>([
   TaskStatus.AWAITING_CEO_APPROVAL,
 ]);
 
-function TaskRow({ task }: { task: Task }) {
-  return (
-    <div className="flex items-center justify-between gap-2 border-t px-3 py-2 first:border-t-0">
+function TaskRow({
+  task,
+  onPress,
+}: {
+  task: Task;
+  onPress?: (task: Task) => void;
+}) {
+  const content = (
+    <>
       <div className="min-w-0">
         <p className="truncate text-sm">{task.title}</p>
         <p className="truncate text-xs text-muted-foreground">
@@ -53,6 +59,22 @@ function TaskRow({ task }: { task: Task }) {
         </p>
       </div>
       <TaskStatusBadge status={task.status} />
+    </>
+  );
+  if (onPress) {
+    return (
+      <button
+        type="button"
+        onClick={() => onPress(task)}
+        className="flex w-full items-center justify-between gap-2 border-t px-3 py-2 text-left transition-colors first:border-t-0 active:bg-muted"
+      >
+        {content}
+      </button>
+    );
+  }
+  return (
+    <div className="flex items-center justify-between gap-2 border-t px-3 py-2 first:border-t-0">
+      {content}
     </div>
   );
 }
@@ -61,10 +83,12 @@ function StatusSection({
   status,
   tasks,
   defaultOpen,
+  onTaskPress,
 }: {
   status: TaskStatus;
   tasks: Task[];
   defaultOpen: boolean;
+  onTaskPress?: (task: Task) => void;
 }) {
   const [open, setOpen] = useState(defaultOpen);
   return (
@@ -87,7 +111,7 @@ function StatusSection({
       </CollapsibleTrigger>
       <CollapsibleContent>
         {tasks.map((t) => (
-          <TaskRow key={t.id} task={t} />
+          <TaskRow key={t.id} task={t} onPress={onTaskPress} />
         ))}
       </CollapsibleContent>
     </Collapsible>
@@ -100,8 +124,18 @@ function StatusSection({
  * drag-and-drop — that's the desktop kanban columns' job; this is a
  * glance-and-tap surface for the /tg Mini App.
  */
-export function MobileTaskBoard() {
-  const { data, isLoading } = useTasks({ limit: 200 });
+export function MobileTaskBoard({
+  tasks: tasksOverride,
+  onTaskPress,
+}: {
+  /** Bypass the live fetch (the /tg demo fixtures). The list query still
+   * mounts — dev-only demo noise, not worth a conditional-hook dance. */
+  tasks?: Task[];
+  onTaskPress?: (task: Task) => void;
+} = {}) {
+  const { data: fetched, isLoading: fetchLoading } = useTasks({ limit: 200 });
+  const data = tasksOverride ?? fetched;
+  const isLoading = tasksOverride ? false : fetchLoading;
 
   const grouped = useMemo(() => {
     const byStatus = new Map<TaskStatus, Task[]>();
@@ -143,6 +177,7 @@ export function MobileTaskBoard() {
           status={status}
           tasks={tasks}
           defaultOpen={DEFAULT_OPEN.has(status)}
+          onTaskPress={onTaskPress}
         />
       ))}
     </div>
diff --git a/panel/src/components/tg/__tests__/motion.test.tsx b/panel/src/components/tg/__tests__/motion.test.tsx
new file mode 100644
index 00000000..9ff22113
--- /dev/null
+++ b/panel/src/components/tg/__tests__/motion.test.tsx
@@ -0,0 +1,59 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { renderHook } from "@testing-library/react";
+import { TgSheet, useCountUp } from "../motion";
+
+describe("useCountUp", () => {
+  it("jumps straight to the target under reduced motion", async () => {
+    const original = window.matchMedia;
+    window.matchMedia = ((query: string) => ({
+      matches: true,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    })) as typeof window.matchMedia;
+    try {
+      const { result } = renderHook(() => useCountUp(42));
+      await waitFor(() => expect(result.current).toBe(42));
+    } finally {
+      window.matchMedia = original;
+    }
+  });
+
+  it("settles on the exact target when animating", async () => {
+    const { result } = renderHook(() => useCountUp(12.34, 50));
+    // Generous timeout: rAF frames starve under parallel test workers.
+    await waitFor(() => expect(result.current).toBe(12.34), { timeout: 4000 });
+  });
+});
+
+describe("TgSheet", () => {
+  it("renders nothing when closed", () => {
+    render(
+      <TgSheet open={false} onClose={vi.fn()} title="Task">
+        <p>body</p>
+      </TgSheet>,
+    );
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("shows title and children when open, closes on backdrop tap", () => {
+    const onClose = vi.fn();
+    render(
+      <TgSheet open onClose={onClose} title="Fleet">
+        <p>sheet body</p>
+      </TgSheet>,
+    );
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Fleet")).toBeInTheDocument();
+    expect(screen.getByText("sheet body")).toBeInTheDocument();
+
+    const [backdrop] = screen.getAllByRole("button", { name: /close/i });
+    fireEvent.click(backdrop);
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/panel/src/components/tg/__tests__/tg-task-sheet.test.tsx b/panel/src/components/tg/__tests__/tg-task-sheet.test.tsx
new file mode 100644
index 00000000..ad2364a3
--- /dev/null
+++ b/panel/src/components/tg/__tests__/tg-task-sheet.test.tsx
@@ -0,0 +1,135 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TgTaskSheet } from "../tg-task-sheet";
+import type { Task } from "@/types";
+import type { TaskFindingsResponse } from "@/lib/api/tasks";
+
+const { findings } = vi.hoisted(() => ({
+  findings: vi.fn<() => { data: TaskFindingsResponse | undefined }>(() => ({
+    data: undefined,
+  })),
+}));
+vi.mock("@/hooks/use-tasks", () => ({
+  useTaskFindings: findings,
+}));
+
+function task(overrides: Partial<Task> = {}): Task {
+  return {
+    id: "t1",
+    title: "Harden the retry queue",
+    description: "Webhook retries with backoff.",
+    acceptance_criteria: ["Retries back off", "DLQ after 5 attempts"],
+    status: "awaiting_ceo_approval",
+    priority: 1,
+    sequence: 0,
+    team: "backend",
+    created_by: "main-pm",
+    assigned_to: "be-dev-1",
+    parent_task_id: null,
+    dependency_ids: [],
+    blocker_ids: [],
+    created_at: "2026-07-18T10:00:00Z",
+    updated_at: "2026-07-19T09:00:00Z",
+    claimed_at: null,
+    started_at: null,
+    completed_at: null,
+    target_date: null,
+    estimated_complexity: "medium",
+    nature: "technical",
+    task_type: "code",
+    project_id: "p1",
+    docs_complete: false,
+    pr_created: true,
+    pm_approvals: {},
+    plan: null,
+    checkpoints: [],
+    progress_updates: [],
+    commits: [],
+    dev_notes: null,
+    qa_notes: null,
+    auditor_notes: null,
+    quick_context: null,
+    self_verified: true,
+    qa_verified: true,
+    revision_count: 2,
+    branch_name: "feature/backend/T1",
+    pr_number: 612,
+    pr_url: "https://example.com/pull/612",
+    ...overrides,
+  } as Task;
+}
+
+describe("TgTaskSheet", () => {
+  it("renders nothing without a task", () => {
+    render(<TgTaskSheet task={null} onClose={vi.fn()} />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("shows title, ACs, bounce chip, and the PR link", () => {
+    render(<TgTaskSheet task={task()} onClose={vi.fn()} />);
+    expect(screen.getByText("Harden the retry queue")).toBeInTheDocument();
+    expect(screen.getByText("Retries back off")).toBeInTheDocument();
+    expect(screen.getByText("DLQ after 5 attempts")).toBeInTheDocument();
+    expect(screen.getByText(/bounced ×2/)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /open pr #612/i })).toHaveAttribute(
+      "href",
+      "https://example.com/pull/612",
+    );
+  });
+
+  it("lists only the open findings", () => {
+    findings.mockReturnValue({
+      data: {
+        findings: [
+          {
+            id: "f1",
+            task_id: "t1",
+            origin: "qa",
+            round: 1,
+            author_slug: "be-qa",
+            file: "roboco/services/queue.py",
+            line: 42,
+            severity: "major",
+            criterion: null,
+            expected: "Backoff is exponential",
+            actual: "Fixed 1s delay",
+            fix: "Use exponential backoff with jitter",
+            evidence: null,
+            status: "open",
+            addressed_by_commit: null,
+            resolution_note: null,
+            created_at: "2026-07-19T08:00:00Z",
+            updated_at: null,
+          },
+          {
+            id: "f2",
+            task_id: "t1",
+            origin: "qa",
+            round: 1,
+            author_slug: "be-qa",
+            file: "roboco/services/dlq.py",
+            line: 7,
+            severity: "minor",
+            criterion: null,
+            expected: "x",
+            actual: "y",
+            fix: null,
+            evidence: null,
+            status: "verified",
+            addressed_by_commit: null,
+            resolution_note: null,
+            created_at: "2026-07-19T08:00:00Z",
+            updated_at: null,
+          },
+        ],
+        summary: [],
+        total: 2,
+        truncated: false,
+      },
+    });
+    render(<TgTaskSheet task={task()} onClose={vi.fn()} />);
+    expect(screen.getByText(/open findings · 1/i)).toBeInTheDocument();
+    expect(screen.getByText("roboco/services/queue.py:42")).toBeInTheDocument();
+    expect(screen.queryByText(/dlq\.py/)).not.toBeInTheDocument();
+  });
+});
diff --git a/panel/src/components/tg/__tests__/tg-today-tab.test.tsx b/panel/src/components/tg/__tests__/tg-today-tab.test.tsx
index 504b051a..5fdea7cf 100644
--- a/panel/src/components/tg/__tests__/tg-today-tab.test.tsx
+++ b/panel/src/components/tg/__tests__/tg-today-tab.test.tsx
@@ -4,8 +4,22 @@ import userEvent from "@testing-library/user-event";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { TgTodayTab } from "../tg-today-tab";
 
-const { get } = vi.hoisted(() => ({ get: vi.fn() }));
-vi.mock("@/lib/api/client", () => ({ default: { get } }));
+const { get, ackMock, notifItems } = vi.hoisted(() => ({
+  get: vi.fn(),
+  ackMock: vi.fn(),
+  notifItems: { current: [] as Array<Record<string, unknown>> },
+}));
+vi.mock("@/lib/api/client", () => ({
+  default: { get },
+  getErrorMessage: () => "error",
+}));
+vi.mock("@/hooks/use-notifications", () => ({
+  notificationKeys: { all: ["notifications"] },
+  useNotifications: () => ({ data: { items: notifItems.current } }),
+}));
+vi.mock("@/lib/api/notifications", () => ({
+  notificationsApi: { acknowledge: ackMock },
+}));
 
 function renderTab(onNavigate = vi.fn()) {
   const client = new QueryClient({
@@ -52,14 +66,28 @@ describe("TgTodayTab", () => {
   // vitest call it as an after-test teardown hook.
   beforeEach(() => {
     get.mockReset();
+    ackMock.mockReset();
+    notifItems.current = [];
+    // Reduced motion → the spend count-up lands instantly; these tests
+    // assert content, not animation timing.
+    window.matchMedia = ((query: string) => ({
+      matches: query.includes("prefers-reduced-motion"),
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    })) as typeof window.matchMedia;
   });
 
   it("shows skeletons while loading", () => {
     get.mockReturnValue(new Promise(() => {}));
     renderTab();
-    expect(document.querySelectorAll("[data-slot=skeleton]").length).toBeGreaterThan(
-      0,
-    );
+    expect(
+      document.querySelectorAll("[data-slot=skeleton]").length,
+    ).toBeGreaterThan(0);
   });
 
   it("renders the all-clear state and the spend/ship numbers", async () => {
@@ -67,7 +95,8 @@ describe("TgTodayTab", () => {
     renderTab();
 
     expect(await screen.findByText(/all clear/i)).toBeInTheDocument();
-    expect(screen.getByText("$12.34")).toBeInTheDocument();
+    // The spend hero counts up to the target, so wait for the final frame.
+    expect(await screen.findByText("$12.34")).toBeInTheDocument();
     expect(screen.getByText(/1\.2M tokens/)).toBeInTheDocument();
     expect(screen.getByText("v0.25.0")).toBeInTheDocument();
     expect(screen.getByText(/no release pending/i)).toBeInTheDocument();
@@ -110,6 +139,91 @@ describe("TgTodayTab", () => {
     expect(onNavigate).toHaveBeenCalledWith("board");
   });
 
+  it("renders the operations ring and deep-links Ship into the release", async () => {
+    get.mockResolvedValue({
+      data: brief({
+        ship: { version: "0.25.0", open_release_proposal: true, ci_fix_tasks: 0 },
+      }),
+    });
+    const onNavigate = vi.fn();
+    renderTab(onNavigate);
+
+    await userEvent.click(await screen.findByRole("button", { name: /ship/i }));
+    expect(onNavigate).toHaveBeenCalledWith("approvals", "release");
+    expect(screen.getByRole("button", { name: /sweep/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /fleet/i })).toBeInTheDocument();
+  });
+
+  it("ack-all acknowledges every pending notification", async () => {
+    get.mockResolvedValue({ data: brief() });
+    notifItems.current = [
+      { id: "n1", requires_ack: true, is_acknowledged: false },
+      { id: "n2", requires_ack: true, is_acknowledged: false },
+      { id: "n3", requires_ack: false, is_acknowledged: false },
+    ];
+    ackMock.mockResolvedValue({});
+    renderTab();
+
+    await userEvent.click(
+      await screen.findByRole("button", { name: /ack all/i }),
+    );
+    await waitFor(() => expect(ackMock).toHaveBeenCalledTimes(2));
+    expect(ackMock).toHaveBeenCalledWith("n1");
+    expect(ackMock).toHaveBeenCalledWith("n2");
+  });
+
+  it("opens the fleet sheet with the full working roster", async () => {
+    get.mockResolvedValue({
+      data: brief({
+        fleet: {
+          total: 26,
+          by_status: { active: 5, idle: 21 },
+          working: [
+            {
+              name: "be-dev-1",
+              role: "developer",
+              team: "backend",
+              task_title: "Task A",
+            },
+            {
+              name: "be-dev-2",
+              role: "developer",
+              team: "backend",
+              task_title: "Task B",
+            },
+            {
+              name: "fe-dev-1",
+              role: "developer",
+              team: "frontend",
+              task_title: "Task C",
+            },
+            {
+              name: "fe-qa",
+              role: "qa",
+              team: "frontend",
+              task_title: "Task D",
+            },
+            {
+              name: "ux-dev-1",
+              role: "developer",
+              team: "ux_ui",
+              task_title: "Task E",
+            },
+          ],
+        },
+      }),
+    });
+    renderTab();
+
+    // The section previews 3 of 5; tapping it opens the full-roster sheet.
+    await userEvent.click(
+      await screen.findByText(/\+2 more · tap for the full roster/),
+    );
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Task E")).toBeInTheDocument();
+    expect(screen.getByText(/idle · 21/)).toBeInTheDocument();
+  });
+
   it("shows an error state when the brief fails to load", async () => {
     get.mockRejectedValue(new Error("boom"));
     renderTab();
diff --git a/panel/src/components/tg/charts.tsx b/panel/src/components/tg/charts.tsx
index 5b62bbe0..18c5b7b3 100644
--- a/panel/src/components/tg/charts.tsx
+++ b/panel/src/components/tg/charts.tsx
@@ -41,15 +41,17 @@ export function Sparkline({ values }: { values: number[] }) {
           <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
         </linearGradient>
       </defs>
-      <path d={area} fill={`url(#${gradId})`} />
+      <path d={area} fill={`url(#${gradId})`} className="tg-backdrop" />
       <polyline
         points={line}
+        pathLength={1}
         fill="none"
         stroke="currentColor"
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
         vectorEffect="non-scaling-stroke"
+        className="tg-draw-line"
       />
       <circle cx={lastX} cy={lastY} r="3.5" fill="currentColor" />
     </svg>
diff --git a/panel/src/components/tg/motion.tsx b/panel/src/components/tg/motion.tsx
new file mode 100644
index 00000000..d4db2ee8
--- /dev/null
+++ b/panel/src/components/tg/motion.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+/**
+ * The cockpit's motion primitives — a count-up hook for hero numerals and
+ * the bottom sheet every detail view rides. Kept dependency-free (rAF + CSS
+ * keyframes from globals.css); prefers-reduced-motion users get the final
+ * state instantly.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { haptics } from "@/lib/telegram/webapp";
+import { useBackButton } from "@/lib/telegram/hooks";
+
+function reducedMotion(): boolean {
+  // No matchMedia (SSR, bare jsdom) counts as reduced — jump to the target.
+  return (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function" ||
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+/** Animate a numeric value toward `target` (ease-out cubic). First mount
+ * counts up from zero — the wallet-style hero entrance. */
+export function useCountUp(target: number, durationMs = 650): number {
+  const [value, setValue] = useState(0);
+  const fromRef = useRef(0);
+  useEffect(() => {
+    const from = fromRef.current;
+    fromRef.current = target;
+    let raf = 0;
+    if (from === target || reducedMotion()) {
+      raf = requestAnimationFrame(() => setValue(target));
+      return () => cancelAnimationFrame(raf);
+    }
+    const start = performance.now();
+    const tick = (now: number) => {
+      const t = Math.min((now - start) / durationMs, 1);
+      const eased = 1 - Math.pow(1 - t, 3);
+      setValue(from + (target - from) * eased);
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, durationMs]);
+  return value;
+}
+
+/**
+ * Bottom sheet — slide-up detail surface over the active tab. Renders
+ * inside #tg-shell (never a portal) so the cockpit theme variables apply.
+ * Telegram's native BackButton dismisses it while it's open; outside
+ * Telegram the backdrop tap and the X do the same job.
+ */
+export function TgSheet({
+  open,
+  onClose,
+  title,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}) {
+  useBackButton(open ? onClose : null);
+  useEffect(() => {
+    if (open) haptics.tap();
+  }, [open]);
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50">
+      <button
+        type="button"
+        aria-label="Close"
+        onClick={onClose}
+        className="tg-backdrop absolute inset-0 bg-black/50"
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="tg-sheet absolute inset-x-0 bottom-0 mx-auto flex max-h-[85dvh] w-full max-w-[430px] flex-col rounded-t-2xl border-t bg-card text-card-foreground shadow-2xl"
+      >
+        <div className="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30" />
+        <header className="flex items-center justify-between gap-2 px-4 pb-2 pt-3">
+          <h2 className="tg-display text-[12px] uppercase tracking-[0.16em] text-muted-foreground">
+            {title}
+          </h2>
+          <button
+            type="button"
+            aria-label="Close"
+            onClick={onClose}
+            className="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-muted-foreground transition-transform active:scale-90"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </header>
+        <div className="overflow-y-auto px-4 pb-[calc(1.25rem+env(safe-area-inset-bottom))]">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/panel/src/components/tg/tg-approvals-tab.tsx b/panel/src/components/tg/tg-approvals-tab.tsx
index f1c400c3..d550b014 100644
--- a/panel/src/components/tg/tg-approvals-tab.tsx
+++ b/panel/src/components/tg/tg-approvals-tab.tsx
@@ -95,13 +95,29 @@ function Detail({ item, onDone }: { item: ApprovalItem; onDone: () => void }) {
  * vanishes from the refetched queue, which pops the view back to the list
  * by construction.
  */
-export function TgApprovalsTab() {
+export function TgApprovalsTab({
+  initialFocus,
+}: {
+  /** Auto-focus the first item of this kind once — Today's Ship deep link. */
+  initialFocus?: "release";
+} = {}) {
   const { items, isLoading, anyFailed } = useApprovalQueue();
   const [focusedId, setFocusedId] = useState<string | null>(null);
+  const [initialConsumed, setInitialConsumed] = useState(false);
   const webApp = useTgWebApp();
 
-  const focused = items.find((i) => i.id === focusedId) ?? null;
-  const back = () => setFocusedId(null);
+  // Derived, not an effect: the deep link focuses the first matching item
+  // until the user backs out of it once.
+  const autoTarget =
+    initialFocus && !initialConsumed && focusedId === null
+      ? items.find((i) => i.kind === initialFocus)
+      : undefined;
+  const focused =
+    items.find((i) => i.id === focusedId) ?? autoTarget ?? null;
+  const back = () => {
+    setInitialConsumed(true);
+    setFocusedId(null);
+  };
   useBackButton(focused ? back : null);
 
   if (isLoading) {
diff --git a/panel/src/components/tg/tg-board-tab.tsx b/panel/src/components/tg/tg-board-tab.tsx
index 64c300ef..5d072820 100644
--- a/panel/src/components/tg/tg-board-tab.tsx
+++ b/panel/src/components/tg/tg-board-tab.tsx
@@ -1,11 +1,29 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { MobileTaskBoard } from "@/components/tasks/mobile-task-board";
+import { TgTaskSheet } from "@/components/tg/tg-task-sheet";
+import { isTgDemoMode } from "@/lib/telegram/demo";
+import type { Task } from "@/types";
 
-/** Cockpit Board tab — thin wrapper so every tab has its own file under
- * components/tg/ (per the per-tab-file convention); the board itself lives
- * in components/tasks since it's a general read-only task view, not
- * Mini-App-specific. */
+/** Cockpit Board tab — the shared read-only board plus the tap-through
+ * task sheet (status, ACs, open findings, PR link). Demo mode swaps in the
+ * canned fixture list, lazily imported so it stays out of the prod bundle. */
 export function TgBoardTab() {
-  return <MobileTaskBoard />;
+  const [selected, setSelected] = useState<Task | null>(null);
+  const [demoTasks, setDemoTasks] = useState<Task[] | undefined>(undefined);
+
+  useEffect(() => {
+    if (!isTgDemoMode()) return;
+    void import("@/lib/telegram/demo-data").then((m) =>
+      setDemoTasks(m.DEMO_TASKS),
+    );
+  }, []);
+
+  return (
+    <>
+      <MobileTaskBoard tasks={demoTasks} onTaskPress={setSelected} />
+      <TgTaskSheet task={selected} onClose={() => setSelected(null)} />
+    </>
+  );
 }
diff --git a/panel/src/components/tg/tg-icons.tsx b/panel/src/components/tg/tg-icons.tsx
new file mode 100644
index 00000000..47bf4bd1
--- /dev/null
+++ b/panel/src/components/tg/tg-icons.tsx
@@ -0,0 +1,175 @@
+/**
+ * RoboCo's own cockpit icon set — hand-drawn duotone glyphs (a 45%-opacity
+ * body plus solid accents, everything currentColor) so the nav and action
+ * surfaces stop reading as stock-library linework. Utility chrome
+ * (chevrons, spinners, list-row glyphs) deliberately stays lucide; these
+ * cover the hero surfaces only.
+ */
+
+export type TgIconProps = { className?: string };
+
+function Svg({
+  className,
+  children,
+}: TgIconProps & { children: React.ReactNode }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+
+/** Speedometer — Today. */
+export function IconToday({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <path
+        fillRule="evenodd"
+        opacity=".45"
+        d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z"
+      />
+      <rect
+        x="11.1"
+        y="5.2"
+        width="1.8"
+        height="7.2"
+        rx=".9"
+        transform="rotate(45 12 12)"
+      />
+      <circle cx="12" cy="12" r="2" />
+    </Svg>
+  );
+}
+
+/** Octagon seal with a check — Approvals / approve actions. */
+export function IconSeal({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <path
+        opacity=".45"
+        d="M8.2 2.6h7.6a1 1 0 0 1 .7.3l4.6 4.6a1 1 0 0 1 .3.7v7.6a1 1 0 0 1-.3.7l-4.6 4.6a1 1 0 0 1-.7.3H8.2a1 1 0 0 1-.7-.3l-4.6-4.6a1 1 0 0 1-.3-.7V8.2a1 1 0 0 1 .3-.7l4.6-4.6a1 1 0 0 1 .7-.3Z"
+      />
+      <path
+        d="m8.4 12.2 2.4 2.4 4.8-5"
+        stroke="currentColor"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </Svg>
+  );
+}
+
+/** Bell with an unread dot — Inbox. */
+export function IconInbox({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <path
+        opacity=".45"
+        d="M12 3.2a6 6 0 0 0-6 6v3l-1.5 2.6c-.4.7.1 1.6.9 1.6h13.2c.8 0 1.3-.9.9-1.6L18 12.2v-3a6 6 0 0 0-6-6Z"
+      />
+      <path d="M9.7 18.6a2.4 2.4 0 0 0 4.6 0H9.7Z" />
+      <circle cx="17.8" cy="5.4" r="2.6" />
+    </Svg>
+  );
+}
+
+/** Kanban columns — Board. */
+export function IconBoard({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <rect x="3.4" y="4" width="4.8" height="12.5" rx="1.7" opacity=".45" />
+      <rect x="9.6" y="4" width="4.8" height="16" rx="1.7" />
+      <rect x="15.8" y="4" width="4.8" height="9" rx="1.7" opacity=".45" />
+    </Svg>
+  );
+}
+
+/** Speech bubble carrying the brand cursor — Chat. */
+export function IconChat({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <path
+        opacity=".45"
+        d="M4 6.5A3.5 3.5 0 0 1 7.5 3h9A3.5 3.5 0 0 1 20 6.5v6a3.5 3.5 0 0 1-3.5 3.5H9.8l-4.1 3.4c-.7.5-1.7 0-1.7-.9V6.5Z"
+      />
+      <rect x="8.2" y="10.6" width="6.2" height="2.2" rx="1.1" />
+    </Svg>
+  );
+}
+
+/** Rocket — Ship. */
+export function IconShip({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <path
+        opacity=".45"
+        d="M12 2.3c3 1.8 4.8 5 4.8 8.6 0 1.9-.4 3.7-1.2 5.2H8.4a11.7 11.7 0 0 1-1.2-5.2c0-3.6 1.8-6.8 4.8-8.6Z"
+      />
+      <circle cx="12" cy="9.6" r="2" />
+      <path d="M10.1 17.4h3.8c.3 1.7-.4 3.4-1.9 4.8-1.5-1.4-2.2-3.1-1.9-4.8Z" />
+    </Svg>
+  );
+}
+
+/** Double check — Ack all. */
+export function IconAckAll({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <path
+        opacity=".45"
+        d="m3 12.9 4 4 7.6-8.8"
+        stroke="currentColor"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      <path
+        d="m10.4 13.8 3.1 3.1 7.5-8.7"
+        stroke="currentColor"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </Svg>
+  );
+}
+
+/** Broom — the stale-branch sweep. */
+export function IconSweep({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <path
+        d="M19.4 3.6 13 10.8"
+        stroke="currentColor"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        fill="none"
+      />
+      <path
+        opacity=".45"
+        d="M12.1 10.4 15 13c-.9 3.1-3.3 5.7-7 7-1.5.5-3.2-.1-3.9-1.6l-1-2c3.7-.5 6.8-2.5 9-6Z"
+      />
+    </Svg>
+  );
+}
+
+/** Robot head — the fleet. */
+export function IconFleet({ className }: TgIconProps) {
+  return (
+    <Svg className={className}>
+      <rect x="11.1" y="2" width="1.8" height="3.4" rx=".9" />
+      <rect x="4" y="6.2" width="16" height="13" rx="4.2" opacity=".45" />
+      <circle cx="9" cy="12.7" r="1.8" />
+      <circle cx="15" cy="12.7" r="1.8" />
+    </Svg>
+  );
+}
diff --git a/panel/src/components/tg/tg-inbox-tab.tsx b/panel/src/components/tg/tg-inbox-tab.tsx
index 8ff50436..8f5f390e 100644
--- a/panel/src/components/tg/tg-inbox-tab.tsx
+++ b/panel/src/components/tg/tg-inbox-tab.tsx
@@ -1,9 +1,11 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import {
   useNotifications,
   useAcknowledgeNotification,
 } from "@/hooks/use-notifications";
+import { isTgDemoMode } from "@/lib/telegram/demo";
 import { getAgentDisplayName } from "@/lib/agent-utils";
 import { getErrorMessage } from "@/lib/api/client";
 import type { Notification } from "@/types";
@@ -55,8 +57,7 @@ function TgNotificationRow({ notification }: { notification: Notification }) {
           {notification.body}
         </p>
         <p className="mt-1.5 text-[11px] text-muted-foreground">
-          {sender} ·{" "}
-          {formatDistanceToNow(new Date(notification.timestamp))} ago
+          {sender} · {formatDistanceToNow(new Date(notification.timestamp))} ago
         </p>
       </div>
     </div>
@@ -67,9 +68,22 @@ function TgNotificationRow({ notification }: { notification: Notification }) {
  * Notification inbox for the /tg cockpit — every notification, newest
  * first, with an Ack button on the ones that require it. Polling rides
  * useNotifications' own 30s refetchInterval; no extra wiring needed here.
+ * Demo mode renders the canned fixtures instead (the live query still
+ * mounts — dev-only noise, same trade as the Board tab).
  */
 export function TgInboxTab() {
-  const { data, isLoading } = useNotifications();
+  const { data: fetched, isLoading: fetchLoading } = useNotifications();
+  const [demoItems, setDemoItems] = useState<Notification[] | undefined>(
+    undefined,
+  );
+  useEffect(() => {
+    if (!isTgDemoMode()) return;
+    void import("@/lib/telegram/demo-data").then((m) =>
+      setDemoItems(m.DEMO_NOTIFICATIONS),
+    );
+  }, []);
+  const data = demoItems ? { items: demoItems } : fetched;
+  const isLoading = demoItems ? false : fetchLoading;
 
   if (isLoading) {
     return (
diff --git a/panel/src/components/tg/tg-tab-bar.tsx b/panel/src/components/tg/tg-tab-bar.tsx
index 3bda6582..52656fa5 100644
--- a/panel/src/components/tg/tg-tab-bar.tsx
+++ b/panel/src/components/tg/tg-tab-bar.tsx
@@ -1,6 +1,13 @@
 "use client";
 
-import { Gauge, CheckSquare, Bell, Kanban, MessageSquare } from "lucide-react";
+import {
+  IconBoard,
+  IconChat,
+  IconInbox,
+  IconSeal,
+  IconToday,
+  type TgIconProps,
+} from "@/components/tg/tg-icons";
 import { cn } from "@/lib/utils";
 
 export type TgTab = "today" | "approvals" | "inbox" | "board" | "chat";
@@ -8,13 +15,13 @@ export type TgTab = "today" | "approvals" | "inbox" | "board" | "chat";
 const TABS: ReadonlyArray<{
   id: TgTab;
   label: string;
-  icon: typeof CheckSquare;
+  icon: React.ComponentType<TgIconProps>;
 }> = [
-  { id: "today", label: "Today", icon: Gauge },
-  { id: "approvals", label: "Approvals", icon: CheckSquare },
-  { id: "inbox", label: "Inbox", icon: Bell },
-  { id: "board", label: "Board", icon: Kanban },
-  { id: "chat", label: "Chat", icon: MessageSquare },
+  { id: "today", label: "Today", icon: IconToday },
+  { id: "approvals", label: "Approvals", icon: IconSeal },
+  { id: "inbox", label: "Inbox", icon: IconInbox },
+  { id: "board", label: "Board", icon: IconBoard },
+  { id: "chat", label: "Chat", icon: IconChat },
 ];
 
 interface TgTabBarProps {
@@ -42,14 +49,18 @@ export function TgTabBar({ active, onChange }: TgTabBarProps) {
             aria-current={isActive ? "page" : undefined}
             onClick={() => onChange(tab.id)}
             className={cn(
-              "flex flex-1 flex-col items-center gap-0.5 pb-2 pt-2.5 text-[10px] font-medium tracking-wide transition-colors",
+              "tg-display flex flex-1 flex-col items-center gap-0.5 pb-2 pt-1.5 text-[9px] uppercase tracking-[0.08em] transition-colors",
               isActive ? "text-primary" : "text-muted-foreground/70",
             )}
           >
-            <tab.icon
-              className="h-5 w-5"
-              strokeWidth={isActive ? 2.25 : 1.75}
-            />
+            <span
+              className={cn(
+                "flex h-7 w-12 items-center justify-center rounded-full transition-all duration-200 ease-out",
+                isActive ? "bg-primary/15" : "bg-transparent",
+              )}
+            >
+              <tab.icon className="h-5 w-5" />
+            </span>
             {tab.label}
           </button>
         );
diff --git a/panel/src/components/tg/tg-task-sheet.tsx b/panel/src/components/tg/tg-task-sheet.tsx
new file mode 100644
index 00000000..43f550c6
--- /dev/null
+++ b/panel/src/components/tg/tg-task-sheet.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { TgSheet } from "@/components/tg/motion";
+import { TaskStatusBadge } from "@/components/tasks/task-status-badge";
+import { useTaskFindings } from "@/hooks/use-tasks";
+import { getAgentDisplayName } from "@/lib/agent-utils";
+import { isTgDemoMode } from "@/lib/telegram/demo";
+import type { Task } from "@/types";
+import type { TaskFinding } from "@/lib/api/tasks";
+import { CheckCircle2, ExternalLink } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { cn } from "@/lib/utils";
+
+const FINDINGS_SHOWN = 5;
+
+const SEVERITY_DOT: Record<TaskFinding["severity"], string> = {
+  blocker: "bg-rose-400",
+  major: "bg-amber-400",
+  minor: "bg-sky-400",
+  nit: "bg-muted-foreground/60",
+};
+
+function FindingRow({ finding }: { finding: TaskFinding }) {
+  return (
+    <li className="flex gap-2 py-1.5">
+      <span
+        className={cn(
+          "mt-1.5 h-2 w-2 shrink-0 rounded-full",
+          SEVERITY_DOT[finding.severity],
+        )}
+      />
+      <div className="min-w-0">
+        {finding.file && (
+          <p className="tg-display truncate text-xs">
+            {finding.file}
+            {finding.line !== null && `:${finding.line}`}
+          </p>
+        )}
+        <p className="line-clamp-2 text-xs text-muted-foreground">
+          {finding.fix ?? finding.expected}
+        </p>
+      </div>
+    </li>
+  );
+}
+
+/**
+ * Read-only task detail for the Board tab's tap-through: status, meta,
+ * description, acceptance criteria, the open revision findings, and the PR
+ * link. Mutations stay on the desktop panel — the cockpit is a
+ * glance-and-decide surface, and the decide verbs already live in
+ * Approvals.
+ */
+export function TgTaskSheet({
+  task,
+  onClose,
+}: {
+  task: Task | null;
+  onClose: () => void;
+}) {
+  // Demo fixtures have no backend — disable the ledger fetch entirely there.
+  const findingsQuery = useTaskFindings(task && !isTgDemoMode() ? task.id : "");
+  const openFindings = (findingsQuery.data?.findings ?? []).filter(
+    (f) => f.status === "open",
+  );
+
+  return (
+    <TgSheet open={task !== null} onClose={onClose} title="Task">
+      {task && (
+        <div className="space-y-4 pb-1">
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-2">
+              <TaskStatusBadge status={task.status} />
+              {(task.revision_count ?? 0) > 0 && (
+                <span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-[11px] font-medium tabular-nums text-amber-300">
+                  bounced ×{task.revision_count}
+                </span>
+              )}
+            </div>
+            <h3 className="text-base font-semibold leading-snug">
+              {task.title}
+            </h3>
+            <p className="text-[11px] text-muted-foreground">
+              {[
+                task.team,
+                getAgentDisplayName(task.assigned_to),
+                task.updated_at &&
+                  `${formatDistanceToNow(new Date(task.updated_at))} ago`,
+              ]
+                .filter(Boolean)
+                .join(" · ")}
+            </p>
+          </div>
+
+          {task.description && (
+            <p className="whitespace-pre-line text-sm leading-relaxed text-muted-foreground">
+              {task.description}
+            </p>
+          )}
+
+          {task.acceptance_criteria.length > 0 && (
+            <section>
+              <h4 className="tg-display mb-1.5 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+                Acceptance criteria
+              </h4>
+              <ul className="space-y-1.5">
+                {task.acceptance_criteria.map((criterion, i) => (
+                  <li key={i} className="flex gap-2 text-sm leading-snug">
+                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/50" />
+                    <span>{criterion}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+
+          {openFindings.length > 0 && (
+            <section>
+              <h4 className="tg-display mb-1 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
+                Open findings · {openFindings.length}
+              </h4>
+              <ul className="divide-y">
+                {openFindings.slice(0, FINDINGS_SHOWN).map((f) => (
+                  <FindingRow key={f.id} finding={f} />
+                ))}
+              </ul>
+              {openFindings.length > FINDINGS_SHOWN && (
+                <p className="mt-1 text-[11px] text-muted-foreground">
+                  +{openFindings.length - FINDINGS_SHOWN} more on the desktop
+                  panel
+                </p>
+              )}
+            </section>
+          )}
+
+          {task.pr_url && (
+            <a
+              href={task.pr_url}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center justify-center gap-2 rounded-xl bg-muted py-2.5 text-sm font-medium transition-transform active:scale-[0.98]"
+            >
+              <ExternalLink className="h-4 w-4" />
+              Open PR{task.pr_number !== null && ` #${task.pr_number}`}
+            </a>
+          )}
+        </div>
+      )}
+    </TgSheet>
+  );
+}
diff --git a/panel/src/components/tg/tg-today-tab.tsx b/panel/src/components/tg/tg-today-tab.tsx
index b67cd22a..219bc28b 100644
--- a/panel/src/components/tg/tg-today-tab.tsx
+++ b/panel/src/components/tg/tg-today-tab.tsx
@@ -1,31 +1,39 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import api from "@/lib/api/client";
+import api, { getErrorMessage } from "@/lib/api/client";
 import { isTgDemoMode } from "@/lib/telegram/demo";
 import { useWebSocket } from "@/hooks/use-websocket";
+import {
+  notificationKeys,
+  useNotifications,
+} from "@/hooks/use-notifications";
+import { notificationsApi } from "@/lib/api/notifications";
+import { projectsApi } from "@/lib/api/projects";
+import { gitApi } from "@/lib/api/git";
 import { haptics } from "@/lib/telegram/webapp";
 import type { TgTab } from "@/components/tg/tg-tab-bar";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { TgAvatar, TgCircleAction, TgRow, TgSection } from "@/components/tg/ui";
+import { TgSheet, useCountUp } from "@/components/tg/motion";
 import {
-  TgAvatar,
-  TgCircleAction,
-  TgRow,
-  TgSection,
-} from "@/components/tg/ui";
+  IconAckAll,
+  IconFleet,
+  IconShip,
+  IconSweep,
+} from "@/components/tg/tg-icons";
 import { DayBars, Sparkline } from "@/components/tg/charts";
 import {
   AlertTriangle,
   ArrowDownRight,
   ArrowUpRight,
-  Bell,
   CheckSquare,
   ChevronRight,
-  Kanban,
-  MessageSquare,
   Rocket,
 } from "lucide-react";
+import { toast } from "sonner";
 import { formatDistanceToNow } from "date-fns";
 import { cn } from "@/lib/utils";
 
@@ -106,15 +114,16 @@ function weekdayLabels(count: number): string[] {
 function SpendHero({ spend }: { spend: TodayBrief["spend"] }) {
   const delta = spend.delta_pct;
   const up = (delta ?? 0) >= 0;
+  const cost = useCountUp(spend.cost_today_usd);
   return (
     <div className="overflow-hidden rounded-2xl border bg-gradient-to-b from-primary/[0.07] to-transparent p-4">
-      <p className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+      <p className="tg-display text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
         Spend today
       </p>
       <div className="mt-1 flex items-end justify-between gap-3">
         <div className="flex items-baseline gap-2">
-          <span className="text-[40px] font-semibold leading-none tracking-tight tabular-nums">
-            ${spend.cost_today_usd.toFixed(2)}
+          <span className="tg-display text-[40px] leading-none tabular-nums">
+            ${cost.toFixed(2)}
           </span>
           {delta !== null && (
             <span
@@ -177,7 +186,7 @@ function NeedsYouBanner({
         onClick={onApprovals}
         className="flex w-full items-center justify-between"
       >
-        <span className="text-[11px] font-semibold uppercase tracking-[0.08em] text-primary">
+        <span className="tg-display text-[11px] uppercase tracking-[0.14em] text-primary">
           Needs you
         </span>
         <span className="flex items-center gap-1 text-primary">
@@ -204,7 +213,12 @@ function NeedsYouBanner({
       {(needs.awaiting_ceo.length > 0 || needs.blocked.length > 0) && (
         <div className="-mx-1.5 divide-y divide-primary/10">
           {needs.awaiting_ceo.slice(0, 2).map((t) => (
-            <TgRow key={t.id} title={t.title} meta={taskMeta(t)} onPress={onBoard} />
+            <TgRow
+              key={t.id}
+              title={t.title}
+              meta={taskMeta(t)}
+              onPress={onBoard}
+            />
           ))}
           {needs.blocked.slice(0, 2).map((t) => (
             <TgRow
@@ -226,6 +240,52 @@ function NeedsYouBanner({
   );
 }
 
+/** Full working-roster sheet — every mid-task agent with its live task,
+ * opened from the Fleet section's (truncated) preview. */
+function FleetSheet({
+  fleet,
+  open,
+  onClose,
+}: {
+  fleet: TodayBrief["fleet"];
+  open: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <TgSheet open={open} onClose={onClose} title="Fleet">
+      <div className="mb-3 flex flex-wrap gap-1.5">
+        {Object.entries(fleet.by_status).map(([status, count]) => (
+          <span
+            key={status}
+            className="rounded-full bg-muted px-2.5 py-1 text-xs tabular-nums text-muted-foreground"
+          >
+            {status} · {count}
+          </span>
+        ))}
+      </div>
+      <ul className="divide-y">
+        {fleet.working.map((agent) => (
+          <li key={agent.name} className="flex items-center gap-3 py-2.5">
+            <TgAvatar name={agent.name} active />
+            <div className="min-w-0 flex-1">
+              <p className="tg-display text-[13px]">{agent.name}</p>
+              <p className="truncate text-xs text-muted-foreground">
+                {agent.task_title ??
+                  `${agent.role}${agent.team ? ` · ${agent.team}` : ""}`}
+              </p>
+            </div>
+          </li>
+        ))}
+        {fleet.working.length === 0 && (
+          <li className="py-4 text-center text-sm text-muted-foreground">
+            No one is mid-task.
+          </li>
+        )}
+      </ul>
+    </TgSheet>
+  );
+}
+
 /**
  * The cockpit home: a spend hero with a live 7-day trend, a quick-action
  * ring, the needs-you banner, the fleet as live avatars, and the week's
@@ -234,9 +294,72 @@ function NeedsYouBanner({
 export function TgTodayTab({
   onNavigate,
 }: {
-  onNavigate: (tab: TgTab) => void;
+  /** `intent: "release"` deep-focuses the release proposal in Approvals. */
+  onNavigate: (tab: TgTab, intent?: "release") => void;
 }) {
   const queryClient = useQueryClient();
+  const [fleetOpen, setFleetOpen] = useState(false);
+  const [sweepOpen, setSweepOpen] = useState(false);
+  const [ackBusy, setAckBusy] = useState(false);
+  const [sweepBusy, setSweepBusy] = useState(false);
+
+  // Shares the Inbox tab's query cache; powers the Ack-all badge + action.
+  const { data: notifData } = useNotifications();
+  const pendingAcks = (notifData?.items ?? []).filter(
+    (n) => n.requires_ack && !n.is_acknowledged,
+  );
+
+  const runAckAll = async () => {
+    haptics.tap();
+    if (pendingAcks.length === 0) {
+      toast.info("Nothing is waiting for an ack");
+      return;
+    }
+    setAckBusy(true);
+    const results = await Promise.allSettled(
+      pendingAcks.map((n) => notificationsApi.acknowledge(n.id)),
+    );
+    const ok = results.filter((r) => r.status === "fulfilled").length;
+    await queryClient.invalidateQueries({ queryKey: notificationKeys.all });
+    setAckBusy(false);
+    if (ok === results.length) {
+      haptics.success();
+      toast.success(`Acknowledged ${ok} notification${ok === 1 ? "" : "s"}`);
+    } else {
+      haptics.error();
+      toast.warning(`Acknowledged ${ok} of ${results.length}`);
+    }
+  };
+
+  const runSweep = async () => {
+    setSweepBusy(true);
+    try {
+      const projects = (await projectsApi.list()).filter(
+        (p) => p.has_git_token,
+      );
+      let deleted = 0;
+      let errors = 0;
+      for (const p of projects) {
+        try {
+          const res = await gitApi.cleanupBranches({ project_slug: p.slug });
+          deleted += res.remote_deleted;
+          errors += res.errors;
+        } catch {
+          errors += 1;
+        }
+      }
+      haptics.success();
+      toast.success(
+        `Swept ${projects.length} project${projects.length === 1 ? "" : "s"}: ${deleted} stale branch${deleted === 1 ? "" : "es"} deleted${errors ? `, ${errors} error${errors === 1 ? "" : "s"}` : ""}`,
+      );
+    } catch (err) {
+      haptics.error();
+      toast.error(getErrorMessage(err));
+    } finally {
+      setSweepBusy(false);
+      setSweepOpen(false);
+    }
+  };
   const { data, isLoading, isError } = useQuery<TodayBrief>({
     queryKey: ["tg-today"],
     queryFn: async () => {
@@ -274,32 +397,55 @@ export function TgTodayTab({
   }
 
   const { needs_you: needs, fleet, spend, velocity, ship } = data;
-  const go = (tab: TgTab) => {
+  const go = (tab: TgTab, intent?: "release") => {
     haptics.tap();
-    onNavigate(tab);
+    if (intent) onNavigate(tab, intent);
+    else onNavigate(tab);
   };
   const idle = fleet.by_status.idle ?? 0;
-  const active =
-    fleet.by_status.active ?? Math.max(fleet.working.length, 0);
+  const active = fleet.by_status.active ?? Math.max(fleet.working.length, 0);
 
   return (
-    <div className="space-y-3">
+    <div className="tg-stagger space-y-3">
+      <header className="flex items-center justify-between px-1 pt-0.5">
+        <p className="tg-display text-[13px] tracking-[0.24em] text-muted-foreground">
+          ROBOCO<span className="tg-cursor text-primary">_</span>
+        </p>
+      </header>
       <SpendHero spend={spend} />
 
+      {/* Operations, not navigation — the tab bar already navigates. */}
       <div className="flex items-stretch gap-2 px-1">
         <TgCircleAction
-          icon={CheckSquare}
-          label="Approve"
-          badge={needs.total}
-          accent
-          onPress={() => go("approvals")}
+          icon={IconShip}
+          label="Ship"
+          badge={ship.open_release_proposal ? 1 : undefined}
+          accent={ship.open_release_proposal}
+          onPress={() => go("approvals", "release")}
         />
-        <TgCircleAction icon={Kanban} label="Board" onPress={() => go("board")} />
-        <TgCircleAction icon={Bell} label="Inbox" onPress={() => go("inbox")} />
         <TgCircleAction
-          icon={MessageSquare}
-          label="Chat"
-          onPress={() => go("chat")}
+          icon={IconAckAll}
+          label="Ack all"
+          badge={pendingAcks.length}
+          busy={ackBusy}
+          onPress={() => void runAckAll()}
+        />
+        <TgCircleAction
+          icon={IconSweep}
+          label="Sweep"
+          busy={sweepBusy}
+          onPress={() => {
+            haptics.tap();
+            setSweepOpen(true);
+          }}
+        />
+        <TgCircleAction
+          icon={IconFleet}
+          label="Fleet"
+          onPress={() => {
+            haptics.tap();
+            setFleetOpen(true);
+          }}
         />
       </div>
 
@@ -318,9 +464,18 @@ export function TgTodayTab({
         }
       >
         {fleet.working.length === 0 ? (
-          <p className="py-1 text-sm text-muted-foreground">No one is mid-task.</p>
+          <p className="py-1 text-sm text-muted-foreground">
+            No one is mid-task.
+          </p>
         ) : (
-          <div className="space-y-2">
+          <button
+            type="button"
+            onClick={() => {
+              haptics.tap();
+              setFleetOpen(true);
+            }}
+            className="w-full space-y-2 text-left"
+          >
             <div className="flex -space-x-1.5 overflow-hidden">
               {fleet.working.map((a) => (
                 <TgAvatar key={a.name} name={a.name} active />
@@ -332,7 +487,7 @@ export function TgTodayTab({
                   key={agent.name}
                   className="flex items-baseline gap-2 text-[13px] leading-snug"
                 >
-                  <span className="shrink-0 font-mono text-xs font-medium">
+                  <span className="tg-display shrink-0 text-xs">
                     {agent.name}
                   </span>
                   {agent.task_title && (
@@ -343,7 +498,12 @@ export function TgTodayTab({
                 </li>
               ))}
             </ul>
-          </div>
+            {fleet.working.length > 3 && (
+              <p className="text-[11px] text-muted-foreground">
+                +{fleet.working.length - 3} more · tap for the full roster
+              </p>
+            )}
+          </button>
         )}
       </TgSection>
 
@@ -369,7 +529,7 @@ export function TgTodayTab({
           >
             <p
               className={cn(
-                "text-[22px] font-semibold leading-tight tracking-tight tabular-nums",
+                "tg-display text-[22px] leading-tight tabular-nums",
                 ship.open_release_proposal && "text-primary",
               )}
             >
@@ -385,6 +545,35 @@ export function TgTodayTab({
           </button>
         </TgSection>
       </div>
+
+      <FleetSheet
+        fleet={fleet}
+        open={fleetOpen}
+        onClose={() => setFleetOpen(false)}
+      />
+
+      <TgSheet
+        open={sweepOpen}
+        onClose={() => {
+          if (!sweepBusy) setSweepOpen(false);
+        }}
+        title="Sweep branches"
+      >
+        <div className="space-y-3 pb-1">
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            Deletes the remote and local branches of every completed or
+            cancelled task, across every project with git configured. Live
+            branches and environment rungs are spared.
+          </p>
+          <Button
+            className="w-full"
+            disabled={sweepBusy}
+            onClick={() => void runSweep()}
+          >
+            {sweepBusy ? "Sweeping…" : "Sweep stale branches"}
+          </Button>
+        </div>
+      </TgSheet>
     </div>
   );
 }
diff --git a/panel/src/components/tg/ui.tsx b/panel/src/components/tg/ui.tsx
index eaebfcce..d94977bf 100644
--- a/panel/src/components/tg/ui.tsx
+++ b/panel/src/components/tg/ui.tsx
@@ -26,36 +26,40 @@ export function TgCircleAction({
   label,
   badge,
   accent = false,
+  busy = false,
   onPress,
 }: {
-  icon: LucideIcon;
+  icon: React.ComponentType<{ className?: string }>;
   label: string;
   badge?: number;
   accent?: boolean;
+  /** Disables the button and spins the icon while an operation runs. */
+  busy?: boolean;
   onPress: () => void;
 }) {
   return (
     <button
       type="button"
       onClick={onPress}
-      className="flex flex-1 flex-col items-center gap-1.5"
+      disabled={busy}
+      className="flex flex-1 flex-col items-center gap-1.5 disabled:opacity-60"
     >
       <span
         className={cn(
-          "relative flex h-12 w-12 items-center justify-center rounded-full transition-transform active:scale-95",
+          "relative flex h-12 w-12 items-center justify-center rounded-full transition-all duration-200 ease-out active:scale-90",
           accent
-            ? "bg-primary text-primary-foreground"
-            : "bg-muted text-foreground",
+            ? "bg-gradient-to-b from-primary to-primary/80 text-primary-foreground shadow-[0_8px_20px_-8px] shadow-primary/60"
+            : "bg-gradient-to-b from-muted to-muted/60 text-foreground ring-1 ring-inset ring-white/5",
         )}
       >
-        <Icon className="h-5 w-5" />
+        <Icon className={cn("h-5 w-5", busy && "animate-pulse")} />
         {badge !== undefined && badge > 0 && (
           <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold text-white">
             {badge}
           </span>
         )}
       </span>
-      <span className="text-[11px] font-medium text-muted-foreground">
+      <span className="tg-display text-[10px] uppercase tracking-[0.1em] text-muted-foreground">
         {label}
       </span>
     </button>
@@ -86,7 +90,7 @@ export function TgAvatar({ name, active }: { name: string; active?: boolean }) {
     <span className="relative inline-flex h-9 w-9 items-center justify-center">
       <span
         className={cn(
-          "flex h-9 w-9 items-center justify-center rounded-full text-[11px] font-semibold",
+          "flex h-9 w-9 items-center justify-center rounded-full text-[11px] font-semibold ring-1 ring-inset ring-white/10",
           hue,
         )}
       >
@@ -120,7 +124,7 @@ export function TgSection({
       )}
     >
       <header className="flex items-center justify-between gap-2 px-3 pb-1 pt-2.5">
-        <h2 className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+        <h2 className="tg-display flex items-center gap-1.5 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
           {Icon && <Icon className="h-3.5 w-3.5" />}
           {title}
         </h2>
@@ -181,11 +185,15 @@ export function TgRow({
  * tints it per row kind so a list of mixed items reads as color-coded
  * rather than a monochrome column. */
 const _TILE_TONES: Record<string, string> = {
-  amber: "bg-amber-500/15 text-amber-400",
-  sky: "bg-sky-500/15 text-sky-400",
-  violet: "bg-violet-500/15 text-violet-400",
-  emerald: "bg-emerald-500/15 text-emerald-400",
-  muted: "bg-muted text-muted-foreground",
+  amber:
+    "bg-gradient-to-br from-amber-400/25 to-amber-500/5 text-amber-300 ring-1 ring-inset ring-amber-400/20",
+  sky: "bg-gradient-to-br from-sky-400/25 to-sky-500/5 text-sky-300 ring-1 ring-inset ring-sky-400/20",
+  violet:
+    "bg-gradient-to-br from-violet-400/25 to-violet-500/5 text-violet-300 ring-1 ring-inset ring-violet-400/20",
+  emerald:
+    "bg-gradient-to-br from-emerald-400/25 to-emerald-500/5 text-emerald-300 ring-1 ring-inset ring-emerald-400/20",
+  rose: "bg-gradient-to-br from-rose-400/25 to-rose-500/5 text-rose-300 ring-1 ring-inset ring-rose-400/20",
+  muted: "bg-muted text-muted-foreground ring-1 ring-inset ring-white/5",
 };
 
 export function TgRowIcon({
@@ -198,7 +206,7 @@ export function TgRowIcon({
   return (
     <span
       className={cn(
-        "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px]",
         _TILE_TONES[tone] ?? _TILE_TONES.muted,
       )}
     >
@@ -220,7 +228,7 @@ export function TgStat({
     <div>
       <p
         className={cn(
-          "text-[22px] font-semibold leading-tight tracking-tight tabular-nums",
+          "tg-display text-[22px] leading-tight tabular-nums",
           tone === "attention" && "text-primary",
         )}
       >
diff --git a/panel/src/lib/telegram/demo-data.ts b/panel/src/lib/telegram/demo-data.ts
index 7edf0a56..15e74fb1 100644
--- a/panel/src/lib/telegram/demo-data.ts
+++ b/panel/src/lib/telegram/demo-data.ts
@@ -9,6 +9,17 @@ import type { XPost } from "@/lib/api/x";
 import type { VideoPost } from "@/lib/api/video";
 import type { RoadmapCycle } from "@/lib/api/roadmap";
 import type { TodayBrief } from "@/components/tg/tg-today-tab";
+import {
+  Complexity,
+  NotificationPriority,
+  NotificationType,
+  TaskNature,
+  TaskStatus,
+  TaskType,
+  Team,
+  type Notification,
+  type Task,
+} from "@/types";
 
 export const DEMO_RELEASE: ReleaseProposal = {
   task_id: "demo-release",
@@ -23,8 +34,17 @@ export const DEMO_RELEASE: ReleaseProposal = {
     ],
     drafted_changelog:
       "## 0.26.0\n\n### Added\n- Telegram Mini App V4: Today brief, native approvals card stack.\n\n### Fixed\n- CEO approve-and-merge no longer fails on a diverged workspace clone.",
-    version_bump_plan: ["pyproject.toml", "roboco/__init__.py", "panel/package.json"],
-    gaps: [{ category: "docs", detail: "docs.roboco.tech Mini App page not yet updated" }],
+    version_bump_plan: [
+      "pyproject.toml",
+      "roboco/__init__.py",
+      "panel/package.json",
+    ],
+    gaps: [
+      {
+        category: "docs",
+        detail: "docs.roboco.tech Mini App page not yet updated",
+      },
+    ],
     migration_notes: [],
     gate_state: "green",
   },
@@ -132,9 +152,24 @@ export const DEMO_TODAY: TodayBrief = {
     total: 26,
     by_status: { active: 4, idle: 22 },
     working: [
-      { name: "be-dev-1", role: "developer", team: "backend", task_title: "Webhook rate limiting" },
-      { name: "fe-qa", role: "qa", team: "frontend", task_title: "Metrics time-series review" },
-      { name: "ux-dev-2", role: "developer", team: "ux_ui", task_title: "v0.26.0 release motion" },
+      {
+        name: "be-dev-1",
+        role: "developer",
+        team: "backend",
+        task_title: "Webhook rate limiting",
+      },
+      {
+        name: "fe-qa",
+        role: "qa",
+        team: "frontend",
+        task_title: "Metrics time-series review",
+      },
+      {
+        name: "ux-dev-2",
+        role: "developer",
+        team: "ux_ui",
+        task_title: "v0.26.0 release motion",
+      },
     ],
   },
   spend: {
@@ -146,3 +181,196 @@ export const DEMO_TODAY: TodayBrief = {
   velocity: { series: [3, 5, 2, 6, 4, 7, 5], week_total: 32 },
   ship: { version: "0.25.0", open_release_proposal: true, ci_fix_tasks: 0 },
 };
+
+const _now = Date.now();
+const _iso = (minsAgo: number) =>
+  new Date(_now - minsAgo * 60_000).toISOString();
+
+function demoTask(
+  overrides: Partial<Task> & Pick<Task, "id" | "title" | "status" | "team">,
+): Task {
+  return {
+    description: "",
+    constraints: null,
+    acceptance_criteria: [],
+    priority: 2,
+    sequence: 0,
+    created_by: "main-pm",
+    assigned_to: null,
+    parent_task_id: null,
+    dependency_ids: [],
+    blocker_ids: [],
+    created_at: _iso(600),
+    updated_at: _iso(30),
+    claimed_at: null,
+    started_at: null,
+    completed_at: null,
+    target_date: null,
+    estimated_complexity: Complexity.MEDIUM,
+    nature: TaskNature.TECHNICAL,
+    task_type: TaskType.CODE,
+    project_id: "demo-project",
+    docs_complete: false,
+    pr_created: false,
+    pm_approvals: {},
+    plan: null,
+    checkpoints: [],
+    progress_updates: [],
+    commits: [],
+    dev_notes: null,
+    qa_notes: null,
+    auditor_notes: null,
+    quick_context: null,
+    self_verified: false,
+    qa_verified: null,
+    branch_name: null,
+    pr_number: null,
+    pr_url: null,
+    ...overrides,
+  };
+}
+
+export const DEMO_TASKS: Task[] = [
+  demoTask({
+    id: "demo-t1",
+    title: "Payments retry queue hardening",
+    status: TaskStatus.AWAITING_CEO_APPROVAL,
+    team: Team.BACKEND,
+    assigned_to: "be-dev-2",
+    description:
+      "Webhook deliveries that fail mid-flight are retried with exponential backoff and a dead-letter queue after five attempts.",
+    acceptance_criteria: [
+      "Failed webhook deliveries retry with exponential backoff",
+      "A delivery lands in the dead-letter queue after 5 failed attempts",
+      "The DLQ is drainable from the admin panel",
+    ],
+    pr_number: 612,
+    pr_url: "https://github.com/example/demo/pull/612",
+    branch_name: "feature/backend/DEMO612",
+  }),
+  demoTask({
+    id: "demo-t2",
+    title: "Docs search index rebuild",
+    status: TaskStatus.BLOCKED,
+    team: Team.FRONTEND,
+    assigned_to: "fe-dev-1",
+    description: "Blocked on the docs-site deploy token rotation.",
+    acceptance_criteria: ["Search results reflect pages published this week"],
+  }),
+  demoTask({
+    id: "demo-t3",
+    title: "Webhook rate limiting",
+    status: TaskStatus.IN_PROGRESS,
+    team: Team.BACKEND,
+    assigned_to: "be-dev-1",
+    acceptance_criteria: [
+      "Per-tenant rate limits enforced at the gateway",
+      "429 responses carry a Retry-After header",
+    ],
+  }),
+  demoTask({
+    id: "demo-t4",
+    title: "Metrics time-series review",
+    status: TaskStatus.AWAITING_QA,
+    team: Team.FRONTEND,
+    assigned_to: "fe-qa",
+    acceptance_criteria: ["Charts render loading, empty, and error states"],
+    pr_number: 604,
+    pr_url: "https://github.com/example/demo/pull/604",
+  }),
+  demoTask({
+    id: "demo-t5",
+    title: "Onboarding empty-state illustrations",
+    status: TaskStatus.NEEDS_REVISION,
+    team: Team.UX_UI,
+    assigned_to: "ux-dev-1",
+    revision_count: 2,
+    acceptance_criteria: [
+      "Every dashboard empty state has a branded illustration",
+    ],
+  }),
+  demoTask({
+    id: "demo-t6",
+    title: "v0.26.0 release motion",
+    status: TaskStatus.IN_PROGRESS,
+    team: Team.UX_UI,
+    assigned_to: "ux-dev-2",
+    acceptance_criteria: ["Both 9:16 and 1:1 cuts render under 20s"],
+  }),
+  demoTask({
+    id: "demo-t7",
+    title: "Self-serve workspace invites",
+    status: TaskStatus.PENDING,
+    team: Team.BACKEND,
+    acceptance_criteria: ["Invited members land in the right workspace role"],
+  }),
+  demoTask({
+    id: "demo-t8",
+    title: "Mini App today brief",
+    status: TaskStatus.COMPLETED,
+    team: Team.FRONTEND,
+    assigned_to: "fe-dev-2",
+    completed_at: _iso(1400),
+    acceptance_criteria: ["One round trip renders the whole brief"],
+  }),
+];
+
+export const DEMO_NOTIFICATIONS: Notification[] = [
+  {
+    id: "demo-n1",
+    type: NotificationType.BLOCKER_ESCALATION,
+    priority: NotificationPriority.URGENT,
+    from_agent: "main-pm",
+    to_agents: ["ceo-renzo"],
+    subject: "Docs search index rebuild is blocked",
+    body: "The docs-site deploy token expired; fe-dev-1 cannot push the rebuilt index. Needs a token rotation from the project settings.",
+    requires_ack: true,
+    is_acknowledged: false,
+    is_fully_acknowledged: false,
+    is_read: false,
+    related_task_id: "demo-t2",
+    related_message_ids: [],
+    timestamp: _iso(35),
+    expires_at: null,
+    acked_by: [],
+    acked_at: {},
+  },
+  {
+    id: "demo-n2",
+    type: NotificationType.APPROVAL,
+    priority: NotificationPriority.HIGH,
+    from_agent: "main-pm",
+    to_agents: ["ceo-renzo"],
+    subject: "Payments retry queue hardening awaits your approval",
+    body: "QA passed, docs written, PR #612 green. The root PR is assembled and gated — your call.",
+    requires_ack: false,
+    is_acknowledged: false,
+    is_fully_acknowledged: false,
+    is_read: false,
+    related_task_id: "demo-t1",
+    related_message_ids: [],
+    timestamp: _iso(95),
+    expires_at: null,
+    acked_by: [],
+    acked_at: {},
+  },
+  {
+    id: "demo-n3",
+    type: NotificationType.KNOWLEDGE_SHARE,
+    priority: NotificationPriority.NORMAL,
+    from_agent: "be-dev-2",
+    to_agents: ["ceo-renzo"],
+    subject: "Learning: idempotency keys beat retry dedupe",
+    body: "Webhook consumers with idempotency keys made the DLQ drain safe to re-run — worth adopting on every external delivery path.",
+    requires_ack: false,
+    is_acknowledged: true,
+    is_fully_acknowledged: true,
+    is_read: true,
+    related_task_id: null,
+    related_message_ids: [],
+    timestamp: _iso(400),
+    expires_at: null,
+    acked_by: ["ceo-renzo"],
+    acked_at: {},
+  },
+];