Merge pull request #270 from slkiser/fix/quota-sidebar-readability

fix: improve quota sidebar readability

Author: slkiser

src/lib/toast-format-grouped.ts

@@ -131,7 +131,18 @@ export function formatQuotaRowsGrouped(params: {
         : [groupHeader.slice(0, maxWidth)]),
     );
 
+    let renderedEntryBlocks = 0;
     for (const entry of list) {
+      let entryBlockStarted = false;
+      const pushEntryLine = (line: string) => {
+        if (!entryBlockStarted) {
+          if (renderedEntryBlocks > 0) lines.push("");
+          renderedEntryBlocks++;
+          entryBlockStarted = true;
+        }
+        lines.push(line);
+      };
+
       const interpretation = interpretAccountingRow(entry, {
         booleanWording: "semantic",
         ...(!isTiny
@@ -170,24 +181,24 @@ export function formatQuotaRowsGrouped(params: {
           labelAndValue.length <= maxWidth &&
           labelAndValue.length + separator.length + timeStr.length > maxWidth
         ) {
-          lines.push(labelAndValue);
-          lines.push(padLeft(timeStr, maxWidth));
+          pushEntryLine(labelAndValue);
+          pushEntryLine(padLeft(timeStr, maxWidth));
           continue;
         }
 
         if (isAtomicValue) {
           const suffix = [value, timeStr].filter(Boolean).join(separator);
           if (suffix.length > maxWidth) {
-            if (value.length <= maxWidth) lines.push(padLeft(value, maxWidth));
+            if (value.length <= maxWidth) pushEntryLine(padLeft(value, maxWidth));
             continue;
           }
           const availableLabelWidth = maxWidth - (suffix ? separator.length + suffix.length : 0);
           if (availableLabelWidth <= 0) {
-            lines.push(padLeft(suffix, maxWidth));
+            pushEntryLine(padLeft(suffix, maxWidth));
             continue;
           }
           const leftText = label.slice(0, availableLabelWidth).trimEnd();
-          lines.push(
+          pushEntryLine(
             `${padRight(leftText, availableLabelWidth)}${suffix ? `${separator}${suffix}` : ""}`,
           );
           continue;
@@ -207,7 +218,7 @@ export function formatQuotaRowsGrouped(params: {
             padLeft(timeStr, timeWidth),
             padLeft(value, valueCol),
           ].join(separator);
-          lines.push(line.slice(0, maxWidth));
+          pushEntryLine(line.slice(0, maxWidth));
           continue;
         }
 
@@ -218,7 +229,7 @@ export function formatQuotaRowsGrouped(params: {
           1,
           barWidth - separator.length - valueWidth - separator.length - timeWidth,
         );
-        lines.push(
+        pushEntryLine(
           (
             padRight(leftText, leftMax) +
             separator +
@@ -260,7 +271,7 @@ export function formatQuotaRowsGrouped(params: {
           : "";
       const runway = isPercentEntry(entry) ? formatQuotaRunway(entry.runway) : "";
       const addRunwayLine = () => {
-        if (runway) lines.push(`Runs out  ${runway}`.slice(0, maxWidth));
+        if (runway) pushEntryLine(`Runs out  ${runway}`.slice(0, maxWidth));
       };
 
       if (isTiny) {
@@ -277,7 +288,7 @@ export function formatQuotaRowsGrouped(params: {
             padLeft(timeStr, timeWidth),
             padLeft(visibleBarSuffix, percentValueCol),
           ].join(separator);
-          lines.push(line.slice(0, maxWidth));
+          pushEntryLine(line.slice(0, maxWidth));
           addRunwayLine();
           continue;
         }
@@ -290,7 +301,7 @@ export function formatQuotaRowsGrouped(params: {
           padLeft(timeStr, timeWidth),
           padLeft(visibleBarSuffix, percentValueCol),
         ].join(separator);
-        lines.push(line.slice(0, maxWidth));
+        pushEntryLine(line.slice(0, maxWidth));
         addRunwayLine();
         continue;
       }
@@ -305,23 +316,23 @@ export function formatQuotaRowsGrouped(params: {
           const rightText = parts.slice(1).join("  ");
           const sep = "  ";
           const leftWidth = Math.max(1, maxWidth - sep.length - rightText.length);
-          lines.push((padRight(left, leftWidth) + sep + rightText).slice(0, maxWidth));
+          pushEntryLine((padRight(left, leftWidth) + sep + rightText).slice(0, maxWidth));
         } else {
-          lines.push(padLeft(text, maxWidth));
+          pushEntryLine(padLeft(text, maxWidth));
         }
       } else {
         // Line 1: label + time at end
         const timeWidth = Math.max(timeStr.length, timeCol);
         const leftMax = Math.max(1, maxWidth - separator.length - timeWidth);
-        lines.push(
+        pushEntryLine(
           (padRight(label, leftMax) + separator + padLeft(timeStr, timeWidth)).slice(0, maxWidth),
         );
       }
 
       // Line 2: bar + percent
       const barCell = bar(displayedPercent, barWidth);
       const suffixCell = padLeft(percentLabel.slice(0, percentValueCol), percentValueCol);
-      lines.push([barCell, suffixCell].join(separator));
+      pushEntryLine([barCell, suffixCell].join(separator));
       addRunwayLine();
 
       if (interpretation.basis) {
@@ -337,7 +348,7 @@ export function formatQuotaRowsGrouped(params: {
           if (next.length > maxWidth) break;
           detailLine = next;
         }
-        if (detailLine) lines.push(detailLine);
+        if (detailLine) pushEntryLine(detailLine);
       }
     }
   }

src/lib/tui-line-style.ts

@@ -1,12 +1,8 @@
 import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
 
-import { SESSION_TOKEN_SECTION_HEADING } from "./session-tokens-format.js";
-
 export function getSidebarBodyLineColor(
   line: string,
   theme: Pick<TuiPluginApi["theme"]["current"], "text" | "textMuted">,
 ): TuiPluginApi["theme"]["current"]["text"] | TuiPluginApi["theme"]["current"]["textMuted"] {
-  return line.length > 0 && SESSION_TOKEN_SECTION_HEADING.startsWith(line)
-    ? theme.text
-    : theme.textMuted;
+  return line.trim().length === 0 || /[█░]/u.test(line) ? theme.textMuted : theme.text;
 }

src/tui.tsx

@@ -389,7 +389,7 @@ function SidebarContentView(props: {
 
   return (
     <Show when={shouldRenderSidebarPanel(panel())}>
-      <box gap={0}>
+      <box gap={hasDetailLines() ? 1 : 0}>
         <box flexDirection="row">
           <text fg={props.api.theme.current.text} onMouseDown={toggleCollapsed}>
             <b>{headerText()}</b>

tests/format.test.ts

@@ -409,6 +409,32 @@ describe("formatQuotaRows", () => {
     expect(out).not.toContain("→ ");
   });
 
+  it("separates grouped percent, value, and provider blocks with single blank lines", () => {
+    const out = formatQuotaRows({
+      version: "1.0.0",
+      style: "allWindows",
+      layout: { maxWidth: 50, narrowAt: 42, tinyAt: 32 },
+      entries: [
+        { name: "Alpha", group: "Alpha", label: "Five-hour:", percentRemaining: 100 },
+        { name: "Alpha", group: "Alpha", label: "Weekly:", percentRemaining: 60 },
+        { name: "Alpha", group: "Alpha", label: "Balance:", kind: "value", value: "USD 12.00" },
+        { name: "Beta", group: "Beta", label: "Daily:", percentRemaining: 75 },
+      ],
+    });
+
+    const lines = out.split("\n");
+    const blankIndexes = lines.flatMap((line, index) => (line === "" ? [index] : []));
+
+    expect(blankIndexes).toEqual([3, 6, 8]);
+    expect(lines[0]).toBe("[Alpha]");
+    expect(lines[4]).toMatch(/^Weekly/u);
+    expect(lines[7]).toMatch(/^Balance/u);
+    expect(lines[9]).toBe("[Beta]");
+    expect(lines[10]).toMatch(/^Daily/u);
+    expect(lines.at(-1)).toMatch(/[█░]/u);
+    expect(out).not.toContain("\n\n\n");
+  });
+
   it("renders a structured quantity as an atomic value row without a bar", () => {
     const out = formatQuotaRows({
       version: "1.0.0",

tests/tui-line-style.test.ts

@@ -9,17 +9,24 @@ describe("getSidebarBodyLineColor", () => {
     textMuted: "gray",
   };
 
-  it("uses normal text color for the sidebar session-token heading", () => {
-    expect(getSidebarBodyLineColor(SESSION_TOKEN_SECTION_HEADING, theme)).toBe("white");
+  it.each([
+    "[OpenCode Go] (personal account)",
+    "personal account label continuation",
+    "Five-hour                       2h0m",
+    "Current balance               USD 42.50",
+    "Runs out  1d 4h",
+    SESSION_TOKEN_SECTION_HEADING,
+    SESSION_TOKEN_SECTION_HEADING.slice(0, 18),
+  ])("uses normal text color for readable sidebar text: %s", (line) => {
+    expect(getSidebarBodyLineColor(line, theme)).toBe("white");
   });
 
-  it("keeps the heading highlighted when the rendered sidebar heading is width-clamped", () => {
-    expect(getSidebarBodyLineColor(SESSION_TOKEN_SECTION_HEADING.slice(0, 18), theme)).toBe(
-      "white",
-    );
-  });
-
-  it("keeps non-heading sidebar lines muted", () => {
-    expect(getSidebarBodyLineColor("Unavailable", theme)).toBe("gray");
+  it.each([
+    "",
+    "   ",
+    "█████████████░░░░░░░░░░░░   50% left",
+    "░░░░░░░░░░   0% left",
+  ])("keeps blank separators and progress bars muted: %s", (line) => {
+    expect(getSidebarBodyLineColor(line, theme)).toBe("gray");
   });
 });

tests/tui-smoke.test.ts

@@ -1140,6 +1140,7 @@ describe("tui plugin smoke", () => {
       { session_id: "session-1" },
     ) as any;
     const collapsedHeader = collapsed.props.children[0];
+    expect(collapsed.props.gap).toBe(1);
     expect(collapsedHeader.props.children[0].props.children.props.children).toBe("▶ Quota");
     expect(collapsedHeader.props.children[1].props.children).toEqual([" (", 2, " providers)"]);
     expect(
@@ -1155,6 +1156,7 @@ describe("tui plugin smoke", () => {
       { session_id: "session-1" },
     ) as any;
     const expandedHeader = expanded.props.children[0];
+    expect(expanded.props.gap).toBe(1);
     expect(expandedHeader.props.children[0].props.children.props.children).toBe("▼ Quota");
     expect(
       expanded.props.children[1].props.children.map((line: any) => line.props.children),
@@ -1242,6 +1244,7 @@ describe("tui plugin smoke", () => {
       { session_id: "session-1" },
     ) as any;
     const header = rendered.props.children[0];
+    expect(rendered.props.gap).toBe(0);
     expect(header.props.children[0].props.children.props.children).toBe("Quota");
     expect(rendered.props.children[1].props.children[0].props.children).toBe("Unavailable");
   });