paseo-follow-up 0.3.6 → 0.4.0

package/client/panel.tsx

@@ -1,82 +1,271 @@
-import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
-import { Icon } from "@getpaseo/plugin/client/react-native";
-import { useRpc, openExternalUrl, type PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { useState } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { Icon, useToast } from "@getpaseo/plugin/client/ui";
+import { useRpc, useTabState, openExternalUrl, type PluginHostProps, type PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { getRpc, controlRpc, refreshRpc, activateRpc, sendRpc, browserStatusRpc, checkPrActionRpc, recoverRpc } from "../shared/contracts";
-import { orderedStacks, settledForDisplay } from "../shared/presentation";
+import { z } from "zod";
+import { getRpc, controlRpc, refreshRpc, activateRpc, browserStatusRpc, recoverRpc, sendRpc } from "../shared/contracts";
 import { summary, type Workspace } from "../shared/model";
 import { followUpObligations, recoveryBatch } from "../shared/follow-up";
-import { FollowTask } from "./tasks";
-import { Button, Section, StackGroup, StatusLabel, colorFor } from "./components";
+import { settledForDisplay } from "../shared/presentation";
+import { ago, sendBlocker, shortRefs } from "../shared/attention";
+import { Button, Card, CardRow, FoldRow, IconButton, errorText, text, useNow, type Theme } from "./kit";
+import { Reveal, Skeleton, Spinner } from "./motion";
+import { WorkspaceHeader } from "./header";
+import { NeedsYouCard, overviewKey, workspaceKey } from "./needs-you";
+import { StacksCard } from "./stacks";
+import { TasksCard } from "./tasks";
+import { PrSheet } from "./pr-sheet";
+import { ActivityCard, QuestionSheet } from "./questions";
+import { SpecRow, SpecSheet } from "./spec";
+import { mergedColor, tint } from "./theme";
 
-export const workspaceKey = (id: string) => ["follow-through", "workspace", id];
-export const overviewKey = ["follow-through", "overview"];
-export function FollowPanel(props: PluginWorkspacePanelProps) {
+export { overviewKey, workspaceKey };
+
+export type PanelLinks = { openSettings: () => void; openOverview: () => void; openLarge?: (workspaceId: string) => void };
+type PanelProps = PluginWorkspacePanelProps & PanelLinks;
+
+export function FollowPanel(props: PanelProps) {
   const read = useRpc(getRpc);
   const query = useQuery({ queryKey: workspaceKey(props.workspaceId), queryFn: () => read({ workspaceId: props.workspaceId }), refetchInterval: 5000 });
-  const base = { flex: 1, backgroundColor: props.theme.colors.surface0 };
-  if (query.isPending) return <View style={[base, { padding: 16, gap: 10 }]}><ActivityIndicator color={props.theme.colors.accent} /><Text style={{ color: props.theme.colors.foregroundMuted }}>Loading…</Text></View>;
-  if (query.error && !query.data?.workspace) return <View style={[base, { padding: 16, gap: 12 }]}><Text accessibilityRole="alert" style={{ color: props.theme.colors.statusDanger }}>Could not read workspace state. Refresh to retry.</Text><Button title="Retry" onPress={() => void query.refetch()} theme={props.theme} /></View>;
+  const c = props.theme.colors;
+  const base = { flex: 1, backgroundColor: c.surface0 };
+  if (query.isPending) return <PanelSkeleton theme={props.theme} compact={props.layout.compact} />;
+  if (query.error && !query.data?.workspace) return <View style={[base, { padding: props.layout.compact ? 16 : 12 }]}>
+    <Card theme={props.theme} compact={props.layout.compact} icon="CloudOff" title="Can't reach Follow-up" style={{ marginHorizontal: 0, marginTop: 0 }}>
+      <CardRow theme={props.theme}>
+        <Text accessibilityRole="alert" style={[text(c).meta, { marginBottom: 10 }]}>The plugin didn't answer: {errorText(query.error)}. It may still be starting; your tracked work is saved on the host.</Text>
+        <Button title="Try again" icon="RefreshCw" theme={props.theme} compact={props.layout.compact} loading={query.isRefetching} onPress={() => void query.refetch()} />
+      </CardRow>
+    </Card>
+  </View>;
   if (!query.data?.workspace) return <StartTracking {...props} loadError={query.data?.error} />;
-  return <WorkspaceView {...props} workspace={query.data.workspace} loadError={query.error ? "Refresh failed. Showing saved data." : query.data.error} />;
+  return <PanelWorkspace {...props} workspace={query.data.workspace} loadError={query.error ? "Refresh failed. Showing the last saved state." : query.data.error} />;
 }
 
-function StartTracking({ theme, workspaceId, layout, loadError }: PluginWorkspacePanelProps & { loadError?: string | null }) {
-  const activate = useRpc(activateRpc); const cache = useQueryClient();
-  const start = useMutation({ mutationFn: () => activate({ workspaceId }), onSuccess: () => { void cache.invalidateQueries({ queryKey: workspaceKey(workspaceId) }); void cache.invalidateQueries({ queryKey: overviewKey }); } });
-  return <View style={{ flex: 1, backgroundColor: theme.colors.surface0, padding: 16, gap: 12 }}><Icon name="GitPullRequest" size={24} color={theme.colors.accent} /><Text style={{ color: theme.colors.foreground, fontSize: 18, fontWeight: "600" }}>Follow this workspace</Text><Text style={{ color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 20 }}>Track PRs and follow-through. Auto starts off.</Text>{(loadError || start.error) && <Text accessibilityRole="alert" style={{ color: theme.colors.statusDanger }}>{loadError ?? start.error?.message}</Text>}<Button title={start.isPending ? "Starting…" : "Track this workspace"} primary theme={theme} compact={layout.compact} disabled={start.isPending} onPress={() => start.mutate()} /></View>;
+function PanelSkeleton({ theme, compact }: { theme: Theme; compact: boolean }) {
+  const c = theme.colors; const pad = compact ? 16 : 12;
+  return <View accessibilityLabel="Loading Follow-up" style={{ flex: 1, backgroundColor: c.surface0 }}>
+    <View style={{ padding: pad, gap: 10, borderBottomWidth: 1, borderBottomColor: c.border }}>
+      <Skeleton width="55%" height={14} color={c.surface2} />
+      <Skeleton width="85%" height={9} color={c.surface2} />
+      <Skeleton width="70%" height={9} color={c.surface2} />
+      <Skeleton width="100%" height={6} color={c.surface2} radius={3} />
+    </View>
+    {[0, 1].map(i => <View key={i} style={{ margin: pad, marginBottom: 0, padding: 12, gap: 10, borderRadius: 8, borderWidth: 1, borderColor: c.border }}>
+      <Skeleton width="35%" height={10} color={c.surface2} />
+      <Skeleton width="90%" height={9} color={c.surface2} />
+      <Skeleton width="75%" height={9} color={c.surface2} />
+    </View>)}
+  </View>;
 }
 
-export function WorkspaceView({ theme, layout, workspace, navigation, loadError }: PluginWorkspacePanelProps & { workspace: Workspace; loadError?: string | null }) {
-  const control = useRpc(controlRpc); const refresh = useRpc(refreshRpc); const send = useRpc(sendRpc); const cache = useQueryClient();
-  const runRecovery = useRpc(recoverRpc);
-  const browserRead = useRpc(browserStatusRpc); const checkAction = useRpc(checkPrActionRpc);
-  const browser = useQuery({ queryKey: ["follow-through", "browser"], queryFn: () => browserRead({}), refetchInterval: 5000 });
-  const invalidated = () => { void cache.invalidateQueries({ queryKey: workspaceKey(workspace.id) }); void cache.invalidateQueries({ queryKey: overviewKey }); };
-  const change = useMutation({ mutationFn: (input: Parameters<typeof control>[0]) => control(input), onSuccess: invalidated });
-  const update = useMutation({ mutationFn: () => refresh({ workspaceId: workspace.id }), onSuccess: invalidated });
-  const deliver = useMutation({ mutationFn: (batchId: string) => send({ workspaceId: workspace.id, batchId }), onSuccess: invalidated });
-  const recovery = useMutation({ mutationFn: () => runRecovery({ workspaceId: workspace.id }), onSuccess: invalidated });
-  const inspectAction = useMutation({ mutationFn: (actionId: string) => checkAction({ workspaceId: workspace.id, actionId }), onSuccess: invalidated });
-  const state = summary(workspace);
-  const outstanding = followUpObligations(workspace).filter(o => !["done", "waived"].includes(o.status));
-  const completed = followUpObligations(workspace).filter(o => ["done", "waived"].includes(o.status));
-  const batches = workspace.batches.filter(b => !recoveryBatch(b) && !["completed", "cancelled"].includes(b.state));
-  const lastRecovery = workspace.batches.filter(b => recoveryBatch(b) && b.state !== "cancelled").at(-1);
-  const latest = workspace.prs.map(p => p.snapshot?.observedAt).filter(Boolean).sort().at(-1);
-  const error = loadError ?? change.error?.message ?? update.error?.message ?? deliver.error?.message ?? null;
+function StartTracking({ theme, workspaceId, layout, loadError, openSettings }: PanelProps & { loadError?: string | null }) {
+  const c = theme.colors; const t = text(c);
+  const activate = useRpc(activateRpc); const cache = useQueryClient(); const toast = useToast();
+  const start = useMutation({ mutationFn: () => activate({ workspaceId }), onSuccess: () => { toast.show("Tracking this workspace", { variant: "success" }); void cache.invalidateQueries({ queryKey: workspaceKey(workspaceId) }); void cache.invalidateQueries({ queryKey: overviewKey }); } });
   const compact = layout.compact;
-  const stacks = orderedStacks(workspace.prs);
-  const activeStacks = stacks.filter(stack => !stack.prs.every(settledForDisplay));
-  const settledStacks = stacks.filter(stack => stack.prs.every(settledForDisplay));
-  const labelStyle = { color: theme.colors.foregroundMuted, fontSize: 12 };
-  const open = (link: string) => { void openExternalUrl(link).catch(() => undefined); };
-  return <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface0 }} contentContainerStyle={{ padding: compact ? 16 : 12, paddingBottom: 28 }}>
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}><Text style={{ color: theme.colors.foreground, fontSize: 18, fontWeight: "600", flex: 1 }}>Follow-up</Text><Pressable accessibilityRole="switch" aria-checked={workspace.enable_auto_sends} accessibilityLabel="Auto" accessibilityHint="Allow automatic sends in this workspace" accessibilityState={{ checked: workspace.enable_auto_sends, disabled: change.isPending }} disabled={change.isPending} onPress={() => change.mutate({ workspaceId: workspace.id, enable_auto_sends: !workspace.enable_auto_sends })} style={{ minHeight: compact ? 44 : 36, paddingHorizontal: 10, borderRadius: 6, borderWidth: 1, borderColor: workspace.enable_auto_sends ? theme.colors.accent : theme.colors.border, backgroundColor: workspace.enable_auto_sends ? theme.colors.accent : theme.colors.surface0, flexDirection: "row", alignItems: "center", gap: 5, opacity: change.isPending ? 0.5 : 1 }}><Icon name={workspace.enable_auto_sends ? "Check" : "Circle"} size={13} color={workspace.enable_auto_sends ? theme.colors.accentForeground : theme.colors.foregroundMuted} /><Text style={{ fontSize: 13, color: workspace.enable_auto_sends ? theme.colors.accentForeground : theme.colors.foreground }}>Auto</Text></Pressable><Button title={update.isPending ? "Refreshing…" : "Refresh"} icon="RefreshCw" theme={theme} compact={compact} disabled={update.isPending} onPress={() => update.mutate()} /></View>
-    <View style={{ marginTop: 8, gap: 6 }}><StatusLabel workspace={workspace} theme={theme} />{(state.status === "needs-you" || state.status === "done") && <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{state.reason}</Text>}{workspace.hold && <Button title="Resume follow-up" theme={theme} compact={compact} onPress={() => change.mutate({ workspaceId: workspace.id, clearHold: true })} disabled={change.isPending} />}</View>
-    {error && <Text accessibilityRole="alert" style={{ color: theme.colors.statusDanger, fontSize: 12, marginTop: 8 }}>{error}</Text>}
-    <Section title="Pull requests" count={workspace.prs.length} theme={theme} compact={compact}>{workspace.prs.length === 0 && <Text style={labelStyle}>No PRs recorded.</Text>}{workspace.prActions.filter(a => ["sending", "uncertain"].includes(a.state)).map(a => <View key={a.id} style={{ gap: 7 }}><Text style={{ ...labelStyle, color: theme.colors.statusWarning, lineHeight: 18 }}>{a.result}</Text>{a.state === "uncertain" && <Button title={inspectAction.isPending ? "Checking…" : "Check state"} theme={theme} compact={compact} disabled={inspectAction.isPending} onPress={() => inspectAction.mutate(a.id)} />}</View>)}{inspectAction.error && <Text accessibilityRole="alert" style={{ ...labelStyle, color: theme.colors.statusDanger }}>{inspectAction.error.message}</Text>}{activeStacks.map(stack => <StackGroup browserReady={browser.data?.ready ?? false} key={stack.name} name={stack.name} prs={stack.prs} workspace={workspace} theme={theme} onOpen={open} compact={compact} />)}{settledStacks.length > 0 && <Section title="Settled" count={settledStacks.reduce((count, stack) => count + stack.prs.length, 0)} theme={theme} compact={compact} initiallyExpanded={false}>{settledStacks.map(stack => <StackGroup browserReady={browser.data?.ready ?? false} key={stack.name} name={stack.name} prs={stack.prs} workspace={workspace} theme={theme} onOpen={open} compact={compact} />)}</Section>}{activeStacks.length > 0 && browser.data && !browser.data.ready && <Section title="Optional merge when ready" theme={theme} compact={compact} initiallyExpanded={false}><Text style={[labelStyle, { lineHeight: 18 }]}>Connect Chrome for Graphite’s When ready toggle.</Text><Text style={[labelStyle, { lineHeight: 18 }]}>Keep Graphite open and signed in. Send to Paseo uses your existing connection; approve toggle changes in Chrome unless you have remembered permission.</Text><Button title="Connect Graphite" theme={theme} compact={compact} onPress={() => open("https://app.graphite.com")} /></Section>}</Section>
-    <Section title="Tasks" count={outstanding.length} theme={theme} compact={compact}>
-      {!outstanding.length && <Text style={labelStyle}>No follow-through tasks.</Text>}
-      {outstanding.map(o => <FollowTask key={o.id} obligation={o} workspace={workspace} theme={theme} compact={compact} />)}
-      {completed.length > 0 && <Section title="Completed" count={completed.length} theme={theme} compact={compact} initiallyExpanded={false}>{completed.map(o => <FollowTask key={o.id} obligation={o} workspace={workspace} theme={theme} compact={compact} />)}</Section>}
-    </Section>
-    <Section title="Activity" count={batches.length} theme={theme} compact={compact} initiallyExpanded={batches.length > 0}>{batches.map(b => <View key={b.id} style={{ gap: 6, paddingVertical: 9, borderTopWidth: 1, borderColor: theme.colors.border }}><View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}><Icon name={b.state === "sent" ? "Activity" : b.state === "pending" ? "Clock" : "CircleAlert"} size={14} color={b.state === "sent" ? theme.colors.accent : theme.colors.statusWarning} /><Text style={{ color: theme.colors.foreground, fontSize: 13, fontWeight: "600" }}>{b.state === "sent" ? b.recipientAgentId && b.recipientAgentId !== workspace.mainAgentId ? "Recovering" : "Agent working" : b.state === "pending" ? workspace.enable_auto_sends ? `Auto queued · ${b.tasks.length}` : `Ready · ${b.tasks.length}` : b.state === "uncertain" ? "Check delivery" : "Blocked"}</Text></View><Section title="Batch details" count={b.tasks.length} theme={theme} compact={compact} initiallyExpanded={false}>{b.tasks.map(t => <Text key={t.key} style={[labelStyle, { lineHeight: 18 }]}>{t.title}</Text>)}{b.result && <Text style={labelStyle}>{b.result}</Text>}</Section>{b.result && <Text numberOfLines={2} style={{ color: theme.colors.statusWarning, fontSize: 12, lineHeight: 18 }}>{b.result}</Text>}{b.state === "pending" && <><Button title={deliver.isPending ? "Sending…" : b.tasks.every(t => t.kind === "inventory") ? "Run recovery" : "Send batch"} theme={theme} compact={compact} disabled={deliver.isPending || workspace.runtimeBusy || !!workspace.runtimeReason || !!workspace.hold || batches.some(other => other.id !== b.id && ["sending", "sent", "blocked", "uncertain"].includes(other.state))} onPress={() => deliver.mutate(b.id)} />{workspace.runtimeBusy && <Text style={labelStyle}>Wait for active agent work to finish.</Text>}</>}{["blocked", "uncertain"].includes(b.state) && <Button title="Retry" theme={theme} compact={compact} disabled={change.isPending} onPress={() => change.mutate({ workspaceId: workspace.id, retryBatchId: b.id })} />}</View>)}{!batches.length && <Text style={labelStyle}>No pending follow-up.</Text>}</Section>
-    <Section title="Workspace" theme={theme} compact={compact} initiallyExpanded={false}>
-    <Text style={[labelStyle, { lineHeight: 18 }]}>{workspace.goal}</Text>
-    {navigation && <View><Button title="Open main agent" theme={theme} compact={compact} onPress={() => navigation.openAgent({ agentId: workspace.mainAgentId })} /></View>}
-    <Text style={[labelStyle, { marginTop: 18 }]}>{latest ? `PR status checked ${new Date(latest).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` : "Status refresh runs even when the app is closed"}</Text>
-    <Section title="Recovery" theme={theme} compact={compact} initiallyExpanded={false}>
-      {recovery.error && <Text accessibilityRole="alert" style={{ ...labelStyle, color: theme.colors.statusWarning }}>{recovery.error.message}</Text>}
-      <Button title={recovery.isPending || lastRecovery?.state === "sending" ? "Starting recovery…" : "Run recovery"} theme={theme} compact={compact} disabled={recovery.isPending || workspace.archived || !!lastRecovery && (["pending", "sending", "sent", "uncertain"].includes(lastRecovery.state) || lastRecovery.state === "blocked" && !lastRecovery.settledAt)} onPress={() => recovery.mutate()} />
-      {lastRecovery && <View style={{ gap: 6 }}><Text style={labelStyle}>{lastRecovery.state === "sent" ? "Recovery running" : lastRecovery.state === "completed" ? "Recovery complete" : lastRecovery.state === "pending" ? "Recovery ready" : lastRecovery.state === "sending" ? "Starting recovery" : "Check recovery"}</Text>
-      {lastRecovery.result && <Section title="Result" theme={theme} compact={compact} initiallyExpanded={false}><Text style={labelStyle}>{lastRecovery.result}</Text></Section>}
-      {lastRecovery.recipientAgentId && navigation && <Button title="Open recovery agent" theme={theme} compact={compact} onPress={() => navigation.openAgent({ agentId: lastRecovery.recipientAgentId! })} />}
-      {lastRecovery.state === "pending" && <Button title="Run queued recovery" theme={theme} compact={compact} disabled={deliver.isPending} onPress={() => deliver.mutate(lastRecovery.id)} />}
-      {["blocked", "uncertain"].includes(lastRecovery.state) && <Button title="Retry recovery" theme={theme} compact={compact} disabled={change.isPending} onPress={() => change.mutate({ workspaceId: workspace.id, retryBatchId: lastRecovery.id })} />}
-      </View>}
-    </Section>
-    {workspace.completion && <Text style={{ fontSize: 12, color: colorFor(theme, state.status), marginTop: 8 }}>Ready to archive.</Text>}
-    </Section>
+  // The empty state teaches with the panel's own rail: the three things Follow-up does, as three stack nodes.
+  const points: { icon: string; color: string; line: string }[] = [
+    { icon: "GitMerge", color: mergedColor(c), line: "Follows every PR this workspace opens, stack by stack, with review and CI state." },
+    { icon: "Wrench", color: c.statusDanger, line: "Gathers conflicts, failing checks and review threads into one repair batch for the main agent." },
+    { icon: "Check", color: c.statusSuccess, line: "Tells you when the agent declares the work done and it's safe to archive." },
+  ];
+  return <ScrollView style={{ flex: 1, backgroundColor: c.surface0 }} contentContainerStyle={{ padding: compact ? 16 : 12, paddingTop: compact ? 20 : 16, gap: 14 }}>
+    <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+      <Text accessibilityRole="header" style={[t.title, { flex: 1 }]}>Track this workspace</Text>
+      <View style={{ marginVertical: compact ? -12 : -4, marginRight: compact ? -10 : -4 }}><IconButton icon="Settings" label="Follow-up settings" onPress={openSettings} theme={theme} compact={compact} /></View>
+    </View>
+    <View>
+      {points.map((p, i) => <View key={p.icon} style={{ flexDirection: "row", gap: 10 }}>
+        <View style={{ width: 18, alignItems: "center" }}>
+          <View style={{ width: 18, height: 18, borderRadius: 9, alignItems: "center", justifyContent: "center", backgroundColor: tint(p.color, c) }}><Icon name={p.icon} size={11} color={p.color} /></View>
+          {i < points.length - 1 && <View style={{ width: 2, flex: 1, minHeight: 10, backgroundColor: c.border }} />}
+        </View>
+        <Text style={[t.meta, { flex: 1, color: c.foreground, paddingTop: 1, paddingBottom: i < points.length - 1 ? 14 : 0 }]}>{p.line}</Text>
+      </View>)}
+    </View>
+    <Text style={t.meta}>Nothing is sent, merged or archived without your click. Auto-send stays off until you turn it on for this workspace.</Text>
+    {(loadError || start.error) && <Text accessibilityRole="alert" style={[t.meta, { color: c.statusDanger }]}>{start.error ? errorText(start.error) : loadError}</Text>}
+    <Button title="Track this workspace" kind="primary" icon="Plus" theme={theme} compact={compact} loading={start.isPending} onPress={() => start.mutate()} />
+    <Text style={t.small}>To track every workspace in a project, turn it on in Settings. Tracking data stays on this host.</Text>
   </ScrollView>;
 }
+
+/** The main agent's current repairs: what was sent and when. Pending batches live in Needs you. */
+function AgentCard({ workspace: w, theme, compact, now, openAgent }: { workspace: Workspace; theme: Theme; compact: boolean; now: number; openAgent?: (id: string) => void }) {
+  const c = theme.colors; const t = text(c);
+  const sent = w.batches.find(b => !recoveryBatch(b) && ["sending", "sent"].includes(b.state));
+  const queued = w.enable_auto_sends ? w.batches.find(b => !recoveryBatch(b) && b.state === "pending") : undefined;
+  const batch = sent ?? queued;
+  if (!batch) return null;
+  const recipient = batch.recipientAgentId && batch.recipientAgentId !== w.mainAgentId ? batch.recipientAgentId : w.mainAgentId;
+  const blocker = queued && !sent ? sendBlocker(w, queued) : null;
+  return <Card theme={theme} compact={compact} icon="Bot" title={recipient === w.mainAgentId ? "Main agent is on it" : "Recovery agent is on it"}
+    right={openAgent && <Button theme={theme} compact={compact} kind="ghost" icon="ArrowUpRight" title="Open" accessibilityLabel="Open the agent's chat" onPress={() => openAgent(recipient)} />}>
+    <CardRow theme={theme}>
+      <Text style={[t.meta, { marginBottom: 6 }]}>{sent ? `Sent ${batch.tasks.length} repair${batch.tasks.length === 1 ? "" : "s"} ${ago(batch.sentAt, now)}. Follow-up waits for the agent to report back.` : `${batch.tasks.length} repair${batch.tasks.length === 1 ? "" : "s"} queued · ${blocker ?? "sends when the agent is idle"}`}</Text>
+      {batch.tasks.map((task, i) => <View key={task.key} style={{ flexDirection: "row", gap: 6 }}>
+        <Text style={[t.meta, { width: 16, fontVariant: ["tabular-nums"] }]}>{i + 1}.</Text>
+        <Text style={[t.meta, { flex: 1 }]}>{shortRefs(task.title, w)}</Text>
+      </View>)}
+      {!!batch.result && <Text style={[t.meta, { marginTop: 6, color: c.statusWarning }]}>{batch.result}</Text>}
+    </CardRow>
+  </Card>;
+}
+
+/** The moment the loop closes: the agent declared Done and every requirement settled. */
+function ShippedCard({ workspace: w, theme, compact, now }: { workspace: Workspace; theme: Theme; compact: boolean; now: number }) {
+  const c = theme.colors; const t = text(c);
+  if (summary(w, now).status !== "done" || !w.completion) return null;
+  const merged = w.prs.filter(p => p.snapshot?.state === "MERGED").length;
+  return <Reveal>
+    <View style={{ marginHorizontal: compact ? 16 : 12, marginTop: 12, borderRadius: 10, padding: 14, gap: 10, backgroundColor: tint(c.statusSuccess, c), borderWidth: 1, borderColor: tint(c.statusSuccess, c) }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+        <View style={{ width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: "center", backgroundColor: c.statusSuccess }}><Icon name="Check" size={17} color={c.surface0} /></View>
+        <View style={{ flex: 1 }}>
+          <Text accessibilityRole="header" style={[t.label, { fontSize: 14, color: c.foreground }]}>Shipped</Text>
+          <Text style={t.meta}>{merged ? `${merged} PR${merged === 1 ? "" : "s"} merged · ` : ""}declared {ago(w.completion.declaredAt, now)}</Text>
+        </View>
+      </View>
+      <Text selectable style={[t.body, { color: c.foreground }]}>{w.completion.summary}</Text>
+      <Text style={t.meta}>Archive the workspace from its menu when you're finished with it.</Text>
+    </View>
+  </Reveal>;
+}
+
+/** Quiet extras: the main agent, optional recovery and the Graphite merge-when-ready connection. */
+function WorkspaceCard({ workspace: w, theme, compact, open, toggle, openAgent, browserReady, openOverview, editSpec }: { workspace: Workspace; theme: Theme; compact: boolean; open: (key: string) => boolean; toggle: (key: string) => void; openAgent?: (id: string) => void; browserReady: boolean | null; openOverview: () => void; editSpec: () => void }) {
+  const c = theme.colors; const t = text(c);
+  const control = useRpc(controlRpc); const send = useRpc(sendRpc); const runRecovery = useRpc(recoverRpc); const cache = useQueryClient(); const toast = useToast();
+  const invalidate = () => { void cache.invalidateQueries({ queryKey: workspaceKey(w.id) }); void cache.invalidateQueries({ queryKey: overviewKey }); };
+  const fail = (e: Error) => toast.error(errorText(e));
+  const recovery = useMutation({ mutationFn: () => runRecovery({ workspaceId: w.id }), onSuccess: invalidate, onError: fail });
+  const runQueued = useMutation({ mutationFn: (batchId: string) => send({ workspaceId: w.id, batchId }), onSuccess: invalidate, onError: fail });
+  const retry = useMutation({ mutationFn: (batchId: string) => control({ workspaceId: w.id, retryBatchId: batchId }), onSuccess: invalidate, onError: fail });
+  const last = w.batches.filter(b => recoveryBatch(b) && b.state !== "cancelled").at(-1);
+  const recoveryState = last ? last.state === "sent" ? "Recovery is running" : last.state === "completed" ? "Last recovery finished" : last.state === "pending" ? "Recovery is ready to run" : last.state === "sending" ? "Starting recovery" : "Recovery needs a check" : null;
+  const active = w.prs.some(p => !settledForDisplay(p));
+  const shown = open("workspace");
+  const openUrl = (url: string) => { void openExternalUrl(url).catch(() => undefined); };
+  return <View style={{ marginHorizontal: compact ? 16 : 12, marginTop: 12, borderRadius: 8, borderWidth: 1, borderColor: c.border, overflow: "hidden" }}>
+    <View style={{ marginTop: -1 }}><FoldRow theme={theme} open={shown} onPress={() => toggle("workspace")} icon="SlidersHorizontal" iconColor={c.foregroundMuted} label="Spec, agent and recovery" /></View>
+    {shown && <>
+      <SpecRow workspace={w} theme={theme} compact={compact} onEdit={editSpec} />
+      <CardRow theme={theme}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+          <View style={{ flex: 1, minWidth: 160, gap: 2 }}>
+            <Text style={t.label}>Main agent</Text>
+            <Text style={t.meta}>Owns the PRs, tasks and the Done call. Repairs go here.</Text>
+          </View>
+          {openAgent && <Button theme={theme} compact={compact} icon="MessageSquare" title="Open" accessibilityLabel="Open main agent" onPress={() => openAgent(w.mainAgentId)} />}
+        </View>
+      </CardRow>
+      <CardRow theme={theme}>
+        <View style={{ gap: 8 }}>
+          <View style={{ gap: 2 }}>
+            <Text style={t.label}>Recovery</Text>
+            <Text style={t.meta}>A separate agent reads this workspace's history to find PRs and tasks Follow-up missed. It never edits code or messages the main agent.</Text>
+          </View>
+          {recoveryState && <Text style={[t.meta, { color: c.foreground }]}>{recoveryState}{last?.settledAt ? ` · ${ago(last.settledAt)}` : ""}</Text>}
+          {!!last?.result && <Text numberOfLines={4} selectable style={t.meta}>{last.result}</Text>}
+          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+            {last?.state === "pending" ? <Button title="Run queued recovery" theme={theme} compact={compact} loading={runQueued.isPending} onPress={() => runQueued.mutate(last.id)} />
+              : <Button title={recovery.isPending || last?.state === "sending" ? "Starting recovery…" : "Run recovery"} icon="History" theme={theme} compact={compact} loading={recovery.isPending}
+                disabled={recovery.isPending || w.archived || !!last && (["pending", "sending", "sent", "uncertain"].includes(last.state) || last.state === "blocked" && !last.settledAt)} onPress={() => recovery.mutate()} />}
+            {last?.recipientAgentId && openAgent && <Button title="Open recovery agent" kind="ghost" theme={theme} compact={compact} onPress={() => openAgent(last.recipientAgentId!)} />}
+            {last && ["blocked", "uncertain"].includes(last.state) && <Button title="Retry recovery" theme={theme} compact={compact} loading={retry.isPending} onPress={() => retry.mutate(last.id)} />}
+          </View>
+        </View>
+      </CardRow>
+      {active && browserReady === false && <CardRow theme={theme}>
+        <View style={{ gap: 8 }}>
+          <View style={{ gap: 2 }}>
+            <Text style={t.label}>Merge when ready</Text>
+            <Text style={t.meta}>Optional. With Send to Paseo paired and Graphite open in Chrome, each open PR gets a When ready switch. Chrome asks before each change unless you allowed it for the repository.</Text>
+          </View>
+          <Button title="Open Graphite" icon="ExternalLink" theme={theme} compact={compact} accessibilityLabel="Connect Graphite" onPress={() => openUrl("https://app.graphite.com")} />
+        </View>
+      </CardRow>}
+      <CardRow theme={theme}>
+        <Button title="All tracked workspaces" kind="ghost" icon="LayoutList" theme={theme} compact={compact} onPress={openOverview} />
+      </CardRow>
+    </>}
+  </View>;
+}
+
+const folds = z.object({ open: z.array(z.string()) });
+function historyLabel(w: Workspace): string {
+  const stacks = new Set(w.prs.map(p => p.stack)).size;
+  const tasks = followUpObligations(w).filter(o => ["done", "waived"].includes(o.status)).length;
+  return [`${w.prs.length} PR${w.prs.length === 1 ? "" : "s"} in ${stacks} stack${stacks === 1 ? "" : "s"}`, tasks ? `${tasks} task${tasks === 1 ? "" : "s"} done` : null].filter(Boolean).join(" · ");
+}
+
+export type Folds = { isOpen: (key: string) => boolean; toggle: (key: string) => void };
+/** Fold choices shared by a workspace's panel and its larger view during the app session. */
+const sessionFolds = new Map<string, string[]>();
+export function useSessionFolds(workspaceId: string): Folds {
+  const [open, setOpen] = useState<string[]>(() => sessionFolds.get(workspaceId) ?? []);
+  return { isOpen: key => open.includes(key), toggle: key => { const next = open.includes(key) ? open.filter(k => k !== key) : [...open, key]; sessionFolds.set(workspaceId, next); setOpen(next); } };
+}
+
+/** The panel keeps its folds in the tab's persisted state and mirrors them for the larger view. */
+function PanelWorkspace(props: PanelProps & { workspace: Workspace; loadError?: string | null }) {
+  const [state, setState] = useTabState(props.tab, folds, { open: sessionFolds.get(props.workspaceId) ?? [] });
+  const isOpen = (key: string) => state.open.includes(key);
+  const toggle = (key: string) => { const next = isOpen(key) ? state.open.filter(k => k !== key) : [...state.open, key]; sessionFolds.set(props.workspaceId, next); setState({ open: next }); };
+  const { openLarge } = props;
+  return <WorkspaceView {...props} folds={{ isOpen, toggle }} resize={openLarge ? { icon: "Maximize2", label: "Open the larger view", onPress: () => openLarge(props.workspaceId) } : null} />;
+}
+
+/** Two columns from this content width: actions on the left, the stacks on the right. */
+export const WIDE_MIN = 820;
+
+export function WorkspaceView({ theme, layout, workspace: w, navigation, loadError, openSettings, openOverview, folds: { isOpen, toggle }, resize, large = false }: PluginHostProps & {
+  navigation?: PluginWorkspacePanelProps["navigation"]; workspace: Workspace; loadError?: string | null; openSettings: () => void; openOverview: () => void;
+  folds: Folds; resize: { icon: "Maximize2" | "Minimize2"; label: string; onPress: () => void } | null; large?: boolean;
+}) {
+  const control = useRpc(controlRpc); const refresh = useRpc(refreshRpc); const browserRead = useRpc(browserStatusRpc);
+  const cache = useQueryClient(); const toast = useToast();
+  const now = useNow(30_000);
+  const compact = layout.compact;
+  const [width, setWidth] = useState(0);
+  const wide = !compact && width >= WIDE_MIN;
+  const [sheet, setSheet] = useState<{ key: string; intent: "merge" | "reviewers" | null } | null>(null);
+  const [question, setQuestion] = useState<string | null>(null);
+  const [specOpen, setSpecOpen] = useState(false);
+  const browser = useQuery({ queryKey: ["follow-through", "browser"], queryFn: () => browserRead({}), refetchInterval: 5000 });
+  const invalidated = () => { void cache.invalidateQueries({ queryKey: workspaceKey(w.id) }); void cache.invalidateQueries({ queryKey: overviewKey }); };
+  const auto = useMutation({ mutationFn: (next: boolean) => control({ workspaceId: w.id, enable_auto_sends: next }), onSuccess: (_, next) => { toast.show(next ? "Auto-send on for this workspace" : "Auto-send off · repairs wait for your click"); invalidated(); }, onError: e => toast.error(errorText(e)) });
+  const update = useMutation({ mutationFn: () => refresh({ workspaceId: w.id }), onSuccess: () => setTimeout(invalidated, 1200), onError: e => toast.error(errorText(e)) });
+  const openAgent = navigation ? (agentId: string) => navigation.openAgent({ agentId }) : undefined;
+  const done = summary(w, now).status === "done";
+  const openPr = (key: string) => setSheet({ key, intent: null });
+  // The expand button only appears while the panel is narrow; a wide panel or the larger view keeps its collapse button.
+  const resizeShown = compact ? null : resize?.icon === "Maximize2" && wide ? null : resize;
+  const header = <WorkspaceHeader workspace={w} theme={theme} compact={compact} now={now} onSettings={openSettings} onRefresh={() => update.mutate()} refreshing={update.isPending} onAuto={next => auto.mutate(next)} autoPending={auto.isPending} notice={loadError ?? null} onOpenPr={openPr} resize={resizeShown} hideTitle={large} />;
+  const shipped = <ShippedCard workspace={w} theme={theme} compact={compact} now={now} />;
+  const needs = <NeedsYouCard workspace={w} theme={theme} compact={compact} now={now} actions={{ openAgent, openPr: (key, intent) => setSheet({ key, intent }), openQuestion: setQuestion }} />;
+  const agent = <AgentCard workspace={w} theme={theme} compact={compact} now={now} openAgent={openAgent} />;
+  // Once shipped, the stack and tasks are history: one quiet fold instead of two near-empty cards.
+  const history = done && <View style={{ marginHorizontal: compact ? 16 : 12, marginTop: 12, borderRadius: 8, borderWidth: 1, borderColor: theme.colors.border, overflow: "hidden" }}>
+    <View style={{ marginTop: -1 }}><FoldRow theme={theme} open={isOpen("history")} onPress={() => toggle("history")} icon="History" iconColor={theme.colors.foregroundMuted} label={historyLabel(w)} /></View>
+  </View>;
+  const showWork = !done || isOpen("history");
+  const stacks = showWork && <StacksCard workspace={w} theme={theme} compact={compact} open={isOpen} toggle={toggle} onOpen={openPr} wide={wide} />;
+  const tasks = showWork && <TasksCard workspace={w} theme={theme} compact={compact} open={isOpen} toggle={toggle} onOpenQuestion={setQuestion} />;
+  const log = <ActivityCard workspace={w} theme={theme} compact={compact} now={now} open={isOpen} toggle={toggle} onOpenQuestion={setQuestion} />;
+  const extras = <WorkspaceCard workspace={w} theme={theme} compact={compact} open={isOpen} toggle={toggle} openAgent={openAgent} browserReady={browser.data ? browser.data.ready : null} openOverview={openOverview} editSpec={() => setSpecOpen(true)} />;
+  return <View onLayout={event => setWidth(event.nativeEvent.layout.width)} style={{ flex: 1, backgroundColor: theme.colors.surface0 }}>
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 20, ...(large ? { maxWidth: 1240, width: "100%", alignSelf: "center", paddingHorizontal: 12 } : null) }}>
+      {header}
+      {wide ? <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+        <View style={{ flex: 5, minWidth: 0 }}>{shipped}{needs}{agent}{history}{tasks}</View>
+        <View style={{ flex: 6, minWidth: 0 }}>{stacks}{log}{extras}</View>
+      </View> : <>{shipped}{needs}{agent}{history}{stacks}{tasks}{log}{extras}</>}
+    </ScrollView>
+    <PrSheet workspace={w} prKey={sheet?.key ?? null} intent={sheet?.intent ?? null} theme={theme} compact={compact} browserReady={browser.data?.ready ?? false} onClose={() => setSheet(null)} />
+    <QuestionSheet workspace={w} questionId={question} theme={theme} compact={compact} openAgent={openAgent} onClose={() => setQuestion(null)} />
+    <SpecSheet workspace={w} open={specOpen} theme={theme} compact={compact} onClose={() => setSpecOpen(false)} />
+  </View>;
+}

package/client/pr-controls.tsx

@@ -1,22 +1,30 @@
-import { useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { useEffect, useRef, useState } from "react";
+import { Text, View } from "react-native";
 import { useRpc } from "@getpaseo/plugin/client";
+import { Icon, useToast } from "@getpaseo/plugin/client/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { confirmPrActionRpc, preparePrActionRpc, prControlStatusRpc, requestReviewersRpc } from "../shared/contracts";
-import { prActionBlocks, type ActionPlan, type PrActionKind } from "../shared/pr-actions";
+import { mergeBlockers, prActionBlocks, type ActionPlan, type PrActionKind } from "../shared/pr-actions";
+import { mergeQueued, mergeReady } from "../shared/attention";
 import type { Pr, Workspace } from "../shared/model";
-import { Button, type Theme } from "./components";
+import { Button, Switch, errorText, text, type Theme } from "./kit";
 import { defaultReviewers, noReviewers } from "../shared/reviewers";
 
-export function PrControls({ pr, workspace, theme, compact, browserReady }: { browserReady: boolean; pr: Pr; workspace: Workspace; theme: Theme; compact: boolean }) {
+/**
+ * Merge, merge-when-ready and reviewer requests for one PR. Every write needs a click; Merge always
+ * prepares a fresh plan and asks again before anything reaches Graphite.
+ */
+export function PrControls({ pr, workspace, theme, compact, browserReady, intent }: { browserReady: boolean; pr: Pr; workspace: Workspace; theme: Theme; compact: boolean; intent?: "merge" | "reviewers" | null }) {
   const read = useRpc(prControlStatusRpc); const prepare = useRpc(preparePrActionRpc); const confirm = useRpc(confirmPrActionRpc); const cache = useQueryClient();
   const requestReviewers = useRpc(requestReviewersRpc);
+  const toast = useToast();
+  const c = theme.colors; const t = text(c);
   const [plan, setPlan] = useState<ActionPlan | null>(null); const [notice, setNotice] = useState<string | null>(null);
   const statusKey = ["follow-through", "pr-controls", workspace.id, pr.key, pr.snapshot?.head];
   const status = useQuery({ queryKey: statusKey, queryFn: () => read({ workspaceId: workspace.id, prKey: pr.key }), refetchInterval: 5000, enabled: browserReady });
   const invalidate = () => { void cache.invalidateQueries({ queryKey: ["follow-through", "workspace", workspace.id] }); void cache.invalidateQueries({ queryKey: ["follow-through", "pr-controls", workspace.id] }); void cache.invalidateQueries({ queryKey: ["follow-through", "overview"] }); };
-  const reviewRequest = useMutation({ mutationFn: () => requestReviewers({ workspaceId: workspace.id, prKey: pr.key }), onSuccess: reply => { setNotice(reply.result); invalidate(); }, onError: invalidate });
-  const submit = useMutation({ mutationFn: (input: { planId: string; scope: "target" | "downstack" }) => confirm(input), onSuccess: reply => { setPlan(null); setNotice(reply.result); invalidate(); }, onError: invalidate });
+  const reviewRequest = useMutation({ mutationFn: () => requestReviewers({ workspaceId: workspace.id, prKey: pr.key }), onSuccess: reply => { setNotice(reply.result); if (reply.state === "submitted") toast.show(reply.result, { variant: "success" }); invalidate(); }, onError: invalidate });
+  const submit = useMutation({ mutationFn: (input: { planId: string; scope: "target" | "downstack" }) => confirm(input), onSuccess: reply => { setPlan(null); setNotice(reply.result); if (reply.state === "submitted") toast.show(reply.result, { variant: "success" }); invalidate(); }, onError: invalidate });
   const checking = useMutation({ mutationFn: (kind: PrActionKind) => prepare({ workspaceId: workspace.id, prKey: pr.key, kind }), onSuccess: result => {
     if (result.kind !== "merge" && result.prs.length === 1 && !result.blockers.length && !result.prs[0].blockers.length) submit.mutate({ planId: result.id, scope: "target" });
     else setPlan(result);
@@ -26,41 +34,50 @@ export function PrControls({ pr, workspace, theme, compact, browserReady }: { br
   const actual = browserReady ? status.data?.pr : null;
   const known = !!actual && !status.error && !status.data?.error;
   const enabled = known && actual.mergeWhenReady;
-  const queued = actual?.merging || ["QUEUED_TO_MERGE", "WAITING_TO_MERGE", "REBASING", "HANDED_OFF_TO_EXTERNAL_MERGE_QUEUE"].includes(pr.snapshot?.graphiteMergeStatus ?? "");
+  const queued = actual?.merging || mergeQueued(pr);
   const recentlySubmitted = workspace.prActions.some(a => a.kind === "merge" && a.state === "submitted" && a.heads[pr.key] === pr.snapshot?.head && Date.now() - Date.parse(a.createdAt) < 30_000);
-  const canMerge = !pr.error && pr.snapshot?.complete && pr.snapshot.state === "OPEN" && pr.snapshot.reviewDecision === "APPROVED" && !pr.snapshot.draft && !pr.snapshot.conflict && !pr.snapshot.failedChecks.length && !pr.snapshot.checksPending && !queued && !recentlySubmitted;
+  const canMerge = mergeReady(pr, workspace) && !actual?.merging;
   const disabled = busy || reviewRequest.isPending || pendingAction || workspace.archived;
   const missingReviewers = noReviewers(pr);
   const reviewers = defaultReviewers(pr.repo).filter(r => r.login.toLowerCase() !== pr.snapshot?.reviewers?.author?.toLowerCase());
   const begin = (kind: PrActionKind) => { setPlan(null); setNotice(null); submit.reset(); checking.reset(); checking.mutate(kind); };
-  const muted = { color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 18 };
-  const error = checking.error?.message ?? submit.error?.message ?? reviewRequest.error?.message ?? (browserReady ? status.data?.error : null) ?? null;
+  const failure = checking.error ?? submit.error ?? reviewRequest.error;
+  const error = failure ? errorText(failure) : (browserReady ? status.data?.error : null) ?? null;
   const scopeBlocked = (scope: "target" | "downstack") => !!plan && (plan.blockers.length > 0 || (scope === "target" ? plan.prs.slice(-1) : plan.prs).some(p => p.blockers.length > 0));
   const act = (scope: "target" | "downstack") => { if (plan) submit.mutate({ planId: plan.id, scope }); };
-  if (!browserReady && !canMerge && !queued && !recentlySubmitted && !busy && !error && !notice && !plan && !missingReviewers) return null;
-  return <View style={{ gap: 5, paddingLeft: 0 }}>
-    {missingReviewers && <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
-      <Text style={{ ...muted, color: theme.colors.statusWarning }}>No reviewers</Text>
-      {!pr.snapshot?.draft && reviewers.length > 0 && <Button title={reviewRequest.isPending ? "Requesting…" : "Add reviewers"} accessibilityLabel={`Add reviewers: ${reviewers.map(r => r.name).join(" and ")} for ${pr.repo} pull request ${pr.number}`} icon="UserPlus" theme={theme} compact={compact} disabled={disabled} onPress={() => { setNotice(null); reviewRequest.mutate(); }} />}
+  // Opening the sheet from "Merge…" starts the read-only check; the merge itself still needs the confirm click.
+  const started = useRef(false);
+  useEffect(() => { if (intent === "merge" && canMerge && !disabled && !started.current) { started.current = true; begin("merge"); } }, [intent, canMerge]);
+  if (pr.snapshot?.state !== "OPEN") return null;
+  const waitingFor = mergeBlockers(pr).filter(b => !b.startsWith("Graphite "));
+  return <View style={{ gap: 10 }}>
+    {missingReviewers && <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
+      <Icon name="UserX" size={14} color={c.statusWarning} />
+      <Text style={[t.meta, { flex: 1, minWidth: 120, color: c.statusWarning }]}>No reviewers yet</Text>
+      {!pr.snapshot?.draft && reviewers.length > 0 && <Button title={reviewRequest.isPending ? "Requesting…" : "Add reviewers"} accessibilityLabel={`Add reviewers: ${reviewers.map(r => r.name).join(" and ")} for ${pr.repo} pull request ${pr.number}`} icon="UserPlus" theme={theme} compact={compact} disabled={disabled} loading={reviewRequest.isPending} onPress={() => { setNotice(null); reviewRequest.mutate(); }} />}
     </View>}
-    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 }}>
-      {browserReady && <Pressable accessibilityRole="switch" aria-checked={known ? !!enabled : "mixed"} aria-valuetext={known ? enabled ? "On" : "Off" : "Unknown"} accessibilityLabel={`Merge when ready for ${pr.repo} pull request ${pr.number}`} accessibilityValue={{ text: known ? enabled ? "On" : "Off" : "Unknown" }} accessibilityState={{ checked: !!enabled, disabled: disabled || !known }} disabled={disabled || !known} onPress={() => begin(enabled ? "disable_mwr" : "enable_mwr")} style={{ minHeight: compact ? 44 : 36, flex: 1, flexDirection: "row", gap: 7, alignItems: "center", opacity: disabled ? 0.5 : 1 }}>
-        <View style={{ width: 30, height: 18, borderRadius: 9, backgroundColor: enabled ? theme.colors.accent : theme.colors.surface2, borderWidth: 1, borderColor: enabled ? theme.colors.accent : theme.colors.border }}><View style={{ width: 12, height: 12, borderRadius: 6, position: "absolute", top: 2, left: enabled ? 14 : 2, backgroundColor: known ? enabled ? theme.colors.accentForeground : theme.colors.foregroundMuted : theme.colors.border }} /></View>
-        <Text style={{ ...muted, flexShrink: 1 }}>When ready{!known ? " · unknown" : ""}</Text>
-      </Pressable>}
-      {(canMerge || queued || recentlySubmitted || busy) && <Button title={busy ? checking.isPending ? "Checking…" : "Saving…" : queued ? "Queued" : recentlySubmitted ? "Submitted" : "Merge"} icon={queued ? "Clock" : "GitMerge"} theme={theme} compact={compact} primary={!!canMerge} disabled={disabled || !canMerge} onPress={() => begin("merge")} />}
-    </View>
-    {error && <Text accessibilityRole="alert" style={{ ...muted, color: theme.colors.statusDanger }}>{error}</Text>}
-    {notice && <Text accessibilityLiveRegion="polite" style={muted}>{notice}</Text>}
-    {plan && (plan.kind === "merge" || browserReady) && <View style={{ gap: 8, backgroundColor: theme.colors.surface1, borderRadius: 6, padding: 10 }}>
-      <Text style={{ color: theme.colors.foreground, fontSize: 13, fontWeight: "600", lineHeight: 19 }}>{plan.kind === "merge" ? plan.prs.length > 1 ? "Merge the PRs underneath too?" : "Merge this PR?" : `${plan.kind === "enable_mwr" ? "Enable" : "Disable"} for downstack too?`}</Text>
-      <Text style={muted}>{plan.kind === "merge" ? plan.prs.length > 1 ? `#${pr.number} depends on ${plan.prs.length - 1} unmerged PR${plan.prs.length === 2 ? "" : "s"}. Merge these ${plan.prs.length} PRs in order:` : "Graphite will merge using this repository’s settings and required protections." : `Change merge when ready for #${pr.number} only, or for all ${plan.prs.length} listed PRs.`}</Text>
-      {plan.prs.map(p => <View key={p.key} style={{ gap: 2 }}><Text style={{ color: theme.colors.foreground, fontSize: 12, lineHeight: 18 }}>#{p.number} · {p.title}</Text>{p.blockers.length > 0 && <Text style={{ ...muted, color: theme.colors.statusWarning }}>{p.blockers.join(" · ")}</Text>}</View>)}
-      {plan.blockers.map(blocker => <Text key={blocker} style={{ ...muted, color: theme.colors.statusWarning }}>{blocker}</Text>)}
-      <View style={{ gap: 6 }}>
-        <Button title={submit.isPending ? "Submitting…" : plan.kind === "merge" ? plan.prs.length > 1 ? `Merge all ${plan.prs.length} PRs` : `Merge #${pr.number}` : `${plan.kind === "enable_mwr" ? "Enable" : "Disable"} for all ${plan.prs.length} PRs`} primary theme={theme} compact={compact} disabled={submit.isPending || scopeBlocked("downstack")} onPress={() => act("downstack")} />
+    {!plan && <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
+      {(canMerge || queued || recentlySubmitted || busy) ? <Button title={busy ? checking.isPending ? "Checking…" : "Submitting…" : queued ? "Queued to merge" : recentlySubmitted ? "Submitted" : `Merge #${pr.number}`} icon={queued ? "Clock" : "GitMerge"} theme={theme} compact={compact} kind={canMerge ? "primary" : "secondary"} loading={busy} disabled={disabled || !canMerge} onPress={() => begin("merge")} />
+        : <Text style={[t.meta, { flex: 1 }]}>{waitingFor.length ? `Merge opens when it clears: ${waitingFor.join(", ").toLowerCase()}.` : "Waiting for Graphite to report it ready to merge."}</Text>}
+      {browserReady && <Switch theme={theme} compact={compact} label={`When ready${known ? "" : " · unknown"}`} accessibilityLabel={`Merge when ready for ${pr.repo} pull request ${pr.number}`} value={known ? !!enabled : null} disabled={disabled} onChange={() => begin(enabled ? "disable_mwr" : "enable_mwr")} />}
+    </View>}
+    {error && <Text accessibilityRole="alert" style={[t.meta, { color: c.statusDanger }]}>{error}</Text>}
+    {notice && <Text accessibilityLiveRegion="polite" style={t.meta}>{notice}</Text>}
+    {plan && (plan.kind === "merge" || browserReady) && <View accessibilityRole="summary" style={{ gap: 8 }}>
+      <Text accessibilityRole="header" style={[t.label, { fontSize: 14, lineHeight: 20 }]}>{plan.kind === "merge" ? plan.prs.length > 1 ? "Merge the PRs underneath too?" : "Merge this PR?" : `${plan.kind === "enable_mwr" ? "Enable" : "Disable"} for downstack too?`}</Text>
+      <Text style={t.meta}>{plan.kind === "merge" ? plan.prs.length > 1 ? `#${pr.number} depends on ${plan.prs.length - 1} unmerged PR${plan.prs.length === 2 ? "" : "s"}. Merge these ${plan.prs.length} PRs in order:` : "Graphite will merge using this repository’s settings and required protections." : `Change merge when ready for #${pr.number} only, or for all ${plan.prs.length} listed PRs.`}</Text>
+      {plan.prs.map((p, i) => <View key={p.key} style={{ flexDirection: "row", gap: 8 }}>
+        <Text style={[t.meta, { width: 16, textAlign: "right", fontVariant: ["tabular-nums"] }]}>{i + 1}.</Text>
+        <View style={{ flex: 1, gap: 2 }}>
+          <Text style={[t.body, { fontSize: 12, lineHeight: 17 }]}>#{p.number} · {p.title}</Text>
+          {p.blockers.length > 0 && <Text style={[t.meta, { color: c.statusWarning }]}>{p.blockers.join(" · ")}</Text>}
+        </View>
+      </View>)}
+      {plan.blockers.map(blocker => <Text key={blocker} style={[t.meta, { color: c.statusWarning }]}>{blocker}</Text>)}
+      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 2 }}>
+        <Button title={plan.kind === "merge" ? plan.prs.length > 1 ? `Merge all ${plan.prs.length} PRs` : `Merge #${pr.number}` : `${plan.kind === "enable_mwr" ? "Enable" : "Disable"} for all ${plan.prs.length} PRs`} kind="primary" theme={theme} compact={compact} loading={submit.isPending} disabled={submit.isPending || scopeBlocked("downstack")} onPress={() => act("downstack")} />
         {plan.kind !== "merge" && plan.prs.length > 1 && <Button title="Just this PR" theme={theme} compact={compact} disabled={submit.isPending || scopeBlocked("target")} onPress={() => act("target")} />}
-        <Button title="Cancel" theme={theme} compact={compact} disabled={submit.isPending} onPress={() => { setPlan(null); checking.reset(); submit.reset(); }} />
+        <Button title="Cancel" kind="ghost" theme={theme} compact={compact} disabled={submit.isPending} onPress={() => { setPlan(null); checking.reset(); submit.reset(); }} />
       </View>
     </View>}
   </View>;

package/client/pr-sheet.tsx

@@ -0,0 +1,63 @@
+import { Text, View } from "react-native";
+import { openExternalUrl } from "@getpaseo/plugin/client";
+import { Icon, Modal } from "@getpaseo/plugin/client/ui";
+import type { Workspace } from "../shared/model";
+import { compactPrStatus, graphitePrUrl } from "../shared/presentation";
+import { ago, prTone, stackOrder } from "../shared/attention";
+import { Button, Chip, text, type Theme } from "./kit";
+import { PrControls } from "./pr-controls";
+import { toneColor } from "./theme";
+
+function Fact({ icon, color, children, theme }: { icon: string; color?: string; children: React.ReactNode; theme: Theme }) {
+  const c = theme.colors;
+  return <View style={{ flexDirection: "row", gap: 9 }}>
+    <View style={{ paddingTop: 2 }}><Icon name={icon} size={14} color={color ?? c.foregroundMuted} /></View>
+    <Text selectable style={[text(c).meta, { flex: 1, color: color ?? c.foregroundMuted }]}>{children}</Text>
+  </View>;
+}
+
+/** Everything about one PR, with its merge and reviewer controls. A sheet on phones, a dialog on desktop. */
+export function PrSheet({ workspace: w, prKey, intent, theme, compact, browserReady, onClose }: { workspace: Workspace; prKey: string | null; intent: "merge" | "reviewers" | null; theme: Theme; compact: boolean; browserReady: boolean; onClose: () => void }) {
+  const c = theme.colors; const t = text(c);
+  const pr = w.prs.find(p => p.key === prKey) ?? null;
+  const s = pr?.snapshot;
+  const open = (url: string) => { void openExternalUrl(url).catch(() => undefined); };
+  const status = pr ? compactPrStatus(pr) : null;
+  const tone = pr ? prTone(pr) : "unknown";
+  const stack = pr ? stackOrder(w.prs.filter(p => p.stack === pr.stack)) : [];
+  const parent = pr?.parent ? w.prs.find(p => p.key === pr.parent) : null;
+  const reviewers = s?.reviewers?.complete ? [...new Set([...s.reviewers.requested, ...s.reviewers.teams.map(team => `team/${team}`), ...s.reviewers.reviewed])] : [];
+  return <Modal title={pr ? `Pull request #${pr.number}` : "Pull request"} icon={<Icon name={tone === "merged" ? "GitMerge" : "GitPullRequest"} size={18} color={toneColor(c, tone)} />} open={!!pr} onOpenChange={next => { if (!next) onClose(); }}>
+    <Modal.Content contentContainerStyle={{ padding: compact ? 16 : 20, gap: 14 }}>
+      {pr && <>
+        <View style={{ gap: 6 }}>
+          <Text selectable style={[t.title, { fontSize: 16, lineHeight: 22 }]}>{s?.title ?? `${pr.repo} pull request`}</Text>
+          <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
+            {status && <Chip theme={theme} label={status.label} color={toneColor(c, tone === "pending" || tone === "draft" ? "unknown" : tone)} />}
+            <Text style={t.meta}>{pr.repo} · {pr.stack}{stack.length > 1 ? ` · ${stack.indexOf(pr) + 1} of ${stack.length}` : ""}</Text>
+          </View>
+        </View>
+        <View style={{ gap: 8 }}>
+          {pr.error && <Fact theme={theme} icon="TriangleAlert" color={c.statusWarning}>{pr.error}</Fact>}
+          {parent && <Fact theme={theme} icon="CornerLeftDown">Stacked on #{parent.number} · {parent.snapshot?.title ?? parent.stack}</Fact>}
+          {s?.conflict && <Fact theme={theme} icon="TriangleAlert" color={c.statusDanger}>Conflicts with its base branch</Fact>}
+          {!!s?.failedChecks.length && <Fact theme={theme} icon="CircleX" color={c.statusDanger}>Required checks failed: {s.failedChecks.join(", ")}</Fact>}
+          {!!s?.otherFailedChecks?.length && <Fact theme={theme} icon="CircleX" color={c.statusWarning}>Optional checks failed (not required to merge): {s.otherFailedChecks.join(", ")}</Fact>}
+          {s?.state === "OPEN" && s.checksPending && <Fact theme={theme} icon="LoaderCircle">Required checks are still running</Fact>}
+          {!!s?.threads.length && <Fact theme={theme} icon="MessageSquare" color={c.statusWarning}>{s.threads.length} unresolved review thread{s.threads.length === 1 ? "" : "s"}</Fact>}
+          {s?.reviewDecision === "CHANGES_REQUESTED" && <Fact theme={theme} icon="MessageSquareWarning" color={c.statusWarning}>Changes requested</Fact>}
+          {reviewers.length > 0 && <Fact theme={theme} icon="Users">Reviewers: {reviewers.join(", ")}</Fact>}
+          {s?.deployment?.environment && <Fact theme={theme} icon="Rocket">{s.deployment.evidence}</Fact>}
+          {s?.observedAt && <Fact theme={theme} icon="Clock">Checked {ago(s.observedAt)}</Fact>}
+        </View>
+        {s?.state === "OPEN" && <View style={{ paddingTop: 12, borderTopWidth: 1, borderTopColor: c.border }}>
+          <PrControls key={`${pr.key}:${intent ?? ""}`} pr={pr} workspace={w} theme={theme} compact={compact} browserReady={browserReady} intent={intent} />
+        </View>}
+        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, paddingTop: 12, borderTopWidth: 1, borderTopColor: c.border }}>
+          <Button theme={theme} compact={compact} icon="ExternalLink" title="Open in Graphite" accessibilityLabel={`Open ${pr.repo} pull request ${pr.number} in Graphite`} onPress={() => open(graphitePrUrl(pr))} />
+          {s?.url && <Button theme={theme} compact={compact} kind="ghost" icon="Github" title="GitHub" accessibilityLabel={`Open ${pr.repo} pull request ${pr.number} on GitHub`} onPress={() => open(s.url)} />}
+        </View>
+      </>}
+    </Modal.Content>
+  </Modal>;
+}