paseo-smart-session 2.0.0 → 2.2.0

package/client/pill.tsx

@@ -1,434 +1,145 @@
 /**
- * The smart-compact pill, on every agent's composer.
+ * The Smart Compact pill, on every agent's composer.
  *
- * Enrolment is a file on disk, which makes it invisible: there was no way to look
- * at a session and tell whether the governor was watching it. The pill is that
- * answer, in the one place the answer matters — next to the box you are about to
- * type into — and pressing it changes it.
+ * It answers two questions where they matter, next to the box you are about to type
+ * into: how full is this session's context, and will Smart Compact ask it to compact
+ * itself. The icon is a ring that fills with the context and carries a tick at the
+ * compact line; the label is the percentage. Pressing it opens a popover with the
+ * detail and the enrolment switch.
  *
  * State lives in this module rather than in each pill, because the pill and the
- * things that change it (its own press, the Command Center item, the surface
- * toggle) are all in this one client bundle. One store, one fetch, and every
- * mounted pill redraws together.
+ * things that change it (its own popover, the Command Center item, the overview and
+ * settings) are all in this one client bundle. One store, one fetch, and every
+ * mounted pill redraws together. Context occupancy comes from the shared agent
+ * directory, which already carries each agent's last usage, so the ring moves with
+ * every turn without a poll of its own.
  *
- * Two states, on or off, and pressing it moves between them. There is no third
- * state for "on but nothing will happen", because there is no longer a global
- * switch that can make an enrolled session inert — the master switch hides the pill
- * outright instead.
+ * With Smart Compact off there is no pill at all: there is nothing for one to say.
  */
 
-import type { PluginClientContext, PluginHostProps } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
-import React, { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { Text, View } from "react-native";
+import type { PluginButtonIconProps, PluginClientContext, PluginButtonRegistration } from "@getpaseo/plugin/client";
+import { useSyncExternalStore } from "react";
 
-import { smartCompactLabel } from "../shared/format";
-import { enrolmentState, setEnrolment, type EnrolmentState } from "../shared/governor";
+import { contextOutlook } from "../shared/forecast";
+import { enrolmentState } from "../shared/governor";
+import { pillSnapshot, refreshPills, state as currentState, subscribePills } from "./pill-store";
+
+export { refreshPills } from "./pill-store";
+import { profileFor } from "../shared/thresholds";
+import type { Thresholds } from "../shared/thresholds";
+import type { AgentDirectory, DirectoryAgent } from "./agents";
+import { Ring, toneFill } from "./charts";
+import { makeContextPopover } from "./popover";
 
 /** How often the client re-reads enrolment, for changes made somewhere else. */
 const REFRESH_MS = 20_000;
 
-/** Pointer dwell before the tooltip opens, so passing over the pill is quiet. */
-const HOVER_DELAY_MS = 300;
-
-/**
- * The host's own pill chrome, mirrored from Paseo's `composerPillStyles`:
- * `spacing[3]` and `spacing[1]` of padding inside a 1px border.
- *
- * A plugin renders *inside* that padding, so a hover region left at its natural
- * size answers only over the glyph and stays dead across most of the pill the user
- * is actually pointing at. Cancelling the padding with an equal negative margin
- * grows the region to the pill's edge and leaves the layout exactly where it was —
- * the pill's measured size is unchanged, since the two cancel.
- */
-const HOST_PILL_INSET = { horizontal: 13, vertical: 5 };
-
-interface PillState {
-  /** Both switches folded into one answer: is there a pill on the composer at all. */
-  readonly showPill: boolean;
-  readonly enrolled: ReadonlySet<string>;
-}
-
-/**
- * Hidden until the daemon says otherwise.
- *
- * The alternative — assume shown, then retract — flashes a pill at everyone who
- * turned it off, every time the app loads.
- */
-let state: PillState = { showPill: false, enrolled: new Set() };
-
-const listeners = new Set<() => void>();
-
-function subscribe(listener: () => void): () => void {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
+/** Everything a pill shows about one agent, in one place for the icon, label and title. */
+export function pillPresentation(agent: Pick<DirectoryAgent, "usedTokens" | "maxTokens"> | undefined, enrolled: boolean, thresholds: Thresholds | null) {
+  const known = agent !== undefined && agent.usedTokens !== null && agent.maxTokens !== null;
+  if (!known) {
+    return {
+      label: "Smart Compact",
+      title: enrolled ? "Smart Compact on · no context reading yet" : "Smart Compact off · no context reading yet",
+      fraction: 0, mark: null as number | null, tone: "default" as const, pct: null as number | null,
+    };
+  }
+  const compactAtPct = profileFor(agent.maxTokens!, thresholds ?? undefined).compact;
+  const outlook = contextOutlook({ usedTokens: agent.usedTokens!, maxTokens: agent.maxTokens!, compactAtPct });
+  const pct = Math.round(outlook.pct);
+  return {
+    label: `${pct}%`,
+    title: `Context ${pct}% full · ${enrolled ? `Smart Compact asks at ${compactAtPct}%` : "Smart Compact off for this session"}`,
+    fraction: outlook.pct / 100, mark: compactAtPct / 100, tone: outlook.tone, pct,
   };
 }
 
-function snapshot(): PillState {
-  return state;
-}
-
-function publish(next: PillState): void {
-  state = next;
-  for (const listener of listeners) listener();
-}
-
-function enrolmentSet(agents: EnrolmentState["agents"]): ReadonlySet<string> {
-  return new Set(agents.filter((agent) => agent.enrolled).map((agent) => agent.agentId));
-}
-
-/**
- * Re-reads enrolment and redraws every pill.
- *
- * Takes the call rather than making it: the same fetch is reachable from the client
- * entry, a Command Center item and the surface, and each of those holds a different
- * flavour of RPC caller.
- */
-export async function refreshPills(fetch: () => Promise<EnrolmentState>): Promise<void> {
-  const next = await fetch();
-  publish({
-    // With the feature off there is nothing for a pill to say. Drawing a third,
-    // "paused" state would just be a second way of spelling off.
-    showPill: next.enabled && next.showPill,
-    enrolled: enrolmentSet(next.agents),
-  });
-}
-
-/**
- * One icon, and the words only when you ask for them.
- *
- * The composer track is one line shared with Paseo's own pills, and this one has
- * nothing to say that changes minute to minute — so it states itself in colour and
- * spells it out on hover. Pointer platforms get the tooltip; touch hosts never fire
- * these events and read the colour, or press.
- *
- * Paseo owns the pressable, the border and the spinner; this owns what is in it.
- */
-type LegacyPillProps = PluginHostProps & { workspaceId: string; agentId: string };
-
-export function AutoCompactPill({ theme, agentId }: LegacyPillProps) {
-  const current = useSyncExternalStore(subscribe, snapshot, snapshot);
-  const [tooltip, setTooltip] = useState(false);
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const clearHoverTimer = useCallback(() => {
-    if (timer.current === null) return;
-    clearTimeout(timer.current);
-    timer.current = null;
-  }, []);
-  useEffect(() => clearHoverTimer, [clearHoverTimer]);
-
-  const onPointerEnter = useCallback(() => {
-    if (timer.current !== null) return;
-    timer.current = setTimeout(() => {
-      timer.current = null;
-      setTooltip(true);
-    }, HOVER_DELAY_MS);
-  }, []);
-
-  const onPointerLeave = useCallback(() => {
-    clearHoverTimer();
-    setTooltip(false);
-  }, [clearHoverTimer]);
-
-  const enrolled = current.enrolled.has(agentId);
-  const color = enrolled ? theme.colors.accent : theme.colors.foregroundMuted;
-  return (
-    <View
-      style={{
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        // Stretch plus the cancelled padding is what makes the whole pill hoverable,
-        // vertically as well: Paseo's pill is 32px high and this glyph is 14.
-        alignSelf: "stretch",
-        marginVertical: -HOST_PILL_INSET.vertical,
-        marginHorizontal: -HOST_PILL_INSET.horizontal,
-        paddingVertical: HOST_PILL_INSET.vertical,
-        paddingHorizontal: HOST_PILL_INSET.horizontal,
-      }}
-      onPointerEnter={onPointerEnter}
-      onPointerLeave={onPointerLeave}
-    >
-      <Icon name="FoldVertical" size={14} color={color} />
-      {tooltip ? (
-        // Drawn above the pill rather than beside it: the track bar is one line
-        // high, and widening the pill on hover would shove its neighbours along.
-        <View
-          style={{
-            position: "absolute",
-            bottom: "100%",
-            left: 0,
-            marginBottom: 8,
-            gap: 2,
-            paddingVertical: 6,
-            paddingHorizontal: 10,
-            borderRadius: 8,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            backgroundColor: theme.colors.surface1,
-          }}
-        >
-          <Text numberOfLines={1} style={{ color: theme.colors.foreground, fontSize: 13 }}>
-            {smartCompactLabel({ enrolled })}
-          </Text>
-          <Text numberOfLines={1} style={{ color: theme.colors.foregroundMuted, fontSize: 11 }}>
-            {enrolled ? "Press to take this session out" : "Press to enrol this session"}
-          </Text>
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-/**
- * The v0.8 button-descriptor icon. The host owns its tooltip and interaction;
- * this component only paints the current state inside the icon slot.
- */
-function AutoCompactIcon({
-  theme,
-  agentId,
-  size,
-}: PluginHostProps & { agentId: string; size: number; color: string }) {
-  const current = useSyncExternalStore(subscribe, snapshot, snapshot);
-  const color = current.enrolled.has(agentId) ? theme.colors.accent : theme.colors.foregroundMuted;
-  return <Icon name="FoldVertical" size={size} color={color} />;
-}
-
-/** The lean shapes this needs from the agent directory, which carries far more. */
-interface ListedAgent {
-  readonly id?: string;
-  readonly workspaceId?: string | null;
-}
-
-interface AgentUpdate {
-  readonly kind: "remove" | "upsert";
-  readonly agentId?: string;
-  readonly agent?: ListedAgent;
-}
-
-interface AgentListing {
-  readonly entries?: readonly { readonly agent?: ListedAgent }[];
-  readonly subscription?: {
-    subscribe(observer: {
-      snapshot(listing: AgentListing): void;
-      update(message: { readonly type?: string; readonly payload?: AgentUpdate }): void;
-    }): () => void;
-    release(): Promise<void>;
+/** One live icon per pill: the ring, muted while the session is not enrolled. */
+function makeIcon(agents: AgentDirectory) {
+  return function ContextRingIcon(props: PluginButtonIconProps) {
+    const current = useSyncExternalStore(subscribePills, pillSnapshot, pillSnapshot);
+    useSyncExternalStore(agents.subscribe, agents.version, agents.version);
+    const agentId = props.context === "agent" ? props.agentId : "";
+    const enrolled = current.enrolled.has(agentId);
+    const view = pillPresentation(agents.current().get(agentId), enrolled, current.thresholds);
+    const c = props.theme.colors;
+    const color = view.tone !== "default" ? toneFill(c, view.tone) : enrolled ? c.foreground : c.foregroundMuted;
+    return <Ring size={props.size} color={color} fraction={view.fraction} mark={enrolled ? view.mark : null} />;
   };
 }
 
-/**
- * The published 0.8 descriptor API returns this handle. The 0.8.0-beta.1 npm
- * package and app still return the legacy remover function, so registrations
- * carry both input shapes and this adapter accepts either result. Remove these
- * legacy fields once the beta client and SDK catch up with the deployed docs.
- */
-interface PillRegistration {
-  update(patch: { title?: string; label?: string; visible?: boolean; disabled?: boolean }): void;
-  remove(): void;
-}
-
-type PillHandle = (() => void) | PillRegistration;
-
-function removePill(handle: PillHandle): void {
-  if (typeof handle === "function") handle();
-  else handle.remove();
-}
-
-function updatePill(handle: PillHandle, title: string): void {
-  if (typeof handle !== "function") handle.update({ title });
-}
-
-export function contributeClient(client: PluginClientContext) {
+export function contributeClient(client: PluginClientContext, agents: AgentDirectory) {
   /** Every agent this app knows of, and its pill registration while one is up. */
-  const tracked = new Map<string, { workspaceId: string; handle: PillHandle | null }>();
-  const lifetime = new AbortController();
-  let stopped = false;
-  let unsubscribeOwnedObservation: (() => void) | null = null;
-  let releaseAgentObservation: (() => Promise<void>) | null = null;
+  const tracked = new Map<string, { workspaceId: string; handle: PluginButtonRegistration | null; signature: string }>();
+  const Icon = makeIcon(agents);
+  const Content = makeContextPopover(client, agents);
 
-  function register(agentId: string, entry: { workspaceId: string; handle: PillHandle | null }): void {
-    const toggle = async () => {
-      const { agent } = await client.rpc(setEnrolment, {
-        agentId,
-        enrolled: !snapshot().enrolled.has(agentId),
-      });
-      const enrolled = new Set(snapshot().enrolled);
-      if (agent.enrolled) enrolled.add(agent.agentId);
-      else enrolled.delete(agent.agentId);
-      publish({ ...snapshot(), enrolled });
-    };
-    const title = smartCompactLabel({ enrolled: snapshot().enrolled.has(agentId) });
-    const addComposerPill = client.addComposerPill as unknown as (contribution: {
-      id: string;
-      workspaceId: string;
-      agentId: string;
-      button: {
-        title: string;
-        icon: typeof AutoCompactIcon;
-        label: string;
-        behavior: { kind: "action"; onPress: () => Promise<void> };
-      };
-      title: string;
-      Component: typeof AutoCompactPill;
-      onPress: () => Promise<void>;
-    }) => PillHandle;
-    entry.handle = addComposerPill({
+  function describe(agentId: string) {
+    const view = pillPresentation(agents.current().get(agentId), currentState().enrolled.has(agentId), currentState().thresholds);
+    return { label: view.label, title: view.title };
+  }
+
+  function register(agentId: string, entry: { workspaceId: string; handle: PluginButtonRegistration | null; signature: string }): void {
+    const { label, title } = describe(agentId);
+    entry.signature = `${label}|${title}`;
+    entry.handle = client.addComposerPill({
       id: "smart-compact",
       workspaceId: entry.workspaceId,
       agentId,
-      button: {
-        title,
-        icon: AutoCompactIcon,
-        label: "Smart Compact",
-        behavior: { kind: "action", onPress: toggle },
-      },
-      // 0.8.0-beta.1 compatibility; ignored by the documented descriptor host.
-      title,
-      Component: AutoCompactPill,
-      onPress: toggle,
+      button: { title, label, icon: Icon, behavior: { kind: "popover", Content } },
     });
   }
 
   /** Brings the registrations in line with the store, whichever way it moved. */
   function sync(): void {
     for (const [agentId, entry] of tracked) {
-      if (state.showPill && entry.handle === null) register(agentId, entry);
-      else if (!state.showPill && entry.handle !== null) {
-        removePill(entry.handle);
+      if (currentState().showPill && entry.handle === null) register(agentId, entry);
+      else if (!currentState().showPill && entry.handle !== null) {
+        entry.handle.remove();
         entry.handle = null;
       } else if (entry.handle !== null) {
-        updatePill(entry.handle, smartCompactLabel({ enrolled: state.enrolled.has(agentId) }));
+        const { label, title } = describe(agentId);
+        const signature = `${label}|${title}`;
+        // Only a changed label is sent: a fresh behaviour would remount an open popover.
+        if (signature !== entry.signature) {
+          entry.signature = signature;
+          entry.handle.update({ label, title });
+        }
       }
     }
   }
 
-  function track(agentId: string, workspaceId: string): void {
-    const existing = tracked.get(agentId);
-    if (existing !== undefined && existing.workspaceId === workspaceId) return;
-    // A pill is pinned to one workspace, so an agent that moved needs a new one.
-    if (existing?.handle !== null && existing?.handle !== undefined) removePill(existing.handle);
-    tracked.set(agentId, { workspaceId, handle: null });
-    sync();
-  }
-
   function forget(agentId: string): void {
-    const handle = tracked.get(agentId)?.handle;
-    if (handle !== null && handle !== undefined) removePill(handle);
+    tracked.get(agentId)?.handle?.remove();
     tracked.delete(agentId);
   }
 
-  function applyAgentUpdate(update: AgentUpdate): void {
-    if (update.kind === "remove") {
-      if (typeof update.agentId === "string") forget(update.agentId);
-      return;
-    }
-    const agent = update.agent;
-    if (
-      typeof agent?.id !== "string" ||
-      typeof agent.workspaceId !== "string" ||
-      agent.workspaceId === ""
-    ) return;
-    track(agent.id, agent.workspaceId);
-  }
-
-  function trackAgents(entries: AgentListing["entries"]): Set<string> {
-    const present = new Set<string>();
-    for (const entry of entries ?? []) {
-      const agent = entry.agent;
-      if (
-        typeof agent?.id !== "string" ||
-        typeof agent.workspaceId !== "string" ||
-        agent.workspaceId === ""
-      ) continue;
-      present.add(agent.id);
-      track(agent.id, agent.workspaceId);
+  /** Follows the shared directory: new agents gain a pill, moved or removed ones lose theirs. */
+  function followDirectory(): void {
+    const current = agents.current();
+    for (const [agentId, entry] of [...tracked]) {
+      if (current.get(agentId)?.workspaceId !== entry.workspaceId) forget(agentId);
     }
-    return present;
-  }
-
-  /** A restored observation replaces its directory snapshot, including removals. */
-  function replaceAgents(entries: AgentListing["entries"]): void {
-    const present = trackAgents(entries);
-    for (const agentId of [...tracked.keys()]) {
-      if (!present.has(agentId)) forget(agentId);
+    for (const [agentId, agent] of current) {
+      // A pill is pinned to one workspace, so an agent that moved needs a new one.
+      if (!tracked.has(agentId)) tracked.set(agentId, { workspaceId: agent.workspaceId, handle: null, signature: "" });
     }
+    sync();
   }
 
   const refresh = () => refreshPills(() => client.rpc(enrolmentState, {}));
 
-  const unsubscribeStore = subscribe(sync);
-
-  // v0.8 returns only the listing and emits its subscribed updates through this
-  // local listener. Keep it attached until a newer runtime gives us the owned
-  // observation whose snapshots can reconcile the whole directory on reconnect.
-  let unsubscribeLegacyAgents: (() => void) | null = client.paseo.agents.subscribe((update) => {
-    applyAgentUpdate(update as AgentUpdate);
-  });
-
-  // The subscription only carries agents that report in from now on, and an idle
-  // one may not do that for hours.
-  void (async () => {
-    try {
-      // `agents.subscribe()` listens only to observations already owned by
-      // this API instance. A plain list stopped receiving newly created agents
-      // in Paseo 0.9, which made both plugin pills disappear on new sessions.
-      const listAgents = client.paseo.agents.list as unknown as (options: {
-        subscribe: Record<string, never>;
-        signal: AbortSignal;
-      }) => Promise<AgentListing>;
-      const listing = await listAgents({ subscribe: {}, signal: lifetime.signal });
-      const release = listing.subscription
-        ? () => listing.subscription!.release()
-        : null;
-      if (stopped) {
-        await release?.();
-        return;
-      }
-      releaseAgentObservation = release;
-      // The legacy listener was already live while this snapshot was in flight,
-      // so bootstrap must be additive or it can erase a just-created agent.
-      trackAgents(listing.entries);
-      if (listing.subscription) {
-        unsubscribeOwnedObservation = listing.subscription.subscribe({
-          snapshot(snapshot) {
-            if (!stopped) replaceAgents(snapshot.entries);
-          },
-          update(message) {
-            if (!stopped && message.type === "agent_update" && message.payload) {
-              applyAgentUpdate(message.payload);
-            }
-          },
-        });
-        unsubscribeLegacyAgents?.();
-        unsubscribeLegacyAgents = null;
-      }
-    } catch {
-      const release = releaseAgentObservation;
-      releaseAgentObservation = null;
-      await release?.().catch(() => undefined);
-      // Not fatal to the rest of the client contribution; a reload can retry.
-    }
-  })();
+  const unsubscribeStore = subscribePills(sync);
+  const unsubscribeAgents = agents.subscribe(followDirectory);
+  followDirectory();
 
   void refresh().catch(() => undefined);
   const timer = setInterval(() => void refresh().catch(() => undefined), REFRESH_MS);
 
-  return async () => {
-    stopped = true;
-    lifetime.abort();
+  return () => {
     clearInterval(timer);
-    unsubscribeLegacyAgents?.();
-    unsubscribeLegacyAgents = null;
-    unsubscribeOwnedObservation?.();
-    unsubscribeOwnedObservation = null;
+    unsubscribeAgents();
     unsubscribeStore();
     for (const agentId of [...tracked.keys()]) forget(agentId);
-    const release = releaseAgentObservation;
-    releaseAgentObservation = null;
-    await release?.().catch(() => undefined);
   };
 }

package/client/popover.tsx

@@ -0,0 +1,113 @@
+import { useState, useSyncExternalStore } from "react";
+import { Text, View } from "react-native";
+import { useRpc, type PluginButtonContentProps, type PluginClientContext } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+
+import { formatCompactTokens, formatDuration, formatRelative } from "../shared/format";
+import { contextOutlook } from "../shared/forecast";
+import { listCompactions, setEnrolment, type CompactionRequest } from "../shared/governor";
+import { contextStatus } from "../shared/smart-session";
+import { profileFor } from "../shared/thresholds";
+import type { AgentDirectory } from "./agents";
+import { Meter, Ring, toneFill } from "./charts";
+import { Switch, TextLink, errorText, text, useNow } from "./kit";
+import { noteEnrolment, pillSnapshot, subscribePills } from "./pill-store";
+import { tabular, toneColor } from "./theme";
+
+/** What the last compaction did, in one line. */
+function compactionLine(item: CompactionRequest | undefined, now: number): string {
+  if (item === undefined) return "None yet";
+  if (item.state === "pending" || item.state === "sending") return "Queued · sent when this turn ends";
+  if (item.state === "failed") return `Failed ${formatRelative(item.settledAt ?? item.createdAt, now)}`;
+  if (item.state === "cancelled") return `Cancelled ${formatRelative(item.settledAt ?? item.createdAt, now)}`;
+  const when = formatRelative(item.settledAt ?? item.createdAt, now);
+  return item.preTokens !== null && item.postTokens !== null ? `${when} · ${formatCompactTokens(item.preTokens)} → ${formatCompactTokens(item.postTokens)}` : when;
+}
+
+/** The pill's popover: this session's context, its compact line, task state and enrolment. */
+export function makeContextPopover(client: PluginClientContext, agents: AgentDirectory) {
+  return function ContextPopover({ theme, layout, close, ...rest }: PluginButtonContentProps) {
+    const agentId = rest.context === "agent" ? rest.agentId : "";
+    const c = theme.colors;
+    const t = text(c);
+    const now = useNow(30_000);
+    const pills = useSyncExternalStore(subscribePills, pillSnapshot, pillSnapshot);
+    useSyncExternalStore(agents.subscribe, agents.version, agents.version);
+    const readContext = useRpc(contextStatus);
+    const readCompactions = useRpc(listCompactions);
+    const writeEnrolment = useRpc(setEnrolment);
+    const [saving, setSaving] = useState(false);
+    const [problem, setProblem] = useState<string | null>(null);
+    const detail = useQuery({ queryKey: ["smart-session", "context", agentId], queryFn: () => readContext({ agentId }), refetchInterval: 30_000 });
+    const compactions = useQuery({ queryKey: ["smart-session", "compactions", agentId], queryFn: () => readCompactions({ agentId }), refetchInterval: 30_000 });
+
+    const agent = agents.current().get(agentId);
+    const row = detail.data?.agents[0];
+    const used = agent?.usedTokens ?? row?.usedTokens ?? null;
+    const max = agent?.maxTokens ?? row?.maxTokens ?? null;
+    const enrolled = pills.enrolled.has(agentId);
+    const compact = layout.compact;
+
+    async function toggle(next: boolean) {
+      setSaving(true); setProblem(null);
+      try {
+        const { agent: saved } = await writeEnrolment({ agentId, enrolled: next });
+        noteEnrolment(saved.agentId, saved.enrolled);
+      } catch (error) {
+        setProblem(errorText(error));
+      } finally {
+        setSaving(false);
+      }
+    }
+
+    const head = (() => {
+      if (used === null || max === null) return null;
+      const compactAtPct = row?.compactAtPct ?? profileFor(max, pills.thresholds ?? undefined).compact;
+      return { compactAtPct, outlook: contextOutlook({ usedTokens: used, maxTokens: max, compactAtPct, growthTokensPerHour: row?.growthTokensPerHour ?? null }) };
+    })();
+    const sentence = head === null
+      ? { line: "No context reading yet. A session reports one after its first turn.", tone: "default" as const }
+      : head.outlook.past
+        ? { line: enrolled ? "Past its compact line. Smart Compact asks it at the end of a turn whether to compact." : "Past its compact line, but not enrolled, so nothing will ask it.", tone: head.outlook.tone }
+        : head.outlook.untilCompactMs !== null
+          ? { line: `Reaches its compact line in about ${formatDuration(head.outlook.untilCompactMs)} at +${formatCompactTokens(row!.growthTokensPerHour!)}/h.`, tone: "default" as const }
+          : { line: "Below its compact line and not growing right now.", tone: "default" as const };
+    const latest = compactions.data?.items[0];
+    const state = row?.stateWrittenAt ?? null;
+    const facts: [string, string][] = [
+      ["Task state", state === null ? (row === undefined ? "…" : "Not written yet") : `Saved ${formatRelative(state, now)}`],
+      ["Last compaction", compactions.data === undefined ? "…" : compactionLine(latest, now)],
+    ];
+    const ringColor = head === null ? c.foregroundMuted : head.outlook.tone !== "default" ? toneFill(c, head.outlook.tone) : enrolled ? c.foreground : c.foregroundMuted;
+
+    return <View style={{ width: compact ? "100%" : 340, padding: compact ? 16 : 14, gap: 12 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+        <Ring size={40} color={ringColor} fraction={head === null ? 0 : head.outlook.pct / 100} mark={head === null ? null : head.compactAtPct / 100} />
+        <View style={{ flex: 1, gap: 1 }}>
+          <View style={{ flexDirection: "row", alignItems: "baseline", gap: 6 }}>
+            <Text style={{ color: c.foreground, fontSize: 22, lineHeight: 28, fontWeight: "600" }}>{head === null ? "—" : `${Math.round(head.outlook.pct)}%`}</Text>
+            <Text style={t.meta}>{max === null ? "context" : `of ${formatCompactTokens(max)} context`}</Text>
+          </View>
+          <Text style={t.meta}>{head === null || used === null ? "Waiting for a reading" : `${formatCompactTokens(used)} tokens · compacts at ${head.compactAtPct}% (${formatCompactTokens(head.outlook.compactTokens)})`}</Text>
+        </View>
+      </View>
+      {head === null ? null : <Meter theme={theme} pct={head.outlook.pct} tone={head.outlook.tone} mark={head.compactAtPct} height={6} label={`Context ${Math.round(head.outlook.pct)}% full, compacts at ${head.compactAtPct}%`} />}
+      <Text style={{ ...t.body, color: sentence.tone === "default" ? c.foreground : toneColor(c, sentence.tone) }}>{sentence.line}</Text>
+      <View style={{ gap: 6, paddingTop: 10, borderTopWidth: 1, borderTopColor: c.border }}>
+        {facts.map(([label, value]) => <View key={label} style={{ flexDirection: "row", gap: 12 }}>
+          <Text style={{ ...t.meta, width: 112 }}>{label}</Text>
+          <Text style={{ ...t.meta, flex: 1, color: c.foreground, ...tabular }}>{value}</Text>
+        </View>)}
+      </View>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingTop: 10, borderTopWidth: 1, borderTopColor: c.border }}>
+        <View style={{ flex: 1, gap: 2 }}>
+          <Text style={t.label}>Smart Compact for this session</Text>
+          <Text style={t.meta}>{enrolled ? `Asked to compact itself once past ${head?.compactAtPct ?? "its"}%${head === null ? " line" : ""}. Never forced.` : "Never asked to compact. The agent can still request it."}</Text>
+        </View>
+        <Switch theme={theme} label="Smart Compact for this session" hideLabel value={enrolled} disabled={saving} compact={compact} onChange={(next) => void toggle(next)} />
+      </View>
+      {problem ? <Text accessibilityRole="alert" style={{ ...t.meta, color: c.statusDanger }}>{problem}</Text> : null}
+      <TextLink theme={theme} compact={compact} label="Plan usage and every session" onPress={() => { close(); client.openScreen({ screenId: "overview" }); }} />
+    </View>;
+  };
+}