@chenlongapps/opencode-token-usage 0.3.3 → 0.4.0

package/dist/tui.js

@@ -1,3 +1,5 @@
+import { memo as _$memo } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { effect as _$effect } from "@opentui/solid";
 import { insert as _$insert } from "@opentui/solid";
@@ -6,11 +8,13 @@ import { insertNode as _$insertNode } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 import { Plugin } from "@opencode/plugin/tui";
+import { useTerminalDimensions } from "@opentui/solid";
 import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
 import { UsageController } from "./controller.js";
 import { PerformanceMonitor } from "./performance.js";
+import { breakdownRows } from "./context-sources.js";
 import { createSource } from "./source.js";
-import { usageRows } from "./usage.js";
+import { bar, countLabel, formatCompact, formatEstimatedCost, formatTokens, requestRows, summaryRows, usageRows } from "./usage.js";
 function UsagePanel(props) {
   const [state, setState] = createSignal({
     status: "loading"
@@ -87,6 +91,573 @@ function UsagePanel(props) {
     return _el$;
   })();
 }
+function UsageDialog(props) {
+  const [state, setState] = createSignal({
+    status: "loading"
+  });
+  const [detailed, setDetailed] = createSignal(false);
+  const dimensions = useTerminalDimensions();
+  const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
+    details
+  }) => listener(details)), setState, 80, 3_000, 100, props.performance, true);
+  const unregister = props.register(controller);
+  controller.select(props.sessionID);
+  onCleanup(() => {
+    controller.dispose();
+    unregister();
+  });
+  let scroll;
+  props.context.keymap.layer(() => ({
+    mode: "modal",
+    commands: [{
+      bind: "up",
+      title: "Scroll usage up",
+      group: "Dialog",
+      run: () => scroll?.scrollBy(-1)
+    }, {
+      bind: "down",
+      title: "Scroll usage down",
+      group: "Dialog",
+      run: () => scroll?.scrollBy(1)
+    }, {
+      bind: "pageup",
+      title: "Previous usage page",
+      group: "Dialog",
+      run: () => scroll?.scrollBy(-10)
+    }, {
+      bind: "pagedown",
+      title: "Next usage page",
+      group: "Dialog",
+      run: () => scroll?.scrollBy(10)
+    }, {
+      bind: "home",
+      title: "First usage row",
+      group: "Dialog",
+      run: () => scroll?.scrollTo(0)
+    }, {
+      bind: "end",
+      title: "Last usage row",
+      group: "Dialog",
+      run: () => scroll?.scrollTo(Infinity)
+    }, {
+      bind: "d",
+      title: "Toggle usage details",
+      group: "Dialog",
+      run: () => {
+        setDetailed(value => !value);
+      }
+    }]
+  }));
+  const theme = () => props.context.theme.text;
+  const context = createMemo(() => state().details?.context);
+  const models = createMemo(() => state().details?.models ?? []);
+  const sources = createMemo(() => state().details?.sources);
+  // The host gives this dialog a fixed width; keep every row inside that content box.
+  const width = createMemo(() => Math.max(24, Math.min(88, dimensions().width - 2) - 4));
+  const windowBar = createMemo(() => Math.max(8, Math.min(48, width() - 16)));
+  const breakdownBar = createMemo(() => Math.max(6, Math.min(20, width() - 46)));
+  const pairColumns = createMemo(() => width() >= 44);
+  const compact = () => !detailed();
+  const number = value => compact() ? formatCompact(value) : formatTokens(value);
+  const status = () => ({
+    loading: "Loading…",
+    ready: "",
+    stale: "Not updated · retrying…",
+    unavailable: "Unavailable · retrying…"
+  })[state().status];
+  // The body never repeats the model name: one identity line carries the session and models.
+  const identity = createMemo(() => {
+    const title = state().details?.sessionTitle;
+    const active = models().length > 1 ? `${models().length} models` : state().model;
+    return [title, active].filter(Boolean).join(" · ");
+  });
+  const requestRowsList = rows => {
+    const half = Math.ceil(rows.length / 2);
+    const columns = [rows.slice(0, half), rows.slice(half)];
+    const cell = ([label, value]) => (() => {
+      var _el$9 = _$createElement("box"),
+        _el$0 = _$createElement("text"),
+        _el$1 = _$createElement("text");
+      _$insertNode(_el$9, _el$0);
+      _$insertNode(_el$9, _el$1);
+      _$setProp(_el$9, "flexDirection", "row");
+      _$setProp(_el$9, "justifyContent", "space-between");
+      _$setProp(_el$9, "gap", 2);
+      _$setProp(_el$0, "flexShrink", 0);
+      _$insert(_el$0, label);
+      _$insert(_el$1, value);
+      _$effect(_p$ => {
+        var _v$4 = theme().muted,
+          _v$5 = theme().base;
+        _v$4 !== _p$.e && (_p$.e = _$setProp(_el$0, "fg", _v$4, _p$.e));
+        _v$5 !== _p$.t && (_p$.t = _$setProp(_el$1, "fg", _v$5, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$9;
+    })();
+    return pairColumns() ? (() => {
+      var _el$10 = _$createElement("box");
+      _$setProp(_el$10, "flexDirection", "row");
+      _$setProp(_el$10, "gap", 2);
+      _$insert(_el$10, () => columns.map(column => (() => {
+        var _el$11 = _$createElement("box");
+        _$setProp(_el$11, "flexDirection", "column");
+        _$setProp(_el$11, "flexGrow", 1);
+        _$setProp(_el$11, "minWidth", 0);
+        _$insert(_el$11, () => column.map(cell));
+        return _el$11;
+      })()));
+      return _el$10;
+    })() : (() => {
+      var _el$12 = _$createElement("box");
+      _$setProp(_el$12, "flexDirection", "column");
+      _$insert(_el$12, () => rows.map(cell));
+      return _el$12;
+    })();
+  };
+  const barRow = (percent, size) => {
+    const cells = bar(percent, size);
+    return (() => {
+      var _el$13 = _$createElement("box"),
+        _el$14 = _$createElement("text"),
+        _el$15 = _$createElement("text");
+      _$insertNode(_el$13, _el$14);
+      _$insertNode(_el$13, _el$15);
+      _$setProp(_el$13, "flexDirection", "row");
+      _$insert(_el$14, () => "█".repeat(cells.filled));
+      _$insert(_el$15, () => "░".repeat(cells.empty));
+      _$effect(_p$ => {
+        var _v$6 = theme().base,
+          _v$7 = theme().muted;
+        _v$6 !== _p$.e && (_p$.e = _$setProp(_el$14, "fg", _v$6, _p$.e));
+        _v$7 !== _p$.t && (_p$.t = _$setProp(_el$15, "fg", _v$7, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$13;
+    })();
+  };
+  return (() => {
+    var _el$16 = _$createElement("box"),
+      _el$17 = _$createElement("box"),
+      _el$18 = _$createElement("text"),
+      _el$19 = _$createElement("b"),
+      _el$21 = _$createElement("text"),
+      _el$48 = _$createElement("text");
+    _$insertNode(_el$16, _el$17);
+    _$insertNode(_el$16, _el$48);
+    _$setProp(_el$16, "paddingLeft", 2);
+    _$setProp(_el$16, "paddingRight", 2);
+    _$setProp(_el$16, "paddingBottom", 1);
+    _$setProp(_el$16, "gap", 1);
+    _$insertNode(_el$17, _el$18);
+    _$insertNode(_el$17, _el$21);
+    _$setProp(_el$17, "flexDirection", "row");
+    _$setProp(_el$17, "justifyContent", "space-between");
+    _$setProp(_el$17, "gap", 2);
+    _$insertNode(_el$18, _el$19);
+    _$insertNode(_el$19, _$createTextNode(`Token Usage`));
+    _$insertNode(_el$21, _$createTextNode(`esc`));
+    _$setProp(_el$21, "onMouseUp", () => props.context.ui.dialog.clear());
+    _$insert(_el$16, _$createComponent(Show, {
+      get when() {
+        return identity();
+      },
+      get children() {
+        var _el$23 = _$createElement("text");
+        _$setProp(_el$23, "wrapMode", "word");
+        _$insert(_el$23, identity);
+        _$effect(_$p => _$setProp(_el$23, "fg", theme().muted, _$p));
+        return _el$23;
+      }
+    }), _el$48);
+    _$insert(_el$16, _$createComponent(Show, {
+      get when() {
+        return state().status !== "ready";
+      },
+      get children() {
+        var _el$24 = _$createElement("text");
+        _$insert(_el$24, status);
+        _$effect(_$p => _$setProp(_el$24, "fg", theme().muted, _$p));
+        return _el$24;
+      }
+    }), _el$48);
+    _$insert(_el$16, _$createComponent(Show, {
+      get when() {
+        return state().summary;
+      },
+      get children() {
+        var _el$25 = _$createElement("scrollbox"),
+          _el$26 = _$createElement("box"),
+          _el$27 = _$createElement("box"),
+          _el$28 = _$createElement("text"),
+          _el$29 = _$createElement("b"),
+          _el$31 = _$createElement("box"),
+          _el$32 = _$createElement("box"),
+          _el$33 = _$createElement("text"),
+          _el$34 = _$createElement("b"),
+          _el$36 = _$createElement("box"),
+          _el$37 = _$createElement("text"),
+          _el$38 = _$createElement("b"),
+          _el$40 = _$createElement("box"),
+          _el$41 = _$createElement("text"),
+          _el$42 = _$createElement("b"),
+          _el$44 = _$createElement("box"),
+          _el$45 = _$createElement("text"),
+          _el$46 = _$createElement("b");
+        _$insertNode(_el$25, _el$26);
+        _$use(value => {
+          scroll = value;
+        }, _el$25);
+        _$setProp(_el$25, "contentOptions", {
+          minHeight: 0
+        });
+        _$setProp(_el$25, "scrollbarOptions", {
+          visible: false
+        });
+        _$insertNode(_el$26, _el$27);
+        _$insertNode(_el$26, _el$31);
+        _$insertNode(_el$26, _el$36);
+        _$insertNode(_el$26, _el$40);
+        _$insertNode(_el$26, _el$44);
+        _$setProp(_el$26, "gap", 1);
+        _$insertNode(_el$27, _el$28);
+        _$insertNode(_el$28, _el$29);
+        _$insertNode(_el$29, _$createTextNode(`Context Window`));
+        _$insert(_el$27, _$createComponent(Show, {
+          get when() {
+            return context();
+          },
+          get fallback() {
+            return (() => {
+              var _el$50 = _$createElement("text");
+              _$insertNode(_el$50, _$createTextNode(`Context usage unavailable`));
+              _$effect(_$p => _$setProp(_el$50, "fg", theme().muted, _$p));
+              return _el$50;
+            })();
+          },
+          children: details => (() => {
+            var _el$52 = _$createElement("box"),
+              _el$53 = _$createElement("box"),
+              _el$54 = _$createElement("text"),
+              _el$56 = _$createElement("text"),
+              _el$57 = _$createTextNode(` / `),
+              _el$58 = _$createTextNode(` (`),
+              _el$59 = _$createTextNode(`%)`);
+            _$insertNode(_el$52, _el$53);
+            _$insertNode(_el$53, _el$54);
+            _$insertNode(_el$53, _el$56);
+            _$setProp(_el$53, "flexDirection", "row");
+            _$setProp(_el$53, "justifyContent", "space-between");
+            _$setProp(_el$53, "gap", 2);
+            _$insertNode(_el$54, _$createTextNode(`Used / Limit`));
+            _$setProp(_el$54, "flexShrink", 0);
+            _$insertNode(_el$56, _el$57);
+            _$insertNode(_el$56, _el$58);
+            _$insertNode(_el$56, _el$59);
+            _$setProp(_el$56, "wrapMode", "word");
+            _$setProp(_el$56, "minWidth", 0);
+            _$insert(_el$56, () => number(details().usage.used), _el$57);
+            _$insert(_el$56, () => number(details().usage.limit), _el$58);
+            _$insert(_el$56, () => details().usage.percent.toFixed(1), _el$59);
+            _$insert(_el$52, () => barRow(details().usage.percent, windowBar()), null);
+            _$effect(_p$ => {
+              var _v$15 = theme().muted,
+                _v$16 = theme().base;
+              _v$15 !== _p$.e && (_p$.e = _$setProp(_el$54, "fg", _v$15, _p$.e));
+              _v$16 !== _p$.t && (_p$.t = _$setProp(_el$56, "fg", _v$16, _p$.t));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$52;
+          })()
+        }), null);
+        _$insertNode(_el$31, _el$32);
+        _$insertNode(_el$32, _el$33);
+        _$setProp(_el$32, "flexDirection", "row");
+        _$setProp(_el$32, "justifyContent", "space-between");
+        _$setProp(_el$32, "gap", 2);
+        _$insertNode(_el$33, _el$34);
+        _$insertNode(_el$34, _$createTextNode(`Last Request`));
+        _$insert(_el$32, _$createComponent(Show, {
+          get when() {
+            return sources();
+          },
+          children: captured => (() => {
+            var _el$60 = _$createElement("text");
+            _$insert(_el$60, () => new Date(captured().capturedAt).toLocaleTimeString());
+            _$effect(_$p => _$setProp(_el$60, "fg", theme().muted, _$p));
+            return _el$60;
+          })()
+        }), null);
+        _$insert(_el$31, _$createComponent(Show, {
+          get when() {
+            return context();
+          },
+          get fallback() {
+            return (() => {
+              var _el$61 = _$createElement("text");
+              _$insertNode(_el$61, _$createTextNode(`Request composition unavailable`));
+              _$effect(_$p => _$setProp(_el$61, "fg", theme().muted, _$p));
+              return _el$61;
+            })();
+          },
+          children: details => (() => {
+            var _el$63 = _$createElement("box");
+            _$insert(_el$63, () => requestRowsList(requestRows(details(), compact())));
+            return _el$63;
+          })()
+        }), null);
+        _$insertNode(_el$36, _el$37);
+        _$insertNode(_el$37, _el$38);
+        _$insertNode(_el$38, _$createTextNode(`Context Breakdown`));
+        _$insert(_el$36, _$createComponent(Show, {
+          get when() {
+            return sources();
+          },
+          get fallback() {
+            return (() => {
+              var _el$64 = _$createElement("text");
+              _$insertNode(_el$64, _$createTextNode(`Source estimates unavailable (no request snapshot or RPC)`));
+              _$effect(_$p => _$setProp(_el$64, "fg", theme().muted, _$p));
+              return _el$64;
+            })();
+          },
+          children: captured => _$createComponent(For, {
+            get each() {
+              return breakdownRows(captured(), detailed());
+            },
+            children: row => (() => {
+              var _el$66 = _$createElement("box"),
+                _el$67 = _$createElement("box"),
+                _el$68 = _$createElement("text"),
+                _el$69 = _$createElement("box"),
+                _el$70 = _$createElement("text"),
+                _el$71 = _$createElement("text"),
+                _el$72 = _$createTextNode(`%`);
+              _$insertNode(_el$66, _el$67);
+              _$insertNode(_el$66, _el$69);
+              _$insertNode(_el$66, _el$70);
+              _$insertNode(_el$66, _el$71);
+              _$setProp(_el$66, "flexDirection", "row");
+              _$setProp(_el$66, "gap", 1);
+              _$insertNode(_el$67, _el$68);
+              _$setProp(_el$67, "width", 14);
+              _$setProp(_el$67, "flexShrink", 0);
+              _$insert(_el$68, () => row.label);
+              _$setProp(_el$69, "flexShrink", 0);
+              _$insert(_el$69, () => barRow(row.percent, breakdownBar()));
+              _$setProp(_el$70, "flexShrink", 0);
+              _$insert(_el$70, () => number(row.tokens));
+              _$insertNode(_el$71, _el$72);
+              _$setProp(_el$71, "flexShrink", 0);
+              _$insert(_el$71, () => row.percent.toFixed(1), _el$72);
+              _$effect(_p$ => {
+                var _v$17 = theme().muted,
+                  _v$18 = breakdownBar(),
+                  _v$19 = theme().base,
+                  _v$20 = theme().muted;
+                _v$17 !== _p$.e && (_p$.e = _$setProp(_el$68, "fg", _v$17, _p$.e));
+                _v$18 !== _p$.t && (_p$.t = _$setProp(_el$69, "width", _v$18, _p$.t));
+                _v$19 !== _p$.a && (_p$.a = _$setProp(_el$70, "fg", _v$19, _p$.a));
+                _v$20 !== _p$.o && (_p$.o = _$setProp(_el$71, "fg", _v$20, _p$.o));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined
+              });
+              return _el$66;
+            })()
+          })
+        }), null);
+        _$insertNode(_el$40, _el$41);
+        _$insertNode(_el$41, _el$42);
+        _$insertNode(_el$42, _$createTextNode(`Session`));
+        _$insert(_el$40, _$createComponent(Show, {
+          get when() {
+            return state().summary;
+          },
+          get fallback() {
+            return (() => {
+              var _el$73 = _$createElement("text");
+              _$insertNode(_el$73, _$createTextNode(`Session usage unavailable`));
+              _$effect(_$p => _$setProp(_el$73, "fg", theme().muted, _$p));
+              return _el$73;
+            })();
+          },
+          children: summary => _$createComponent(Show, {
+            get when() {
+              return detailed();
+            },
+            get fallback() {
+              return (() => {
+                var _el$75 = _$createElement("text"),
+                  _el$76 = _$createTextNode(` · `),
+                  _el$77 = _$createTextNode(` · `),
+                  _el$78 = _$createTextNode(` tokens · `),
+                  _el$79 = _$createTextNode(`% cached`);
+                _$insertNode(_el$75, _el$76);
+                _$insertNode(_el$75, _el$77);
+                _$insertNode(_el$75, _el$78);
+                _$insertNode(_el$75, _el$79);
+                _$setProp(_el$75, "wrapMode", "word");
+                _$insert(_el$75, () => countLabel(summary().steps, "step"), _el$76);
+                _$insert(_el$75, () => countLabel(summary().calls, "call"), _el$77);
+                _$insert(_el$75, () => formatCompact(summary().total), _el$78);
+                _$insert(_el$75, () => (summary().cacheRate * 100).toFixed(1), _el$79);
+                _$insert(_el$75, (() => {
+                  var _c$ = _$memo(() => !!formatEstimatedCost(summary().cost, summary().costStatus));
+                  return () => _c$() ? ` · ${formatEstimatedCost(summary().cost, summary().costStatus)}` : "";
+                })(), null);
+                _$effect(_$p => _$setProp(_el$75, "fg", theme().base, _$p));
+                return _el$75;
+              })();
+            },
+            get children() {
+              return _$createComponent(For, {
+                get each() {
+                  return summaryRows(summary());
+                },
+                children: ([label, value]) => (() => {
+                  var _el$80 = _$createElement("box"),
+                    _el$81 = _$createElement("text"),
+                    _el$82 = _$createElement("text");
+                  _$insertNode(_el$80, _el$81);
+                  _$insertNode(_el$80, _el$82);
+                  _$setProp(_el$80, "flexDirection", "row");
+                  _$setProp(_el$80, "justifyContent", "space-between");
+                  _$setProp(_el$80, "gap", 2);
+                  _$setProp(_el$81, "flexShrink", 0);
+                  _$insert(_el$81, label);
+                  _$insert(_el$82, value);
+                  _$effect(_p$ => {
+                    var _v$21 = theme().muted,
+                      _v$22 = theme().base;
+                    _v$21 !== _p$.e && (_p$.e = _$setProp(_el$81, "fg", _v$21, _p$.e));
+                    _v$22 !== _p$.t && (_p$.t = _$setProp(_el$82, "fg", _v$22, _p$.t));
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  return _el$80;
+                })()
+              });
+            }
+          })
+        }), null);
+        _$insertNode(_el$44, _el$45);
+        _$insertNode(_el$45, _el$46);
+        _$insertNode(_el$46, _$createTextNode(`By Model`));
+        _$insert(_el$44, _$createComponent(Show, {
+          get when() {
+            return models().length;
+          },
+          get fallback() {
+            return (() => {
+              var _el$83 = _$createElement("text");
+              _$insertNode(_el$83, _$createTextNode(`No model usage yet`));
+              _$effect(_$p => _$setProp(_el$83, "fg", theme().muted, _$p));
+              return _el$83;
+            })();
+          },
+          get children() {
+            return _$createComponent(For, {
+              get each() {
+                return models();
+              },
+              children: model => (() => {
+                var _el$85 = _$createElement("box"),
+                  _el$86 = _$createElement("box"),
+                  _el$87 = _$createElement("text"),
+                  _el$88 = _$createElement("text"),
+                  _el$89 = _$createElement("text"),
+                  _el$90 = _$createTextNode(` tokens · `);
+                _$insertNode(_el$85, _el$86);
+                _$insertNode(_el$85, _el$89);
+                _$insertNode(_el$86, _el$87);
+                _$insertNode(_el$86, _el$88);
+                _$setProp(_el$86, "flexDirection", "row");
+                _$setProp(_el$86, "justifyContent", "space-between");
+                _$setProp(_el$86, "gap", 2);
+                _$setProp(_el$87, "wrapMode", "word");
+                _$setProp(_el$87, "minWidth", 0);
+                _$setProp(_el$87, "flexGrow", 1);
+                _$insert(_el$87, () => model.model);
+                _$setProp(_el$88, "flexShrink", 0);
+                _$insert(_el$88, () => formatEstimatedCost(model.cost, model.costStatus) ?? "");
+                _$insertNode(_el$89, _el$90);
+                _$insert(_el$89, () => number(model.tokens), _el$90);
+                _$insert(_el$89, () => countLabel(model.calls, "call"), null);
+                _$effect(_p$ => {
+                  var _v$23 = theme().base,
+                    _v$24 = theme().base,
+                    _v$25 = theme().muted;
+                  _v$23 !== _p$.e && (_p$.e = _$setProp(_el$87, "fg", _v$23, _p$.e));
+                  _v$24 !== _p$.t && (_p$.t = _$setProp(_el$88, "fg", _v$24, _p$.t));
+                  _v$25 !== _p$.a && (_p$.a = _$setProp(_el$89, "fg", _v$25, _p$.a));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
+                return _el$85;
+              })()
+            });
+          }
+        }), null);
+        _$effect(_p$ => {
+          var _v$8 = Math.max(3, dimensions().height - Math.floor(dimensions().height / 4) - 8),
+            _v$9 = theme().base,
+            _v$0 = theme().base,
+            _v$1 = theme().base,
+            _v$10 = theme().base,
+            _v$11 = theme().base;
+          _v$8 !== _p$.e && (_p$.e = _$setProp(_el$25, "maxHeight", _v$8, _p$.e));
+          _v$9 !== _p$.t && (_p$.t = _$setProp(_el$28, "fg", _v$9, _p$.t));
+          _v$0 !== _p$.a && (_p$.a = _$setProp(_el$33, "fg", _v$0, _p$.a));
+          _v$1 !== _p$.o && (_p$.o = _$setProp(_el$37, "fg", _v$1, _p$.o));
+          _v$10 !== _p$.i && (_p$.i = _$setProp(_el$41, "fg", _v$10, _p$.i));
+          _v$11 !== _p$.n && (_p$.n = _$setProp(_el$45, "fg", _v$11, _p$.n));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined
+        });
+        return _el$25;
+      }
+    }), _el$48);
+    _$insertNode(_el$48, _$createTextNode(`↑/↓ scroll · d details · esc close`));
+    _$effect(_p$ => {
+      var _v$12 = theme().base,
+        _v$13 = theme().muted,
+        _v$14 = theme().muted;
+      _v$12 !== _p$.e && (_p$.e = _$setProp(_el$18, "fg", _v$12, _p$.e));
+      _v$13 !== _p$.t && (_p$.t = _$setProp(_el$21, "fg", _v$13, _p$.t));
+      _v$14 !== _p$.a && (_p$.a = _$setProp(_el$48, "fg", _v$14, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$16;
+  })();
+}
 export default Plugin.define({
   id: "opencode-token-usage.tui",
   setup(context) {
@@ -120,17 +691,17 @@ export default Plugin.define({
           return context.data.session.get(props.sessionID)?.parentID;
         },
         get children() {
-          var _el$9 = _$createElement("box"),
-            _el$0 = _$createElement("box");
-          _$insertNode(_el$9, _el$0);
-          _$setProp(_el$9, "flexDirection", "row");
-          _$setProp(_el$9, "justifyContent", "flex-end");
-          _$setProp(_el$9, "paddingRight", 2);
-          _$setProp(_el$9, "flexShrink", 0);
-          _$setProp(_el$0, "width", 36);
-          _$setProp(_el$0, "maxWidth", "100%");
-          _$setProp(_el$0, "flexDirection", "column");
-          _$insert(_el$0, _$createComponent(UsagePanel, {
+          var _el$91 = _$createElement("box"),
+            _el$92 = _$createElement("box");
+          _$insertNode(_el$91, _el$92);
+          _$setProp(_el$91, "flexDirection", "row");
+          _$setProp(_el$91, "justifyContent", "flex-end");
+          _$setProp(_el$91, "paddingRight", 2);
+          _$setProp(_el$91, "flexShrink", 0);
+          _$setProp(_el$92, "width", 36);
+          _$setProp(_el$92, "maxWidth", "100%");
+          _$setProp(_el$92, "flexDirection", "column");
+          _$insert(_el$92, _$createComponent(UsagePanel, {
             context: context,
             get sessionID() {
               return props.sessionID;
@@ -138,15 +709,51 @@ export default Plugin.define({
             performance: performance,
             register: register
           }));
-          return _el$9;
+          return _el$91;
         }
       })
     });
+    const removeCommand = context.ui.slot({
+      append: "app",
+      render: () => {
+        context.keymap.layer(() => ({
+          mode: "global",
+          commands: [{
+            id: "opencode-token-usage.show",
+            title: "Token usage",
+            group: "Session",
+            palette: true,
+            slash: {
+              name: "usage"
+            },
+            enabled: () => context.ui.router.current().type === "session",
+            run: () => {
+              const route = context.ui.router.current();
+              if (route.type !== "session") return;
+              context.ui.dialog.show(() => _$createComponent(UsageDialog, {
+                context: context,
+                get sessionID() {
+                  return route.sessionID;
+                },
+                performance: performance,
+                register: register
+              }));
+              context.ui.dialog.set({
+                size: "large",
+                centered: true
+              });
+            }
+          }]
+        }));
+        return null;
+      }
+    });
     return () => {
       for (const controller of controllers) controller.dispose();
       controllers.clear();
       remove();
       removeChild();
+      removeCommand();
       performance.dispose();
     };
   }