@rizal72/oc-budget 0.0.1 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rizal72/oc-budget",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"type": "module",
 	"description": "How much credit is left on the account behind the model you are using: the Go subscription's windows, the Zen balance, and the pay-per-use wallets, in the sidebar, the footer and the header",
 	"repository": {
@@ -20,15 +20,15 @@
 	},
 	"exports": {
 		".": "./index.ts",
-		"./tui": "./tui.tsx",
+		"./tui": "./tui.js",
 		"./rpc": "./rpc.ts",
 		"./gui-experimental": "./dist/gui-experimental.cjs"
 	},
 	"files": [
 		"*.ts",
-		"*.tsx",
+		"!*.test.ts",
+		"tui.js",
 		"README.md",
-		"dist",
-		"!*.test.ts"
+		"dist"
 	]
 }

package/tui.js

@@ -0,0 +1,656 @@
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+// oc-budget — TUI half.
+//
+// Two slots and one command, all reading the same snapshot the server half publishes:
+//
+//   sidebar.content       the rich view: every wallet, the bars, the resets, the peak
+//   prompt.footer.status  the paying wallet alone — the context total is oc-context's
+//   /budget               the full report in a dialog (a bar for each Go window, the
+//                         reset times, the peak regime)
+//
+// The footer is only appended to, never taken over: that row also holds the project folder,
+// the working spinner and the esc hint, and giving them up for one string is a bad trade.
+//
+// The numbers come from the server plugin over RPC; nothing is fetched here and no
+// credential is ever handled here. Which wallet *pays* each half decides from the model of its
+// own surface: the session's here, the composer's in the window — the two pickers can disagree.
+//
+// Solid owns the reactivity, and a component body runs exactly once: every value that
+// depends on the snapshot or on the model is read inside a `createMemo` (or inside JSX),
+// never in the body. Reading it in the body is how the first version froze on
+// "reading…" for ever.
+//
+// Colours come from the theme, never from hard-coded hex: the theme has no
+// success/warning/error tokens for plugins, so the alert levels are taken from the
+// nearest semantic hues it does expose (`diff.added` / `diff.removed`) and fall back to
+// fixed values only if a theme does not define them.
+import { Plugin } from "@opencode/plugin/tui";
+import { createEffect, createMemo, createRoot, createSignal, Show } from "solid-js";
+// The tariff is the same fact on both surfaces: `peak.ts` holds it, and these names are the ones the
+// widget was written with.
+import { clock, doubles as peakDoubles, isPeak as isDeepseekPeak, nextChange as nextRegimeChange } from "./peak.ts";
+import { Budget } from "./rpc.ts";
+import { DS_WARN_USD, GO_WARN_PERCENT, OR_WARN_USD, ZEN_WARN_USD, ageText, connected, countdown, payingWallet, windowPercent } from "./budget.ts";
+const REFRESH_MS = 5 * 60 * 1000;
+
+/** A stalled RPC must not leave the widget saying "reading…" for ever. The timer is cleared with the
+ *  answer: a poll every five minutes would otherwise keep a fifteen-second timer around for nothing. */
+const RPC_TIMEOUT_MS = 15_000;
+function withTimeout(promise, ms) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(`rpc timed out after ${ms}ms`)), ms);
+    promise.then(value => {
+      clearTimeout(timer);
+      resolve(value);
+    }, error => {
+      clearTimeout(timer);
+      reject(error);
+    });
+  });
+}
+
+/** Last-resort colours, used only when the active theme defines none of the token
+ *  candidates below. */
+const FALLBACK_GREEN = "#3fb950";
+const FALLBACK_YELLOW = "#d29922";
+const FALLBACK_RED = "#f85149";
+const FALLBACK_DIM = "#8b949e";
+const FALLBACK_TEXT = "#c9d1d9";
+const FALLBACK_ACCENT = "#79c0ff";
+
+/** md-speedometer, the budget slot's mark; mdi trending-up, the peak marker. Carried in
+ *  the text rather than the row's icon so the widget reads the same wherever it lands. */
+const BUDGET_GLYPH = "\u{f04c5}";
+const PEAK_GLYPH = "\u{f0535}";
+function bar(percent, cells = 10) {
+  const filled = Math.max(0, Math.min(cells, Math.round(percent / 100 * cells)));
+  return "█".repeat(filled) + "░".repeat(cells - filled);
+}
+function usd(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
+  return `$${value.toFixed(2)}`;
+}
+
+/** A percent as the panel prints it — a dash, never a fake zero, when there is no number. */
+function percentText(percent) {
+  return percent === null ? "—" : `${Math.round(percent)}%`;
+}
+export default Plugin.define({
+  id: "oc-budget.tui",
+  setup(context) {
+    // ---------------------------------------------------------------------------
+    // Colours, resolved from the theme once, at setup
+    // ---------------------------------------------------------------------------
+
+    /** First candidate path the theme actually defines. The value is handed to `fg`
+     *  as-is: theme colours are the renderer's own colour type, not always hex strings. */
+    const themeColour = (...paths) => {
+      for (const path of paths) {
+        let node = context.theme;
+        for (const key of path) node = node?.[key];
+        if (node !== undefined && node !== null) return node;
+      }
+      return undefined;
+    };
+
+    // Colours come from the theme, never from a hex literal: each role takes the first token the
+    // theme defines. Green and red lean on the diff pair, the one hue every theme guarantees;
+    // yellow takes the theme's own warning semantics first, because no syntax hue is reliably
+    // warm. Hex only when a theme defines none of the candidates.
+    const GREEN = themeColour(["syntax", "string"], ["diff", "text", "added"], ["text", "feedback", "success", "base"]) ?? FALLBACK_GREEN;
+    const RED = themeColour(["diff", "text", "removed"], ["syntax", "keyword"], ["text", "feedback", "error", "base"]) ?? FALLBACK_RED;
+    const YELLOW = themeColour(["text", "feedback", "warning", "base"], ["syntax", "type"], ["syntax", "number"]) ?? FALLBACK_YELLOW;
+    const DIM = themeColour(["text", "muted"], ["text", "faint"]) ?? FALLBACK_DIM;
+    /** The heading and the glyph read as ordinary text, not as a muted aside. */
+    const TEXT = themeColour(["text", "base"]) ?? FALLBACK_TEXT;
+    /** The one accent for a *value* rather than a state — the workspace name, the same blue as the
+     *  branch in oc-git: `syntax.function` is the identity hue in most themes. */
+    const ACCENT = themeColour(["syntax", "function"], ["syntax", "variable"], ["text", "base"]) ?? FALLBACK_ACCENT;
+    const rpc = context.client.rpc(Budget);
+    const [snapshot, setSnapshot] = createRoot(() => createSignal(null));
+    const [ready, setReady] = createRoot(() => createSignal(false));
+    /** Why the last read failed. Kept, because a failed read used to be indistinguishable from a
+     *  fresh one: the panel showed the previous numbers and said nothing (eleven hours, 2026-10-27). */
+    const [failure, setFailure] = createRoot(() => createSignal(null));
+    const load = async force => {
+      try {
+        const next = await withTimeout(rpc.snapshot(force ? {
+          force: true
+        } : {}), RPC_TIMEOUT_MS);
+        setSnapshot(next);
+        setFailure(null);
+      } catch (error) {
+        // Keep the last good snapshot rather than blanking the widget — but say so.
+        setFailure(error instanceof Error ? error.message : String(error));
+      } finally {
+        setReady(true);
+      }
+    };
+    void load(true);
+    const timer = setInterval(() => void load(false), REFRESH_MS);
+
+    // An account switch is a credential change on the server; picking it up from the
+    // event stream makes the widget follow the switch at once instead of waiting for
+    // the next poll. The exact event names are not relied on — anything mentioning a
+    // credential or an integration re-reads (the server caches, so a stray one is cheap).
+    let unsubscribe;
+    try {
+      unsubscribe = context.data.listen(event => {
+        const type = String(event?.details?.type ?? event?.type ?? "");
+        if (/credential|integration/.test(type)) void load(true);
+      });
+    } catch {
+      // No event stream available: the poll still covers it.
+    }
+
+    // A model switch should land immediately: the wallet that pays can change with it.
+    let lastModelKey = "";
+    createRoot(() => {
+      createEffect(() => {
+        const current = context.ui.model.current();
+        const key = `${current?.providerID ?? ""}/${current?.modelID ?? ""}`;
+        if (key === lastModelKey) return;
+        lastModelKey = key;
+        void load(true);
+      });
+    });
+    const model = () => context.ui.model.current();
+
+    /** Go window colour: green normally, yellow from the alert threshold, red once the window
+     *  is exhausted — the quota is spent and the gateway has fallen back to the Zen balance,
+     *  the same "nothing left" the other wallets report in red at zero. */
+    const goColor = percent => {
+      if (percent === null) return DIM;
+      if (percent >= 100) return RED;
+      return percent >= GO_WARN_PERCENT ? YELLOW : GREEN;
+    };
+    const balanceColor = (value, warn) => {
+      if (typeof value !== "number") return DIM;
+      if (value <= 0) return RED;
+      return value <= warn ? YELLOW : GREEN;
+    };
+
+    /** The console's figure: spendable credit, which is the balance unless it went under. */
+    const zenCredit = zen => zen?.available ?? zen?.balance;
+
+    // ---------------------------------------------------------------------------
+    // Rows
+    // ---------------------------------------------------------------------------
+
+    const Sidebar = () => {
+      // A memo, not the body: the body runs once, the memo re-runs on every
+      // snapshot/model change and rebuilds the rows from the current values.
+      const rows = createMemo(() => {
+        const snap = snapshot();
+        // Two questions, two functions (`peak.ts`). This block answers "is the tariff in its doubled
+        // window": it marks GO and DS whatever is paying, because the mark is the reminder not to
+        // switch *to* them now. `doubles` answers "is the model in front of me paying double", and
+        // that is the footer's and the capsule's job.
+        const atPeak = isDeepseekPeak(clock()) ? PEAK_GLYPH : "";
+        const goPercent = windowPercent(snap?.go?.monthly);
+        const out = [];
+        if (!ready()) out.push((() => {
+          var _el$ = _$createElement("text");
+          _$insertNode(_el$, _$createTextNode(`reading…`));
+          _$setProp(_el$, "fg", DIM);
+          return _el$;
+        })());
+        // A reading older than two polls is not fresh, and saying so is the difference between
+        // "the numbers" and "the numbers from an hour ago".
+        const readAt = snap?.at;
+        if (typeof readAt === "number" && Date.now() - readAt > 2 * REFRESH_MS) {
+          out.push((() => {
+            var _el$3 = _$createElement("text"),
+              _el$4 = _$createTextNode(`stale `);
+            _$insertNode(_el$3, _el$4);
+            _$setProp(_el$3, "fg", YELLOW);
+            _$insert(_el$3, () => ageText(Date.now() - readAt), null);
+            return _el$3;
+          })());
+        }
+        if (ready() && !snap) out.push((() => {
+          var _el$5 = _$createElement("text");
+          _$insertNode(_el$5, _$createTextNode(`budget —`));
+          _$setProp(_el$5, "fg", RED);
+          return _el$5;
+        })());
+        if (failure()) out.push((() => {
+          var _el$7 = _$createElement("text");
+          _$setProp(_el$7, "fg", DIM);
+          _$insert(_el$7, failure);
+          return _el$7;
+        })());
+        // No wallet at all. The title above is drawn either way, so without this line it would be a
+        // promise with nothing under it; one muted line says what the account is, and `/budget`
+        // carries the command that changes it.
+        if (ready() && snap && !connected(snap)) {
+          out.push((() => {
+            var _el$8 = _$createElement("text");
+            _$insertNode(_el$8, _$createTextNode(`no provider connected`));
+            _$setProp(_el$8, "fg", DIM);
+            return _el$8;
+          })());
+        }
+        if (snap?.go && !snap.go.error) {
+          out.push((() => {
+            var _el$0 = _$createElement("box"),
+              _el$1 = _$createElement("text"),
+              _el$11 = _$createElement("text"),
+              _el$13 = _$createElement("text");
+            _$insertNode(_el$0, _el$1);
+            _$insertNode(_el$0, _el$11);
+            _$insertNode(_el$0, _el$13);
+            _$setProp(_el$0, "flexDirection", "row");
+            _$insertNode(_el$1, _$createTextNode(`GO`));
+            _$insertNode(_el$11, _$createTextNode(` `));
+            _$insert(_el$13, () => goPercent === null ? "—" : `${bar(goPercent)} ${percentText(goPercent)}`);
+            _$insert(_el$0, atPeak ? (() => {
+              var _el$14 = _$createElement("text"),
+                _el$15 = _$createTextNode(` 󰔵`);
+              _$insertNode(_el$14, _el$15);
+              _$setProp(_el$14, "fg", RED);
+              return _el$14;
+            })() : null, null);
+            _$effect(_p$ => {
+              var _v$ = goColor(goPercent),
+                _v$2 = goColor(goPercent);
+              _v$ !== _p$.e && (_p$.e = _$setProp(_el$1, "fg", _v$, _p$.e));
+              _v$2 !== _p$.t && (_p$.t = _$setProp(_el$13, "fg", _v$2, _p$.t));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$0;
+          })());
+          // One line per window, its reset on the same line: three counters side by side plus three
+          // countdowns would need ~45 columns and this panel does not know the sidebar's width, so
+          // the block grows down instead of across. The percent is padded to five so the resets line
+          // up; the widest row is `mo 100%  reset 24d 3h`, 21 columns.
+          const windowRow = (label, percent, resetsAt) => {
+            const reset = countdown(resetsAt);
+            return (() => {
+              var _el$17 = _$createElement("box"),
+                _el$18 = _$createElement("text"),
+                _el$19 = _$createTextNode(` `),
+                _el$20 = _$createElement("text");
+              _$insertNode(_el$17, _el$18);
+              _$insertNode(_el$17, _el$20);
+              _$setProp(_el$17, "flexDirection", "row");
+              _$insertNode(_el$18, _el$19);
+              _$setProp(_el$18, "fg", DIM);
+              _$insert(_el$18, label, _el$19);
+              _$insert(_el$20, () => percentText(percent).padEnd(5));
+              _$insert(_el$17, reset ? (() => {
+                var _el$21 = _$createElement("text"),
+                  _el$22 = _$createTextNode(`reset `);
+                _$insertNode(_el$21, _el$22);
+                _$setProp(_el$21, "fg", DIM);
+                _$insert(_el$21, reset, null);
+                return _el$21;
+              })() : null, null);
+              _$effect(_$p => _$setProp(_el$20, "fg", goColor(percent), _$p));
+              return _el$17;
+            })();
+          };
+          out.push(windowRow("5h", windowPercent(snap.go.rolling), snap.go.rolling?.resetsAt));
+          out.push(windowRow("wk", windowPercent(snap.go.weekly), snap.go.weekly?.resetsAt));
+          out.push(windowRow("mo", goPercent, snap.go.monthly?.resetsAt));
+          // After the reset, as a line of its own: the label dim, the name in the accent oc-git uses
+          // for the branch.
+          if (snap.zen?.org && (snap.zen.peers ?? 0) > 1) {
+            out.push((() => {
+              var _el$23 = _$createElement("box"),
+                _el$24 = _$createElement("text"),
+                _el$26 = _$createElement("text");
+              _$insertNode(_el$23, _el$24);
+              _$insertNode(_el$23, _el$26);
+              _$setProp(_el$23, "flexDirection", "row");
+              _$insertNode(_el$24, _$createTextNode(`workspace: `));
+              _$setProp(_el$24, "fg", DIM);
+              _$setProp(_el$26, "fg", ACCENT);
+              _$insert(_el$26, () => snap.zen.org);
+              return _el$23;
+            })());
+          }
+          // A dim rule closes the Go block, so the wallets below read as a separate group. Fixed, not
+          // measured: the panel does not know how wide the sidebar is, and 20 columns is the width every
+          // line clears short of exhaustion — a window row at 100% with a day-scale reset reaches 21.
+          out.push((() => {
+            var _el$27 = _$createElement("text");
+            _$insertNode(_el$27, _$createTextNode(`────────────────────`));
+            _$setProp(_el$27, "fg", DIM);
+            return _el$27;
+          })());
+        } else if (snap?.go?.error) {
+          out.push((() => {
+            var _el$29 = _$createElement("text");
+            _$insertNode(_el$29, _$createTextNode(`GO —`));
+            _$setProp(_el$29, "fg", DIM);
+            return _el$29;
+          })());
+          out.push((() => {
+            var _el$31 = _$createElement("text");
+            _$setProp(_el$31, "fg", DIM);
+            _$insert(_el$31, () => snap.go.error);
+            return _el$31;
+          })());
+        }
+        if (snap?.ds && !snap.ds.error) {
+          out.push((() => {
+            var _el$32 = _$createElement("box"),
+              _el$33 = _$createElement("text"),
+              _el$34 = _$createTextNode(`DS `);
+            _$insertNode(_el$32, _el$33);
+            _$setProp(_el$32, "flexDirection", "row");
+            _$insertNode(_el$33, _el$34);
+            _$insert(_el$33, () => usd(snap.ds.balance), null);
+            _$insert(_el$32, atPeak ? (() => {
+              var _el$35 = _$createElement("text"),
+                _el$36 = _$createTextNode(` 󰔵`);
+              _$insertNode(_el$35, _el$36);
+              _$setProp(_el$35, "fg", RED);
+              return _el$35;
+            })() : null, null);
+            _$effect(_$p => _$setProp(_el$33, "fg", balanceColor(snap.ds.balance, DS_WARN_USD), _$p));
+            return _el$32;
+          })());
+        } else if (snap?.ds?.error) {
+          out.push((() => {
+            var _el$38 = _$createElement("text");
+            _$insertNode(_el$38, _$createTextNode(`DS —`));
+            _$setProp(_el$38, "fg", DIM);
+            return _el$38;
+          })());
+          out.push((() => {
+            var _el$40 = _$createElement("text");
+            _$setProp(_el$40, "fg", DIM);
+            _$insert(_el$40, () => snap.ds.error);
+            return _el$40;
+          })());
+        }
+        if (snap?.or && !snap.or.error) {
+          out.push((() => {
+            var _el$41 = _$createElement("box"),
+              _el$42 = _$createElement("text"),
+              _el$43 = _$createTextNode(`OR `);
+            _$insertNode(_el$41, _el$42);
+            _$setProp(_el$41, "flexDirection", "row");
+            _$insertNode(_el$42, _el$43);
+            _$insert(_el$42, () => usd(snap.or.balance), null);
+            _$effect(_$p => _$setProp(_el$42, "fg", balanceColor(snap.or.balance, OR_WARN_USD), _$p));
+            return _el$41;
+          })());
+        } else if (snap?.or?.error) {
+          out.push((() => {
+            var _el$44 = _$createElement("text");
+            _$insertNode(_el$44, _$createTextNode(`OR —`));
+            _$setProp(_el$44, "fg", DIM);
+            return _el$44;
+          })());
+          out.push((() => {
+            var _el$46 = _$createElement("text");
+            _$setProp(_el$46, "fg", DIM);
+            _$insert(_el$46, () => snap.or.error);
+            return _el$46;
+          })());
+        }
+        if (snap?.zen && !snap.zen.error) {
+          out.push((() => {
+            var _el$47 = _$createElement("text"),
+              _el$48 = _$createTextNode(`ZEN `);
+            _$insertNode(_el$47, _el$48);
+            _$insert(_el$47, () => usd(zenCredit(snap.zen)), null);
+            _$effect(_$p => _$setProp(_el$47, "fg", balanceColor(zenCredit(snap.zen), ZEN_WARN_USD), _$p));
+            return _el$47;
+          })());
+        } else if (snap?.zen?.error) {
+          out.push((() => {
+            var _el$49 = _$createElement("text");
+            _$insertNode(_el$49, _$createTextNode(`ZEN —`));
+            _$setProp(_el$49, "fg", DIM);
+            return _el$49;
+          })());
+          out.push((() => {
+            var _el$51 = _$createElement("text");
+            _$setProp(_el$51, "fg", DIM);
+            _$insert(_el$51, () => snap.zen.error);
+            return _el$51;
+          })());
+        }
+        return out;
+      });
+      return (() => {
+        var _el$52 = _$createElement("box"),
+          _el$53 = _$createElement("text"),
+          _el$54 = _$createElement("span"),
+          _el$55 = _$createTextNode(`󰓅 `),
+          _el$57 = _$createElement("b");
+        _$insertNode(_el$52, _el$53);
+        _$setProp(_el$52, "flexDirection", "column");
+        _$insertNode(_el$53, _el$54);
+        _$insertNode(_el$53, _el$57);
+        _$setProp(_el$53, "fg", TEXT);
+        _$insertNode(_el$54, _el$55);
+        _$setProp(_el$54, "style", {
+          fg: DIM
+        });
+        _$insertNode(_el$57, _$createTextNode(`Budget`));
+        _$insert(_el$52, rows, null);
+        return _el$52;
+      })();
+    };
+
+    /** Appended to the footer, and the footer stays OpenCode's own: the folder (which is
+     *  clickable), the working spinner, the esc hint, the usage, the cost and the
+     *  shortcuts are all native. Taking that row over was tried and gave every one of
+     *  them up for a single string, so what we add is the paying wallet alone. */
+    const Footer = () => {
+      const budget = createMemo(() => {
+        const snap = snapshot();
+        const wallet = payingWallet(model(), snap);
+        if (wallet === "none") return undefined;
+        // The wallet the model pays with has no connection: nothing to say, and a dash would
+        // claim a reading. A snapshot that has not arrived yet is not this case.
+        if (snap && !snap[wallet]) return undefined;
+        if (wallet === "go") {
+          const percent = windowPercent(snap?.go?.monthly);
+          return {
+            color: goColor(percent),
+            body: percent === null ? "GO —" : `GO ${Math.round(percent)}%`,
+            marker: peakDoubles(model(), wallet, clock()) ? PEAK_GLYPH : ""
+          };
+        }
+        if (wallet === "zen") {
+          return {
+            color: balanceColor(zenCredit(snap?.zen), ZEN_WARN_USD),
+            body: `ZEN ${snap?.zen?.error ? "—" : usd(zenCredit(snap?.zen))}`,
+            marker: ""
+          };
+        }
+        if (wallet === "ds") {
+          return {
+            color: balanceColor(snap?.ds?.balance, DS_WARN_USD),
+            body: `DS ${snap?.ds?.error ? "—" : usd(snap?.ds?.balance)}`,
+            marker: peakDoubles(model(), wallet, clock()) ? PEAK_GLYPH : ""
+          };
+        }
+        return {
+          color: balanceColor(snap?.or?.balance, OR_WARN_USD),
+          body: `OR ${snap?.or?.error ? "—" : usd(snap?.or?.balance)}`,
+          marker: ""
+        };
+      });
+      return (() => {
+        var _el$59 = _$createElement("box");
+        _$setProp(_el$59, "flexDirection", "row");
+        _$setProp(_el$59, "gap", 2);
+        _$setProp(_el$59, "flexShrink", 0);
+        _$insert(_el$59, _$createComponent(Show, {
+          get when() {
+            return budget();
+          },
+          children: value => (() => {
+            var _el$60 = _$createElement("box"),
+              _el$61 = _$createElement("text"),
+              _el$62 = _$createTextNode(`󰓅 `),
+              _el$64 = _$createElement("text");
+            _$insertNode(_el$60, _el$61);
+            _$insertNode(_el$60, _el$64);
+            _$setProp(_el$60, "flexDirection", "row");
+            _$setProp(_el$60, "flexShrink", 0);
+            _$insertNode(_el$61, _el$62);
+            _$setProp(_el$61, "fg", DIM);
+            _$setProp(_el$61, "wrapMode", "none");
+            _$setProp(_el$64, "wrapMode", "none");
+            _$insert(_el$64, () => value().body);
+            _$insert(_el$60, _$createComponent(Show, {
+              get when() {
+                return value().marker;
+              },
+              children: marker => (() => {
+                var _el$65 = _$createElement("text"),
+                  _el$66 = _$createTextNode(` `);
+                _$insertNode(_el$65, _el$66);
+                _$setProp(_el$65, "fg", RED);
+                _$setProp(_el$65, "wrapMode", "none");
+                _$insert(_el$65, marker, null);
+                return _el$65;
+              })()
+            }), null);
+            _$effect(_$p => _$setProp(_el$64, "fg", value().color, _$p));
+            return _el$60;
+          })()
+        }));
+        return _el$59;
+      })();
+    };
+
+    // ---------------------------------------------------------------------------
+    // Report
+    // ---------------------------------------------------------------------------
+
+    function report() {
+      const snap = snapshot();
+      const wallet = payingWallet(model(), snap);
+      const lines = [];
+      const label = {
+        go: "OpenCode — paying: GO (subscription)",
+        zen: "OpenCode — paying: ZEN (pay-per-use balance)",
+        ds: "DeepSeek — paying: balance (pay-per-use, no quota windows)",
+        or: "OpenRouter — paying: credit balance (pay-per-use, no quota windows)",
+        none: "No budget provider selected"
+      };
+      // Two silences that are not the same silence: no provider connected is a setup that has not
+      // happened, while "no budget provider selected" is a model whose provider the four wallets do
+      // not cover — a Go subscription and an Anthropic model, say. Answering the second for the
+      // first would name the wrong problem.
+      const nothing = !!snap && !connected(snap);
+      lines.push(nothing ? "No provider connected" : label[wallet]);
+      if (snap?.zen?.org) lines.push(`workspace: ${snap.zen.org}`);
+      lines.push("");
+      if (nothing) {
+        lines.push("  connect one with:  opencode auth login");
+        return lines.join("\n");
+      }
+
+      // `pays` is true for the monthly window only: that is the window the paying wallet rule
+      // reads, so flagging an exhausted five-hour window would claim ZEN pays when it does not.
+      const goWindow = (name, window, pays) => {
+        if (!window || typeof window.percent !== "number") return `  ${name.padEnd(8)} (no data)`;
+        const percent = Math.round(window.percent);
+        const reset = countdown(window.resetsAt);
+        const flag = pays && window.status === "rate-limited" ? "  ZEN paying" : "";
+        return `  ${name.padEnd(8)} ${bar(percent)} ${String(percent).padStart(3)}%${reset ? `  reset in ${reset}` : ""}${flag}`;
+      };
+      if (snap?.go && !snap.go.error) {
+        lines.push(goWindow("5h", snap.go.rolling, false));
+        lines.push(goWindow("weekly", snap.go.weekly, false));
+        lines.push(goWindow("monthly", snap.go.monthly, true));
+      } else if (snap?.go?.error) {
+        lines.push(`  ${"go".padEnd(8)} ${snap.go.error}`);
+      }
+      if (snap?.ds && !snap.ds.error) {
+        lines.push(`  ${"deepseek".padEnd(8)} ${usd(snap.ds.balance)}`);
+      } else if (snap?.ds?.error) {
+        lines.push(`  ${"deepseek".padEnd(8)} ${snap.ds.error}`);
+      }
+      if (snap?.or && !snap.or.error) {
+        const of = typeof snap.or.totalCredits === "number" ? ` of ${usd(snap.or.totalCredits)}` : "";
+        const used = typeof snap.or.totalUsage === "number" ? `   (used ${usd(snap.or.totalUsage)})` : "";
+        lines.push(`  ${"openrouter".padEnd(8)} ${usd(snap.or.balance)}${of}${used}`);
+        if (typeof snap.or.usageMonthly === "number") {
+          lines.push(`  ${"".padEnd(8)} month ${usd(snap.or.usageMonthly)}`);
+        }
+      } else if (snap?.or?.error) {
+        lines.push(`  ${"openrouter".padEnd(8)} ${snap.or.error}`);
+      }
+      if (snap?.zen && !snap.zen.error) {
+        // The console's figure, with the ledger beside it only when the account is under: the
+        // clamped credit would hide those cents, and they are spent money, not a rounding.
+        const debt = snap.zen.balance !== undefined && snap.zen.balance < 0 ? `  (debt ${usd(-snap.zen.balance)})` : "";
+        lines.push(`  ${"zen".padEnd(8)} ${usd(zenCredit(snap.zen))}${debt}`);
+      } else if (snap?.zen?.error) {
+        lines.push(`  ${"zen".padEnd(8)} ${snap.zen.error}`);
+      }
+
+      // The price regime only means something where the tariff moves.
+      if (wallet === "ds" || wallet === "go" && /^deepseek/.test(model()?.modelID ?? "")) {
+        const next = nextRegimeChange(clock());
+        lines.push("");
+        lines.push(`  ${"peak".padEnd(8)} ${isDeepseekPeak(clock()) ? "PEAK — paying double" : "off-peak (half price)"}`);
+        lines.push(`  ${"next".padEnd(8)} ${next.peak ? "peak" : "off-peak"} in ${countdown(new Date(next.at).toISOString())}`);
+      }
+      if (snap?.at) {
+        lines.push("");
+        lines.push(`  updated ${new Date(snap.at).toLocaleTimeString()}`);
+      }
+      return lines.join("\n");
+    }
+
+    // ---------------------------------------------------------------------------
+    // Slots and command
+    // ---------------------------------------------------------------------------
+
+    const sidebarSlot = context.ui.slot({
+      prepend: "sidebar.content",
+      render: () => _$createComponent(Sidebar, {})
+    });
+    context.ui.slot({
+      append: "prompt.footer.status",
+      render: () => _$createComponent(Footer, {})
+    });
+    context.keymap.layer(() => ({
+      mode: "global",
+      commands: [{
+        id: "oc-budget.report",
+        title: "Budget report",
+        group: "Budget",
+        palette: true,
+        slash: {
+          name: "budget",
+          arguments: true
+        },
+        run: async input => {
+          await load((input ?? "").trim().toLowerCase() === "refresh");
+          await context.ui.dialog.alert({
+            title: `${BUDGET_GLYPH} Budget`,
+            message: report()
+          });
+        }
+      }]
+    }));
+    return () => {
+      clearInterval(timer);
+      unsubscribe?.();
+      sidebarSlot?.();
+    };
+  }
+});