@leo000001/opencode-quota-sidebar 2.0.26 → 3.0.0

package/README.md

@@ -3,21 +3,21 @@
 [![npm version](https://img.shields.io/npm/v/@leo000001/opencode-quota-sidebar.svg)](https://www.npmjs.com/package/@leo000001/opencode-quota-sidebar)
 [![license](https://img.shields.io/npm/l/@leo000001/opencode-quota-sidebar.svg)](https://github.com/xihuai18/opencode-quota-sidebar/blob/main/LICENSE)
 
-OpenCode plugin: show token usage and subscription quota in the session sidebar title.
+OpenCode plugin: show token usage and subscription quota in TUI sidebar panels and compact shared session titles.
 
 ![Example sidebar title with usage and quota](./assets/OpenCode-Quota-Sidebar.png)
 
 ## Install
 
-If you use the OpenCode installer flow, the package manifest now advertises both `server` and `tui` targets.
+The package manifest advertises both `server` and `tui` targets, but OpenCode loads those targets from different config files at runtime.
 
-If you configure files manually, add the server entry to `opencode.json` and the TUI entry to `tui.json`:
+If you configure the plugin manually, you must add the server entry to `opencode.json` and the TUI entry to `tui.json`:
 
 `opencode.json`
 
 ```json
 {
-  "plugin": ["@leo000001/opencode-quota-sidebar@2.0.23"]
+  "plugin": ["@leo000001/opencode-quota-sidebar@2.0.26"]
 }
 ```
 
@@ -25,11 +25,13 @@ If you configure files manually, add the server entry to `opencode.json` and the
 
 ```json
 {
-  "plugin": ["@leo000001/opencode-quota-sidebar@2.0.23"]
+  "plugin": ["@leo000001/opencode-quota-sidebar@2.0.26"]
 }
 ```
 
 Note for OpenCode `>=1.2.15`: TUI settings and TUI plugins live in `tui.json`, while server plugins stay in `opencode.json`.
+
+If you use an installer flow that reads `oc-plugin` targets and patches config for you, it can populate both files automatically. Simply having the package installed in `node_modules` or listed only in `opencode.json` is not enough for the TUI runtime to load `./tui`.
 This plugin also accepts both `config.providers` and older `provider.list` runtime shapes when discovering provider options.
 
 If you prefer automatic upgrades, you can still use `@latest`, but pinning an exact version makes behavior easier to reproduce when debugging.
@@ -55,14 +57,14 @@ Add the built server file to your `opencode.json` and the TUI file to your `tui.
 
 ```json
 {
-  "plugin": ["file:///ABSOLUTE/PATH/opencode-quota-sidebar/dist/tui.js"]
+  "plugin": ["file:///ABSOLUTE/PATH/opencode-quota-sidebar/dist/tui.tsx"]
 }
 ```
 
 On Windows, use forward slashes, for example:
 
 - `file:///D:/Lab/opencode-quota-sidebar/dist/index.js`
-- `file:///D:/Lab/opencode-quota-sidebar/dist/tui.js`
+- `file:///D:/Lab/opencode-quota-sidebar/dist/tui.tsx`
 
 ## Supported quota providers
 
@@ -82,11 +84,11 @@ Want to add support for another provider (Google Antigravity, Zhipu AI, Firmware
 
 - TUI sidebar can render a dedicated block layout instead of stuffing telemetry into the shared title:
   - `TITLE`: clean base session title
-  - `CONTEXT`: one compact line such as `242k tok 24% ctx`
   - `USAGE`: compact request/input/output/cache lines such as `R184 I189k O53.2k`, `CR31.4k CW3.2k Cd66%`, `Est $12.8`
   - `QUOTA`: one compact provider group per provider, with indented continuation lines for multi-window quotas or balances
-  - while active, the TUI plugin temporarily deactivates the built-in `internal:sidebar-context` block so the custom one-line context row does not duplicate it
+  - while active, the TUI plugin temporarily deactivates the built-in `internal:sidebar-context` block so the custom panel does not duplicate it
 - Shared `session.title` now stays compact in `auto` mode. Desktop, Web UI / `serve`, and TUI all keep the shared title on a compact single line such as `<base> | OAI 5h80 R16:20 W70 R04-03 | RC D88.9/60 B260 | Cd66% | Est$0.12`.
+- TUI panel data is read from persisted day-chunk session state (`usage` + `sidebarPanel`) so entering or resuming a session can render from persistence first; compact-title parsing remains only a defensive fallback.
 - `sidebar.titleMode=multiline` is still available as a legacy fallback when you explicitly want the old multiline title decoration path.
 - `sidebar.titleMode` can force `auto`, `multiline`, or `compact` if the heuristic does not match your workflow.
 - Multi-client caveat: the shared title is still one `session.title` for every client. The new TUI sidebar blocks avoid polluting that shared title, but Desktop/Web still see the compact shared title rather than a sidebar panel.
@@ -97,7 +99,7 @@ Want to add support for another provider (Google Antigravity, Zhipu AI, Firmware
 - Quota snapshots are de-duplicated before rendering to avoid repeated provider lines
 - Custom tools:
   - `quota_summary` — generate usage report for session/day/week/month (full markdown report + toast). The markdown report and toast keep the full human-readable wording; they do not switch to compact sidebar tokens.
-- `quota_show` — toggle sidebar title display on/off (state persists across sessions)
+- `quota_show` — toggle shared title decoration on/off (state persists across sessions)
 - After startup, titles are restored immediately when persisted display mode is OFF; when persisted display mode is ON, touched titles refresh on startup and the rest update on the next relevant session/message event or when `quota_show` is toggled
 - Quota connectors:
   - OpenAI Codex OAuth (`/backend-api/wham/usage`)
@@ -142,6 +144,7 @@ The plugin stores lightweight global state and date-partitioned session chunks.
   - `parentID` (when the session is a subagent child session)
   - `expiryToastShown` (session-level dedupe for automatic expiry reminders)
   - cached usage summary used by `quota_summary`, including session-level and provider-level `cacheBuckets` for cached-ratio reporting and legacy cache classification
+  - `sidebarPanel` cache used by the TUI sidebar plugin (`version`, cached usage, compact quota snapshots`) so `TITLE / USAGE / QUOTA` can render from persisted structure on session open/resume
   - incremental aggregation cursor
 
 Notes on cache bucket persistence:
@@ -343,13 +346,47 @@ Other defaults:
 }
 ```
 
+### Common minimal configs
+
+Keep the shared title compact and let TUI render the structured panel:
+
+```json
+{
+  "sidebar": {
+    "enabled": true,
+    "titleMode": "auto",
+    "showCost": true,
+    "showQuota": true,
+    "includeChildren": true
+  }
+}
+```
+
+Enable XYAI Vibe quota with account login:
+
+```json
+{
+  "quota": {
+    "providers": {
+      "xyai-vibe": {
+        "enabled": true,
+        "login": {
+          "username": "your-account",
+          "password": "your-password"
+        }
+      }
+    }
+  }
+}
+```
+
 ### Notes
 
 - `sidebar.showCost` controls API-cost visibility in the TUI `USAGE` block, the compact shared title, `quota_summary` markdown report, and toast message.
 - `quota_summary` follows the same reset compaction rules for short windows in its subscription section (`5h` / `1d` / `Daily` show time, long windows show date, RightCode `Exp` stays date-only).
 - `sidebar.width` is measured in terminal cells. CJK/emoji truncation is best-effort to avoid sidebar overflow.
 - `sidebar.titleMode` defaults to `auto`: the shared `session.title` stays compact for Desktop, Web UI / `serve`, and TUI alike. The rich TUI layout comes from the dedicated TUI plugin slots instead of a multiline shared title. Use `multiline` only if you explicitly want the legacy decorated-title path, or `compact` to force compact titles everywhere.
-- The TUI plugin renders `TITLE`, `CONTEXT`, `USAGE`, and `QUOTA` blocks in the sidebar and temporarily disables the built-in `internal:sidebar-context` block while it is active.
+- The TUI plugin renders `TITLE`, `USAGE`, and `QUOTA` blocks in the sidebar and temporarily disables the built-in `internal:sidebar-context` block while it is active.
 - The shared `session.title` is still one string per session for all clients. TUI sidebar blocks avoid polluting that title, but Desktop/Web still see the compact shared title rather than a TUI panel.
 - `sidebar.multilineTitle` is kept for backward compatibility, but `sidebar.titleMode` now controls the active policy.
 - `sidebar.wrapQuotaLines` controls quota line wrapping and continuation indentation (default: `true`).
@@ -404,8 +441,6 @@ Typical layout:
 ```text
 TITLE
   Fix quota adapter matching
-CONTEXT
-  242k tok 24% ctx
 USAGE
   R184 I189k O53.2k
   CR31.4k CW3.2k Cd66%
@@ -534,7 +569,7 @@ Shorthand rules:
 - `B260` / `B￥10.2` = balance
 - `Cd66%` = cached ratio (`cache.read / (input + cache.read)`)
 - `Est$0.12` = equivalent API cost estimate
-- Compact shared titles omit `R/I/O/CR/CW`; the dedicated TUI sidebar keeps the richer `CONTEXT / USAGE / QUOTA` breakdown.
+- Compact shared titles omit `R/I/O/CR/CW`; the dedicated TUI sidebar keeps the richer `TITLE / USAGE / QUOTA` breakdown.
 - Order is `base | quota... | usage-summary` for compact shared titles.
 
 `quota_summary` also supports an optional `includeChildren` flag (only effective for `period=session`) to override the config per call. For `day`/`week`/`month` periods, children are never merged — each session is counted independently.

package/dist/format.d.ts

@@ -1,19 +1,13 @@
 import type { QuotaSidebarConfig, QuotaSnapshot } from './types.js';
 import { type UsageSummary } from './usage.js';
 export type TitleView = 'multiline' | 'compact';
-export declare const TUI_ACTIVE_MS: number;
 /**
  * Truncate `value` to at most `width` terminal cells.
  * Keep plain text only (no ANSI) to avoid renderer corruption.
  */
 export declare function fitLine(value: string, width: number): string;
-export declare function isDesktopClient(): boolean;
 export declare function resolveTitleView(opts: {
     config: QuotaSidebarConfig;
-    sessionID?: string;
-    tuiSessionID?: string;
-    tuiActiveAt?: number;
-    now?: number;
 }): TitleView;
 export declare function selectDesktopCompactProviderIDs(usage: UsageSummary, config: QuotaSidebarConfig, now?: number): string[];
 /**
@@ -29,7 +23,9 @@ export declare function selectDesktopCompactProviderIDs(usage: UsageSummary, con
  */
 export declare function renderSidebarTitle(baseTitle: string, usage: UsageSummary, quotas: QuotaSnapshot[], config: QuotaSidebarConfig, view?: TitleView): string;
 export declare function renderSidebarContextLine(tokens: number, percent: number | undefined, width: number): string;
-export declare function renderSidebarUsageLines(usage: UsageSummary, config: QuotaSidebarConfig): string[];
+export declare function renderSidebarUsageLines(usage: UsageSummary, config: QuotaSidebarConfig, options?: {
+    showCost?: boolean;
+}): string[];
 export declare function renderSidebarQuotaLines(quotas: QuotaSnapshot[], config: QuotaSidebarConfig): string[];
 export declare function renderMarkdownReport(period: string, usage: UsageSummary, quotas: QuotaSnapshot[], options?: {
     showCost?: boolean;

package/dist/format.js

@@ -1,7 +1,6 @@
 import { getCacheCoverageMetrics, getProviderCacheCoverageMetrics, } from './usage.js';
 import { canonicalProviderID, collapseQuotaSnapshots, displayShortLabel, quotaDisplayLabel, } from './quota_render.js';
 import { stripAnsi } from './title.js';
-export const TUI_ACTIVE_MS = 15 * 60_000;
 /** M6 fix: handle negative, NaN, Infinity gracefully. */
 function shortNumber(value, decimals = 1) {
     if (!Number.isFinite(value) || value < 0)
@@ -169,16 +168,12 @@ function formatRequestsLabel(value, short = false) {
     const count = shortNumber(value, 1);
     return short ? `Req ${count}` : `Requests ${count}`;
 }
-export function isDesktopClient() {
-    return process.env.OPENCODE_CLIENT === 'desktop';
-}
 export function resolveTitleView(opts) {
+    void opts;
     if (opts.config.sidebar.titleMode === 'compact')
         return 'compact';
     if (opts.config.sidebar.titleMode === 'multiline')
         return 'multiline';
-    if (isDesktopClient())
-        return 'compact';
     return 'compact';
 }
 function desktopCompactSettings(config) {
@@ -592,12 +587,12 @@ export function renderSidebarContextLine(tokens, percent, width) {
     }
     return fitLine(parts.join(' '), width);
 }
-export function renderSidebarUsageLines(usage, config) {
+export function renderSidebarUsageLines(usage, config, options) {
     const width = Math.max(8, Math.floor(config.sidebar.width || 36));
     const cacheMetrics = getCacheCoverageMetrics(usage);
     return usageDetailLines(usage, cacheMetrics, {
         width,
-        showCost: config.sidebar.showCost,
+        showCost: options?.showCost ?? config.sidebar.showCost,
         numberToken: panelNumber,
         costToken: (value) => `Est ${formatApiCostValue(value)}`,
         cacheReadFirst: true,

package/dist/index.js

@@ -1,4 +1,4 @@
-import { renderMarkdownReport, resolveTitleView, renderSidebarTitle, renderToastMessage, TUI_ACTIVE_MS, } from './format.js';
+import { renderMarkdownReport, resolveTitleView, renderSidebarTitle, renderToastMessage, } from './format.js';
 import { createQuotaRuntime } from './quota.js';
 import { authFilePath, dateKeyFromTimestamp, deleteSessionFromDayChunk, evictOldSessions, loadConfig, loadState, normalizeTimestampMs, quotaConfigPaths, resolveOpencodeDataDir, saveState, stateFilePath, } from './storage.js';
 import { debug, swallow } from './helpers.js';
@@ -116,23 +116,6 @@ export async function QuotaSidebarPlugin(input) {
     });
     const summarizeSessionUsageForDisplay = usageService.summarizeSessionUsageForDisplay;
     const summarizeForTool = usageService.summarizeForTool;
-    let tuiSessionID;
-    let tuiActiveAt = 0;
-    let tuiTimer;
-    const armTuiTimer = () => {
-        if (tuiTimer)
-            clearTimeout(tuiTimer);
-        if (!tuiSessionID)
-            return;
-        tuiTimer = setTimeout(() => {
-            const id = tuiSessionID;
-            tuiActiveAt = 0;
-            tuiTimer = undefined;
-            if (id)
-                scheduleTitleRefresh(id, 0);
-        }, TUI_ACTIVE_MS);
-        tuiTimer.unref?.();
-    };
     // title apply / refresh lifecycle
     let scheduleTitleRefresh = (sessionID, delay = 250) => {
         void sessionID;
@@ -168,7 +151,7 @@ export async function QuotaSidebarPlugin(input) {
         markDirty,
         scheduleSave,
         renderSidebarTitle,
-        getTitleView: (sessionID) => resolveTitleView({ config, sessionID, tuiSessionID, tuiActiveAt }),
+        getTitleView: () => resolveTitleView({ config }),
         getQuotaSnapshots,
         summarizeSessionUsageForDisplay,
         scheduleParentRefreshIfSafe,
@@ -208,8 +191,6 @@ export async function QuotaSidebarPlugin(input) {
             .catch(swallow('startup:refreshAllTouchedTitles'));
     }
     const shutdown = async () => {
-        if (tuiTimer)
-            clearTimeout(tuiTimer);
         await Promise.race([
             startupTitleWork,
             new Promise((resolve) => setTimeout(resolve, 5_000)),
@@ -341,14 +322,6 @@ export async function QuotaSidebarPlugin(input) {
         },
         onSessionDeleted: async (session) => {
             await flushSave().catch(swallow('onSessionDeleted:flushSave'));
-            if (tuiSessionID === session.id) {
-                tuiSessionID = undefined;
-                tuiActiveAt = 0;
-                if (tuiTimer) {
-                    clearTimeout(tuiTimer);
-                    tuiTimer = undefined;
-                }
-            }
             descendantsResolver.invalidateForAncestors(session.parentID);
             descendantsResolver.invalidateForAncestors(session.id);
             usageService.forgetSession(session.id);
@@ -371,20 +344,9 @@ export async function QuotaSidebarPlugin(input) {
             }
         },
         onTuiActivity: async () => {
-            const stale = Boolean(tuiSessionID) && Date.now() - tuiActiveAt > TUI_ACTIVE_MS;
-            tuiActiveAt = Date.now();
-            armTuiTimer();
-            if (stale && tuiSessionID) {
-                titleRefresh.schedule(tuiSessionID, 0);
-            }
+            return;
         },
         onTuiSessionSelect: async (sessionID) => {
-            const prev = tuiSessionID;
-            tuiSessionID = sessionID;
-            armTuiTimer();
-            if (prev && prev !== sessionID) {
-                titleRefresh.schedule(prev, 0);
-            }
             titleRefresh.schedule(sessionID, 0);
         },
         onMessageRemoved: async (info) => {

package/dist/storage_chunks.js

@@ -48,14 +48,21 @@ class ChunkCache {
     key(rootPath, dateKey) {
         return `${path.resolve(rootPath)}::${dateKey}`;
     }
-    get(rootPath, dateKey) {
-        const entry = this.cache.get(this.key(rootPath, dateKey));
+    get(rootPath, dateKey, stamp) {
+        const key = this.key(rootPath, dateKey);
+        const entry = this.cache.get(key);
         if (!entry)
             return undefined;
+        if (!stamp ||
+            entry.stamp.mtimeMs !== stamp.mtimeMs ||
+            entry.stamp.size !== stamp.size) {
+            this.cache.delete(key);
+            return undefined;
+        }
         entry.accessedAt = Date.now();
         return entry.sessions;
     }
-    set(rootPath, dateKey, sessions) {
+    set(rootPath, dateKey, sessions, stamp) {
         if (this.cache.size >= this.maxSize) {
             // Evict least recently accessed
             let oldestKey;
@@ -72,6 +79,7 @@ class ChunkCache {
         this.cache.set(this.key(rootPath, dateKey), {
             sessions,
             accessedAt: Date.now(),
+            stamp,
         });
     }
     invalidate(rootPath, dateKey) {
@@ -82,15 +90,21 @@ const chunkCache = new ChunkCache();
 export async function readDayChunk(rootPath, dateKey) {
     if (!isDateKey(dateKey))
         return {};
-    const cached = chunkCache.get(rootPath, dateKey);
-    if (cached)
-        return cached;
     const filePath = chunkFilePath(rootPath, dateKey);
     const stat = await fs.lstat(filePath).catch(() => undefined);
     if (stat?.isSymbolicLink()) {
+        chunkCache.invalidate(rootPath, dateKey);
         debug(`refusing to read symlink chunk: ${filePath}`);
         return {};
     }
+    if (!stat?.isFile()) {
+        chunkCache.invalidate(rootPath, dateKey);
+        return {};
+    }
+    const stamp = { mtimeMs: stat.mtimeMs, size: stat.size };
+    const cached = chunkCache.get(rootPath, dateKey, stamp);
+    if (cached)
+        return cached;
     const parsed = await fs
         .readFile(filePath, 'utf8')
         .then((value) => JSON.parse(value))
@@ -107,7 +121,7 @@ export async function readDayChunk(rootPath, dateKey) {
         acc[sessionID] = parsedSession;
         return acc;
     }, {});
-    chunkCache.set(rootPath, dateKey, sessions);
+    chunkCache.set(rootPath, dateKey, sessions, stamp);
     return sessions;
 }
 /**

package/dist/storage_parse.js

@@ -182,10 +182,14 @@ function parseQuotaSnapshots(value) {
 function parseSidebarPanel(value) {
     if (!isRecord(value))
         return undefined;
+    const version = asNumber(value.version, 1);
+    if (version !== 1)
+        return undefined;
     const updatedAt = asNumber(value.updatedAt, 0);
     if (!updatedAt)
         return undefined;
     return {
+        version: 1,
         updatedAt,
         usage: parseCachedUsage(value.usage),
         quotas: parseQuotaSnapshots(value.quotas),

package/dist/title_apply.js

@@ -2,6 +2,7 @@ import { canonicalizeTitle, canonicalizeTitleForCompare, looksDecorated, normali
 import { toCachedSessionUsage } from './usage.js';
 import { swallow, debug, mapConcurrent } from './helpers.js';
 import { resolveTitleView, selectDesktopCompactProviderIDs, } from './format.js';
+import { collapseQuotaSnapshots } from './quota_render.js';
 export function createTitleApplicator(deps) {
     const pendingAppliedTitle = new Map();
     const recentRestore = new Map();
@@ -15,7 +16,7 @@ export function createTitleApplicator(deps) {
         windows: quota.windows?.map((win) => ({ ...win })),
     }));
     const applyTitle = async (sessionID) => {
-        if (!deps.config.sidebar.enabled || !deps.state.titleEnabled)
+        if (!deps.config.sidebar.enabled)
             return false;
         let stateMutated = false;
         const session = await deps.client.session
@@ -80,7 +81,7 @@ export function createTitleApplicator(deps) {
         }
         const usage = await deps.summarizeSessionUsageForDisplay(sessionID, deps.config.sidebar.includeChildren);
         const view = deps.getTitleView?.(sessionID) ??
-            resolveTitleView({ config: deps.config, sessionID });
+            resolveTitleView({ config: deps.config });
         const quotaProviders = Array.from(new Set(view === 'compact'
             ? selectDesktopCompactProviderIDs(usage, deps.config)
             : Object.keys(usage.providers)));
@@ -88,14 +89,21 @@ export function createTitleApplicator(deps) {
             ? await deps.getQuotaSnapshots(quotaProviders)
             : [];
         sessionState.sidebarPanel = {
+            version: 1,
             updatedAt: Date.now(),
             usage: toCachedSessionUsage(usage),
-            quotas: cloneQuotas(quotas),
+            quotas: cloneQuotas(collapseQuotaSnapshots(quotas)),
         };
         stateMutated = true;
-        const nextTitle = deps.renderSidebarTitle(sessionState.baseTitle, usage, quotas, deps.config, view);
-        if (!deps.config.sidebar.enabled || !deps.state.titleEnabled)
+        if (!deps.state.titleEnabled) {
+            if (stateMutated) {
+                deps.markDirty(deps.state.sessionDateMap[sessionID]);
+            }
+            deps.scheduleSave();
+            deps.scheduleParentRefreshIfSafe(sessionID, sessionState.parentID);
             return false;
+        }
+        const nextTitle = deps.renderSidebarTitle(sessionState.baseTitle, usage, quotas, deps.config, view);
         if (canonicalizeTitleForCompare(nextTitle) ===
             canonicalizeTitleForCompare(session.data.title)) {
             if (looksDecorated(session.data.title)) {

package/dist/tui.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @opentui/solid */
 import type { TuiPluginModule } from '@opencode-ai/plugin/tui';
 declare const plugin: TuiPluginModule & {
     id: string;

package/dist/tui.tsx

@@ -0,0 +1,363 @@
+/** @jsxImportSource @opentui/solid */
+import type {
+  TuiPlugin,
+  TuiPluginApi,
+  TuiPluginModule,
+} from '@opencode-ai/plugin/tui'
+import { createMemo, createSignal, For, onCleanup, Show } from 'solid-js'
+
+import {
+  fitLine,
+  renderSidebarQuotaLines,
+  renderSidebarUsageLines,
+} from './format.js'
+import {
+  loadConfig,
+  loadState,
+  quotaConfigPaths,
+  resolveOpencodeDataDir,
+  stateFilePath,
+} from './storage.js'
+import { looksDecorated, normalizeBaseTitle } from './title.js'
+import type { QuotaSidebarConfig } from './types.js'
+import { fromCachedSessionUsage, summarizeMessages } from './usage.js'
+
+const id = 'leo.quota-sidebar'
+const INTERNAL_CONTEXT_PLUGIN_ID = 'internal:sidebar-context'
+const SECTION_INDENT = 2
+const DEFAULT_WIDTH = 36
+
+type SidebarPanelData = {
+  enabled: boolean
+  width: number
+  usageLines: string[]
+  quotaLines: string[]
+  compactTitle?: string
+}
+
+const latestCompactTitles = new Map<string, string>()
+const [compactTitleVersion, setCompactTitleVersion] = createSignal(0)
+
+function directoryPath(api: TuiPluginApi) {
+  return api.state.path.directory || process.cwd()
+}
+
+function worktreePath(api: TuiPluginApi) {
+  return api.state.path.worktree || directoryPath(api)
+}
+
+function panelConfig(config: QuotaSidebarConfig): QuotaSidebarConfig {
+  return {
+    ...config,
+    sidebar: {
+      ...config.sidebar,
+      width: Math.max(8, config.sidebar.width - SECTION_INDENT),
+    },
+  }
+}
+
+function resolveCompactTitle(sessionID: string, persistedTitle?: string) {
+  const liveTitle = latestCompactTitles.get(sessionID)
+  if (liveTitle && looksDecorated(liveTitle)) return liveTitle
+  if (persistedTitle && looksDecorated(persistedTitle)) return persistedTitle
+  return liveTitle || persistedTitle
+}
+
+async function loadSidebarPanel(
+  api: TuiPluginApi,
+  sessionID: string,
+): Promise<SidebarPanelData> {
+  const statePath = stateFilePath(resolveOpencodeDataDir())
+  const config = await loadConfig(
+    quotaConfigPaths(worktreePath(api), directoryPath(api)),
+  )
+  // Session payload lives in day chunks that the server updates from a
+  // separate process, so TUI should re-read persisted state instead of keeping
+  // an extra full-state cache here.
+  const state = await loadState(statePath)
+  const session = state.sessions[sessionID]
+  const enabled = config.sidebar.enabled
+  const width = Math.max(8, config.sidebar.width - SECTION_INDENT)
+  const liveEntries = api.state.session.messages(sessionID).map((info) => ({
+    info,
+  })) as Parameters<typeof summarizeMessages>[0]
+
+  const liveUsage = summarizeMessages(liveEntries, 0, 1)
+  const cachedUsage = session?.sidebarPanel?.usage || session?.usage
+  const usage = cachedUsage
+    ? fromCachedSessionUsage(cachedUsage)
+    : liveUsage.assistantMessages > 0
+      ? liveUsage
+      : undefined
+  const compactTitle = resolveCompactTitle(sessionID, session?.lastAppliedTitle)
+
+  if (!enabled) {
+    return {
+      enabled,
+      width,
+      usageLines: [],
+      quotaLines: [],
+      compactTitle: session?.lastAppliedTitle,
+    }
+  }
+
+  const usageLines = usage
+    ? renderSidebarUsageLines(usage, panelConfig(config))
+    : []
+  const quotaLines = renderSidebarQuotaLines(
+    session?.sidebarPanel?.quotas || [],
+    panelConfig(config),
+  )
+
+  return {
+    enabled,
+    width,
+    usageLines,
+    quotaLines,
+    compactTitle,
+  }
+}
+
+function useSidebarPanelData(api: TuiPluginApi, sessionID: () => string) {
+  const [panel, setPanel] = createSignal<SidebarPanelData | undefined>()
+  let disposed = false
+  let loadVersion = 0
+
+  const reload = () => {
+    const currentVersion = ++loadVersion
+    const currentSessionID = sessionID()
+    void loadSidebarPanel(api, currentSessionID)
+      .then((next) => {
+        if (disposed || currentVersion !== loadVersion) return
+        setPanel(next)
+      })
+      .catch((error) => {
+        if (disposed || currentVersion !== loadVersion) return
+        void error
+      })
+  }
+
+  reload()
+
+  const timers = new Set<ReturnType<typeof setTimeout>>()
+  const queueRefresh = (delay = 250) => {
+    const timer = setTimeout(() => {
+      timers.delete(timer)
+      reload()
+    }, delay)
+    timers.add(timer)
+  }
+
+  const scheduleRefresh = () => {
+    queueRefresh(300)
+    queueRefresh(1_000)
+  }
+
+  // Bulk session sync populates messages asynchronously without emitting the
+  // real-time message.updated events we listen to below. Retry a few times on
+  // mount so historical sessions can render usage once the sync finishes.
+  queueRefresh(500)
+  queueRefresh(1_500)
+  queueRefresh(4_000)
+
+  const unsubscribers = [
+    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()
+      }
+    }),
+  ]
+
+  onCleanup(() => {
+    disposed = true
+    for (const timer of timers) clearTimeout(timer)
+    timers.clear()
+    for (const unsubscribe of unsubscribers) unsubscribe()
+  })
+
+  return panel
+}
+
+function sectionHeading(api: TuiPluginApi, value: string) {
+  return <text fg={api.theme.current.textMuted}>{value}</text>
+}
+
+function fallbackQuotaLinesFromTitle(title: string, width: number) {
+  const parts = (title || '')
+    .split(' | ')
+    .map((part) => part.trim())
+    .filter(Boolean)
+  if (parts.length <= 1) return [] as string[]
+  return parts
+    .slice(1)
+    .filter((part) => !/^Cd\d/.test(part) && !/^Est\b/.test(part))
+    .map((part) => fitLine(part, width))
+}
+
+function fallbackUsageCostLineFromTitle(title: string, width: number) {
+  const est = (title || '')
+    .split(' | ')
+    .map((part) => part.trim())
+    .find((part) => /^Est\$/.test(part) || /^Est\s+\$/.test(part))
+  if (!est) return undefined
+  return fitLine(est.replace(/^Est\$/, 'Est $'), width)
+}
+
+function SidebarContentView(props: { api: TuiPluginApi; sessionID: string }) {
+  const panel = useSidebarPanelData(props.api, () => props.sessionID)
+  const width = createMemo(
+    () => panel()?.width || DEFAULT_WIDTH - SECTION_INDENT,
+  )
+  const compactTitle = createMemo(() => {
+    compactTitleVersion()
+    return resolveCompactTitle(props.sessionID, panel()?.compactTitle) || ''
+  })
+  const usageLines = createMemo(() => {
+    const liveLines = panel()?.usageLines || []
+    const hasCostLine = liveLines.some((line) => /^Est\b/.test(line))
+    if (hasCostLine) return liveLines
+    const costLine = fallbackUsageCostLineFromTitle(compactTitle(), width())
+    return costLine ? [...liveLines, costLine] : liveLines
+  })
+  const quotaLines = createMemo(() => {
+    const liveLines = panel()?.quotaLines || []
+    if (liveLines.length > 0) return liveLines
+    return fallbackQuotaLinesFromTitle(compactTitle(), width())
+  })
+  const hasUsage = createMemo(() => usageLines().length > 0)
+  const hasQuota = createMemo(() => quotaLines().length > 0)
+
+  return (
+    <box gap={0}>
+      <Show when={hasUsage()}>
+        <box gap={0}>
+          {sectionHeading(props.api, 'USAGE')}
+          <box gap={0}>
+            <For each={usageLines()}>
+              {(line) => <text fg={props.api.theme.current.text}>{line}</text>}
+            </For>
+          </box>
+        </box>
+      </Show>
+
+      <Show when={hasQuota()}>
+        <box paddingTop={hasUsage() ? 1 : 0} gap={0}>
+          {sectionHeading(props.api, 'QUOTA')}
+          <box gap={0}>
+            <For each={quotaLines()}>
+              {(line) => <text fg={props.api.theme.current.text}>{line}</text>}
+            </For>
+          </box>
+        </box>
+      </Show>
+    </box>
+  )
+}
+
+function SidebarTitleView(props: {
+  api: TuiPluginApi
+  sessionID: string
+  title: string
+  shareURL?: string
+}) {
+  const panel = useSidebarPanelData(props.api, () => props.sessionID)
+  const width = createMemo(
+    () => panel()?.width || DEFAULT_WIDTH - SECTION_INDENT,
+  )
+  const titleLines = createMemo(() => {
+    const baseTitle = normalizeBaseTitle(props.title || 'Session') || 'Session'
+    return baseTitle
+      .split(/\r?\n/)
+      .filter(Boolean)
+      .map((line) => fitLine(line, width()))
+  })
+  const shareLine = createMemo(() =>
+    props.shareURL ? fitLine(props.shareURL, width()) : undefined,
+  )
+
+  return (
+    <box gap={0} paddingRight={1}>
+      {sectionHeading(props.api, 'TITLE')}
+      <box gap={0}>
+        <For each={titleLines()}>
+          {(line) => <text fg={props.api.theme.current.text}>{line}</text>}
+        </For>
+        <Show when={shareLine()}>
+          <text fg={props.api.theme.current.textMuted}>{shareLine()}</text>
+        </Show>
+      </box>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  const config = await loadConfig(
+    quotaConfigPaths(worktreePath(api), directoryPath(api)),
+  )
+  let didDeactivateContext = false
+  if (config.sidebar.enabled) {
+    const contextPlugin = api.plugins
+      .list()
+      .find((item) => item.id === INTERNAL_CONTEXT_PLUGIN_ID)
+    if (contextPlugin?.active) {
+      didDeactivateContext = await api.plugins
+        .deactivate(INTERNAL_CONTEXT_PLUGIN_ID)
+        .catch(() => false)
+    }
+  }
+  api.lifecycle.onDispose(() => {
+    if (!didDeactivateContext) return
+    return api.plugins
+      .activate(INTERNAL_CONTEXT_PLUGIN_ID)
+      .then(() => undefined)
+      .catch(() => undefined)
+  })
+
+  api.slots.register({
+    order: 100,
+    slots: {
+      sidebar_title(
+        _ctx: unknown,
+        props: { session_id: string; title: string; share_url?: string },
+      ) {
+        if (latestCompactTitles.get(props.session_id) !== props.title) {
+          latestCompactTitles.set(props.session_id, props.title)
+          setCompactTitleVersion((value) => value + 1)
+        }
+        return (
+          <SidebarTitleView
+            api={api}
+            sessionID={props.session_id}
+            title={props.title}
+            shareURL={props.share_url}
+          />
+        )
+      },
+      sidebar_content(_ctx: unknown, props: { session_id: string }) {
+        return <SidebarContentView api={api} sessionID={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id,
+  tui,
+}
+
+export default plugin

package/dist/types.d.ts

@@ -110,6 +110,7 @@ export type CachedSessionUsage = {
     providers: Record<string, CachedProviderUsage>;
 };
 export type SidebarPanelState = {
+    version: 1;
     updatedAt: number;
     usage?: CachedSessionUsage;
     quotas?: QuotaSnapshot[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@leo000001/opencode-quota-sidebar",
-  "version": "2.0.26",
-  "description": "OpenCode plugin that shows quota and token usage in session titles",
+  "version": "3.0.0",
+  "description": "OpenCode plugin that shows quota and token usage in TUI sidebar panels and compact session titles",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,7 @@
     },
     "./tui": {
       "types": "./dist/tui.d.ts",
-      "default": "./dist/tui.js"
+      "default": "./dist/tui.tsx"
     }
   },
   "oc-plugin": [
@@ -21,6 +21,7 @@
   ],
   "files": [
     "dist/*.js",
+    "dist/tui.tsx",
     "dist/*.d.ts",
     "dist/providers/**/*.js",
     "dist/providers/**/*.d.ts",
@@ -33,7 +34,7 @@
   ],
   "scripts": {
     "clean": "node -e \"const fs=require('fs'); fs.rmSync('dist',{recursive:true,force:true}); fs.rmSync('tsconfig.tsbuildinfo',{force:true});\"",
-    "build": "npm run clean && tsc -p tsconfig.json",
+    "build": "npm run clean && tsc -p tsconfig.json && node ./scripts/prepare-tui-dist.mjs",
     "prepare": "npm run build",
     "prepack": "npm run build",
     "prepublishOnly": "npm run typecheck && npm run build && npm test",

package/dist/tui.js

@@ -1,181 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/solid/jsx-runtime";
-/** @jsxImportSource @opentui/solid */
-import fs from 'node:fs/promises';
-import { createMemo, createResource, createSignal, For, onCleanup, Show, } from 'solid-js';
-import { fitLine, renderSidebarContextLine, renderSidebarQuotaLines, renderSidebarUsageLines, } from './format.js';
-import { loadConfig, loadState, quotaConfigPaths, resolveOpencodeDataDir, stateFilePath, } from './storage.js';
-import { normalizeBaseTitle } from './title.js';
-import { fromCachedSessionUsage } from './usage.js';
-const id = 'leo.quota-sidebar';
-const INTERNAL_CONTEXT_PLUGIN_ID = 'internal:sidebar-context';
-const SECTION_INDENT = 2;
-const DEFAULT_WIDTH = 36;
-function latestAssistantWithOutput(messages) {
-    for (let index = messages.length - 1; index >= 0; index -= 1) {
-        const message = messages[index];
-        if (!message || message.role !== 'assistant')
-            continue;
-        if (message.tokens.output <= 0)
-            continue;
-        return message;
-    }
-    return undefined;
-}
-const stateCache = new Map();
-async function loadStateCached(filePath) {
-    const stat = await fs.stat(filePath).catch(() => undefined);
-    const mtimeMs = stat?.mtimeMs ?? -1;
-    const cached = stateCache.get(filePath);
-    if (cached && cached.mtimeMs === mtimeMs)
-        return cached.state;
-    const state = await loadState(filePath);
-    stateCache.set(filePath, { mtimeMs, state });
-    return state;
-}
-function directoryPath(api) {
-    return api.state.path.directory || process.cwd();
-}
-function worktreePath(api) {
-    return api.state.path.worktree || directoryPath(api);
-}
-function panelConfig(config) {
-    return {
-        ...config,
-        sidebar: {
-            ...config.sidebar,
-            width: Math.max(8, config.sidebar.width - SECTION_INDENT),
-        },
-    };
-}
-async function loadSidebarPanel(api, sessionID) {
-    const config = await loadConfig(quotaConfigPaths(worktreePath(api), directoryPath(api)));
-    const state = await loadStateCached(stateFilePath(resolveOpencodeDataDir()));
-    const session = state.sessions[sessionID];
-    const enabled = config.sidebar.enabled && state.titleEnabled;
-    const width = Math.max(8, config.sidebar.width - SECTION_INDENT);
-    if (!enabled || !session?.sidebarPanel?.usage) {
-        return {
-            enabled,
-            width,
-            usageLines: [],
-            quotaLines: [],
-        };
-    }
-    const usage = fromCachedSessionUsage(session.sidebarPanel.usage);
-    const usageLines = renderSidebarUsageLines(usage, panelConfig(config));
-    const quotaLines = renderSidebarQuotaLines(session.sidebarPanel.quotas || [], panelConfig(config));
-    return {
-        enabled,
-        width,
-        usageLines,
-        quotaLines,
-    };
-}
-function useSidebarPanelData(api, sessionID) {
-    const [refresh, setRefresh] = createSignal(0);
-    const [panel] = createResource(() => `${sessionID()}:${refresh()}`, async () => loadSidebarPanel(api, sessionID()));
-    let timer;
-    const scheduleRefresh = () => {
-        if (timer)
-            clearTimeout(timer);
-        timer = setTimeout(() => setRefresh((value) => value + 1), 250);
-    };
-    const unsubscribers = [
-        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();
-        }),
-    ];
-    onCleanup(() => {
-        if (timer)
-            clearTimeout(timer);
-        for (const unsubscribe of unsubscribers)
-            unsubscribe();
-    });
-    return panel;
-}
-function sectionHeading(api, value) {
-    return _jsx("text", { fg: api.theme.current.textMuted, children: value });
-}
-function ContextSection(props) {
-    const messages = createMemo(() => props.api.state.session.messages(props.sessionID));
-    const contextLine = createMemo(() => {
-        const last = latestAssistantWithOutput(messages());
-        if (!last)
-            return undefined;
-        const tokens = last.tokens.input +
-            last.tokens.output +
-            last.tokens.reasoning +
-            last.tokens.cache.read +
-            last.tokens.cache.write;
-        const model = props.api.state.provider.find((item) => item.id === last.providerID)?.models[last.modelID];
-        const percent = model?.limit.context && model.limit.context > 0
-            ? (tokens / model.limit.context) * 100
-            : undefined;
-        return renderSidebarContextLine(tokens, percent, props.width());
-    });
-    return (_jsx(Show, { when: contextLine(), children: _jsxs("box", { paddingTop: 1, gap: 0, children: [sectionHeading(props.api, 'CONTEXT'), _jsx("box", { paddingLeft: SECTION_INDENT, children: _jsx("text", { fg: props.api.theme.current.text, children: contextLine() }) })] }) }));
-}
-function SidebarContentView(props) {
-    const panel = useSidebarPanelData(props.api, () => props.sessionID);
-    const width = createMemo(() => panel()?.width || DEFAULT_WIDTH - SECTION_INDENT);
-    return (_jsx(Show, { when: panel()?.enabled, children: _jsxs("box", { gap: 0, children: [_jsx(ContextSection, { api: props.api, sessionID: props.sessionID, width: width }), _jsx(Show, { when: (panel()?.usageLines.length || 0) > 0, children: _jsxs("box", { paddingTop: 1, gap: 0, children: [sectionHeading(props.api, 'USAGE'), _jsx("box", { paddingLeft: SECTION_INDENT, gap: 0, children: _jsx(For, { each: panel()?.usageLines || [], children: (line) => (_jsx("text", { fg: props.api.theme.current.text, children: line })) }) })] }) }), _jsx(Show, { when: (panel()?.quotaLines.length || 0) > 0, children: _jsxs("box", { paddingTop: 1, gap: 0, children: [sectionHeading(props.api, 'QUOTA'), _jsx("box", { paddingLeft: SECTION_INDENT, gap: 0, children: _jsx(For, { each: panel()?.quotaLines || [], children: (line) => (_jsx("text", { fg: props.api.theme.current.text, children: line })) }) })] }) })] }) }));
-}
-function SidebarTitleView(props) {
-    const panel = useSidebarPanelData(props.api, () => props.sessionID);
-    const width = createMemo(() => panel()?.width || DEFAULT_WIDTH - SECTION_INDENT);
-    const titleLines = createMemo(() => {
-        const baseTitle = normalizeBaseTitle(props.title || 'Session') || 'Session';
-        return baseTitle
-            .split(/\r?\n/)
-            .filter(Boolean)
-            .map((line) => fitLine(line, width()));
-    });
-    const shareLine = createMemo(() => props.shareURL ? fitLine(props.shareURL, width()) : undefined);
-    return (_jsx(Show, { when: panel()?.enabled, fallback: _jsxs("box", { gap: 0, paddingRight: 1, children: [_jsx(For, { each: titleLines(), children: (line) => _jsx("text", { fg: props.api.theme.current.text, children: line }) }), _jsx(Show, { when: shareLine(), children: _jsx("text", { fg: props.api.theme.current.textMuted, children: shareLine() }) })] }), children: _jsxs("box", { gap: 0, paddingRight: 1, children: [sectionHeading(props.api, 'TITLE'), _jsxs("box", { paddingLeft: SECTION_INDENT, gap: 0, children: [_jsx(For, { each: titleLines(), children: (line) => _jsx("text", { fg: props.api.theme.current.text, children: line }) }), _jsx(Show, { when: shareLine(), children: _jsx("text", { fg: props.api.theme.current.textMuted, children: shareLine() }) })] })] }) }));
-}
-const tui = async (api) => {
-    const contextPlugin = api.plugins
-        .list()
-        .find((item) => item.id === INTERNAL_CONTEXT_PLUGIN_ID);
-    const shouldRestoreContext = Boolean(contextPlugin?.enabled && contextPlugin?.active);
-    if (contextPlugin?.active) {
-        void api.plugins.deactivate(INTERNAL_CONTEXT_PLUGIN_ID).catch(() => false);
-    }
-    api.lifecycle.onDispose(() => {
-        if (!shouldRestoreContext)
-            return;
-        return api.plugins
-            .activate(INTERNAL_CONTEXT_PLUGIN_ID)
-            .then(() => undefined)
-            .catch(() => undefined);
-    });
-    api.slots.register({
-        order: 100,
-        slots: {
-            sidebar_title(_ctx, props) {
-                return (_jsx(SidebarTitleView, { api: api, sessionID: props.session_id, title: props.title, shareURL: props.share_url }));
-            },
-            sidebar_content(_ctx, props) {
-                return _jsx(SidebarContentView, { api: api, sessionID: props.session_id });
-            },
-        },
-    });
-};
-const plugin = {
-    id,
-    tui,
-};
-export default plugin;