paseo-smart-session 3.1.0 → 3.3.0

package/client/guard/paused.tsx

@@ -1,164 +1,135 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { Text, TextInput, View } from "react-native";
-import { type PluginSurfaceProps, useRpc } from "@getpaseo/plugin/client";
-import { Icon, ScrollView, useToast } from "@getpaseo/plugin/client/ui";
-import { cancelResumeRpc, statusRpc } from "../../shared/guard/contracts.ts";
-import { governorNotice, pauseOwnerNote, pausedSessions, pausePresentation } from "../../shared/guard/presentation.ts";
+import { type PluginScreenProps, useRpc } from "@getpaseo/plugin/client";
+import { Icon, useToast } from "@getpaseo/plugin/client/ui";
+import { cancelResumeRpc, dismissPauseRpc, resumeNowRpc, setProtectionRpc, statusRpc } from "../../shared/guard/contracts.ts";
+import { PAUSE_ACTIONS, governorNotice, pauseOwnerNote, pausedLead, pausedSessions, pausePresentation } from "../../shared/guard/presentation.ts";
 import { timestamp, type Pause } from "../../shared/guard/policy.ts";
-import { formatDuration, formatRelative } from "../../shared/format.ts";
+import { formatDuration } from "../../shared/format.ts";
 import { formatMoment } from "../../shared/forecast.ts";
-import { Button, Card, CardRow, Chip, IconButton, SectionHead, text, useNow } from "../kit.tsx";
-import { Skeleton } from "../motion.tsx";
-import { tabular } from "../theme.ts";
+import { Button, Card, CardRow, SectionHead, TextLink, text } from "../kit.tsx";
+import { tabular, type Theme } from "../theme.ts";
+import { publishGuard, type GuardStatus } from "./status.ts";
 
 const providerName = (id: string) => (id === "claude" ? "Claude" : id === "codex" ? "Codex" : id);
 
 /**
- * Every Session Guard pause on this host, as times: when each session's window
- * resets and whether it continues by itself. Rows act only on pauses this process
- * governs; another governor's pauses are listed read-only.
+ * The overview's Paused sessions section: every pause on this host as times, when
+ * each session's window resets and whether it continues by itself. Rows act only on
+ * pauses this process governs; another governor's pauses are listed read-only.
  */
-export function PausedSessions({ theme, host, layout, navigation, openSettings }: PluginSurfaceProps & { openSettings(): void }) {
+export function PausedSection({ theme, layout, host, navigation, status, shared: lead, now, openSettings }: Pick<PluginScreenProps, "theme" | "layout" | "host" | "navigation"> & {
+  status: GuardStatus | null; shared: number | null; now: number; openSettings(): void;
+}) {
   const c = theme.colors;
   const t = text(c);
   const compact = layout.compact;
   const toast = useToast();
-  const now = useNow(15_000);
   const read = useRpc(statusRpc);
   const cancel = useRpc(cancelResumeRpc);
-  const [status, setStatus] = useState<Awaited<ReturnType<typeof read>> | null>(null);
-  const [loadError, setLoadError] = useState<string | null>(null);
+  const resumeNow = useRpc(resumeNowRpc);
+  const dismiss = useRpc(dismissPauseRpc);
   const [busy, setBusy] = useState<string | null>(null);
   const [query, setQuery] = useState("");
-  const refresh = useRef<() => Promise<void>>(async () => {});
-  useEffect(() => {
-    let stopped = false, fetching = false;
-    const fetch = async () => {
-      if (fetching || stopped) return;
-      fetching = true;
-      try { const next = await read({}); if (!stopped) { setStatus(next); setLoadError(null); } }
-      catch { if (!stopped) setLoadError("Couldn't refresh paused sessions. Showing the last report; retrying."); }
-      finally { fetching = false; }
-    };
-    refresh.current = fetch;
-    void fetch(); const timer = setInterval(() => void fetch(), 5000);
-    return () => { stopped = true; clearInterval(timer); };
-  }, [read]);
-  const release = async (pause: Pause) => {
+  // A waiting pause gets the same two actions as its chat card; only a stuck one is released.
+  const act = async (pause: Pause, kind: "resume" | "dismiss" | "release") => {
     if (busy) return;
-    setBusy(pause.agentId);
-    try { await cancel({ agentId: pause.agentId }); await refresh.current(); toast.show(pause.suspension ? "Released · protection off for that session" : "Continuation cancelled"); }
-    catch { toast.error("Couldn't change this pause. Refresh and try again."); }
+    setBusy(`${pause.agentId}:${kind}`);
+    try {
+      if (kind === "release") await cancel({ agentId: pause.agentId });
+      else await (kind === "resume" ? resumeNow : dismiss)({ agentId: pause.agentId, pauseId: pause.id });
+      publishGuard(await read({}));
+      toast.show(kind === "resume" ? "Resumed · it no longer pauses at the limit" : kind === "dismiss" ? "Pause dismissed · nothing was sent" : "Released");
+    } catch { toast.error("Couldn't change this pause. Check the session and try again."); }
     finally { setBusy(null); }
   };
 
   const all = status ? pausedSessions(status.pauses) : [];
   const visible = status ? pausedSessions(status.pauses, query) : [];
-  const attention = visible.filter((p) => p.phase === "attention");
-  const waiting = visible.filter((p) => p.phase !== "attention");
   // Both plugins share one state file: when this one is not governing, the list is
   // the other plugin's (or a leftover), and its controls would only fail.
   const notice = status ? governorNotice(status) : null;
   const owner = status ? pauseOwnerNote(status) : null;
   const autoResume = status ? status.policy.enabled && status.policy.autoResume : false;
-
-  // The headline is the moment: when they come back, or that one needs a look.
-  const allWaiting = all.filter((p) => p.phase !== "attention");
-  const allStuck = all.length - allWaiting.length;
-  const resets = allWaiting.map((p) => timestamp(p.anchorResetsAt)).filter((v): v is number => v !== null && v > now).sort((a, b) => a - b);
-  const shared = resets.length === allWaiting.length && resets.length > 0 && resets[resets.length - 1]! - resets[0]! < 60_000 ? resets[0]! : null;
-  const n = (count: number, one: string, many: string) => `${count} ${count === 1 ? one : many}`;
-  const clock = (ms: number) => formatMoment(new Date(ms).toISOString(), now);
-  const title = status === null ? null
-    : all.length === 0 ? "Nothing is paused"
-      : allWaiting.length === 0 ? `${n(allStuck, "session needs", "sessions need")} a look`
-        : shared !== null ? (autoResume ? `${n(allWaiting.length, "session resumes", "sessions resume")} at ${clock(shared)}` : `${n(allWaiting.length, "session waits", "sessions wait")} for the ${clock(shared)} reset`)
-          : resets.length > 0 ? `${n(allWaiting.length, "session", "sessions")} paused · next ${autoResume ? "resumes" : "reset"} at ${clock(resets[0]!)}`
-            : `${n(allWaiting.length, "session waits", "sessions wait")} for a fresh reading`;
-  const sentence = status === null ? "" : [
-    shared !== null ? `in ${formatDuration(shared - now)}` : null,
-    allStuck > 0 && allWaiting.length > 0 ? `${allStuck} ${allStuck === 1 ? "needs" : "need"} a look` : null,
-    all.length === 0 || allWaiting.length === 0 ? null : owner ? "Managed by another Session Guard" : autoResume ? "Each continues in the same conversation" : "Continue each by hand after the reset",
-    status.checkedAt ? `Checked ${formatRelative(status.checkedAt, now)}` : "Waiting for the first usage check",
-  ].filter(Boolean).join(" · ");
+  // The overview's lead names the shared reset only for pauses governed here; the list
+  // finds it itself otherwise, so rows never repeat a time the section already implies.
+  const shared = lead ?? pausedLead(all, autoResume, now, String)?.shared ?? null;
 
   const row = (pause: Pause, i: number) => {
     const presentation = pausePresentation(pause, status!.policy, now);
     const reset = timestamp(pause.anchorResetsAt);
     const stuck = pause.phase === "attention";
-    // A row leads with what differs between rows, the session; its time only when it differs from the headline's.
+    // A row leads with what differs between rows, the session; its time only when it differs from the lead's.
     const ownTime = !stuck && !pause.demo && reset !== null && reset > now && (shared === null || Math.abs(reset - shared) >= 60_000) ? formatMoment(pause.anchorResetsAt!, now) : null;
-    const after = stuck ? (pause.note ?? "It stopped before Session Guard could confirm the pause. Check it before continuing by hand.")
-      : pause.demo ? "Test pause · waits for you"
+    const after = stuck ? (pause.note ?? "It stopped before the pause was confirmed. Check it before continuing by hand.")
+      : pause.demo ? "Test pause, waits for you"
         : reset === null ? "Waiting for the provider to report the reset"
-          : reset > now ? `${autoResume ? "Resumes" : "Resets"} in ${formatDuration(reset - now)}`
+          : reset > now ? (ownTime === null && shared !== null ? null : `${autoResume ? "Resumes" : "Resets"} in ${formatDuration(reset - now)}`)
             : `Reset was ${formatMoment(pause.anchorResetsAt!, now)} · waiting for a fresh reading`;
-    const chips = [providerName(pause.provider), presentation.coverage];
-    const canAct = owner === null;
-    return <CardRow key={pause.id} theme={theme} first={i === 0} style={{ gap: 6 }}>
+    // The lead says when a shared reset lands and what happens then; a row adds only what differs.
+    const facts = [after, providerName(pause.provider), presentation.coverage.toLowerCase()].filter(Boolean).join(" · ");
+    const actions = owner !== null ? null : pause.phase === "waiting" ? <>
+      <Button theme={theme} small compact={compact} icon={PAUSE_ACTIONS.resume.icon} title={busy === `${pause.agentId}:resume` ? PAUSE_ACTIONS.resume.busy : PAUSE_ACTIONS.resume.label} disabled={busy !== null}
+        accessibilityHint={PAUSE_ACTIONS.resume.hint} onPress={() => void act(pause, "resume")} />
+      <Button theme={theme} small compact={compact} kind="ghost" title={busy === `${pause.agentId}:dismiss` ? PAUSE_ACTIONS.dismiss.busy : PAUSE_ACTIONS.dismiss.label} disabled={busy !== null}
+        accessibilityHint={PAUSE_ACTIONS.dismiss.hint} onPress={() => void act(pause, "dismiss")} />
+    </> : stuck ? <Button theme={theme} small compact={compact} kind="ghost" title={busy === `${pause.agentId}:release` ? "Updating…" : presentation.actionLabel} disabled={busy !== null}
+      accessibilityHint={presentation.actionHint} onPress={() => void act(pause, "release")} /> : null;
+    const open = navigation ? <TextLink theme={theme} compact={compact} label="Open" onPress={() => navigation.openAgent({ agentId: pause.agentId, serverId: host.id })} /> : null;
+    return <CardRow key={pause.id} theme={theme} first={i === 0 && !(notice && all.length > 0)} style={{ gap: compact ? 6 : 2 }}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
         <Icon name={stuck ? "TriangleAlert" : "Pause"} size={14} color={stuck ? c.statusDanger : c.statusWarning} />
-        <Text numberOfLines={2} style={{ ...t.title, flex: 1 }}>{presentation.title}</Text>
-        {ownTime ? <Text style={{ color: c.foreground, fontSize: 15, lineHeight: 21, fontWeight: "600", ...tabular }}>{ownTime}</Text> : null}
-      </View>
-      <Text style={{ ...t.meta, color: stuck ? c.statusDanger : c.foregroundMuted, paddingLeft: 22 }}>{after}</Text>
-      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 6, paddingLeft: 22 }}>
-        {chips.map((chip) => <Chip key={chip} theme={theme} label={chip} />)}
-        {owner ? <Chip theme={theme} label="Read-only here" /> : null}
-      </View>
-      {owner ? <Text style={{ ...t.meta, paddingLeft: 22 }}>{owner}</Text> : null}
-      <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 6, marginTop: 2, paddingLeft: 22 }}>
-        {navigation ? <Button theme={theme} small compact={compact} icon={compact ? undefined : "ArrowUpRight"} title="Open session" onPress={() => navigation.openAgent({ agentId: pause.agentId, serverId: host.id })} /> : null}
+        <Text numberOfLines={1} style={{ ...t.label, flexShrink: 1 }}>{presentation.title}</Text>
+        {ownTime ? <Text style={{ ...t.label, ...tabular }}>{ownTime}</Text> : null}
         <View style={{ flex: 1, minWidth: 8 }} />
-        {canAct ? <Button theme={theme} small compact={compact} kind="ghost" title={busy === pause.agentId ? "Updating…" : presentation.actionLabel} disabled={busy !== null}
-          accessibilityHint={presentation.actionHint} onPress={() => void release(pause)} /> : null}
+        {compact ? open : <>{open}{actions}</>}
       </View>
+      <Text style={{ ...t.meta, color: stuck ? c.statusDanger : c.foregroundMuted, paddingLeft: 22 }}>{facts}</Text>
+      {compact && actions ? <View style={{ flexDirection: "row", gap: 6, paddingLeft: 22 }}>{actions}</View> : null}
     </CardRow>;
   };
 
-  return <ScrollView contentContainerStyle={{ padding: compact ? 16 : 32, paddingBottom: 48 }}>
-    <View style={{ width: "100%", maxWidth: 760, alignSelf: "center", gap: compact ? 18 : 22 }}>
-      <View style={{ gap: 6 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-          {title ? <Text accessibilityRole="header" style={{ flex: 1, color: c.foreground, fontSize: compact ? 19 : 22, lineHeight: compact ? 25 : 29, fontWeight: "600" }}>{title}</Text>
-            : <View style={{ flex: 1 }}><Skeleton width="40%" height={22} color={c.surface2} /></View>}
-          <IconButton theme={theme} icon="Settings" label="Session Guard settings" compact={compact} onPress={openSettings} />
-        </View>
-        {sentence ? <Text style={{ ...t.meta, fontSize: 13, lineHeight: 19 }}>{sentence}</Text> : null}
-      </View>
-
-      {notice ? <Card theme={theme}><CardRow theme={theme} first style={{ flexDirection: "row", gap: 10, alignItems: "flex-start" }}>
-        <Icon name="ShieldOff" size={15} color={c.foregroundMuted} />
-        <View style={{ flex: 1, gap: 3 }}>
-          <Text style={t.label}>{notice.title}</Text>
-          <Text style={t.meta}>{notice.hint}</Text>
-        </View>
-        <Button theme={theme} small compact={compact} title="Settings" onPress={openSettings} />
-      </CardRow></Card> : null}
-
-      {all.length > 5 || query !== "" ? <TextInput value={query} onChangeText={setQuery} placeholder="Find a paused session by title or provider" placeholderTextColor={c.foregroundMuted} accessibilityLabel="Find a paused session"
-        style={{ minHeight: compact ? 44 : 34, paddingHorizontal: 12, borderRadius: 8, borderWidth: 1, borderColor: c.border, backgroundColor: c.surface1, color: c.foreground, fontSize: 13 }} /> : null}
-
-      {status === null && !loadError ? <Card theme={theme}>{[0, 1].map((i) => <CardRow key={i} theme={theme} first={i === 0} style={{ gap: 8 }}>
-        <Skeleton width="30%" height={14} color={c.surface2} /><Skeleton width="70%" height={11} color={c.surface2} /></CardRow>)}</Card> : null}
-
-      {status && all.length === 0 && !notice ? <Card theme={theme}><CardRow theme={theme} first style={{ gap: 6, paddingVertical: 16 }}>
-        <Text style={t.label}>Nothing is waiting for a reset</Text>
-        <Text style={t.meta}>{`When a protected session reaches ${status.policy.thresholdPct}% of its session window, Session Guard pauses it here and ${status.policy.autoResume ? "continues it in the same conversation after the reset" : "you continue it after the reset"}.`}</Text>
-      </CardRow></Card> : null}
-      {status && all.length > 0 && visible.length === 0 ? <Text style={t.meta}>No paused session matches that.</Text> : null}
-
-      {attention.length > 0 ? <View style={{ gap: 8 }}>
-        <SectionHead theme={theme} title="Needs attention" count={attention.length} />
-        <Card theme={theme}>{attention.map(row)}</Card>
-      </View> : null}
-      {waiting.length > 0 ? <View style={{ gap: 8 }}>
-        <SectionHead theme={theme} title="Waiting for the reset" count={waiting.length} />
-        <Card theme={theme}>{waiting.map(row)}</Card>
-      </View> : null}
+  const attention = visible.filter((p) => p.phase === "attention");
+  const waiting = visible.filter((p) => p.phase !== "attention");
+  return <View style={{ gap: 8 }}>
+    <SectionHead theme={theme} title="Paused sessions" count={all.length || undefined} />
+    {all.length > 5 || query !== "" ? <TextInput value={query} onChangeText={setQuery} placeholder="Find a paused session by title or provider" placeholderTextColor={c.foregroundMuted} accessibilityLabel="Find a paused session"
+      style={{ minHeight: compact ? 44 : 34, paddingHorizontal: 12, borderRadius: 8, borderWidth: 1, borderColor: c.border, backgroundColor: c.surface1, color: c.foreground, fontSize: 13 }} /> : null}
+    {status && all.length === 0 ? <Card theme={theme}><CardRow theme={theme} first style={{ gap: 4, paddingVertical: 16 }}>
+      <Text style={t.label}>Nothing is waiting for a reset</Text>
+      <Text style={t.meta}>{notice ? notice.title + "." : `When a session reaches ${status.policy.thresholdPct}% of its session window, it pauses here and ${status.policy.autoResume ? "continues in the same conversation after the reset" : "waits for you after the reset"}.`}</Text>
+    </CardRow></Card> : null}
+    {status && all.length > 0 && visible.length === 0 ? <Text style={t.meta}>No paused session matches that.</Text> : null}
+    {visible.length > 0 ? <Card theme={theme}>
+      {notice ? <CardRow theme={theme} first style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <Icon name="CirclePause" size={14} color={c.foregroundMuted} />
+        <Text style={{ ...t.meta, flex: 1 }}>{`${notice.title}. ${status?.governor === "off" && owner ? owner : notice.hint}`}</Text>
+      </CardRow> : null}
+      {[...attention, ...waiting].map(row)}
+    </Card> : null}
+  </View>;
+}
 
-      {loadError ? <Text accessibilityRole="alert" style={{ ...t.meta, color: c.statusDanger }}>{status ? loadError : "Couldn't load paused sessions. Retrying."}</Text> : null}
-      {status?.error && !notice ? <Text accessibilityRole="alert" style={{ ...t.meta, color: c.statusDanger }}>{status.error}</Text> : null}
-    </View>
-  </ScrollView>;
+/** Sessions changed from the default, with the way back. Read-only unless this process governs. */
+export function Exceptions({ theme, layout, status, titleOf }: { theme: Theme; layout: { compact: boolean }; status: GuardStatus; titleOf(agentId: string): string }) {
+  const c = theme.colors;
+  const t = text(c);
+  const write = useRpc(setProtectionRpc);
+  const read = useRpc(statusRpc);
+  const toast = useToast();
+  const entries = Object.entries(status.overrides);
+  if (entries.length === 0) return null;
+  const canAct = status.governor === "active";
+  const reset = async (agentId: string) => {
+    try { await write({ agentId, enabled: null }); publishGuard(await read({})); toast.show("Back to your default"); }
+    catch { toast.error("Couldn't change that session. Try again."); }
+  };
+  return <View style={{ gap: 2, paddingLeft: 25 }}>
+    <Text style={t.small}>{entries.length === 1 ? "One session differs from your default" : `${entries.length} sessions differ from your default`}</Text>
+    {entries.map(([agentId, on]) => <View key={agentId} style={{ flexDirection: "row", alignItems: "center", gap: 8, minHeight: layout.compact ? 44 : 24 }}>
+      <Text numberOfLines={1} style={{ ...t.meta, flex: 1, color: c.foreground }}>{titleOf(agentId)}</Text>
+      <Text style={t.meta}>{on ? "Pauses" : "Doesn't pause"}</Text>
+      {canAct ? <TextLink theme={theme} compact={layout.compact} icon="RotateCcw" label="Use default" onPress={() => void reset(agentId)} /> : null}
+    </View>)}
+  </View>;
 }

package/client/guard/status.ts

@@ -0,0 +1,113 @@
+/**
+ * Protection status for this client bundle: one poll of `smart-session.guard.status`
+ * that the composer pill, its popover and the sidebar row all read.
+ *
+ * Module-level for the same reason as the pill store: everything that shows or
+ * changes protection lives in this one bundle, so a change made from the popover
+ * redraws the pill at once instead of waiting out the next read.
+ */
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import type { z } from "zod";
+
+import { statusRpc } from "../../shared/guard/contracts.ts";
+import { isPending, protects, timestamp, type Pause } from "../../shared/guard/policy.ts";
+import type { Live } from "../live.ts";
+
+export type GuardStatus = z.infer<(typeof statusRpc)["output"]>;
+
+/** How often status is re-read while protection runs here, and while it is off. */
+const ACTIVE_POLL_MS = 5_000;
+const IDLE_POLL_MS = 60_000;
+
+let current: GuardStatus | null = null;
+const listeners = new Set<() => void>();
+const wakers = new Set<() => void>();
+
+export function guardSnapshot(): GuardStatus | null {
+  return current;
+}
+
+export function subscribeGuard(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => { listeners.delete(listener); };
+}
+
+/** Publishes a reading. Exported for the screens that read status themselves, and for tests. */
+export function publishGuard(next: GuardStatus | null): void {
+  current = next;
+  for (const listener of [...listeners]) listener();
+}
+
+/**
+ * Re-reads status now. Settings and the overview call it when the protection
+ * document changes (their `useSettings` hears every client), so the pill follows a
+ * switch without polling hard while the feature is off.
+ */
+export function refreshGuard(): void {
+  for (const wake of [...wakers]) wake();
+}
+
+/** The pending pause this process can act on for one session, if any. */
+export function governedPause(status: GuardStatus | null, agentId: string): Pause | undefined {
+  if (status === null || status.governor !== "active") return undefined;
+  return status.pauses.find((pause) => pause.agentId === agentId && isPending(pause));
+}
+
+/** What protection means for one session, in the words the pill and popover use. */
+export function sessionProtection(status: GuardStatus | null, agentId: string) {
+  if (status === null) return { kind: "unknown" as const };
+  if (status.governor === "deferred") return { kind: "elsewhere" as const, standalone: status.standalone !== false };
+  if (status.governor === "error") return { kind: "error" as const, error: status.error };
+  if (status.governor === "off" || !status.policy.enabled) return { kind: "off" as const };
+  const override = agentId in status.overrides ? status.overrides[agentId]! : null;
+  return {
+    kind: "on" as const,
+    protected: protects(status.policy, status.overrides, agentId),
+    byDefault: status.policy.protectByDefault,
+    override,
+    thresholdPct: status.policy.thresholdPct,
+    autoResume: status.policy.autoResume,
+  };
+}
+
+/** The moment a pause comes back, or null when the provider has not said. */
+export function resumeMoment(pause: Pause): number | null {
+  return timestamp(pause.anchorResetsAt);
+}
+
+/** Starts the one poll for this bundle and feeds the sidebar row's paused count. */
+export function watchGuard(client: PluginClientContext, live?: Live): () => void {
+  let stopped = false;
+  let running = false;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  const refresh = async () => {
+    if (stopped || running) return;
+    running = true;
+    if (timer !== null) clearTimeout(timer);
+    timer = null;
+    try {
+      const next = await client.rpc(statusRpc, {});
+      if (!stopped) {
+        publishGuard(next);
+        // The sidebar row counts pauses only this process can act on.
+        const pending = next.governor === "active" ? next.pauses.filter(isPending) : [];
+        live?.setPaused({ waiting: pending.filter((p) => p.phase !== "attention").length, attention: pending.filter((p) => p.phase === "attention").length });
+      }
+    } catch {
+      // Keep the last confirmed reading across a brief disconnect.
+    } finally {
+      running = false;
+      // Off here and nobody governing from here: nothing to draw, so check rarely.
+      const idle = current !== null && !current.policy.enabled && current.governor === "off";
+      if (!stopped) timer = setTimeout(() => void refresh(), idle ? IDLE_POLL_MS : ACTIVE_POLL_MS);
+    }
+  };
+  const wake = () => void refresh();
+  wakers.add(wake);
+  void refresh();
+  return () => {
+    stopped = true;
+    wakers.delete(wake);
+    if (timer !== null) clearTimeout(timer);
+  };
+}

package/client/guard/timeline.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } 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 { PAUSE_ACTIONS } from "../../shared/guard/presentation.ts";
 import { timestamp, type Pause } from "../../shared/guard/policy.ts";
 import { formatClock, formatDuration } from "../../shared/format.ts";
 import { formatMoment } from "../../shared/forecast.ts";
@@ -14,7 +15,8 @@ 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
+ * A pause at the session limit, in the chat, drawn like Smart Session's other chat
+ * cards and rows. 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
@@ -68,32 +70,38 @@ export function GuardTimelineItem({ theme, agentId, item, layout, openOverview }
   const at = formatClock(item.data.at);
 
   /** One quiet line: the settled form of every card. */
+  /** One quiet line, sized like Smart Session's tool rows and Paseo's own. */
   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 }}>
+    <View style={{ marginHorizontal: -13, flexDirection: "row", alignItems: "center", paddingHorizontal: 8, paddingVertical: 4 }}>
+      <View style={{ width: 22, height: 22, marginRight: 4, alignItems: "center", justifyContent: "center" }}><Icon name={icon} size={12} color={color} /></View>
+      <Text numberOfLines={2} style={{ flexShrink: 1, color: c.foregroundMuted, fontSize: 14, lineHeight: 20, ...tabular }}>
         <Text style={{ color: c.foreground }}>{words}</Text>{extra ? ` · ${extra}` : ""}
       </Text>
     </View>
   );
+  /** The card shell shared with the messages Smart Session sends. */
+  const shell = (alarm: boolean, children: ReactNode) => <View style={{ width: "100%", maxWidth: 560, marginVertical: 4 }}>
+    <View style={[{ borderRadius: 12, backgroundColor: c.surface1, overflow: "hidden" }, alarm ? { borderWidth: 1, borderColor: withAlpha(c.statusDanger, 0.6) } : raised(c)]}>{children}</View>
+  </View>;
+  const titleRow = (icon: string, color: string, title: string, titleColor = c.foreground) => <View style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 14, paddingTop: 11, paddingBottom: 4 }}>
+    <Icon name={icon} size={14} color={color} />
+    <Text numberOfLines={1} style={{ flex: 1, color: titleColor, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{title}</Text>
+    <Text style={t.meta}>{at}</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);
+    if (item.data.event === "resumed") return line("Play", c.foregroundMuted, presentation.title, item.data.manualResume ? `${at} · by you · no longer pauses at the limit` : `${at} · ${item.data.native ? "workers continued in place" : "continuation sent"}`);
+    if (item.data.event === "released") return line("Pause", c.foregroundMuted, presentation.title, item.data.dismissed ? `${at} · no message sent · no longer pauses at the limit` : 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>;
+    return shell(true, <>
+      {titleRow("TriangleAlert", c.statusDanger, presentation.title, c.statusDanger)}
+      <View style={{ paddingHorizontal: 14, paddingBottom: 11 }}><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 === "cancelled" && pause.dismissed) return line("Pause", c.foregroundMuted, "Pause dismissed", "no message sent · no longer pauses at the limit");
     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");
@@ -106,49 +114,46 @@ export function GuardTimelineItem({ theme, agentId, item, layout, openOverview }
   // 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),
+  const facts = [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>;
+  return shell(stuck, <>
+    {stuck ? titleRow("TriangleAlert", accent, "Pause needs attention", c.statusDanger)
+      : titleRow("Pause", accent, item.data.demo ? "Test pause" : item.data.event === "recovery" ? "Still paused after a Paseo restart" : "Paused at the session limit")}
+    <View style={{ paddingHorizontal: 14, paddingBottom: 11, gap: 8 }}>
+      {stuck ? <Text style={t.body}>{pause?.note ?? (pause?.dismissed ? "Releasing the workers needs a look. Automatic continuation is cancelled." : "Check the session before continuing by hand.")}</Text> : <>
+        <View style={{ gap: 2 }}>
+          <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8, flexWrap: "wrap", rowGap: 0 }}>
+            <Text style={{ color: c.foreground, fontSize: compact ? 17 : 18, lineHeight: compact ? 22 : 24, 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}
+        </View>
+      </>}
+      {!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={PAUSE_ACTIONS.resume.icon} title={action === "resume" ? PAUSE_ACTIONS.resume.busy : PAUSE_ACTIONS.resume.label} loading={action === "resume"} disabled={busy}
+            accessibilityHint={item.data.demo ? "Releases this test session and stops it pausing at the limit." : PAUSE_ACTIONS.resume.hint} onPress={() => void act("resume")} />
+          <Button theme={theme} small compact={compact} kind="ghost" title={action === "dismiss" ? PAUSE_ACTIONS.dismiss.busy : PAUSE_ACTIONS.dismiss.label} disabled={busy}
+            accessibilityHint={PAUSE_ACTIONS.dismiss.hint} onPress={() => void act("dismiss")} />
+          <View style={{ flex: 1, minWidth: 8 }} />
+          <TextLink theme={theme} compact={compact} label="Paused sessions" onPress={openOverview} />
+        </View>
+        <Text style={t.small}>{item.data.demo ? "Resume now releases this test session." : PAUSE_ACTIONS.note}</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="Paused sessions" onPress={openOverview} /> : null}
+    </View>
+  </>);
 }
-