@jeffreyjyz/opencode-command-code 0.3.7 → 0.3.9

package/dist/cli.d.ts

@@ -1,3 +1,7 @@
+/** Fallback lookup paths: the opencode background service's PATH often lacks
+ * the homebrew prefix, so the bare name alone is not enough. `CMDUSE_BIN` wins
+ * when set — the dev-build hook the sibling cmduse consumers (mpc) honour too. */
+export declare function cmduseCandidates(env?: Record<string, string | undefined>): string[];
 /** Shell-words split: whitespace-separated, with single/double quoting and
  * backslash escapes ("--tz +05:30", arg='a b'). Unterminated quotes close at
  * end of input. */

package/dist/index.js

@@ -2457,7 +2457,16 @@ async function providerModels(key) {
 
 // src/cli.ts
 import { spawn } from "child_process";
-var CANDIDATES = ["cmduse", "/opt/homebrew/bin/cmduse", "/usr/local/bin/cmduse"];
+function cmduseCandidates(env = process.env) {
+  const candidates = [
+    env.CMDUSE_BIN,
+    "cmduse",
+    "/opt/homebrew/bin/cmduse",
+    "/usr/local/bin/cmduse"
+  ];
+  return candidates.filter((bin) => Boolean(bin));
+}
+var CANDIDATES = cmduseCandidates();
 var DEFAULT_ARGS = ["-1", "--plain"];
 var SUBCOMMANDS = new Set([
   "plans",
@@ -4054,7 +4063,7 @@ var commandCodeV2 = {
 // package.json
 var package_default = {
   name: "@jeffreyjyz/opencode-command-code",
-  version: "0.3.7",
+  version: "0.3.9",
   description: "Command Code provider + usage dashboard for opencode: two providers (Anthropic wire for Claude, OpenAI wire for everything else) against api.commandcode.ai, live model list, plan gating, /cmd-usage. Requires the cmduse CLI for usage rendering.",
   type: "module",
   main: "dist/index.js",

package/dist/sidebar/panel.d.ts

@@ -0,0 +1,50 @@
+/** @jsxImportSource @opentui/solid */
+import { RGBA } from "@opentui/core";
+import { type SidebarRow, type Tone } from "./rows";
+/** One colour per row tone, plus the two label colours (plain rows, headlines). */
+export type PanelColors = Readonly<Record<Tone, RGBA>> & {
+    readonly label: RGBA;
+    readonly headline: RGBA;
+};
+/**
+ * The slice of the v2 host theme the panel reads. `@opencode/theme` is not a
+ * dependency here (the host rewrites its own module instances in), so the shape
+ * is declared structurally — and read defensively, since the theme package has
+ * renamed tokens before (`text.default` -> `text.base`).
+ */
+export interface HostTheme {
+    readonly text: {
+        readonly base: RGBA;
+        readonly muted: RGBA;
+        readonly feedback: Readonly<Record<"success" | "warning" | "error" | "info", {
+            readonly base: RGBA;
+        }>>;
+    };
+    readonly hue?: {
+        readonly accent?: Readonly<Record<number, RGBA>>;
+    };
+}
+/**
+ * v2 host theme -> panel colours. `mode` matters for one thing: the accent hue
+ * is a usable purple in dark themes (#9d7cd8) but a peach in light ones, so the
+ * headline shade is only taken from it in dark mode. A lighter cyan was tried
+ * first and failed: terminals fold one-step-apart cyans onto the same ANSI
+ * colour, so the headline rows read identical to the rest.
+ */
+export declare function hostColors(theme: HostTheme, mode?: "dark" | "light"): PanelColors;
+/** v1 hosts expose only a text/muted pair, so the semantic roles are literals. */
+export declare function legacyColors(theme: {
+    text: RGBA;
+    textMuted: RGBA;
+}): PanelColors;
+/**
+ * Colours off: every tone renders as plain text, so only bold and dim carry
+ * structure. Headlines lose their accent, status rows their green/amber/red —
+ * which is the point of the default.
+ */
+export declare function mono(colors: PanelColors): PanelColors;
+/** Bold title, then one line per row. Renders nothing when there are no rows. */
+export declare function Panel(props: {
+    rows: () => SidebarRow[];
+    colors: () => PanelColors;
+}): import("solid-js").JSX.Element;

package/dist/sidebar/prefs.d.ts

@@ -0,0 +1,10 @@
+export interface Prefs {
+    colors: boolean;
+}
+export declare const DEFAULTS: Prefs;
+/** Preferences live beside opencode's own config, XDG layout honoured. */
+export declare function prefsPath(env?: NodeJS.ProcessEnv): string;
+/** Only a literal `true` enables colour, so a typo cannot turn the panel on. */
+export declare function parsePrefs(raw: unknown): Prefs;
+/** Env override, then the file, then the default. Cached for `CACHE_MS`. */
+export declare function loadPrefs(env?: NodeJS.ProcessEnv, now?: number): Prefs;

package/dist/sidebar/rows.d.ts

@@ -1,5 +1,41 @@
 import { type Category } from "../gating";
-export type SidebarRow = [label: string, value: string];
+/**
+ * Colour role for a row's *value*, resolved against the host theme by the
+ * panel: `ok` / `warn` / `crit` are headroom (green / amber / red), `strong` is
+ * plain text in bold (the model name, the way mpc bolds its MODEL column),
+ * `muted` is for continuations and rules, `base` is plain text. Labels are
+ * coloured separately: the panel draws them in the theme's info hue.
+ */
+export type Tone = "base" | "muted" | "strong" | "ok" | "warn" | "crit";
+/**
+ * A row. `headline` marks the two rows whose label names the thing the panel is
+ * about (the plan, the active model); the panel colours their labels apart.
+ */
+export type SidebarRow = [
+    label: string,
+    value: string,
+    tone?: Tone,
+    headline?: true
+];
+/** Headroom severity: comfortable to 70%, tight to 90%, over after that. */
+export declare function pctTone(pct: number): Tone;
+/**
+ * The sidebar is 42 columns wide with 2+2 padding, and our panel keeps one more
+ * column clear on the right, so a rendered row must stay within this. Rows that
+ * cannot fit are split across an indented continuation (`""` label) rather than
+ * wrapping in the host's renderer, which is what made the panel look broken.
+ */
+export declare const ROW_WIDTH = 37;
+/** A horizontal rule between blocks. */
+export declare function separator(): SidebarRow;
+/** Truncate to `width`, ellipsis included. */
+export declare function clip(text: string, width?: number): string;
+/** Value budget for a labelled row: the panel draws `label: value`. */
+export declare function valueWidth(label: string): number;
+/** How the panel splits a row: a muted label (or banner) and a toned value. */
+export declare function parts(row: SidebarRow): [label: string, value: string];
+/** Rendered width of a row, as the panel draws it. */
+export declare function rowWidth(row: SidebarRow): number;
 export interface ModelMeta {
     key: string;
     name: string;
@@ -30,6 +66,9 @@ export interface Usage {
     plan?: string;
     monthlyCap?: number;
     monthlyCredits?: number;
+    /** Billing-period bounds in epoch ms (cmduse 0.7.2+); absent on older builds. */
+    periodStartAt?: number;
+    periodEndAt?: number;
     fiveHour?: WindowUsage;
     weekly?: WindowUsage;
     periodEnd?: string;

package/dist/sidebar/usageDb.d.ts

@@ -3,10 +3,14 @@ import { type ModelUsage } from "./rows";
 export declare function usageDbPath(): string;
 /**
  * Start of the billing period a cmduse snapshot reports, as epoch ms. cmduse
- * publishes only `periodEnd` (YYYY-MM-DD), so the start is that date one
- * calendar month back. Falls back to the last 30 days when it is missing.
+ * 0.7.2+ publishes `periodStartAt` directly; older builds publish only
+ * `periodEnd` (YYYY-MM-DD), so the start is that date one calendar month back.
+ * Falls back to the last 30 days when neither is usable.
  */
-export declare function periodStart(periodEnd: string | undefined, now?: number): number;
+export declare function periodStart(usage: {
+    periodStartAt?: number;
+    periodEnd?: string;
+}, now?: number): number;
 /**
  * Requests and cost for one model since `sinceMs`. Null when the store is
  * missing or unreadable, so callers can fall back to omitting the row.

package/dist/sidebar/useRows.d.ts

@@ -0,0 +1 @@
+export declare function useRows(activeModelId: () => string | undefined, active: () => boolean): import("solid-js").Accessor<import("./rows").SidebarRow[]>;

package/dist/tui.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource @opentui/solid */
-import type { RGBA } from "@opentui/core";
 import type { Plugin as TuiPluginNs } from "@opencode/plugin/tui";
+import type { RGBA } from "@opentui/core";
 interface V1Api {
     slots: {
         register: (config: {

package/dist/tui.js

@@ -1,18 +1,14 @@
 // @bun
 // src/tui.tsx
-import { memo as _$memo } from "@opentui/solid";
-import { setProp as _$setProp } from "@opentui/solid";
-import { effect as _$effect } from "@opentui/solid";
-import { insert as _$insert } from "@opentui/solid";
-import { createComponent as _$createComponent } from "@opentui/solid";
-import { createTextNode as _$createTextNode } from "@opentui/solid";
-import { insertNode as _$insertNode } from "@opentui/solid";
-import { createElement as _$createElement } from "@opentui/solid";
-import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { createComponent as _$createComponent2 } from "@opentui/solid";
 
 // src/cli.ts
 import { spawn } from "child_process";
-var CANDIDATES = ["cmduse", "/opt/homebrew/bin/cmduse", "/usr/local/bin/cmduse"];
+function cmduseCandidates(env = process.env) {
+  const candidates = [env.CMDUSE_BIN, "cmduse", "/opt/homebrew/bin/cmduse", "/usr/local/bin/cmduse"];
+  return candidates.filter((bin) => Boolean(bin));
+}
+var CANDIDATES = cmduseCandidates();
 var DEFAULT_ARGS = ["-1", "--plain"];
 var SUBCOMMANDS = new Set(["plans", "models", "daily", "hourly", "model", "session", "statusline", "config"]);
 function splitCliArgs(input) {
@@ -122,11 +118,18 @@ async function runCmduse(arg, opts = {}) {
   });
 }
 
-// src/sidebar/data.ts
-import { spawn as spawn2 } from "child_process";
-import { mkdir, readFile, writeFile } from "fs/promises";
-import { homedir } from "os";
-import { dirname, join } from "path";
+// src/sidebar/panel.tsx
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { spread as _$spread } from "@opentui/solid";
+import { mergeProps as _$mergeProps } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { RGBA } from "@opentui/core";
+import { For, Show } from "solid-js";
 // ../core/gating.json
 var gating_default = {
   extractedAt: "2026-09-27T06:27:06.878Z",
@@ -468,6 +471,28 @@ function elapsedLabel(resetAtMs, durSecs, nowSecs) {
 }
 
 // src/sidebar/rows.ts
+function pctTone(pct) {
+  if (pct >= 90)
+    return "crit";
+  if (pct >= 70)
+    return "warn";
+  return "ok";
+}
+var ROW_WIDTH = 37;
+function separator() {
+  return ["\u2500".repeat(ROW_WIDTH), "", "muted"];
+}
+function clip(text, width = ROW_WIDTH) {
+  return text.length <= width ? text : `${text.slice(0, width - 1)}\u2026`;
+}
+function valueWidth(label) {
+  return ROW_WIDTH - label.length - 2;
+}
+function parts(row) {
+  if (row[0] === "")
+    return [`  ${row[1]}`, ""];
+  return [row[1] ? `${row[0]}: ` : row[0], row[1]];
+}
 var TIER_DISPLAY = {
   opensource: "open source",
   premium: "premium"
@@ -503,15 +528,30 @@ function until(epoch, now = Date.now()) {
   const days = Math.floor(hours / 24);
   return hours % 24 ? `${days}d ${hours % 24}h` : `${days}d`;
 }
-function windowRow(label, w, now, durSecs) {
+function windowRows(label, w, now, durSecs) {
   if (!w || typeof w.cap !== "number" || w.cap <= 0)
-    return;
+    return [];
   const used = typeof w.used === "number" ? w.used : 0;
   const pct = Math.round(used / w.cap * 100);
   const elapsed = elapsedLabel(w.resetAt, durSecs, Math.floor(now / 1000));
   const reset = until(w.resetAt, now);
-  const parts = [`${money(used)} / ${money(w.cap)} (${pct}%)`, ...elapsed === undefined ? [] : [`${elapsed} elapsed`], ...reset ? [`resets ${reset}`] : []];
-  return [label, parts.join(" \xB7 ")];
+  const detail = [...elapsed === undefined ? [] : [`${elapsed} elapsed`], ...reset ? [`resets ${reset}`] : []].join(" \xB7 ");
+  return [[label, `${money(used)}/${money(w.cap)} (${pct}%)`, pctTone(pct)], ...detail ? [["", detail, "muted"]] : []];
+}
+function monthlyDetail(usage, now) {
+  const {
+    periodStartAt,
+    periodEndAt
+  } = usage;
+  if (typeof periodStartAt !== "number" || typeof periodEndAt !== "number")
+    return;
+  const durSecs = Math.round((periodEndAt - periodStartAt) / 1000);
+  if (durSecs <= 0)
+    return;
+  const elapsed = elapsedLabel(periodEndAt, durSecs, Math.floor(now / 1000));
+  const reset = until(periodEndAt, now);
+  const parts = [...elapsed === undefined ? [] : [`${elapsed} elapsed`], ...reset ? [`resets ${reset}`] : []];
+  return parts.length ? parts.join(" \xB7 ") : undefined;
 }
 function usageRows(usage, now = Date.now()) {
   if (!usage)
@@ -519,54 +559,54 @@ function usageRows(usage, now = Date.now()) {
   const rows = [];
   if (usage.plan) {
     const credits = typeof usage.monthlyCap === "number" ? ` \xB7 $${usage.monthlyCap}/mo credits` : "";
-    rows.push(["Plan", `${usage.plan}${credits}`]);
+    rows.push(["Plan", `${usage.plan}${credits}`, "base", true]);
   }
   if (typeof usage.monthlyCap === "number" && typeof usage.monthlyCredits === "number") {
-    const used = usage.monthlyCap - usage.monthlyCredits;
+    const used = Math.min(usage.monthlyCap, Math.max(0, usage.monthlyCap - usage.monthlyCredits));
     const pct = usage.monthlyCap > 0 ? Math.round(used / usage.monthlyCap * 100) : 0;
-    rows.push(["Monthly", `${money(used)} / ${money(usage.monthlyCap)} (${pct}%)`]);
+    rows.push(["Monthly", `${money(used)} / ${money(usage.monthlyCap)} (${pct}%)`, pctTone(pct)]);
+    const detail = monthlyDetail(usage, now);
+    if (detail)
+      rows.push(["", detail, "muted"]);
   }
-  const five = windowRow("5-hour", usage.fiveHour, now, FIVE_HOUR_SECS);
-  if (five)
-    rows.push(five);
-  const week = windowRow("Weekly", usage.weekly, now, WEEKLY_SECS);
-  if (week)
-    rows.push(week);
+  rows.push(...windowRows("5-hour", usage.fiveHour, now, FIVE_HOUR_SECS));
+  rows.push(...windowRows("Weekly", usage.weekly, now, WEEKLY_SECS));
   if (typeof usage.requests === "number" || typeof usage.cost === "number") {
     const parts = [];
     if (typeof usage.requests === "number")
       parts.push(`${count(usage.requests)} requests`);
     if (typeof usage.cost === "number")
       parts.push(money(usage.cost));
-    rows.push(["Period", parts.join(" \xB7 ")]);
+    rows.push(["Period", parts.join(" \xB7 "), "base"]);
   }
   return rows;
 }
 function modelRows(meta, usage) {
   if (!meta)
     return [];
-  const rows = [["Model", meta.name]];
+  const rows = [["Model", clip(meta.name, valueWidth("Model")), "strong", true]];
   if (usage) {
     const spent = usage.cost > 0 ? ` \xB7 ${money(usage.cost)}` : "";
-    rows.push(["Usage (this model)", `${count(usage.requests)} req${spent}`]);
+    rows.push(["Usage (this model)", `${count(usage.requests)} req${spent}`, "base"]);
   }
   if (meta.tier)
-    rows.push(["Tier", TIER_DISPLAY[meta.tier]]);
+    rows.push(["Tier", TIER_DISPLAY[meta.tier], "base"]);
   else if (meta.minPlan)
-    rows.push(["Min plan", meta.minPlan]);
+    rows.push(["Min plan", meta.minPlan, "base"]);
   if (typeof meta.allowance === "number")
-    rows.push(["Allowance", `${money(meta.allowance)}/mo`]);
+    rows.push(["Allowance", `${money(meta.allowance)}/mo`, "base"]);
   if (meta.rates) {
-    const parts = [`${rate(meta.rates.input)}/${rate(meta.rates.output)} in/out`, `cache read ${rate(meta.rates.cacheRead)}`];
+    const cache = [`cache read ${rate(meta.rates.cacheRead)}`];
     if (typeof meta.rates.cacheWrite === "number" && meta.rates.cacheWrite > 0) {
-      parts.push(`cache write ${rate(meta.rates.cacheWrite)}`);
+      cache.push(`write ${rate(meta.rates.cacheWrite)}`);
     }
-    rows.push(["Rates", parts.join(" \xB7 ")]);
+    rows.push(["Rates", `${rate(meta.rates.input)}/${rate(meta.rates.output)} in/out`, "base"]);
+    rows.push(["", cache.join(" \xB7 "), "muted"]);
   }
   if (typeof meta.intelligence === "number")
-    rows.push(["Intelligence", String(meta.intelligence)]);
+    rows.push(["Intelligence", String(meta.intelligence), "base"]);
   if (typeof meta.tps === "number")
-    rows.push(["Tok/s", String(meta.tps)]);
+    rows.push(["Tok/s", String(meta.tps), "base"]);
   return rows;
 }
 function modelKey(modelId) {
@@ -578,110 +618,157 @@ function tierFor(modelId) {
   return MODEL_CATEGORIES[canonicalizeModelId(modelId)];
 }
 
-// src/sidebar/data.ts
-var CMDUSE = ["cmduse", "/opt/homebrew/bin/cmduse", "/usr/local/bin/cmduse"];
-var MPC = ["mpc", join(homedir(), ".bun/bin/mpc"), "/opt/homebrew/bin/mpc"];
-var CACHE_TTL_MS = 6 * 60 * 60 * 1000;
-var SPAWN_OPTIONS = {
-  stdio: ["ignore", "pipe", "pipe"],
-  detached: true
-};
-function run(bin, args) {
-  return new Promise((resolve, reject) => {
-    const child = spawn2(bin, args, SPAWN_OPTIONS);
-    const out = [];
-    const err = [];
-    child.stdout?.on("data", (d) => out.push(d));
-    child.stderr?.on("data", (d) => err.push(d));
-    child.on("error", reject);
-    child.on("close", (code) => code === 0 ? resolve(Buffer.concat(out).toString("utf8")) : reject(new Error(`${bin} ${args.join(" ")}: exit ${code} ${Buffer.concat(err).toString("utf8").slice(-200)}`)));
-  });
-}
-async function runFirst(candidates, args) {
-  let last;
-  for (const bin of candidates) {
-    try {
-      return await run(bin, args);
-    } catch (e) {
-      last = e;
-      if (e?.code !== "ENOENT")
-        throw e;
-    }
-  }
-  throw last instanceof Error ? last : new Error(`${candidates[0]} not found`);
+// src/sidebar/panel.tsx
+function hostColors(theme, mode = "dark") {
+  return {
+    base: theme.text.base,
+    muted: theme.text.muted,
+    strong: theme.text.base,
+    label: theme.text.feedback.info.base,
+    headline: mode === "dark" ? theme.hue?.accent?.[200] ?? theme.text.feedback.info.base : theme.text.feedback.info.base,
+    ok: theme.text.feedback.success.base,
+    warn: theme.text.feedback.warning.base,
+    crit: theme.text.feedback.error.base
+  };
 }
-function parseUsageJson(text) {
-  const raw = JSON.parse(text);
-  const win = (v) => {
-    if (!v || typeof v !== "object")
-      return;
-    const w = v;
-    return {
-      cap: typeof w.cap === "number" ? w.cap : undefined,
-      used: typeof w.used === "number" ? w.used : undefined,
-      resetAt: typeof w.resetAt === "number" ? w.resetAt : undefined
-    };
+function legacyColors(theme) {
+  return {
+    base: theme.text,
+    muted: theme.textMuted,
+    strong: theme.text,
+    label: RGBA.fromValues(0.34, 0.71, 0.76, 1),
+    headline: RGBA.fromValues(0.62, 0.49, 0.85, 1),
+    ok: RGBA.fromValues(0.5, 0.85, 0.56, 1),
+    warn: RGBA.fromValues(0.96, 0.65, 0.26, 1),
+    crit: RGBA.fromValues(0.88, 0.42, 0.46, 1)
   };
-  const summary = raw.summary ?? {};
+}
+function mono(colors) {
   return {
-    plan: typeof raw.plan === "string" ? raw.plan : undefined,
-    monthlyCap: typeof raw.monthlyCap === "number" ? raw.monthlyCap : undefined,
-    monthlyCredits: typeof raw.monthlyCredits === "number" ? raw.monthlyCredits : undefined,
-    fiveHour: win(raw.fiveHour),
-    weekly: win(raw.weekly),
-    periodEnd: typeof raw.periodEnd === "string" ? raw.periodEnd : undefined,
-    requests: typeof summary.requests === "number" ? summary.requests : undefined,
-    cost: typeof summary.cost === "number" ? summary.cost : undefined
+    base: colors.base,
+    muted: colors.muted,
+    strong: colors.base,
+    label: colors.base,
+    headline: colors.base,
+    ok: colors.base,
+    warn: colors.base,
+    crit: colors.base
   };
 }
-function parseMpcJson(text) {
-  const body = JSON.parse(text);
-  const meta = new Map;
-  for (const row of body.rows ?? []) {
-    const cc = row.cc;
-    if (!cc || !row.name)
-      continue;
-    const entry = {
-      key: row.key ?? modelKey(row.name),
-      name: row.name,
-      allowance: cc.allowance,
-      rates: cc.pricing,
-      intelligence: cc.ability ?? undefined,
-      tps: cc.tps ?? undefined
-    };
-    meta.set(entry.key, entry);
-    meta.set(modelKey(row.name), entry);
+var spanStyle = (fg) => ({
+  style: {
+    fg
   }
-  return meta;
-}
-function cachePath() {
-  const base = process.env.XDG_CACHE_HOME ?? join(homedir(), ".cache");
-  return join(base, "command-code", "cc-catalog.json");
+});
+var rowColors = (colors, row) => row[3] ? {
+  label: colors.headline,
+  value: colors.headline
+} : {
+  label: colors.label,
+  value: colors[row[2] ?? "base"]
+};
+function Row(props) {
+  const [label, value] = parts(props.row);
+  const tone = props.row[2] ?? "base";
+  const fg = rowColors(props.colors, props.row);
+  if (!value) {
+    return (() => {
+      var _el$ = _$createElement("text");
+      _$insert(_el$, label);
+      _$effect((_$p) => _$setProp(_el$, "fg", props.colors.muted, _$p));
+      return _el$;
+    })();
+  }
+  return (() => {
+    var _el$2 = _$createElement("text"), _el$3 = _$createElement("span"), _el$4 = _$createElement("b"), _el$5 = _$createElement("span");
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$5);
+    _$insertNode(_el$3, _el$4);
+    _$spread(_el$3, _$mergeProps(() => spanStyle(fg.label)), true);
+    _$insert(_el$4, label);
+    _$spread(_el$5, _$mergeProps(() => spanStyle(fg.value)), true);
+    _$insert(_el$5, tone === "strong" ? (() => {
+      var _el$6 = _$createElement("b");
+      _$insert(_el$6, value);
+      return _el$6;
+    })() : value);
+    return _el$2;
+  })();
 }
-async function loadMeta() {
-  try {
-    const cached = JSON.parse(await readFile(cachePath(), "utf8"));
-    if (cached.fetchedAt && Date.now() - cached.fetchedAt < CACHE_TTL_MS) {
-      return new Map(cached.rows ?? []);
+function Panel(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.rows().length > 0;
+    },
+    get children() {
+      var _el$7 = _$createElement("box"), _el$8 = _$createElement("text"), _el$9 = _$createElement("b");
+      _$insertNode(_el$7, _el$8);
+      _$insertNode(_el$8, _el$9);
+      _$insertNode(_el$9, _$createTextNode(`Command Code`));
+      _$insert(_el$7, _$createComponent(For, {
+        get each() {
+          return props.rows();
+        },
+        children: (row) => _$createComponent(Row, {
+          row,
+          get colors() {
+            return props.colors();
+          }
+        })
+      }), null);
+      _$effect((_$p) => _$setProp(_el$8, "fg", props.colors().base, _$p));
+      return _el$7;
     }
-  } catch {}
-  const meta = parseMpcJson(await runFirst(MPC, ["--json"]));
-  try {
-    const path = cachePath();
-    await mkdir(dirname(path), {
-      recursive: true
-    });
-    await writeFile(path, JSON.stringify({
-      fetchedAt: Date.now(),
-      rows: [...meta]
-    }));
-  } catch {}
-  return meta;
+  });
 }
-async function loadUsage() {
-  return parseUsageJson(await runFirst(CMDUSE, ["-1", "--json", "--plain"]));
+
+// src/sidebar/prefs.ts
+import { readFileSync } from "fs";
+import { homedir } from "os";
+import { join } from "path";
+var DEFAULTS = {
+  colors: false
+};
+var CACHE_MS = 5000;
+var cached;
+function prefsPath(env = process.env) {
+  const base = env.XDG_CONFIG_HOME ?? join(homedir(), ".config");
+  return join(base, "opencode", "command-code.json");
+}
+function parsePrefs(raw) {
+  const value = raw?.colors;
+  return {
+    colors: value === true
+  };
+}
+function loadPrefs(env = process.env, now = Date.now()) {
+  if (cached && now - cached.at < CACHE_MS)
+    return cached.prefs;
+  const flag = env.CMD_COLORS;
+  let prefs = DEFAULTS;
+  if (flag === "1" || flag === "true")
+    prefs = {
+      colors: true
+    };
+  else if (flag === "0" || flag === "false")
+    prefs = {
+      colors: false
+    };
+  else {
+    try {
+      prefs = parsePrefs(JSON.parse(readFileSync(prefsPath(env), "utf8")));
+    } catch {}
+  }
+  cached = {
+    at: now,
+    prefs
+  };
+  return prefs;
 }
 
+// src/sidebar/useRows.ts
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+
 // src/catalog.ts
 var MODEL_CATALOG = {
   "claude-fable-5": {
@@ -1742,18 +1829,130 @@ function minPlan(id) {
   return MODEL_CATALOG[id]?.minPlan ?? null;
 }
 
+// src/sidebar/data.ts
+import { spawn as spawn2 } from "child_process";
+import { mkdir, readFile, writeFile } from "fs/promises";
+import { homedir as homedir2 } from "os";
+import { dirname, join as join2 } from "path";
+var CMDUSE = cmduseCandidates();
+var MPC = ["mpc", join2(homedir2(), ".bun/bin/mpc"), "/opt/homebrew/bin/mpc"];
+var CACHE_TTL_MS = 6 * 60 * 60 * 1000;
+var SPAWN_OPTIONS = {
+  stdio: ["ignore", "pipe", "pipe"],
+  detached: true
+};
+function run(bin, args) {
+  return new Promise((resolve, reject) => {
+    const child = spawn2(bin, args, SPAWN_OPTIONS);
+    const out = [];
+    const err = [];
+    child.stdout?.on("data", (d) => out.push(d));
+    child.stderr?.on("data", (d) => err.push(d));
+    child.on("error", reject);
+    child.on("close", (code) => code === 0 ? resolve(Buffer.concat(out).toString("utf8")) : reject(new Error(`${bin} ${args.join(" ")}: exit ${code} ${Buffer.concat(err).toString("utf8").slice(-200)}`)));
+  });
+}
+async function runFirst(candidates, args) {
+  let last;
+  for (const bin of candidates) {
+    try {
+      return await run(bin, args);
+    } catch (e) {
+      last = e;
+      if (e?.code !== "ENOENT")
+        throw e;
+    }
+  }
+  throw last instanceof Error ? last : new Error(`${candidates[0]} not found`);
+}
+function parseUsageJson(text) {
+  const raw = JSON.parse(text);
+  const win = (v) => {
+    if (!v || typeof v !== "object")
+      return;
+    const w = v;
+    return {
+      cap: typeof w.cap === "number" ? w.cap : undefined,
+      used: typeof w.used === "number" ? w.used : undefined,
+      resetAt: typeof w.resetAt === "number" ? w.resetAt : undefined
+    };
+  };
+  const summary = raw.summary ?? {};
+  return {
+    plan: typeof raw.plan === "string" ? raw.plan : undefined,
+    monthlyCap: typeof raw.monthlyCap === "number" ? raw.monthlyCap : undefined,
+    monthlyCredits: typeof raw.monthlyCredits === "number" ? raw.monthlyCredits : undefined,
+    fiveHour: win(raw.fiveHour),
+    weekly: win(raw.weekly),
+    periodEnd: typeof raw.periodEnd === "string" ? raw.periodEnd : undefined,
+    periodStartAt: typeof raw.periodStartAt === "number" ? raw.periodStartAt : undefined,
+    periodEndAt: typeof raw.periodEndAt === "number" ? raw.periodEndAt : undefined,
+    requests: typeof summary.requests === "number" ? summary.requests : undefined,
+    cost: typeof summary.cost === "number" ? summary.cost : undefined
+  };
+}
+function parseMpcJson(text) {
+  const body = JSON.parse(text);
+  const meta = new Map;
+  for (const row of body.rows ?? []) {
+    const cc = row.cc;
+    if (!cc || !row.name)
+      continue;
+    const entry = {
+      key: row.key ?? modelKey(row.name),
+      name: row.name,
+      allowance: cc.allowance,
+      rates: cc.pricing,
+      intelligence: cc.ability ?? undefined,
+      tps: cc.tps ?? undefined
+    };
+    meta.set(entry.key, entry);
+    meta.set(modelKey(row.name), entry);
+  }
+  return meta;
+}
+function cachePath() {
+  const base = process.env.XDG_CACHE_HOME ?? join2(homedir2(), ".cache");
+  return join2(base, "command-code", "cc-catalog.json");
+}
+async function loadMeta() {
+  try {
+    const cached = JSON.parse(await readFile(cachePath(), "utf8"));
+    if (cached.fetchedAt && Date.now() - cached.fetchedAt < CACHE_TTL_MS) {
+      return new Map(cached.rows ?? []);
+    }
+  } catch {}
+  const meta = parseMpcJson(await runFirst(MPC, ["--json"]));
+  try {
+    const path = cachePath();
+    await mkdir(dirname(path), {
+      recursive: true
+    });
+    await writeFile(path, JSON.stringify({
+      fetchedAt: Date.now(),
+      rows: [...meta]
+    }));
+  } catch {}
+  return meta;
+}
+async function loadUsage() {
+  return parseUsageJson(await runFirst(CMDUSE, ["-1", "--json", "--plain"]));
+}
+
 // src/sidebar/usageDb.ts
 import { Database } from "bun:sqlite";
-import { homedir as homedir2 } from "os";
-import { join as join2 } from "path";
+import { homedir as homedir3 } from "os";
+import { join as join3 } from "path";
 function usageDbPath() {
   if (process.env.OPENCODE_DB)
     return process.env.OPENCODE_DB;
-  const base = process.env.XDG_DATA_HOME ?? join2(homedir2(), ".local", "share");
-  return join2(base, "opencode", "opencode.db");
+  const base = process.env.XDG_DATA_HOME ?? join3(homedir3(), ".local", "share");
+  return join3(base, "opencode", "opencode.db");
 }
-function periodStart(periodEnd, now = Date.now()) {
-  const end = periodEnd ? Date.parse(`${periodEnd}T23:59:59`) : Number.NaN;
+function periodStart(usage, now = Date.now()) {
+  if (typeof usage.periodStartAt === "number")
+    return usage.periodStartAt;
+  const end = usage.periodEnd ? Date.parse(`${usage.periodEnd}T23:59:59`) : Number.NaN;
   if (!Number.isFinite(end))
     return now - 30 * 24 * 60 * 60 * 1000;
   const start = new Date(end);
@@ -1808,38 +2007,8 @@ function loadModelUsage(modelID, sinceMs, path = usageDbPath()) {
   }
 }
 
-// src/tui.tsx
-var ID = "command-code.tui";
+// src/sidebar/useRows.ts
 var POLL_MS = 60000;
-function Panel(props) {
-  return _$createComponent(Show, {
-    get when() {
-      return props.rows().length > 0;
-    },
-    get children() {
-      var _el$ = _$createElement("box"), _el$2 = _$createElement("text"), _el$3 = _$createElement("b");
-      _$insertNode(_el$, _el$2);
-      _$insertNode(_el$2, _el$3);
-      _$insertNode(_el$3, _$createTextNode(`Command Code`));
-      _$insert(_el$, _$createComponent(For, {
-        get each() {
-          return props.rows();
-        },
-        children: (row) => (() => {
-          var _el$5 = _$createElement("text");
-          _$insert(_el$5, (() => {
-            var _c$ = _$memo(() => !!row[1]);
-            return () => _c$() ? `${row[0]}: ${row[1]}` : row[0];
-          })());
-          _$effect((_$p) => _$setProp(_el$5, "fg", props.muted(), _$p));
-          return _el$5;
-        })()
-      }), null);
-      _$effect((_$p) => _$setProp(_el$2, "fg", props.text(), _$p));
-      return _el$;
-    }
-  });
-}
 function useRows(activeModelId, active) {
   const [usage, setUsage] = createSignal([]);
   const [meta, setMeta] = createSignal(new Map);
@@ -1850,7 +2019,7 @@ function useRows(activeModelId, active) {
       const snapshot = await loadUsage();
       setUsage(usageRows(snapshot));
       const id = activeModelId();
-      setModelUsage(id ? loadModelUsage(id, periodStart(snapshot.periodEnd)) ?? undefined : undefined);
+      setModelUsage(id ? loadModelUsage(id, periodStart(snapshot)) ?? undefined : undefined);
     } catch {}
   };
   createEffect(() => {
@@ -1870,17 +2039,20 @@ function useRows(activeModelId, active) {
       tier: found.tier ?? (id ? tierFor(id) : undefined),
       minPlan: id ? minPlan(id) : undefined
     } : undefined;
-    return [...usage(), ...modelRows(model, modelUsage())];
+    return [...usage(), separator(), ...modelRows(model, modelUsage())];
   });
 }
+
+// src/tui.tsx
+var ID = "command-code.tui";
 var isOurs = (providerID) => Boolean(providerID?.startsWith("command-code"));
+var themed = (colors) => loadPrefs().colors ? colors : mono(colors);
 function PanelV1(props) {
   const current = () => props.api.state.session.get(props.sessionID)?.model;
   const rows = useRows(() => current()?.id, () => isOurs(current()?.providerID));
-  return _$createComponent(Panel, {
+  return _$createComponent2(Panel, {
     rows,
-    text: () => props.api.theme.current.text,
-    muted: () => props.api.theme.current.textMuted
+    colors: () => themed(legacyColors(props.api.theme.current))
   });
 }
 var tui = async (api) => {
@@ -1888,7 +2060,7 @@ var tui = async (api) => {
     order: 200,
     slots: {
       sidebar_content(_ctx, props) {
-        return _$createComponent(PanelV1, {
+        return _$createComponent2(PanelV1, {
           api,
           get sessionID() {
             return props.session_id;
@@ -1904,10 +2076,9 @@ function PanelV2(props) {
   } = props;
   const current = () => ctx.data.session.get(props.sessionID)?.model;
   const rows = useRows(() => current()?.id, () => isOurs(current()?.providerID));
-  return _$createComponent(Panel, {
+  return _$createComponent2(Panel, {
     rows,
-    text: () => ctx.theme.text.default,
-    muted: () => ctx.theme.text.subdued
+    colors: () => themed(hostColors(ctx.theme))
   });
 }
 var commandCodeTui = {
@@ -1915,7 +2086,7 @@ var commandCodeTui = {
   setup(ctx) {
     ctx.ui.slot({
       append: "sidebar.content",
-      render: (input) => _$createComponent(PanelV2, {
+      render: (input) => _$createComponent2(PanelV2, {
         ctx,
         get sessionID() {
           return input.sessionID;

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@jeffreyjyz/opencode-command-code",
- "version": "0.3.7",
+ "version": "0.3.9",
  "description": "Command Code provider + usage dashboard for opencode: two providers (Anthropic wire for Claude, OpenAI wire for everything else) against api.commandcode.ai, live model list, plan gating, /cmd-usage. Requires the cmduse CLI for usage rendering.",
  "type": "module",
  "main": "dist/index.js",