paseo-smart-session 2.1.0 → 2.2.0

package/client/guard/timeline.tsx

@@ -1,12 +1,29 @@
 import { useEffect, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { useRpc, type PluginTimelineItemProps } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import { timelinePresentation, type TimelineData } from "../../shared/guard/timeline.ts";
 import { dismissPauseRpc, resumeNowRpc, statusRpc } from "../../shared/guard/contracts.ts";
-import type { Pause } from "../../shared/guard/policy.ts";
+import { timestamp, type Pause } from "../../shared/guard/policy.ts";
+import { formatClock, formatDuration } from "../../shared/format.ts";
+import { formatMoment } from "../../shared/forecast.ts";
+import { Button, TextLink, text, useNow } from "../kit.tsx";
+import { Spinner } from "../motion.tsx";
+import { raised, tabular, withAlpha } from "../theme.ts";
 
-export function GuardTimelineItem({ theme, agentId, item, openOverview }: PluginTimelineItemProps<TimelineData> & { openOverview(): void }) {
+const providerName = (id: string) => (id === "claude" ? "Claude" : id === "codex" ? "Codex" : id);
+
+/**
+ * A Session Guard pause in the chat. While the pause waits, it is a card that leads
+ * with the clock the window resets at, a live countdown, and Resume now / Dismiss.
+ * Once the pause settles it resolves itself into one quiet line, so the chat keeps
+ * the history without a stale card. Settled events (resumed, released) are lines
+ * from the start.
+ */
+export function GuardTimelineItem({ theme, agentId, item, layout, openOverview }: PluginTimelineItemProps<TimelineData> & { openOverview(): void }) {
+  const c = theme.colors;
+  const t = text(c);
+  const compact = layout.compact;
   const readStatus = useRpc(statusRpc);
   const resumeNow = useRpc(resumeNowRpc);
   const dismissPause = useRpc(dismissPauseRpc);
@@ -16,8 +33,10 @@ export function GuardTimelineItem({ theme, agentId, item, openOverview }: Plugin
   const busy = action !== null;
   const [error, setError] = useState<string | null>(null);
   const [statusError, setStatusError] = useState<string | null>(null);
+  const live = ["paused", "recovery"].includes(item.data.event);
+  const now = useNow(live && pause?.phase === "waiting" ? 15_000 : 60_000);
   useEffect(() => {
-    if (!["paused", "recovery"].includes(item.data.event)) return;
+    if (!live) return;
     setPause(null); setLoaded(false); setError(null); setStatusError(null);
     let stopped = false, pending = false;
     const refresh = async () => {
@@ -25,8 +44,8 @@ export function GuardTimelineItem({ theme, agentId, item, openOverview }: Plugin
       pending = true;
       try {
         const status = await readStatus({});
-        if (!stopped) { setPause(status.pauses.find(p => p.id === item.data.pauseId && p.agentId === agentId) ?? null); setLoaded(true); setStatusError(null); }
-      } catch { if (!stopped) setStatusError("Could not check this pause. Retrying automatically."); }
+        if (!stopped) { setPause(status.pauses.find((p) => p.id === item.data.pauseId && p.agentId === agentId) ?? null); setLoaded(true); setStatusError(null); }
+      } catch { if (!stopped) setStatusError("Couldn't check this pause. Retrying."); }
       finally { pending = false; }
     };
     void refresh(); const timer = setInterval(() => void refresh(), 5000);
@@ -38,57 +57,98 @@ export function GuardTimelineItem({ theme, agentId, item, openOverview }: Plugin
     try {
       await (kind === "resume" ? resumeNow : dismissPause)({ agentId, pauseId: item.data.pauseId });
       const status = await readStatus({});
-      setPause(status.pauses.find(p => p.id === item.data.pauseId && p.agentId === agentId) ?? null);
-    } catch { setError(kind === "resume" ? "Resume could not be confirmed. Check the session before trying again."
-      : "Dismissal could not be confirmed. Check the pause status; you can retry dismissal without sending a message."); }
-    finally { setAction(null); }
+      setPause(status.pauses.find((p) => p.id === item.data.pauseId && p.agentId === agentId) ?? null);
+    } catch {
+      setError(kind === "resume" ? "Resume could not be confirmed. Check the session before trying again."
+        : "Dismissal could not be confirmed. Check the pause; retrying dismissal sends no message.");
+    } finally { setAction(null); }
   };
-  if (pause?.phase === "cancelled" && pause.dismissed && ["paused", "recovery"].includes(item.data.event)) return <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8, padding: 14 }}>
-    <Icon name="ShieldOff" size={16} color={theme.colors.foregroundMuted} />
-    <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>Pause dismissed · no message sent · protection off</Text>
-  </View>;
+
   const presentation = timelinePresentation(item.data);
-  const color = presentation.tone === "warning" ? theme.colors.statusWarning : presentation.tone === "success" ? theme.colors.statusSuccess
-    : presentation.tone === "danger" ? theme.colors.statusDanger : theme.colors.foregroundMuted;
-  return <View style={{ borderWidth: 1, borderColor: theme.colors.border, borderRadius: 8, backgroundColor: theme.colors.surface1, padding: 14, gap: 10 }}>
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-      <Icon name={presentation.icon} size={18} color={color} />
-      <Text style={{ color: theme.colors.foreground, fontSize: 14, fontWeight: "600", flex: 1 }}>{presentation.title}</Text>
+  const at = formatClock(item.data.at);
+
+  /** One quiet line: the settled form of every card. */
+  const line = (icon: string, color: string, words: string, extra?: string) => (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 4 }}>
+      <View style={{ width: 22, alignItems: "center" }}><Icon name={icon} size={13} color={color} /></View>
+      <Text style={{ flexShrink: 1, color: c.foregroundMuted, fontSize: 13, lineHeight: 18, ...tabular }}>
+        <Text style={{ color: c.foreground }}>{words}</Text>{extra ? ` · ${extra}` : ""}
+      </Text>
     </View>
-    <Text style={{ color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 20 }}>{presentation.detail}</Text>
-    <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>{new Date(item.data.at).toLocaleString([], { dateStyle: "short", timeStyle: "short" })}</Text>
-    {["paused", "recovery"].includes(item.data.event) && <View style={{ gap: 6 }}>
-      {!loaded && <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>Checking pause status…</Text>}
-      {pause?.phase === "waiting" && <>
-        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
-        <Pressable accessibilityRole="button" accessibilityLabel="Resume now" accessibilityState={{ disabled: busy, busy: action === "resume" }} disabled={busy} onPress={() => void act("resume")} style={({ pressed }) => ({ alignSelf: "flex-start", minHeight: 44, flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, borderWidth: 1, borderColor: theme.colors.border, borderRadius: 8, opacity: busy || pressed ? 0.6 : 1 })}>
-          <Icon name="Play" size={16} color={theme.colors.statusSuccess} />
-          <Text style={{ color: theme.colors.foreground, fontSize: 13, fontWeight: "600" }}>{action === "resume" ? "Resuming…" : "Resume now"}</Text>
-        </Pressable>
-        <Pressable accessibilityRole="button" accessibilityLabel="Dismiss pause without sending a message" accessibilityState={{ disabled: busy, busy: action === "dismiss" }} disabled={busy} onPress={() => void act("dismiss")} style={({ pressed }) => ({ alignSelf: "flex-start", minHeight: 44, flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, borderWidth: 1, borderColor: theme.colors.border, borderRadius: 8, opacity: busy || pressed ? 0.6 : 1 })}>
-          <Icon name="ShieldOff" size={16} color={theme.colors.foregroundMuted} />
-          <Text style={{ color: theme.colors.foreground, fontSize: 13 }}>{action === "dismiss" ? "Dismissing…" : "Dismiss pause"}</Text>
-        </Pressable>
-        </View>
-        <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{item.data.demo
-          ? "Releases this test session and turns its protection off."
-          : "Turns protection off for this session. The provider may still reject work until reset."}</Text>
-        <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>Dismiss cancels automatic continuation without sending a message. Existing workers are released and may continue their current work.</Text>
-      </>}
-      {loaded && pause?.phase === "resumed" && <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>{pause.manualResume ? "Resumed · protection off for this session" : "This pause has already resumed."}</Text>}
-      {loaded && (!pause || pause.phase === "cancelled") && <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>This pause is no longer active.</Text>}
-      {pause?.phase === "resuming" && <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>Resuming session…</Text>}
-      {pause?.phase === "attention" && <>
-        <Text style={{ color: theme.colors.statusDanger, fontSize: 12 }}>{pause.dismissed ? "Worker release needs attention. Automatic continuation is cancelled." : "Check the session before continuing manually."}</Text>
-        {pause.dismissed && <Pressable accessibilityRole="button" accessibilityLabel="Retry dismissing pause without sending a message" disabled={busy} accessibilityState={{ disabled: busy, busy: action === "dismiss" }} onPress={() => void act("dismiss")} style={{ minHeight: 44, justifyContent: "center" }}>
-          <Text style={{ color: theme.colors.foreground, fontSize: 13, textDecorationLine: "underline" }}>{action === "dismiss" ? "Dismissing…" : "Retry dismissal"}</Text>
-        </Pressable>}
-      </>}
-      {error && <Text accessibilityRole="alert" style={{ color: theme.colors.statusDanger, fontSize: 12 }}>{error}</Text>}
-      {statusError && <Text accessibilityRole="alert" style={{ color: theme.colors.statusDanger, fontSize: 12 }}>{statusError}</Text>}
-    </View>}
-    <Pressable accessibilityRole="button" accessibilityLabel="See all paused sessions" onPress={openOverview} style={({ pressed }) => ({ alignSelf: "flex-start", minHeight: 44, justifyContent: "center", paddingVertical: 8, paddingHorizontal: 2, opacity: pressed ? 0.7 : 1 })}>
-      <Text style={{ color: theme.colors.foreground, fontSize: 13, textDecorationLine: "underline" }}>See all paused sessions</Text>
-    </Pressable>
+  );
+
+  if (!live) {
+    if (item.data.event === "resumed") return line("Play", c.foregroundMuted, presentation.title, item.data.manualResume ? `${at} · by you · protection off for this session` : `${at} · ${item.data.native ? "workers continued in place" : "continuation sent"}`);
+    if (item.data.event === "released") return line("ShieldOff", c.foregroundMuted, presentation.title, item.data.dismissed ? `${at} · no message sent · protection off` : at);
+    // attention
+    return <View style={[{ borderRadius: 12, backgroundColor: c.surface1, padding: 14, gap: 6, borderWidth: 1, borderColor: withAlpha(c.statusDanger, 0.6) }]}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <Icon name="TriangleAlert" size={15} color={c.statusDanger} />
+        <Text style={{ ...t.label, color: c.statusDanger, flex: 1 }}>{presentation.title}</Text>
+        <Text style={t.meta}>{at}</Text>
+      </View>
+      <Text style={t.body}>{presentation.detail}</Text>
+    </View>;
+  }
+
+  // A live pause: settled ones fold to a line.
+  if (loaded && (pause === null || pause.phase === "cancelled" || pause.phase === "resumed")) {
+    if (pause?.phase === "cancelled" && pause.dismissed) return line("ShieldOff", c.foregroundMuted, "Pause dismissed", "no message sent · protection off");
+    if (pause?.phase === "resumed") return line("Pause", c.foregroundMuted, `Paused at ${at}`, pause.manualResume ? `resumed by you ${formatClock(pause.settledAt)}` : `resumed ${formatClock(pause.settledAt)}`);
+    // The event that ended it has its own line; this one only says when.
+    return line("Pause", c.foregroundMuted, `Paused at ${at}`, pause?.settledAt ? `ended ${formatClock(pause.settledAt)}` : "no longer active");
+  }
+
+  const reset = timestamp(item.data.resetAt);
+  const auto = item.data.autoResume;
+  const waiting = pause?.phase === "waiting";
+  const stuck = pause?.phase === "attention";
+  // Lead with the moment, the way every family card does: the reset clock, then the countdown.
+  const big = item.data.demo ? "Test pause" : reset === null ? "Reset time unknown" : formatMoment(item.data.resetAt!, now);
+  const countdown = item.data.demo ? "waits for you" : reset === null ? "waiting for the provider to report it" : reset <= now ? "reset passed · waiting for a fresh reading" : `${auto ? "resumes" : "resets"} in ${formatDuration(reset - now)}`;
+  const facts = [item.data.demo ? "Test pause" : item.data.event === "recovery" ? "Saved through a Paseo restart" : "Paused at the session limit", at, providerName(item.data.provider),
+    item.data.usedPct === null ? null : `${Math.round(item.data.usedPct)}% used`,
+    item.data.native ? "native subagents frozen" : "turn interrupted",
+    auto ? null : "continue by hand"].filter(Boolean).join(" · ");
+  const accent = stuck ? c.statusDanger : c.statusWarning;
+
+  return <View style={[{ borderRadius: 12, backgroundColor: c.surface1, paddingHorizontal: 14, paddingVertical: 12, gap: 8 }, stuck ? { borderWidth: 1, borderColor: withAlpha(c.statusDanger, 0.6) } : raised(c)]}>
+    {stuck ? <>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <Icon name="TriangleAlert" size={14} color={accent} />
+        <Text style={{ ...t.label, flex: 1, color: c.statusDanger }}>Pause needs attention</Text>
+        <Text style={t.meta}>{at}</Text>
+      </View>
+      <Text style={t.body}>{pause?.note ?? (pause?.dismissed ? "Worker release needs attention. Automatic continuation is cancelled." : "Check the session before continuing by hand.")}</Text>
+    </> : <>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap", rowGap: 0 }}>
+        <Icon name="Pause" size={compact ? 15 : 16} color={accent} />
+        <Text style={{ color: c.foreground, fontSize: compact ? 18 : 20, lineHeight: compact ? 24 : 26, fontWeight: "600", ...tabular }}>{big}</Text>
+        <Text style={{ ...t.meta, fontSize: 13, flexShrink: 1 }}>{countdown}</Text>
+      </View>
+      <Text style={t.meta}>{facts}</Text>
+      {item.data.event === "recovery" ? <Text style={t.meta}>The original workers ended; the conversation and workspace stay in place.</Text> : null}
+    </>}
+    {!loaded ? <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}><Spinner color={c.foregroundMuted} size={11} /><Text style={t.meta}>Checking the pause…</Text></View> : null}
+    {pause?.phase === "resuming" ? <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}><Spinner color={c.foregroundMuted} size={11} /><Text style={t.meta}>Resuming…</Text></View> : null}
+    {waiting ? <View style={{ gap: 6 }}>
+      <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+        <Button theme={theme} small compact={compact} icon="Play" title={action === "resume" ? "Resuming…" : "Resume now"} loading={action === "resume"} disabled={busy}
+          accessibilityHint={item.data.demo ? "Releases this test session and turns its protection off." : "Continues before the reset and turns protection off for this session. The provider may still refuse work until the reset."} onPress={() => void act("resume")} />
+        <Button theme={theme} small compact={compact} kind="ghost" title={action === "dismiss" ? "Dismissing…" : "Dismiss pause"} disabled={busy}
+          accessibilityLabel="Dismiss pause without sending a message" onPress={() => void act("dismiss")} />
+        <View style={{ flex: 1, minWidth: 8 }} />
+        <TextLink theme={theme} compact={compact} label="All paused" onPress={openOverview} />
+      </View>
+      <Text style={t.small}>{item.data.demo ? "Resume now releases this test session and turns its protection off." : "Resume now turns protection off for this session · Dismiss sends nothing"}</Text>
+    </View> : null}
+    {stuck && pause?.dismissed ? <View style={{ flexDirection: "row" }}>
+      <Button theme={theme} small compact={compact} title={action === "dismiss" ? "Dismissing…" : "Retry dismissal"} disabled={busy}
+        accessibilityLabel="Retry dismissing pause without sending a message" onPress={() => void act("dismiss")} />
+    </View> : null}
+    {error ? <Text accessibilityRole="alert" style={{ ...t.meta, color: c.statusDanger }}>{error}</Text> : null}
+    {statusError ? <Text accessibilityRole="alert" style={{ ...t.meta, color: c.statusDanger }}>{statusError}</Text> : null}
+    {stuck ? <TextLink theme={theme} compact={compact} label="All paused sessions" onPress={openOverview} /> : null}
   </View>;
 }
+

package/client/kit.tsx

@@ -0,0 +1,144 @@
+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, tabular, tint, withAlpha, type Colors, type Theme } from "./theme";
+
+export type { Theme } from "./theme";
+
+/**
+ * The plugin family's kit (Follow-up and Defer use the same pieces): one button
+ * vocabulary, raised cards, tinted chips, an accessible switch and the type scale.
+ */
+
+/** Re-render on an interval so relative times keep moving between polls. */
+export function useNow(intervalMs = 30_000): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+  return now;
+}
+
+export function errorText(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+/** The family type scale: tabular numerals wherever a time or count can appear. */
+export const text = (colors: Colors) => ({
+  title: { color: colors.foreground, fontSize: 15, lineHeight: 21, fontWeight: "600" as const },
+  body: { color: colors.foreground, fontSize: 13, lineHeight: 19 },
+  meta: { color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, ...tabular },
+  small: { color: colors.foregroundMuted, fontSize: 11, lineHeight: 15, ...tabular },
+  label: { color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" as const },
+  group: { color: colors.foregroundMuted, fontSize: 12, lineHeight: 16, fontWeight: "600" as const, ...tabular },
+});
+
+type ButtonKind = "primary" | "secondary" | "ghost" | "danger";
+/** 28–32px with a hit slop on desktop, 44px on touch layouts. */
+export function Button({ title, onPress, theme, kind = "secondary", disabled = false, loading = false, icon, iconColor, compact = false, small = false, accessibilityLabel, accessibilityHint }: {
+  title: string; onPress: () => void; theme: Theme; kind?: ButtonKind; disabled?: boolean; loading?: boolean; icon?: string; iconColor?: string; compact?: boolean; small?: boolean; accessibilityLabel?: string; accessibilityHint?: string;
+}) {
+  const c = theme.colors;
+  const fg = kind === "primary" ? c.accentForeground : kind === "danger" ? c.statusDanger : c.foreground;
+  const inactive = disabled || loading;
+  const height = compact ? 44 : small ? 28 : 32;
+  return <PressScale accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? title} accessibilityHint={accessibilityHint} accessibilityState={{ disabled: inactive, busy: loading }}
+    disabled={inactive} onPress={onPress} hitSlop={compact ? 0 : 4} outerStyle={{ alignSelf: "flex-start" }}
+    style={({ pressed, hovered }) => ({
+      minHeight: height, paddingHorizontal: compact ? 14 : small ? 9 : 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" || kind === "danger" ? { 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={iconColor ?? fg} /> : null}
+    <Text numberOfLines={1} style={{ color: fg, fontSize: compact ? 14 : small ? 12 : 13, lineHeight: compact ? 19 : 16, fontWeight: kind === "primary" ? "600" : "500", ...tabular }}>{title}</Text>
+  </PressScale>;
+}
+
+/** A square icon-only control with an accessible name. */
+export function IconButton({ icon, label, onPress, theme, compact = false, disabled = false, color }: { icon: string; label: string; onPress: () => void; theme: Theme; compact?: boolean; disabled?: 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 ? 0.45 : 1 })}>
+    <Icon name={icon} size={compact ? 18 : 15} color={color ?? c.foregroundMuted} />
+  </PressScale>;
+}
+
+/** A raised container. Groups of rows sit inside one; rows divide with hairlines. */
+export function Card({ theme, children, style }: { theme: Theme; children: ReactNode; style?: StyleProp<ViewStyle> }) {
+  const c = theme.colors;
+  return <View style={[{ borderRadius: 10, overflow: "hidden", backgroundColor: c.surface0 }, raised(c), style]}>{children}</View>;
+}
+
+/** 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: 14, paddingVertical: 12, 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>;
+}
+
+/** A count or status tag in its own hue at 12–16%. */
+export function Chip({ theme, label, color, icon }: { theme: Theme; label: string; color?: string; icon?: string }) {
+  const c = theme.colors;
+  const hue = color ?? c.foregroundMuted;
+  return <View style={{ flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 7, paddingVertical: 1, borderRadius: 999, backgroundColor: tint(hue, c), alignSelf: "center" }}>
+    {icon ? <Icon name={icon} size={11} color={hue} /> : null}
+    <Text numberOfLines={1} style={{ color: hue, fontSize: 11, lineHeight: 16, fontWeight: "600", ...tabular }}>{label}</Text>
+  </View>;
+}
+
+/** A section heading with an optional count and a right-hand slot. */
+export function SectionHead({ theme, title, count, trailing }: { theme: Theme; title: string; count?: number; trailing?: ReactNode }) {
+  const c = theme.colors;
+  return <View style={{ flexDirection: "row", alignItems: "center", gap: 7, minHeight: 28 }}>
+    <Text accessibilityRole="header" style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{title}</Text>
+    {count === undefined ? null : <Chip theme={theme} label={String(count)} />}
+    <View style={{ flex: 1 }} />
+    {trailing}
+  </View>;
+}
+
+/** A quiet text link with a trailing arrow, for places a view points to rather than controls. */
+export function TextLink({ theme, label, onPress, icon = "ArrowUpRight", compact = false }: { theme: Theme; label: string; onPress: () => void; icon?: string; compact?: boolean }) {
+  const c = theme.colors;
+  return <Pressable accessibilityRole="link" accessibilityLabel={label} onPress={onPress} hitSlop={compact ? 0 : 6}
+    style={(state) => ({ minHeight: compact ? 44 : 24, flexDirection: "row", alignItems: "center", gap: 3, opacity: state.pressed ? 0.6 : 1 })}>
+    {(state) => <>
+      <Text style={{ color: (state as { hovered?: boolean }).hovered ? c.foreground : c.foregroundMuted, fontSize: 12, lineHeight: 17, textDecorationLine: (state as { hovered?: boolean }).hovered ? "underline" : "none" }}>{label}</Text>
+      <Icon name={icon} size={12} color={c.foregroundMuted} />
+    </>}
+  </Pressable>;
+}
+
+/** An accessible switch: accent only for "on", the one place this plugin uses it besides primary buttons. */
+export function Switch({ theme, label, value, onChange, disabled = false, hideLabel = false, compact = false }: { theme: Theme; label: string; value: boolean | null; onChange: (next: boolean) => void; disabled?: boolean; hideLabel?: boolean; 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={label}
+    accessibilityState={{ checked: value === null ? "mixed" : on, disabled: inactive }} accessibilityValue={{ text: value === null ? "Unknown" : on ? "On" : "Off" }}
+    disabled={inactive} onPress={() => onChange(!on)} hitSlop={compact ? 0 : 6}
+    style={({ pressed }) => ({ minHeight: compact ? 44 : 28, flexDirection: "row", alignItems: "center", gap: 8, opacity: inactive ? 0.5 : pressed ? 0.8 : 1 })}>
+    {hideLabel ? null : <Text numberOfLines={1} style={{ color: c.foregroundMuted, fontSize: 12, lineHeight: 16 }}>{label}</Text>}
+    <View style={{ width: 34, height: 20, borderRadius: 10, backgroundColor: on ? c.accent : c.surface2, borderWidth: 1, borderColor: on ? c.accent : c.border, justifyContent: "center" }}>
+      <View style={{ width: 14, height: 14, borderRadius: 7, marginLeft: value === null ? 9 : on ? 16 : 2, backgroundColor: on ? c.accentForeground : value === null ? c.border : c.foregroundMuted }} />
+    </View>
+  </Pressable>;
+}
+
+/** A small status dot, or a spinner while the agent works. */
+export function StatusGlyph({ theme, status }: { theme: Theme; status: string }) {
+  const c = theme.colors;
+  if (status === "running" || status === "initializing") return <Spinner color={c.foregroundMuted} size={11} label="Working" />;
+  const color = status === "error" ? c.statusDanger : status === "idle" ? c.foregroundMuted : c.border;
+  return <View accessibilityLabel={status} style={{ width: 11, height: 11, alignItems: "center", justifyContent: "center" }}>
+    <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: color }} />
+  </View>;
+}

package/client/live.ts

@@ -0,0 +1,49 @@
+import { useSyncExternalStore } from "react";
+import type { z } from "zod";
+
+import type { budgetStatus } from "../shared/smart-session";
+
+type Budget = z.infer<(typeof budgetStatus)["output"]>;
+
+/**
+ * What the sidebar row shows, fed by the polls that already run: the budget from
+ * the overview and the client's own slow poll, the paused count from the Session
+ * Guard pills' status poll. One per plugin installation.
+ */
+export interface Live {
+  subscribe(listener: () => void): () => void;
+  version(): number;
+  budget(): Budget | null;
+  paused(): { waiting: number; attention: number };
+  setBudget(budget: Budget): void;
+  setPaused(counts: { waiting: number; attention: number }): void;
+}
+
+export function createLive(): Live {
+  let budget: Budget | null = null;
+  let paused = { waiting: 0, attention: 0 };
+  let version = 0;
+  const listeners = new Set<() => void>();
+  const notify = () => {
+    version += 1;
+    for (const listener of [...listeners]) listener();
+  };
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => { listeners.delete(listener); };
+    },
+    version: () => version,
+    budget: () => budget,
+    paused: () => paused,
+    setBudget(next) { budget = next; notify(); },
+    setPaused(next) {
+      if (next.waiting === paused.waiting && next.attention === paused.attention) return;
+      paused = next; notify();
+    },
+  };
+}
+
+export function useLive(live: Live): number {
+  return useSyncExternalStore(live.subscribe, live.version, live.version);
+}

package/client/motion.tsx

@@ -0,0 +1,94 @@
+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";
+// Built on first use, so importing this module needs nothing from react-native.
+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 }} />;
+}