@chenlongapps/opencode-token-usage 0.4.7 → 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,12 +14,16 @@ 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, formatCompact, formatEstimatedCost, formatRateTier, formatTokens, rateRows, requestRows, summaryRows, usageRows } from "./usage.js";
+import { bar, countLabel, fitUsageSummary, formatCompact, formatEstimatedCost, formatRateTier, formatRunTime, formatTokens, rateRows, 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 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 = () => ({
     loading: "Loading…",
     ready: "",
@@ -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,13 +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 · ${{
@@ -218,8 +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` : "—";
-    const stale = current.status === "stale" ? " · Not updated" : "";
-    return `Token Usage · Context ${context} · Total ${formatTokens(current.summary.total)} · Cost ${cost} · TPS ${tps}${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;
@@ -731,6 +751,38 @@ function UsageDialog(props) {
             }
           })
         }), 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$58, _el$59);
         _$insertNode(_el$59, _$createTextNode(`By Model`));
@@ -752,10 +804,10 @@ function UsageDialog(props) {
           },
           get fallback() {
             return (() => {
-              var _el$104 = _$createElement("text");
-              _$insertNode(_el$104, _$createTextNode(`No model usage yet`));
-              _$effect(_$p => _$setProp(_el$104, "fg", theme().muted, _$p));
-              return _el$104;
+              var _el$108 = _$createElement("text");
+              _$insertNode(_el$108, _$createTextNode(`No model usage yet`));
+              _$effect(_$p => _$setProp(_el$108, "fg", theme().muted, _$p));
+              return _el$108;
             })();
           },
           get children() {
@@ -764,29 +816,29 @@ function UsageDialog(props) {
                 return models();
               },
               children: model => (() => {
-                var _el$106 = _$createElement("box"),
-                  _el$107 = _$createElement("box"),
-                  _el$108 = _$createElement("text"),
-                  _el$109 = _$createElement("text"),
-                  _el$110 = _$createElement("text"),
-                  _el$111 = _$createTextNode(` tokens · `);
-                _$insertNode(_el$106, _el$107);
-                _$insertNode(_el$106, _el$110);
-                _$insertNode(_el$107, _el$108);
-                _$insertNode(_el$107, _el$109);
-                _$setProp(_el$107, "flexDirection", "row");
-                _$setProp(_el$107, "justifyContent", "space-between");
-                _$setProp(_el$107, "gap", 2);
-                _$setProp(_el$108, "wrapMode", "word");
-                _$setProp(_el$108, "minWidth", 0);
-                _$setProp(_el$108, "flexGrow", 1);
-                _$insert(_el$108, () => model.model);
-                _$setProp(_el$109, "flexShrink", 0);
-                _$insert(_el$109, () => formatEstimatedCost(model.cost, model.costStatus) ?? "");
+                var _el$110 = _$createElement("box"),
+                  _el$111 = _$createElement("box"),
+                  _el$112 = _$createElement("text"),
+                  _el$113 = _$createElement("text"),
+                  _el$114 = _$createElement("text"),
+                  _el$115 = _$createTextNode(` tokens · `);
                 _$insertNode(_el$110, _el$111);
-                _$insert(_el$110, () => number(model.tokens), _el$111);
-                _$insert(_el$110, () => countLabel(model.calls, "call"), null);
-                _$insert(_el$106, _$createComponent(Show, {
+                _$insertNode(_el$110, _el$114);
+                _$insertNode(_el$111, _el$112);
+                _$insertNode(_el$111, _el$113);
+                _$setProp(_el$111, "flexDirection", "row");
+                _$setProp(_el$111, "justifyContent", "space-between");
+                _$setProp(_el$111, "gap", 2);
+                _$setProp(_el$112, "wrapMode", "word");
+                _$setProp(_el$112, "minWidth", 0);
+                _$setProp(_el$112, "flexGrow", 1);
+                _$insert(_el$112, () => model.model);
+                _$setProp(_el$113, "flexShrink", 0);
+                _$insert(_el$113, () => formatEstimatedCost(model.cost, model.costStatus) ?? "");
+                _$insertNode(_el$114, _el$115);
+                _$insert(_el$114, () => number(model.tokens), _el$115);
+                _$insert(_el$114, () => countLabel(model.calls, "call"), null);
+                _$insert(_el$110, _$createComponent(Show, {
                   get when() {
                     return detailed();
                   },
@@ -796,52 +848,52 @@ function UsageDialog(props) {
                         return model.appliedRates;
                       },
                       children: rates => (() => {
-                        var _el$114 = _$createElement("box"),
-                          _el$115 = _$createElement("text"),
-                          _el$116 = _$createTextNode(` · `),
-                          _el$117 = _$createTextNode(` · `);
-                        _$insertNode(_el$114, _el$115);
-                        _$setProp(_el$114, "marginTop", 1);
-                        _$insertNode(_el$115, _el$116);
-                        _$insertNode(_el$115, _el$117);
-                        _$setProp(_el$115, "wrapMode", "word");
-                        _$insert(_el$115, () => rates.source, _el$116);
-                        _$insert(_el$115, () => formatRateTier(rates), _el$117);
-                        _$insert(_el$115, () => countLabel(rates.calls, "call"), null);
-                        _$insert(_el$114, () => requestRowsList(rateRows(rates)), null);
-                        _$effect(_$p => _$setProp(_el$115, "fg", theme().muted, _$p));
-                        return _el$114;
+                        var _el$118 = _$createElement("box"),
+                          _el$119 = _$createElement("text"),
+                          _el$120 = _$createTextNode(` · `),
+                          _el$121 = _$createTextNode(` · `);
+                        _$insertNode(_el$118, _el$119);
+                        _$setProp(_el$118, "marginTop", 1);
+                        _$insertNode(_el$119, _el$120);
+                        _$insertNode(_el$119, _el$121);
+                        _$setProp(_el$119, "wrapMode", "word");
+                        _$insert(_el$119, () => rates.source, _el$120);
+                        _$insert(_el$119, () => formatRateTier(rates), _el$121);
+                        _$insert(_el$119, () => countLabel(rates.calls, "call"), null);
+                        _$insert(_el$118, () => requestRowsList(rateRows(rates)), null);
+                        _$effect(_$p => _$setProp(_el$119, "fg", theme().muted, _$p));
+                        return _el$118;
                       })()
                     }), _$createComponent(Show, {
                       get when() {
                         return model.unpricedCalls > 0;
                       },
                       get children() {
-                        var _el$112 = _$createElement("text"),
-                          _el$113 = _$createTextNode(`Pricing unavailable for `);
-                        _$insertNode(_el$112, _el$113);
-                        _$setProp(_el$112, "wrapMode", "word");
-                        _$insert(_el$112, () => countLabel(model.unpricedCalls, "call"), null);
-                        _$effect(_$p => _$setProp(_el$112, "fg", theme().muted, _$p));
-                        return _el$112;
+                        var _el$116 = _$createElement("text"),
+                          _el$117 = _$createTextNode(`Pricing unavailable for `);
+                        _$insertNode(_el$116, _el$117);
+                        _$setProp(_el$116, "wrapMode", "word");
+                        _$insert(_el$116, () => countLabel(model.unpricedCalls, "call"), null);
+                        _$effect(_$p => _$setProp(_el$116, "fg", theme().muted, _$p));
+                        return _el$116;
                       }
                     })];
                   }
                 }), null);
                 _$effect(_p$ => {
-                  var _v$29 = theme().base,
-                    _v$30 = theme().base,
-                    _v$31 = theme().muted;
-                  _v$29 !== _p$.e && (_p$.e = _$setProp(_el$108, "fg", _v$29, _p$.e));
-                  _v$30 !== _p$.t && (_p$.t = _$setProp(_el$109, "fg", _v$30, _p$.t));
-                  _v$31 !== _p$.a && (_p$.a = _$setProp(_el$110, "fg", _v$31, _p$.a));
+                  var _v$31 = theme().base,
+                    _v$32 = theme().base,
+                    _v$33 = theme().muted;
+                  _v$31 !== _p$.e && (_p$.e = _$setProp(_el$112, "fg", _v$31, _p$.e));
+                  _v$32 !== _p$.t && (_p$.t = _$setProp(_el$113, "fg", _v$32, _p$.t));
+                  _v$33 !== _p$.a && (_p$.a = _$setProp(_el$114, "fg", _v$33, _p$.a));
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
                   a: undefined
                 });
-                return _el$106;
+                return _el$110;
               })()
             });
           }
@@ -909,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);
@@ -916,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, {
@@ -924,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
@@ -951,6 +1027,7 @@ export default Plugin.define({
               return props.sessionID;
             },
             performance: performance,
+            runtime: runtime,
             register: register,
             open: openChildUsage
           });
@@ -974,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);
             }
           }]
         }));
@@ -999,6 +1065,8 @@ export default Plugin.define({
       removeChild();
       removeCommand();
       performance.dispose();
+      runtime.dispose();
+      stopClockSync();
     };
   }
 });

package/dist/usage.d.ts

@@ -1,4 +1,5 @@
 import type { PerformanceSummary } from "./performance.js";
+import type { RuntimeSummary } from "./runtime.js";
 export interface Tokens {
     input: number;
     output: number;
@@ -42,6 +43,9 @@ export interface UsageMessage {
     id: string;
     type: string;
     status?: string;
+    finish?: string;
+    error?: unknown;
+    retry?: unknown;
     model?: ModelRef;
     cost?: number;
     tokens?: TokenInput;
@@ -137,6 +141,12 @@ export interface RequestDetails {
 export declare function requestDetails(messages: readonly UsageMessage[], revertMessageID?: string): RequestDetails | undefined;
 export declare function contextUsage(messages: readonly UsageMessage[], limit?: number, revertMessageID?: string): ContextUsage | undefined;
 export declare function formatTokens(value: number): string;
+/** Native sub-minute precision; longer durations keep compact, readable units. */
+export declare function formatDuration(milliseconds: number, compact?: boolean): string;
+/** Hide confirmed zero totals, but preserve unavailable and stale timing. */
+export declare function formatRunTime(runtime?: RuntimeSummary, compact?: boolean): string | undefined;
+/** Preserve session-local time on narrow terminals without adding composer height. */
+export declare function fitUsageSummary(fields: readonly (readonly [string, string | undefined])[], width: number, stale?: boolean): string;
 export declare const formatCost: (value: number) => string;
 export declare function formatEstimatedCost(cost: number, status: CostStatus): string | undefined;
 /** Per-million rates need more precision than a rounded total cost. */
@@ -159,4 +169,4 @@ export declare function requestRows(details: RequestDetails, compact: boolean):
 export declare function summaryRows(summary: Summary): readonly (readonly [string, string])[];
 /** `1 step` reads better than `1 steps` in the dialog's single-line summaries. */
 export declare const countLabel: (value: number, noun: string) => string;
-export declare function usageRows(summary?: Summary, context?: ContextUsage, performance?: PerformanceSummary): readonly (readonly [string, string])[];
+export declare function usageRows(summary?: Summary, context?: ContextUsage, performance?: PerformanceSummary, runtime?: RuntimeSummary): readonly (readonly [string, string])[];

package/dist/usage.js

@@ -191,7 +191,63 @@ export function contextUsage(messages, limit, revertMessageID) {
 export function formatTokens(value) {
     return Math.round(safe(value)).toLocaleString("en-US");
 }
-export const formatCost = (value) => value > 0 && value < 0.01 ? "<$0.01" : `$${safe(value).toFixed(2)}`;
+/** Native sub-minute precision; longer durations keep compact, readable units. */
+export function formatDuration(milliseconds, compact = false) {
+    if (!Number.isFinite(milliseconds) || milliseconds < 0)
+        return "—";
+    if (milliseconds === 0)
+        return "0s";
+    if (milliseconds < 1_000)
+        return `${milliseconds}ms`;
+    if (milliseconds < 60_000)
+        return `${(milliseconds / 1_000).toFixed(1)}s`;
+    const seconds = Math.floor(milliseconds / 1_000);
+    const hours = Math.floor(seconds / 3_600), minutes = Math.floor(seconds / 60) % 60, rest = seconds % 60;
+    if (hours > 0)
+        return compact ? `${hours}h${minutes}m${rest}s` : `${hours}h ${String(minutes).padStart(2, "0")}m ${String(rest).padStart(2, "0")}s`;
+    if (minutes > 0)
+        return compact ? `${minutes}m${rest}s` : `${minutes}m ${String(rest).padStart(2, "0")}s`;
+    return `${rest}s`;
+}
+/** Hide confirmed zero totals, but preserve unavailable and stale timing. */
+export function formatRunTime(runtime, compact = false) {
+    if (runtime?.milliseconds === undefined)
+        return "—";
+    const estimated = runtime.estimatedMilliseconds !== undefined;
+    const milliseconds = runtime.estimatedMilliseconds ?? runtime.milliseconds;
+    if (runtime.status === "ready" && milliseconds === 0)
+        return undefined;
+    const duration = formatDuration(milliseconds, compact);
+    const time = estimated && duration !== "—" ? `~${duration}` : duration;
+    return runtime.status === "stale" ? `${time} · ${compact ? "stale" : "Not updated"}` : time;
+}
+/** Preserve session-local time on narrow terminals without adding composer height. */
+export function fitUsageSummary(fields, width, stale = false) {
+    let visible = fields.filter((field) => field[1] !== undefined);
+    const suffix = stale ? " · Not updated" : "";
+    const render = (title) => `${[title, ...visible.map(([label, value]) => `${label} ${value}`)].join(" · ")}${suffix}`;
+    for (const label of ["TPS", "Context", "Cost", "Total"]) {
+        if (render("Token Usage").length <= width)
+            return render("Token Usage");
+        // Keep a useful metric even when the zero-time field is hidden.
+        if (visible.length > 1)
+            visible = visible.filter(([name]) => name !== label);
+    }
+    if (render("Token Usage").length <= width)
+        return render("Token Usage");
+    if (render("Usage").length <= width)
+        return render("Usage");
+    // Remove the title before clipping any value; retain time when it is present.
+    return `${visible.map(([label, value]) => `${label} ${value}`).join(" · ")}${stale ? " · stale" : ""}`.slice(0, Math.max(0, width));
+}
+export const formatCost = (value) => {
+    const amount = safe(value);
+    if (amount === 0)
+        return "$0.00";
+    if (amount < 0.001)
+        return "<$0.001";
+    return `$${amount.toFixed(amount > 0.01 ? 2 : 3)}`;
+};
 export function formatEstimatedCost(cost, status) {
     if (status === "empty")
         return undefined;
@@ -268,7 +324,7 @@ export function summaryRows(summary) {
 }
 /** `1 step` reads better than `1 steps` in the dialog's single-line summaries. */
 export const countLabel = (value, noun) => `${formatTokens(value)} ${noun}${value === 1 ? "" : "s"}`;
-export function usageRows(summary, context, performance) {
+export function usageRows(summary, context, performance, runtime) {
     const t = summary?.tokens;
     const number = (value) => value === undefined ? "—" : formatTokens(value);
     const rows = [];
@@ -287,5 +343,8 @@ export function usageRows(summary, context, performance) {
     if (performance?.ttft !== undefined && Number.isFinite(performance.ttft)) {
         rows.push(["TTFT", `${(Math.max(0, performance.ttft) / 1_000).toFixed(1)}s`]);
     }
+    const time = runtime && formatRunTime(runtime);
+    if (time !== undefined)
+        rows.push(["Run Time", time]);
     return rows;
 }