paseo-follow-up 0.3.6 → 0.4.0

package/client/header.tsx

@@ -0,0 +1,92 @@
+import { Pressable, Text, View } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
+import type { Workspace } from "../shared/model";
+import { ago, headline, liveLine, stackBar, type LiveIcon } from "../shared/attention";
+import { IconButton, Switch, text, type Theme } from "./kit";
+import { IconSwap, Spinner } from "./motion";
+import { segmentPaint, type Colors } from "./theme";
+import { SpecChip } from "./spec";
+
+/** PR status older than this means the poll has stopped working; say so instead of looking current. */
+export const STALE_MS = 10 * 60_000;
+
+/** One segment per PR in stack order, coloured by state. The signature of the panel; a segment opens its PR. */
+export function StackBar({ workspace, theme, height = 6, onOpen }: { workspace: Pick<Workspace, "prs">; theme: Theme; height?: number; onOpen?: (key: string) => void }) {
+  const bar = stackBar(workspace);
+  if (!bar.total) return null;
+  return <View accessibilityRole="progressbar" accessibilityLabel={`${bar.merged} of ${bar.total} PRs merged`} accessibilityValue={{ min: 0, max: bar.total, now: bar.merged }}
+    style={{ flexDirection: "row", gap: 2, height, borderRadius: height / 2, overflow: onOpen ? "visible" : "hidden" }}>
+    {bar.segments.map((s, i) => {
+      const paint = segmentPaint(theme.colors, s.tone);
+      const r = height / 2, first = i === 0, last = i === bar.segments.length - 1;
+      const fill = { flex: 1, justifyContent: "center" as const, alignItems: "center" as const, overflow: "hidden" as const, backgroundColor: paint.fill, borderTopLeftRadius: first ? r : 0, borderBottomLeftRadius: first ? r : 0, borderTopRightRadius: last ? r : 0, borderBottomRightRadius: last ? r : 0 };
+      // A short centred dash marks the state without filling the slot, so unmerged work never reads as done.
+      const mark = Math.max(2, Math.round(height / 3));
+      const line = paint.line ? <View style={{ width: "36%", minWidth: 6, height: mark, borderRadius: mark / 2, backgroundColor: paint.line }} /> : null;
+      return onOpen
+        ? <Pressable key={s.key} accessibilityRole="button" accessibilityLabel={`Open pull request ${s.number}`} hitSlop={{ top: 8, bottom: 8 }} onPress={() => onOpen(s.key)} style={state => [fill, (state as { hovered?: boolean }).hovered ? { opacity: 0.75 } : null]}>{line}</Pressable>
+        : <View key={s.key} style={fill}>{line}</View>;
+    })}
+  </View>;
+}
+
+function LiveGlyph({ icon, colors }: { icon: LiveIcon; colors: Colors }) {
+  switch (icon) {
+    case "spinner": return <Spinner color={colors.accent} size={12} />;
+    case "done": return <Icon name="CircleCheck" size={12} color={colors.statusSuccess} />;
+    case "paused": return <Icon name="CirclePause" size={12} color={colors.statusWarning} />;
+    case "alert": return <Icon name="TriangleAlert" size={12} color={colors.statusWarning} />;
+    case "waiting": return <Icon name="Clock" size={12} color={colors.foregroundMuted} />;
+    default: return <Icon name="Circle" size={12} color={colors.foregroundMuted} />;
+  }
+}
+
+export function WorkspaceHeader({ workspace: w, theme, compact, now, onSettings, onRefresh, refreshing, onAuto, autoPending, notice, onOpenPr, resize, hideTitle = false }: {
+  workspace: Workspace; theme: Theme; compact: boolean; now: number; onSettings: () => void; onRefresh: () => void; refreshing: boolean; onAuto: (next: boolean) => void; autoPending: boolean; notice: string | null; onOpenPr?: (key: string) => void;
+  /** Expand to the larger view, or collapse back to the panel. Absent where the panel is already as wide as it gets. */
+  resize?: { icon: "Maximize2" | "Minimize2"; label: string; onPress: () => void } | null;
+  /** The larger view's screen bar already names the workspace. */
+  hideTitle?: boolean;
+}) {
+  const c = theme.colors; const t = text(c);
+  const parts = headline(w, now);
+  const live = liveLine(w, now);
+  const checked = w.prs.map(p => p.snapshot?.observedAt).filter((v): v is string => !!v).sort().at(-1);
+  const stale = !!checked && w.prs.some(p => p.snapshot?.state === "OPEN") && now - Date.parse(checked) > STALE_MS;
+  const toneOf = (tone?: string) => tone === "warning" ? c.statusWarning : tone === "danger" ? c.statusDanger : tone === "success" ? c.statusSuccess : undefined;
+  const pad = compact ? 16 : 12;
+  return <View style={{ paddingHorizontal: pad, paddingTop: compact ? 14 : 12, paddingBottom: 10, gap: 6, borderBottomWidth: 1, borderBottomColor: c.border }}>
+    <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+      {/* On phones the host header right above already shows the workspace name. */}
+      {compact || hideTitle ? <Text numberOfLines={2} style={[t.meta, { flex: 1, paddingTop: 2 }, hideTitle && !compact ? { fontSize: 13, lineHeight: 19, color: c.foreground } : null]}>{w.goal}</Text>
+        : <Text accessibilityRole="header" style={[t.title, { flex: 1 }]}>{w.title}</Text>}
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 2, marginVertical: compact ? -12 : -4, marginRight: compact ? -10 : -4 }}>
+        {!!w.spec?.url && <View style={{ marginRight: 4 }}><SpecChip workspace={w} theme={theme} compact={compact} /></View>}
+        {resize && <IconButton icon={resize.icon} label={resize.label} onPress={resize.onPress} theme={theme} compact={compact} />}
+        <IconButton icon="Settings" label="Follow-up settings" onPress={onSettings} theme={theme} compact={compact} />
+      </View>
+    </View>
+    {!compact && !hideTitle && w.goal && w.goal !== w.title && <Text numberOfLines={2} style={t.meta}>{w.goal}</Text>}
+    <Text accessibilityLiveRegion="polite" style={[t.meta, { color: c.foregroundMuted, marginTop: 2 }]}>
+      {parts.map((part, i) => <Text key={part.text} style={toneOf(part.tone) ? { color: toneOf(part.tone), fontWeight: "600" } : { color: c.foreground }}>{i ? <Text style={{ color: c.foregroundMuted, fontWeight: "400" }}>{" · "}</Text> : null}{part.text}</Text>)}
+    </Text>
+    <StackBar workspace={w} theme={theme} onOpen={onOpenPr} />
+    <View style={{ flexDirection: "row", gap: 6, marginTop: 2 }}>
+      <View style={{ paddingTop: 3 }}><IconSwap swapKey={live.icon} size={12}><LiveGlyph icon={live.icon} colors={c} /></IconSwap></View>
+      <Text accessibilityLiveRegion="polite" style={[t.meta, { flex: 1, color: live.icon === "spinner" ? c.foreground : c.foregroundMuted }]}>
+        {live.text}{live.since ? <Text style={{ color: c.foregroundMuted }}>{` · ${ago(live.since, now)}`}</Text> : null}
+      </Text>
+    </View>
+    {notice && <View accessibilityRole="alert" style={{ flexDirection: "row", gap: 6 }}>
+      <View style={{ paddingTop: 3 }}><Icon name="TriangleAlert" size={12} color={c.statusWarning} /></View>
+      <Text style={[t.meta, { flex: 1, color: c.statusWarning }]}>{notice}</Text>
+    </View>}
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 4, marginTop: 2, minHeight: compact ? 44 : 28 }}>
+      <Text numberOfLines={1} style={[t.small, { flexShrink: 1 }, stale ? { color: c.statusWarning } : null]}>{checked ? `Checked ${ago(checked, now)}${stale ? " · may be out of date" : ""}` : "Checks GitHub every 15s"}</Text>
+      <IconButton icon="RefreshCw" label="Refresh PR status" onPress={onRefresh} theme={theme} compact={compact} disabled={refreshing} spinning={refreshing} />
+      <View style={{ flex: 1 }} />
+      <Switch theme={theme} compact={compact} label="Auto-send" accessibilityLabel="Auto-send repairs" hint="Send repair batches to the main agent on its own when the agent is idle. Off means each batch waits for your click."
+        value={w.enable_auto_sends} disabled={autoPending} onChange={onAuto} />
+    </View>
+  </View>;
+}

package/client/keys.ts

@@ -0,0 +1,3 @@
+/** React Query keys shared by every surface that reads Follow-up state. */
+export const workspaceKey = (id: string) => ["follow-through", "workspace", id];
+export const overviewKey = ["follow-through", "overview"];

package/client/kit.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { Pressable, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
+import { PressScale, Spinner } from "./motion";
+import { raised, tint, withAlpha, type Colors, type Theme } from "./theme";
+
+export type { Theme } from "./theme";
+
+/** Re-render on an interval so "3m ago" keeps counting between polls. */
+export function useNow(intervalMs = 30_000): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => { const id = setInterval(() => setNow(Date.now()), intervalMs); return () => clearInterval(id); }, [intervalMs]);
+  return now;
+}
+
+export { errorText } from "../shared/errors";
+
+export const text = (colors: Colors) => ({
+  title: { color: colors.foreground, fontSize: 15, lineHeight: 21, fontWeight: "600" as const },
+  body: { color: colors.foreground, fontSize: 13, lineHeight: 18 },
+  meta: { color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontVariant: ["tabular-nums" as const] },
+  small: { color: colors.foregroundMuted, fontSize: 11, lineHeight: 15, fontVariant: ["tabular-nums" as const] },
+  label: { color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" as const },
+});
+
+type ButtonKind = "primary" | "secondary" | "ghost" | "danger";
+/** One button vocabulary for the whole plugin: 32px on desktop with a hit slop, 44px on touch layouts. */
+export function Button({ title, onPress, theme, kind = "secondary", disabled = false, loading = false, icon, compact = false, accessibilityLabel, accessibilityHint, grow = false }: {
+  title: string; onPress: () => void; theme: Theme; kind?: ButtonKind; disabled?: boolean; loading?: boolean; icon?: string; compact?: boolean; accessibilityLabel?: string; accessibilityHint?: string; grow?: boolean;
+}) {
+  const c = theme.colors;
+  const fg = kind === "primary" ? c.accentForeground : kind === "danger" ? c.statusDanger : c.foreground;
+  const inactive = disabled || loading;
+  return <PressScale accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? title} accessibilityHint={accessibilityHint} accessibilityState={{ disabled: inactive, busy: loading }}
+    disabled={inactive} onPress={onPress} hitSlop={compact ? 0 : 4} outerStyle={grow ? { flexGrow: 1 } : { alignSelf: "flex-start" }}
+    style={({ pressed, hovered }) => ({
+      minHeight: compact ? 44 : 32, paddingHorizontal: compact ? 14 : 11, borderRadius: compact ? 8 : 6, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6,
+      opacity: disabled ? 0.45 : 1,
+      ...(kind === "primary" ? { backgroundColor: pressed ? withAlpha(c.accent, 0.85) : hovered ? withAlpha(c.accent, 0.92) : c.accent }
+        : kind === "ghost" ? { backgroundColor: pressed ? c.surface2 : hovered ? c.surface1 : "transparent" }
+        : { ...raised(c), backgroundColor: pressed ? c.surface2 : hovered ? c.surface2 : c.surface1 }),
+    })}>
+    {loading ? <Spinner color={fg} size={12} /> : icon ? <Icon name={icon} size={compact ? 16 : 14} color={fg} /> : null}
+    <Text numberOfLines={1} style={{ color: fg, fontSize: compact ? 14 : 12, lineHeight: compact ? 19 : 16, fontWeight: "600" }}>{title}</Text>
+  </PressScale>;
+}
+
+/** A square icon-only control with an accessible name, for settings and refresh. */
+export function IconButton({ icon, label, onPress, theme, compact = false, disabled = false, spinning = false, color }: { icon: string; label: string; onPress: () => void; theme: Theme; compact?: boolean; disabled?: boolean; spinning?: boolean; color?: string }) {
+  const c = theme.colors;
+  const size = compact ? 44 : 28;
+  return <PressScale accessibilityRole="button" accessibilityLabel={label} disabled={disabled} onPress={onPress} hitSlop={compact ? 0 : 6}
+    style={({ pressed, hovered }) => ({ width: size, height: size, borderRadius: 6, alignItems: "center", justifyContent: "center", backgroundColor: pressed ? c.surface2 : hovered ? c.surface1 : "transparent", opacity: disabled && !spinning ? 0.45 : 1 })}>
+    {spinning ? <Spinner color={color ?? c.foregroundMuted} size={14} label={label} /> : <Icon name={icon} size={compact ? 18 : 15} color={color ?? c.foregroundMuted} />}
+  </PressScale>;
+}
+
+export type CardTone = "plain" | "attention" | "success";
+/** A raised container with an icon title. Attention cards trade the ring for a warning border. */
+export function Card({ theme, icon, title, tone = "plain", count, right, children, compact = false, style }: {
+  theme: Theme; icon: string; title: string; tone?: CardTone; count?: string | number; right?: ReactNode; children: ReactNode; compact?: boolean; style?: StyleProp<ViewStyle>;
+}) {
+  const c = theme.colors;
+  const accent = tone === "attention" ? c.statusWarning : tone === "success" ? c.statusSuccess : null;
+  return <View style={[{ marginHorizontal: compact ? 16 : 12, marginTop: 12, borderRadius: 8, overflow: "hidden", backgroundColor: c.surface0 },
+    accent ? { borderWidth: 1, borderColor: withAlpha(accent, 0.7) } : raised(c), style]}>
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 7, paddingHorizontal: 12, paddingTop: 10, paddingBottom: 8 }}>
+      <Icon name={icon} size={14} color={accent ?? c.foregroundMuted} />
+      <Text accessibilityRole="header" style={{ color: accent ?? c.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{title}</Text>
+      {count !== undefined && count !== "" && <Chip theme={theme} color={accent ?? c.foregroundMuted} label={String(count)} />}
+      <View style={{ flex: 1 }} />
+      {right}
+    </View>
+    {children}
+  </View>;
+}
+
+export function Chip({ theme, label, color, icon }: { theme: Theme; label: string; color: string; icon?: string }) {
+  return <View style={{ flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 6, paddingVertical: 1, borderRadius: 999, backgroundColor: tint(color, theme.colors) }}>
+    {icon && <Icon name={icon} size={10} color={color} />}
+    <Text numberOfLines={1} style={{ color, fontSize: 11, lineHeight: 16, fontWeight: "600", fontVariant: ["tabular-nums"] }}>{label}</Text>
+  </View>;
+}
+
+/** A labelled switch. `value: null` means the real state is unknown and the control is disabled. */
+export function Switch({ theme, label, value, onChange, disabled = false, accessibilityLabel, hint, compact = false }: { theme: Theme; label: string; value: boolean | null; onChange: (next: boolean) => void; disabled?: boolean; accessibilityLabel?: string; hint?: string; compact?: boolean }) {
+  const c = theme.colors;
+  const on = value === true;
+  const inactive = disabled || value === null;
+  return <Pressable accessibilityRole="switch" aria-checked={value === null ? "mixed" : on} accessibilityLabel={accessibilityLabel ?? label} accessibilityHint={hint}
+    accessibilityState={{ checked: value === null ? "mixed" : on, disabled: inactive }} accessibilityValue={{ text: value === null ? "Unknown" : on ? "On" : "Off" }}
+    disabled={inactive} onPress={() => onChange(!on)} hitSlop={compact ? 0 : 4}
+    style={({ pressed }) => ({ minHeight: compact ? 44 : 28, flexDirection: "row", alignItems: "center", gap: 8, opacity: inactive ? 0.5 : pressed ? 0.8 : 1 })}>
+    <Text numberOfLines={1} style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16 }}>{label}</Text>
+    <View style={{ width: 30, height: 18, borderRadius: 9, backgroundColor: on ? c.accent : c.surface2, borderWidth: 1, borderColor: on ? c.accent : c.border, justifyContent: "center" }}>
+      <View style={{ width: 12, height: 12, borderRadius: 6, marginLeft: value === null ? 8 : on ? 14 : 2, backgroundColor: on ? c.accentForeground : value === null ? c.border : c.foregroundMuted }} />
+    </View>
+  </Pressable>;
+}
+
+/** A row inside a card: hairline on top, hover tint when pressable. */
+export function CardRow({ theme, onPress, accessibilityLabel, children, style, first = false }: { theme: Theme; onPress?: () => void; accessibilityLabel?: string; children: ReactNode; style?: StyleProp<ViewStyle>; first?: boolean }) {
+  const c = theme.colors;
+  const base: ViewStyle = { paddingHorizontal: 12, paddingVertical: 9, borderTopWidth: first ? 0 : 1, borderTopColor: c.border };
+  if (!onPress) return <View style={[base, style]}>{children}</View>;
+  return <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel} onPress={onPress}
+    style={state => [base, { backgroundColor: state.pressed ? c.surface2 : (state as { hovered?: boolean }).hovered ? c.surface1 : "transparent" }, style]}>{children}</Pressable>;
+}
+
+/** The fold row that hides finished items: "3 merged · Show". */
+export function FoldRow({ theme, label, open, onPress, icon, iconColor }: { theme: Theme; label: string; open: boolean; onPress: () => void; icon: string; iconColor: string }) {
+  const c = theme.colors;
+  return <Pressable accessibilityRole="button" aria-expanded={open} accessibilityState={{ expanded: open }} accessibilityLabel={`${open ? "Hide" : "Show"} ${label}`} onPress={onPress}
+    style={state => ({ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingVertical: 8, borderTopWidth: 1, borderTopColor: c.border, backgroundColor: state.pressed ? c.surface2 : (state as { hovered?: boolean }).hovered ? c.surface1 : "transparent" })}>
+    <View style={{ width: 16, alignItems: "center" }}><Icon name={icon} size={13} color={iconColor} /></View>
+    <Text style={{ flex: 1, color: c.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "600", fontVariant: ["tabular-nums"] }}>{label}</Text>
+    <Icon name={open ? "ChevronUp" : "ChevronDown"} size={14} color={c.foregroundMuted} />
+  </Pressable>;
+}

package/client/large.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from "react";
+import { Platform, Text, View } from "react-native";
+import { useRpc, type PluginScreenProps } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { getRpc } from "../shared/contracts";
+import { Button, Card, CardRow, errorText, text } from "./kit";
+import { Skeleton } from "./motion";
+import { WorkspaceView, useSessionFolds, workspaceKey, type PanelLinks } from "./panel";
+
+export const LARGE_SCREEN = "follow-through-workspace";
+
+/**
+ * The panel opened as a Paseo screen: the host supplies the page, header and close button, and the
+ * layout switches to two columns. Collapse (or Esc) returns to the workspace, where the panel still is.
+ */
+export function FollowLarge(props: PluginScreenProps & PanelLinks) {
+  const { theme, layout, params, navigation } = props;
+  const workspaceId = params.workspaceId ?? "";
+  const c = theme.colors;
+  const read = useRpc(getRpc);
+  const query = useQuery({ queryKey: workspaceKey(workspaceId), queryFn: () => read({ workspaceId }), refetchInterval: 5000, enabled: !!workspaceId });
+  const folds = useSessionFolds(workspaceId);
+  const back = () => navigation?.openWorkspace({ workspaceId });
+
+  // Esc goes back, unless a sheet or menu has focus or the user is typing. Web only: native has its own back.
+  useEffect(() => {
+    type Key = { key: string; defaultPrevented: boolean; metaKey: boolean; ctrlKey: boolean; altKey: boolean; target: { isContentEditable?: boolean; tagName?: string } | null; preventDefault(): void };
+    type Doc = { addEventListener(type: "keydown", fn: (event: Key) => void): void; removeEventListener(type: "keydown", fn: (event: Key) => void): void; querySelector(selector: string): unknown };
+    const doc = (globalThis as { document?: Doc }).document;
+    if (Platform.OS !== "web" || !doc || !navigation) return;
+    const onKey = (event: Key) => {
+      if (event.key !== "Escape" || event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.target && (event.target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName ?? ""))) return;
+      if (doc.querySelector('[role="dialog"], [aria-modal="true"]')) return;
+      event.preventDefault();
+      navigation.openWorkspace({ workspaceId });
+    };
+    doc.addEventListener("keydown", onKey);
+    return () => doc.removeEventListener("keydown", onKey);
+  }, [navigation, workspaceId]);
+
+  if (query.isPending && workspaceId) return <View accessibilityLabel="Loading Follow-up" style={{ flex: 1, backgroundColor: c.surface0, padding: 24, gap: 12, maxWidth: 1240, width: "100%", alignSelf: "center" }}>
+    <Skeleton width="30%" height={16} color={c.surface2} /><Skeleton width="60%" height={10} color={c.surface2} /><Skeleton width="100%" height={6} color={c.surface2} radius={3} />
+  </View>;
+  const w = query.data?.workspace;
+  if (!w) return <View style={{ flex: 1, backgroundColor: c.surface0, padding: layout.compact ? 16 : 24 }}>
+    <Card theme={theme} compact={layout.compact} icon="GitPullRequest" title="Nothing to show here" style={{ marginHorizontal: 0, marginTop: 0, maxWidth: 520 }}>
+      <CardRow theme={theme}>
+        <Text style={[text(c).meta, { marginBottom: 10 }]}>{query.error ? `Couldn't read Follow-up: ${errorText(query.error)}` : "This workspace isn't tracked by Follow-up, or it no longer exists."}</Text>
+        {navigation && workspaceId ? <Button theme={theme} icon="ArrowLeft" title="Back to the workspace" onPress={back} /> : null}
+      </CardRow>
+    </Card>
+  </View>;
+  return <WorkspaceView theme={theme} layout={layout} host={props.host} navigation={navigation} workspace={w} large
+    loadError={query.error ? "Refresh failed. Showing the last saved state." : query.data?.error ?? null}
+    openSettings={props.openSettings} openOverview={props.openOverview} folds={folds}
+    resize={navigation ? { icon: "Minimize2", label: "Back to the workspace (Esc)", onPress: back } : null} />;
+}

package/client/live.tsx

@@ -0,0 +1,159 @@
+import { useSyncExternalStore } from "react";
+import { Text, View } from "react-native";
+import { useRpc, type PluginButtonContentProps, type PluginButtonIconProps, type PluginButtonRegistration, type PluginClientContext, type PluginSidebarItemProps } from "@getpaseo/plugin/client";
+import { Icon, SidebarRow } from "@getpaseo/plugin/client/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { getRpc, listRpc, browserStatusRpc } from "../shared/contracts";
+import type { Workspace } from "../shared/model";
+import { needsYou, pillFor } from "../shared/attention";
+import { NeedsYouList, workspaceKey } from "./needs-you";
+import { Button, errorText, text } from "./kit";
+import { IconSwap } from "./motion";
+import { PrSheet } from "./pr-sheet";
+import { QuestionSheet, QuestionStepper } from "./questions";
+import { SpecChip } from "./spec";
+import { isOpen as questionOpen } from "../shared/questions";
+
+const POLL_MS = 8_000;
+
+/** One shared poll of tracked workspaces for the pills, header-button dots and the sidebar count. */
+export function createLiveStore(client: PluginClientContext) {
+  let workspaces = new Map<string, Workspace>();
+  let version = 0;
+  const listeners = new Set<() => void>();
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let stopped = false;
+  const emit = () => { version++; for (const l of listeners) l(); };
+  const poll = async () => {
+    try {
+      const result = await client.rpc(listRpc, {});
+      if (stopped) return;
+      workspaces = new Map(result.workspaces.filter(w => !w.archived).map(w => [w.id, w]));
+      emit();
+    } catch { /* Keep the last answer through restarts and disconnects. */ }
+    finally { if (!stopped) timer = setTimeout(() => void poll(), POLL_MS); }
+  };
+  void poll();
+  return {
+    subscribe(listener: () => void) { listeners.add(listener); return () => { listeners.delete(listener); }; },
+    version: () => version,
+    get: (id: string) => workspaces.get(id),
+    all: () => [...workspaces.values()],
+    refresh: () => { if (timer) clearTimeout(timer); void poll(); },
+    stop() { stopped = true; if (timer) clearTimeout(timer); listeners.clear(); },
+  };
+}
+export type LiveStore = ReturnType<typeof createLiveStore>;
+
+function useLive<T>(store: LiveStore, select: () => T): T {
+  useSyncExternalStore(store.subscribe, store.version, store.version);
+  return select();
+}
+
+/** Composer pills appear on a tracked workspace's main agent only while something needs the developer. */
+export function contributePills(client: PluginClientContext, store: LiveStore, openPanel: (workspaceId: string) => void) {
+  const pills = new Map<string, { workspaceId: string; label: string; urgent: boolean; pill: PluginButtonRegistration }>();
+
+  function PillIcon(props: PluginButtonIconProps) {
+    const kind = useLive(store, () => {
+      const w = store.get(props.workspaceId);
+      if (!w) return "attention";
+      const items = needsYou(w);
+      if (items.some(i => ["hold", "retry", "check", "answer"].includes(i.kind))) return "urgent";
+      if (items.some(i => i.kind === "question" && i.state === "stopped")) return "stopped";
+      return items.every(i => i.kind === "question") ? "question" : "attention";
+    });
+    const c = props.theme.colors;
+    return <IconSwap swapKey={kind} size={props.size}>
+      <Icon name={kind === "urgent" ? "OctagonAlert" : kind === "stopped" ? "CirclePause" : kind === "question" ? "MessageCircleQuestion" : "CircleAlert"} size={props.size} color={kind === "urgent" ? c.statusDanger : c.statusWarning} />
+    </IconSwap>;
+  }
+
+  function PillContent(props: PluginButtonContentProps) {
+    const c = props.theme.colors; const t = text(c);
+    const read = useRpc(getRpc); const browserRead = useRpc(browserStatusRpc);
+    const query = useQuery({ queryKey: workspaceKey(props.workspaceId), queryFn: () => read({ workspaceId: props.workspaceId }), refetchInterval: 5000 });
+    const browser = useQuery({ queryKey: ["follow-through", "browser"], queryFn: () => browserRead({}), refetchInterval: 5000 });
+    const [sheet, setSheet] = useState<{ key: string; intent: "merge" | "reviewers" } | null>(null);
+    const [question, setQuestion] = useState<string | null>(null);
+    const w = query.data?.workspace ?? store.get(props.workspaceId);
+    const touch = props.layout.compact;
+    const asking = !!w?.questions.some(questionOpen);
+    const others = w ? needsYou(w).filter(i => i.kind !== "question") : [];
+    const open = () => { props.close(); openPanel(props.workspaceId); };
+    // On phones the host sheet's own header already pads the top; tuck the content up to it.
+    return <View style={{ width: 360, maxWidth: "100%", gap: 10, marginTop: touch ? -12 : 0 }}>
+      {w ? <>
+        {/* Open questions take the whole popover, one at a time; the rest is a line and a click away. */}
+        {asking ? <>
+          <QuestionStepper workspace={w} theme={props.theme} compact={touch} bodyMaxHeight={touch ? undefined : 220} onDetails={setQuestion} onAnswered={() => store.refresh()} />
+          {others.length > 0 && <Text numberOfLines={2} style={[t.small, { paddingTop: 8, borderTopWidth: 1, borderTopColor: c.border }]}>Also needs you: {others.map(i => i.title).join(" · ")}</Text>}
+        </> : <>
+          {/* On phones the sheet already carries the button's title. */}
+          {!touch && <View style={{ gap: 2 }}>
+            <Text style={t.label}>{others.length === 1 ? "Follow-up needs you" : `Follow-up · ${others.length} need you`}</Text>
+            <Text numberOfLines={1} style={t.meta}>{w.title}</Text>
+          </View>}
+          <NeedsYouList workspace={w} theme={props.theme} compact={touch} flush
+            actions={{ after: () => { store.refresh(); }, openPr: (key, intent) => setSheet({ key, intent }), openQuestion: setQuestion }} />
+        </>}
+        <PrSheet workspace={w} prKey={sheet?.key ?? null} intent={sheet?.intent ?? null} theme={props.theme} compact={touch} browserReady={browser.data?.ready ?? false} onClose={() => { setSheet(null); store.refresh(); }} />
+        <QuestionSheet workspace={w} questionId={question} theme={props.theme} compact={touch} onClose={() => { setQuestion(null); store.refresh(); }} />
+      </> : <Text style={t.meta}>{query.error ? `Couldn't read Follow-up: ${errorText(query.error)}` : "Loading…"}</Text>}
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingTop: 10, borderTopWidth: 1, borderTopColor: c.border }}>
+        <View style={{ flex: 1 }}><Button theme={props.theme} compact={touch} grow icon="PanelRight" title="Open Follow-up" onPress={open} /></View>
+        {w?.spec?.url && <SpecChip workspace={w} theme={props.theme} compact={touch} />}
+      </View>
+    </View>;
+  }
+
+  const publish = () => {
+    const wanted = new Map<string, { workspaceId: string; label: string; urgent: boolean }>();
+    for (const w of store.all()) {
+      const pill = pillFor(w);
+      if (pill) wanted.set(w.mainAgentId, { workspaceId: w.id, label: pill.label, urgent: pill.urgent });
+    }
+    for (const [agentId, entry] of pills) {
+      const next = wanted.get(agentId);
+      if (!next || next.workspaceId !== entry.workspaceId) { entry.pill.remove(); pills.delete(agentId); }
+    }
+    for (const [agentId, next] of wanted) {
+      const entry = pills.get(agentId);
+      const asking = /^Question |questions$/.test(next.label);
+      const title = asking ? "Follow-up: the agent asked you a question" : next.urgent ? "Follow-up: something is blocked" : "Follow-up needs you";
+      if (!entry) {
+        const pill = client.addComposerPill({ id: "follow-up-attention", workspaceId: next.workspaceId, agentId, button: { title, label: next.label, icon: PillIcon, behavior: { kind: "popover", Content: PillContent } } });
+        pills.set(agentId, { workspaceId: next.workspaceId, label: next.label, urgent: next.urgent, pill });
+      } else if (entry.label !== next.label || entry.urgent !== next.urgent) {
+        entry.pill.update({ label: next.label, title });
+        entry.label = next.label; entry.urgent = next.urgent;
+      }
+    }
+  };
+  const unsubscribe = store.subscribe(publish);
+  return () => { unsubscribe(); for (const { pill } of pills.values()) pill.remove(); pills.clear(); };
+}
+
+/** The header button's icon: a pull-request glyph with a warning dot while the workspace needs you. */
+export function headerIcon(store: LiveStore) {
+  return function HeaderIcon(props: PluginButtonIconProps) {
+    const need = useLive(store, () => { const w = store.get(props.workspaceId); return w ? needsYou(w).length : 0; });
+    return <View style={{ width: props.size, height: props.size }}>
+      <Icon name="GitPullRequest" size={props.size} color={props.color} />
+      {need > 0 && <View accessibilityLabel={`${need} need you`} style={{ position: "absolute", top: -2, right: -3, width: 7, height: 7, borderRadius: 4, backgroundColor: props.theme.colors.statusWarning, borderWidth: 1.5, borderColor: props.theme.colors.surface0 }} />}
+    </View>;
+  };
+}
+
+/** The sidebar row, with a count of workspaces that need you. */
+export function sidebarItem(store: LiveStore, screenId: string) {
+  return function FollowSidebarItem({ currentScreen, openScreen, theme }: PluginSidebarItemProps) {
+    const need = useLive(store, () => store.all().filter(w => needsYou(w).length > 0).length);
+    const c = theme.colors;
+    return <SidebarRow icon="GitPullRequest" active={currentScreen?.screenId === screenId} onPress={() => openScreen({ screenId })}
+      trailing={need > 0 ? <View accessibilityLabel={`${need} workspace${need === 1 ? "" : "s"} need you`} style={{ minWidth: 18, height: 18, paddingHorizontal: 5, borderRadius: 9, alignItems: "center", justifyContent: "center", backgroundColor: c.statusWarning }}>
+        <Text style={{ color: c.surface0, fontSize: 11, lineHeight: 14, fontWeight: "700", fontVariant: ["tabular-nums"] }}>{need}</Text>
+      </View> : undefined} />;
+  };
+}

package/client/motion.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { AccessibilityInfo, ActivityIndicator, Animated, Easing, Platform, Pressable, View, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+
+// The native driver is unavailable on web, where react-native-web animates in JS.
+const native = () => Platform.OS !== "web";
+const out = Easing.bezier(0.16, 1, 0.3, 1);
+
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    let live = true;
+    void AccessibilityInfo.isReduceMotionEnabled().then(value => { if (live) setReduced(value); }).catch(() => undefined);
+    const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduced);
+    return () => { live = false; subscription.remove(); };
+  }, []);
+  return reduced;
+}
+
+type PressState = { pressed: boolean; hovered: boolean };
+/** A pressable that eases to 97% while held. Hover and press tint come from the caller's style function. */
+export function PressScale({ style, outerStyle, children, ...props }: Omit<PressableProps, "style" | "children"> & {
+  style?: StyleProp<ViewStyle> | ((state: PressState) => StyleProp<ViewStyle>);
+  outerStyle?: StyleProp<ViewStyle>;
+  children: ReactNode | ((state: PressState) => ReactNode);
+}) {
+  const reduced = useReducedMotion();
+  const scale = useRef(new Animated.Value(1)).current;
+  const [pressed, setPressed] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const to = (value: number) => { if (!reduced) Animated.timing(scale, { toValue: value, duration: 140, easing: out, useNativeDriver: native() }).start(); };
+  const state = { pressed, hovered };
+  return <Pressable {...props} style={outerStyle}
+    onHoverIn={event => { setHovered(true); props.onHoverIn?.(event); }}
+    onHoverOut={event => { setHovered(false); props.onHoverOut?.(event); }}
+    onPressIn={event => { setPressed(true); to(0.97); props.onPressIn?.(event); }}
+    onPressOut={event => { setPressed(false); to(1); props.onPressOut?.(event); }}>
+    <Animated.View style={[typeof style === "function" ? style(state) : style, { transform: [{ scale }] }]}>
+      {typeof children === "function" ? children(state) : children}
+    </Animated.View>
+  </Pressable>;
+}
+
+/** Cross-fades an icon when its key changes: the new one grows in from 40%. Nothing moves on first render. */
+export function IconSwap({ swapKey, size, children }: { swapKey: string; size: number; children: ReactNode }) {
+  const reduced = useReducedMotion();
+  const enter = useRef(new Animated.Value(1)).current;
+  const first = useRef(true);
+  useLayoutEffect(() => {
+    if (first.current) { first.current = false; return; }
+    if (reduced) return;
+    enter.setValue(0);
+    const animation = Animated.timing(enter, { toValue: 1, duration: 260, easing: out, useNativeDriver: native() });
+    animation.start();
+    return () => animation.stop();
+  }, [swapKey]);
+  return <Animated.View style={{ width: size, height: size, alignItems: "center", justifyContent: "center", opacity: enter, transform: [{ scale: enter.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }) }] }}>{children}</Animated.View>;
+}
+
+/** Content that arrives after load rises 6px into place. Reduced motion shows it at once. */
+export function Reveal({ children, delay = 0 }: { children: ReactNode; delay?: number }) {
+  const reduced = useReducedMotion();
+  const value = useRef(new Animated.Value(reduced ? 1 : 0)).current;
+  useEffect(() => {
+    if (reduced) { value.setValue(1); return; }
+    const animation = Animated.timing(value, { toValue: 1, duration: 280, delay, easing: out, useNativeDriver: native() });
+    animation.start();
+    return () => animation.stop();
+  }, [reduced]);
+  return <Animated.View style={{ opacity: value, transform: [{ translateY: value.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] }}>{children}</Animated.View>;
+}
+
+/** The system spinner, sized to sit beside a line of text. */
+export function Spinner({ color, size = 12, label = "Working" }: { color: string; size?: number; label?: string }) {
+  return <View accessibilityLabel={label} style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+    {Platform.OS === "ios" ? <ActivityIndicator size="small" color={color} style={{ transform: [{ scale: size / 20 }] }} /> : <ActivityIndicator size={size} color={color} />}
+  </View>;
+}
+
+/** A soft breathing placeholder bar for loading states. Static under reduced motion. */
+export function Skeleton({ width, height = 10, color, radius = 4 }: { width: number | `${number}%`; height?: number; color: string; radius?: number }) {
+  const reduced = useReducedMotion();
+  const value = useRef(new Animated.Value(0.55)).current;
+  useEffect(() => {
+    if (reduced) return;
+    const loop = Animated.loop(Animated.sequence([
+      Animated.timing(value, { toValue: 1, duration: 800, easing: Easing.inOut(Easing.ease), useNativeDriver: native() }),
+      Animated.timing(value, { toValue: 0.55, duration: 800, easing: Easing.inOut(Easing.ease), useNativeDriver: native() }),
+    ]));
+    loop.start();
+    return () => loop.stop();
+  }, [reduced]);
+  return <Animated.View style={{ width, height, borderRadius: radius, backgroundColor: color, opacity: value }} />;
+}