paseo-smart-session 2.0.0 → 2.2.0

package/client/guard/settings.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+import { useRpc, useSettings, type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { SettingsAction, SettingsCard, SettingsInput, SettingsRow, SettingsSection, SettingsSelect, SettingsSwitch } from "@getpaseo/plugin/client/ui";
+import { cancelResumeRpc, guardPreferences, setProtectionRpc, statusRpc } from "../../shared/guard/contracts.ts";
+import { isPending, PolicySchema, type Policy } from "../../shared/guard/policy.ts";
+import { governorNotice, pauseOwnerNote } from "../../shared/guard/presentation.ts";
+import { refreshGuardPills } from "./pills.ts";
+
+type Draft = { thresholdPct: string; pollSeconds: string; resetGraceSeconds: string; resumeSpacingSeconds: string; continuation: string; providerIds: string; windowIds: string };
+function draftOf(policy: Policy): Draft {
+  return { thresholdPct: String(policy.thresholdPct), pollSeconds: String(policy.pollSeconds), resetGraceSeconds: String(policy.resetGraceSeconds),
+    resumeSpacingSeconds: String(policy.resumeSpacingSeconds), continuation: policy.continuation, providerIds: policy.providerIds.join(", "), windowIds: policy.windowIds.join(", ") };
+}
+const list = (value: string) => [...new Set(value.split(",").map(s => s.trim()).filter(Boolean))];
+
+export function GuardSettings({ theme, openOverview }: PluginSurfaceProps & { openOverview(): void }) {
+  const settings = useSettings(guardPreferences);
+  const values = settings.status === "ready" ? settings.values : undefined;
+  // Pills poll slowly while the feature is off; tell them as soon as it changes.
+  useEffect(() => {
+    if (values !== undefined) refreshGuardPills();
+  }, [values]);
+  const readStatus = useRpc(statusRpc);
+  const cancelResume = useRpc(cancelResumeRpc);
+  const setProtection = useRpc(setProtectionRpc);
+  const [status, setStatus] = useState<Awaited<ReturnType<typeof readStatus>> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [statusError, setStatusError] = useState<string | null>(null);
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [revision, setRevision] = useState<string | null>(null);
+  useEffect(() => {
+    let stopped = false;
+    let pending = false;
+    const refresh = async () => {
+      if (pending || stopped) return;
+      pending = true;
+      try { const next = await readStatus({}); if (!stopped) { setStatus(next); setStatusError(null); } }
+      catch { if (!stopped) setStatusError("Could not load current session status. Retrying automatically."); }
+      finally { pending = false; }
+    };
+    void refresh(); const timer = setInterval(() => void refresh(), 5000);
+    return () => { stopped = true; clearInterval(timer); };
+  }, [readStatus]);
+  if (settings.status === "loading") return <ActivityIndicator accessibilityLabel="Loading Session Guard settings" color={theme.colors.foregroundMuted} />;
+  if (settings.status !== "ready") return <View style={{ gap: 12 }}>
+    <Text accessibilityRole="alert" style={{ color: theme.colors.statusDanger }}>{settings.error}</Text>
+    <SettingsCard><SettingsAction label="Load saved settings again" actionLabel="Retry" onPress={() => void settings.reload()} />
+      {settings.status === "invalid" && <SettingsAction label="Replace invalid settings with defaults" actionLabel="Reset" onPress={() => void settings.reset()} disabled={settings.saving} />}</SettingsCard>
+  </View>;
+  const change = (patch: Partial<Policy>) => void settings.save({ ...settings.values, ...patch }, settings.revision);
+  const action = async (work: () => Promise<unknown>) => {
+    try { await work(); setStatus(await readStatus({})); setError(null); }
+    catch { setError("The change could not be saved. Try again."); }
+  };
+  const saveAdvanced = async () => {
+    if (!draft || !revision) return;
+    const parsed = PolicySchema.safeParse({ ...settings.values, ...draft,
+      thresholdPct: Number(draft.thresholdPct), pollSeconds: Number(draft.pollSeconds), resetGraceSeconds: Number(draft.resetGraceSeconds), resumeSpacingSeconds: Number(draft.resumeSpacingSeconds),
+      providerIds: list(draft.providerIds), windowIds: list(draft.windowIds),
+    });
+    if (!parsed.success) { setError(parsed.error.issues.map(i => `${i.path.join(".")}: ${i.message}`).join("\n")); return; }
+    if (await settings.save(parsed.data, revision)) { setDraft(null); setRevision(null); setError(null); }
+  };
+  const text = { color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 20 };
+  const waiting = status?.pauses.filter(isPending) ?? [];
+  // A non-governing plugin can show the shared pauses but cannot act on them.
+  const notice = status ? governorNotice(status) : null;
+  const owner = status ? pauseOwnerNote(status) : null;
+  return <View style={{ gap: 24 }}>
+    <Text style={text}>Pause work at the provider’s session limit, then continue the same conversation after reset. Your workspace and conversation stay in place.</Text>
+    {notice && status?.governor !== "off" && <SettingsCard><SettingsRow label={notice.title} hint={notice.hint} /></SettingsCard>}
+    <SettingsSection title="Protection"><SettingsCard>
+      <SettingsSwitch label="Enable Session Guard" hint="Off until you turn it on. Runs even when Paseo’s app is closed. Turning it off releases suspended workers; message continuations wait until you turn it back on or cancel them." value={settings.values.enabled} disabled={settings.saving || !!draft} onValueChange={enabled => change({ enabled })} />
+      <SettingsSelect label="Default for sessions" hint="Each session’s composer pill can override this default. Existing explicit overrides stay in place." value={settings.values.protectByDefault ? "all" : "opt-in"} options={[{ label: "Protect all sessions", value: "all" }, { label: "Opt in per session", value: "opt-in" }]} disabled={settings.saving || !!draft} onValueChange={value => change({ protectByDefault: value === "all" })} />
+      <SettingsSwitch label="Continue automatically after reset" hint="Waits for a fresh usage report below your threshold. Turn this off to continue manually." value={settings.values.autoResume} disabled={settings.saving || !!draft} onValueChange={autoResume => change({ autoResume })} />
+      <SettingsSwitch label="Include native subagents" hint="On Linux, pause Claude and Codex sessions together with their nested workers. Turn this off to interrupt only the foreground turn." value={settings.values.includeNativeSubagents} disabled={settings.saving || !!draft} onValueChange={includeNativeSubagents => change({ includeNativeSubagents })} />
+      <SettingsSwitch label="Label paused workspaces" hint="Show an amber Paused label in the left sidebar until every paused session in that workspace is released." value={settings.values.workspaceLabels} disabled={settings.saving || !!draft} onValueChange={workspaceLabels => change({ workspaceLabels })} />
+    </SettingsCard></SettingsSection>
+    <SettingsSection title="Waiting for reset"><SettingsCard>
+      {!status && <SettingsRow label="Loading session status…" />}
+      {status && waiting.length === 0 && <SettingsRow label="No sessions are paused" hint="Protected work will appear here when the session limit is reached." />}
+      {waiting.map(pause => {
+        const hint = pause.note ?? `${pause.provider}${pause.suspension ? " · Includes native subagents" : ""} · ${pause.anchorResetsAt ? `Reset ${new Date(pause.anchorResetsAt).toLocaleString([], { dateStyle: "short", timeStyle: "short" })}` : "Waiting for usage to become available"}`;
+        return owner ? <SettingsRow key={pause.id} label={pause.title ?? "Untitled session"} hint={`${hint}\n${owner}`} />
+          : <SettingsAction key={pause.id} label={pause.title ?? "Untitled session"} hint={hint} actionLabel={pause.suspension ? "Release and turn off" : "Cancel continuation"} disabled={settings.saving} onPress={() => void action(() => cancelResume({ agentId: pause.agentId }))} />;
+      })}
+      <SettingsAction label="All paused sessions" hint="Open sessions, check reset times, and manage each pause in one place." actionLabel="Open list" onPress={openOverview} />
+    </SettingsCard></SettingsSection>
+    {status && Object.keys(status.overrides).length > 0 && <SettingsSection title="Session overrides"><SettingsCard>
+      {Object.entries(status.overrides).map(([agentId, enabled]) => {
+        const label = status.pauses.find(p => p.agentId === agentId)?.title ?? `Session ${agentId.slice(0, 8)}`;
+        const hint = enabled ? "Explicitly protected" : "Excluded from protection";
+        return status.governor === "active" ? <SettingsAction key={agentId} label={label} hint={hint} actionLabel="Use default" onPress={() => void action(() => setProtection({ agentId, enabled: null }))} />
+          : <SettingsRow key={agentId} label={label} hint={hint} />;
+      })}
+    </SettingsCard></SettingsSection>}
+    <SettingsSection title="Timing and continuation"><SettingsCard>
+      {!draft ? <SettingsAction label={`Pause at ${settings.values.thresholdPct}% session usage`} hint={`Check every ${settings.values.pollSeconds}s · wait ${settings.values.resetGraceSeconds}s after reset · space continuations by ${settings.values.resumeSpacingSeconds}s`} actionLabel="Edit" onPress={() => { setDraft(draftOf(settings.values)); setRevision(settings.revision); }} /> : <>
+        <SettingsInput label="Pause threshold (%)" hint="1–100. Default: 100." initialValue={draft.thresholdPct} disabled={settings.saving} onChangeText={value => setDraft(previous => previous && { ...previous, thresholdPct: value })} />
+        <SettingsInput label="Check interval (seconds)" hint="5–300. Upstream usage may be cached by Paseo; this cannot force a provider refresh." initialValue={draft.pollSeconds} disabled={settings.saving} onChangeText={value => setDraft(previous => previous && { ...previous, pollSeconds: value })} />
+        <SettingsInput label="Wait after reset (seconds)" hint="0–600. Default: 30." initialValue={draft.resetGraceSeconds} disabled={settings.saving} onChangeText={value => setDraft(previous => previous && { ...previous, resetGraceSeconds: value })} />
+        <SettingsInput label="Space continuations (seconds)" hint="0–300. Avoid sending every paused session at once." initialValue={draft.resumeSpacingSeconds} disabled={settings.saving} onChangeText={value => setDraft(previous => previous && { ...previous, resumeSpacingSeconds: value })} />
+        <SettingsInput label="Continuation message" hint="Sent once into the same conversation after the reset is confirmed." initialValue={draft.continuation} disabled={settings.saving} onChangeText={value => setDraft(previous => previous && { ...previous, continuation: value })} />
+        <SettingsInput label="Provider IDs" hint="Comma separated. Leave empty to protect all providers reporting session usage." initialValue={draft.providerIds} disabled={settings.saving} onChangeText={value => setDraft(previous => previous && { ...previous, providerIds: value })} />
+        <SettingsInput label="Session window IDs" hint="Comma separated, in preference order. Default: five_hour, session." initialValue={draft.windowIds} disabled={settings.saving} onChangeText={value => setDraft(previous => previous && { ...previous, windowIds: value })} />
+        <SettingsAction label="Apply timing and continuation" actionLabel="Save changes" disabled={settings.saving} onPress={() => void saveAdvanced()} />
+        <SettingsAction label="Keep saved values" actionLabel="Discard changes" disabled={settings.saving} onPress={() => { setDraft(null); setRevision(null); setError(null); }} />
+      </>}
+    </SettingsCard></SettingsSection>
+    {(error || settings.saveError) && <Text accessibilityRole="alert" style={{ color: theme.colors.statusDanger }}>{error ?? settings.saveError}</Text>}
+    {(statusError || status?.error) && <Text accessibilityRole="alert" style={{ color: theme.colors.statusDanger }}>{statusError ?? status?.error}</Text>}
+  </View>;
+}

package/client/guard/surfaces.ts

@@ -0,0 +1,3 @@
+/** Session Guard's screen and settings page, opened from its pill, the overview and the timeline. */
+export const GUARD_SCREENS = { paused: "paused-sessions" } as const;
+export const GUARD_SETTINGS = "session-guard";

package/client/guard/timeline.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import { Text, View } from "react-native";
+import { useRpc, type PluginTimelineItemProps } from "@getpaseo/plugin/client";
+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 { 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";
+
+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);
+  const [pause, setPause] = useState<Pause | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [action, setAction] = useState<"resume" | "dismiss" | null>(null);
+  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 (!live) return;
+    setPause(null); setLoaded(false); setError(null); setStatusError(null);
+    let stopped = false, pending = false;
+    const refresh = async () => {
+      if (pending || stopped) return;
+      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("Couldn't check this pause. Retrying."); }
+      finally { pending = false; }
+    };
+    void refresh(); const timer = setInterval(() => void refresh(), 5000);
+    return () => { stopped = true; clearInterval(timer); };
+  }, [readStatus, agentId, item.data.event, item.data.pauseId]);
+  const act = async (kind: "resume" | "dismiss") => {
+    if (busy) return;
+    setAction(kind); setError(null);
+    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; retrying dismissal sends no message.");
+    } finally { setAction(null); }
+  };
+
+  const presentation = timelinePresentation(item.data);
+  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>
+  );
+
+  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 }} />;
+}