@chenlongapps/opencode-token-usage 0.4.8 → 0.4.9

package/dist/tui.js

@@ -1,10 +1,12 @@
 import { memo as _$memo } from "@opentui/solid";
 import { use as _$use } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
 import { insert as _$insert } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
-import { effect as _$effect } from "@opentui/solid";
 import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
+import { spread as _$spread } from "@opentui/solid";
+import { mergeProps as _$mergeProps } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 import { Plugin } from "@opencode/plugin/tui";
@@ -12,10 +14,14 @@ 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 { RuntimeMonitor } from "./runtime-monitor.js";
+import { ContextSourceRpc } from "./context-rpc.js";
 import { breakdownRows } from "./context-sources.js";
+import { createClickHandlers } from "./click.js";
 import { createSource } from "./source.js";
 import { bar, countLabel, fitUsageSummary, formatCompact, formatEstimatedCost, formatRateTier, formatRunTime, formatTokens, rateRows, requestRows, summaryRows, usageRows } from "./usage.js";
 function UsageView(props) {
+  const titleClick = createClickHandlers(() => props.openDetails?.(), () => !!props.context.renderer.getSelection()?.getSelectedText());
   const rows = createMemo(() => usageRows(props.state().summary, props.state().context, props.state().performance, props.state().runtime));
   const performanceStart = createMemo(() => rows().findIndex(([label]) => label === "Run Time" || label === "TPS" || label === "TTFT"));
   const status = () => ({
@@ -36,8 +42,12 @@ function UsageView(props) {
         var _el$2 = _$createElement("text"),
           _el$3 = _$createElement("b");
         _$insertNode(_el$2, _el$3);
+        _$spread(_el$2, _$mergeProps({
+          get fg() {
+            return props.context.theme.text.base;
+          }
+        }, titleClick), true);
         _$insertNode(_el$3, _$createTextNode(`Token Usage`));
-        _$effect(_$p => _$setProp(_el$2, "fg", props.context.theme.text.base, _$p));
         return _el$2;
       }
     }), null);
@@ -92,9 +102,12 @@ function UsagePanel(props) {
   });
   const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
     details
-  }) => listener(details)), setState, 80, 3_000, 100, props.performance);
+  }) => listener(details)), setState, 80, 3_000, 100, props.performance, false, props.runtime);
   const unregister = props.register(controller);
-  createEffect(() => controller.select(props.sessionID));
+  createEffect(() => {
+    controller.select(props.sessionID);
+    controller.setRunning(props.context.data.session.status(props.sessionID) === "running");
+  });
   onCleanup(() => {
     controller.dispose();
     unregister();
@@ -103,7 +116,8 @@ function UsagePanel(props) {
     get context() {
       return props.context;
     },
-    state: state
+    state: state,
+    openDetails: () => props.open(props.sessionID)
   });
 }
 function ChildUsageDialog(props) {
@@ -200,14 +214,18 @@ function ChildUsageLauncher(props) {
   });
   const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
     details
-  }) => listener(details)), setState, 80, 3_000, 100, props.performance);
+  }) => listener(details)), setState, 80, 3_000, 100, props.performance, false, props.runtime);
   const unregister = props.register(controller);
-  createEffect(() => controller.select(props.sessionID));
+  createEffect(() => {
+    controller.select(props.sessionID);
+    controller.setRunning(props.context.data.session.status(props.sessionID) === "running");
+  });
   onCleanup(() => {
     controller.dispose();
     unregister();
   });
   const dimensions = useTerminalDimensions();
+  const runtime = createMemo(() => formatRunTime(state().runtime, true));
   const summary = createMemo(() => {
     const current = state();
     if (!current.summary) return `Token Usage · ${{
@@ -219,7 +237,7 @@ function ChildUsageLauncher(props) {
     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` : "—";
-    return fitUsageSummary([["Context", context], ["Total", formatTokens(current.summary.total)], ["Cost", cost], ["Time", formatRunTime(current.runtime, true)], ["TPS", tps]], Math.max(20, dimensions().width - 8), current.status === "stale");
+    return fitUsageSummary([["Context", context], ["Total", formatTokens(current.summary.total)], ["Cost", cost], ["Time", runtime()], ["TPS", tps]], Math.max(20, dimensions().width - 8), current.status === "stale");
   });
   return (() => {
     var _el$17 = _$createElement("box"),
@@ -231,7 +249,7 @@ function ChildUsageLauncher(props) {
     _$setProp(_el$17, "flexShrink", 0);
     _$setProp(_el$18, "wrapMode", "none");
     _$setProp(_el$18, "onMouseUp", event => {
-      if (event.button === 0) props.open(props.sessionID, state);
+      if (event.button === 0) props.open(state);
     });
     _$insert(_el$18, summary);
     _$effect(_$p => _$setProp(_el$18, "fg", props.context.theme.text.muted, _$p));
@@ -246,9 +264,10 @@ function UsageDialog(props) {
   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);
+  }) => listener(details)), setState, 80, 3_000, 100, props.performance, true, props.runtime);
   const unregister = props.register(controller);
   controller.select(props.sessionID);
+  createEffect(() => controller.setRunning(props.context.data.session.status(props.sessionID) === "running"));
   onCleanup(() => {
     controller.dispose();
     unregister();
@@ -298,6 +317,7 @@ function UsageDialog(props) {
   }));
   const theme = () => props.context.theme.text;
   const context = createMemo(() => state().context);
+  const runtime = createMemo(() => formatRunTime(state().runtime));
   const request = createMemo(() => state().details?.request);
   const requestTime = createMemo(() => {
     const time = request()?.time;
@@ -405,12 +425,12 @@ function UsageDialog(props) {
       _el$30 = _$createElement("text"),
       _el$31 = _$createElement("b"),
       _el$33 = _$createElement("text"),
-      _el$67 = _$createElement("box"),
-      _el$68 = _$createElement("text"),
-      _el$70 = _$createElement("text"),
-      _el$72 = _$createElement("text");
+      _el$63 = _$createElement("box"),
+      _el$64 = _$createElement("text"),
+      _el$66 = _$createElement("text"),
+      _el$68 = _$createElement("text");
     _$insertNode(_el$28, _el$29);
-    _$insertNode(_el$28, _el$67);
+    _$insertNode(_el$28, _el$63);
     _$setProp(_el$28, "paddingLeft", 2);
     _$setProp(_el$28, "paddingRight", 2);
     _$setProp(_el$28, "paddingBottom", 1);
@@ -435,7 +455,7 @@ function UsageDialog(props) {
         _$effect(_$p => _$setProp(_el$35, "fg", theme().muted, _$p));
         return _el$35;
       }
-    }), _el$67);
+    }), _el$63);
     _$insert(_el$28, _$createComponent(Show, {
       get when() {
         return state().status !== "ready";
@@ -446,7 +466,7 @@ function UsageDialog(props) {
         _$effect(_$p => _$setProp(_el$36, "fg", theme().muted, _$p));
         return _el$36;
       }
-    }), _el$67);
+    }), _el$63);
     _$insert(_el$28, _$createComponent(Show, {
       get when() {
         return state().summary;
@@ -470,10 +490,7 @@ function UsageDialog(props) {
           _el$55 = _$createElement("b"),
           _el$57 = _$createElement("box"),
           _el$58 = _$createElement("text"),
-          _el$60 = _$createElement("text"),
-          _el$61 = _$createElement("box"),
-          _el$62 = _$createElement("text"),
-          _el$63 = _$createElement("b");
+          _el$59 = _$createElement("b");
         _$insertNode(_el$37, _el$38);
         _$use(value => {
           scroll = value;
@@ -488,7 +505,7 @@ function UsageDialog(props) {
         _$insertNode(_el$38, _el$43);
         _$insertNode(_el$38, _el$48);
         _$insertNode(_el$38, _el$53);
-        _$insertNode(_el$38, _el$61);
+        _$insertNode(_el$38, _el$57);
         _$setProp(_el$38, "gap", 1);
         _$insertNode(_el$39, _el$40);
         _$insertNode(_el$40, _el$41);
@@ -499,48 +516,48 @@ function UsageDialog(props) {
           },
           get fallback() {
             return (() => {
-              var _el$74 = _$createElement("text");
-              _$insertNode(_el$74, _$createTextNode(`Context usage unavailable`));
-              _$effect(_$p => _$setProp(_el$74, "fg", theme().muted, _$p));
-              return _el$74;
+              var _el$70 = _$createElement("text");
+              _$insertNode(_el$70, _$createTextNode(`Context usage unavailable`));
+              _$effect(_$p => _$setProp(_el$70, "fg", theme().muted, _$p));
+              return _el$70;
             })();
           },
           children: details => (() => {
-            var _el$76 = _$createElement("box"),
-              _el$77 = _$createElement("box"),
-              _el$78 = _$createElement("text"),
-              _el$80 = _$createElement("text"),
-              _el$81 = _$createTextNode(` / `),
-              _el$82 = _$createTextNode(` (`),
-              _el$83 = _$createTextNode(`%)`);
+            var _el$72 = _$createElement("box"),
+              _el$73 = _$createElement("box"),
+              _el$74 = _$createElement("text"),
+              _el$76 = _$createElement("text"),
+              _el$77 = _$createTextNode(` / `),
+              _el$78 = _$createTextNode(` (`),
+              _el$79 = _$createTextNode(`%)`);
+            _$insertNode(_el$72, _el$73);
+            _$insertNode(_el$73, _el$74);
+            _$insertNode(_el$73, _el$76);
+            _$setProp(_el$73, "flexDirection", "row");
+            _$setProp(_el$73, "justifyContent", "space-between");
+            _$setProp(_el$73, "gap", 2);
+            _$insertNode(_el$74, _$createTextNode(`Used / Limit`));
+            _$setProp(_el$74, "flexShrink", 0);
             _$insertNode(_el$76, _el$77);
-            _$insertNode(_el$77, _el$78);
-            _$insertNode(_el$77, _el$80);
-            _$setProp(_el$77, "flexDirection", "row");
-            _$setProp(_el$77, "justifyContent", "space-between");
-            _$setProp(_el$77, "gap", 2);
-            _$insertNode(_el$78, _$createTextNode(`Used / Limit`));
-            _$setProp(_el$78, "flexShrink", 0);
-            _$insertNode(_el$80, _el$81);
-            _$insertNode(_el$80, _el$82);
-            _$insertNode(_el$80, _el$83);
-            _$setProp(_el$80, "wrapMode", "word");
-            _$setProp(_el$80, "minWidth", 0);
-            _$insert(_el$80, () => number(details().used), _el$81);
-            _$insert(_el$80, () => number(details().limit), _el$82);
-            _$insert(_el$80, () => details().percent.toFixed(1), _el$83);
-            _$insert(_el$76, () => barRow(details().percent, windowBar()), null);
+            _$insertNode(_el$76, _el$78);
+            _$insertNode(_el$76, _el$79);
+            _$setProp(_el$76, "wrapMode", "word");
+            _$setProp(_el$76, "minWidth", 0);
+            _$insert(_el$76, () => number(details().used), _el$77);
+            _$insert(_el$76, () => number(details().limit), _el$78);
+            _$insert(_el$76, () => details().percent.toFixed(1), _el$79);
+            _$insert(_el$72, () => barRow(details().percent, windowBar()), null);
             _$effect(_p$ => {
-              var _v$23 = theme().muted,
-                _v$24 = theme().base;
-              _v$23 !== _p$.e && (_p$.e = _$setProp(_el$78, "fg", _v$23, _p$.e));
-              _v$24 !== _p$.t && (_p$.t = _$setProp(_el$80, "fg", _v$24, _p$.t));
+              var _v$21 = theme().muted,
+                _v$22 = theme().base;
+              _v$21 !== _p$.e && (_p$.e = _$setProp(_el$74, "fg", _v$21, _p$.e));
+              _v$22 !== _p$.t && (_p$.t = _$setProp(_el$76, "fg", _v$22, _p$.t));
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$76;
+            return _el$72;
           })()
         }), null);
         _$insertNode(_el$43, _el$44);
@@ -555,10 +572,10 @@ function UsageDialog(props) {
             return requestTime();
           },
           children: time => (() => {
-            var _el$84 = _$createElement("text");
-            _$insert(_el$84, time);
-            _$effect(_$p => _$setProp(_el$84, "fg", theme().muted, _$p));
-            return _el$84;
+            var _el$80 = _$createElement("text");
+            _$insert(_el$80, time);
+            _$effect(_$p => _$setProp(_el$80, "fg", theme().muted, _$p));
+            return _el$80;
           })()
         }), null);
         _$insert(_el$43, _$createComponent(Show, {
@@ -567,16 +584,16 @@ function UsageDialog(props) {
           },
           get fallback() {
             return (() => {
-              var _el$85 = _$createElement("text");
-              _$insertNode(_el$85, _$createTextNode(`Request usage unavailable`));
-              _$effect(_$p => _$setProp(_el$85, "fg", theme().muted, _$p));
-              return _el$85;
+              var _el$81 = _$createElement("text");
+              _$insertNode(_el$81, _$createTextNode(`Request usage unavailable`));
+              _$effect(_$p => _$setProp(_el$81, "fg", theme().muted, _$p));
+              return _el$81;
             })();
           },
           children: details => (() => {
-            var _el$87 = _$createElement("box");
-            _$insert(_el$87, () => requestRowsList(requestRows(details(), compact())));
-            return _el$87;
+            var _el$83 = _$createElement("box");
+            _$insert(_el$83, () => requestRowsList(requestRows(details(), compact())));
+            return _el$83;
           })()
         }), null);
         _$insertNode(_el$48, _el$49);
@@ -591,10 +608,10 @@ function UsageDialog(props) {
             return sources();
           },
           children: captured => (() => {
-            var _el$88 = _$createElement("text");
-            _$insert(_el$88, () => new Date(captured().capturedAt).toLocaleTimeString());
-            _$effect(_$p => _$setProp(_el$88, "fg", theme().muted, _$p));
-            return _el$88;
+            var _el$84 = _$createElement("text");
+            _$insert(_el$84, () => new Date(captured().capturedAt).toLocaleTimeString());
+            _$effect(_$p => _$setProp(_el$84, "fg", theme().muted, _$p));
+            return _el$84;
           })()
         }), null);
         _$insert(_el$48, _$createComponent(Show, {
@@ -603,10 +620,10 @@ function UsageDialog(props) {
           },
           get fallback() {
             return (() => {
-              var _el$89 = _$createElement("text");
-              _$insertNode(_el$89, _$createTextNode(`Source estimates unavailable (no request snapshot or RPC)`));
-              _$effect(_$p => _$setProp(_el$89, "fg", theme().muted, _$p));
-              return _el$89;
+              var _el$85 = _$createElement("text");
+              _$insertNode(_el$85, _$createTextNode(`Source estimates unavailable (no request snapshot or RPC)`));
+              _$effect(_$p => _$setProp(_el$85, "fg", theme().muted, _$p));
+              return _el$85;
             })();
           },
           children: captured => _$createComponent(For, {
@@ -614,39 +631,39 @@ function UsageDialog(props) {
               return breakdownRows(captured(), detailed());
             },
             children: row => (() => {
-              var _el$91 = _$createElement("box"),
-                _el$92 = _$createElement("box"),
-                _el$93 = _$createElement("text"),
-                _el$94 = _$createElement("box"),
-                _el$95 = _$createElement("text"),
-                _el$96 = _$createElement("text"),
-                _el$97 = _$createTextNode(`%`);
-              _$insertNode(_el$91, _el$92);
-              _$insertNode(_el$91, _el$94);
-              _$insertNode(_el$91, _el$95);
-              _$insertNode(_el$91, _el$96);
-              _$setProp(_el$91, "flexDirection", "row");
-              _$setProp(_el$91, "gap", 1);
+              var _el$87 = _$createElement("box"),
+                _el$88 = _$createElement("box"),
+                _el$89 = _$createElement("text"),
+                _el$90 = _$createElement("box"),
+                _el$91 = _$createElement("text"),
+                _el$92 = _$createElement("text"),
+                _el$93 = _$createTextNode(`%`);
+              _$insertNode(_el$87, _el$88);
+              _$insertNode(_el$87, _el$90);
+              _$insertNode(_el$87, _el$91);
+              _$insertNode(_el$87, _el$92);
+              _$setProp(_el$87, "flexDirection", "row");
+              _$setProp(_el$87, "gap", 1);
+              _$insertNode(_el$88, _el$89);
+              _$setProp(_el$88, "width", 14);
+              _$setProp(_el$88, "flexShrink", 0);
+              _$insert(_el$89, () => row.label);
+              _$setProp(_el$90, "flexShrink", 0);
+              _$insert(_el$90, () => barRow(row.percent, breakdownBar()));
+              _$setProp(_el$91, "flexShrink", 0);
+              _$insert(_el$91, () => number(row.tokens));
               _$insertNode(_el$92, _el$93);
-              _$setProp(_el$92, "width", 14);
               _$setProp(_el$92, "flexShrink", 0);
-              _$insert(_el$93, () => row.label);
-              _$setProp(_el$94, "flexShrink", 0);
-              _$insert(_el$94, () => barRow(row.percent, breakdownBar()));
-              _$setProp(_el$95, "flexShrink", 0);
-              _$insert(_el$95, () => number(row.tokens));
-              _$insertNode(_el$96, _el$97);
-              _$setProp(_el$96, "flexShrink", 0);
-              _$insert(_el$96, () => row.percent.toFixed(1), _el$97);
+              _$insert(_el$92, () => row.percent.toFixed(1), _el$93);
               _$effect(_p$ => {
-                var _v$25 = theme().muted,
-                  _v$26 = breakdownBar(),
-                  _v$27 = theme().base,
-                  _v$28 = theme().muted;
-                _v$25 !== _p$.e && (_p$.e = _$setProp(_el$93, "fg", _v$25, _p$.e));
-                _v$26 !== _p$.t && (_p$.t = _$setProp(_el$94, "width", _v$26, _p$.t));
-                _v$27 !== _p$.a && (_p$.a = _$setProp(_el$95, "fg", _v$27, _p$.a));
-                _v$28 !== _p$.o && (_p$.o = _$setProp(_el$96, "fg", _v$28, _p$.o));
+                var _v$23 = theme().muted,
+                  _v$24 = breakdownBar(),
+                  _v$25 = theme().base,
+                  _v$26 = theme().muted;
+                _v$23 !== _p$.e && (_p$.e = _$setProp(_el$89, "fg", _v$23, _p$.e));
+                _v$24 !== _p$.t && (_p$.t = _$setProp(_el$90, "width", _v$24, _p$.t));
+                _v$25 !== _p$.a && (_p$.a = _$setProp(_el$91, "fg", _v$25, _p$.a));
+                _v$26 !== _p$.o && (_p$.o = _$setProp(_el$92, "fg", _v$26, _p$.o));
                 return _p$;
               }, {
                 e: undefined,
@@ -654,12 +671,11 @@ function UsageDialog(props) {
                 a: undefined,
                 o: undefined
               });
-              return _el$91;
+              return _el$87;
             })()
           })
         }), null);
         _$insertNode(_el$53, _el$54);
-        _$insertNode(_el$53, _el$57);
         _$insertNode(_el$54, _el$55);
         _$insertNode(_el$55, _$createTextNode(`Session`));
         _$insert(_el$53, _$createComponent(Show, {
@@ -668,10 +684,10 @@ function UsageDialog(props) {
           },
           get fallback() {
             return (() => {
-              var _el$98 = _$createElement("text");
-              _$insertNode(_el$98, _$createTextNode(`Session usage unavailable`));
-              _$effect(_$p => _$setProp(_el$98, "fg", theme().muted, _$p));
-              return _el$98;
+              var _el$94 = _$createElement("text");
+              _$insertNode(_el$94, _$createTextNode(`Session usage unavailable`));
+              _$effect(_$p => _$setProp(_el$94, "fg", theme().muted, _$p));
+              return _el$94;
             })();
           },
           children: summary => _$createComponent(Show, {
@@ -680,26 +696,26 @@ function UsageDialog(props) {
             },
             get fallback() {
               return (() => {
-                var _el$100 = _$createElement("text"),
-                  _el$101 = _$createTextNode(` · `),
-                  _el$102 = _$createTextNode(` · `),
-                  _el$103 = _$createTextNode(` tokens · `),
-                  _el$104 = _$createTextNode(`% cached`);
-                _$insertNode(_el$100, _el$101);
-                _$insertNode(_el$100, _el$102);
-                _$insertNode(_el$100, _el$103);
-                _$insertNode(_el$100, _el$104);
-                _$setProp(_el$100, "wrapMode", "word");
-                _$insert(_el$100, () => countLabel(summary().steps, "step"), _el$101);
-                _$insert(_el$100, () => countLabel(summary().calls, "call"), _el$102);
-                _$insert(_el$100, () => formatCompact(summary().total), _el$103);
-                _$insert(_el$100, () => (summary().cacheRate * 100).toFixed(1), _el$104);
-                _$insert(_el$100, (() => {
+                var _el$96 = _$createElement("text"),
+                  _el$97 = _$createTextNode(` · `),
+                  _el$98 = _$createTextNode(` · `),
+                  _el$99 = _$createTextNode(` tokens · `),
+                  _el$100 = _$createTextNode(`% cached`);
+                _$insertNode(_el$96, _el$97);
+                _$insertNode(_el$96, _el$98);
+                _$insertNode(_el$96, _el$99);
+                _$insertNode(_el$96, _el$100);
+                _$setProp(_el$96, "wrapMode", "word");
+                _$insert(_el$96, () => countLabel(summary().steps, "step"), _el$97);
+                _$insert(_el$96, () => countLabel(summary().calls, "call"), _el$98);
+                _$insert(_el$96, () => formatCompact(summary().total), _el$99);
+                _$insert(_el$96, () => (summary().cacheRate * 100).toFixed(1), _el$100);
+                _$insert(_el$96, (() => {
                   var _c$ = _$memo(() => !!formatEstimatedCost(summary().cost, summary().costStatus));
                   return () => _c$() ? ` · ${formatEstimatedCost(summary().cost, summary().costStatus)}` : "";
                 })(), null);
-                _$effect(_$p => _$setProp(_el$100, "fg", theme().base, _$p));
-                return _el$100;
+                _$effect(_$p => _$setProp(_el$96, "fg", theme().base, _$p));
+                return _el$96;
               })();
             },
             get children() {
@@ -708,60 +724,81 @@ function UsageDialog(props) {
                   return summaryRows(summary());
                 },
                 children: ([label, value]) => (() => {
-                  var _el$105 = _$createElement("box"),
-                    _el$106 = _$createElement("text"),
-                    _el$107 = _$createElement("text");
-                  _$insertNode(_el$105, _el$106);
-                  _$insertNode(_el$105, _el$107);
-                  _$setProp(_el$105, "flexDirection", "row");
-                  _$setProp(_el$105, "justifyContent", "space-between");
-                  _$setProp(_el$105, "gap", 2);
-                  _$setProp(_el$106, "flexShrink", 0);
-                  _$insert(_el$106, label);
-                  _$insert(_el$107, value);
+                  var _el$101 = _$createElement("box"),
+                    _el$102 = _$createElement("text"),
+                    _el$103 = _$createElement("text");
+                  _$insertNode(_el$101, _el$102);
+                  _$insertNode(_el$101, _el$103);
+                  _$setProp(_el$101, "flexDirection", "row");
+                  _$setProp(_el$101, "justifyContent", "space-between");
+                  _$setProp(_el$101, "gap", 2);
+                  _$setProp(_el$102, "flexShrink", 0);
+                  _$insert(_el$102, label);
+                  _$insert(_el$103, value);
                   _$effect(_p$ => {
-                    var _v$29 = theme().muted,
-                      _v$30 = theme().base;
-                    _v$29 !== _p$.e && (_p$.e = _$setProp(_el$106, "fg", _v$29, _p$.e));
-                    _v$30 !== _p$.t && (_p$.t = _$setProp(_el$107, "fg", _v$30, _p$.t));
+                    var _v$27 = theme().muted,
+                      _v$28 = theme().base;
+                    _v$27 !== _p$.e && (_p$.e = _$setProp(_el$102, "fg", _v$27, _p$.e));
+                    _v$28 !== _p$.t && (_p$.t = _$setProp(_el$103, "fg", _v$28, _p$.t));
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
-                  return _el$105;
+                  return _el$101;
                 })()
               });
             }
           })
-        }), _el$57);
+        }), null);
+        _$insert(_el$53, _$createComponent(Show, {
+          get when() {
+            return runtime();
+          },
+          children: time => (() => {
+            var _el$104 = _$createElement("box"),
+              _el$105 = _$createElement("text"),
+              _el$107 = _$createElement("text");
+            _$insertNode(_el$104, _el$105);
+            _$insertNode(_el$104, _el$107);
+            _$setProp(_el$104, "flexDirection", "row");
+            _$setProp(_el$104, "justifyContent", "space-between");
+            _$setProp(_el$104, "gap", 2);
+            _$insertNode(_el$105, _$createTextNode(`Run Time (this session)`));
+            _$setProp(_el$105, "wrapMode", "word");
+            _$setProp(_el$105, "minWidth", 0);
+            _$setProp(_el$107, "wrapMode", "word");
+            _$setProp(_el$107, "minWidth", 0);
+            _$insert(_el$107, time);
+            _$effect(_p$ => {
+              var _v$29 = theme().muted,
+                _v$30 = theme().base;
+              _v$29 !== _p$.e && (_p$.e = _$setProp(_el$105, "fg", _v$29, _p$.e));
+              _v$30 !== _p$.t && (_p$.t = _$setProp(_el$107, "fg", _v$30, _p$.t));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$104;
+          })()
+        }), null);
         _$insertNode(_el$57, _el$58);
-        _$insertNode(_el$57, _el$60);
-        _$setProp(_el$57, "flexDirection", "row");
-        _$setProp(_el$57, "justifyContent", "space-between");
-        _$setProp(_el$57, "gap", 2);
-        _$insertNode(_el$58, _$createTextNode(`Run Time (this session)`));
-        _$setProp(_el$58, "wrapMode", "word");
-        _$setProp(_el$58, "minWidth", 0);
-        _$setProp(_el$60, "wrapMode", "word");
-        _$setProp(_el$60, "minWidth", 0);
-        _$insert(_el$60, () => formatRunTime(state().runtime));
-        _$insertNode(_el$61, _el$62);
-        _$insertNode(_el$62, _el$63);
-        _$insertNode(_el$63, _$createTextNode(`By Model`));
-        _$insert(_el$61, _$createComponent(Show, {
+        _$insertNode(_el$58, _el$59);
+        _$insertNode(_el$59, _$createTextNode(`By Model`));
+        _$insert(_el$57, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!detailed())() && models().length;
           },
           get children() {
-            var _el$65 = _$createElement("text");
-            _$insertNode(_el$65, _$createTextNode(`Rates used for Est. Cost · USD / 1M text tokens · incoming = Input + Cache Read + Cache Write`));
-            _$setProp(_el$65, "wrapMode", "word");
-            _$effect(_$p => _$setProp(_el$65, "fg", theme().muted, _$p));
-            return _el$65;
+            var _el$61 = _$createElement("text");
+            _$insertNode(_el$61, _$createTextNode(`Rates used for Est. Cost · USD / 1M text tokens · incoming = Input + Cache Read + Cache Write`));
+            _$setProp(_el$61, "wrapMode", "word");
+            _$effect(_$p => _$setProp(_el$61, "fg", theme().muted, _$p));
+            return _el$61;
           }
         }), null);
-        _$insert(_el$61, _$createComponent(Show, {
+        _$insert(_el$57, _$createComponent(Show, {
           get when() {
             return models().length;
           },
@@ -867,17 +904,13 @@ function UsageDialog(props) {
             _v$12 = theme().base,
             _v$13 = theme().base,
             _v$14 = theme().base,
-            _v$15 = theme().muted,
-            _v$16 = theme().base,
-            _v$17 = 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$50, "fg", _v$13, _p$.o));
           _v$14 !== _p$.i && (_p$.i = _$setProp(_el$54, "fg", _v$14, _p$.i));
           _v$15 !== _p$.n && (_p$.n = _$setProp(_el$58, "fg", _v$15, _p$.n));
-          _v$16 !== _p$.s && (_p$.s = _$setProp(_el$60, "fg", _v$16, _p$.s));
-          _v$17 !== _p$.h && (_p$.h = _$setProp(_el$62, "fg", _v$17, _p$.h));
           return _p$;
         }, {
           e: undefined,
@@ -885,34 +918,32 @@ function UsageDialog(props) {
           a: undefined,
           o: undefined,
           i: undefined,
-          n: undefined,
-          s: undefined,
-          h: undefined
+          n: undefined
         });
         return _el$37;
       }
-    }), _el$67);
-    _$insertNode(_el$67, _el$68);
-    _$insertNode(_el$67, _el$70);
-    _$insertNode(_el$67, _el$72);
-    _$setProp(_el$67, "flexDirection", "row");
-    _$insertNode(_el$68, _$createTextNode(`↑/↓ scroll · `));
-    _$insertNode(_el$70, _$createTextNode(`d details`));
-    _$setProp(_el$70, "onMouseUp", event => {
+    }), _el$63);
+    _$insertNode(_el$63, _el$64);
+    _$insertNode(_el$63, _el$66);
+    _$insertNode(_el$63, _el$68);
+    _$setProp(_el$63, "flexDirection", "row");
+    _$insertNode(_el$64, _$createTextNode(`↑/↓ scroll · `));
+    _$insertNode(_el$66, _$createTextNode(`d details`));
+    _$setProp(_el$66, "onMouseUp", event => {
       if (event.button === 0) toggleDetails();
     });
-    _$insertNode(_el$72, _$createTextNode(` · esc close`));
+    _$insertNode(_el$68, _$createTextNode(` · esc close`));
     _$effect(_p$ => {
-      var _v$18 = theme().base,
+      var _v$16 = theme().base,
+        _v$17 = theme().muted,
+        _v$18 = theme().muted,
         _v$19 = theme().muted,
-        _v$20 = theme().muted,
-        _v$21 = theme().muted,
-        _v$22 = theme().muted;
-      _v$18 !== _p$.e && (_p$.e = _$setProp(_el$30, "fg", _v$18, _p$.e));
-      _v$19 !== _p$.t && (_p$.t = _$setProp(_el$33, "fg", _v$19, _p$.t));
-      _v$20 !== _p$.a && (_p$.a = _$setProp(_el$68, "fg", _v$20, _p$.a));
-      _v$21 !== _p$.o && (_p$.o = _$setProp(_el$70, "fg", _v$21, _p$.o));
-      _v$22 !== _p$.i && (_p$.i = _$setProp(_el$72, "fg", _v$22, _p$.i));
+        _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$64, "fg", _v$18, _p$.a));
+      _v$19 !== _p$.o && (_p$.o = _$setProp(_el$66, "fg", _v$19, _p$.o));
+      _v$20 !== _p$.i && (_p$.i = _$setProp(_el$68, "fg", _v$20, _p$.i));
       return _p$;
     }, {
       e: undefined,
@@ -930,6 +961,15 @@ export default Plugin.define({
     const performance = new PerformanceMonitor(listener => context.data.listen(({
       details
     }) => listener(details)));
+    const runtime = new RuntimeMonitor(listener => context.data.listen(({
+      details
+    }) => listener(details)));
+    const synchronizeRuntime = () => void runtime.synchronize(signal => context.client.rpc(ContextSourceRpc).clock({}, {
+      location: context.location ?? context.data.location.default(),
+      signal
+    }));
+    synchronizeRuntime();
+    const stopClockSync = context.data.on("server.connected", synchronizeRuntime);
     const controllers = new Set();
     const register = controller => {
       controllers.add(controller);
@@ -937,6 +977,19 @@ export default Plugin.define({
         controllers.delete(controller);
       };
     };
+    const openUsage = sessionID => {
+      context.ui.dialog.show(() => _$createComponent(UsageDialog, {
+        context: context,
+        sessionID: sessionID,
+        performance: performance,
+        runtime: runtime,
+        register: register
+      }));
+      context.ui.dialog.set({
+        size: "large",
+        centered: true
+      });
+    };
     const remove = context.ui.slot({
       append: "sidebar.content",
       render: props => _$createComponent(UsagePanel, {
@@ -945,10 +998,12 @@ export default Plugin.define({
           return props.sessionID;
         },
         performance: performance,
-        register: register
+        runtime: runtime,
+        register: register,
+        open: openUsage
       })
     });
-    const openChildUsage = (sessionID, state) => {
+    const openChildUsage = state => {
       context.ui.dialog.show(() => _$createComponent(ChildUsageDialog, {
         context: context,
         state: state
@@ -972,6 +1027,7 @@ export default Plugin.define({
               return props.sessionID;
             },
             performance: performance,
+            runtime: runtime,
             register: register,
             open: openChildUsage
           });
@@ -995,18 +1051,7 @@ export default Plugin.define({
             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
-              });
+              openUsage(route.sessionID);
             }
           }]
         }));
@@ -1020,6 +1065,8 @@ export default Plugin.define({
       removeChild();
       removeCommand();
       performance.dispose();
+      runtime.dispose();
+      stopClockSync();
     };
   }
 });