paseo-smart-session 2.1.0 → 2.2.0

package/client/pill.tsx

@@ -1,297 +1,116 @@
 /**
- * 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 type { AgentDirectory } from "./agents";
+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 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 });
+/** 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} />;
+  };
 }
 
 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 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);
   }
 
@@ -301,12 +120,16 @@ export function contributeClient(client: PluginClientContext, agents: AgentDirec
     for (const [agentId, entry] of [...tracked]) {
       if (current.get(agentId)?.workspaceId !== entry.workspaceId) forget(agentId);
     }
-    for (const [agentId, agent] of current) track(agentId, agent.workspaceId);
+    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);
+  const unsubscribeStore = subscribePills(sync);
   const unsubscribeAgents = agents.subscribe(followDirectory);
   followDirectory();
 

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>;
+  };
+}

package/client/settings.tsx

@@ -0,0 +1,105 @@
+import { useRpc, type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { SettingsAction, SettingsCard, SettingsInput, SettingsRow, SettingsSection, SettingsSwitch, useToast } from "@getpaseo/plugin/client/ui";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { ActivityIndicator, ScrollView, Text, View } from "react-native";
+
+import { formatCompactTokens } from "../shared/format";
+import { enrolmentState } from "../shared/governor";
+import { getSettings, installStatus, setSettings } from "../shared/smart-session";
+import { withCompactThreshold } from "../shared/thresholds";
+import { errorText } from "./kit";
+import { refreshPills } from "./pill-store";
+
+/** A whole number from 1 to 99, or null. */
+function percent(value: string): number | null {
+  const parsed = Number(value.trim());
+  return Number.isInteger(parsed) && parsed >= 1 && parsed <= 99 ? parsed : null;
+}
+
+/**
+ * Settings → Plugins → Smart Session → Smart Compact. Everything that tunes when a
+ * session is asked to compact itself; the overview keeps only the on/off switch.
+ */
+export function SmartCompactSettings({ theme, layout }: PluginSurfaceProps) {
+  const c = theme.colors;
+  const toast = useToast();
+  const queryClient = useQueryClient();
+  const read = useRpc(getSettings);
+  const write = useRpc(setSettings);
+  const readEnrolment = useRpc(enrolmentState);
+  const readInstall = useRpc(installStatus);
+  const query = useQuery({ queryKey: ["smart-session", "settings"], queryFn: () => read({}), refetchInterval: 60_000 });
+  const install = useQuery({ queryKey: ["smart-session", "install"], queryFn: () => readInstall({}), refetchInterval: 5 * 60_000 });
+  const [saving, setSaving] = useState(false);
+  const [draft, setDraft] = useState<{ large: string; small: string } | null>(null);
+  const [inputKey, setInputKey] = useState(0);
+  const settings = query.data?.settings;
+  useEffect(() => { setDraft(null); }, [settings?.thresholds.large.compact, settings?.thresholds.small.compact]);
+
+  if (query.isError && settings === undefined) return <View style={{ padding: 16, gap: 12 }}>
+    <Text accessibilityRole="alert" style={{ color: c.statusDanger }}>{errorText(query.error)}</Text>
+    <SettingsCard><SettingsAction label="Load the settings again" actionLabel="Retry" onPress={() => void query.refetch()} /></SettingsCard>
+  </View>;
+  if (settings === undefined) return <ActivityIndicator accessibilityLabel="Loading Smart Compact settings" color={c.foregroundMuted} style={{ padding: 24 }} />;
+
+  async function save(patch: Parameters<typeof write>[0], message: string) {
+    setSaving(true);
+    try {
+      await write(patch);
+      await refreshPills(() => readEnrolment({}));
+      await queryClient.invalidateQueries({ queryKey: ["smart-session"] });
+      toast.show(message);
+    } catch (error) {
+      toast.error(errorText(error));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const large = draft === null ? settings.thresholds.large.compact : percent(draft.large);
+  const small = draft === null ? settings.thresholds.small.compact : percent(draft.small);
+  const changed = draft !== null && large !== null && small !== null && (large !== settings.thresholds.large.compact || small !== settings.thresholds.small.compact);
+  const off = !settings.enabled || saving;
+  const report = install.data?.report;
+  const hooksHint = report === undefined ? "Keeps this plugin's context and compaction hooks in ~/.claude/settings.json."
+    : report.error !== null ? report.error
+      : report.pluginDir === null || report.hooks.length === 0 ? "Not registered, so nothing will ask a session to compact itself."
+        : `Registered: ${report.hooks.join(", ")}. Only entries that point at this plugin are touched.`;
+  const from = formatCompactTokens(settings.thresholds.largeWindowFrom);
+
+  return <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingVertical: 8, gap: 24 }}>
+    <SettingsSection title="Smart Compact" info="A session is never compacted unless it agrees. At the end of a turn past its line, it is asked whether to compact; it can compact, put it off with a reason, or keep working.">
+      <SettingsCard>
+        <SettingsSwitch label="Smart Compact" hint={settings.enabled ? "On. Context notices, and the question at the compact line." : "Off. Nothing is asked and nothing is compacted."}
+          value={settings.enabled} disabled={saving} onValueChange={(enabled) => void save({ enabled }, enabled ? "Smart Compact on" : "Smart Compact off")} />
+        <SettingsSwitch label="Enrol sessions automatically" hint="A session that saves its task state with the checkpoint tool is enrolled by that alone. Off, enrol each one from its pill."
+          value={settings.autoEnrol} disabled={off} onValueChange={(autoEnrol) => void save({ autoEnrol }, autoEnrol ? "Sessions enrol themselves" : "Sessions are enrolled one at a time")} />
+        <SettingsSwitch label="Context pill on every session" hint="A ring above the message box with the session's context and its compact line. Press it to enrol or remove the session."
+          value={settings.showPill} disabled={off} onValueChange={(showPill) => void save({ showPill }, showPill ? "Pill shown on every session" : "Pill hidden")} />
+      </SettingsCard>
+    </SettingsSection>
+    <SettingsSection title="When to ask" info="What wears a session down is its absolute size, not its share of the window, so large windows are asked much earlier. Earlier context notices move down with the line.">
+      <SettingsCard>
+        <SettingsInput key={`large-${inputKey}`} label={`Windows of ${from} or more (%)`} hint={`Asked at ${large ?? "—"}%, about ${large === null ? "—" : formatCompactTokens((large / 100) * 1_000_000)} tokens of a 1M window. Default 30.`}
+          initialValue={String(settings.thresholds.large.compact)} disabled={off} error={draft !== null && large === null ? "Enter a whole number from 1 to 99." : null}
+          onChangeText={(value) => setDraft((previous) => ({ large: value, small: previous?.small ?? String(settings.thresholds.small.compact) }))} />
+        <SettingsInput key={`small-${inputKey}`} label={`Smaller windows (%)`} hint={`Asked at ${small ?? "—"}% of a window under ${from}. Default 85.`}
+          initialValue={String(settings.thresholds.small.compact)} disabled={off} error={draft !== null && small === null ? "Enter a whole number from 1 to 99." : null}
+          onChangeText={(value) => setDraft((previous) => ({ small: value, large: previous?.large ?? String(settings.thresholds.large.compact) }))} />
+        {draft !== null ? <>
+          <SettingsAction label="Apply the new lines" hint={changed ? `Large ${large}% · small ${small}%` : "Nothing to apply yet"} actionLabel="Save" disabled={!changed || off}
+            onPress={() => void save({ thresholds: { ...settings.thresholds, large: withCompactThreshold(settings.thresholds.large, large!), small: withCompactThreshold(settings.thresholds.small, small!) } }, `Smart Compact asks at ${large}% and ${small}%`)} />
+          <SettingsAction label="Keep the saved lines" actionLabel="Discard" disabled={saving} onPress={() => { setDraft(null); setInputKey((k) => k + 1); }} />
+        </> : null}
+      </SettingsCard>
+    </SettingsSection>
+    <SettingsSection title="Claude Code">
+      <SettingsCard>
+        <SettingsSwitch label="Register the hooks" hint={hooksHint} value={settings.installHooks} disabled={off}
+          onValueChange={(installHooks) => void save({ installHooks }, installHooks ? "Hooks registered with Claude Code" : "Hooks removed from Claude Code")} />
+        {report?.mcp === "unavailable" ? <SettingsRow label="MCP server not registered" hint="The claude command was not reachable from the daemon." /> : null}
+      </SettingsCard>
+    </SettingsSection>
+  </ScrollView>;
+}