paseo-follow-up 1.2.0-beta.4 → 1.3.0-beta.1

package/OVERVIEW.md

@@ -4,14 +4,15 @@ Follow-up watches every pull request a Paseo workspace opens until the work is a
 
 ## What you see
 
-- A workspace panel that leads with status: PRs merged, what needs you, what needs fixing, a bar with one segment per PR, and what the agent is doing now.
+- Home: every workspace grouped by what it needs from you (Needs you, Follow-up is fixing, Running, Waiting on others, Quiet), with the selected one beside the list so you can allow a permission, answer, merge, reply or sign off in place, and a brief with what Follow-up did while you were away. "Open full" opens the agent and docks the same list in the workspace's explorer column.
+- In that navigator, the open workspace's row leads with status: PRs merged, what needs you, what needs fixing, a bar with one segment per PR, and what the agent is doing now.
 - A Needs you card with one button per decision: Send repairs, Merge, Resume, Retry, or Answer.
 - Questions from the main agent, each with a permanent ref (Q1, Q2…), lettered options, the agent's recommendation and what it does while it waits. Pick an option, add a note and Send it to the agent, or Copy it instead. Answered questions stay listed under their ref, and the question mode setting (Stop, Work around, Keep building) tells agents what to do until you answer.
 - A Spec link in the header to the page that sums up the workspace, usually the Claude artifact the main agent keeps up to date.
 - An Activity card: repairs sent and finished with how long they took, merges, PR actions and questions.
 - Each stack drawn top to base like Graphite, merged PRs folded away, and a sheet per PR with checks, reviewers and Merge.
 - Tasks for work that outlives a merge, manual or scheduled after a merge or deploy, with an optional delay.
-- A composer pill and a sidebar count that appear only when something needs you; the pill steps through open questions so you can answer without leaving the chat. One screen lists every tracked workspace by who is up next, and a larger view opens a workspace in two columns.
+- A composer pill and a sidebar count that appear only when something needs you; the pill steps through open questions so you can answer without leaving the chat. Home lists every workspace by who is up next, and a larger view opens a workspace in two columns.
 - Compact rows for Follow-up's own tool calls in agent chats, a card for each repair batch, and a card when the agent declares Done.
 
 ## Setup

package/README.md

@@ -24,7 +24,7 @@ Needs Node 22+ and an authenticated GitHub CLI (`gh`) on the daemon host. Merge
 
 ## Use
 
-Open a workspace, click the Follow-up icon in its header (or press ⌘K / Ctrl+K and choose **Follow-up: open for this workspace**), then **Track this workspace**. To track every workspace in a project, open the settings (the gear in the panel, or **Follow-up: project settings** in ⌘K) and turn the project on.
+Open a workspace, click the Follow-up icon in its header (or press ⌘K / Ctrl+K and choose **Follow-up: dock the navigator here**), then **Track this workspace**. To track every workspace in a project, open the settings (the gear in the panel, or **Follow-up: project settings** in ⌘K) and turn the project on.
 
 The panel reads top to bottom:
 
@@ -64,11 +64,7 @@ In the agent's chat, Follow-up's own tool calls collapse into one-line rows, you
 
 ![Follow-up rows and cards in an agent chat](docs/screenshots/follow-up-chat.png)
 
-**Follow-up: all tracked workspaces** (or the sidebar row) lists every tracked workspace, grouped by who's up next, with each stack's bar and its Spec link.
-
-![The tracked workspaces screen grouped into Needs you, Agent working, Waiting and Done](docs/screenshots/follow-up-overview.png)
-
-On a phone the panel opens as a tab, and the PR sheet and pill popover open as bottom sheets.
+On a phone the navigator opens as a tab, and the PR sheet and pill popover open as bottom sheets.
 
 ![Follow-up at phone width: the panel, a PR sheet and the pill popover](docs/screenshots/follow-up-mobile.png)
 
@@ -78,11 +74,11 @@ The 1.1 beta adds an inbox for your agents. An agent lands in **Needs you** when
 
 - **One pill per agent** above the composer, only while something needs you there. It leads with the one thing that matters (*Decision 4m*, *Permission 2m*, *Send 2 fixes*, *Merge #812*, *Add reviewers #1499*, *Finished 12m*), using the same order as the brief card and the Needs-you row. Click it for **Sign off**, **Sign off & next**, **Later…**, the workspace's questions and PR actions, *Mute this turn*, *Don't flag finishes* and *Open Follow-up*. After a sign-off it reads *Signed off · Undo* for 6 s.
 - **Sign off** in one step: the ✓ on a row, `/ok` in the composer (`/ok next` opens the next one), or ⌘K → **Follow-up: sign off & next**. Every sign-off can be undone for 24 hours.
-- **One sidebar item, Follow-up**, badged with how many agents need you (hidden at zero). It opens the inbox and your tracked workspaces.
+- **One sidebar item, Follow-up**, badged with how many agents need you (hidden at zero). It opens Home.
 - **Messages from automation don't count as yours**: agent-to-agent messages, Follow-up's own repairs, Defer, Smart Session and Session Guard continuations, and schedules leave the flag in place. Their turn end flags as usual. A script calling `paseo send` without an agent envelope counts as you until Paseo reports who sent a message.
 - **Don't flag finishes** (per agent, in the row's ⋯ or the composer's **More**): for agents that run on a schedule, such as a plugin auto-update. Permission prompts and errors still flag.
 - **First run** imports what Paseo marks unread and idle agents from the last 7 days you never replied to. Older idle agents wait in a one-time *Unsorted* list with a confirmed *Sign off all* that one Undo reverses.
-- On Paseo builds with sidebar views (Paseo `main` after 2026-11-07, expected in the next release), **Settings > Sidebar > Sidebar view > Follow-up: Needs you** puts the inbox in the sidebar, with your workspace list folded below it.
+- On Paseo builds with sidebar views (Paseo `main` after 2026-11-07, expected in the next release), **Settings > Sidebar > Sidebar view > Follow-up: Needs you** puts Home's list in the sidebar.
 - Everything is in one settings page, **Settings > Follow-up** (⌘K → **Follow-up: settings**): Projects, Questions, Sidebar & pills, and the Needs-you inbox. Turn the whole inbox off there. Off means nothing is flagged and no pill or sidebar item is shown.
 
 ### What you need to do, front and center (1.2 beta)
@@ -98,10 +94,22 @@ The content comes from a new `needs_you` tool that every root agent gets while t
 
 **Ask agents to state what they need** (on by default, in **Follow-up: display settings**): when a Claude Code root agent ends a turn without calling `needs_you`, Follow-up's Stop hook asks it once to call it, then lets it stop. It never asks twice in one turn, and skips subagents, contributors, recovery agents and agents waiting on a permission prompt. Codex and other providers get the instruction only. The settings screen shows how often agents stated what they need over the last 7 days.
 
+### Home (1.3 beta)
+
+The Follow-up sidebar row (and ⌘K → **Follow-up: Home**) opens **Home**: every workspace on the left, the one you pick on the right, answered without leaving it. It replaces the old overview and tracked-workspaces screens.
+
+- **The list**, grouped by what it needs from you: **Morning brief**, **Needs you** (blocking asks first: permissions, errors, questions; then decisions only you make, like merge and add reviewers; then finished turns to sign off, oldest first), **Follow-up is fixing** (repairs in flight), **Running**, **Waiting on others**, **Later** (snoozed) and **Quiet**, folded by project and paged, with merged and signed-off work marked ready to archive. Each row has the last ask or action, up to two badges, the PR with its checks, and the age.
+- **The detail pane** for the selected row: the brief (the ask, decisions as buttons), Allow / Deny for a pending permission, merge and add-reviewer actions, **Sign off**, **Sign off & next**, **Later…**, the agent's last few steps (read only for that agent), and a reply box. Sending a reply is you writing to the agent, so it clears Needs you. Only one button on screen is filled.
+- **The brief pane** when nothing is selected: a headline that names the first move, who you're waiting on, what cleared since the last workday, **Done while you were away** (what Follow-up did on its own, with a link to the full log) and how fresh Paseo and GitHub data is.
+- **Open full** opens the agent's chat and docks the **navigator** in that workspace's explorer column: the same list, compact, with this workspace's row expanded to its decisions, PR stack, tasks left, repair budget, activity and **Details** (the larger view). Its **Home** button goes back. The Follow-up header button re-docks it. On a phone, Home is the list and a row opens a full-height detail.
+![Home: the list grouped into Needs you, Follow-up is fixing, Running and Waiting on others, with a permission selected and Allow / Deny, Sign off and the agent's last steps on the right](docs/screenshots/follow-up-home.png)
+
+- ⌘K: **Follow-up: Home**, **Follow-up: Sign off & next**, **Follow-up: Later (tomorrow 09:00)**, **Follow-up: Next needs-you**, **Follow-up: Done while you were away**.
+
 Install the beta:
 
 ```sh
-paseo plugin update follow-through --version 1.2.0-beta.4
+paseo plugin update follow-through --version 1.3.0-beta.1
 # or, for a fresh install:
 paseo plugin install npm:paseo-follow-up@beta
 ```

package/client/brief.tsx

@@ -96,7 +96,8 @@ function Collapsed({ b, c, now }: { b: Brief; c: Colors; now: number }) {
   </View>;
 }
 
-export function BriefCard({ item, theme, layout, agentId, deps }: PluginTimelineItemProps<Brief> & { deps: BriefDeps }) {
+/** `embedded`: inside Home's detail pane, which has its own reply box and action bar, so the card drops its moves. */
+export function BriefCard({ item, theme, layout, agentId, deps, embedded = false }: PluginTimelineItemProps<Brief> & { deps: BriefDeps; embedded?: boolean }) {
   const c = theme.colors; const b = item.data; const compact = layout.compact;
   const now = useNow(60_000);
   const { height } = useWindowDimensions();
@@ -146,7 +147,7 @@ export function BriefCard({ item, theme, layout, agentId, deps }: PluginTimeline
       <Icon name={ICON[b.kind]} size={14} color={acts ? attention : tone} />
       {acts && <Text style={{ color: attention, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>Needs you</Text>}
       <Text style={{ flex: 1, minWidth: compact ? 160 : 0, color: acts ? c.foreground : c.foregroundMuted, fontSize: 14, lineHeight: 20, fontWeight: acts ? "600" : "400" }}>{b.ask}</Text>
-      {moves.map(m => <Btn key={m.kind} label={m.label} onPress={() => press(m)} c={c} compact={compact} />)}
+      {!embedded && moves.map(m => <Btn key={m.kind} label={m.label} onPress={() => press(m)} c={c} compact={compact} />)}
       <Text style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] }}>{ageText}</Text>
     </View>;
   }
@@ -156,7 +157,7 @@ export function BriefCard({ item, theme, layout, agentId, deps }: PluginTimeline
   const showExtra = !tight || details || extrasFit(b, height);
   const pad = compact ? 14 : 16;
   return <View accessibilityRole="summary" accessibilityLabel={`${acts ? "Needs you" : word(b.kind)}: ${b.ask}`}
-    style={{ marginVertical: 10, borderRadius: 12, borderWidth: 1, borderColor: border, backgroundColor: c.surface1, overflow: "hidden" }}>
+    style={{ marginVertical: embedded ? 0 : 10, borderRadius: 12, borderWidth: 1, borderColor: border, backgroundColor: c.surface1, overflow: "hidden" }}>
     <View style={{ paddingHorizontal: pad, paddingTop: compact ? 12 : 14, paddingBottom: 14, gap: tight ? 10 : 12 }}>
       <View style={{ gap: 4 }}>
         <View style={{ flexDirection: "row", alignItems: "center", gap: 7 }}>
@@ -176,8 +177,8 @@ export function BriefCard({ item, theme, layout, agentId, deps }: PluginTimeline
             open={!!open[`${d.id}:${o.letter}`]} onToggle={() => setOpen(v => ({ ...v, [`${d.id}:${o.letter}`]: !v[`${d.id}:${o.letter}`] }))}
             onPress={() => void run(`${d.id}:${o.letter}`, () => act({ agentId, briefId: b.id, decisionId: d.id, choice: o.letter }))} c={c} compact={compact} />)}
         </View>}
-        {!tight && <Text style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16 }}>{d.options.length ? `Or type ${letters(d)} in the composer, or reply in your own words.` : "Reply in the composer."}</Text>}
-        {tight && !d.options.length && <Text style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16 }}>Reply in the composer.</Text>}
+        {!tight && <Text style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16 }}>{embedded ? d.options.length ? "Or answer in your own words below." : "Reply below." : d.options.length ? `Or type ${letters(d)} in the composer, or reply in your own words.` : "Reply in the composer."}</Text>}
+        {tight && !d.options.length && <Text style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16 }}>{embedded ? "Reply below." : "Reply in the composer."}</Text>}
       </View>)}
 
       {!!b.mono && !b.ask.endsWith(b.mono) && <View style={{ borderRadius: 8, backgroundColor: withAlpha(c.statusDanger, isLight(c) ? 0.07 : 0.1), paddingHorizontal: 10, paddingVertical: 8 }}>
@@ -204,7 +205,7 @@ export function BriefCard({ item, theme, layout, agentId, deps }: PluginTimeline
         </Pressable>)}
       </View>}
 
-      {moves.length > 0 && <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+      {!embedded && moves.length > 0 && <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
         {moves.map((m, i) => <Btn key={m.kind} label={busy === m.kind ? `${m.label}…` : m.label} icon={MOVE_ICON[m.kind]} primary={i === 0} disabled={!!busy} onPress={() => press(m)} c={c} compact={compact} />)}
       </View>}
 

package/client/home-data.ts

@@ -0,0 +1,78 @@
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { buildHome, type HomeModel, type PaseoWorkspaceLite } from "../shared/home";
+import type { InboxStore } from "./inbox-store";
+import type { LiveStore } from "./live";
+
+type Descriptor = { id: string; name?: string | null; title?: string | null; projectDisplayName?: string | null; projectCustomName?: string | null; activityAt?: string | null; archivingAt?: string | null };
+const lite = (w: Descriptor): PaseoWorkspaceLite => ({ id: w.id, name: w.title || w.name || "Workspace", project: w.projectCustomName || w.projectDisplayName || null, activityAt: w.activityAt ?? null });
+
+/**
+ * Paseo's own workspace list, for the rows Follow-up doesn't track (they land in Quiet). One subscription per
+ * client, shared with the header buttons. `onAdd` and `onRemove` let the entry point register header buttons.
+ */
+export function createPaseoWorkspaces(client: PluginClientContext, hooks: { onAdd?: (id: string) => void; onRemove?: (id: string) => void } = {}) {
+  const map = new Map<string, PaseoWorkspaceLite>();
+  let version = 0;
+  let stopped = false;
+  let release: (() => Promise<void>) | null = null;
+  const listeners = new Set<() => void>();
+  let pending: ReturnType<typeof setTimeout> | null = null;
+  // Coalesce bursts (a page load, many updates) into one emit so Home rebuilds once.
+  const emit = () => { if (pending) return; pending = setTimeout(() => { pending = null; version++; for (const l of listeners) l(); }, 50); };
+  const put = (w: Descriptor) => { if (w.archivingAt) { remove(w.id); return; } map.set(w.id, lite(w)); hooks.onAdd?.(w.id); emit(); };
+  const remove = (id: string) => { if (map.delete(id)) emit(); hooks.onRemove?.(id); };
+  const unsubscribe = client.paseo.workspaces.subscribe(update => {
+    if (update.kind === "remove") remove(update.id);
+    else put(update.workspace as Descriptor);
+  });
+  void (async () => {
+    const page = await client.paseo.workspaces.list({ subscribe: {}, page: { limit: 200 } });
+    if (stopped) { await page.subscription.release(); return; }
+    release = () => page.subscription.release();
+    page.entries.forEach(w => put(w as Descriptor));
+    let cursor = page.pageInfo.nextCursor;
+    while (cursor && !stopped) {
+      const next = await client.paseo.workspaces.list({ page: { limit: 200, cursor } });
+      next.entries.forEach(w => put(w as Descriptor));
+      if (next.pageInfo.nextCursor === cursor) break;
+      cursor = next.pageInfo.nextCursor;
+    }
+  })().catch(() => undefined);
+  return {
+    subscribe(listener: () => void) { listeners.add(listener); return () => { listeners.delete(listener); }; },
+    version: () => version,
+    all: () => [...map.values()],
+    get: (id: string) => map.get(id),
+    async stop() { stopped = true; if (pending) clearTimeout(pending); listeners.clear(); unsubscribe(); await release?.(); },
+  };
+}
+export type PaseoWorkspaces = ReturnType<typeof createPaseoWorkspaces>;
+
+export type HomeSources = { inbox: InboxStore; live: LiveStore; paseo: PaseoWorkspaces };
+
+/** One shared minute clock. Ages subscribe to it themselves, so a tick never re-renders the list rows. */
+const clock = { now: Date.now(), listeners: new Set<() => void>(), timer: null as ReturnType<typeof setInterval> | null };
+function subscribeClock(listener: () => void) {
+  clock.listeners.add(listener);
+  if (!clock.timer) clock.timer = setInterval(() => { clock.now = Date.now(); for (const l of clock.listeners) l(); }, 60_000);
+  return () => { clock.listeners.delete(listener); if (!clock.listeners.size && clock.timer) { clearInterval(clock.timer); clock.timer = null; } };
+}
+export const useMinute = () => useSyncExternalStore(subscribeClock, () => clock.now, () => clock.now);
+
+/** Home's model from the three shared stores. Rebuilt when one of them changes or the minute ticks. */
+export function useHomeModel(sources: HomeSources): HomeModel {
+  const { inbox, live, paseo } = sources;
+  const a = useSyncExternalStore(inbox.subscribe, inbox.version, inbox.version);
+  const b = useSyncExternalStore(live.subscribe, live.version, live.version);
+  const c = useSyncExternalStore(paseo.subscribe, paseo.version, paseo.version);
+  const now = useMinute();
+  return useMemo(() => buildHome({ rows: inbox.rows(), tracked: live.all(), paseo: paseo.all(), now: Date.now() }), [a, b, c, now, inbox, live, paseo]);
+}
+
+/** Rebuilds a value at most every `ms` while mounted (used for the brief pane's source ages). */
+export function useTick(ms: number): number {
+  const [n, setN] = useState(0);
+  useEffect(() => { const id = setInterval(() => setN(x => x + 1), ms); return () => clearInterval(id); }, [ms]);
+  return n;
+}

package/client/home-list.tsx

@@ -0,0 +1,185 @@
+import { memo, useCallback, useMemo, useState, type ReactNode } from "react";
+import { FlatList, Pressable, Text, View } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
+import { quietFolds, type Badge, type HomeGroupId, type HomeModel, type Workstream } from "../shared/home";
+import { age } from "../shared/inbox";
+import { headlineColor, mergedColor, runningColor, tint, toneColor, withAlpha, type Colors } from "./theme";
+import { useMinute } from "./home-data";
+import { Spinner } from "./motion";
+import type { Theme } from "./kit";
+
+/**
+ * The one list: Home's left side, the docked navigator in the explorer, and (on hosts that have it) the sidebar
+ * view. Virtualised; rows are memoised on their signature and ages tick on their own, so a minute tick or a poll
+ * that changes one row redraws only that row.
+ */
+
+const QUIET_PAGE = 20;
+export const BRIEF_KEY = "brief";
+
+type Entry =
+  | { type: "brief"; key: string }
+  | { type: "header"; key: string; group: HomeGroupId; title: string; count: number; open: boolean }
+  | { type: "row"; key: string; s: Workstream }
+  | { type: "fold"; key: string; project: string; count: number; archivable: number; open: boolean }
+  | { type: "more"; key: string; project: string; left: number };
+
+export type HomeListProps = {
+  model: HomeModel;
+  theme: Theme;
+  /** Navigator and sidebar density: one-line rows without badges. */
+  dense?: boolean;
+  touch: boolean;
+  selectedKey: string | null;
+  onSelect: (key: string) => void;
+  /** The brief row's one-liner. Absent: no brief row (the navigator). */
+  briefLine?: string | null;
+  /** Content shown under the selected row (the navigator's expanded row). */
+  renderExpanded?: (s: Workstream) => ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+};
+
+export function HomeList({ model, theme, dense = false, touch, selectedKey, onSelect, briefLine, renderExpanded, header, footer }: HomeListProps) {
+  const c = theme.colors;
+  const [closed, setClosed] = useState<Set<string>>(new Set(["quiet"]));
+  const [openProjects, setOpenProjects] = useState<Set<string>>(new Set());
+  const [pages, setPages] = useState<Record<string, number>>({});
+  const toggle = useCallback((key: string) => setClosed(s => { const n = new Set(s); if (n.has(key)) n.delete(key); else n.add(key); return n; }), []);
+  const toggleProject = useCallback((p: string) => setOpenProjects(s => { const n = new Set(s); if (n.has(p)) n.delete(p); else n.add(p); return n; }), []);
+
+  const data = useMemo(() => {
+    const out: Entry[] = [];
+    if (briefLine !== undefined) out.push({ type: "brief", key: BRIEF_KEY });
+    for (const g of model.groups) {
+      const open = !closed.has(g.id);
+      out.push({ type: "header", key: `h:${g.id}`, group: g.id, title: g.title, count: g.items.length, open });
+      if (!open) continue;
+      if (g.id !== "quiet") { for (const s of g.items) out.push({ type: "row", key: s.key, s }); continue; }
+      for (const f of quietFolds(g.items)) {
+        const fopen = openProjects.has(f.project);
+        out.push({ type: "fold", key: `f:${f.project}`, project: f.project, count: f.items.length, archivable: f.archivable, open: fopen });
+        if (!fopen) continue;
+        const shown = (pages[f.project] ?? 1) * QUIET_PAGE;
+        for (const s of f.items.slice(0, shown)) out.push({ type: "row", key: s.key, s });
+        if (f.items.length > shown) out.push({ type: "more", key: `m:${f.project}`, project: f.project, left: f.items.length - shown });
+      }
+    }
+    return out;
+  }, [model, closed, openProjects, pages, briefLine]);
+
+  const render = useCallback(({ item }: { item: Entry }) => {
+    switch (item.type) {
+      case "brief": return <BriefRow theme={theme} line={briefLine ?? ""} selected={selectedKey === null || selectedKey === BRIEF_KEY} touch={touch} onSelect={onSelect} />;
+      case "header": return <GroupHeader theme={theme} title={item.title} count={item.count} open={item.open} tone={item.group === "needs" && item.count ? c.statusWarning : undefined} dense={dense} touch={touch} onPress={() => toggle(item.group)} />;
+      case "fold": return <Pressable accessibilityRole="button" aria-expanded={item.open} accessibilityState={{ expanded: item.open }} accessibilityLabel={`${item.project}, ${item.count}. ${item.open ? "Collapse" : "Expand"}`} onPress={() => toggleProject(item.project)}
+        style={state => ({ flexDirection: "row", alignItems: "center", gap: 8, minHeight: touch ? 44 : dense ? 28 : 34, paddingHorizontal: dense ? 8 : 16, backgroundColor: (state as { hovered?: boolean }).hovered ? c.surface1 : "transparent" })}>
+        <Icon name={item.open ? "ChevronDown" : "ChevronRight"} size={13} color={c.foregroundMuted} />
+        <Text numberOfLines={1} style={{ color: c.foreground, fontSize: dense ? 12 : 13, fontWeight: "500" }}>{item.project}</Text>
+        <Text style={{ color: c.foregroundMuted, fontSize: dense ? 11 : 12, fontVariant: ["tabular-nums"] }}>{item.count}</Text>
+        {item.archivable > 0 && <Text numberOfLines={1} style={{ color: c.statusSuccess, fontSize: dense ? 11 : 12 }}>· {item.archivable} ready to archive</Text>}
+      </Pressable>;
+      case "more": return <Pressable accessibilityRole="button" onPress={() => setPages(p => ({ ...p, [item.project]: (p[item.project] ?? 1) + 1 }))}
+        style={{ minHeight: touch ? 44 : 30, justifyContent: "center", paddingHorizontal: dense ? 30 : 42 }}>
+        <Text style={{ color: c.foregroundMuted, fontSize: 12 }}>Show {Math.min(QUIET_PAGE, item.left)} more of {item.left}</Text>
+      </Pressable>;
+      case "row": {
+        const selected = selectedKey === item.key;
+        return <View>
+          <Row s={item.s} theme={theme} dense={dense} touch={touch} selected={selected} onSelect={onSelect} sig={item.s.sig} />
+          {selected && renderExpanded ? renderExpanded(item.s) : null}
+        </View>;
+      }
+    }
+  }, [theme, c, dense, touch, selectedKey, onSelect, briefLine, renderExpanded, toggle, toggleProject]);
+
+  return <FlatList data={data} keyExtractor={e => e.key} renderItem={render} extraData={selectedKey}
+    initialNumToRender={30} maxToRenderPerBatch={30} windowSize={9} removeClippedSubviews={false}
+    ListHeaderComponent={header ? <>{header}</> : null} ListFooterComponent={footer ? <>{footer}</> : <View style={{ height: 32 }} />}
+    style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 8 }} />;
+}
+
+function GroupHeader({ theme, title, count, open, tone, dense, touch, onPress }: { theme: Theme; title: string; count: number; open: boolean; tone?: string; dense: boolean; touch: boolean; onPress: () => void }) {
+  const c = theme.colors;
+  return <Pressable accessibilityRole="button" aria-expanded={open} accessibilityState={{ expanded: open }} accessibilityLabel={`${title}, ${count}. ${open ? "Collapse" : "Expand"}`} onPress={onPress}
+    style={{ flexDirection: "row", alignItems: "center", gap: 6, minHeight: touch ? 44 : dense ? 28 : 34, paddingHorizontal: dense ? 8 : 16, paddingTop: dense ? 4 : 8 }}>
+    {dense && <Icon name={open ? "ChevronDown" : "ChevronRight"} size={12} color={c.foregroundMuted} />}
+    <Text accessibilityRole="header" style={{ color: tone ?? c.foregroundMuted, fontSize: 11, lineHeight: 14, fontWeight: "600", letterSpacing: 0.6, textTransform: "uppercase" }}>{title}</Text>
+    <Text style={{ color: tone ?? c.foregroundMuted, fontSize: 11, lineHeight: 14, fontVariant: ["tabular-nums"] }}>{count}</Text>
+    {!dense && !open && <Icon name="ChevronRight" size={12} color={c.foregroundMuted} />}
+  </Pressable>;
+}
+
+function BriefRow({ theme, line, selected, touch, onSelect }: { theme: Theme; line: string; selected: boolean; touch: boolean; onSelect: (key: string) => void }) {
+  const c = theme.colors;
+  return <Pressable accessibilityRole="button" accessibilityState={{ selected }} accessibilityLabel={`Morning brief. ${line}`} onPress={() => onSelect(BRIEF_KEY)}
+    style={state => ({ flexDirection: "row", alignItems: "center", gap: 10, minHeight: touch ? 52 : 40, paddingHorizontal: 16, backgroundColor: selected ? c.surface2 : (state as { hovered?: boolean }).hovered ? c.surface1 : "transparent" })}>
+    <Icon name="Sun" size={15} color={c.foregroundMuted} />
+    <Text style={{ color: c.foreground, fontSize: 13, fontWeight: "600" }}>Morning brief</Text>
+    <Text numberOfLines={1} style={{ flex: 1, color: c.foregroundMuted, fontSize: 12 }}>{line}</Text>
+  </Pressable>;
+}
+
+export function glyphColor(s: Pick<Workstream, "tone">, c: Colors): string {
+  return s.tone === "running" ? runningColor(c) : s.tone === "success" ? c.statusSuccess : headlineColor(s.tone, c);
+}
+const badgeColor = (b: Badge, c: Colors) => b.tone === "danger" ? c.statusDanger : b.tone === "warning" ? c.statusWarning : b.tone === "success" ? c.statusSuccess : b.tone === "merged" ? mergedColor(c) : c.foregroundMuted;
+
+export function BadgeView({ b, c }: { b: Badge; c: Colors }) {
+  const col = badgeColor(b, c);
+  return <View style={{ paddingHorizontal: 6, height: 20, justifyContent: "center", borderRadius: 4, backgroundColor: b.tone === "muted" ? c.surface2 : tint(col, c) }}>
+    <Text numberOfLines={1} style={{ color: col, fontSize: 11, lineHeight: 14, fontWeight: "500" }}>{b.text}</Text>
+  </View>;
+}
+
+export function PrChipView({ s, c }: { s: Workstream; c: Colors }) {
+  if (!s.pr) return null;
+  const checks = s.pr.checks;
+  return <View style={{ flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 6, height: 20, borderRadius: 4, borderWidth: 1, borderColor: c.border }}>
+    <Icon name="GitPullRequest" size={11} color={toneColor(c, s.pr.tone)} />
+    <Text style={{ color: c.foreground, fontSize: 11, lineHeight: 14, fontVariant: ["tabular-nums"] }}>{s.pr.label}</Text>
+    {checks && <Text style={{ color: checks.tone === "muted" ? c.foregroundMuted : badgeColor({ text: "", tone: checks.tone }, c), fontSize: 11, lineHeight: 14 }}>{checks.text}</Text>}
+  </View>;
+}
+
+/** The age on the right. It re-renders on the shared minute clock without touching its row. */
+export function Age({ iso, c, size = 12 }: { iso: string | null; c: Colors; size?: number }) {
+  const now = useMinute();
+  const text = age(iso, Math.max(now, Date.now()));
+  return text ? <Text style={{ color: c.foregroundMuted, fontSize: size, fontVariant: ["tabular-nums"], minWidth: 26, textAlign: "right" }}>{text}</Text> : null;
+}
+
+type RowProps = { s: Workstream; sig: string; theme: Theme; dense: boolean; touch: boolean; selected: boolean; onSelect: (key: string) => void };
+const Row = memo(function Row({ s, theme, dense, touch, selected, onSelect }: RowProps) {
+  const c = theme.colors;
+  const color = glyphColor(s, c);
+  const blocking = s.group === "needs" && s.tier === 0;
+  const muted = s.group === "quiet" || s.group === "later";
+  const line = [s.word && s.group !== "needs" ? s.word : null, s.line].filter(Boolean).join(" · ");
+  const label = [s.title + (s.agent ? ` › ${s.agent}` : ""), s.word, s.line].filter(Boolean).join(". ");
+  return <Pressable accessibilityRole="button" accessibilityState={{ selected }} accessibilityLabel={label} onPress={() => onSelect(s.key)}
+    style={state => ({ flexDirection: "row", alignItems: dense ? "flex-start" : "center", gap: dense ? 8 : 10, minHeight: touch ? 56 : dense ? 36 : 38, paddingLeft: dense ? 8 : 16, paddingRight: dense ? 8 : 16, paddingVertical: dense ? 6 : 0,
+      borderLeftWidth: 2, borderLeftColor: blocking ? withAlpha(color, 0.9) : "transparent",
+      backgroundColor: selected ? c.surface2 : (state as { hovered?: boolean }).hovered ? c.surface1 : "transparent" })}>
+    <View style={{ width: 16, alignItems: "center", paddingTop: dense ? 1 : 0 }}>
+      {s.tone === "running" && s.icon === "LoaderCircle" ? <Spinner color={color} size={13} label="Running" /> : <Icon name={s.icon} size={15} color={color} />}
+    </View>
+    {dense ? <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
+      <Text numberOfLines={1} style={{ color: muted ? c.foregroundMuted : c.foreground, fontSize: 13, lineHeight: 18, fontWeight: muted ? "400" : "500" }}>{s.title}{s.agent ? <Text style={{ color: c.foregroundMuted }}>{` › ${s.agent}`}</Text> : null}</Text>
+      {(!!s.word || !!s.line) && <Text numberOfLines={2} style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16 }}>
+        {s.word && s.group === "needs" ? <Text style={{ color, fontWeight: "600" }}>{s.word}</Text> : null}{s.word && s.group === "needs" && s.line ? " · " : ""}{line}
+      </Text>}
+      {touch && (s.pr || s.badges.length > 0) && <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 6, marginTop: 4 }}>
+        {s.badges.map(b => <BadgeView key={b.text} b={b} c={c} />)}<PrChipView s={s} c={c} />
+      </View>}
+    </View> : <View style={{ flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: 10 }}>
+      <Text numberOfLines={1} style={{ flexShrink: 0, maxWidth: "55%", color: muted ? c.foregroundMuted : c.foreground, fontSize: 13, fontWeight: muted ? "400" : "500" }}>{s.title}{s.agent ? <Text style={{ color: c.foregroundMuted, fontWeight: "400" }}>{` › ${s.agent}`}</Text> : null}</Text>
+      <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: c.foregroundMuted, fontSize: 12 }}>
+        {s.word && s.group === "needs" ? <Text style={{ color }}>{s.word}</Text> : null}{s.word && s.group === "needs" && s.line ? " · " : ""}{line}
+      </Text>
+      {s.badges.map(b => <BadgeView key={b.text} b={b} c={c} />)}
+      <PrChipView s={s} c={c} />
+    </View>}
+    <Age iso={s.at} c={c} size={dense ? 11 : 12} />
+  </Pressable>;
+}, (a, b) => a.sig === b.sig && a.selected === b.selected && a.theme === b.theme && a.dense === b.dense && a.touch === b.touch && a.onSelect === b.onSelect);