@visual-z/xeno 0.8.0 → 0.8.2

package/src/tui/ui/screen.ts

@@ -31,8 +31,9 @@ import { screenLayout, sidebarContentWidth, type ScreenLayout } from "./layout.t
 import { greetingLines, mascotFrame, MASCOT_FRAME_MS, MASCOT_FRAMES, type Greeting } from "./mascot.ts";
 import { MessageList, type MessageFeatures } from "./messages.ts";
 import { Motion } from "./motion.ts";
-import { contextLabel, modeLabels, sidebarLines, topbarRow, type Line, type StatusModel } from "./status.ts";
+import { contextLabel, goalLabel, idleActivityLabel, modeLabels, sidebarLines, speedText, topbarRow, type Line, type StatusModel } from "./status.ts";
 import { DEFAULT_CELL, stripImageRows } from "./image-size.ts";
+import { formatElapsed } from "./duration.ts";
 import { Pictures, type PictureSource } from "./pictures.ts";
 import type { ImageView, ViewItem } from "./items.ts";
 
@@ -104,6 +105,8 @@ export class Screen {
   private readonly activity = new Motion();
   private spin = 0;
   private busySince = 0;
+  /** The last turn's wall time, shown beside its outcome until the next turn starts. */
+  private lastTurnMs: number | undefined;
   private lastEvent = 0;
   private activityMs = ACTIVITY_MS;
   private animations = true;
@@ -336,7 +339,8 @@ export class Screen {
   setDock(state: DockState): void {
     const wasBusy = this.dockState.busy;
     this.dockState = state;
-    if (state.busy && !wasBusy) this.busySince = Date.now();
+    if (state.busy && !wasBusy) { this.busySince = Date.now(); this.lastTurnMs = undefined; }
+    if (!state.busy && wasBusy) this.lastTurnMs = Date.now() - this.busySince;
     this.syncActivity();
     this.paintEdges();
   }
@@ -376,11 +380,14 @@ export class Screen {
       // to recover on the existing edge, without putting control content in it.
       left = [{ segs: [{ text: "Resize for control", role: "accent" }], priority: 0, min: 1 }];
     } else if (d.busy) {
-      const seconds = Math.max(0, Math.floor((Date.now() - this.busySince) / 1000));
+      const elapsed = formatElapsed(Date.now() - this.busySince);
       const activity = this.status?.activity;
       const label = activity ? `${activity.label}${activity.label === "Running tool" || activity.label === "Retrying" ? ` · ${activity.detail}` : ""}${activity.queued ? ` · ${activity.queued} queued` : ""}` : d.activity;
       const transient = this.transientActivity ? ` · ${this.transientActivityText()}` : "";
-      left = [{ segs: [{ text: "●", role: "accent", spin: activity?.state !== "blocked" }, { text: ` ${label}${transient}`, role: activity?.state === "blocked" ? "warning" : "muted" }, { text: ` ${seconds}s`, role: "muted" }], priority: 0, min: 1, shrink: 1 }];
+      left = [{ segs: [{ text: "●", role: "accent", spin: activity?.state !== "blocked" }, { text: ` ${label}${transient}`, role: activity?.state === "blocked" ? "warning" : "muted" }, { text: ` ${elapsed}`, role: "muted" }], priority: 0, min: 1, shrink: 1 }];
+      // The turn's speed so far, refreshed after each model request (runtime/usage.ts generationSpeed).
+      const speed = this.status?.usage?.speed;
+      if (speed !== undefined) right.push({ segs: [{ text: speedText(speed), role: "muted" }], priority: 3 });
       right.push({ segs: [{ text: "esc interrupt", role: "muted" }], priority: 4 });
     } else if (this.transientActivity) {
       left = [{ segs: [{ text: "●", role: "accent", spin: true }, { text: ` ${this.transientActivityText()}`, role: "muted" }], priority: 0, min: 1, shrink: 1 }];
@@ -389,15 +396,17 @@ export class Screen {
       const { above, below } = this.composer.overflow;
       if (above) left = [{ segs: [{ text: `↑ ${above} more`, role: "muted" }], priority: 1 }];
       if (below && !this.toastText) right.push({ segs: [{ text: `↓ ${below} more`, role: "muted" }], priority: 2 });
-      if (!above && this.status?.activity) left = [{ segs: [{ text: this.status.activity.label, role: this.status.activity.state === "error" ? "error" : this.status.activity.state === "blocked" ? "warning" : "muted" }], priority: 1, min: 4 }];
+      if (!above && this.status?.activity) left = [idleActivityLabel(this.status.activity, this.lastTurnMs)];
     }
     this.topEdge.setRows([edgeLine({ width, corners: ["╭", "╮"], role, left, right })]);
     const bottomLeft: Label[] = [...(this.status ? modeLabels(this.status) : []), ...(d.model ? [
       { segs: [{ text: d.model, role: "text" as const, bold: true }], priority: 1, min: 8 },
       ...(d.thinking ? [{ segs: [{ text: d.thinking, role: "muted" as const }], priority: 2 }] : []),
     ] : [])];
+    // Without a sidebar the goal and the context share ride on this edge (layout.ts placement).
     const context = this.shape.tier !== "sidebar" && this.status ? contextLabel(this.status) : undefined;
-    this.bottomEdge.setRows([edgeLine({ width, corners: ["╰", "╯"], role, left: bottomLeft, right: context ? [context] : [] })]);
+    const goal = this.shape.tier !== "sidebar" && this.status ? goalLabel(this.status) : undefined;
+    this.bottomEdge.setRows([edgeLine({ width, corners: ["╰", "╯"], role, left: bottomLeft, right: [...(goal ? [goal] : []), ...(context ? [context] : [])] })]);
   }
 
   /** A stream event arrived (delta, tool progress, shell output): the spinner returns to full speed. */
@@ -426,9 +435,9 @@ export class Screen {
 
   private transientActivityText(): string {
     const activity = this.transientActivity!;
-    const elapsed = Math.max(0, Math.floor((Date.now() - activity.startedAt) / 1000));
-    const deadline = Math.max(1, Math.ceil(activity.timeoutMs / 1000));
-    return `${activity.label} · ${elapsed}s / ${deadline}s max${activity.detail ? ` · ${activity.detail}` : ""}`;
+    // The limit is a whole number of seconds, rounded up so it is never shown shorter than it is.
+    const deadline = Math.max(1, Math.ceil(activity.timeoutMs / 1000)) * 1000;
+    return `${activity.label} · ${formatElapsed(Date.now() - activity.startedAt)} / ${formatElapsed(deadline)} max${activity.detail ? ` · ${activity.detail}` : ""}`;
   }
 
   /** The spinner's current interval (tests). */

package/src/tui/ui/status.ts

@@ -14,6 +14,7 @@
  */
 import { clipSegs, clipText, segsWidth, splitLine, type Label, type Seg } from "./edge.ts";
 import { displayWidth } from "../width.ts";
+import { formatElapsed } from "./duration.ts";
 
 export interface ContextStatus {
   readonly used: number;
@@ -30,9 +31,13 @@ export interface StatusModel {
   readonly version: string;
   /** `/name`, else the first prompt; null for a session with neither. */
   readonly title: string | null;
-  readonly goal?: { readonly text: string; readonly status: string; readonly execution: string; readonly observations: number; readonly retries: number;
-    /** S.1: one glyph per rung (ran, tests the change, independent, human) and the reading of them, prepared by apps. */
-    readonly ladder?: { readonly glyphs: string; readonly summary: string } };
+  /**
+   * An explicit /goal, prepared by apps from the log (core/goal-view.ts). The
+   * block exists only while a goal is set, and for one message after it is met.
+   */
+  readonly goal?: GoalStatusView;
+  /** Without a goal: the latest check after this request's last edit, when it changed files. */
+  readonly checks?: { readonly status: "unchecked" | "pass" | "fail" | "stale" | "partial"; readonly command?: string; readonly exit?: number };
   readonly workspace: string;
   readonly workspaceShort: string;
   readonly branch: string | null;
@@ -41,7 +46,8 @@ export interface StatusModel {
   readonly activity?: { readonly state: string; readonly label: string; readonly detail: string; readonly queued: number };
   readonly git?: { readonly staged: number; readonly changed: number; readonly untracked: number; readonly conflicted: number; readonly ahead: number; readonly behind: number } | null;
   readonly context?: ContextStatus;
-  readonly usage?: { readonly input: number; readonly output: number; readonly cacheRate: number; readonly cost: string | null };
+  /** `speed`: output tokens per second over this turn's model requests (runtime/usage.ts generationSpeed). */
+  readonly usage?: { readonly input: number; readonly output: number; readonly cacheRate: number; readonly cost: string | null; readonly speed?: number };
   readonly tools: { readonly running: number; readonly done: number; readonly failed: number };
   readonly handoff?: { readonly verified: readonly string[]; readonly inFlight: readonly string[]; readonly unverified: readonly string[] };
   readonly tasks?: readonly { readonly what: string; readonly status: "active" | "blocked" }[];
@@ -51,6 +57,18 @@ export interface StatusModel {
   readonly extension?: string;
 }
 
+export interface GoalStatusView {
+  readonly phase: "drafting" | "working" | "needs_you" | "met" | "stopped";
+  readonly objective: string;
+  readonly elapsedMs: number;
+  readonly checks: readonly { readonly id: string; readonly kind: "command" | "human" | "fresh_check"; readonly status: string; readonly guard?: true; readonly exit?: number }[];
+  /** S.1: one glyph per rung (ran, tests the change, independent, human), prepared by apps. */
+  readonly ladder?: { readonly glyphs: string; readonly summary: string };
+  /** Model requests since the goal was set (from the log) and output tokens this process saw. */
+  readonly requests: number;
+  readonly tokens?: number;
+}
+
 export type Line = readonly Seg[];
 
 /** 1234 → "1.2k", 1234567 → "1.2m". The same compact form everywhere a token count appears. */
@@ -150,6 +168,10 @@ interface Block {
   readonly items: readonly Line[];
   /** A list block with no items is not shown at all. */
   readonly list: boolean;
+  /** Rows shown after the items, kept with the head (the goal's ladder and spend). */
+  readonly tail?: readonly Line[];
+  /** A list shown even without items: a goal being drafted has no checks yet. */
+  readonly keep?: boolean;
 }
 
 /**
@@ -160,12 +182,12 @@ interface Block {
  */
 export function sidebarLines(model: StatusModel, width: number, height: number): Line[] {
   const w = Math.max(1, Math.floor(width)), h = Math.max(0, Math.floor(height));
-  const blocks = sidebarBlocks(model, w).filter(block => !block.list || block.items.length > 0);
+  const blocks = sidebarBlocks(model, w).filter(block => !block.list || block.items.length > 0 || block.keep);
   const plan: { block: Block; rows: number }[] = [];
   let used = 0;
   for (const block of blocks) {
     const minimum = block.list ? Math.min(block.items.length, 2) : 0;
-    const need = (plan.length ? 1 : 0) + block.head.length + minimum;
+    const need = (plan.length ? 1 : 0) + block.head.length + minimum + (block.tail?.length ?? 0);
     if (used + need > h) continue;
     used += need;
     plan.push({ block, rows: minimum });
@@ -185,6 +207,7 @@ export function sidebarLines(model: StatusModel, width: number, height: number):
       out.push(...items.slice(0, entry.rows - 1));
       out.push([{ text: `+${items.length - entry.rows + 1} more`, role: "muted" }]);
     }
+    out.push(...entry.block.tail ?? []);
   });
   return out.slice(0, h).map(line => clipSegs(line, w));
 }
@@ -203,36 +226,37 @@ function sidebarBlocks(model: StatusModel, w: number): Block[] {
       ...(model.git.conflicted ? [[{ text: `${model.git.conflicted} conflicts`, role: "warning" }] as Line] : []),
       ...(model.git.ahead || model.git.behind ? [[{ text: `↑${model.git.ahead} ↓${model.git.behind}`, role: "muted" }] as Line] : [])] : model.git === null ? [[{ text: "Git unavailable", role: "muted" }] as Line] : []),
   ] });
+  const goal = model.goal;
+  if (goal) blocks.push(goalBlock(goal, w, row));
+  else if (model.checks) blocks.push({ list: false, items: [], head: [checksLine(model.checks, w)] });
   const context = model.context;
-  if (model.goal) blocks.push({ list: false, items: [], head: [
-    [{ text: "Goal", role: "text", bold: true }, { text: ` · ${model.goal.status}`, role: model.goal.status === "verified" || model.goal.status === "checked" ? "success" : model.goal.status === "not_applicable" ? "muted" : "warning" }],
-    ...(model.goal.ladder ? [[{ text: model.goal.ladder.glyphs, role: "text" }] as Line,
-      ...wrap(model.goal.ladder.summary, w, 2).map(text => [{ text, role: "muted" }] as Line)] : []),
-    ...wrap(firstLine(model.goal.text), w, 2).map(text => [{ text, role: "text" }] as Line),
-    [{ text: model.goal.execution, role: "muted" }],
-    [{ text: `${model.goal.observations} observations · ${model.goal.retries} retries`, role: "muted" }],
-    [{ text: "/control · goal, evidence, context", role: "muted" }],
-  ] });
   if (context) {
     const share = contextShare(context), est = context.estimated ? "~" : "";
     const filled = share === undefined ? 0 : Math.max(share > 0 ? 1 : 0, Math.round(share * w));
     const tone = share !== undefined && share >= CONTEXT_WARNING ? "warning" : "accent";
     const shareText = shareSeg(context);
+    // Two budgets, each named: the segment cut (what the bar shows) and the model window. Both shares
+    // ride on the heading, both denominators on one row below the bar.
+    const modelShare = context.window && context.trigger !== null ? `${est}${Math.round(context.used / context.window * 100)}%` : undefined;
+    const segment = context.trigger !== null ? `seg ${est}${compact(context.used)} / ${est}${compact(context.trigger)}` : `${est}${compact(context.used)} · no cut`;
     blocks.push({ list: false, items: [], head: [
-      row([{ text: "Context", role: "text", bold: true }], shareText ? [{ text: context.trigger === null ? "model " : "seg ", role: "muted" }, shareText] : []),
+      row([{ text: "Context", role: "text", bold: true }], [
+        ...(shareText ? [{ text: context.trigger === null ? "model " : "seg ", role: "muted" as const }, shareText] : []),
+        ...(modelShare ? [{ text: ` · model ${modelShare}`, role: "muted" as const }] : [])]),
       ...(share === undefined ? [] : [[{ text: "━".repeat(filled), role: tone }, { text: "─".repeat(Math.max(0, w - filled)), role: "line" }] as Line]),
-      [{ text: `Segment ${est}${compact(context.used)}${context.trigger !== null ? ` / ${est}${compact(context.trigger)}` : " · cut disabled"}`, role: "text" }],
-      [{ text: context.window ? `Model ${est}${compact(context.used)} / ${compact(context.window)} · ${est}${Math.round(context.used / context.window * 100)}%` : "Model window unknown", role: "muted" }],
-      [{ text: `node ${context.segment}`, role: "muted" }],
+      row([{ text: segment, role: "muted" }], [{ text: context.window ? `model ${compact(context.window)}` : "window unknown", role: "muted" }]),
     ] });
   }
   const usage = model.usage, tools = model.tools;
   const toolCount = tools.done + tools.failed + tools.running;
   if (usage || toolCount) {
+    const figures = usage ? [`↑${compact(usage.input)} ↓${compact(usage.output)}`, `cache ${Math.round(usage.cacheRate * 100)}%`,
+      ...(usage.speed !== undefined ? [speedText(usage.speed)] : [])].join(" · ") : "";
+    // Heading with the cost; one row of figures below it. Together they need about 49 columns, more than the 34-42 the sidebar has.
     blocks.push({ list: false, items: [], head: [
       row([{ text: "Usage", role: "text", bold: true }], usage?.cost ? [{ text: usage.cost, role: "text" }] : []),
-      ...(usage ? [[{ text: `↑${compact(usage.input)} ↓${compact(usage.output)}`, role: "text" }, { text: `  cache ${Math.round(usage.cacheRate * 100)}%`, role: "muted" }] as Line] : []),
-      ...(toolCount ? [[
+      ...(figures ? [[{ text: figures, role: "muted" }] as Line] : []),
+      ...(tools.failed || tools.running ? [[
         { text: `${tools.done} done`, role: "muted" },
         ...(tools.failed ? [{ text: " · ", role: "muted" as const }, { text: `${tools.failed} failed`, role: "error" as const }] : []),
         ...(tools.running ? [{ text: " · ", role: "muted" as const }, { text: `${tools.running} running`, role: "accent" as const }] : []),
@@ -270,6 +294,60 @@ function sidebarBlocks(model: StatusModel, w: number): Block[] {
   return blocks;
 }
 
+/** `42 tok/s`; under 10 one decimal, so a slow upstream does not read as zero. */
+export function speedText(speed: number): string {
+  return `${speed < 10 ? speed.toFixed(1) : Math.round(speed)} tok/s`;
+}
+
+const PHASE: Record<GoalStatusView["phase"], { label: string; role: Seg["role"] }> = {
+  drafting: { label: "drafting", role: "accent" }, working: { label: "working", role: "accent" },
+  needs_you: { label: "needs you", role: "warning" }, met: { label: "met", role: "success" }, stopped: { label: "stopped", role: "warning" },
+};
+
+/**
+ * `Goal · needs you   4m 12s`, the objective, one row per accepted check with
+ * what it needs, the evidence ladder and what the goal has spent. A met goal
+ * is one summary row. The sidebar may cut the checks; a cut ends in "+N more".
+ */
+function goalBlock(goal: GoalStatusView, w: number, row: (left: readonly Seg[], right?: readonly Seg[]) => Line): Block {
+  const phase = PHASE[goal.phase];
+  const passed = goal.checks.filter(check => check.status === "pass" || check.status === "accepted").length;
+  const elapsed = goal.phase === "drafting" ? [] : [{ text: formatElapsed(goal.elapsedMs), role: "muted" as const }];
+  const title = [{ text: "Goal", role: "text" as const, bold: true }, { text: ` · ${phase.label}`, role: phase.role }];
+  if (goal.phase === "met") return { list: false, items: [], head: [row(title, [{ text: `${passed}/${goal.checks.length} · `, role: "muted" }, ...elapsed])] };
+  const items = goal.checks.map(check => {
+    const done = check.status === "pass" || check.status === "accepted";
+    const glyph: Seg = done ? { text: "✓ ", role: "success" } : check.status === "fail" ? { text: "✗ ", role: "error" } : { text: "○ ", role: "muted" };
+    const need = check.kind === "human" && !done ? `/accept ${check.id}` : check.status === "fail" && check.exit !== undefined ? `exit ${check.exit}`
+      : check.status === "stale" ? "rerun" : check.guard ? "guard" : "";
+    return row([glyph, { text: check.id, role: "text" }], need ? [{ text: need, role: check.kind === "human" && !done ? "warning" : "muted" }] : []);
+  });
+  const spent = [`${goal.requests} ${goal.requests === 1 ? "request" : "requests"}`, ...(goal.tokens ? [`${compact(goal.tokens)} tokens this run`] : [])].join(" · ");
+  return { list: true, keep: true, head: [row(title, elapsed), ...wrap(firstLine(goal.objective), w, 2).map(text => [{ text, role: "text" }] as Line)],
+    items, ...(goal.phase === "drafting" ? {} : { tail: [...(goal.ladder ? [[{ text: goal.ladder.glyphs, role: "text" }] as Line] : []), [{ text: spent, role: "muted" }] as Line] }) };
+}
+
+/** Without a goal: whether a check has passed since this request's last edit. */
+function checksLine(checks: NonNullable<StatusModel["checks"]>, w: number): Line {
+  if (checks.status === "unchecked" || !checks.command) return [{ text: "Checks", role: "text", bold: true }, { text: " · not run since last edit", role: "warning" }];
+  // partial: some of a declared contract holds; the rest may only be waiting for the user, so it is not a failure mark.
+  const mark: Seg[] = checks.status === "pass" ? [{ text: " ✓", role: "success" }] : checks.status === "partial" ? []
+    : checks.status === "fail" ? [{ text: " ✗", role: "error" }, ...(checks.exit === undefined ? [] : [{ text: ` exit ${checks.exit}`, role: "muted" as const }])]
+    : [{ text: " stale", role: "warning" }];
+  const room = Math.max(1, w - segsWidth(mark) - "Checks · ".length);
+  return [{ text: "Checks", role: "text", bold: true }, { text: ` · ${clipText(checks.command, room)}`, role: "muted" }, ...mark];
+}
+
+/** Without a sidebar the goal rides on the input box's bottom edge: `goal 2/3 · needs you · 4m 12s`. */
+export function goalLabel(model: StatusModel): Label | undefined {
+  const goal = model.goal;
+  if (!goal) return undefined;
+  const passed = goal.checks.filter(check => check.status === "pass" || check.status === "accepted").length;
+  const parts = [`goal ${goal.phase === "drafting" ? "" : `${passed}/${goal.checks.length} · `}${PHASE[goal.phase].label}`,
+    ...(goal.phase === "drafting" ? [] : [formatElapsed(goal.elapsedMs)])];
+  return { segs: [{ text: parts.join(" · "), role: goal.phase === "needs_you" ? "warning" : "muted" }], priority: 2, min: 8 };
+}
+
 function fileLine(file: FileStatus, w: number): Line {
   const name = file.path.split("/").pop() || file.path;
   const counts: Seg[] = file.edited && (file.added || file.removed)
@@ -307,3 +385,19 @@ export function wrap(text: string, width: number, lines: number): string[] {
   kept[lines - 1] = `${displayWidth(last) + 1 <= w ? last : cells(last, w - 1).trimEnd()}…`;
   return kept;
 }
+
+/**
+ * The input box's top-edge label while no turn runs: the outcome in its own
+ * colour, then how long the last turn took (Codex "Worked for 2m 5s", Claude
+ * Code "Cooked for 1m 6s"). A plain grey "Turn finished" read the same as
+ * "nothing happened" (fix-finished-turn-status).
+ */
+export function idleActivityLabel(activity: NonNullable<StatusModel["activity"]>, turnMs?: number): Label {
+  const tone = activity.state === "done" ? { glyph: "✓", role: "success" as const }
+    : activity.state === "error" ? { glyph: "✗", role: "error" as const }
+    : activity.state === "blocked" ? { glyph: activity.label === "Stopped" ? "■" : "", role: "warning" as const }
+    : { glyph: "", role: "muted" as const };
+  const text = activity.label === "Stopped" && activity.detail ? `Stopped · ${activity.detail}` : activity.label;
+  return { segs: [...(tone.glyph ? [{ text: tone.glyph, role: tone.role }, { text: " ", role: "muted" as const }] : []), { text, role: tone.role },
+    ...(turnMs !== undefined ? [{ text: ` · ${formatElapsed(turnMs)}`, role: "muted" as const }] : [])], priority: 1, min: 4, shrink: tone.glyph ? 2 : 0 };
+}