@chenlongapps/opencode-token-usage 0.3.4 → 0.4.1

package/dist/tui.js

@@ -1,50 +1,49 @@
+import { memo as _$memo } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { effect as _$effect } 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";
 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";
-function UsagePanel(props) {
-  const [state, setState] = createSignal({
-    status: "loading"
-  });
-  const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
-    details
-  }) => listener(details)), setState, 80, 3_000, 100, props.performance);
-  const unregister = props.register(controller);
-  createEffect(() => controller.select(props.sessionID));
-  onCleanup(() => {
-    controller.dispose();
-    unregister();
-  });
-  const rows = createMemo(() => usageRows(state().summary, state().context, state().performance));
+import { bar, countLabel, formatCompact, formatEstimatedCost, formatTokens, requestRows, summaryRows, usageRows } from "./usage.js";
+function UsageView(props) {
+  const rows = createMemo(() => usageRows(props.state().summary, props.state().context, props.state().performance));
   const performanceStart = createMemo(() => rows().findIndex(([label]) => label === "TPS" || label === "TTFT"));
   const status = () => ({
     loading: "Loading…",
     ready: "",
     stale: "Not updated · retrying…",
     unavailable: "Unavailable · retrying…"
-  })[state().status];
+  })[props.state().status];
   return (() => {
-    var _el$ = _$createElement("box"),
-      _el$2 = _$createElement("text"),
-      _el$3 = _$createElement("b");
-    _$insertNode(_el$, _el$2);
+    var _el$ = _$createElement("box");
     _$setProp(_el$, "flexDirection", "column");
-    _$setProp(_el$, "marginTop", 1);
     _$setProp(_el$, "flexShrink", 0);
-    _$insertNode(_el$2, _el$3);
-    _$insertNode(_el$3, _$createTextNode(`Token Usage`));
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return state().status !== "ready";
+        return !props.hideTitle;
+      },
+      get children() {
+        var _el$2 = _$createElement("text"),
+          _el$3 = _$createElement("b");
+        _$insertNode(_el$2, _el$3);
+        _$insertNode(_el$3, _$createTextNode(`Token Usage`));
+        _$effect(_$p => _$setProp(_el$2, "fg", props.context.theme.text.base, _$p));
+        return _el$2;
+      }
+    }), null);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.state().status !== "ready";
       },
       get children() {
         var _el$5 = _$createElement("text");
@@ -83,10 +82,750 @@ function UsagePanel(props) {
         return _el$6;
       })()
     }), null);
-    _$effect(_$p => _$setProp(_el$2, "fg", props.context.theme.text.base, _$p));
+    _$effect(_$p => _$setProp(_el$, "marginTop", props.hideTitle ? 0 : 1, _$p));
     return _el$;
   })();
 }
+function UsagePanel(props) {
+  const [state, setState] = createSignal({
+    status: "loading"
+  });
+  const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
+    details
+  }) => listener(details)), setState, 80, 3_000, 100, props.performance);
+  const unregister = props.register(controller);
+  createEffect(() => controller.select(props.sessionID));
+  onCleanup(() => {
+    controller.dispose();
+    unregister();
+  });
+  return _$createComponent(UsageView, {
+    get context() {
+      return props.context;
+    },
+    state: state
+  });
+}
+function ChildUsageDialog(props) {
+  const dimensions = useTerminalDimensions();
+  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)
+    }]
+  }));
+  return (() => {
+    var _el$9 = _$createElement("box"),
+      _el$0 = _$createElement("box"),
+      _el$1 = _$createElement("text"),
+      _el$10 = _$createElement("b"),
+      _el$12 = _$createElement("text"),
+      _el$14 = _$createElement("scrollbox"),
+      _el$15 = _$createElement("text");
+    _$insertNode(_el$9, _el$0);
+    _$insertNode(_el$9, _el$14);
+    _$insertNode(_el$9, _el$15);
+    _$setProp(_el$9, "paddingLeft", 2);
+    _$setProp(_el$9, "paddingRight", 2);
+    _$setProp(_el$9, "paddingBottom", 1);
+    _$setProp(_el$9, "gap", 1);
+    _$insertNode(_el$0, _el$1);
+    _$insertNode(_el$0, _el$12);
+    _$setProp(_el$0, "flexDirection", "row");
+    _$setProp(_el$0, "justifyContent", "space-between");
+    _$insertNode(_el$1, _el$10);
+    _$insertNode(_el$10, _$createTextNode(`Token Usage`));
+    _$insertNode(_el$12, _$createTextNode(`esc`));
+    _$setProp(_el$12, "onMouseUp", () => props.context.ui.dialog.clear());
+    _$use(value => {
+      scroll = value;
+    }, _el$14);
+    _$setProp(_el$14, "contentOptions", {
+      minHeight: 0
+    });
+    _$setProp(_el$14, "scrollbarOptions", {
+      visible: false
+    });
+    _$insert(_el$14, _$createComponent(UsageView, {
+      get context() {
+        return props.context;
+      },
+      get state() {
+        return props.state;
+      },
+      hideTitle: true
+    }));
+    _$insertNode(_el$15, _$createTextNode(`↑/↓ scroll · esc close`));
+    _$effect(_p$ => {
+      var _v$4 = props.context.theme.text.base,
+        _v$5 = props.context.theme.text.muted,
+        _v$6 = Math.max(3, dimensions().height - 8),
+        _v$7 = props.context.theme.text.muted;
+      _v$4 !== _p$.e && (_p$.e = _$setProp(_el$1, "fg", _v$4, _p$.e));
+      _v$5 !== _p$.t && (_p$.t = _$setProp(_el$12, "fg", _v$5, _p$.t));
+      _v$6 !== _p$.a && (_p$.a = _$setProp(_el$14, "maxHeight", _v$6, _p$.a));
+      _v$7 !== _p$.o && (_p$.o = _$setProp(_el$15, "fg", _v$7, _p$.o));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$9;
+  })();
+}
+function ChildUsageLauncher(props) {
+  const [state, setState] = createSignal({
+    status: "loading"
+  });
+  const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
+    details
+  }) => listener(details)), setState, 80, 3_000, 100, props.performance);
+  const unregister = props.register(controller);
+  createEffect(() => controller.select(props.sessionID));
+  onCleanup(() => {
+    controller.dispose();
+    unregister();
+  });
+  const summary = createMemo(() => {
+    const current = state();
+    if (!current.summary) return `Token Usage · ${{
+      loading: "Loading…",
+      ready: "Loading…",
+      stale: "Unavailable",
+      unavailable: "Unavailable · retrying…"
+    }[current.status]}`;
+    const context = current.context ? `${formatTokens(current.context.used)} / ${formatTokens(current.context.limit)} (${current.context.percent.toFixed(1)}%)` : "—";
+    const cost = formatEstimatedCost(current.summary.cost, current.summary.costStatus) ?? "—";
+    const tps = current.performance?.tps !== undefined && Number.isFinite(current.performance.tps) ? `${current.performance.tpsEstimated ? "~" : ""}${Math.max(0, current.performance.tps).toFixed(1)} tok/s` : "—";
+    const stale = current.status === "stale" ? " · Not updated" : "";
+    return `Token Usage · Context ${context} · Total ${formatTokens(current.summary.total)} · Cost ${cost} · TPS ${tps}${stale}`;
+  });
+  return (() => {
+    var _el$17 = _$createElement("box"),
+      _el$18 = _$createElement("text");
+    _$insertNode(_el$17, _el$18);
+    _$setProp(_el$17, "flexDirection", "row");
+    _$setProp(_el$17, "justifyContent", "flex-end");
+    _$setProp(_el$17, "paddingRight", 2);
+    _$setProp(_el$17, "flexShrink", 0);
+    _$setProp(_el$18, "wrapMode", "none");
+    _$setProp(_el$18, "onMouseUp", event => {
+      if (event.button === 0) props.open(props.sessionID, state);
+    });
+    _$insert(_el$18, summary);
+    _$effect(_$p => _$setProp(_el$18, "fg", props.context.theme.text.muted, _$p));
+    return _el$17;
+  })();
+}
+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;
+  const toggleDetails = () => {
+    setDetailed(value => !value);
+  };
+  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: toggleDetails
+    }]
+  }));
+  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$19 = _$createElement("box"),
+        _el$20 = _$createElement("text"),
+        _el$21 = _$createElement("text");
+      _$insertNode(_el$19, _el$20);
+      _$insertNode(_el$19, _el$21);
+      _$setProp(_el$19, "flexDirection", "row");
+      _$setProp(_el$19, "justifyContent", "space-between");
+      _$setProp(_el$19, "gap", 2);
+      _$setProp(_el$20, "flexShrink", 0);
+      _$insert(_el$20, label);
+      _$insert(_el$21, value);
+      _$effect(_p$ => {
+        var _v$8 = theme().muted,
+          _v$9 = theme().base;
+        _v$8 !== _p$.e && (_p$.e = _$setProp(_el$20, "fg", _v$8, _p$.e));
+        _v$9 !== _p$.t && (_p$.t = _$setProp(_el$21, "fg", _v$9, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$19;
+    })();
+    return pairColumns() ? (() => {
+      var _el$22 = _$createElement("box");
+      _$setProp(_el$22, "flexDirection", "row");
+      _$setProp(_el$22, "gap", 2);
+      _$insert(_el$22, () => columns.map(column => (() => {
+        var _el$23 = _$createElement("box");
+        _$setProp(_el$23, "flexDirection", "column");
+        _$setProp(_el$23, "flexGrow", 1);
+        _$setProp(_el$23, "minWidth", 0);
+        _$insert(_el$23, () => column.map(cell));
+        return _el$23;
+      })()));
+      return _el$22;
+    })() : (() => {
+      var _el$24 = _$createElement("box");
+      _$setProp(_el$24, "flexDirection", "column");
+      _$insert(_el$24, () => rows.map(cell));
+      return _el$24;
+    })();
+  };
+  const barRow = (percent, size) => {
+    const cells = bar(percent, size);
+    return (() => {
+      var _el$25 = _$createElement("box"),
+        _el$26 = _$createElement("text"),
+        _el$27 = _$createElement("text");
+      _$insertNode(_el$25, _el$26);
+      _$insertNode(_el$25, _el$27);
+      _$setProp(_el$25, "flexDirection", "row");
+      _$setProp(_el$26, "wrapMode", "none");
+      _$insert(_el$26, () => "█".repeat(cells.filled));
+      _$setProp(_el$27, "wrapMode", "none");
+      _$insert(_el$27, () => "░".repeat(cells.empty));
+      _$effect(_p$ => {
+        var _v$0 = theme().base,
+          _v$1 = theme().muted;
+        _v$0 !== _p$.e && (_p$.e = _$setProp(_el$26, "fg", _v$0, _p$.e));
+        _v$1 !== _p$.t && (_p$.t = _$setProp(_el$27, "fg", _v$1, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$25;
+    })();
+  };
+  return (() => {
+    var _el$28 = _$createElement("box"),
+      _el$29 = _$createElement("box"),
+      _el$30 = _$createElement("text"),
+      _el$31 = _$createElement("b"),
+      _el$33 = _$createElement("text"),
+      _el$60 = _$createElement("box"),
+      _el$61 = _$createElement("text"),
+      _el$63 = _$createElement("text"),
+      _el$65 = _$createElement("text");
+    _$insertNode(_el$28, _el$29);
+    _$insertNode(_el$28, _el$60);
+    _$setProp(_el$28, "paddingLeft", 2);
+    _$setProp(_el$28, "paddingRight", 2);
+    _$setProp(_el$28, "paddingBottom", 1);
+    _$setProp(_el$28, "gap", 1);
+    _$insertNode(_el$29, _el$30);
+    _$insertNode(_el$29, _el$33);
+    _$setProp(_el$29, "flexDirection", "row");
+    _$setProp(_el$29, "justifyContent", "space-between");
+    _$setProp(_el$29, "gap", 2);
+    _$insertNode(_el$30, _el$31);
+    _$insertNode(_el$31, _$createTextNode(`Token Usage`));
+    _$insertNode(_el$33, _$createTextNode(`esc`));
+    _$setProp(_el$33, "onMouseUp", () => props.context.ui.dialog.clear());
+    _$insert(_el$28, _$createComponent(Show, {
+      get when() {
+        return identity();
+      },
+      get children() {
+        var _el$35 = _$createElement("text");
+        _$setProp(_el$35, "wrapMode", "word");
+        _$insert(_el$35, identity);
+        _$effect(_$p => _$setProp(_el$35, "fg", theme().muted, _$p));
+        return _el$35;
+      }
+    }), _el$60);
+    _$insert(_el$28, _$createComponent(Show, {
+      get when() {
+        return state().status !== "ready";
+      },
+      get children() {
+        var _el$36 = _$createElement("text");
+        _$insert(_el$36, status);
+        _$effect(_$p => _$setProp(_el$36, "fg", theme().muted, _$p));
+        return _el$36;
+      }
+    }), _el$60);
+    _$insert(_el$28, _$createComponent(Show, {
+      get when() {
+        return state().summary;
+      },
+      get children() {
+        var _el$37 = _$createElement("scrollbox"),
+          _el$38 = _$createElement("box"),
+          _el$39 = _$createElement("box"),
+          _el$40 = _$createElement("text"),
+          _el$41 = _$createElement("b"),
+          _el$43 = _$createElement("box"),
+          _el$44 = _$createElement("box"),
+          _el$45 = _$createElement("text"),
+          _el$46 = _$createElement("b"),
+          _el$48 = _$createElement("box"),
+          _el$49 = _$createElement("text"),
+          _el$50 = _$createElement("b"),
+          _el$52 = _$createElement("box"),
+          _el$53 = _$createElement("text"),
+          _el$54 = _$createElement("b"),
+          _el$56 = _$createElement("box"),
+          _el$57 = _$createElement("text"),
+          _el$58 = _$createElement("b");
+        _$insertNode(_el$37, _el$38);
+        _$use(value => {
+          scroll = value;
+        }, _el$37);
+        _$setProp(_el$37, "contentOptions", {
+          minHeight: 0
+        });
+        _$setProp(_el$37, "scrollbarOptions", {
+          visible: false
+        });
+        _$insertNode(_el$38, _el$39);
+        _$insertNode(_el$38, _el$43);
+        _$insertNode(_el$38, _el$48);
+        _$insertNode(_el$38, _el$52);
+        _$insertNode(_el$38, _el$56);
+        _$setProp(_el$38, "gap", 1);
+        _$insertNode(_el$39, _el$40);
+        _$insertNode(_el$40, _el$41);
+        _$insertNode(_el$41, _$createTextNode(`Context Window`));
+        _$insert(_el$39, _$createComponent(Show, {
+          get when() {
+            return context();
+          },
+          get fallback() {
+            return (() => {
+              var _el$67 = _$createElement("text");
+              _$insertNode(_el$67, _$createTextNode(`Context usage unavailable`));
+              _$effect(_$p => _$setProp(_el$67, "fg", theme().muted, _$p));
+              return _el$67;
+            })();
+          },
+          children: details => (() => {
+            var _el$69 = _$createElement("box"),
+              _el$70 = _$createElement("box"),
+              _el$71 = _$createElement("text"),
+              _el$73 = _$createElement("text"),
+              _el$74 = _$createTextNode(` / `),
+              _el$75 = _$createTextNode(` (`),
+              _el$76 = _$createTextNode(`%)`);
+            _$insertNode(_el$69, _el$70);
+            _$insertNode(_el$70, _el$71);
+            _$insertNode(_el$70, _el$73);
+            _$setProp(_el$70, "flexDirection", "row");
+            _$setProp(_el$70, "justifyContent", "space-between");
+            _$setProp(_el$70, "gap", 2);
+            _$insertNode(_el$71, _$createTextNode(`Used / Limit`));
+            _$setProp(_el$71, "flexShrink", 0);
+            _$insertNode(_el$73, _el$74);
+            _$insertNode(_el$73, _el$75);
+            _$insertNode(_el$73, _el$76);
+            _$setProp(_el$73, "wrapMode", "word");
+            _$setProp(_el$73, "minWidth", 0);
+            _$insert(_el$73, () => number(details().usage.used), _el$74);
+            _$insert(_el$73, () => number(details().usage.limit), _el$75);
+            _$insert(_el$73, () => details().usage.percent.toFixed(1), _el$76);
+            _$insert(_el$69, () => barRow(details().usage.percent, windowBar()), null);
+            _$effect(_p$ => {
+              var _v$21 = theme().muted,
+                _v$22 = theme().base;
+              _v$21 !== _p$.e && (_p$.e = _$setProp(_el$71, "fg", _v$21, _p$.e));
+              _v$22 !== _p$.t && (_p$.t = _$setProp(_el$73, "fg", _v$22, _p$.t));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$69;
+          })()
+        }), null);
+        _$insertNode(_el$43, _el$44);
+        _$insertNode(_el$44, _el$45);
+        _$setProp(_el$44, "flexDirection", "row");
+        _$setProp(_el$44, "justifyContent", "space-between");
+        _$setProp(_el$44, "gap", 2);
+        _$insertNode(_el$45, _el$46);
+        _$insertNode(_el$46, _$createTextNode(`Last Request`));
+        _$insert(_el$44, _$createComponent(Show, {
+          get when() {
+            return sources();
+          },
+          children: captured => (() => {
+            var _el$77 = _$createElement("text");
+            _$insert(_el$77, () => new Date(captured().capturedAt).toLocaleTimeString());
+            _$effect(_$p => _$setProp(_el$77, "fg", theme().muted, _$p));
+            return _el$77;
+          })()
+        }), null);
+        _$insert(_el$43, _$createComponent(Show, {
+          get when() {
+            return context();
+          },
+          get fallback() {
+            return (() => {
+              var _el$78 = _$createElement("text");
+              _$insertNode(_el$78, _$createTextNode(`Request composition unavailable`));
+              _$effect(_$p => _$setProp(_el$78, "fg", theme().muted, _$p));
+              return _el$78;
+            })();
+          },
+          children: details => (() => {
+            var _el$80 = _$createElement("box");
+            _$insert(_el$80, () => requestRowsList(requestRows(details(), compact())));
+            return _el$80;
+          })()
+        }), null);
+        _$insertNode(_el$48, _el$49);
+        _$insertNode(_el$49, _el$50);
+        _$insertNode(_el$50, _$createTextNode(`Context Breakdown`));
+        _$insert(_el$48, _$createComponent(Show, {
+          get when() {
+            return sources();
+          },
+          get fallback() {
+            return (() => {
+              var _el$81 = _$createElement("text");
+              _$insertNode(_el$81, _$createTextNode(`Source estimates unavailable (no request snapshot or RPC)`));
+              _$effect(_$p => _$setProp(_el$81, "fg", theme().muted, _$p));
+              return _el$81;
+            })();
+          },
+          children: captured => _$createComponent(For, {
+            get each() {
+              return breakdownRows(captured(), detailed());
+            },
+            children: row => (() => {
+              var _el$83 = _$createElement("box"),
+                _el$84 = _$createElement("box"),
+                _el$85 = _$createElement("text"),
+                _el$86 = _$createElement("box"),
+                _el$87 = _$createElement("text"),
+                _el$88 = _$createElement("text"),
+                _el$89 = _$createTextNode(`%`);
+              _$insertNode(_el$83, _el$84);
+              _$insertNode(_el$83, _el$86);
+              _$insertNode(_el$83, _el$87);
+              _$insertNode(_el$83, _el$88);
+              _$setProp(_el$83, "flexDirection", "row");
+              _$setProp(_el$83, "gap", 1);
+              _$insertNode(_el$84, _el$85);
+              _$setProp(_el$84, "width", 14);
+              _$setProp(_el$84, "flexShrink", 0);
+              _$insert(_el$85, () => row.label);
+              _$setProp(_el$86, "flexShrink", 0);
+              _$insert(_el$86, () => barRow(row.percent, breakdownBar()));
+              _$setProp(_el$87, "flexShrink", 0);
+              _$insert(_el$87, () => number(row.tokens));
+              _$insertNode(_el$88, _el$89);
+              _$setProp(_el$88, "flexShrink", 0);
+              _$insert(_el$88, () => row.percent.toFixed(1), _el$89);
+              _$effect(_p$ => {
+                var _v$23 = theme().muted,
+                  _v$24 = breakdownBar(),
+                  _v$25 = theme().base,
+                  _v$26 = theme().muted;
+                _v$23 !== _p$.e && (_p$.e = _$setProp(_el$85, "fg", _v$23, _p$.e));
+                _v$24 !== _p$.t && (_p$.t = _$setProp(_el$86, "width", _v$24, _p$.t));
+                _v$25 !== _p$.a && (_p$.a = _$setProp(_el$87, "fg", _v$25, _p$.a));
+                _v$26 !== _p$.o && (_p$.o = _$setProp(_el$88, "fg", _v$26, _p$.o));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined
+              });
+              return _el$83;
+            })()
+          })
+        }), null);
+        _$insertNode(_el$52, _el$53);
+        _$insertNode(_el$53, _el$54);
+        _$insertNode(_el$54, _$createTextNode(`Session`));
+        _$insert(_el$52, _$createComponent(Show, {
+          get when() {
+            return state().summary;
+          },
+          get fallback() {
+            return (() => {
+              var _el$90 = _$createElement("text");
+              _$insertNode(_el$90, _$createTextNode(`Session usage unavailable`));
+              _$effect(_$p => _$setProp(_el$90, "fg", theme().muted, _$p));
+              return _el$90;
+            })();
+          },
+          children: summary => _$createComponent(Show, {
+            get when() {
+              return detailed();
+            },
+            get fallback() {
+              return (() => {
+                var _el$92 = _$createElement("text"),
+                  _el$93 = _$createTextNode(` · `),
+                  _el$94 = _$createTextNode(` · `),
+                  _el$95 = _$createTextNode(` tokens · `),
+                  _el$96 = _$createTextNode(`% cached`);
+                _$insertNode(_el$92, _el$93);
+                _$insertNode(_el$92, _el$94);
+                _$insertNode(_el$92, _el$95);
+                _$insertNode(_el$92, _el$96);
+                _$setProp(_el$92, "wrapMode", "word");
+                _$insert(_el$92, () => countLabel(summary().steps, "step"), _el$93);
+                _$insert(_el$92, () => countLabel(summary().calls, "call"), _el$94);
+                _$insert(_el$92, () => formatCompact(summary().total), _el$95);
+                _$insert(_el$92, () => (summary().cacheRate * 100).toFixed(1), _el$96);
+                _$insert(_el$92, (() => {
+                  var _c$ = _$memo(() => !!formatEstimatedCost(summary().cost, summary().costStatus));
+                  return () => _c$() ? ` · ${formatEstimatedCost(summary().cost, summary().costStatus)}` : "";
+                })(), null);
+                _$effect(_$p => _$setProp(_el$92, "fg", theme().base, _$p));
+                return _el$92;
+              })();
+            },
+            get children() {
+              return _$createComponent(For, {
+                get each() {
+                  return summaryRows(summary());
+                },
+                children: ([label, value]) => (() => {
+                  var _el$97 = _$createElement("box"),
+                    _el$98 = _$createElement("text"),
+                    _el$99 = _$createElement("text");
+                  _$insertNode(_el$97, _el$98);
+                  _$insertNode(_el$97, _el$99);
+                  _$setProp(_el$97, "flexDirection", "row");
+                  _$setProp(_el$97, "justifyContent", "space-between");
+                  _$setProp(_el$97, "gap", 2);
+                  _$setProp(_el$98, "flexShrink", 0);
+                  _$insert(_el$98, label);
+                  _$insert(_el$99, value);
+                  _$effect(_p$ => {
+                    var _v$27 = theme().muted,
+                      _v$28 = theme().base;
+                    _v$27 !== _p$.e && (_p$.e = _$setProp(_el$98, "fg", _v$27, _p$.e));
+                    _v$28 !== _p$.t && (_p$.t = _$setProp(_el$99, "fg", _v$28, _p$.t));
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  return _el$97;
+                })()
+              });
+            }
+          })
+        }), null);
+        _$insertNode(_el$56, _el$57);
+        _$insertNode(_el$57, _el$58);
+        _$insertNode(_el$58, _$createTextNode(`By Model`));
+        _$insert(_el$56, _$createComponent(Show, {
+          get when() {
+            return models().length;
+          },
+          get fallback() {
+            return (() => {
+              var _el$100 = _$createElement("text");
+              _$insertNode(_el$100, _$createTextNode(`No model usage yet`));
+              _$effect(_$p => _$setProp(_el$100, "fg", theme().muted, _$p));
+              return _el$100;
+            })();
+          },
+          get children() {
+            return _$createComponent(For, {
+              get each() {
+                return models();
+              },
+              children: model => (() => {
+                var _el$102 = _$createElement("box"),
+                  _el$103 = _$createElement("box"),
+                  _el$104 = _$createElement("text"),
+                  _el$105 = _$createElement("text"),
+                  _el$106 = _$createElement("text"),
+                  _el$107 = _$createTextNode(` tokens · `);
+                _$insertNode(_el$102, _el$103);
+                _$insertNode(_el$102, _el$106);
+                _$insertNode(_el$103, _el$104);
+                _$insertNode(_el$103, _el$105);
+                _$setProp(_el$103, "flexDirection", "row");
+                _$setProp(_el$103, "justifyContent", "space-between");
+                _$setProp(_el$103, "gap", 2);
+                _$setProp(_el$104, "wrapMode", "word");
+                _$setProp(_el$104, "minWidth", 0);
+                _$setProp(_el$104, "flexGrow", 1);
+                _$insert(_el$104, () => model.model);
+                _$setProp(_el$105, "flexShrink", 0);
+                _$insert(_el$105, () => formatEstimatedCost(model.cost, model.costStatus) ?? "");
+                _$insertNode(_el$106, _el$107);
+                _$insert(_el$106, () => number(model.tokens), _el$107);
+                _$insert(_el$106, () => countLabel(model.calls, "call"), null);
+                _$effect(_p$ => {
+                  var _v$29 = theme().base,
+                    _v$30 = theme().base,
+                    _v$31 = theme().muted;
+                  _v$29 !== _p$.e && (_p$.e = _$setProp(_el$104, "fg", _v$29, _p$.e));
+                  _v$30 !== _p$.t && (_p$.t = _$setProp(_el$105, "fg", _v$30, _p$.t));
+                  _v$31 !== _p$.a && (_p$.a = _$setProp(_el$106, "fg", _v$31, _p$.a));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
+                return _el$102;
+              })()
+            });
+          }
+        }), null);
+        _$effect(_p$ => {
+          var _v$10 = Math.max(3, dimensions().height - Math.floor(dimensions().height / 4) - 8),
+            _v$11 = theme().base,
+            _v$12 = theme().base,
+            _v$13 = theme().base,
+            _v$14 = theme().base,
+            _v$15 = theme().base;
+          _v$10 !== _p$.e && (_p$.e = _$setProp(_el$37, "maxHeight", _v$10, _p$.e));
+          _v$11 !== _p$.t && (_p$.t = _$setProp(_el$40, "fg", _v$11, _p$.t));
+          _v$12 !== _p$.a && (_p$.a = _$setProp(_el$45, "fg", _v$12, _p$.a));
+          _v$13 !== _p$.o && (_p$.o = _$setProp(_el$49, "fg", _v$13, _p$.o));
+          _v$14 !== _p$.i && (_p$.i = _$setProp(_el$53, "fg", _v$14, _p$.i));
+          _v$15 !== _p$.n && (_p$.n = _$setProp(_el$57, "fg", _v$15, _p$.n));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined
+        });
+        return _el$37;
+      }
+    }), _el$60);
+    _$insertNode(_el$60, _el$61);
+    _$insertNode(_el$60, _el$63);
+    _$insertNode(_el$60, _el$65);
+    _$setProp(_el$60, "flexDirection", "row");
+    _$insertNode(_el$61, _$createTextNode(`↑/↓ scroll · `));
+    _$insertNode(_el$63, _$createTextNode(`d details`));
+    _$setProp(_el$63, "onMouseUp", event => {
+      if (event.button === 0) toggleDetails();
+    });
+    _$insertNode(_el$65, _$createTextNode(` · esc close`));
+    _$effect(_p$ => {
+      var _v$16 = theme().base,
+        _v$17 = theme().muted,
+        _v$18 = theme().muted,
+        _v$19 = theme().muted,
+        _v$20 = theme().muted;
+      _v$16 !== _p$.e && (_p$.e = _$setProp(_el$30, "fg", _v$16, _p$.e));
+      _v$17 !== _p$.t && (_p$.t = _$setProp(_el$33, "fg", _v$17, _p$.t));
+      _v$18 !== _p$.a && (_p$.a = _$setProp(_el$61, "fg", _v$18, _p$.a));
+      _v$19 !== _p$.o && (_p$.o = _$setProp(_el$63, "fg", _v$19, _p$.o));
+      _v$20 !== _p$.i && (_p$.i = _$setProp(_el$65, "fg", _v$20, _p$.i));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$28;
+  })();
+}
 export default Plugin.define({
   id: "opencode-token-usage.tui",
   setup(context) {
@@ -111,8 +850,17 @@ export default Plugin.define({
         register: register
       })
     });
-    // 2.0.9 SessionFrame never mounts the sidebar for a child session.
-    // Keep the same full panel visible through the supported composer slot.
+    const openChildUsage = (sessionID, state) => {
+      context.ui.dialog.show(() => _$createComponent(ChildUsageDialog, {
+        context: context,
+        state: state
+      }));
+      context.ui.dialog.set({
+        size: "medium",
+        centered: true
+      });
+    };
+    // Child sessions do not mount the sidebar; keep one live summary above the composer.
     const removeChild = context.ui.slot({
       append: "session.composer.top",
       render: props => _$createComponent(Show, {
@@ -120,33 +868,59 @@ 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, {
+          return _$createComponent(ChildUsageLauncher, {
             context: context,
             get sessionID() {
               return props.sessionID;
             },
             performance: performance,
-            register: register
-          }));
-          return _el$9;
+            register: register,
+            open: openChildUsage
+          });
         }
       })
     });
+    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();
     };
   }