@slkiser/opencode-quota 4.10.6 → 5.0.0

package/dist/tui.js

@@ -1,1035 +1,894 @@
+import { use as _$use } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
 import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
 import { effect as _$effect } from "@opentui/solid";
-import { memo as _$memo } from "@opentui/solid";
-import { insert as _$insert } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 /** @jsxImportSource @opentui/solid */
 
-import { createEffect, createSignal, Index, onCleanup, Show } from "solid-js";
-import { formatQuotaModeHeading, formatResetCountdown, isResetTimeDecimals, resolveDisplayedPercent } from "./lib/format-utils.js";
-import { buildQuotaDialogCommandOutput, QUOTA_DIALOG_COMMANDS } from "./lib/quota-dialog-commands.js";
-import { disposeQuotaTelemetryOwner } from "./lib/quota-telemetry.js";
-import { getSidebarBodyLineColor } from "./lib/tui-line-style.js";
-import { getCompactStatusText, getHomeBottomAnnouncementText, getSidebarPanelLines, getSidebarPanelLinesExpanded, shouldRenderCompactStatus, shouldRenderHomeBottom, shouldRenderSidebarPanel } from "./lib/tui-panel-state.js";
-import { formatPromptBarPercentMeta, PROMPT_BAR_WIDTH, resolvePromptBarLabel } from "./lib/tui-prompt-bar-format.js";
-import { createTuiRefreshLifecycle } from "./lib/tui-refresh-lifecycle.js";
-import { createTuiQuotaClient, getTuiRuntimeRootHints, getTuiSessionModelMeta, loadTuiHomeBottomStatus, loadTuiSessionQuotaSurfaces, normalizeTuiSessionID, resolveTuiSurfaceRegistration, writeTuiQuotaExportIfEnabled } from "./lib/tui-runtime.js";
-import { buildSidebarContentRows } from "./lib/tui-sidebar-content.js";
-const id = "@slkiser/opencode-quota";
-// Place Quota near the top so variable-height built-in sections
-// (MCP/LSP/Todo/Files) do not push it below the visible fold.
-const SIDEBAR_ORDER = 150;
-const COMPACT_ORDER = 90;
+import { Plugin } from "@opencode/plugin/tui";
+import { TextAttributes } from "@opentui/core";
+import { useTerminalDimensions } from "@opentui/solid";
+import { createSignal, onCleanup, Show } from "solid-js";
+import { loadConfig } from "./lib/config.js";
+import { resolveOpenCodeLocationRoots } from "./lib/config-file-utils.js";
+import { sanitizeDisplayText } from "./lib/display-sanitize.js";
+import { fitTableToWidth } from "./lib/markdown-table.js";
+import { layoutQuotaTables } from "./lib/quota-columns.js";
+import { parseQuotaSlashCommand, QUOTA_DIALOG_COMMANDS } from "./lib/quota-dialog-command-specs.js";
+import { readQuotaReportMetadata } from "./lib/quota-report-message.js";
+import { renderableSections, renderKvRow } from "./lib/report-document.js";
+import { QuotaRpc } from "./rpc.js";
 const REFRESH_INTERVAL_MS = 60_000;
-const EVENT_REFRESH_DELAYS_MS = [150, 600];
-const MOUNT_RECOVERY_DELAYS_MS = [500, 1_500, 4_000];
-const FALLBACK_SURFACE_REGISTRATION = {
-  commandDisplay: "inline",
-  sidebar: {
-    enabled: true
-  },
-  compact: {
-    enabled: false,
-    homeBottom: false,
-    sessionPrompt: false,
-    hasNativeProviderQuota: false,
-    suppressedByNativeProviderQuota: false
-  },
-  promptBar: {
-    enabled: false
-  },
-  announcements: {
-    homeBottom: false
-  },
-  homeBottom: false
-};
-function createTuiInitialLoadCoordinator(seed) {
-  let sessionAvailable = true;
-  let homeAvailable = true;
-  return {
-    takeInitialSession() {
-      if (!sessionAvailable) return undefined;
-      sessionAvailable = false;
-      return seed;
-    },
-    takeInitialHome() {
-      if (!homeAvailable) return undefined;
-      homeAvailable = false;
-      return seed;
-    }
-  };
+const RPC_TIMEOUT_MS = 60_000;
+function getSessionID(event) {
+  const sessionID = event.data?.sessionID;
+  return typeof sessionID === "string" && sessionID ? sessionID : undefined;
 }
-function createTuiRegistrationGate() {
-  const [current, setCurrent] = createSignal({
-    status: "pending"
-  });
+function quotaClient(context) {
   return {
-    current,
-    activate(registration, initialLoads) {
-      if (current().status !== "pending") return;
-      setCurrent({
-        status: "active",
-        registration,
-        initialLoads
-      });
-    },
-    dispose() {
-      if (current().status === "disposed") return;
-      setCurrent({
-        status: "disposed"
-      });
+    config: {
+      get: async () => ({
+        data: {}
+      }),
+      providers: async () => ({
+        data: {
+          providers: context.data.location?.provider.list(context.location ?? context.data.location.default()) ?? []
+        }
+      })
     }
   };
 }
-const sessionResources = new WeakMap();
-const homeResources = new WeakMap();
-function getSessionResourceMap(api) {
-  const existing = sessionResources.get(api);
-  if (existing) return existing;
-  const next = new Map();
-  sessionResources.set(api, next);
-  return next;
+
+/** Same project roots as the server plugin: the location's Git worktree, else the location directory. */
+function quotaRoots(context) {
+  return resolveOpenCodeLocationRoots(context.location?.directory ?? process.cwd());
 }
-function createSessionQuotaResource(api, sessionID, initialLoads) {
-  const [sidebar, setSidebar] = createSignal({
-    status: "loading",
-    lines: []
-  });
-  const [compact, setCompact] = createSignal({
-    status: "loading"
-  });
-  const [promptBar, setPromptBar] = createSignal({
-    status: "loading"
-  });
-  let loadOrdinal = 0;
-  const lifecycle = createTuiRefreshLifecycle({
-    load: () => {
-      const initialRuntimeSeed = loadOrdinal === 0 ? initialLoads?.takeInitialSession() : undefined;
-      loadOrdinal += 1;
-      return loadTuiSessionQuotaSurfaces({
-        api,
-        sessionID,
-        ...(initialRuntimeSeed ? {
-          initialRuntimeSeed
-        } : {})
-      });
-    },
-    apply: next => {
-      setSidebar(next.sidebar);
-      setCompact(next.compact);
-      setPromptBar(next.promptBar ?? {
-        status: "loading"
-      });
-    },
-    intervalMs: REFRESH_INTERVAL_MS,
-    eventRefreshDelaysMs: EVENT_REFRESH_DELAYS_MS,
-    // TUI/session state can hydrate asynchronously after mount or session switch,
-    // so retry a few times to recover from empty first-load reads.
-    recoveryDelaysMs: MOUNT_RECOVERY_DELAYS_MS,
-    subscribe: scheduleRefresh => [api.event.on("session.updated", event => {
-      if (event.properties?.info?.id === sessionID) {
-        scheduleRefresh();
-      }
-    }), api.event.on("message.updated", event => {
-      if (event.properties?.info?.sessionID === sessionID) {
-        scheduleRefresh();
-      }
-    }), api.event.on("message.removed", event => {
-      if (event.properties?.sessionID === sessionID) {
-        scheduleRefresh();
-      }
-    }), api.event.on("tui.session.select", event => {
-      if (event.properties?.sessionID === sessionID) {
-        scheduleRefresh();
-      }
-    })],
-    onDispose: () => {
-      getSessionResourceMap(api).delete(sessionID);
-    }
-  });
-  const resource = {
-    sessionID,
-    sidebar,
-    compact,
-    promptBar,
-    retain: () => {
-      lifecycle.retain();
-      return resource;
-    },
-    release: lifecycle.release
+
+/**
+ * The server plugin computes every quota surface; the TUI asks it over the quota RPC. The
+ * RPC client is made per call, never during setup. Each call names the TUI's location, so
+ * the server uses that folder's settings, and gives up after a minute.
+ */
+function quotaRpc(context) {
+  return context.client.rpc(QuotaRpc);
+}
+function quotaRpcOptions(context) {
+  return {
+    location: context.location ?? context.data.location.default(),
+    signal: AbortSignal.timeout(RPC_TIMEOUT_MS)
   };
-  return resource;
 }
-function acquireSessionQuotaResource(api, sessionID, initialLoads) {
-  const resources = getSessionResourceMap(api);
-  const existing = resources.get(sessionID);
-  if (existing) return existing.retain();
-  const next = createSessionQuotaResource(api, sessionID, initialLoads).retain();
-  resources.set(sessionID, next);
-  return next;
+async function getQuotaMessage(context, sessionID, surface) {
+  const output = await quotaRpc(context).surface({
+    surface,
+    sessionID
+  }, quotaRpcOptions(context));
+  return output.quota ?? undefined;
+}
+
+/** RPC calls reject with a plain `{ type, message }` object, not an Error. */
+function rpcErrorMessage(error) {
+  if (error instanceof Error) return error.message;
+  if (typeof error === "object" && error !== null && "message" in error && typeof error.message === "string") {
+    return error.message;
+  }
+  return String(error);
 }
-function createHomeBottomResource(api, compactHomeBottomEnabled, initialLoads) {
-  const [bottom, setBottom] = createSignal({
-    status: "loading",
-    compact: compactHomeBottomEnabled ? {
-      status: "loading"
-    } : {
-      status: "disabled"
+
+/**
+ * One view's refresh loop, as in v4 (tui-refresh-lifecycle.ts): a refresh that
+ * arrives while a load runs is coalesced into one follow-up load, and a result is
+ * dropped when the view was disposed or a newer load started.
+ */
+function createViewRefresh(load, apply) {
+  let disposed = false;
+  let loadVersion = 0;
+  let inFlight = false;
+  let queued = false;
+  const refresh = () => {
+    if (disposed) return;
+    if (inFlight) {
+      queued = true;
+      return;
     }
-  });
-  let loadOrdinal = 0;
-  const lifecycle = createTuiRefreshLifecycle({
-    load: () => {
-      const initialRuntimeSeed = loadOrdinal === 0 ? initialLoads?.takeInitialHome() : undefined;
-      loadOrdinal += 1;
-      return loadTuiHomeBottomStatus({
-        api,
-        ...(initialRuntimeSeed ? {
-          initialRuntimeSeed
-        } : {})
-      });
-    },
-    apply: setBottom,
-    afterApply: () => {
-      // Fire-and-forget: write export file if enabled. A failed write must
-      // never affect TUI rendering, so log a warning and continue.
-      void writeTuiQuotaExportIfEnabled({
-        api
-      }).catch(err => {
-        console.warn(`[opencode-quota] quota export write failed: ${String(err)}`);
-      });
-    },
-    intervalMs: REFRESH_INTERVAL_MS,
-    eventRefreshDelaysMs: EVENT_REFRESH_DELAYS_MS,
-    subscribe: scheduleRefresh => [api.event.on("session.updated", scheduleRefresh), api.event.on("message.updated", scheduleRefresh), api.event.on("message.removed", scheduleRefresh), api.event.on("tui.session.select", scheduleRefresh)],
-    onDispose: () => {
-      homeResources.delete(api);
+    inFlight = true;
+    const currentVersion = ++loadVersion;
+    void load().then(value => {
+      if (disposed || currentVersion !== loadVersion) return;
+      apply(value);
+    }).catch(reportFailure).finally(() => {
+      if (disposed) return;
+      inFlight = false;
+      if (queued) {
+        queued = false;
+        refresh();
+      }
+    });
+  };
+  return {
+    refresh,
+    dispose: () => {
+      disposed = true;
     }
-  });
-  const resource = {
-    bottom,
-    retain: () => {
-      lifecycle.retain();
-      return resource;
-    },
-    release: lifecycle.release
   };
-  return resource;
 }
-function acquireHomeBottomResource(api, compactHomeBottomEnabled, initialLoads) {
-  const existing = homeResources.get(api);
-  if (existing) return existing.retain();
-  const next = createHomeBottomResource(api, compactHomeBottomEnabled, initialLoads).retain();
-  homeResources.set(api, next);
-  return next;
-}
-function useSessionQuotaResource(api, sessionID, initialLoads) {
-  let current = acquireSessionQuotaResource(api, sessionID(), initialLoads);
-  const [resource, setResource] = createSignal(current);
-  createEffect(() => {
-    const nextSessionID = sessionID();
-    if (current.sessionID === nextSessionID) return;
-    const previous = current;
-    current = acquireSessionQuotaResource(api, nextSessionID, initialLoads);
-    setResource(current);
-    previous.release();
+function QuotaFooter(props) {
+  const [lines, setLines] = createSignal([]);
+  const view = createViewRefresh(async () => {
+    const output = await quotaRpc(props.context).footer({
+      surface: props.surface,
+      sessionID: props.sessionID
+    }, quotaRpcOptions(props.context));
+    return output.lines;
+  }, next => {
+    setLines(next);
+    if (props.surface !== "home") return;
+    // Fire-and-forget: the server writes the export file if enabled. A failed write
+    // must never affect rendering, so log a warning and continue.
+    void quotaRpc(props.context).writeExport({}, quotaRpcOptions(props.context)).catch(error => {
+      console.warn(`[opencode-quota] quota export write failed: ${rpcErrorMessage(error)}`);
+    });
+  });
+  view.refresh();
+  const interval = setInterval(view.refresh, REFRESH_INTERVAL_MS);
+  const stop = props.context.data.on("session.step.ended", event => {
+    if (props.surface === "home" || getSessionID(event) === props.sessionID) view.refresh();
   });
   onCleanup(() => {
-    current.release();
+    view.dispose();
+    clearInterval(interval);
+    stop();
   });
-  return resource;
-}
-function SidebarContentView(props) {
-  const resource = useSessionQuotaResource(props.api, () => props.sessionID, props.initialLoads);
-  const panel = () => resource().sidebar();
-  const lines = () => getSidebarPanelLines(panel());
-  const hasDetailLines = () => Boolean(panel().linesExpanded?.length);
-  const [collapsed, setCollapsed] = createSignal(props.api.kv?.get("quota-sidebar-collapsed", true) ?? true);
-  const toggleCollapsed = () => {
-    if (!hasDetailLines()) return;
-    const next = !collapsed();
-    setCollapsed(next);
-    props.api.kv?.set("quota-sidebar-collapsed", next);
-  };
-  const displayLines = () => {
-    if (!hasDetailLines()) return lines();
-    return collapsed() ? lines() : getSidebarPanelLinesExpanded(panel());
-  };
-  const contentRows = () => {
-    const heading = panel().headerPercentMode ? formatQuotaModeHeading(panel().headerPercentMode) : "Quota";
-    return buildSidebarContentRows({
-      collapsed: collapsed(),
-      heading,
-      hasDetailLines: hasDetailLines(),
-      providerCount: panel().providerCount ?? 0,
-      lines: displayLines()
-    });
-  };
   return _$createComponent(Show, {
     get when() {
-      return shouldRenderSidebarPanel(panel());
+      return lines().length;
     },
     get children() {
       var _el$ = _$createElement("box");
-      _$setProp(_el$, "gap", 0);
-      _$setProp(_el$, "width", "100%");
-      _$insert(_el$, _$createComponent(Index, {
-        get each() {
-          return contentRows();
-        },
-        children: row => (() => {
-          var _el$2 = _$createElement("text");
-          _$setProp(_el$2, "wrapMode", "none");
-          _$setProp(_el$2, "width", "100%");
-          _$insert(_el$2, (() => {
-            var _c$ = _$memo(() => row().kind === "header");
-            return () => _c$() ? row().segments.map(segment => segment.style === "muted" ? (() => {
-              var _el$3 = _$createElement("span");
-              _$insert(_el$3, () => segment.text);
-              _$effect(_$p => _$setProp(_el$3, "fg", props.api.theme.current.textMuted, _$p));
-              return _el$3;
-            })() : (() => {
-              var _el$4 = _$createElement("b");
-              _$insert(_el$4, () => segment.text);
-              return _el$4;
-            })()) : row().text || " ";
-          })());
-          _$effect(_p$ => {
-            var _v$ = row().kind === "header" ? props.api.theme.current.text : getSidebarBodyLineColor(row().text, props.api.theme.current),
-              _v$2 = row().kind === "header" ? toggleCollapsed : undefined;
-            _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "fg", _v$, _p$.e));
-            _v$2 !== _p$.t && (_p$.t = _$setProp(_el$2, "onMouseDown", _v$2, _p$.t));
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$2;
-        })()
-      }));
+      _$setProp(_el$, "flexDirection", "column");
+      _$insert(_el$, () => lines().map(line => (() => {
+        var _el$2 = _$createElement("text");
+        _$insert(_el$2, line);
+        _$effect(_$p => _$setProp(_el$2, "fg", props.context.theme.text.muted, _$p));
+        return _el$2;
+      })()));
       return _el$;
     }
   });
 }
-function CompactStatusLine(props) {
-  const text = () => {
-    const panel = props.panel();
-    if (!shouldRenderCompactStatus(panel)) return "";
-    return getCompactStatusText(panel);
-  };
-  const line = () => (() => {
-    var _el$5 = _$createElement("box"),
-      _el$6 = _$createElement("text");
-    _$insertNode(_el$5, _el$6);
-    _$setProp(_el$5, "flexDirection", "row");
-    _$setProp(_el$6, "wrapMode", "none");
-    _$insert(_el$6, text);
-    _$effect(_p$ => {
-      var _v$3 = props.justifyContent,
-        _v$4 = props.api.theme.current.textMuted;
-      _v$3 !== _p$.e && (_p$.e = _$setProp(_el$5, "justifyContent", _v$3, _p$.e));
-      _v$4 !== _p$.t && (_p$.t = _$setProp(_el$6, "fg", _v$4, _p$.t));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$5;
-  })();
-  return _$createComponent(Show, {
-    get when() {
-      return text();
-    },
-    get children() {
-      return _$createComponent(Show, {
-        get when() {
-          return props.blankLineBefore;
-        },
-        get fallback() {
-          return line();
-        },
-        get children() {
-          var _el$7 = _$createElement("box"),
-            _el$8 = _$createElement("text");
-          _$insertNode(_el$7, _el$8);
-          _$setProp(_el$7, "gap", 0);
-          _$insertNode(_el$8, _$createTextNode(` `));
-          _$insert(_el$7, line, null);
-          return _el$7;
-        }
-      });
-    }
-  });
-}
-function SessionPromptWithCompactStatus(props) {
-  const resource = useSessionQuotaResource(props.api, () => props.sessionID, props.initialLoads);
-  const panel = () => resource().compact();
-  return (() => {
-    var _el$0 = _$createElement("box");
-    _$setProp(_el$0, "gap", 0);
-    _$insert(_el$0, _$createComponent(props.api.ui.Prompt, {
-      get sessionID() {
-        return props.sessionID;
-      },
-      get visible() {
-        return props.visible;
-      },
-      get disabled() {
-        return props.disabled;
-      },
-      get onSubmit() {
-        return props.onSubmit;
-      },
-      ref(r$) {
-        var _ref$ = props.promptRef;
-        typeof _ref$ === "function" ? _ref$(r$) : props.promptRef = r$;
-      }
-    }), null);
-    _$insert(_el$0, _$createComponent(CompactStatusLine, {
-      get api() {
-        return props.api;
-      },
-      panel: panel,
-      justifyContent: "flex-end"
-    }), null);
-    return _el$0;
-  })();
-}
-function shouldRenderPromptBar(bar) {
-  return bar.status === "ready" && Boolean(bar.entry);
-}
-function useSessionRunning(api, sessionID) {
-  const [running, setRunning] = createSignal(false);
-  createEffect(() => {
-    const id = sessionID();
-    if (!id) {
-      setRunning(false);
-      return;
-    }
-    const update = () => {
-      try {
-        const sessionState = api.state.session;
-        const status = sessionState.status?.(id);
-        setRunning(status?.type === "busy" || status?.type === "retry");
-      } catch {
-        setRunning(false);
-      }
-    };
-    update();
-    const disposers = [api.event.on("session.status", event => {
-      if (event.properties?.sessionID === id) {
-        update();
-      }
-    }), api.event.on("session.updated", event => {
-      if (event.properties?.info?.id === id) {
-        update();
-      }
-    })];
-    onCleanup(() => {
-      for (const dispose of disposers) {
-        if (typeof dispose === "function") {
-          dispose();
-        }
-      }
-    });
-  });
-  return running;
+function reportFailure(error) {
+  // OpenCode answers rpc.unavailable when no server plugin registered the quota RPC here.
+  const hint = typeof error === "object" && error !== null && "type" in error && error.type === "rpc.unavailable" ? " (OpenCode Quota's server plugin is not loaded for this folder)" : "";
+  console.warn(`[opencode-quota] failed to load quota: ${rpcErrorMessage(error)}${hint}`);
 }
-function buildPromptBarParts(params) {
-  const bar = params.bar();
-  if (!shouldRenderPromptBar(bar)) return undefined;
-  const entry = bar.entry;
-  if (!entry) return undefined;
-  const hasPercent = Number.isFinite(entry.percentRemaining);
-  if (entry.semanticSegment && !hasPercent) {
-    const reset = entry.resetTimeIso ? formatResetCountdown(entry.resetTimeIso, isResetTimeDecimals(bar.resetTimeDecimals) ? {
-      compactRounded: true,
-      decimals: bar.resetTimeDecimals
-    } : {
-      spaced: bar.resetTimeSpaced
-    }) : "";
-    return {
-      label: resolvePromptBarLabel(entry),
-      barText: "",
-      meta: reset
-    };
-  }
-  const p = Math.min(100, resolveDisplayedPercent(entry.percentRemaining ?? 0, bar.percentDisplayMode ?? "remaining"));
-  const filled = Math.round(p / 100 * PROMPT_BAR_WIDTH);
-  const empty = PROMPT_BAR_WIDTH - filled;
-  let barText = "█".repeat(filled) + "░".repeat(empty);
-  if (params.running() && filled > 0) {
-    const cells = Array(filled).fill("▓");
-    const center = params.phase() % filled;
-    const gradient = ["▒", "▓", "█", "▓", "▒"];
-    for (let offset = -2; offset <= 2; offset++) {
-      const position = (center + offset + filled) % filled;
-      cells[position] = gradient[offset + 2];
-    }
-    barText = cells.join("") + "░".repeat(empty);
-  }
+
+/** OpenCode's dialog widths (dialogWidth in its ui/dialog.tsx). */
+const DIALOG_WIDTHS = {
+  medium: 60,
+  large: 88,
+  xlarge: 116
+};
+function sanitizeQuotaRow(row) {
   return {
-    label: resolvePromptBarLabel(entry),
-    barText,
-    meta: formatPromptBarPercentMeta({
-      percentRemaining: entry.percentRemaining ?? 0,
-      percentDisplayMode: bar.percentDisplayMode,
-      resetTimeIso: entry.resetTimeIso,
-      resetTimeDecimals: bar.resetTimeDecimals,
-      resetTimeSpaced: bar.resetTimeSpaced,
-      runway: entry.runway
-    })
+    ...row,
+    label: sanitizeDisplayText(row.label),
+    value: sanitizeDisplayText(row.value),
+    usage: row.usage === undefined ? undefined : sanitizeDisplayText(row.usage),
+    reset: row.reset === undefined ? undefined : sanitizeDisplayText(row.reset),
+    notes: row.notes.map(sanitizeDisplayText)
   };
 }
-function PromptQuotaHint(props) {
-  const parts = () => buildPromptBarParts(props);
-  const barColor = () => props.api.theme.current.textMuted;
-  const label = () => parts()?.label ?? "";
-  const bar = () => parts()?.barText ?? "";
-  const meta = () => parts()?.meta ?? "";
-  return _$createComponent(Show, {
-    get when() {
-      return parts();
-    },
-    get children() {
-      var _el$1 = _$createElement("box"),
-        _el$10 = _$createElement("text"),
-        _el$11 = _$createElement("text"),
-        _el$12 = _$createElement("text");
-      _$insertNode(_el$1, _el$10);
-      _$insertNode(_el$1, _el$11);
-      _$insertNode(_el$1, _el$12);
-      _$setProp(_el$1, "flexDirection", "row");
-      _$setProp(_el$1, "justifyContent", "flex-end");
-      _$setProp(_el$1, "gap", 1);
-      _$setProp(_el$10, "wrapMode", "none");
-      _$insert(_el$10, label);
-      _$setProp(_el$11, "wrapMode", "none");
-      _$insert(_el$11, bar);
-      _$setProp(_el$12, "wrapMode", "none");
-      _$insert(_el$12, meta);
+
+/** A report's /quota blocks, sanitized, for layoutQuotaTables. */
+function quotaBlocks(section) {
+  return section.blocks.flatMap(block => block.kind === "quota" ? [{
+    ...block,
+    provider: sanitizeDisplayText(block.provider),
+    rows: block.rows.map(sanitizeQuotaRow)
+  }] : []);
+}
+
+/**
+ * A /quota table (see layoutQuotaTables): its title bold, like a section title, then its
+ * header bold in OpenCode's primary accent, like the token tables, and its providers bold.
+ * In the rows, labels, reset times, and notes are muted; bars, percents, and values base.
+ */
+function QuotaTableView(props) {
+  return (() => {
+    var _el$3 = _$createElement("box"),
+      _el$4 = _$createElement("text");
+    _$insertNode(_el$3, _el$4);
+    _$setProp(_el$3, "flexDirection", "column");
+    _$insert(_el$4, () => props.table.title);
+    _$insert(_el$3, () => props.table.lines.map(line => line.style === "row" ? (() => {
+      var _el$5 = _$createElement("text");
+      _$setProp(_el$5, "wrapMode", "none");
+      _$insert(_el$5, () => line.segments.map(segment => (() => {
+        var _el$6 = _$createElement("span");
+        _$insert(_el$6, () => segment.text);
+        _$effect(_$p => _$setProp(_el$6, "style", {
+          fg: segment.muted ? props.theme.text.muted : props.theme.text.base
+        }, _$p));
+        return _el$6;
+      })()));
+      _$effect(_$p => _$setProp(_el$5, "fg", props.theme.text.base, _$p));
+      return _el$5;
+    })() : (() => {
+      var _el$7 = _$createElement("text");
+      _$insert(_el$7, () => line.segments.map(segment => segment.text).join(""));
       _$effect(_p$ => {
-        var _v$5 = props.api.theme.current.textMuted,
-          _v$6 = barColor(),
-          _v$7 = props.api.theme.current.textMuted;
-        _v$5 !== _p$.e && (_p$.e = _$setProp(_el$10, "fg", _v$5, _p$.e));
-        _v$6 !== _p$.t && (_p$.t = _$setProp(_el$11, "fg", _v$6, _p$.t));
-        _v$7 !== _p$.a && (_p$.a = _$setProp(_el$12, "fg", _v$7, _p$.a));
+        var _v$3 = TextAttributes.BOLD,
+          _v$4 = line.style === "header" ? props.theme.text.action.primary.selected : props.theme.text.base,
+          _v$5 = line.style === "header" ? "none" : undefined;
+        _v$3 !== _p$.e && (_p$.e = _$setProp(_el$7, "attributes", _v$3, _p$.e));
+        _v$4 !== _p$.t && (_p$.t = _$setProp(_el$7, "fg", _v$4, _p$.t));
+        _v$5 !== _p$.a && (_p$.a = _$setProp(_el$7, "wrapMode", _v$5, _p$.a));
         return _p$;
       }, {
         e: undefined,
         t: undefined,
         a: undefined
       });
-      return _el$1;
-    }
-  });
-}
-function SessionQuotaPromptBar(props) {
-  const resource = useSessionQuotaResource(props.api, () => props.sessionID, props.initialLoads);
-  const promptBar = () => resource().promptBar();
-  const running = useSessionRunning(props.api, () => props.sessionID);
-  const [phase, setPhase] = createSignal(0);
-  createEffect(() => {
-    if (!running() || !shouldRenderPromptBar(promptBar())) {
-      setPhase(0);
-      return;
-    }
-    const interval = setInterval(() => setPhase(p => p + 1), 160);
-    onCleanup(() => clearInterval(interval));
-  });
-  return (() => {
-    var _el$13 = _$createElement("box");
-    _$setProp(_el$13, "gap", 0);
-    _$insert(_el$13, _$createComponent(props.api.ui.Prompt, {
-      get sessionID() {
-        return props.sessionID;
-      },
-      get visible() {
-        return props.visible;
-      },
-      get disabled() {
-        return props.disabled;
-      },
-      get onSubmit() {
-        return props.onSubmit;
-      },
-      ref(r$) {
-        var _ref$2 = props.promptRef;
-        typeof _ref$2 === "function" ? _ref$2(r$) : props.promptRef = r$;
-      }
-    }), null);
-    _$insert(_el$13, _$createComponent(PromptQuotaHint, {
-      get api() {
-        return props.api;
-      },
-      bar: promptBar,
-      running: running,
-      phase: phase
-    }), null);
-    return _el$13;
+      return _el$7;
+    })()), null);
+    _$effect(_p$ => {
+      var _v$ = TextAttributes.BOLD,
+        _v$2 = props.theme.text.base;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$4, "attributes", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$4, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$3;
   })();
 }
-function HomeBottomView(props) {
-  const resource = acquireHomeBottomResource(props.api, props.compactHomeBottomEnabled, props.initialLoads);
-  onCleanup(() => resource.release());
-  const announcement = () => getHomeBottomAnnouncementText(resource.bottom());
-  const compact = () => resource.bottom().compact;
-  const visible = () => shouldRenderHomeBottom(resource.bottom());
-  return (() => {
-    var _el$14 = _$createElement("box");
-    _$setProp(_el$14, "gap", 0);
-    _$insert(_el$14, _$createComponent(Show, {
-      get when() {
-        return visible();
-      },
-      get children() {
-        var _el$15 = _$createElement("text");
-        _$insertNode(_el$15, _$createTextNode(` `));
-        return _el$15;
-      }
-    }), null);
-    _$insert(_el$14, _$createComponent(Show, {
-      get when() {
-        return _$memo(() => !!visible())() && announcement();
-      },
-      get children() {
-        var _el$17 = _$createElement("box"),
-          _el$18 = _$createElement("text");
-        _$insertNode(_el$17, _el$18);
-        _$setProp(_el$17, "flexDirection", "row");
-        _$setProp(_el$17, "justifyContent", "center");
-        _$setProp(_el$18, "wrapMode", "none");
-        _$insert(_el$18, announcement);
-        _$effect(_$p => _$setProp(_el$18, "fg", props.api.theme.current.textMuted, _$p));
-        return _el$17;
-      }
-    }), null);
-    _$insert(_el$14, _$createComponent(Show, {
-      get when() {
-        return visible();
-      },
-      get children() {
-        return _$createComponent(CompactStatusLine, {
-          get api() {
-            return props.api;
-          },
-          panel: compact,
-          justifyContent: "center"
+
+/**
+ * One block of a report. Lines, and the chat lines of /quota rows the dialog's tables do not
+ * fit, and key-value rows wrap at words. A table keeps each row on one line and spans `width`
+ * columns when it fits (see fitTableToWidth), with the header row bold in OpenCode's primary
+ * accent (its text color for a selected tab). Like OpenCode's sidebar, labels are muted and
+ * values are base.
+ */
+function ReportBlockView(props) {
+  const block = props.block;
+  if (block.kind === "lines" || block.kind === "quota") {
+    return (() => {
+      var _el$8 = _$createElement("text");
+      _$insert(_el$8, () => sanitizeDisplayText(block.lines.join("\n")));
+      _$effect(_$p => _$setProp(_el$8, "fg", props.theme.text.muted, _$p));
+      return _el$8;
+    })();
+  }
+  if (block.kind === "kv") {
+    return (() => {
+      var _el$9 = _$createElement("box");
+      _$setProp(_el$9, "flexDirection", "column");
+      _$insert(_el$9, () => block.rows.map(({
+        value,
+        ...key
+      }) => value === undefined ? (() => {
+        var _el$0 = _$createElement("text");
+        _$insert(_el$0, () => sanitizeDisplayText(renderKvRow(key)));
+        _$effect(_$p => _$setProp(_el$0, "fg", props.theme.text.muted, _$p));
+        return _el$0;
+      })() : (() => {
+        var _el$1 = _$createElement("text"),
+          _el$10 = _$createElement("span"),
+          _el$11 = _$createTextNode(` `);
+        _$insertNode(_el$1, _el$10);
+        _$insert(_el$1, () => sanitizeDisplayText(renderKvRow({
+          ...key,
+          trailingColon: true
+        })), _el$10);
+        _$insertNode(_el$10, _el$11);
+        _$insert(_el$10, () => sanitizeDisplayText(value), null);
+        _$effect(_p$ => {
+          var _v$6 = props.theme.text.muted,
+            _v$7 = {
+              fg: props.theme.text.base
+            };
+          _v$6 !== _p$.e && (_p$.e = _$setProp(_el$1, "fg", _v$6, _p$.e));
+          _v$7 !== _p$.t && (_p$.t = _$setProp(_el$10, "style", _v$7, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
         });
-      }
-    }), null);
-    return _el$14;
-  })();
-}
-function getActiveTuiSessionID(api) {
-  if (api.route.current.name !== "session") return undefined;
-  return normalizeTuiSessionID(api.route.current.params?.sessionID);
-}
-function getTuiCommandArguments(input) {
-  if (!input || typeof input !== "object") return undefined;
-  const record = input;
-  for (const key of ["arguments", "args", "query"]) {
-    const value = record[key];
-    if (typeof value === "string" && value.trim()) return value.trim();
+        return _el$1;
+      })()));
+      return _el$9;
+    })();
   }
-  return undefined;
-}
-function CommandLoadingDialog(props) {
+  // Read in the JSX, so the table is laid out again when the terminal is resized.
+  const table = () => fitTableToWidth({
+    headers: block.headers.map(sanitizeDisplayText),
+    fullHeaders: block.fullHeaders?.map(sanitizeDisplayText),
+    rows: block.rows.map(row => row.map(sanitizeDisplayText)),
+    aligns: block.aligns,
+    width: props.width
+  });
   return (() => {
-    var _el$19 = _$createElement("box"),
-      _el$20 = _$createElement("text"),
-      _el$21 = _$createElement("b"),
-      _el$22 = _$createElement("text");
-    _$insertNode(_el$19, _el$20);
-    _$insertNode(_el$19, _el$22);
-    _$setProp(_el$19, "gap", 1);
-    _$setProp(_el$19, "paddingLeft", 2);
-    _$setProp(_el$19, "paddingRight", 2);
-    _$setProp(_el$19, "paddingBottom", 1);
-    _$insertNode(_el$20, _el$21);
-    _$insert(_el$21, () => props.title);
-    _$insertNode(_el$22, _$createTextNode(`Loading deterministic local output…`));
+    var _el$12 = _$createElement("box"),
+      _el$13 = _$createElement("text");
+    _$insertNode(_el$12, _el$13);
+    _$setProp(_el$12, "flexDirection", "column");
+    _$setProp(_el$13, "wrapMode", "none");
+    _$insert(_el$13, () => table().header);
+    _$insert(_el$12, () => table().rows.map(row => (() => {
+      var _el$14 = _$createElement("text");
+      _$setProp(_el$14, "wrapMode", "none");
+      _$insert(_el$14, row);
+      _$effect(_$p => _$setProp(_el$14, "fg", props.theme.text.base, _$p));
+      return _el$14;
+    })()), null);
     _$effect(_p$ => {
-      var _v$8 = props.api.theme.current.text,
-        _v$9 = props.api.theme.current.textMuted;
-      _v$8 !== _p$.e && (_p$.e = _$setProp(_el$20, "fg", _v$8, _p$.e));
-      _v$9 !== _p$.t && (_p$.t = _$setProp(_el$22, "fg", _v$9, _p$.t));
+      var _v$8 = TextAttributes.BOLD,
+        _v$9 = props.theme.text.action.primary.selected;
+      _v$8 !== _p$.e && (_p$.e = _$setProp(_el$13, "attributes", _v$8, _p$.e));
+      _v$9 !== _p$.t && (_p$.t = _$setProp(_el$13, "fg", _v$9, _p$.t));
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$19;
+    return _el$12;
+  })();
+}
+
+/**
+ * Draws a report document's sections with the same spacing as its plain text: one blank row
+ * between the sections and between the blocks of a section, and a section title directly
+ * above its first block. Section titles are bold. A /quota report's provider sections come
+ * first; when their rows fit the dialog's tables (see layoutQuotaTables), the tables take
+ * their place. The dialog shows the heading's subtitle under its own title, so the heading
+ * line is left out.
+ */
+function ReportDocumentView(props) {
+  const sections = renderableSections(props.document);
+  const blocks = sections.flatMap(quotaBlocks);
+  // Read in the JSX, so the tables are laid out again when the terminal is resized.
+  const tables = () => blocks.length > 0 ? layoutQuotaTables(blocks, props.width) : undefined;
+  return (() => {
+    var _el$15 = _$createElement("box");
+    _$setProp(_el$15, "flexDirection", "column");
+    _$setProp(_el$15, "gap", 1);
+    _$insert(_el$15, () => [...(tables() ?? []).map(table => _$createComponent(QuotaTableView, {
+      table: table,
+      get theme() {
+        return props.theme;
+      }
+    })), ...sections.filter(section => !tables() || !section.blocks.some(block => block.kind === "quota")).map(section => (() => {
+      var _el$16 = _$createElement("box"),
+        _el$17 = _$createElement("box");
+      _$insertNode(_el$16, _el$17);
+      _$setProp(_el$16, "flexDirection", "column");
+      _$insert(_el$16, (() => {
+        var _c$ = _$memo(() => !!section.title);
+        return () => _c$() ? (() => {
+          var _el$18 = _$createElement("text");
+          _$insert(_el$18, () => sanitizeDisplayText(section.title));
+          _$effect(_p$ => {
+            var _v$0 = TextAttributes.BOLD,
+              _v$1 = props.theme.text.base;
+            _v$0 !== _p$.e && (_p$.e = _$setProp(_el$18, "attributes", _v$0, _p$.e));
+            _v$1 !== _p$.t && (_p$.t = _$setProp(_el$18, "fg", _v$1, _p$.t));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$18;
+        })() : null;
+      })(), _el$17);
+      _$setProp(_el$17, "flexDirection", "column");
+      _$setProp(_el$17, "gap", 1);
+      _$insert(_el$17, () => section.blocks.map(block => _$createComponent(ReportBlockView, {
+        block: block,
+        get theme() {
+          return props.theme;
+        },
+        get width() {
+          return props.width;
+        }
+      })));
+      return _el$16;
+    })())]);
+    return _el$15;
   })();
 }
-function CommandOutputDialog(props) {
-  const lines = () => props.output.split("\n");
-  const bodyHeight = () => Math.min(28, Math.max(6, lines().length));
+
+/**
+ * Shows command output like OpenCode's alert dialog, but inside a scrollbox so long
+ * reports (/quota_status, /tokens_*) stay reachable. The mouse wheel scrolls the box;
+ * arrows, PageUp/PageDown, and Home/End scroll it from the keyboard. Esc is handled by
+ * the host dialog; Enter and the ok/esc labels close it.
+ */
+function QuotaOutputDialog(props) {
+  const theme = () => props.context.theme.surface("dialog");
+  const dimensions = useTerminalDimensions();
+  // OpenCode's dialog is its size's width, at most the terminal width minus 2. Inside it
+  // come this box's paddings (2 + 2) and one column for the scrollbox's scrollbar, which
+  // shows when the report is taller than the box.
+  const tableWidth = () => Math.min(DIALOG_WIDTHS[props.size], dimensions().width - 2) - 4 - 1;
+  const subtitle = props.document.heading?.subtitle;
+  // The host dialog starts a quarter of the way down the terminal. The remaining
+  // 8 rows cover the title, ok button, paddings, gaps, and one spare row; the subtitle
+  // takes one more.
+  const maxHeight = () => Math.max(1, Math.floor(dimensions().height * 0.75) - 8 - (subtitle ? 1 : 0));
+  let scroll;
+  const close = () => props.context.ui.dialog.clear();
+  props.context.keymap.layer(() => ({
+    mode: "modal",
+    commands: [{
+      bind: "return",
+      title: "Close",
+      group: "Dialog",
+      run: close
+    }, {
+      bind: "up",
+      title: "Scroll up",
+      group: "Dialog",
+      run: () => scroll?.scrollBy(-1)
+    }, {
+      bind: "down",
+      title: "Scroll down",
+      group: "Dialog",
+      run: () => scroll?.scrollBy(1)
+    }, {
+      bind: "pageup",
+      title: "Scroll up one page",
+      group: "Dialog",
+      run: () => scroll?.scrollBy(-maxHeight())
+    }, {
+      bind: "pagedown",
+      title: "Scroll down one page",
+      group: "Dialog",
+      run: () => scroll?.scrollBy(maxHeight())
+    }, {
+      bind: "home",
+      title: "Scroll to top",
+      group: "Dialog",
+      run: () => scroll?.scrollTo(0)
+    }, {
+      bind: "end",
+      title: "Scroll to bottom",
+      group: "Dialog",
+      run: () => scroll?.scrollTo(scroll.scrollHeight)
+    }]
+  }));
   return (() => {
-    var _el$24 = _$createElement("box"),
-      _el$25 = _$createElement("text"),
-      _el$26 = _$createElement("b"),
-      _el$27 = _$createElement("scrollbox"),
+    var _el$19 = _$createElement("box"),
+      _el$20 = _$createElement("box"),
+      _el$21 = _$createElement("box"),
+      _el$22 = _$createElement("text"),
+      _el$23 = _$createElement("text"),
+      _el$25 = _$createElement("box"),
+      _el$26 = _$createElement("scrollbox"),
+      _el$27 = _$createElement("box"),
       _el$28 = _$createElement("box"),
       _el$29 = _$createElement("text");
-    _$insertNode(_el$24, _el$25);
-    _$insertNode(_el$24, _el$27);
-    _$insertNode(_el$24, _el$29);
-    _$setProp(_el$24, "gap", 1);
-    _$setProp(_el$24, "width", "100%");
-    _$setProp(_el$24, "flexGrow", 1);
-    _$setProp(_el$24, "paddingLeft", 2);
-    _$setProp(_el$24, "paddingRight", 2);
-    _$setProp(_el$24, "paddingBottom", 1);
-    _$insertNode(_el$25, _el$26);
-    _$insert(_el$26, () => props.title);
-    _$insertNode(_el$27, _el$28);
-    _$setProp(_el$27, "width", "100%");
-    _$setProp(_el$27, "flexGrow", 1);
-    _$setProp(_el$27, "maxHeight", 28);
-    _$setProp(_el$28, "gap", 0);
-    _$setProp(_el$28, "width", "100%");
-    _$setProp(_el$28, "minWidth", 0);
-    _$insert(_el$28, () => lines().map(line => (() => {
+    _$insertNode(_el$19, _el$20);
+    _$insertNode(_el$19, _el$25);
+    _$insertNode(_el$19, _el$27);
+    _$setProp(_el$19, "paddingLeft", 2);
+    _$setProp(_el$19, "paddingRight", 2);
+    _$setProp(_el$19, "gap", 1);
+    _$insertNode(_el$20, _el$21);
+    _$insertNode(_el$21, _el$22);
+    _$insertNode(_el$21, _el$23);
+    _$setProp(_el$21, "flexDirection", "row");
+    _$setProp(_el$21, "justifyContent", "space-between");
+    _$insert(_el$22, () => props.title);
+    _$insertNode(_el$23, _$createTextNode(`esc`));
+    _$setProp(_el$23, "onMouseUp", close);
+    _$insert(_el$20, subtitle ? (() => {
       var _el$31 = _$createElement("text");
-      _$setProp(_el$31, "wrapMode", "word");
-      _$setProp(_el$31, "width", "100%");
-      _$insert(_el$31, line || " ");
-      _$effect(_$p => _$setProp(_el$31, "fg", props.api.theme.current.text, _$p));
+      _$insert(_el$31, () => sanitizeDisplayText(subtitle));
+      _$effect(_$p => _$setProp(_el$31, "fg", theme().text.muted, _$p));
       return _el$31;
-    })()));
-    _$insertNode(_el$29, _$createTextNode(`esc closes`));
-    _$effect(_p$ => {
-      var _v$0 = props.api.theme.current.text,
-        _v$1 = bodyHeight(),
-        _v$10 = props.api.theme.current.textMuted;
-      _v$0 !== _p$.e && (_p$.e = _$setProp(_el$25, "fg", _v$0, _p$.e));
-      _v$1 !== _p$.t && (_p$.t = _$setProp(_el$27, "minHeight", _v$1, _p$.t));
-      _v$10 !== _p$.a && (_p$.a = _$setProp(_el$29, "fg", _v$10, _p$.a));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    return _el$24;
-  })();
-}
-function CommandErrorDialog(props) {
-  const message = props.error instanceof Error ? props.error.message : String(props.error);
-  return (() => {
-    var _el$32 = _$createElement("box"),
-      _el$33 = _$createElement("text"),
-      _el$34 = _$createElement("b"),
-      _el$35 = _$createElement("text"),
-      _el$37 = _$createElement("text"),
-      _el$38 = _$createElement("text");
-    _$insertNode(_el$32, _el$33);
-    _$insertNode(_el$32, _el$35);
-    _$insertNode(_el$32, _el$37);
-    _$insertNode(_el$32, _el$38);
-    _$setProp(_el$32, "gap", 1);
-    _$setProp(_el$32, "paddingLeft", 2);
-    _$setProp(_el$32, "paddingRight", 2);
-    _$setProp(_el$32, "paddingBottom", 1);
-    _$insertNode(_el$33, _el$34);
-    _$insert(_el$34, () => props.title);
-    _$insertNode(_el$35, _$createTextNode(`OpenCode Quota command failed.`));
-    _$setProp(_el$37, "wrapMode", "none");
-    _$insert(_el$37, message || "Unknown error");
-    _$insertNode(_el$38, _$createTextNode(`esc closes`));
+    })() : null, null);
+    _$insertNode(_el$25, _el$26);
+    _$setProp(_el$25, "paddingBottom", 1);
+    _$use(element => {
+      scroll = element;
+    }, _el$26);
+    _$insert(_el$26, _$createComponent(ReportDocumentView, {
+      get document() {
+        return props.document;
+      },
+      get theme() {
+        return theme();
+      },
+      get width() {
+        return tableWidth();
+      }
+    }));
+    _$insertNode(_el$27, _el$28);
+    _$setProp(_el$27, "flexDirection", "row");
+    _$setProp(_el$27, "justifyContent", "flex-end");
+    _$setProp(_el$27, "paddingBottom", 1);
+    _$insertNode(_el$28, _el$29);
+    _$setProp(_el$28, "paddingLeft", 3);
+    _$setProp(_el$28, "paddingRight", 3);
+    _$setProp(_el$28, "onMouseUp", close);
+    _$insertNode(_el$29, _$createTextNode(`ok`));
     _$effect(_p$ => {
-      var _v$11 = props.api.theme.current.text,
-        _v$12 = props.api.theme.current.text,
-        _v$13 = props.api.theme.current.textMuted,
-        _v$14 = props.api.theme.current.textMuted;
-      _v$11 !== _p$.e && (_p$.e = _$setProp(_el$33, "fg", _v$11, _p$.e));
-      _v$12 !== _p$.t && (_p$.t = _$setProp(_el$35, "fg", _v$12, _p$.t));
-      _v$13 !== _p$.a && (_p$.a = _$setProp(_el$37, "fg", _v$13, _p$.a));
-      _v$14 !== _p$.o && (_p$.o = _$setProp(_el$38, "fg", _v$14, _p$.o));
+      var _v$10 = TextAttributes.BOLD,
+        _v$11 = theme().text.base,
+        _v$12 = theme().text.muted,
+        _v$13 = maxHeight(),
+        _v$14 = theme().background.action.primary.focused,
+        _v$15 = theme().text.action.primary.focused;
+      _v$10 !== _p$.e && (_p$.e = _$setProp(_el$22, "attributes", _v$10, _p$.e));
+      _v$11 !== _p$.t && (_p$.t = _$setProp(_el$22, "fg", _v$11, _p$.t));
+      _v$12 !== _p$.a && (_p$.a = _$setProp(_el$23, "fg", _v$12, _p$.a));
+      _v$13 !== _p$.o && (_p$.o = _$setProp(_el$26, "maxHeight", _v$13, _p$.o));
+      _v$14 !== _p$.i && (_p$.i = _$setProp(_el$28, "backgroundColor", _v$14, _p$.i));
+      _v$15 !== _p$.n && (_p$.n = _$setProp(_el$29, "fg", _v$15, _p$.n));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined,
+      n: undefined
     });
-    return _el$32;
+    return _el$19;
   })();
 }
-function getCommandPromptCopy(spec) {
-  switch (spec.id) {
-    case "tokens_between":
-      return {
-        title: "OpenCode Quota Token Range",
-        placeholder: "YYYY-MM-DD YYYY-MM-DD",
-        description: "Enter start and end dates, for example: 2026-01-01 2026-01-15"
-      };
-    default:
-      return {
-        title: spec.title,
-        placeholder: "Optional arguments",
-        description: "Leave blank to run with no arguments."
-      };
-  }
-}
-function replaceDialog(api, size, render) {
-  api.ui.dialog.replace(render);
-  // OpenCode dialog.replace() resets size to medium.
-  api.ui.dialog.setSize(size);
-}
-async function runQuotaDialogCommandAsync(api, command, commandDisplay, rawInput, state) {
-  const spec = QUOTA_DIALOG_COMMANDS.find(item => item.id === command);
-  const argumentsText = getTuiCommandArguments(rawInput);
-  const sessionID = getActiveTuiSessionID(api);
-  if (spec.acceptsArguments && rawInput === undefined) {
-    const prompt = getCommandPromptCopy(spec);
-    replaceDialog(api, "medium", () => _$createComponent(api.ui.DialogPrompt, {
+function showQuotaOutputDialog(context, output) {
+  return new Promise(resolve => {
+    context.ui.dialog.show(() => _$createComponent(QuotaOutputDialog, {
+      context: context,
       get title() {
-        return prompt.title;
+        return output.title;
       },
-      get placeholder() {
-        return prompt.placeholder;
+      get document() {
+        return output.document;
       },
-      description: () => (() => {
-        var _el$40 = _$createElement("text");
-        _$setProp(_el$40, "wrapMode", "word");
-        _$insert(_el$40, () => prompt.description);
-        _$effect(_$p => _$setProp(_el$40, "fg", api.theme.current.textMuted, _$p));
-        return _el$40;
-      })(),
-      onCancel: () => api.ui.dialog.clear(),
-      onConfirm: value => {
-        void runQuotaDialogCommandAsync(api, command, commandDisplay, {
-          arguments: value.trim()
-        }, state);
-      }
-    }));
-    return;
-  }
-  const destination = commandDisplay === "inline" && sessionID ? {
-    type: "inline",
-    sessionID
-  } : {
-    type: "dialog"
-  };
-  if (destination.type === "dialog") {
-    replaceDialog(api, spec.dialogSize, () => _$createComponent(CommandLoadingDialog, {
-      api: api,
-      get title() {
-        return spec.title;
+      get size() {
+        return output.dialogSize;
       }
-    }));
+    }), resolve);
+    context.ui.dialog.set({
+      size: output.dialogSize
+    });
+  });
+}
+
+/**
+ * Runs a quota command from the command palette or the prompt. It opens the dialog and
+ * posts no message. `typed` holds the arguments typed after the command name in the prompt.
+ */
+async function runQuotaCommand(context, command, sessionID, typed) {
+  const spec = QUOTA_DIALOG_COMMANDS.find(item => item.id === command);
+  let argumentsText = typed?.argumentsText;
+  // Only /tokens_between needs arguments; the palette asks for them.
+  if (command === "tokens_between" && !typed) {
+    const value = await context.ui.dialog.prompt({
+      title: spec.title,
+      placeholder: "YYYY-MM-DD YYYY-MM-DD"
+    });
+    if (value === undefined) return;
+    argumentsText = value.trim() || undefined;
   }
   try {
-    const result = await buildQuotaDialogCommandOutput({
+    const result = await quotaRpc(context).command({
       command,
       arguments: argumentsText,
-      client: createTuiQuotaClient(api),
-      roots: getTuiRuntimeRootHints(api),
-      sessionID,
-      resolveSessionMeta: id => getTuiSessionModelMeta(api, id),
-      lastSessionTokenError: state?.lastSessionTokenError,
-      setLastSessionTokenError: state ? error => {
-        state.lastSessionTokenError = error;
-      } : undefined,
-      log: async (message, extra) => {
-        await api.client.app.log({
-          body: {
-            service: "quota-toast",
-            level: "debug",
-            message,
-            extra
-          }
-        });
-      }
+      sessionID
+    }, quotaRpcOptions(context));
+    if (result.state === "noop") return;
+    await showQuotaOutputDialog(context, {
+      title: result.title,
+      document: result.document,
+      dialogSize: result.dialogSize
     });
-    if (result.state === "noop") {
-      if (destination.type === "dialog") api.ui.dialog.clear();
-      return;
-    }
-    if (destination.type === "inline") {
-      await api.client.session.prompt({
-        sessionID: destination.sessionID,
-        noReply: true,
-        parts: [{
-          type: "text",
-          text: result.output,
-          ignored: true
-        }]
-      });
-      return;
-    }
-    replaceDialog(api, result.dialogSize, () => _$createComponent(CommandOutputDialog, {
-      api: api,
-      get title() {
-        return result.title;
-      },
-      get output() {
-        return result.output;
-      }
-    }));
   } catch (error) {
-    replaceDialog(api, "large", () => _$createComponent(CommandErrorDialog, {
-      api: api,
-      get title() {
-        return spec.title;
-      },
-      error: error
-    }));
-    api.ui.toast({
+    context.ui.toast.show({
       variant: "error",
-      message: "OpenCode Quota command failed"
+      title: "OpenCode Quota",
+      message: sanitizeDisplayText(rpcErrorMessage(error))
     });
   }
 }
-function registerQuotaDialogCommands(api, gate) {
-  const commandState = {};
-  const dispose = api.keymap.registerLayer({
+
+/**
+ * Quota slash commands that reach the server (from Web or Desktop, queued in the TUI, or
+ * typed in "inline" mode) post the report into the chat as a pending inbox item. When a
+ * report arrives for the session on screen, tuiCommandDisplay decides what the TUI shows: "dialog" opens the report in the dialog and cancels the pending
+ * item, so no chat message remains; "inline" leaves the report in the chat.
+ * A command sent from Home creates its session, and OpenCode opens that session before the
+ * server runs the command, so its report also arrives for the session on screen.
+ * The TUI cannot tell which client typed the command, so in "dialog" mode it also removes a
+ * report that Web or Desktop requested for the same session while the TUI shows it.
+ */
+async function showPostedQuotaReport(context, event) {
+  const sessionID = getSessionID(event);
+  if (!sessionID || sessionID !== getRouteSessionID(context)) return;
+  const inboxID = event.data?.inboxID;
+  const item = event.data?.item;
+  if (typeof inboxID !== "string") return;
+  if (item?.type !== "user" || typeof item.payload?.text !== "string") return;
+  const report = readQuotaReportMetadata(item.payload.metadata);
+  if (!report) return;
+  const spec = QUOTA_DIALOG_COMMANDS.find(candidate => candidate.id === report.command);
+  if (!spec) return;
+  const config = await loadConfig(quotaClient(context), undefined, {
+    configRootDir: quotaRoots(context).configRoot
+  });
+  if (config.tuiCommandDisplay !== "dialog") return;
+  // Cancelling deletes the pending item before it becomes a stored message, the same
+  // request the TUI sends when the user deletes a pending prompt.
+  void context.client.session.inbox.cancel({
+    sessionID,
+    inboxID
+  }).catch(error => {
+    const message = error instanceof Error ? error.message : String(error);
+    console.warn(`[opencode-quota] failed to remove the quota report from the chat: ${message}`);
+  });
+  void showQuotaOutputDialog(context, {
+    title: report.title,
+    document: report.document,
+    dialogSize: spec.dialogSize
+  });
+}
+function getRouteSessionID(context) {
+  const route = context.ui.router.current();
+  return route.type === "session" ? route.sessionID : undefined;
+}
+function registerQuotaCommands(context) {
+  context.keymap.layer(() => ({
+    mode: "global",
     commands: QUOTA_DIALOG_COMMANDS.map(spec => ({
-      namespace: "palette",
-      name: `opencode-quota.${spec.id}`,
+      id: `quota.${spec.id}`,
       title: spec.title,
-      desc: spec.description,
-      category: "OpenCode Quota",
-      slashName: spec.slashName,
-      run(input) {
-        const state = gate.current();
-        if (state.status !== "active") return;
-        void runQuotaDialogCommandAsync(api, spec.id, state.registration.commandDisplay, input, commandState);
+      group: "OpenCode Quota",
+      // No slash entry: the server plugin registers the "/" commands, so each is listed once.
+      palette: true,
+      run: () => runQuotaCommand(context, spec.id, getRouteSessionID(context))
+    }))
+  }));
+}
+
+/**
+ * Runs typed quota slash commands in the TUI. On Enter, before OpenCode submits the prompt,
+ * a prompt that holds exactly a quota command is cleared and the command opens its dialog.
+ * So the report never shows in the chat, and on Home no session is created for it.
+ * Everything else, and every command in "inline" mode, goes on to OpenCode's submit, and
+ * the server command posts the report as before.
+ * The layer has no mode, so it is off while the "/" list or a dialog is open. tuiCommandDisplay
+ * must be known when Enter is pressed, so it is read at start and again after each typed
+ * quota command. Until the first read finishes, typed commands follow the default, "dialog".
+ */
+function registerTypedQuotaCommands(context) {
+  let commandDisplay;
+  const readCommandDisplay = () => {
+    void loadConfig(quotaClient(context), undefined, {
+      configRootDir: quotaRoots(context).configRoot
+    }).then(config => {
+      commandDisplay = config.tuiCommandDisplay;
+    }).catch(reportFailure);
+  };
+  readCommandDisplay();
+  context.keymap.layer(() => ({
+    // Above OpenCode's textarea layer, which submits the prompt on Enter.
+    priority: 1,
+    commands: [{
+      bind: "return",
+      // Synchronous on purpose: a returned promise counts as handled.
+      run: () => {
+        const editor = context.renderer.currentFocusedEditor;
+        const typed = editor ? parseQuotaSlashCommand(editor.plainText) : undefined;
+        if (!editor || !typed) return false;
+        const display = commandDisplay;
+        readCommandDisplay();
+        if (display === "inline") return false;
+        editor.clear();
+        void runQuotaCommand(context, typed.command, getRouteSessionID(context), typed);
       }
-    })),
-    bindings: []
-  });
-  api.lifecycle.onDispose(dispose);
+    }]
+  }));
 }
-function registerStableTuiSlots(api, current) {
-  api.slots.register({
-    order: SIDEBAR_ORDER,
-    slots: {
-      sidebar_content(_ctx, props) {
-        const state = current();
-        if (state.status !== "active" || !state.registration.sidebar.enabled) return null;
-        return _$createComponent(SidebarContentView, {
-          api: api,
-          get sessionID() {
-            return props.session_id;
+function SidebarQuotaView(props) {
+  const [open, setOpen] = createSignal(true);
+  const [quota, setQuota] = createSignal(undefined);
+  const lines = () => quota()?.message.split("\n") ?? [];
+  const expandable = () => lines().length > 2;
+  const view = createViewRefresh(() => getQuotaMessage(props.context, props.sessionID, "sidebar"), setQuota);
+  view.refresh();
+  const interval = setInterval(view.refresh, REFRESH_INTERVAL_MS);
+  const unsubscribe = props.context.data.on("session.step.ended", event => {
+    if (getSessionID(event) === props.sessionID) view.refresh();
+  });
+  onCleanup(() => {
+    view.dispose();
+    clearInterval(interval);
+    unsubscribe();
+  });
+  return (() => {
+    var _el$32 = _$createElement("box"),
+      _el$33 = _$createElement("box"),
+      _el$35 = _$createElement("text"),
+      _el$36 = _$createElement("b");
+    _$insertNode(_el$32, _el$33);
+    _$setProp(_el$32, "flexDirection", "column");
+    _$insertNode(_el$33, _el$35);
+    _$setProp(_el$33, "flexDirection", "row");
+    _$setProp(_el$33, "gap", 1);
+    _$setProp(_el$33, "onMouseDown", () => expandable() && setOpen(value => !value));
+    _$insert(_el$33, _$createComponent(Show, {
+      get when() {
+        return expandable();
+      },
+      get children() {
+        var _el$34 = _$createElement("text");
+        _$insert(_el$34, () => open() ? "▼" : "▶");
+        _$effect(_$p => _$setProp(_el$34, "fg", props.context.theme.text.base, _$p));
+        return _el$34;
+      }
+    }), _el$35);
+    _$insertNode(_el$35, _el$36);
+    _$insertNode(_el$36, _$createTextNode(`Quota`));
+    _$insert(_el$35, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(expandable() && !open()))() && quota()?.activeProviderCount;
+      },
+      children: count => ` (${count()} active)`
+    }), null);
+    _$insert(_el$32, _$createComponent(Show, {
+      get when() {
+        return quota();
+      },
+      get fallback() {
+        return (() => {
+          var _el$38 = _$createElement("text");
+          _$insertNode(_el$38, _$createTextNode(`No quota data available`));
+          _$effect(_$p => _$setProp(_el$38, "fg", props.context.theme.text.muted, _$p));
+          return _el$38;
+        })();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return !expandable() || open();
           },
-          get initialLoads() {
-            return state.initialLoads;
+          get children() {
+            return lines().map(line =>
+            // Provider headers such as "[Copilot] (individual)" are bold, like section titles.
+            line.startsWith("[") ? (() => {
+              var _el$40 = _$createElement("text"),
+                _el$41 = _$createElement("b");
+              _$insertNode(_el$40, _el$41);
+              _$setProp(_el$40, "wrapMode", "none");
+              _$insert(_el$41, line);
+              _$effect(_$p => _$setProp(_el$40, "fg", props.context.theme.text.base, _$p));
+              return _el$40;
+            })() : (() => {
+              var _el$42 = _$createElement("text");
+              _$setProp(_el$42, "wrapMode", "none");
+              _$insert(_el$42, line || " ");
+              _$effect(_$p => _$setProp(_el$42, "fg", props.context.theme.text.muted, _$p));
+              return _el$42;
+            })());
           }
         });
       }
-    }
-  });
-  api.slots.register({
-    order: COMPACT_ORDER,
-    slots: {
-      session_prompt(_ctx, props) {
-        const state = current();
-        if (state.status !== "active") return null;
-        if (state.registration.promptBar.enabled) {
-          return _$createComponent(SessionQuotaPromptBar, {
-            api: api,
-            get sessionID() {
-              return props.session_id;
-            },
-            get initialLoads() {
-              return state.initialLoads;
-            },
-            get visible() {
-              return props.visible;
-            },
-            get disabled() {
-              return props.disabled;
-            },
-            get onSubmit() {
-              return props.on_submit;
-            },
-            get promptRef() {
-              return props.ref;
+    }), null);
+    _$effect(_$p => _$setProp(_el$35, "fg", props.context.theme.text.base, _$p));
+    return _el$32;
+  })();
+}
+const plugin = Plugin.define({
+  id: "@slkiser/opencode-quota",
+  setup(context) {
+    const api = context;
+    let disposeEvents;
+    const questionToolCalls = new Set();
+    const disposeApp = api.ui.slot({
+      append: "app",
+      render: () => {
+        // OpenCode mounts this slot again when it reconnects to its server, which can also
+        // happen right after it starts. Leaving a mount drops its keymap layers and event
+        // listeners, so each mount replaces the listeners and registers everything again.
+        disposeEvents?.();
+        registerQuotaCommands(api);
+        registerTypedQuotaCommands(api);
+        const trigger = (event, reason) => {
+          const sessionID = getSessionID(event);
+          if (!sessionID) return;
+          // As in v4, subagent (child) sessions never show quota toasts.
+          if (api.data.session.get(sessionID)?.parentID) return;
+          void getQuotaMessage(api, sessionID, reason).then(quota => {
+            if (!quota) return;
+            api.ui.toast.show({
+              variant: "info",
+              title: "OpenCode Quota",
+              message: quota.message,
+              duration: quota.duration
+            });
+            if (quota.resetNotification) {
+              api.ui.toast.show({
+                variant: "success",
+                title: "Quota available",
+                message: sanitizeDisplayText(quota.resetNotification),
+                duration: quota.duration
+              });
             }
-          });
-        }
-        if (!state.registration.compact.sessionPrompt) return null;
-        return _$createComponent(SessionPromptWithCompactStatus, {
-          api: api,
-          get sessionID() {
-            return props.session_id;
-          },
-          get initialLoads() {
-            return state.initialLoads;
-          },
-          get visible() {
-            return props.visible;
-          },
-          get disabled() {
-            return props.disabled;
-          },
-          get onSubmit() {
-            return props.on_submit;
-          },
-          get promptRef() {
-            return props.ref;
+          }).catch(reportFailure);
+        };
+        const onExecutionSucceeded = api.data.on("session.execution.succeeded", event => trigger(event, "idle"));
+        const onCompacted = api.data.on("session.compaction.ended", event => trigger(event, "compacted"));
+        const onQuestionStarted = api.data.on("session.tool.input.started", event => {
+          const id = event.data?.id;
+          if (event.data?.name === "question" && typeof id === "string") {
+            questionToolCalls.add(id);
           }
         });
-      },
-      home_bottom() {
-        const state = current();
-        if (state.status !== "active" || !state.registration.homeBottom) return null;
-        return _$createComponent(HomeBottomView, {
-          api: api,
-          get compactHomeBottomEnabled() {
-            return state.registration.compact.homeBottom;
-          },
-          get initialLoads() {
-            return state.initialLoads;
-          }
+        const onQuestionSucceeded = api.data.on("session.tool.success", event => {
+          const id = event.data?.id;
+          if (typeof id === "string" && questionToolCalls.delete(id)) trigger(event, "question");
         });
+        const onQuestionFailed = api.data.on("session.tool.failed", event => {
+          const id = event.data?.id;
+          if (typeof id === "string") questionToolCalls.delete(id);
+        });
+        const onInboxEnqueued = api.data.on("session.inbox.enqueued", event => {
+          void showPostedQuotaReport(api, event).catch(reportFailure);
+        });
+        disposeEvents = () => {
+          onExecutionSucceeded();
+          onCompacted();
+          onQuestionStarted();
+          onQuestionSucceeded();
+          onQuestionFailed();
+          onInboxEnqueued();
+          questionToolCalls.clear();
+        };
+        return null;
       }
-    }
-  });
-}
-async function initializeTuiRegistration(api, gate) {
-  let initialRuntimeSeed;
-  let surfaceRegistration;
-  try {
-    surfaceRegistration = resolveTuiSurfaceRegistration(api, {
-      captureInitialRuntime(seed) {
-        initialRuntimeSeed = seed;
-      }
-    }).then(registration => ({
-      registration,
-      initialRuntimeSeed
-    })).catch(() => ({
-      registration: FALLBACK_SURFACE_REGISTRATION
-    }));
-  } catch {
-    surfaceRegistration = Promise.resolve({
-      registration: FALLBACK_SURFACE_REGISTRATION
     });
+    const disposeSidebar = api.ui.slot({
+      append: "sidebar.content",
+      render: props => _$createComponent(SidebarQuotaView, {
+        context: api,
+        get sessionID() {
+          return props.sessionID;
+        }
+      })
+    });
+    const disposePrompt = api.ui.slot({
+      append: "prompt.footer",
+      render: props => _$createComponent(QuotaFooter, {
+        context: api,
+        get sessionID() {
+          return props.sessionID;
+        },
+        surface: "prompt"
+      })
+    });
+    const disposeHome = api.ui.slot({
+      append: "home.footer.status",
+      render: () => _$createComponent(QuotaFooter, {
+        context: api,
+        surface: "home"
+      })
+    });
+    return () => {
+      disposeEvents?.();
+      disposeApp();
+      disposeSidebar();
+      disposePrompt();
+      disposeHome();
+    };
   }
-  registerQuotaDialogCommands(api, gate);
-  void surfaceRegistration.then(({
-    registration,
-    initialRuntimeSeed
-  }) => gate.activate(registration, initialRuntimeSeed ? createTuiInitialLoadCoordinator(initialRuntimeSeed) : undefined));
-  registerStableTuiSlots(api, gate.current);
-}
-const tui = async api => {
-  const registrationGate = createTuiRegistrationGate();
-  api.lifecycle.onDispose(() => {
-    registrationGate.dispose();
-    disposeQuotaTelemetryOwner(createTuiQuotaClient(api));
-  });
-  void initializeTuiRegistration(api, registrationGate).catch(() => {});
-};
-const pluginModule = {
-  id,
-  tui
-};
-export default pluginModule;
+});
+export default plugin;