@leo000001/opencode-quota-sidebar 2.0.20 → 2.0.26

package/README.md

@@ -9,15 +9,27 @@ OpenCode plugin: show token usage and subscription quota in the session sidebar
 
 ## Install
 
-Add the package name to `plugin` in your `opencode.json`. OpenCode uses Bun to install it automatically on startup:
+If you use the OpenCode installer flow, the package manifest now advertises both `server` and `tui` targets.
+
+If you configure files manually, add the server entry to `opencode.json` and the TUI entry to `tui.json`:
+
+`opencode.json`
 
 ```json
 {
-  "plugin": ["@leo000001/opencode-quota-sidebar@2.0.1"]
+  "plugin": ["@leo000001/opencode-quota-sidebar@2.0.23"]
 }
 ```
 
-Note for OpenCode `>=1.2.15`: TUI settings (`theme`/`keybinds`/`tui`) moved to `tui.json`, but plugin loading still stays in `opencode.json` (`plugin: []`).
+`tui.json`
+
+```json
+{
+  "plugin": ["@leo000001/opencode-quota-sidebar@2.0.23"]
+}
+```
+
+Note for OpenCode `>=1.2.15`: TUI settings and TUI plugins live in `tui.json`, while server plugins stay in `opencode.json`.
 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.
@@ -29,7 +41,9 @@ npm install
 npm run build
 ```
 
-Add the built file to your `opencode.json`:
+Add the built server file to your `opencode.json` and the TUI file to your `tui.json`:
+
+`opencode.json`
 
 ```json
 {
@@ -37,7 +51,18 @@ Add the built file to your `opencode.json`:
 }
 ```
 
-On Windows, use forward slashes: `"file:///D:/Lab/opencode-quota-sidebar/dist/index.js"`
+`tui.json`
+
+```json
+{
+  "plugin": ["file:///ABSOLUTE/PATH/opencode-quota-sidebar/dist/tui.js"]
+}
+```
+
+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`
 
 ## Supported quota providers
 
@@ -55,18 +80,16 @@ Want to add support for another provider (Google Antigravity, Zhipu AI, Firmware
 
 ## Features
 
-- TUI session title uses a compact multiline sidebar layout:
-  - line 1: original session title
-  - line 2: blank separator
-  - line 3: compact usage tokens such as `R3 I16.3k O916`
-  - line 4+: compact cache tokens such as `CW300 CR31.4k Cd66%`
-  - optional cost line: `Est$0.12`
-  - quota lines also use compact tokens, for example `XYAI D$31.3/$90 R22:39` or `OAI 5h80 R22:18 W70 R04-03`
-  - short windows (`5h`, `1d`, `Daily`) still show same-day resets as `HH:MM` and cross-day resets as `MM-DD HH:MM`; longer windows continue to show `MM-DD`
-  - long quota content wraps across extra compact lines instead of dropping fields from the sidebar, and continuation lines align to the quota content column
-- Desktop automatically switches to a compact monitoring-style single-line title. It keeps recently used providers from the last `50` requests or last `60` minutes, expands all windows/balance for those selected providers in short form such as `OAI 5h80 R16:20 W70 R04-03` or `RC D88.9/60 B260`, and keeps only summary usage signals such as `Cd66%` and `Est$0.12`
-- TUI is always rendered as compact multiline; Desktop is always rendered as compact monitoring-style single-line. This behavior no longer depends on `sidebar.multilineTitle`
-- Web UI currently cannot be reliably detected by the plugin, so it follows the non-desktop multiline path
+- 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
+- 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`.
+- `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.
 - Session-scoped usage/quota can include descendant subagent sessions (enabled by default via `sidebar.includeChildren=true`). Traversal is bounded by `childrenMaxDepth` (default 6), `childrenMaxSessions` (default 128), and `childrenConcurrency` (default 5); truncation is logged when `OPENCODE_QUOTA_DEBUG=1`. Day/week/month ranges never merge children — only session scope does.
 - Toast message can include four sections: `Token Usage`, `Cost as API` (per provider), `Provider Cache` (when provider-level cached ratios are available), and `Quota`
 - Expiry reminders are shown in a separate `Expiry Soon` toast section only for providers with real subscription expiry timestamps, and each session shows that auto-reminder at most once
@@ -144,7 +167,7 @@ memory on startup. Chunk files remain on disk for historical range scans.
 ## Compatibility
 
 - Node.js: >= 18 (for `fetch` + `AbortController`)
-- OpenCode: plugin SDK `@opencode-ai/plugin` ^1.2.10
+- OpenCode: plugin SDK `@opencode-ai/plugin` ^1.3.5
 - OpenCode config split: if you are on `>=1.2.15`, keep this plugin in `opencode.json` and keep TUI-only keys in `tui.json`.
 
 ## Force refresh after npm update
@@ -153,7 +176,7 @@ If `npm view @leo000001/opencode-quota-sidebar version` shows a newer version bu
 
 Recommended recovery steps:
 
-1. Pin the target plugin version in `opencode.json`.
+1. Pin the target plugin version in every config file that loads it (`opencode.json` and, if used manually, `tui.json`).
 2. Fully exit OpenCode.
 3. Delete any cached installed copies of the plugin.
 4. Start OpenCode again so it reinstalls the package.
@@ -249,7 +272,8 @@ Sidebar defaults:
 
 - `sidebar.enabled`: `true`
 - `sidebar.width`: `36` (clamped to `20`-`60`)
-- `sidebar.multilineTitle`: `true` (legacy compatibility field; TUI/Desktop display mode is now chosen automatically)
+- `sidebar.titleMode`: `auto` (`auto`/`multiline`/`compact`)
+- `sidebar.multilineTitle`: `true` (legacy compatibility field; title style is now chosen automatically)
 - `sidebar.showCost`: `true`
 - `sidebar.showQuota`: `true`
 - `sidebar.wrapQuotaLines`: `true`
@@ -257,8 +281,8 @@ Sidebar defaults:
 - `sidebar.childrenMaxDepth`: `6` (clamped to `1`-`32`)
 - `sidebar.childrenMaxSessions`: `128` (clamped to `0`-`2000`)
 - `sidebar.childrenConcurrency`: `5` (clamped to `1`-`10`)
-- `sidebar.desktopCompact.recentRequests`: `50` (desktop compact only)
-- `sidebar.desktopCompact.recentMinutes`: `60` (desktop compact only)
+- `sidebar.desktopCompact.recentRequests`: `50` (compact single-line titles)
+- `sidebar.desktopCompact.recentMinutes`: `60` (compact single-line titles)
 
 Quota defaults:
 
@@ -282,6 +306,7 @@ Other defaults:
   "sidebar": {
     "enabled": true,
     "width": 36,
+    "titleMode": "auto",
     "multilineTitle": true,
     "showCost": true,
     "showQuota": true,
@@ -320,16 +345,20 @@ Other defaults:
 
 ### Notes
 
-- `sidebar.showCost` controls API-cost visibility in sidebar title, `quota_summary` markdown report, and toast message.
+- `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.multilineTitle` is kept for backward compatibility, but current rendering is fixed by client type: TUI uses multiline titles and Desktop uses compact monitoring-style single-line titles.
+- `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 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`).
 - `sidebar.includeChildren` controls whether session-scoped usage/quota includes descendant subagent sessions (default: `true`).
 - `sidebar.childrenMaxDepth` limits how many levels of nested subagents are traversed (default: `6`, clamped 1–32).
 - `sidebar.childrenMaxSessions` caps the total number of descendant sessions aggregated (default: `128`, clamped 0–2000).
 - `sidebar.childrenConcurrency` controls parallel fetches for descendant session messages (default: `5`, clamped 1–10).
-- `sidebar.desktopCompact.recentRequests` and `sidebar.desktopCompact.recentMinutes` control which recently used providers remain visible in desktop compact titles.
+- `sidebar.desktopCompact.recentRequests` and `sidebar.desktopCompact.recentMinutes` control which recently used providers remain visible in compact single-line titles.
+- `sidebar.desktopCompact.recentRequests` and `sidebar.desktopCompact.recentMinutes` only control provider filtering inside compact titles; they do not affect the dedicated TUI sidebar panel.
 - `output` includes reasoning tokens (`output = tokens.output + tokens.reasoning`). Reasoning is not rendered as a separate line.
 - API cost bills reasoning tokens at the output rate (same as completion tokens).
 - API cost is computed from OpenCode model pricing metadata, not from `message.cost`. This keeps subscription-backed providers such as OpenAI OAuth usable for API-equivalent cost estimation even when OpenCode's measured cost is `0`.
@@ -368,7 +397,46 @@ These examples show the quota block portion of the sidebar title.
 
 ### TUI layout
 
-This section describes the TUI layout. Desktop uses its own compact monitoring-style single-line format and Web UI currently follows the multiline path.
+The default TUI layout is a real sidebar panel, not a multiline shared title. Desktop and Web UI / `serve` clients keep the compact shared title unless you force `sidebar.titleMode = "multiline"`.
+
+Typical layout:
+
+```text
+TITLE
+  Fix quota adapter matching
+CONTEXT
+  242k tok 24% ctx
+USAGE
+  R184 I189k O53.2k
+  CR31.4k CW3.2k Cd66%
+  Est $12.8
+QUOTA
+  OAI 5h80 R16:20
+      W70 R04-03
+  Cop M78 R04-01
+  RC D$88.9/$60 E02-27
+     B260
+```
+
+### Force modes
+
+If you prefer a stable policy instead of the auto heuristic:
+
+```json
+{
+  "sidebar": {
+    "titleMode": "compact"
+  }
+}
+```
+
+```json
+{
+  "sidebar": {
+    "titleMode": "multiline"
+  }
+}
+```
 
 0 providers (no quota data):
 
@@ -449,9 +517,9 @@ Cop unavailable
 OAI ?
 ```
 
-### Desktop compact mode
+### Compact shared title mode
 
-Desktop always uses a compact monitoring-style single-line title. Recently used providers are selected from the last `50` assistant requests or last `60` minutes, and each selected provider expands all of its windows and balances in shorthand. To survive upstream Desktop truncation better, quota segments are emitted before usage summary signals:
+Desktop and Web UI / `serve` use a compact monitoring-style single-line shared title in `auto` mode. Recently used providers are selected from the last `50` assistant requests or last `60` minutes, and each selected provider expands all of its windows and balances in shorthand. To survive upstream truncation better, quota segments are emitted before usage summary signals:
 
 ```text
 <base> | OAI 5h80 R16:20 W70 R04-03 | Cop M78 R04-01 | RC D88.9/60 B260 | Buzz B￥10.2 | Cd66% | Est$0.12
@@ -466,8 +534,8 @@ Shorthand rules:
 - `B260` / `B￥10.2` = balance
 - `Cd66%` = cached ratio (`cache.read / (input + cache.read)`)
 - `Est$0.12` = equivalent API cost estimate
-- Desktop omits `R/I/O/CR/CW`; TUI keeps the full compact multiline breakdown.
-- Order is `base | quota... | usage-summary`, while TUI keeps its multiline usage-first layout.
+- Compact shared titles omit `R/I/O/CR/CW`; the dedicated TUI sidebar keeps the richer `CONTEXT / 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/events.d.ts

@@ -3,6 +3,8 @@ export declare function createEventDispatcher(handlers: {
     onSessionCreated: (session: Session) => Promise<void>;
     onSessionUpdated: (session: Session) => Promise<void>;
     onSessionDeleted: (session: Session) => Promise<void>;
+    onTuiActivity: () => Promise<void>;
+    onTuiSessionSelect: (sessionID: string) => Promise<void>;
     onMessageRemoved: (info: {
         sessionID: string;
         messageID?: string;

package/dist/events.js

@@ -3,6 +3,7 @@ function isAssistantMessage(message) {
 }
 export function createEventDispatcher(handlers) {
     return async (event) => {
+        const tui = event;
         if (event.type === 'session.created') {
             await handlers.onSessionCreated(event.properties.info);
             return;
@@ -15,6 +16,17 @@ export function createEventDispatcher(handlers) {
             await handlers.onSessionDeleted(event.properties.info);
             return;
         }
+        if (tui.type === 'tui.prompt.append' || tui.type === 'tui.command.execute') {
+            await handlers.onTuiActivity();
+            return;
+        }
+        if (tui.type === 'tui.session.select') {
+            if (typeof tui.properties?.sessionID !== 'string')
+                return;
+            await handlers.onTuiSessionSelect(tui.properties.sessionID);
+            await handlers.onTuiActivity();
+            return;
+        }
         if (event.type === 'message.removed') {
             const props = event.properties;
             await handlers.onMessageRemoved({

package/dist/format.d.ts

@@ -1,6 +1,20 @@
 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[];
 /**
  * Render sidebar title with multi-line token breakdown.
@@ -13,7 +27,10 @@ export declare function selectDesktopCompactProviderIDs(usage: UsageSummary, con
  *   $3.81 as API cost         (only if showCost=true)
  *   OpenAI Remaining 78%      (only if quota available)
  */
-export declare function renderSidebarTitle(baseTitle: string, usage: UsageSummary, quotas: QuotaSnapshot[], config: QuotaSidebarConfig): string;
+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 renderSidebarQuotaLines(quotas: QuotaSnapshot[], config: QuotaSidebarConfig): string[];
 export declare function renderMarkdownReport(period: string, usage: UsageSummary, quotas: QuotaSnapshot[], options?: {
     showCost?: boolean;
 }): string;

package/dist/format.js

@@ -1,6 +1,7 @@
 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)
@@ -113,7 +114,7 @@ function truncateToCellWidth(value, width) {
  * Truncate `value` to at most `width` terminal cells.
  * Keep plain text only (no ANSI) to avoid renderer corruption.
  */
-function fitLine(value, width) {
+export function fitLine(value, width) {
     if (width <= 0)
         return '';
     const safe = sanitizeLine(value);
@@ -156,6 +157,14 @@ function formatApiCostValue(value) {
 function formatApiCostLine(value) {
     return `${formatApiCostValue(value)} as API cost`;
 }
+function trimTrailingZeroUnit(value) {
+    return value
+        .replace(/(\d+)\.0(?=[km]\b)/i, '$1')
+        .replace(/(\d+)\.0(?=$)/, '$1');
+}
+function panelNumber(value) {
+    return trimTrailingZeroUnit(shortNumber(value, 1));
+}
 function formatRequestsLabel(value, short = false) {
     const count = shortNumber(value, 1);
     return short ? `Req ${count}` : `Requests ${count}`;
@@ -163,6 +172,15 @@ function formatRequestsLabel(value, short = false) {
 export function isDesktopClient() {
     return process.env.OPENCODE_CLIENT === 'desktop';
 }
+export function resolveTitleView(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) {
     return {
         recentRequests: Math.max(1, config.sidebar.desktopCompact?.recentRequests ?? 50),
@@ -363,6 +381,63 @@ function formatPercent(value, decimals = 1) {
     const pct = (safe * 100).toFixed(decimals);
     return `${pct.replace(/\.0+$/, '').replace(/(\.\d*[1-9])0+$/, '$1')}%`;
 }
+function fitsLine(value, width) {
+    return stringCellWidth(sanitizeLine(value)) <= width;
+}
+function usageDetailLines(usage, cacheMetrics, options) {
+    const width = options.width;
+    const numberToken = options.numberToken || sidebarNumber;
+    const costToken = options.costToken || ((value) => `Est${formatApiCostValue(value)}`);
+    const groups = [];
+    groups.push([
+        `R${shortNumber(usage.assistantMessages, 1)}`,
+        `I${numberToken(usage.input)}`,
+        `O${numberToken(usage.output)}`,
+    ]);
+    const secondary = [];
+    const pushCacheRead = () => {
+        if (usage.cacheRead > 0) {
+            secondary.push(`CR${numberToken(usage.cacheRead)}`);
+        }
+    };
+    const pushCacheWrite = () => {
+        if (usage.cacheWrite > 0) {
+            secondary.push(`CW${numberToken(usage.cacheWrite)}`);
+        }
+    };
+    if (options.cacheReadFirst) {
+        pushCacheRead();
+        pushCacheWrite();
+    }
+    else {
+        pushCacheWrite();
+        pushCacheRead();
+    }
+    if (cacheMetrics.cachedRatio !== undefined) {
+        secondary.push(`Cd${formatPercent(cacheMetrics.cachedRatio, 0)}`);
+    }
+    if (secondary.length > 0)
+        groups.push(secondary);
+    if (options.showCost && usage.apiCost > 0) {
+        groups.push([costToken(usage.apiCost)]);
+    }
+    const packed = [];
+    for (const group of groups) {
+        let current = '';
+        for (const token of group) {
+            const candidate = current ? `${current} ${token}` : token;
+            if (!current || fitsLine(candidate, width)) {
+                current = candidate;
+                continue;
+            }
+            packed.push(current);
+            current = token;
+        }
+        if (current)
+            packed.push(current);
+    }
+    return packed;
+}
 function formatQuotaPercent(value, options) {
     const missing = options?.missing ?? '-';
     if (value === undefined)
@@ -462,10 +537,11 @@ function renderSingleLineTitle(baseTitle, usage, quotas, config, width) {
  *   $3.81 as API cost         (only if showCost=true)
  *   OpenAI Remaining 78%      (only if quota available)
  */
-export function renderSidebarTitle(baseTitle, usage, quotas, config) {
+export function renderSidebarTitle(baseTitle, usage, quotas, config, view) {
     const width = Math.max(8, Math.floor(config.sidebar.width || 36));
     const safeBaseTitle = stripAnsi(baseTitle || 'Session') || 'Session';
-    if (isDesktopClient()) {
+    const mode = view || resolveTitleView({ config });
+    if (mode === 'compact') {
         const singleLineBase = safeBaseTitle.split(/\r?\n/, 1)[0] || 'Session';
         return renderDesktopCompactTitle(singleLineBase, usage, quotas, config, width);
     }
@@ -507,51 +583,43 @@ export function renderSidebarTitle(baseTitle, usage, quotas, config) {
             lines.push(fitLine(line, width));
         }
     }
-    function fitsLine(value, width) {
-        return stringCellWidth(sanitizeLine(value)) <= width;
-    }
-    function usageDetailLines(usage, cacheMetrics, options) {
-        const width = options.width;
-        const groups = [];
-        groups.push([
-            `R${shortNumber(usage.assistantMessages, 1)}`,
-            `I${sidebarNumber(usage.input)}`,
-            `O${sidebarNumber(usage.output)}`,
-        ]);
-        const secondary = [];
-        if (usage.cacheWrite > 0) {
-            secondary.push(`CW${sidebarNumber(usage.cacheWrite)}`);
-        }
-        if (usage.cacheRead > 0) {
-            secondary.push(`CR${sidebarNumber(usage.cacheRead)}`);
-        }
-        if (cacheMetrics.cachedRatio !== undefined) {
-            secondary.push(`Cd${formatPercent(cacheMetrics.cachedRatio, 0)}`);
-        }
-        if (secondary.length > 0)
-            groups.push(secondary);
-        if (options.showCost && usage.apiCost > 0) {
-            groups.push([`Est${formatApiCostValue(usage.apiCost)}`]);
-        }
-        const packed = [];
-        for (const group of groups) {
-            let current = '';
-            for (const token of group) {
-                const candidate = current ? `${current} ${token}` : token;
-                if (!current || fitsLine(candidate, width)) {
-                    current = candidate;
-                    continue;
-                }
-                packed.push(current);
-                current = token;
-            }
-            if (current)
-                packed.push(current);
-        }
-        return packed;
-    }
     return lines.join('\n');
 }
+export function renderSidebarContextLine(tokens, percent, width) {
+    const parts = [`${panelNumber(tokens)} tok`];
+    if (percent !== undefined && Number.isFinite(percent) && percent >= 0) {
+        parts.push(`${Math.round(percent)}% ctx`);
+    }
+    return fitLine(parts.join(' '), width);
+}
+export function renderSidebarUsageLines(usage, config) {
+    const width = Math.max(8, Math.floor(config.sidebar.width || 36));
+    const cacheMetrics = getCacheCoverageMetrics(usage);
+    return usageDetailLines(usage, cacheMetrics, {
+        width,
+        showCost: config.sidebar.showCost,
+        numberToken: panelNumber,
+        costToken: (value) => `Est ${formatApiCostValue(value)}`,
+        cacheReadFirst: true,
+    }).map((line) => fitLine(line, width));
+}
+export function renderSidebarQuotaLines(quotas, config) {
+    const width = Math.max(8, Math.floor(config.sidebar.width || 36));
+    const visibleQuotas = collapseQuotaSnapshots(quotas).filter((q) => ['ok', 'error', 'unsupported', 'unavailable'].includes(q.status));
+    const labelWidth = visibleQuotas.reduce((max, item) => {
+        const label = compactProviderLabel(item);
+        return Math.max(max, stringCellWidth(label));
+    }, 0);
+    return visibleQuotas
+        .flatMap((item) => compactQuotaWide(item, labelWidth, {
+        width,
+        wrapLines: config.sidebar.wrapQuotaLines,
+        forceWrapped: false,
+        compactDetails: true,
+    }))
+        .filter((line) => Boolean(line))
+        .map((line) => fitLine(line, width));
+}
 /**
  * Multi-window quota format for sidebar.
  *

package/dist/index.js

@@ -1,7 +1,6 @@
-import path from 'node:path';
-import { renderMarkdownReport, renderSidebarTitle, renderToastMessage, } from './format.js';
+import { renderMarkdownReport, resolveTitleView, renderSidebarTitle, renderToastMessage, TUI_ACTIVE_MS, } from './format.js';
 import { createQuotaRuntime } from './quota.js';
-import { authFilePath, dateKeyFromTimestamp, deleteSessionFromDayChunk, evictOldSessions, loadConfig, loadState, normalizeTimestampMs, resolveOpencodeConfigDir, resolveOpencodeDataDir, saveState, stateFilePath, } from './storage.js';
+import { authFilePath, dateKeyFromTimestamp, deleteSessionFromDayChunk, evictOldSessions, loadConfig, loadState, normalizeTimestampMs, quotaConfigPaths, resolveOpencodeDataDir, saveState, stateFilePath, } from './storage.js';
 import { debug, swallow } from './helpers.js';
 import { normalizeBaseTitle } from './title.js';
 import { createDescendantsResolver } from './descendants.js';
@@ -16,16 +15,7 @@ const SHUTDOWN_HOOK_KEY = Symbol.for('opencode-quota-sidebar.shutdown-hook');
 const SHUTDOWN_CALLBACKS_KEY = Symbol.for('opencode-quota-sidebar.shutdown-callbacks');
 export async function QuotaSidebarPlugin(input) {
     const quotaRuntime = createQuotaRuntime();
-    const configDir = resolveOpencodeConfigDir();
-    const configOverride = process.env.OPENCODE_QUOTA_CONFIG?.trim();
-    const config = await loadConfig([
-        path.join(configDir, 'quota-sidebar.config.json'),
-        path.join(input.worktree, 'quota-sidebar.config.json'),
-        path.join(input.directory, 'quota-sidebar.config.json'),
-        path.join(input.worktree, '.opencode', 'quota-sidebar.config.json'),
-        path.join(input.directory, '.opencode', 'quota-sidebar.config.json'),
-        ...(configOverride ? [path.resolve(configOverride)] : []),
-    ]);
+    const config = await loadConfig(quotaConfigPaths(input.worktree, input.directory));
     const dataDir = resolveOpencodeDataDir();
     const statePath = stateFilePath(dataDir);
     const authPath = authFilePath(dataDir);
@@ -126,6 +116,23 @@ 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;
@@ -161,6 +168,7 @@ export async function QuotaSidebarPlugin(input) {
         markDirty,
         scheduleSave,
         renderSidebarTitle,
+        getTitleView: (sessionID) => resolveTitleView({ config, sessionID, tuiSessionID, tuiActiveAt }),
         getQuotaSnapshots,
         summarizeSessionUsageForDisplay,
         scheduleParentRefreshIfSafe,
@@ -200,15 +208,20 @@ 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)),
         ]).catch(swallow('shutdown:startupTitleWork'));
-        await titleRefresh.waitForQuiescence().catch(swallow('shutdown:titleQuiescence'));
+        await titleRefresh
+            .waitForQuiescence()
+            .catch(swallow('shutdown:titleQuiescence'));
         await flushSave().catch(swallow('shutdown:flushSave'));
     };
     const processWithHook = process;
-    const shutdownCallbacks = (processWithHook[SHUTDOWN_CALLBACKS_KEY] ||= new Set());
+    const shutdownCallbacks = (processWithHook[SHUTDOWN_CALLBACKS_KEY] ||=
+        new Set());
     shutdownCallbacks.add(shutdown);
     if (!processWithHook[SHUTDOWN_HOOK_KEY]) {
         processWithHook[SHUTDOWN_HOOK_KEY] = true;
@@ -280,7 +293,8 @@ export async function QuotaSidebarPlugin(input) {
             if (expiryLines.length === 0)
                 return;
             sessionState.expiryToastShown = true;
-            const dateKey = state.sessionDateMap[sessionID] || dateKeyFromTimestamp(sessionState.createdAt);
+            const dateKey = state.sessionDateMap[sessionID] ||
+                dateKeyFromTimestamp(sessionState.createdAt);
             state.sessionDateMap[sessionID] = dateKey;
             markDirty(dateKey);
             scheduleSave();
@@ -327,6 +341,14 @@ 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);
@@ -348,6 +370,23 @@ export async function QuotaSidebarPlugin(input) {
                 titleRefresh.schedule(session.parentID, 0);
             }
         },
+        onTuiActivity: async () => {
+            const stale = Boolean(tuiSessionID) && Date.now() - tuiActiveAt > TUI_ACTIVE_MS;
+            tuiActiveAt = Date.now();
+            armTuiTimer();
+            if (stale && tuiSessionID) {
+                titleRefresh.schedule(tuiSessionID, 0);
+            }
+        },
+        onTuiSessionSelect: async (sessionID) => {
+            const prev = tuiSessionID;
+            tuiSessionID = sessionID;
+            armTuiTimer();
+            if (prev && prev !== sessionID) {
+                titleRefresh.schedule(prev, 0);
+            }
+            titleRefresh.schedule(sessionID, 0);
+        },
         onMessageRemoved: async (info) => {
             usageService.markForceRescan(info.sessionID);
             titleRefresh.schedule(info.sessionID, 0);

package/dist/storage.d.ts

@@ -2,6 +2,7 @@ import { dateKeyFromTimestamp, normalizeTimestampMs } from './storage_dates.js';
 import { authFilePath, resolveOpencodeConfigDir, resolveOpencodeDataDir, stateFilePath } from './storage_paths.js';
 import type { CachedSessionUsage, IncrementalCursor, QuotaSidebarConfig, QuotaSidebarState, SessionState } from './types.js';
 export { authFilePath, dateKeyFromTimestamp, normalizeTimestampMs, resolveOpencodeConfigDir, resolveOpencodeDataDir, stateFilePath, };
+export declare function quotaConfigPaths(worktree: string, directory: string): string[];
 export declare const defaultConfig: QuotaSidebarConfig;
 export declare function defaultState(): QuotaSidebarState;
 export declare function loadConfig(paths: string[]): Promise<QuotaSidebarConfig>;

package/dist/storage.js

@@ -6,11 +6,24 @@ import { dateKeyFromTimestamp, dateKeysInRange, dateStartFromKey, isDateKey, nor
 import { parseQuotaCache } from './storage_parse.js';
 import { authFilePath, chunkRootPathFromStateFile, resolveOpencodeConfigDir, resolveOpencodeDataDir, stateFilePath, } from './storage_paths.js';
 export { authFilePath, dateKeyFromTimestamp, normalizeTimestampMs, resolveOpencodeConfigDir, resolveOpencodeDataDir, stateFilePath, };
+export function quotaConfigPaths(worktree, directory) {
+    const configDir = resolveOpencodeConfigDir();
+    const configOverride = process.env.OPENCODE_QUOTA_CONFIG?.trim();
+    return [
+        path.join(configDir, 'quota-sidebar.config.json'),
+        path.join(worktree, 'quota-sidebar.config.json'),
+        path.join(directory, 'quota-sidebar.config.json'),
+        path.join(worktree, '.opencode', 'quota-sidebar.config.json'),
+        path.join(directory, '.opencode', 'quota-sidebar.config.json'),
+        ...(configOverride ? [path.resolve(configOverride)] : []),
+    ];
+}
 // ─── Default config ──────────────────────────────────────────────────────────
 export const defaultConfig = {
     sidebar: {
         enabled: true,
         width: 36,
+        titleMode: 'auto',
         multilineTitle: true,
         showCost: true,
         showQuota: true,
@@ -88,6 +101,11 @@ export async function loadConfig(paths) {
             sidebar: {
                 enabled: asBoolean(sidebar.enabled, base.sidebar.enabled),
                 width: Math.max(20, Math.min(60, asNumber(sidebar.width, base.sidebar.width))),
+                titleMode: sidebar.titleMode === 'compact' ||
+                    sidebar.titleMode === 'multiline' ||
+                    sidebar.titleMode === 'auto'
+                    ? sidebar.titleMode
+                    : (base.sidebar.titleMode ?? 'auto'),
                 multilineTitle: asBoolean(sidebar.multilineTitle, base.sidebar.multilineTitle ?? true),
                 showCost: asBoolean(sidebar.showCost, base.sidebar.showCost),
                 showQuota: asBoolean(sidebar.showQuota, base.sidebar.showQuota),

package/dist/storage_parse.d.ts

@@ -1,3 +1,3 @@
-import type { SessionState } from './types.js';
+import type { QuotaSnapshot, SessionState } from './types.js';
 export declare function parseSessionState(value: unknown): SessionState | undefined;
-export declare function parseQuotaCache(value: unknown): Record<string, import("./types.js").QuotaSnapshot>;
+export declare function parseQuotaCache(value: unknown): Record<string, QuotaSnapshot>;

package/dist/storage_parse.js

@@ -105,6 +105,92 @@ function parseCachedUsage(value) {
         providers,
     };
 }
+function parseQuotaSnapshot(value) {
+    if (!isRecord(value))
+        return undefined;
+    const checkedAt = asNumber(value.checkedAt, 0);
+    if (!checkedAt)
+        return undefined;
+    const status = value.status;
+    if (status !== 'ok' &&
+        status !== 'unavailable' &&
+        status !== 'unsupported' &&
+        status !== 'error') {
+        return undefined;
+    }
+    const label = typeof value.label === 'string' ? value.label : '';
+    const adapterID = typeof value.adapterID === 'string' ? value.adapterID : undefined;
+    const shortLabel = typeof value.shortLabel === 'string' ? value.shortLabel : undefined;
+    const sortOrder = typeof value.sortOrder === 'number' ? value.sortOrder : undefined;
+    const balance = isRecord(value.balance)
+        ? {
+            amount: typeof value.balance.amount === 'number' ? value.balance.amount : 0,
+            currency: typeof value.balance.currency === 'string'
+                ? value.balance.currency
+                : '$',
+        }
+        : undefined;
+    const windows = Array.isArray(value.windows)
+        ? value.windows
+            .filter((window) => isRecord(window))
+            .map((window) => ({
+            label: typeof window.label === 'string' ? window.label : '',
+            showPercent: typeof window.showPercent === 'boolean'
+                ? window.showPercent
+                : undefined,
+            resetLabel: typeof window.resetLabel === 'string'
+                ? window.resetLabel
+                : undefined,
+            note: typeof window.note === 'string' ? window.note : undefined,
+            remainingPercent: typeof window.remainingPercent === 'number'
+                ? window.remainingPercent
+                : undefined,
+            usedPercent: typeof window.usedPercent === 'number'
+                ? window.usedPercent
+                : undefined,
+            resetAt: typeof window.resetAt === 'string' ? window.resetAt : undefined,
+        }))
+            .filter((window) => window.label || window.remainingPercent !== undefined)
+        : undefined;
+    return {
+        providerID: typeof value.providerID === 'string' ? value.providerID : label,
+        adapterID,
+        label,
+        shortLabel,
+        sortOrder,
+        status,
+        checkedAt,
+        remainingPercent: typeof value.remainingPercent === 'number'
+            ? value.remainingPercent
+            : undefined,
+        usedPercent: typeof value.usedPercent === 'number' ? value.usedPercent : undefined,
+        resetAt: typeof value.resetAt === 'string' ? value.resetAt : undefined,
+        expiresAt: typeof value.expiresAt === 'string' ? value.expiresAt : undefined,
+        balance,
+        note: typeof value.note === 'string' ? value.note : undefined,
+        windows,
+    };
+}
+function parseQuotaSnapshots(value) {
+    if (!Array.isArray(value))
+        return undefined;
+    const parsed = value
+        .map((item) => parseQuotaSnapshot(item))
+        .filter((item) => Boolean(item));
+    return parsed.length > 0 ? parsed : [];
+}
+function parseSidebarPanel(value) {
+    if (!isRecord(value))
+        return undefined;
+    const updatedAt = asNumber(value.updatedAt, 0);
+    if (!updatedAt)
+        return undefined;
+    return {
+        updatedAt,
+        usage: parseCachedUsage(value.usage),
+        quotas: parseQuotaSnapshots(value.quotas),
+    };
+}
 function parseCursor(value) {
     if (!isRecord(value))
         return undefined;
@@ -137,75 +223,16 @@ export function parseSessionState(value) {
         usage: parseCachedUsage(value.usage),
         dirty: value.dirty === true,
         cursor: parseCursor(value.cursor),
+        sidebarPanel: parseSidebarPanel(value.sidebarPanel),
     };
 }
 export function parseQuotaCache(value) {
     const raw = isRecord(value) ? value : {};
     return Object.entries(raw).reduce((acc, [key, item]) => {
-        if (!isRecord(item))
-            return acc;
-        const checkedAt = asNumber(item.checkedAt, 0);
-        if (!checkedAt)
-            return acc;
-        const status = item.status;
-        if (status !== 'ok' &&
-            status !== 'unavailable' &&
-            status !== 'unsupported' &&
-            status !== 'error') {
+        const parsed = parseQuotaSnapshot(item);
+        if (!parsed)
             return acc;
-        }
-        const label = typeof item.label === 'string' ? item.label : key;
-        const adapterID = typeof item.adapterID === 'string' ? item.adapterID : undefined;
-        const shortLabel = typeof item.shortLabel === 'string' ? item.shortLabel : undefined;
-        const sortOrder = typeof item.sortOrder === 'number' ? item.sortOrder : undefined;
-        const balance = isRecord(item.balance)
-            ? {
-                amount: typeof item.balance.amount === 'number' ? item.balance.amount : 0,
-                currency: typeof item.balance.currency === 'string'
-                    ? item.balance.currency
-                    : '$',
-            }
-            : undefined;
-        const windows = Array.isArray(item.windows)
-            ? item.windows
-                .filter((window) => isRecord(window))
-                .map((window) => ({
-                label: typeof window.label === 'string' ? window.label : '',
-                showPercent: typeof window.showPercent === 'boolean'
-                    ? window.showPercent
-                    : undefined,
-                resetLabel: typeof window.resetLabel === 'string'
-                    ? window.resetLabel
-                    : undefined,
-                note: typeof window.note === 'string' ? window.note : undefined,
-                remainingPercent: typeof window.remainingPercent === 'number'
-                    ? window.remainingPercent
-                    : undefined,
-                usedPercent: typeof window.usedPercent === 'number'
-                    ? window.usedPercent
-                    : undefined,
-                resetAt: typeof window.resetAt === 'string' ? window.resetAt : undefined,
-            }))
-                .filter((window) => window.label || window.remainingPercent !== undefined)
-            : undefined;
-        acc[key] = {
-            providerID: typeof item.providerID === 'string' ? item.providerID : key,
-            adapterID,
-            label,
-            shortLabel,
-            sortOrder,
-            status,
-            checkedAt,
-            remainingPercent: typeof item.remainingPercent === 'number'
-                ? item.remainingPercent
-                : undefined,
-            usedPercent: typeof item.usedPercent === 'number' ? item.usedPercent : undefined,
-            resetAt: typeof item.resetAt === 'string' ? item.resetAt : undefined,
-            expiresAt: typeof item.expiresAt === 'string' ? item.expiresAt : undefined,
-            balance,
-            note: typeof item.note === 'string' ? item.note : undefined,
-            windows,
-        };
+        acc[key] = parsed.label ? parsed : { ...parsed, label: key };
         return acc;
     }, {});
 }

package/dist/title_apply.d.ts

@@ -1,6 +1,7 @@
 import type { PluginInput } from '@opencode-ai/plugin';
 import type { QuotaSidebarConfig, QuotaSidebarState, QuotaSnapshot, SessionState } from './types.js';
 import type { UsageSummary } from './usage.js';
+import { type TitleView } from './format.js';
 export declare function createTitleApplicator(deps: {
     state: QuotaSidebarState;
     config: QuotaSidebarConfig;
@@ -9,7 +10,8 @@ export declare function createTitleApplicator(deps: {
     ensureSessionState: (sessionID: string, title: string, createdAt: number, parentID?: string | null) => SessionState;
     markDirty: (dateKey: string | undefined) => void;
     scheduleSave: () => void;
-    renderSidebarTitle: (baseTitle: string, usage: UsageSummary, quotas: QuotaSnapshot[], config: QuotaSidebarConfig) => string;
+    renderSidebarTitle: (baseTitle: string, usage: UsageSummary, quotas: QuotaSnapshot[], config: QuotaSidebarConfig, view?: TitleView) => string;
+    getTitleView?: (sessionID: string) => TitleView;
     getQuotaSnapshots: (providerIDs: string[], options?: {
         allowDefault?: boolean;
     }) => Promise<QuotaSnapshot[]>;

package/dist/title_apply.js

@@ -1,6 +1,7 @@
 import { canonicalizeTitle, canonicalizeTitleForCompare, looksDecorated, normalizeBaseTitle, } from './title.js';
+import { toCachedSessionUsage } from './usage.js';
 import { swallow, debug, mapConcurrent } from './helpers.js';
-import { isDesktopClient, selectDesktopCompactProviderIDs } from './format.js';
+import { resolveTitleView, selectDesktopCompactProviderIDs, } from './format.js';
 export function createTitleApplicator(deps) {
     const pendingAppliedTitle = new Map();
     const recentRestore = new Map();
@@ -8,6 +9,11 @@ export function createTitleApplicator(deps) {
         pendingAppliedTitle.delete(sessionID);
         recentRestore.delete(sessionID);
     };
+    const cloneQuotas = (quotas) => quotas.map((quota) => ({
+        ...quota,
+        balance: quota.balance ? { ...quota.balance } : undefined,
+        windows: quota.windows?.map((win) => ({ ...win })),
+    }));
     const applyTitle = async (sessionID) => {
         if (!deps.config.sidebar.enabled || !deps.state.titleEnabled)
             return false;
@@ -73,13 +79,21 @@ export function createTitleApplicator(deps) {
             }
         }
         const usage = await deps.summarizeSessionUsageForDisplay(sessionID, deps.config.sidebar.includeChildren);
-        const quotaProviders = Array.from(new Set(isDesktopClient()
+        const view = deps.getTitleView?.(sessionID) ??
+            resolveTitleView({ config: deps.config, sessionID });
+        const quotaProviders = Array.from(new Set(view === 'compact'
             ? selectDesktopCompactProviderIDs(usage, deps.config)
             : Object.keys(usage.providers)));
         const quotas = deps.config.sidebar.showQuota && quotaProviders.length > 0
             ? await deps.getQuotaSnapshots(quotaProviders)
             : [];
-        const nextTitle = deps.renderSidebarTitle(sessionState.baseTitle, usage, quotas, deps.config);
+        sessionState.sidebarPanel = {
+            updatedAt: Date.now(),
+            usage: toCachedSessionUsage(usage),
+            quotas: cloneQuotas(quotas),
+        };
+        stateMutated = true;
+        const nextTitle = deps.renderSidebarTitle(sessionState.baseTitle, usage, quotas, deps.config, view);
         if (!deps.config.sidebar.enabled || !deps.state.titleEnabled)
             return false;
         if (canonicalizeTitleForCompare(nextTitle) ===

package/dist/tui.d.ts

@@ -0,0 +1,5 @@
+import type { TuiPluginModule } from '@opencode-ai/plugin/tui';
+declare const plugin: TuiPluginModule & {
+    id: string;
+};
+export default plugin;

package/dist/tui.js

@@ -0,0 +1,181 @@
+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;

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 export type QuotaStatus = 'ok' | 'unavailable' | 'unsupported' | 'error';
+export type SidebarTitleMode = 'auto' | 'multiline' | 'compact';
 export type QuotaWindow = {
     label: string;
     /** Set false when this window line should not render a trailing percentage. */
@@ -108,6 +109,11 @@ export type CachedSessionUsage = {
     recentProviders?: RecentProviderEvent[];
     providers: Record<string, CachedProviderUsage>;
 };
+export type SidebarPanelState = {
+    updatedAt: number;
+    usage?: CachedSessionUsage;
+    quotas?: QuotaSnapshot[];
+};
 /** Tracks incremental aggregation cursor for a session (P1). */
 export type IncrementalCursor = {
     /** ID of the last processed assistant message. */
@@ -128,6 +134,8 @@ export type SessionState = SessionTitleState & {
     dirty?: boolean;
     /** Incremental aggregation cursor (P1). */
     cursor?: IncrementalCursor;
+    /** Cached TUI sidebar panel payload for the session. */
+    sidebarPanel?: SidebarPanelState;
 };
 export type SessionDayChunk = {
     version: 1;
@@ -148,6 +156,11 @@ export type QuotaSidebarConfig = {
     sidebar: {
         enabled: boolean;
         width: number;
+        /**
+         * `auto`: keep the shared session title compact and let the dedicated TUI
+         * sidebar plugin render the rich panel layout.
+         */
+        titleMode?: SidebarTitleMode;
         /**
          * Legacy switch retained for compatibility.
          * TUI keeps a compact multiline sidebar layout; Desktop keeps a compact
@@ -166,7 +179,7 @@ export type QuotaSidebarConfig = {
         childrenMaxSessions: number;
         /** Concurrency for fetching descendant session messages (bounded). */
         childrenConcurrency: number;
-        /** Desktop-only compact title selection window by request count/time. */
+        /** Compact single-line title selection window by request count/time. */
         desktopCompact?: {
             recentRequests?: number;
             recentMinutes?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leo000001/opencode-quota-sidebar",
-  "version": "2.0.20",
+  "version": "2.0.26",
   "description": "OpenCode plugin that shows quota and token usage in session titles",
   "type": "module",
   "main": "dist/index.js",
@@ -9,8 +9,16 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./tui": {
+      "types": "./dist/tui.d.ts",
+      "default": "./dist/tui.js"
     }
   },
+  "oc-plugin": [
+    "server",
+    "tui"
+  ],
   "files": [
     "dist/*.js",
     "dist/*.d.ts",
@@ -56,12 +64,17 @@
     "node": ">=18"
   },
   "peerDependencies": {
-    "@opencode-ai/plugin": "^1.2.10",
-    "@opencode-ai/sdk": "^1.2.10"
+    "@opencode-ai/plugin": "^1.3.5",
+    "@opencode-ai/sdk": "^1.3.5"
+  },
+  "dependencies": {
+    "@opentui/core": "^0.1.92",
+    "@opentui/solid": "^0.1.92",
+    "solid-js": "^1.9.10"
   },
   "devDependencies": {
-    "@opencode-ai/plugin": "^1.2.10",
-    "@opencode-ai/sdk": "^1.2.10",
+    "@opencode-ai/plugin": "^1.3.5",
+    "@opencode-ai/sdk": "^1.3.5",
     "@types/node": "^22.13.10",
     "typescript": "^5.8.2"
   }

package/quota-sidebar.config.example.json

@@ -2,6 +2,7 @@
   "sidebar": {
     "enabled": true,
     "width": 36,
+    "titleMode": "auto",
     "multilineTitle": true,
     "showCost": true,
     "showQuota": true,