@slkiser/opencode-quota 5.0.0-beta.1 → 5.0.0

package/dist/tui.js

@@ -1,8 +1,8 @@
-import { memo as _$memo } from "@opentui/solid";
-import { effect as _$effect } from "@opentui/solid";
 import { use as _$use } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
 import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { insert as _$insert } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
@@ -10,16 +10,18 @@ import { createElement as _$createElement } from "@opentui/solid";
 /** @jsxImportSource @opentui/solid */
 
 import { Plugin } from "@opencode/plugin/tui";
-import { RGBA, TextAttributes } from "@opentui/core";
+import { TextAttributes } from "@opentui/core";
 import { useTerminalDimensions } from "@opentui/solid";
 import { createSignal, onCleanup, Show } from "solid-js";
 import { loadConfig } from "./lib/config.js";
 import { resolveOpenCodeLocationRoots } from "./lib/config-file-utils.js";
 import { sanitizeDisplayText } from "./lib/display-sanitize.js";
+import { fitTableToWidth } from "./lib/markdown-table.js";
+import { layoutQuotaTables } from "./lib/quota-columns.js";
 import { parseQuotaSlashCommand, QUOTA_DIALOG_COMMANDS } from "./lib/quota-dialog-command-specs.js";
-import { readQuotaReport, readQuotaReportMetadata } from "./lib/quota-report-message.js";
+import { readQuotaReportMetadata } from "./lib/quota-report-message.js";
+import { renderableSections, renderKvRow } from "./lib/report-document.js";
 import { QuotaRpc } from "./rpc.js";
-const terminalForeground = RGBA.defaultForeground();
 const REFRESH_INTERVAL_MS = 60_000;
 const RPC_TIMEOUT_MS = 60_000;
 function getSessionID(event) {
@@ -150,8 +152,8 @@ function QuotaFooter(props) {
       _$setProp(_el$, "flexDirection", "column");
       _$insert(_el$, () => lines().map(line => (() => {
         var _el$2 = _$createElement("text");
-        _$setProp(_el$2, "fg", terminalForeground);
         _$insert(_el$2, line);
+        _$effect(_$p => _$setProp(_el$2, "fg", props.context.theme.text.muted, _$p));
         return _el$2;
       })()));
       return _el$;
@@ -164,6 +166,244 @@ function reportFailure(error) {
   console.warn(`[opencode-quota] failed to load quota: ${rpcErrorMessage(error)}${hint}`);
 }
 
+/** OpenCode's dialog widths (dialogWidth in its ui/dialog.tsx). */
+const DIALOG_WIDTHS = {
+  medium: 60,
+  large: 88,
+  xlarge: 116
+};
+function sanitizeQuotaRow(row) {
+  return {
+    ...row,
+    label: sanitizeDisplayText(row.label),
+    value: sanitizeDisplayText(row.value),
+    usage: row.usage === undefined ? undefined : sanitizeDisplayText(row.usage),
+    reset: row.reset === undefined ? undefined : sanitizeDisplayText(row.reset),
+    notes: row.notes.map(sanitizeDisplayText)
+  };
+}
+
+/** A report's /quota blocks, sanitized, for layoutQuotaTables. */
+function quotaBlocks(section) {
+  return section.blocks.flatMap(block => block.kind === "quota" ? [{
+    ...block,
+    provider: sanitizeDisplayText(block.provider),
+    rows: block.rows.map(sanitizeQuotaRow)
+  }] : []);
+}
+
+/**
+ * A /quota table (see layoutQuotaTables): its title bold, like a section title, then its
+ * header bold in OpenCode's primary accent, like the token tables, and its providers bold.
+ * In the rows, labels, reset times, and notes are muted; bars, percents, and values base.
+ */
+function QuotaTableView(props) {
+  return (() => {
+    var _el$3 = _$createElement("box"),
+      _el$4 = _$createElement("text");
+    _$insertNode(_el$3, _el$4);
+    _$setProp(_el$3, "flexDirection", "column");
+    _$insert(_el$4, () => props.table.title);
+    _$insert(_el$3, () => props.table.lines.map(line => line.style === "row" ? (() => {
+      var _el$5 = _$createElement("text");
+      _$setProp(_el$5, "wrapMode", "none");
+      _$insert(_el$5, () => line.segments.map(segment => (() => {
+        var _el$6 = _$createElement("span");
+        _$insert(_el$6, () => segment.text);
+        _$effect(_$p => _$setProp(_el$6, "style", {
+          fg: segment.muted ? props.theme.text.muted : props.theme.text.base
+        }, _$p));
+        return _el$6;
+      })()));
+      _$effect(_$p => _$setProp(_el$5, "fg", props.theme.text.base, _$p));
+      return _el$5;
+    })() : (() => {
+      var _el$7 = _$createElement("text");
+      _$insert(_el$7, () => line.segments.map(segment => segment.text).join(""));
+      _$effect(_p$ => {
+        var _v$3 = TextAttributes.BOLD,
+          _v$4 = line.style === "header" ? props.theme.text.action.primary.selected : props.theme.text.base,
+          _v$5 = line.style === "header" ? "none" : undefined;
+        _v$3 !== _p$.e && (_p$.e = _$setProp(_el$7, "attributes", _v$3, _p$.e));
+        _v$4 !== _p$.t && (_p$.t = _$setProp(_el$7, "fg", _v$4, _p$.t));
+        _v$5 !== _p$.a && (_p$.a = _$setProp(_el$7, "wrapMode", _v$5, _p$.a));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined
+      });
+      return _el$7;
+    })()), null);
+    _$effect(_p$ => {
+      var _v$ = TextAttributes.BOLD,
+        _v$2 = props.theme.text.base;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$4, "attributes", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$4, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$3;
+  })();
+}
+
+/**
+ * One block of a report. Lines, and the chat lines of /quota rows the dialog's tables do not
+ * fit, and key-value rows wrap at words. A table keeps each row on one line and spans `width`
+ * columns when it fits (see fitTableToWidth), with the header row bold in OpenCode's primary
+ * accent (its text color for a selected tab). Like OpenCode's sidebar, labels are muted and
+ * values are base.
+ */
+function ReportBlockView(props) {
+  const block = props.block;
+  if (block.kind === "lines" || block.kind === "quota") {
+    return (() => {
+      var _el$8 = _$createElement("text");
+      _$insert(_el$8, () => sanitizeDisplayText(block.lines.join("\n")));
+      _$effect(_$p => _$setProp(_el$8, "fg", props.theme.text.muted, _$p));
+      return _el$8;
+    })();
+  }
+  if (block.kind === "kv") {
+    return (() => {
+      var _el$9 = _$createElement("box");
+      _$setProp(_el$9, "flexDirection", "column");
+      _$insert(_el$9, () => block.rows.map(({
+        value,
+        ...key
+      }) => value === undefined ? (() => {
+        var _el$0 = _$createElement("text");
+        _$insert(_el$0, () => sanitizeDisplayText(renderKvRow(key)));
+        _$effect(_$p => _$setProp(_el$0, "fg", props.theme.text.muted, _$p));
+        return _el$0;
+      })() : (() => {
+        var _el$1 = _$createElement("text"),
+          _el$10 = _$createElement("span"),
+          _el$11 = _$createTextNode(` `);
+        _$insertNode(_el$1, _el$10);
+        _$insert(_el$1, () => sanitizeDisplayText(renderKvRow({
+          ...key,
+          trailingColon: true
+        })), _el$10);
+        _$insertNode(_el$10, _el$11);
+        _$insert(_el$10, () => sanitizeDisplayText(value), null);
+        _$effect(_p$ => {
+          var _v$6 = props.theme.text.muted,
+            _v$7 = {
+              fg: props.theme.text.base
+            };
+          _v$6 !== _p$.e && (_p$.e = _$setProp(_el$1, "fg", _v$6, _p$.e));
+          _v$7 !== _p$.t && (_p$.t = _$setProp(_el$10, "style", _v$7, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$1;
+      })()));
+      return _el$9;
+    })();
+  }
+  // Read in the JSX, so the table is laid out again when the terminal is resized.
+  const table = () => fitTableToWidth({
+    headers: block.headers.map(sanitizeDisplayText),
+    fullHeaders: block.fullHeaders?.map(sanitizeDisplayText),
+    rows: block.rows.map(row => row.map(sanitizeDisplayText)),
+    aligns: block.aligns,
+    width: props.width
+  });
+  return (() => {
+    var _el$12 = _$createElement("box"),
+      _el$13 = _$createElement("text");
+    _$insertNode(_el$12, _el$13);
+    _$setProp(_el$12, "flexDirection", "column");
+    _$setProp(_el$13, "wrapMode", "none");
+    _$insert(_el$13, () => table().header);
+    _$insert(_el$12, () => table().rows.map(row => (() => {
+      var _el$14 = _$createElement("text");
+      _$setProp(_el$14, "wrapMode", "none");
+      _$insert(_el$14, row);
+      _$effect(_$p => _$setProp(_el$14, "fg", props.theme.text.base, _$p));
+      return _el$14;
+    })()), null);
+    _$effect(_p$ => {
+      var _v$8 = TextAttributes.BOLD,
+        _v$9 = props.theme.text.action.primary.selected;
+      _v$8 !== _p$.e && (_p$.e = _$setProp(_el$13, "attributes", _v$8, _p$.e));
+      _v$9 !== _p$.t && (_p$.t = _$setProp(_el$13, "fg", _v$9, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$12;
+  })();
+}
+
+/**
+ * Draws a report document's sections with the same spacing as its plain text: one blank row
+ * between the sections and between the blocks of a section, and a section title directly
+ * above its first block. Section titles are bold. A /quota report's provider sections come
+ * first; when their rows fit the dialog's tables (see layoutQuotaTables), the tables take
+ * their place. The dialog shows the heading's subtitle under its own title, so the heading
+ * line is left out.
+ */
+function ReportDocumentView(props) {
+  const sections = renderableSections(props.document);
+  const blocks = sections.flatMap(quotaBlocks);
+  // Read in the JSX, so the tables are laid out again when the terminal is resized.
+  const tables = () => blocks.length > 0 ? layoutQuotaTables(blocks, props.width) : undefined;
+  return (() => {
+    var _el$15 = _$createElement("box");
+    _$setProp(_el$15, "flexDirection", "column");
+    _$setProp(_el$15, "gap", 1);
+    _$insert(_el$15, () => [...(tables() ?? []).map(table => _$createComponent(QuotaTableView, {
+      table: table,
+      get theme() {
+        return props.theme;
+      }
+    })), ...sections.filter(section => !tables() || !section.blocks.some(block => block.kind === "quota")).map(section => (() => {
+      var _el$16 = _$createElement("box"),
+        _el$17 = _$createElement("box");
+      _$insertNode(_el$16, _el$17);
+      _$setProp(_el$16, "flexDirection", "column");
+      _$insert(_el$16, (() => {
+        var _c$ = _$memo(() => !!section.title);
+        return () => _c$() ? (() => {
+          var _el$18 = _$createElement("text");
+          _$insert(_el$18, () => sanitizeDisplayText(section.title));
+          _$effect(_p$ => {
+            var _v$0 = TextAttributes.BOLD,
+              _v$1 = props.theme.text.base;
+            _v$0 !== _p$.e && (_p$.e = _$setProp(_el$18, "attributes", _v$0, _p$.e));
+            _v$1 !== _p$.t && (_p$.t = _$setProp(_el$18, "fg", _v$1, _p$.t));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$18;
+        })() : null;
+      })(), _el$17);
+      _$setProp(_el$17, "flexDirection", "column");
+      _$setProp(_el$17, "gap", 1);
+      _$insert(_el$17, () => section.blocks.map(block => _$createComponent(ReportBlockView, {
+        block: block,
+        get theme() {
+          return props.theme;
+        },
+        get width() {
+          return props.width;
+        }
+      })));
+      return _el$16;
+    })())]);
+    return _el$15;
+  })();
+}
+
 /**
  * Shows command output like OpenCode's alert dialog, but inside a scrollbox so long
  * reports (/quota_status, /tokens_*) stay reachable. The mouse wheel scrolls the box;
@@ -173,9 +413,15 @@ function reportFailure(error) {
 function QuotaOutputDialog(props) {
   const theme = () => props.context.theme.surface("dialog");
   const dimensions = useTerminalDimensions();
+  // OpenCode's dialog is its size's width, at most the terminal width minus 2. Inside it
+  // come this box's paddings (2 + 2) and one column for the scrollbox's scrollbar, which
+  // shows when the report is taller than the box.
+  const tableWidth = () => Math.min(DIALOG_WIDTHS[props.size], dimensions().width - 2) - 4 - 1;
+  const subtitle = props.document.heading?.subtitle;
   // The host dialog starts a quarter of the way down the terminal. The remaining
-  // 8 rows cover the title, ok button, paddings, gaps, and one spare row.
-  const maxHeight = () => Math.max(1, Math.floor(dimensions().height * 0.75) - 8);
+  // 8 rows cover the title, ok button, paddings, gaps, and one spare row; the subtitle
+  // takes one more.
+  const maxHeight = () => Math.max(1, Math.floor(dimensions().height * 0.75) - 8 - (subtitle ? 1 : 0));
   let scroll;
   const close = () => props.context.ui.dialog.clear();
   props.context.keymap.layer(() => ({
@@ -218,60 +464,74 @@ function QuotaOutputDialog(props) {
     }]
   }));
   return (() => {
-    var _el$3 = _$createElement("box"),
-      _el$4 = _$createElement("box"),
-      _el$5 = _$createElement("text"),
-      _el$6 = _$createElement("text"),
-      _el$8 = _$createElement("box"),
-      _el$9 = _$createElement("scrollbox"),
-      _el$0 = _$createElement("text"),
-      _el$1 = _$createElement("box"),
-      _el$10 = _$createElement("box"),
-      _el$11 = _$createElement("text");
-    _$insertNode(_el$3, _el$4);
-    _$insertNode(_el$3, _el$8);
-    _$insertNode(_el$3, _el$1);
-    _$setProp(_el$3, "paddingLeft", 2);
-    _$setProp(_el$3, "paddingRight", 2);
-    _$setProp(_el$3, "gap", 1);
-    _$insertNode(_el$4, _el$5);
-    _$insertNode(_el$4, _el$6);
-    _$setProp(_el$4, "flexDirection", "row");
-    _$setProp(_el$4, "justifyContent", "space-between");
-    _$insert(_el$5, () => props.title);
-    _$insertNode(_el$6, _$createTextNode(`esc`));
-    _$setProp(_el$6, "onMouseUp", close);
-    _$insertNode(_el$8, _el$9);
-    _$setProp(_el$8, "paddingBottom", 1);
-    _$insertNode(_el$9, _el$0);
+    var _el$19 = _$createElement("box"),
+      _el$20 = _$createElement("box"),
+      _el$21 = _$createElement("box"),
+      _el$22 = _$createElement("text"),
+      _el$23 = _$createElement("text"),
+      _el$25 = _$createElement("box"),
+      _el$26 = _$createElement("scrollbox"),
+      _el$27 = _$createElement("box"),
+      _el$28 = _$createElement("box"),
+      _el$29 = _$createElement("text");
+    _$insertNode(_el$19, _el$20);
+    _$insertNode(_el$19, _el$25);
+    _$insertNode(_el$19, _el$27);
+    _$setProp(_el$19, "paddingLeft", 2);
+    _$setProp(_el$19, "paddingRight", 2);
+    _$setProp(_el$19, "gap", 1);
+    _$insertNode(_el$20, _el$21);
+    _$insertNode(_el$21, _el$22);
+    _$insertNode(_el$21, _el$23);
+    _$setProp(_el$21, "flexDirection", "row");
+    _$setProp(_el$21, "justifyContent", "space-between");
+    _$insert(_el$22, () => props.title);
+    _$insertNode(_el$23, _$createTextNode(`esc`));
+    _$setProp(_el$23, "onMouseUp", close);
+    _$insert(_el$20, subtitle ? (() => {
+      var _el$31 = _$createElement("text");
+      _$insert(_el$31, () => sanitizeDisplayText(subtitle));
+      _$effect(_$p => _$setProp(_el$31, "fg", theme().text.muted, _$p));
+      return _el$31;
+    })() : null, null);
+    _$insertNode(_el$25, _el$26);
+    _$setProp(_el$25, "paddingBottom", 1);
     _$use(element => {
       scroll = element;
-    }, _el$9);
-    _$insert(_el$0, () => props.message);
-    _$insertNode(_el$1, _el$10);
-    _$setProp(_el$1, "flexDirection", "row");
-    _$setProp(_el$1, "justifyContent", "flex-end");
-    _$setProp(_el$1, "paddingBottom", 1);
-    _$insertNode(_el$10, _el$11);
-    _$setProp(_el$10, "paddingLeft", 3);
-    _$setProp(_el$10, "paddingRight", 3);
-    _$setProp(_el$10, "onMouseUp", close);
-    _$insertNode(_el$11, _$createTextNode(`ok`));
+    }, _el$26);
+    _$insert(_el$26, _$createComponent(ReportDocumentView, {
+      get document() {
+        return props.document;
+      },
+      get theme() {
+        return theme();
+      },
+      get width() {
+        return tableWidth();
+      }
+    }));
+    _$insertNode(_el$27, _el$28);
+    _$setProp(_el$27, "flexDirection", "row");
+    _$setProp(_el$27, "justifyContent", "flex-end");
+    _$setProp(_el$27, "paddingBottom", 1);
+    _$insertNode(_el$28, _el$29);
+    _$setProp(_el$28, "paddingLeft", 3);
+    _$setProp(_el$28, "paddingRight", 3);
+    _$setProp(_el$28, "onMouseUp", close);
+    _$insertNode(_el$29, _$createTextNode(`ok`));
     _$effect(_p$ => {
-      var _v$ = TextAttributes.BOLD,
-        _v$2 = theme().text.base,
-        _v$3 = theme().text.muted,
-        _v$4 = maxHeight(),
-        _v$5 = theme().text.muted,
-        _v$6 = theme().background.action.primary.focused,
-        _v$7 = theme().text.action.primary.focused;
-      _v$ !== _p$.e && (_p$.e = _$setProp(_el$5, "attributes", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$5, "fg", _v$2, _p$.t));
-      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$6, "fg", _v$3, _p$.a));
-      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$9, "maxHeight", _v$4, _p$.o));
-      _v$5 !== _p$.i && (_p$.i = _$setProp(_el$0, "fg", _v$5, _p$.i));
-      _v$6 !== _p$.n && (_p$.n = _$setProp(_el$10, "backgroundColor", _v$6, _p$.n));
-      _v$7 !== _p$.s && (_p$.s = _$setProp(_el$11, "fg", _v$7, _p$.s));
+      var _v$10 = TextAttributes.BOLD,
+        _v$11 = theme().text.base,
+        _v$12 = theme().text.muted,
+        _v$13 = maxHeight(),
+        _v$14 = theme().background.action.primary.focused,
+        _v$15 = theme().text.action.primary.focused;
+      _v$10 !== _p$.e && (_p$.e = _$setProp(_el$22, "attributes", _v$10, _p$.e));
+      _v$11 !== _p$.t && (_p$.t = _$setProp(_el$22, "fg", _v$11, _p$.t));
+      _v$12 !== _p$.a && (_p$.a = _$setProp(_el$23, "fg", _v$12, _p$.a));
+      _v$13 !== _p$.o && (_p$.o = _$setProp(_el$26, "maxHeight", _v$13, _p$.o));
+      _v$14 !== _p$.i && (_p$.i = _$setProp(_el$28, "backgroundColor", _v$14, _p$.i));
+      _v$15 !== _p$.n && (_p$.n = _$setProp(_el$29, "fg", _v$15, _p$.n));
       return _p$;
     }, {
       e: undefined,
@@ -279,10 +539,9 @@ function QuotaOutputDialog(props) {
       a: undefined,
       o: undefined,
       i: undefined,
-      n: undefined,
-      s: undefined
+      n: undefined
     });
-    return _el$3;
+    return _el$19;
   })();
 }
 function showQuotaOutputDialog(context, output) {
@@ -292,8 +551,11 @@ function showQuotaOutputDialog(context, output) {
       get title() {
         return output.title;
       },
-      get message() {
-        return output.message;
+      get document() {
+        return output.document;
+      },
+      get size() {
+        return output.dialogSize;
       }
     }), resolve);
     context.ui.dialog.set({
@@ -327,7 +589,7 @@ async function runQuotaCommand(context, command, sessionID, typed) {
     if (result.state === "noop") return;
     await showQuotaOutputDialog(context, {
       title: result.title,
-      message: result.output,
+      document: result.document,
       dialogSize: result.dialogSize
     });
   } catch (error) {
@@ -375,7 +637,7 @@ async function showPostedQuotaReport(context, event) {
   });
   void showQuotaOutputDialog(context, {
     title: report.title,
-    message: readQuotaReport(item.payload.text),
+    document: report.document,
     dialogSize: spec.dialogSize
   });
 }
@@ -453,46 +715,45 @@ function SidebarQuotaView(props) {
     unsubscribe();
   });
   return (() => {
-    var _el$13 = _$createElement("box"),
-      _el$14 = _$createElement("box"),
-      _el$16 = _$createElement("text"),
-      _el$17 = _$createElement("b");
-    _$insertNode(_el$13, _el$14);
-    _$setProp(_el$13, "flexDirection", "column");
-    _$insertNode(_el$14, _el$16);
-    _$setProp(_el$14, "flexDirection", "row");
-    _$setProp(_el$14, "gap", 1);
-    _$setProp(_el$14, "onMouseDown", () => expandable() && setOpen(value => !value));
-    _$insert(_el$14, _$createComponent(Show, {
+    var _el$32 = _$createElement("box"),
+      _el$33 = _$createElement("box"),
+      _el$35 = _$createElement("text"),
+      _el$36 = _$createElement("b");
+    _$insertNode(_el$32, _el$33);
+    _$setProp(_el$32, "flexDirection", "column");
+    _$insertNode(_el$33, _el$35);
+    _$setProp(_el$33, "flexDirection", "row");
+    _$setProp(_el$33, "gap", 1);
+    _$setProp(_el$33, "onMouseDown", () => expandable() && setOpen(value => !value));
+    _$insert(_el$33, _$createComponent(Show, {
       get when() {
         return expandable();
       },
       get children() {
-        var _el$15 = _$createElement("text");
-        _$setProp(_el$15, "fg", terminalForeground);
-        _$insert(_el$15, () => open() ? "▼" : "▶");
-        return _el$15;
+        var _el$34 = _$createElement("text");
+        _$insert(_el$34, () => open() ? "▼" : "▶");
+        _$effect(_$p => _$setProp(_el$34, "fg", props.context.theme.text.base, _$p));
+        return _el$34;
       }
-    }), _el$16);
-    _$insertNode(_el$16, _el$17);
-    _$setProp(_el$16, "fg", terminalForeground);
-    _$insertNode(_el$17, _$createTextNode(`Quota`));
-    _$insert(_el$16, _$createComponent(Show, {
+    }), _el$35);
+    _$insertNode(_el$35, _el$36);
+    _$insertNode(_el$36, _$createTextNode(`Quota`));
+    _$insert(_el$35, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!(expandable() && !open()))() && quota()?.activeProviderCount;
       },
       children: count => ` (${count()} active)`
     }), null);
-    _$insert(_el$13, _$createComponent(Show, {
+    _$insert(_el$32, _$createComponent(Show, {
       get when() {
         return quota();
       },
       get fallback() {
         return (() => {
-          var _el$19 = _$createElement("text");
-          _$insertNode(_el$19, _$createTextNode(`No quota data available`));
-          _$setProp(_el$19, "fg", terminalForeground);
-          return _el$19;
+          var _el$38 = _$createElement("text");
+          _$insertNode(_el$38, _$createTextNode(`No quota data available`));
+          _$effect(_$p => _$setProp(_el$38, "fg", props.context.theme.text.muted, _$p));
+          return _el$38;
         })();
       },
       get children() {
@@ -501,18 +762,29 @@ function SidebarQuotaView(props) {
             return !expandable() || open();
           },
           get children() {
-            return lines().map(line => (() => {
-              var _el$21 = _$createElement("text");
-              _$setProp(_el$21, "fg", terminalForeground);
-              _$setProp(_el$21, "wrapMode", "none");
-              _$insert(_el$21, line || " ");
-              return _el$21;
+            return lines().map(line =>
+            // Provider headers such as "[Copilot] (individual)" are bold, like section titles.
+            line.startsWith("[") ? (() => {
+              var _el$40 = _$createElement("text"),
+                _el$41 = _$createElement("b");
+              _$insertNode(_el$40, _el$41);
+              _$setProp(_el$40, "wrapMode", "none");
+              _$insert(_el$41, line);
+              _$effect(_$p => _$setProp(_el$40, "fg", props.context.theme.text.base, _$p));
+              return _el$40;
+            })() : (() => {
+              var _el$42 = _$createElement("text");
+              _$setProp(_el$42, "wrapMode", "none");
+              _$insert(_el$42, line || " ");
+              _$effect(_$p => _$setProp(_el$42, "fg", props.context.theme.text.muted, _$p));
+              return _el$42;
             })());
           }
         });
       }
     }), null);
-    return _el$13;
+    _$effect(_$p => _$setProp(_el$35, "fg", props.context.theme.text.base, _$p));
+    return _el$32;
   })();
 }
 const plugin = Plugin.define({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slkiser/opencode-quota",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0",
   "description": "OpenCode quota & tokens usage with zero context window pollution. Supports GitHub Copilot, OpenAI (Plus/Pro), Chutes AI, Synthetic, Google AGY, Z.ai coding plan and more.",
   "type": "module",
   "main": "./dist/index.js",