@leo000001/opencode-quota-sidebar 3.0.0 → 3.0.1

package/dist/format.d.ts

@@ -27,6 +27,10 @@ export declare function renderSidebarUsageLines(usage: UsageSummary, config: Quo
     showCost?: boolean;
 }): string[];
 export declare function renderSidebarQuotaLines(quotas: QuotaSnapshot[], config: QuotaSidebarConfig): string[];
+export declare function renderSidebarQuotaLineGroups(quotas: QuotaSnapshot[], config: QuotaSidebarConfig): {
+    quota: QuotaSnapshot;
+    lines: string[];
+}[];
 export declare function renderMarkdownReport(period: string, usage: UsageSummary, quotas: QuotaSnapshot[], options?: {
     showCost?: boolean;
 }): string;

package/dist/format.js

@@ -599,6 +599,9 @@ export function renderSidebarUsageLines(usage, config, options) {
     }).map((line) => fitLine(line, width));
 }
 export function renderSidebarQuotaLines(quotas, config) {
+    return renderSidebarQuotaLineGroups(quotas, config).flatMap((group) => group.lines);
+}
+export function renderSidebarQuotaLineGroups(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) => {
@@ -606,14 +609,18 @@ export function renderSidebarQuotaLines(quotas, config) {
         return Math.max(max, stringCellWidth(label));
     }, 0);
     return visibleQuotas
-        .flatMap((item) => compactQuotaWide(item, labelWidth, {
-        width,
-        wrapLines: config.sidebar.wrapQuotaLines,
-        forceWrapped: false,
-        compactDetails: true,
+        .map((item) => ({
+        quota: item,
+        lines: compactQuotaWide(item, labelWidth, {
+            width,
+            wrapLines: config.sidebar.wrapQuotaLines,
+            forceWrapped: false,
+            compactDetails: true,
+        })
+            .filter((line) => Boolean(line))
+            .map((line) => fitLine(line, width)),
     }))
-        .filter((line) => Boolean(line))
-        .map((line) => fitLine(line, width));
+        .filter((group) => group.lines.length > 0);
 }
 /**
  * Multi-window quota format for sidebar.

package/dist/tui.tsx

@@ -6,11 +6,15 @@ import type {
 } from '@opencode-ai/plugin/tui'
 import { createMemo, createSignal, For, onCleanup, Show } from 'solid-js'
 
+import { fitLine, renderSidebarUsageLines } from './format.js'
 import {
-  fitLine,
-  renderSidebarQuotaLines,
-  renderSidebarUsageLines,
-} from './format.js'
+  fallbackQuotaGroupsFromTitle,
+  quotaGroupsAreCollapsible,
+  quotaGroupsSummary,
+  quotaGroupsUseBullets,
+  renderSidebarQuotaGroups,
+  type SidebarQuotaGroup,
+} from './tui_helpers.js'
 import {
   loadConfig,
   loadState,
@@ -31,7 +35,7 @@ type SidebarPanelData = {
   enabled: boolean
   width: number
   usageLines: string[]
-  quotaLines: string[]
+  quotaGroups: SidebarQuotaGroup[]
   compactTitle?: string
 }
 
@@ -96,7 +100,7 @@ async function loadSidebarPanel(
       enabled,
       width,
       usageLines: [],
-      quotaLines: [],
+      quotaGroups: [],
       compactTitle: session?.lastAppliedTitle,
     }
   }
@@ -104,7 +108,7 @@ async function loadSidebarPanel(
   const usageLines = usage
     ? renderSidebarUsageLines(usage, panelConfig(config))
     : []
-  const quotaLines = renderSidebarQuotaLines(
+  const quotaGroups = renderSidebarQuotaGroups(
     session?.sidebarPanel?.quotas || [],
     panelConfig(config),
   )
@@ -113,7 +117,7 @@ async function loadSidebarPanel(
     enabled,
     width,
     usageLines,
-    quotaLines,
+    quotaGroups,
     compactTitle,
   }
 }
@@ -193,20 +197,83 @@ function useSidebarPanelData(api: TuiPluginApi, sessionID: () => string) {
   return panel
 }
 
-function sectionHeading(api: TuiPluginApi, value: string) {
-  return <text fg={api.theme.current.textMuted}>{value}</text>
+function SectionHeading(props: {
+  api: TuiPluginApi
+  value: string
+  collapsible?: boolean
+  open?: boolean
+  summary?: string
+  onToggle?: () => void
+}) {
+  const clickable = () => props.collapsible === true && props.onToggle
+
+  return (
+    <box
+      flexDirection="row"
+      gap={1}
+      onMouseDown={() => {
+        if (!clickable()) return
+        props.onToggle?.()
+      }}
+    >
+      <Show when={props.collapsible}>
+        <text fg={props.api.theme.current.text}>{props.open ? '▼' : '▶'}</text>
+      </Show>
+      <text fg={props.api.theme.current.text}>
+        <b>{props.value}</b>
+        <Show when={props.summary}>
+          <span style={{ fg: props.api.theme.current.textMuted }}>
+            {' '}
+            {props.summary}
+          </span>
+        </Show>
+      </text>
+    </box>
+  )
 }
 
-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 quotaToneColor(api: TuiPluginApi, tone: SidebarQuotaGroup['tone']) {
+  const theme = api.theme.current
+  if (tone === 'success') return theme.success
+  if (tone === 'warning') return theme.warning
+  if (tone === 'error') return theme.error
+  return theme.textMuted
+}
+
+function QuotaGroupBlock(props: {
+  api: TuiPluginApi
+  group: SidebarQuotaGroup
+  bullet: boolean
+}) {
+  const content = (
+    <box gap={0}>
+      <text>
+        <span style={{ fg: props.api.theme.current.text }}>
+          {props.group.shortLabel}
+        </span>
+        <Show when={props.group.detail}>
+          <span style={{ fg: props.api.theme.current.textMuted }}>
+            {' '}
+            {props.group.detail}
+          </span>
+        </Show>
+      </text>
+      <For each={props.group.continuationLines}>
+        {(line) => <text fg={props.api.theme.current.textMuted}>{line}</text>}
+      </For>
+    </box>
+  )
+
+  return (
+    <Show when={props.bullet} fallback={content}>
+      <box flexDirection="row" gap={1}>
+        <text flexShrink={0} fg={quotaToneColor(props.api, props.group.tone)}>
+          •
+        </text>
+        {content}
+      </box>
+    </Show>
+  )
 }
 
 function fallbackUsageCostLineFromTitle(title: string, width: number) {
@@ -220,6 +287,7 @@ function fallbackUsageCostLineFromTitle(title: string, width: number) {
 
 function SidebarContentView(props: { api: TuiPluginApi; sessionID: string }) {
   const panel = useSidebarPanelData(props.api, () => props.sessionID)
+  const [quotaOpen, setQuotaOpen] = createSignal(true)
   const width = createMemo(
     () => panel()?.width || DEFAULT_WIDTH - SECTION_INDENT,
   )
@@ -234,22 +302,32 @@ function SidebarContentView(props: { api: TuiPluginApi; sessionID: string }) {
     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 quotaGroups = createMemo(() => {
+    const liveGroups = panel()?.quotaGroups || []
+    if (liveGroups.length > 0) return liveGroups
+    return fallbackQuotaGroupsFromTitle(compactTitle(), width())
   })
   const hasUsage = createMemo(() => usageLines().length > 0)
-  const hasQuota = createMemo(() => quotaLines().length > 0)
+  const hasQuota = createMemo(() => quotaGroups().length > 0)
+  const quotaBullets = createMemo(() => quotaGroupsUseBullets(quotaGroups()))
+  const quotaCollapsible = createMemo(() =>
+    quotaGroupsAreCollapsible(quotaGroups()),
+  )
+  const quotaSummary = createMemo(() => {
+    if (!quotaCollapsible() || quotaOpen()) return undefined
+    return quotaGroupsSummary(quotaGroups())
+  })
 
   return (
     <box gap={0}>
       <Show when={hasUsage()}>
         <box gap={0}>
-          {sectionHeading(props.api, 'USAGE')}
+          <SectionHeading api={props.api} value="Usage" />
           <box gap={0}>
             <For each={usageLines()}>
-              {(line) => <text fg={props.api.theme.current.text}>{line}</text>}
+              {(line) => (
+                <text fg={props.api.theme.current.textMuted}>{line}</text>
+              )}
             </For>
           </box>
         </box>
@@ -257,12 +335,27 @@ function SidebarContentView(props: { api: TuiPluginApi; sessionID: string }) {
 
       <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>
+          <SectionHeading
+            api={props.api}
+            value="Quota"
+            collapsible={quotaCollapsible()}
+            open={quotaOpen()}
+            summary={quotaSummary()}
+            onToggle={() => setQuotaOpen((value) => !value)}
+          />
+          <Show when={!quotaCollapsible() || quotaOpen()}>
+            <box gap={0}>
+              <For each={quotaGroups()}>
+                {(group) => (
+                  <QuotaGroupBlock
+                    api={props.api}
+                    group={group}
+                    bullet={quotaBullets()}
+                  />
+                )}
+              </For>
+            </box>
+          </Show>
         </box>
       </Show>
     </box>
@@ -292,10 +385,13 @@ function SidebarTitleView(props: {
 
   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>}
+          {(line) => (
+            <text fg={props.api.theme.current.text}>
+              <b>{line}</b>
+            </text>
+          )}
         </For>
         <Show when={shareLine()}>
           <text fg={props.api.theme.current.textMuted}>{shareLine()}</text>

package/dist/tui_helpers.d.ts

@@ -0,0 +1,15 @@
+import type { QuotaSidebarConfig, QuotaSnapshot } from './types.js';
+export type SidebarQuotaTone = 'success' | 'warning' | 'error' | 'muted';
+export type SidebarQuotaGroup = {
+    providerID: string;
+    status: QuotaSnapshot['status'];
+    tone: SidebarQuotaTone;
+    shortLabel: string;
+    detail: string;
+    continuationLines: string[];
+};
+export declare function renderSidebarQuotaGroups(quotas: QuotaSnapshot[], config: QuotaSidebarConfig): SidebarQuotaGroup[];
+export declare function fallbackQuotaGroupsFromTitle(title: string, width: number): SidebarQuotaGroup[];
+export declare function quotaGroupsUseBullets(groups: SidebarQuotaGroup[]): boolean;
+export declare function quotaGroupsAreCollapsible(groups: SidebarQuotaGroup[]): boolean;
+export declare function quotaGroupsSummary(groups: SidebarQuotaGroup[]): string | undefined;

package/dist/tui_helpers.js

@@ -0,0 +1,141 @@
+import { fitLine, renderSidebarQuotaLineGroups } from './format.js';
+import { collapseQuotaSnapshots } from './quota_render.js';
+const VISIBLE_QUOTA_STATUSES = new Set([
+    'ok',
+    'error',
+    'unsupported',
+    'unavailable',
+]);
+function parseQuotaLineParts(lines) {
+    const firstLine = lines[0]?.trimStart() || '';
+    const match = /^(\S+)(?:\s+(.*))?$/.exec(firstLine);
+    const shortLabel = match?.[1] || firstLine || 'Quota';
+    const detail = match?.[2] || '';
+    const continuationLines = lines
+        .slice(1)
+        .map((line) => line.trimEnd())
+        .filter((line) => Boolean(line.trim()));
+    return {
+        shortLabel,
+        detail,
+        continuationLines,
+    };
+}
+function quotaPercents(quota) {
+    const values = [];
+    if (quota.remainingPercent !== undefined &&
+        Number.isFinite(quota.remainingPercent)) {
+        values.push(quota.remainingPercent);
+    }
+    for (const window of quota.windows || []) {
+        if (window.remainingPercent !== undefined &&
+            Number.isFinite(window.remainingPercent)) {
+            values.push(window.remainingPercent);
+        }
+    }
+    return values;
+}
+function quotaTone(quota) {
+    if (quota.status === 'error')
+        return 'error';
+    if (quota.status === 'unsupported' || quota.status === 'unavailable') {
+        return 'muted';
+    }
+    if (quota.status !== 'ok')
+        return 'muted';
+    const percents = quotaPercents(quota);
+    if (percents.length === 0) {
+        if (quota.balance && Number.isFinite(quota.balance.amount)) {
+            if (quota.balance.amount < 0)
+                return 'error';
+            return 'muted';
+        }
+        return 'muted';
+    }
+    const remaining = Math.min(...percents);
+    if (remaining <= 5)
+        return 'error';
+    if (remaining <= 20)
+        return 'warning';
+    return 'success';
+}
+function fallbackQuotaTone(detail) {
+    const safe = detail.trim();
+    if (!safe)
+        return 'muted';
+    if (/\b(?:unsupported|unavailable)\b/i.test(safe))
+        return 'muted';
+    if (/\berror\b/i.test(safe) || /^\?$/.test(safe))
+        return 'error';
+    if (/\bB-/.test(safe))
+        return 'error';
+    const percents = [...safe.matchAll(/\b(?:\d+[hdw]|[DWM]|S7d)(\d{1,3})\b/gi)]
+        .map((match) => Number(match[1]))
+        .filter((value) => Number.isFinite(value));
+    if (percents.length === 0)
+        return 'muted';
+    const remaining = Math.min(...percents);
+    if (remaining <= 5)
+        return 'error';
+    if (remaining <= 20)
+        return 'warning';
+    return 'success';
+}
+export function renderSidebarQuotaGroups(quotas, config) {
+    const visibleQuotaCount = collapseQuotaSnapshots(quotas).filter((quota) => VISIBLE_QUOTA_STATUSES.has(quota.status)).length;
+    const renderConfig = visibleQuotaCount > 1
+        ? {
+            ...config,
+            sidebar: {
+                ...config.sidebar,
+                width: Math.max(8, config.sidebar.width - 2),
+            },
+        }
+        : config;
+    return renderSidebarQuotaLineGroups(quotas, renderConfig).map((group) => {
+        const parsed = parseQuotaLineParts(group.lines);
+        return {
+            providerID: group.quota.providerID,
+            status: group.quota.status,
+            tone: quotaTone(group.quota),
+            shortLabel: parsed.shortLabel,
+            detail: parsed.detail,
+            continuationLines: parsed.continuationLines,
+        };
+    });
+}
+export function fallbackQuotaGroupsFromTitle(title, width) {
+    const parts = (title || '')
+        .split(' | ')
+        .map((part) => part.trim())
+        .filter(Boolean);
+    const quotaParts = parts
+        .slice(1)
+        .filter((part) => !/^Cd\d/.test(part) && !/^Est\b/.test(part));
+    if (quotaParts.length === 0)
+        return [];
+    const contentWidth = quotaParts.length > 1 ? Math.max(1, width - 2) : width;
+    return quotaParts.map((part, index) => {
+        const line = fitLine(part, contentWidth);
+        const parsed = parseQuotaLineParts([line]);
+        return {
+            providerID: `fallback:${index}`,
+            status: 'ok',
+            tone: fallbackQuotaTone(parsed.detail),
+            shortLabel: parsed.shortLabel,
+            detail: parsed.detail,
+            continuationLines: parsed.continuationLines,
+        };
+    });
+}
+export function quotaGroupsUseBullets(groups) {
+    return groups.length > 1;
+}
+export function quotaGroupsAreCollapsible(groups) {
+    return groups.length > 2;
+}
+export function quotaGroupsSummary(groups) {
+    if (groups.length === 0)
+        return undefined;
+    return `(${groups.length})`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leo000001/opencode-quota-sidebar",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "OpenCode plugin that shows quota and token usage in TUI sidebar panels and compact session titles",
   "type": "module",
   "main": "dist/index.js",