pi-one-ui 0.3.1 → 0.4.0

package/extensions/layouts/editor/factory.ts

@@ -7,7 +7,6 @@ import type {
 import type { EditorTheme, TUI } from "@earendil-works/pi-tui";
 import type { PolishedTuiConfig } from "../../app/config/shell.ts";
 import { type FooterState, modelLabelFor } from "../footer/index.ts";
-import { markAccentRailLayoutEditor } from "./accent-rail-layout-patch.ts";
 import {
   type EditorFactory,
   markEditorFactory,
@@ -22,14 +21,11 @@ export type EditorFactoryRuntime = {
   readonly getConfig: () => PolishedTuiConfig;
   readonly getState: () => FooterState;
   readonly getThinkingLevel: () => ReturnType<ExtensionAPI["getThinkingLevel"]>;
-  readonly getContextWindow: (ctx: ExtensionContext) => number | undefined;
-  readonly getContextPercent: (ctx: ExtensionContext) => number | undefined;
   readonly getAgentDurationMs: () => number;
   readonly isAgentActive: () => boolean;
   readonly getProjectRoot: () => string | undefined;
   readonly onRender: (requestRender: () => void) => void;
   readonly onDecorationActive: (active: boolean) => void;
-  readonly isAccentRailActive: () => boolean;
 };
 
 /**
@@ -49,7 +45,7 @@ export function createEditorFactory(
     keybindings: KeybindingsManager,
   ) => {
     runtime.onRender(() => tui.requestRender());
-    const editor = new PolishedEditor(
+    return new PolishedEditor(
       tui,
       theme,
       keybindings,
@@ -60,12 +56,6 @@ export function createEditorFactory(
       () => editorDecoration(ctx, runtime),
       runtime.onDecorationActive,
     );
-    markAccentRailLayoutEditor(
-      editor,
-      runtime.ownerToken,
-      runtime.isAccentRailActive,
-    );
-    return editor;
   }) as ZentuiEditorFactory;
   return markEditorFactory(factory, runtime.ownerToken);
 }
@@ -89,7 +79,7 @@ export function createWrappedEditorFactory(
     keybindings: KeybindingsManager,
   ) => {
     runtime.onRender(() => tui.requestRender());
-    const editor = new WrappedPolishedEditor(
+    return new WrappedPolishedEditor(
       baseFactory(tui, theme, keybindings),
       runtime.sessionTheme,
       runtime.getConfig,
@@ -98,12 +88,6 @@ export function createWrappedEditorFactory(
       () => editorDecoration(ctx, runtime),
       runtime.onDecorationActive,
     );
-    markAccentRailLayoutEditor(
-      editor,
-      runtime.ownerToken,
-      runtime.isAccentRailActive,
-    );
-    return editor;
   }) as ZentuiEditorFactory;
   return markWrappedEditorFactory(factory, baseFactory, runtime.ownerToken);
 }
@@ -150,8 +134,6 @@ function editorDecoration(
     costLabel: state.costLabel,
     modelLabel: modelLabelFor(state, config.components.editor.modelLabel),
     thinkingLevel: runtime.getThinkingLevel(),
-    contextPercent: runtime.getContextPercent(ctx),
-    contextWindow: runtime.getContextWindow(ctx),
     sessionName: ctx.sessionManager.getSessionName() ?? "",
     agentDurationMs: runtime.getAgentDurationMs(),
     agentActive: runtime.isAgentActive(),

package/extensions/layouts/editor/index.ts

@@ -1,9 +1,3 @@
-export {
-  type AccentRailLayoutPatchDiagnostic,
-  installHostAccentRailLayoutPatch,
-  markAccentRailLayoutEditor,
-  retainAccentRailLayoutPatchInstallation,
-} from "./accent-rail-layout-patch.ts";
 export {
   type EditorChangeResult,
   EditorLayoutController,

package/extensions/layouts/editor/minimalist-editor.ts

@@ -2,13 +2,7 @@ import { basename, isAbsolute, relative, sep } from "node:path";
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import type { ZentuiConfig } from "../../app/config/shell.ts";
-import {
-  buildContextGauge,
-  contextColorTier,
-  formatCount,
-  formatCwdLabel,
-  formatElapsedDuration,
-} from "../../shared/format.ts";
+import { formatCwdLabel, formatElapsedDuration } from "../../shared/format.ts";
 import { sanitizeEditorMetadataText } from "./editor-metadata-format.ts";
 
 export { formatElapsedDuration } from "../../shared/format.ts";
@@ -53,8 +47,6 @@ export type MinimalistEditorMetadata = {
   costLabel?: string;
   modelLabel?: string;
   thinkingLevel?: string;
-  contextPercent?: number;
-  contextWindow?: number;
   sessionName?: string;
   agentDurationMs?: number;
   agentActive?: boolean;
@@ -201,7 +193,6 @@ function renderTopRight(
   metadata: MinimalistEditorMetadata,
   uiTheme: Theme,
   config: ZentuiConfig,
-  availableWidth: number,
   renderBorder: (text: string) => string,
   renderThinking: (text: string) => string,
 ): string {
@@ -235,46 +226,6 @@ function renderTopRight(
   if (thinking && thinking.toLowerCase() !== "off") {
     parts.push(renderThinking(thinking));
   }
-  if (
-    metadata.contextPercent !== undefined &&
-    Number.isFinite(metadata.contextPercent)
-  ) {
-    const percent = Math.round(
-      Math.max(0, Math.min(999, metadata.contextPercent)),
-    );
-    const tier = contextColorTier(
-      percent,
-      config.components.editor.styles.minimalist.contextThresholds,
-    );
-    const style =
-      tier === "error"
-        ? config.colors.contextError
-        : tier === "warning"
-          ? config.colors.contextWarning
-          : config.colors.contextNormal;
-    const total =
-      config.components.editor.styles.minimalist.contextFormat ===
-        "percent-total" &&
-      metadata.contextWindow !== undefined &&
-      Number.isFinite(metadata.contextWindow) &&
-      metadata.contextWindow > 0
-        ? `/${formatCount(metadata.contextWindow)}`
-        : "";
-    const text = `${percent}%${total}`;
-    let context = renderStyleForSource(uiTheme, source, style, text);
-    if (config.components.editor.styles.minimalist.contextGauge) {
-      for (const gaugeWidth of [5, 3]) {
-        const gauge = `[${buildContextGauge(percent, gaugeWidth, config.icons.mode === "ascii")}] ${text}`;
-        const styledGauge = renderStyleForSource(uiTheme, source, style, gauge);
-        const candidate = joinParts([...parts, styledGauge]);
-        if (visibleWidth(candidate) <= availableWidth) {
-          context = styledGauge;
-          break;
-        }
-      }
-    }
-    parts.push(context);
-  }
   return joinParts(parts);
 }
 
@@ -500,7 +451,6 @@ export function renderMinimalistFrame({
   );
   const topViewport = viewportLabel("above", viewport?.above);
   const topLeft = joinStyled([topViewport, topMetadata], separator);
-  const topRightBudget = Math.max(0, width - 8 - visibleWidth(topLeft));
   const topFallbacks = [
     joinStyled([topViewport, topOperational], separator),
     topOperational,
@@ -516,7 +466,6 @@ export function renderMinimalistFrame({
       metadata,
       uiTheme,
       config,
-      topRightBudget,
       renderBorder,
       renderThinking,
     ),

package/extensions/layouts/editor/ui.ts

@@ -12,17 +12,13 @@ import {
   truncateToWidth,
   visibleWidth,
 } from "@earendil-works/pi-tui";
-import type { EditorStyle, ZentuiConfig } from "../../app/config/shell.ts";
+import type { ZentuiConfig } from "../../app/config/shell.ts";
 import {
   EDITOR_ACCENT_FALLBACK,
   EDITOR_BORDER_FALLBACK,
   renderStyleForSourceOrFallback,
   safeThemeFg,
 } from "../../shared/style.ts";
-import {
-  ACCENT_RAIL_CHROME_WIDTH,
-  renderAccentRailEditorFrame,
-} from "./accent-rail-editor.ts";
 import { renderCompletionPalette } from "./completion-menu.ts";
 import { renderEditorMetadataFormat } from "./editor-metadata-format.ts";
 import {
@@ -128,17 +124,6 @@ type PolishedFrameResult = {
   decorated: boolean;
 };
 
-type AccentRailFrameAdapterOptions = {
-  width: number;
-  baseRendered: string[];
-  autocompleteSource: AutocompleteEditorInternals;
-  autocompleteCapture?: AutocompleteCapture;
-  uiTheme: Theme;
-  config: ZentuiConfig;
-  ownedFrame?: PolishedFrameSplit;
-  trustedBaseFrame?: boolean;
-};
-
 type MinimalistFrameAdapterOptions = {
   width: number;
   baseRendered: string[];
@@ -342,61 +327,19 @@ function fillLine(content: string, width: number): string {
   return `${truncated}${pad}`;
 }
 
-function isLowRailPolishedStyle(style: EditorStyle): boolean {
-  return style === "opencode-copy-friendly";
-}
-
-function selectedPolishedConfig(config: ZentuiConfig) {
-  switch (config.components.editor.style) {
-    case "opencode":
-      return config.components.editor.styles.opencode;
-    case "opencode-copy-friendly":
-      return config.components.editor.styles["opencode-copy-friendly"];
-    case "accent-rail":
-    case "minimalist":
-      return undefined;
-  }
-}
-
-function lowRailPrompt(
-  config: ZentuiConfig,
-  uiTheme: Theme,
-  reset: string,
-): string {
-  const promptIcon = config.icons.editorPrompt;
-  return promptIcon
-    ? `${renderStyleForSourceOrFallback(
-        uiTheme,
-        config.components.editor.colorSource,
-        config.colors.editorPrompt ?? config.colors.editorAccent,
-        EDITOR_ACCENT_FALLBACK,
-        promptIcon,
-      )}${reset} `
-    : "";
-}
-
 function getEditorChromeWidths(
   config: ZentuiConfig,
   uiTheme: Theme,
   reset: string,
 ) {
-  const lowRail = isLowRailPolishedStyle(config.components.editor.style);
-  const prompt = lowRailPrompt(config, uiTheme, reset);
-  const rail = lowRail
-    ? ""
-    : `${renderStyleForSourceOrFallback(
-        uiTheme,
-        config.components.editor.colorSource,
-        config.colors.editorAccent,
-        EDITOR_ACCENT_FALLBACK,
-        config.icons.rail,
-      )}${reset} `;
-  return {
-    prompt,
-    promptWidth: visibleWidth(prompt),
-    rail,
-    railWidth: lowRail ? visibleWidth(prompt) : visibleWidth(rail),
-  };
+  const rail = `${renderStyleForSourceOrFallback(
+    uiTheme,
+    config.components.editor.colorSource,
+    config.colors.editorAccent,
+    EDITOR_ACCENT_FALLBACK,
+    config.icons.rail,
+  )}${reset} `;
+  return { rail, railWidth: visibleWidth(rail) };
 }
 
 function composeMetadataLine(
@@ -464,31 +407,6 @@ function unwrapPolishedFrameOnly(
   const interior = lines.slice(1, -1);
   if (interior.length < 3) return undefined;
 
-  if (isLowRailPolishedStyle(config.components.editor.style)) {
-    if (
-      plainRenderedText(interior[0] ?? "").trim() !== "" ||
-      plainRenderedText(interior.at(-2) ?? "").trim() !== "" ||
-      !(interior.at(-1) ?? "").startsWith(" ")
-    )
-      return undefined;
-
-    const { prompt, promptWidth } = getEditorChromeWidths(
-      config,
-      uiTheme,
-      "\x1b[0m",
-    );
-    const continuation = " ".repeat(promptWidth);
-    const content = interior.slice(1, -2);
-    const unwrapped: string[] = [];
-    for (let index = 0; index < content.length; index++) {
-      const prefix = index === 0 ? prompt : continuation;
-      const line = content[index] ?? "";
-      if (prefix && !line.startsWith(prefix)) return undefined;
-      unwrapped.push(prefix ? line.slice(prefix.length) : line);
-    }
-    return { editorLines: unwrapped, viewport };
-  }
-
   const { rail } = getEditorChromeWidths(config, uiTheme, "\x1b[0m");
   if (!rail || interior.some((line) => !line.startsWith(rail)))
     return undefined;
@@ -569,65 +487,6 @@ function readVimStatus(
   return safeThemeFg(uiTheme, vimModeColor(normalized), label);
 }
 
-function renderAccentRailFrameFromBase({
-  width,
-  baseRendered,
-  autocompleteSource,
-  autocompleteCapture,
-  uiTheme,
-  config,
-  ownedFrame,
-  trustedBaseFrame = false,
-}: AccentRailFrameAdapterOptions): PolishedFrameResult {
-  if (width < ACCENT_RAIL_CHROME_WIDTH + 1 || baseRendered.length < 2) {
-    return { lines: clampRenderedLines(baseRendered, width), decorated: false };
-  }
-  if (ownedFrame && !isPolishedFrameSplit(ownedFrame, baseRendered.length)) {
-    return { lines: clampRenderedLines(baseRendered, width), decorated: false };
-  }
-  const autocomplete = ownedFrame
-    ? { known: true as const, count: ownedFrame.trailingLines.length }
-    : autocompleteCount(autocompleteSource, autocompleteCapture, baseRendered);
-  if (!autocomplete.known) {
-    return { lines: clampRenderedLines(baseRendered, width), decorated: false };
-  }
-  const editorFrame =
-    !ownedFrame && autocomplete.count > 0
-      ? baseRendered.slice(0, -autocomplete.count)
-      : baseRendered;
-  const autocompleteLines = ownedFrame
-    ? ownedFrame.trailingLines
-    : autocomplete.count > 0
-      ? baseRendered.slice(-autocomplete.count)
-      : [];
-  if (editorFrame.length < 2) {
-    return { lines: clampRenderedLines(baseRendered, width), decorated: false };
-  }
-  const parsedTop = parseEditorBorder(editorFrame[0] ?? "", "above");
-  const parsedBottom = parseEditorBorder(editorFrame.at(-1) ?? "", "below");
-  if (!ownedFrame && !trustedBaseFrame && (!parsedTop || !parsedBottom)) {
-    return { lines: clampRenderedLines(baseRendered, width), decorated: false };
-  }
-  const editorLines = ownedFrame?.editorLines ?? editorFrame.slice(1, -1);
-  const viewport = ownedFrame?.viewport ?? {
-    above: parsedTop?.count,
-    below: parsedBottom?.count,
-  };
-  const lines = renderAccentRailEditorFrame({
-    width,
-    editorLines,
-    autocompleteLines,
-    viewport,
-    uiTheme,
-    config,
-  });
-  POLISHED_FRAME_SPLITS.set(lines, {
-    rows: Object.freeze([...lines]),
-    split: { editorLines, trailingLines: autocompleteLines, viewport },
-  });
-  return { lines, decorated: true };
-}
-
 function renderMinimalistFrameFromBase({
   width,
   baseRendered,
@@ -784,16 +643,10 @@ export function renderPolishedEditorFrame({
   if (width <= 2) return clampRenderedLines(editorLines, width);
   const reset = "\x1b[0m";
   const colorSource = config.components.editor.colorSource;
-  const { prompt, promptWidth, rail, railWidth } = getEditorChromeWidths(
-    config,
-    uiTheme,
-    reset,
-  );
+  const { rail, railWidth } = getEditorChromeWidths(config, uiTheme, reset);
   const innerWidth = Math.max(0, width - railWidth);
-  const lowRailContinuation = " ".repeat(promptWidth);
   const meta = renderEditorMetadataFormat(
-    selectedPolishedConfig(config)?.metadataFormat ??
-      config.components.editor.styles.opencode.metadataFormat,
+    config.components.editor.styles.opencode.metadataFormat,
     {
       model: modelMeta.modelLabel,
       modelId: modelMeta.modelId ?? "",
@@ -805,11 +658,6 @@ export function renderPolishedEditorFrame({
     uiTheme,
     config,
   );
-  const lowRailMeta = composeMetadataLine(
-    meta,
-    rightStatus,
-    Math.max(0, width - 1),
-  );
   const railedMeta = composeMetadataLine(meta, rightStatus, innerWidth);
 
   const renderStaticBorder = (text: string) =>
@@ -849,7 +697,7 @@ export function renderPolishedEditorFrame({
     ),
   );
   const completionLines =
-    selectedPolishedConfig(config)?.completionMenu === "palette"
+    config.components.editor.styles.opencode.completionMenu === "palette"
       ? renderCompletionPalette({
           lines: autocompleteLines,
           width,
@@ -859,25 +707,12 @@ export function renderPolishedEditorFrame({
         })
       : autocompleteLines;
   const lines = ["", ...editorLines, "", railedMeta];
-  const renderedLines = isLowRailPolishedStyle(config.components.editor.style)
-    ? [
-        top,
-        "",
-        ...editorLines.map(
-          (line, index) =>
-            `${index === 0 ? prompt : lowRailContinuation}${fillLine(line, innerWidth)}`,
-        ),
-        "",
-        ` ${truncateToWidth(lowRailMeta, Math.max(0, width - 1), "")}`,
-        bottom,
-        ...completionLines,
-      ]
-    : [
-        top,
-        ...lines.map((line) => `${rail}${fillLine(line, innerWidth)}`),
-        bottom,
-        ...completionLines,
-      ];
+  const renderedLines = [
+    top,
+    ...lines.map((line) => `${rail}${fillLine(line, innerWidth)}`),
+    bottom,
+    ...completionLines,
+  ];
 
   return clampRenderedLines(renderedLines, width);
 }
@@ -921,36 +756,6 @@ export class PolishedEditor extends CustomEditor {
       this.reportMinimalistDecoration(false);
       return clampRenderedLines(super.render(width), width);
     }
-    if (config.components.editor.style === "accent-rail") {
-      this.reportMinimalistDecoration(false);
-      if (width < ACCENT_RAIL_CHROME_WIDTH + 1) {
-        return clampRenderedLines(super.render(width), width);
-      }
-      let captured: { value: string[]; capture?: AutocompleteCapture };
-      try {
-        captured = renderWithAutocompleteCapture(
-          this as unknown as AutocompleteEditorInternals,
-          () => super.render(width - ACCENT_RAIL_CHROME_WIDTH),
-        );
-      } catch {
-        return clampRenderedLines(super.render(width), width);
-      }
-      try {
-        const result = renderAccentRailFrameFromBase({
-          width,
-          baseRendered: captured.value,
-          autocompleteSource: this as unknown as AutocompleteEditorInternals,
-          autocompleteCapture: captured.capture,
-          uiTheme: this.uiTheme,
-          config,
-          trustedBaseFrame: true,
-        });
-        if (result.decorated) return result.lines;
-      } catch {
-        // Decoration is optional; preserve the completed same-render rows below.
-      }
-      return clampRenderedLines(captured.value, width);
-    }
     if (config.components.editor.style === "minimalist") {
       if (width <= 4) {
         this.reportMinimalistDecoration(false);
@@ -1155,43 +960,6 @@ export class WrappedPolishedEditor implements EditorComponent {
       this.reportMinimalistDecoration(false);
       return clampRenderedLines(this.base.render(width), width);
     }
-    if (config.components.editor.style === "accent-rail") {
-      this.reportMinimalistDecoration(false);
-      if (width < ACCENT_RAIL_CHROME_WIDTH + 1) {
-        return clampRenderedLines(this.base.render(width), width);
-      }
-      let captured: { value: string[]; capture?: AutocompleteCapture };
-      try {
-        captured = renderWithAutocompleteCapture(this.base, () =>
-          this.base.render(width - ACCENT_RAIL_CHROME_WIDTH),
-        );
-      } catch {
-        return clampRenderedLines(this.base.render(width), width);
-      }
-      try {
-        const provenance = inspectPolishedFrameProvenance(
-          this.base,
-          captured.value,
-          config,
-          this.uiTheme,
-        );
-        if (provenance.safe) {
-          const result = renderAccentRailFrameFromBase({
-            width,
-            baseRendered: captured.value,
-            autocompleteSource: this.base,
-            autocompleteCapture: captured.capture,
-            uiTheme: this.uiTheme,
-            config,
-            ownedFrame: provenance.ownedFrame,
-          });
-          if (result.decorated) return result.lines;
-        }
-      } catch {
-        // Decoration is optional; preserve the completed same-render rows below.
-      }
-      return clampRenderedLines(captured.value, width);
-    }
     if (config.components.editor.style === "minimalist") {
       if (width <= 4) {
         this.reportMinimalistDecoration(false);

package/extensions/layouts/working-line/interaction-summary.ts

@@ -10,6 +10,7 @@ import { isSafeSgrStylePrefix } from "../../shared/style.ts";
 import { renderWorkingLineHigh } from "./working-line.ts";
 
 export const TURN_SUMMARY_ENTRY_TYPE = "zentui-turn-summary";
+export const MIN_OUTPUT_RATE_WINDOW_MS = 500;
 const TURN_SUMMARY_VERSION = 3;
 const SGR_RESET = "\x1b[0m";
 
@@ -18,6 +19,7 @@ export type LiveTokenDisplay = Readonly<{
   input: number;
   output: number;
   outputApproximate: boolean;
+  outputTokensPerSecond?: number;
 }>;
 export type ThoughtSnapshot = Readonly<{ durationMs: number; active: boolean }>;
 
@@ -70,6 +72,8 @@ type ResponseState = {
   outputAnchor: number;
   outputAnchorCodePoints: number;
   liveOutputFloor: number;
+  startedAt: number;
+  outputTokensPerSecond?: number;
   lastDisplay?: LiveTokenDisplay;
   estimateIncomplete: boolean;
   estimateEnabled: boolean;
@@ -515,7 +519,7 @@ export class InteractionMetricsTracker {
       this.commitSnapshot(run, run.response);
       this.closeResponse(run, run.response, now);
     }
-    this.openResponse(run);
+    this.openResponse(run, now);
   }
 
   messageUpdate(
@@ -549,7 +553,7 @@ export class InteractionMetricsTracker {
         contentChanged = this.applyContentEvent(response, validated);
     }
     const usageChanged = tokens ? this.applyLiveUsage(response, tokens) : false;
-    const display = this.liveDisplay(response);
+    const display = this.liveDisplay(response, now);
     const displayChanged = !this.sameDisplay(response.lastDisplay, display);
     response.lastDisplay = display;
     return {
@@ -570,20 +574,31 @@ export class InteractionMetricsTracker {
     if (response.responseIdKey && key && response.responseIdKey !== key)
       return { status: "rejected" };
     if (!response.responseIdKey && key) response.responseIdKey = key;
-    const preCloseDisplay = this.liveDisplay(response);
     let source: "final" | "last-snapshot" | "no-snapshot";
     if (tokens) {
       response.snapshot = tokens;
       response.hasSnapshot = true;
+      this.updateOutputRate(response, tokens.output, now);
       source = "final";
     } else source = response.hasSnapshot ? "last-snapshot" : "no-snapshot";
+    const preCloseDisplay = this.liveDisplay(
+      response,
+      tokens ? undefined : now,
+    );
     this.commitSnapshot(run, response);
     const committed = this.totalTokens();
     const preserveEstimate =
       source !== "final" && response.lastDisplay?.outputApproximate === true;
+    const outputRate = preCloseDisplay.outputTokensPerSecond;
     const displayTokens = preserveEstimate
       ? { ...preCloseDisplay, outputApproximate: true }
-      : { ...committed, outputApproximate: false };
+      : {
+          ...committed,
+          outputApproximate: false,
+          ...(outputRate === undefined
+            ? {}
+            : { outputTokensPerSecond: outputRate }),
+        };
     run.lastClosedDisplay = preserveEstimate ? displayTokens : undefined;
     this.closeResponse(run, response, now);
     return { status: "accepted", tokens: committed, displayTokens, source };
@@ -770,7 +785,11 @@ export class InteractionMetricsTracker {
     );
   }
 
-  private openResponse(run: RunState, key?: string): ResponseState {
+  private openResponse(
+    run: RunState,
+    now: number,
+    key?: string,
+  ): ResponseState {
     run.responseOrdinal = safeAdd(run.responseOrdinal, 1);
     run.lastClosedDisplay = undefined;
     const estimateEnabled =
@@ -787,6 +806,7 @@ export class InteractionMetricsTracker {
       outputAnchor: 0,
       outputAnchorCodePoints: 0,
       liveOutputFloor: 0,
+      startedAt: safeTime(now),
       estimateIncomplete: !estimateEnabled,
       estimateEnabled,
     };
@@ -996,7 +1016,7 @@ export class InteractionMetricsTracker {
     return true;
   }
 
-  private liveDisplay(response: ResponseState): LiveTokenDisplay {
+  private liveDisplay(response: ResponseState, now?: number): LiveTokenDisplay {
     const committed = this.committedTokens();
     const postAnchorCodePoints = Math.max(
       0,
@@ -1013,6 +1033,8 @@ export class InteractionMetricsTracker {
       responseOutput === response.outputAnchor &&
       !response.estimateIncomplete;
     response.liveOutputFloor = responseOutput;
+    if (now !== undefined) this.updateOutputRate(response, responseOutput, now);
+    const outputRate = response.outputTokensPerSecond;
     return {
       input: safeAdd(
         committed.input,
@@ -1020,9 +1042,26 @@ export class InteractionMetricsTracker {
       ),
       output: safeAdd(committed.output, responseOutput),
       outputApproximate: !exactCoverage,
+      ...(outputRate === undefined
+        ? {}
+        : { outputTokensPerSecond: outputRate }),
     };
   }
 
+  private updateOutputRate(
+    response: ResponseState,
+    responseOutput: number,
+    now: number,
+  ): void {
+    const elapsedMs = durationMs(response.startedAt, now);
+    const rate =
+      elapsedMs >= MIN_OUTPUT_RATE_WINDOW_MS && responseOutput > 0
+        ? Math.min(Number.MAX_SAFE_INTEGER, (responseOutput * 1000) / elapsedMs)
+        : undefined;
+    response.outputTokensPerSecond =
+      rate !== undefined && rate >= 0.1 ? rate : undefined;
+  }
+
   private runTokens(run: RunState): InteractionTokens {
     return run.response?.hasSnapshot
       ? addTokens(run.committed, run.response.snapshot)
@@ -1104,7 +1143,8 @@ export class InteractionMetricsTracker {
     return (
       left?.input === right?.input &&
       left?.output === right?.output &&
-      left?.outputApproximate === right?.outputApproximate
+      left?.outputApproximate === right?.outputApproximate &&
+      left?.outputTokensPerSecond === right?.outputTokensPerSecond
     );
   }
 }