@zachwill/pi-orchestrate 0.8.0 → 0.9.2

package/extension/presentation.ts

@@ -17,7 +17,13 @@ import {
 import { Result } from "effect";
 import type { WorkerDeliveryDetails } from "./delivery.js";
 import type { WorkerOutcome, WorkerRecord, WorkerStatus } from "./domain.js";
-import type { OrchestratorRuntime, RuntimeSnapshot } from "./runtime.js";
+import type { RuntimeSnapshot } from "./runtime.js";
+import {
+  disposeComponent,
+  formatElapsed,
+  resultAppearance,
+  WidthBoundComponent,
+} from "./tui.js";
 import {
   decodePersistedWorkerSettlementDetails,
   type WorkerSettlementDetails,
@@ -45,9 +51,12 @@ const ANIMATION_CYCLE_TICKS = 40;
 const SPINNER_INTERVAL_MS = 140;
 const ACTIVE_STATUSES: ReadonlySet<WorkerStatus> = new Set(["starting", "running", "stopping"]);
 
-export type PresentationRuntime = Pick<OrchestratorRuntime, "snapshot" | "subscribeState">;
-
-type DecodedSettlement = WorkerSettlementDetails;
+export interface PresentationRuntime {
+  subscribeState(
+    ownerSessionId: string,
+    listener: (snapshot: RuntimeSnapshot) => void,
+  ): () => void;
+}
 
 interface StatusBinding {
   readonly ownerSessionId: string;
@@ -71,86 +80,67 @@ export function formatFooterStatus(snapshot: RuntimeSnapshot): string | undefine
 
 export class StatusController {
   private binding: StatusBinding | undefined;
-  private bindingGeneration = 0;
-  private refreshGeneration = 0;
   private disposed = false;
   private unsubscribeState: (() => void) | undefined;
   private widget: WorkerStatusComponent | undefined;
-  private widgetInstalled = false;
-  private pendingSnapshot: RuntimeSnapshot | undefined;
 
   constructor(private readonly runtime: PresentationRuntime) {}
 
   bind(ownerSessionId: string, ctx: ExtensionContext): void {
     if (this.disposed) return;
     this.clearBinding();
-    this.bindingGeneration += 1;
-    this.binding = { ownerSessionId, ctx };
-    this.unsubscribeState = this.runtime.subscribeState((changedOwner) => {
-      if (changedOwner === this.binding?.ownerSessionId) void this.refresh();
+    const binding = { ownerSessionId, ctx };
+    this.binding = binding;
+    this.unsubscribeState = this.runtime.subscribeState(ownerSessionId, (snapshot) => {
+      if (this.binding !== binding) return;
+      this.present(binding.ctx, snapshot);
     });
-    void this.refresh();
   }
 
   unbind(ownerSessionId?: string): void {
     if (ownerSessionId !== undefined && ownerSessionId !== this.binding?.ownerSessionId) return;
     this.clearBinding();
-    this.bindingGeneration += 1;
-    this.refreshGeneration += 1;
-  }
-
-  async refresh(): Promise<void> {
-    const binding = this.binding;
-    if (!binding || this.disposed) return;
-    const bindingGeneration = this.bindingGeneration;
-    const refreshGeneration = ++this.refreshGeneration;
-    let snapshot: RuntimeSnapshot;
-    try { snapshot = await this.runtime.snapshot(binding.ownerSessionId); } catch { return; }
-    if (this.disposed || this.binding !== binding || this.bindingGeneration !== bindingGeneration || this.refreshGeneration !== refreshGeneration) return;
-    this.present(binding.ctx, snapshot);
   }
 
   dispose(): void {
     if (this.disposed) return;
     this.disposed = true;
     this.clearBinding();
-    this.bindingGeneration += 1;
-    this.refreshGeneration += 1;
   }
 
   private present(ctx: ExtensionContext, snapshot: RuntimeSnapshot): void {
     ctx.ui.setStatus(ORCHESTRATION_PRESENTATION_KEY, formatFooterStatus(snapshot));
     if (ctx.mode !== "tui") return;
     const active = activeWorkers(snapshot);
-    this.pendingSnapshot = snapshot;
     if (active.length === 0) {
-      if (this.widgetInstalled) ctx.ui.setWidget(ORCHESTRATION_PRESENTATION_KEY, undefined);
-      this.widget = undefined;
-      this.widgetInstalled = false;
+      if (this.widget !== undefined) {
+        ctx.ui.setWidget(ORCHESTRATION_PRESENTATION_KEY, undefined);
+        this.widget = undefined;
+      }
       return;
     }
-    if (this.widget) {
+    if (this.widget !== undefined) {
       this.widget.update(snapshot);
       return;
     }
-    if (this.widgetInstalled) return;
     ctx.ui.setWidget(ORCHESTRATION_PRESENTATION_KEY, (tui, theme) => {
-      this.widget = new WorkerStatusComponent(this.pendingSnapshot ?? snapshot, theme, tui);
-      return this.widget;
+      const widget = new WorkerStatusComponent(snapshot, theme, tui);
+      this.widget = widget;
+      return widget;
     }, { placement: "aboveEditor" });
-    this.widgetInstalled = true;
   }
 
   private clearBinding(): void {
-    this.unsubscribeState?.();
+    const unsubscribeState = this.unsubscribeState;
     this.unsubscribeState = undefined;
-    this.widget = undefined;
-    this.pendingSnapshot = undefined;
+    unsubscribeState?.();
     const current = this.binding;
     if (!current) return;
     current.ctx.ui.setStatus(ORCHESTRATION_PRESENTATION_KEY, undefined);
-    if (current.ctx.mode === "tui" && this.widgetInstalled) current.ctx.ui.setWidget(ORCHESTRATION_PRESENTATION_KEY, undefined);
-    this.widgetInstalled = false;
+    if (current.ctx.mode === "tui" && this.widget !== undefined) {
+      current.ctx.ui.setWidget(ORCHESTRATION_PRESENTATION_KEY, undefined);
+      this.widget = undefined;
+    }
     this.binding = undefined;
   }
 }
@@ -235,18 +225,6 @@ export class WorkerStatusComponent implements Component {
   }
 }
 
-class WidthBoundComponent implements Component {
-  constructor(private readonly child: Component, private readonly maxLines?: number) {}
-  render(width: number): string[] {
-    const bounded = Math.max(1, Math.floor(width));
-    const lines = this.child.render(bounded);
-    const selected = this.maxLines === undefined ? lines : lines.slice(0, this.maxLines);
-    return selected.map((line) => truncateToWidth(line, bounded, "…"));
-  }
-  invalidate(): void { this.child.invalidate(); }
-  dispose(): void { (this.child as Component & { dispose?: () => void }).dispose?.(); }
-}
-
 export class WorkerResultComponent implements Component {
   private child: Component;
 
@@ -261,10 +239,10 @@ export class WorkerResultComponent implements Component {
 
   render(width: number): string[] { return new WidthBoundComponent(this.child).render(width); }
   invalidate(): void {
-    (this.child as Component & { dispose?: () => void }).dispose?.();
+    disposeComponent(this.child);
     this.child = this.build();
   }
-  dispose(): void { (this.child as Component & { dispose?: () => void }).dispose?.(); }
+  dispose(): void { disposeComponent(this.child); }
 
   private build(): Component {
     const details = readSettlement(this.rawDetails);
@@ -276,16 +254,19 @@ export class WorkerResultComponent implements Component {
       return box;
     }
 
-    const color = resultColor(details.status);
-    const elapsed = elapsedBetween(details.startedAt, details.settledAt);
-    const qualifier = resultQualifier(details);
+    const appearance = resultAppearance(
+      details.status,
+      "interactive ready",
+      details.failureStage === "startup" ? "could not start" : "failed",
+    );
+    const elapsed = formatElapsed(details.settledAt - details.startedAt);
     const title = this.theme.bold(details.title);
     const workerName = this.theme.fg("muted", this.theme.italic(details.worker));
-    const suffix = [qualifier, elapsed].filter(Boolean).join(" · ");
+    const suffix = [appearance.qualifier, elapsed].filter(Boolean).join(" · ");
     const header = [
-      this.theme.fg(color, `${statusIcon(details)} ${title}`),
+      this.theme.fg(appearance.color, `${appearance.icon} ${title}`),
       workerName,
-      ...(suffix ? [this.theme.fg(color, suffix)] : []),
+      ...(suffix ? [this.theme.fg(appearance.color, suffix)] : []),
     ].join(" · ");
     const outcome = presentedOutcome(details);
     box.addChild(new Text(header, 0, 0));
@@ -308,7 +289,7 @@ export class WorkerResultComponent implements Component {
   }
 }
 
-function readSettlement(value: unknown): DecodedSettlement | undefined {
+function readSettlement(value: unknown): WorkerSettlementDetails | undefined {
   const decoded = decodePersistedWorkerSettlementDetails(value);
   return Result.isSuccess(decoded) ? decoded.success : undefined;
 }
@@ -319,28 +300,6 @@ function workerAnimation(status: WorkerStatus) {
   return WORKER_ANIMATIONS.running;
 }
 
-function resultColor(status: DecodedSettlement["status"]): "success" | "error" | "warning" {
-  if (status === "failed") return "error";
-  if (status === "aborted") return "warning";
-  return "success";
-}
-
-function resultQualifier(result: DecodedSettlement): string | undefined {
-  if (result.status === "aborted") return "aborted";
-  if (result.status === "failed" && result.failureStage === "startup") {
-    return "could not start";
-  }
-  if (result.status === "failed") return "failed";
-  if (result.status === "ready") return "interactive ready";
-  return undefined;
-}
-
-function statusIcon(result: DecodedSettlement): string {
-  if (result.status === "failed") return "✗";
-  if (result.status === "aborted") return "■";
-  return "✓";
-}
-
 function outcomeText(outcome: WorkerOutcome): string {
   if (outcome.status === "completed" || outcome.status === "ready") return outcome.assistantText;
   if (outcome.status === "failed") return outcome.assistantText ? `${outcome.message}\n\n${outcome.assistantText}` : outcome.message;
@@ -348,7 +307,7 @@ function outcomeText(outcome: WorkerOutcome): string {
   return "Worker session closed.";
 }
 
-function presentedOutcome(result: DecodedSettlement): string {
+function presentedOutcome(result: WorkerSettlementDetails): string {
   const body = outcomeText(result.outcome);
   if (result.status !== "completed" && result.status !== "ready") return body;
 
@@ -363,12 +322,12 @@ function presentedOutcome(result: DecodedSettlement): string {
   return lines.join("\n").trimEnd();
 }
 
-function settlementMetadata(result: DecodedSettlement): string[] {
+function settlementMetadata(result: WorkerSettlementDetails): string[] {
   return [
     `worker ID ${result.workerId} · run ID ${result.runId}`,
     `status ${result.status} · generation ${result.generation}`,
-    `turns ${numberOrZero(result.usage.turns)} · current context ${formatCompactNumber(numberOrZero(result.usage.contextTokens))}`,
-    `input ${numberOrZero(result.usage.input)} · output ${numberOrZero(result.usage.output)} · cache read ${numberOrZero(result.usage.cacheRead)} · cache write ${numberOrZero(result.usage.cacheWrite)} · cost $${numberOrZero(result.usage.cost).toFixed(4)}`,
+    `turns ${result.usage.turns} · current context ${formatCompactNumber(result.usage.contextTokens)}`,
+    `input ${result.usage.input} · output ${result.usage.output} · cache read ${result.usage.cacheRead} · cache write ${result.usage.cacheWrite} · cost $${result.usage.cost.toFixed(4)}`,
     `session ${result.sessionFile ?? "unavailable"}`,
   ];
 }
@@ -387,15 +346,6 @@ function formatTurnMarker(worker: Pick<WorkerRecord, "messageDirection" | "usage
   const direction = worker.messageDirection === "from-model" ? "↓" : "↑";
   return `${numberOrZero(worker.usage?.turns)}${direction}`;
 }
-function elapsedBetween(start?: number, end?: number): string | undefined {
-  return start !== undefined && end !== undefined && end >= start ? formatElapsed(end - start) : undefined;
-}
-function formatElapsed(milliseconds: number): string {
-  const seconds = Math.floor(milliseconds / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  return seconds % 60 === 0 ? `${minutes}m` : `${minutes}m ${seconds % 60}s`;
-}
 function numberOrZero(value: unknown): number { return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : 0; }
 function formatContextTokens(value: number): string {
   if (value < 1_000) return String(Math.round(value));