@smithers-orchestrator/pi-plugin 0.16.9

package/src/views/FrameScrubber.ts

@@ -0,0 +1,72 @@
+import { matchesKey, truncateToWidth } from "@mariozechner/pi-tui";
+import type { DevToolsStore } from "../runtime/DevToolsStore.js";
+
+type Theme = {
+  fg?: (color: string, value: string) => string;
+  bold?: (value: string) => string;
+};
+
+function paint(theme: Theme, color: string, value: string) {
+  return theme.fg ? theme.fg(color, value) : value;
+}
+
+export class FrameScrubber {
+  constructor(private readonly store: DevToolsStore) {}
+
+  handleInput(data: string) {
+    if (matchesKey(data, "left") || data === "\x1b[D" || matchesKey(data, ",")) {
+      void this.store.scrubTo(Math.max(0, this.store.displayedFrameNo - 1));
+      return true;
+    }
+    if (matchesKey(data, "right") || data === "\x1b[C" || matchesKey(data, ".")) {
+      void this.store.scrubTo(Math.min(this.store.latestFrameNo, this.store.displayedFrameNo + 1));
+      return true;
+    }
+    if (matchesKey(data, "home")) {
+      void this.store.scrubTo(0);
+      return true;
+    }
+    if (matchesKey(data, "end")) {
+      this.store.returnToLive();
+      return true;
+    }
+    return false;
+  }
+
+  render(width: number, theme: Theme) {
+    const W = Math.max(24, width);
+    const latest = Math.max(0, this.store.latestFrameNo);
+    const current = Math.min(this.store.displayedFrameNo, latest);
+    const barWidth = Math.max(10, W - 24);
+    const position = latest <= 0 ? 0 : Math.round((current / latest) * (barWidth - 1));
+    const chars = Array.from({ length: barWidth }, (_, index) => (index === position ? "|" : "-"));
+    const mode = this.store.mode.kind === "historical" ? paint(theme, "warning", "historical") : paint(theme, "success", "live");
+    const lines = [
+      truncateToWidth(
+        ` frame ${String(current).padStart(3)} / ${String(latest).padEnd(3)} ${paint(theme, "border", chars.join(""))} ${mode}`,
+        W,
+      ),
+    ];
+    if (this.store.mode.kind === "historical") {
+      const running =
+        this.store.runningNodeCount > 0
+          ? ` ${this.store.runningNodeCount} running at this frame.`
+          : "";
+      lines.push(
+        truncateToWidth(
+          paint(theme, "warning", ` viewing stale frame ${current}; live has ${latest}.${running}`),
+          W,
+        ),
+      );
+    }
+    if (this.store.scrubError || this.store.rewindError) {
+      lines.push(
+        truncateToWidth(
+          paint(theme, "error", ` ${(this.store.rewindError ?? this.store.scrubError)?.message ?? "frame error"}`),
+          W,
+        ),
+      );
+    }
+    return lines;
+  }
+}

package/src/views/Header.ts

@@ -0,0 +1,144 @@
+import { truncateToWidth } from "@mariozechner/pi-tui";
+import type { DevToolsStore } from "../runtime/DevToolsStore.js";
+
+type Theme = {
+  fg?: (color: string, value: string) => string;
+  bold?: (value: string) => string;
+};
+
+function paint(theme: Theme, color: string, value: string) {
+  return theme.fg ? theme.fg(color, value) : value;
+}
+
+function bold(theme: Theme, value: string) {
+  return theme.bold ? theme.bold(value) : value;
+}
+
+function stateColor(status: string) {
+  switch (status) {
+    case "running":
+      return "accent";
+    case "finished":
+      return "success";
+    case "failed":
+      return "error";
+    case "cancelled":
+      return "dim";
+    case "waiting-approval":
+      return "warning";
+    default:
+      return "muted";
+  }
+}
+
+function heartbeatColor(ageMs: number, heartbeatMs: number) {
+  const interval = Math.max(heartbeatMs, 1);
+  if (!Number.isFinite(ageMs)) {
+    return "error";
+  }
+  if (ageMs <= interval * 2) {
+    return "success";
+  }
+  if (ageMs <= interval * 5) {
+    return "warning";
+  }
+  return "error";
+}
+
+function numberField(value: Record<string, unknown> | undefined, keys: string[]) {
+  for (const key of keys) {
+    const raw = value?.[key];
+    if (typeof raw === "number") {
+      return raw;
+    }
+    if (typeof raw === "string") {
+      const parsed = Number(raw);
+      if (Number.isFinite(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return undefined;
+}
+
+function stringField(value: Record<string, unknown> | undefined, keys: string[]) {
+  for (const key of keys) {
+    const raw = value?.[key];
+    if (typeof raw === "string" && raw.length > 0) {
+      return raw;
+    }
+  }
+  return undefined;
+}
+
+function dateMs(value: Record<string, unknown> | undefined, msKeys: string[], isoKeys: string[]) {
+  const ms = numberField(value, msKeys);
+  if (ms !== undefined) {
+    return ms;
+  }
+  const iso = stringField(value, isoKeys);
+  if (!iso) {
+    return undefined;
+  }
+  const parsed = Date.parse(iso);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+export class Header {
+  constructor(
+    private readonly store: DevToolsStore,
+    private readonly workflowName = "workflow",
+  ) {}
+
+  render(width: number, theme: Theme) {
+    const W = Math.max(40, width);
+    const runId = this.store.runId ?? "no-run";
+    const state = this.store.runStatus;
+    const runState = this.store.runStateView;
+    const engineHeartbeatMs =
+      numberField(runState, ["engineHeartbeatMs", "engine_heartbeat_ms"]) ?? 1_000;
+    const engineLastMs =
+      dateMs(
+        runState,
+        ["engineHeartbeatAtMs", "engine_heartbeat_at_ms"],
+        ["engineHeartbeatAt", "engine_heartbeat_at"],
+      ) ?? this.store.lastEventAt?.getTime();
+    const sandboxHeartbeatMs =
+      numberField(runState, [
+        "viewersHeartbeatMs",
+        "viewers_heartbeat_ms",
+        "uiHeartbeatMs",
+        "ui_heartbeat_ms",
+      ]) ?? engineHeartbeatMs;
+    const sandboxLastMs = dateMs(
+      runState,
+      ["viewersHeartbeatAtMs", "viewers_heartbeat_at_ms", "uiHeartbeatAtMs", "ui_heartbeat_at_ms"],
+      ["viewersHeartbeatAt", "viewers_heartbeat_at", "uiHeartbeatAt", "ui_heartbeat_at"],
+    );
+    const now = Date.now();
+    const engineAge = engineLastMs === undefined ? Number.POSITIVE_INFINITY : now - engineLastMs;
+    const sandboxAge = sandboxLastMs === undefined ? Number.POSITIVE_INFINITY : now - sandboxLastMs;
+    const runStateLabel = stringField(runState, ["state"]);
+    const connection =
+      this.store.connectionState.kind === "streaming"
+        ? ""
+        : ` ${paint(theme, "warning", this.store.connectionState.kind)}`;
+    const left = [
+      paint(theme, stateColor(state), bold(theme, state.toUpperCase())),
+      paint(theme, "muted", this.workflowName),
+      paint(theme, "dim", runId.slice(0, 12)),
+      runStateLabel ? paint(theme, "muted", runStateLabel) : "",
+    ].filter(Boolean).join("  ");
+    const right = [
+      `${paint(theme, heartbeatColor(engineAge, engineHeartbeatMs), "eng")}:${Math.max(0, Math.floor(engineAge / 1_000))}s`,
+      `${paint(theme, heartbeatColor(sandboxAge, sandboxHeartbeatMs), "box")}:${Number.isFinite(sandboxAge) ? Math.max(0, Math.floor(sandboxAge / 1_000)) : "--"}s`,
+      paint(theme, "dim", `seq ${this.store.seq}`),
+      connection,
+    ].filter(Boolean).join("  ");
+    const ansiPattern = new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g");
+    const plainLeft = left.replace(ansiPattern, "");
+    const plainRight = right.replace(ansiPattern, "");
+    const gap = Math.max(1, W - plainLeft.length - plainRight.length - 2);
+    return [truncateToWidth(` ${left}${" ".repeat(gap)}${right} `, W)];
+  }
+}

package/src/views/NodeInspector.ts

@@ -0,0 +1,221 @@
+import { matchesKey, truncateToWidth } from "@mariozechner/pi-tui";
+import type { DevToolsNode } from "@smithers-orchestrator/protocol";
+import type { DevToolsStore } from "../runtime/DevToolsStore.js";
+
+type Theme = {
+  fg?: (color: string, value: string) => string;
+  bold?: (value: string) => string;
+};
+
+type InspectorTab = "output" | "diff" | "logs";
+
+function paint(theme: Theme, color: string, value: string) {
+  return theme.fg ? theme.fg(color, value) : value;
+}
+
+function bold(theme: Theme, value: string) {
+  return theme.bold ? theme.bold(value) : value;
+}
+
+function compact(value: unknown) {
+  if (typeof value === "string") {
+    return value;
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function nodeState(node: DevToolsNode) {
+  const raw = node.props.state;
+  return typeof raw === "string" ? raw : "unknown";
+}
+
+function errorText(node: DevToolsNode) {
+  const keys = ["error", "errors", "failure", "exception"];
+  for (const key of keys) {
+    const value = node.props[key];
+    if (value !== undefined) {
+      return compact(value);
+    }
+  }
+  return undefined;
+}
+
+function firstPresent(node: DevToolsNode, keys: string[]) {
+  for (const key of keys) {
+    if (node.props[key] !== undefined) {
+      return node.props[key];
+    }
+  }
+  return undefined;
+}
+
+function renderJsonLines(value: unknown, fallback: string) {
+  const text = value === undefined ? fallback : compact(value);
+  return text.split("\n").map((line) => ` ${line}`);
+}
+
+function toolCalls(node: DevToolsNode) {
+  const value = firstPresent(node, ["toolCalls", "tool_calls", "tools"]);
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .map((item, index) => {
+      if (typeof item !== "object" || item === null) {
+        return undefined;
+      }
+      const record = item as Record<string, unknown>;
+      const name =
+        record.name ?? record.tool ?? record.toolName ?? record.function ?? `tool-call-${index + 1}`;
+      const status = record.status ?? record.state;
+      const effect = record.sideEffect ?? record.side_effect ?? record.effect;
+      return [name, status, effect].filter((part) => typeof part === "string" && part.length > 0).join(" ");
+    })
+    .filter((item): item is string => Boolean(item));
+}
+
+export class NodeInspector {
+  private tab: InspectorTab = "output";
+  private scrollOffset = 0;
+
+  constructor(private readonly store: DevToolsStore) {}
+
+  handleInput(data: string) {
+    if (matchesKey(data, "1")) {
+      this.tab = "output";
+      this.scrollOffset = 0;
+      return "handled";
+    }
+    if (matchesKey(data, "2")) {
+      this.tab = "diff";
+      this.scrollOffset = 0;
+      return "handled";
+    }
+    if (matchesKey(data, "3")) {
+      this.tab = "logs";
+      this.scrollOffset = 0;
+      return "handled";
+    }
+    if (matchesKey(data, "tab") || matchesKey(data, "]")) {
+      this.nextTab(1);
+      return "handled";
+    }
+    if (matchesKey(data, "[")) {
+      this.nextTab(-1);
+      return "handled";
+    }
+    if (matchesKey(data, "j") || data === "\x1b[B") {
+      this.scrollOffset += 1;
+      return "handled";
+    }
+    if (matchesKey(data, "k") || data === "\x1b[A") {
+      this.scrollOffset = Math.max(0, this.scrollOffset - 1);
+      return "handled";
+    }
+    if (matchesKey(data, "g")) {
+      this.scrollOffset = 0;
+      return "handled";
+    }
+    return "unhandled";
+  }
+
+  render(width: number, height: number, theme: Theme) {
+    const W = Math.max(28, width);
+    const H = Math.max(4, height);
+    const node = this.store.selectedNode;
+    if (!node) {
+      return this.pad([paint(theme, "muted", " select a node to inspect")], H);
+    }
+
+    const lines: string[] = [];
+    const title = `${node.task?.nodeId ?? node.name}  ${nodeState(node)}`;
+    lines.push(truncateToWidth(` ${paint(theme, "accent", bold(theme, title))}`, W));
+
+    const error = errorText(node);
+    if (error) {
+      lines.push(truncateToWidth(` ${paint(theme, "error", error.split("\n")[0] ?? "error")}`, W));
+    }
+
+    if (this.store.isGhost) {
+      const unmounted = this.store.selectedGhostRecord?.unmountedFrameNo;
+      lines.push(
+        truncateToWidth(
+          paint(
+            theme,
+            "warning",
+            ` ghost: node no longer mounted${unmounted === undefined ? "" : ` at frame ${unmounted}`}`,
+          ),
+          W,
+        ),
+      );
+    }
+
+    const tabs = (["output", "diff", "logs"] as InspectorTab[])
+      .map((tab, index) => {
+        const label = `${index + 1}:${tab}`;
+        return tab === this.tab ? paint(theme, "accent", bold(theme, `[${label}]`)) : paint(theme, "dim", label);
+      })
+      .join(" ");
+    lines.push(truncateToWidth(` ${tabs}`, W));
+
+    const body = this.bodyLines(node);
+    const visibleBody = body.slice(this.scrollOffset, this.scrollOffset + Math.max(1, H - lines.length));
+    for (const line of visibleBody) {
+      lines.push(truncateToWidth(line, W));
+    }
+    return this.pad(lines, H).slice(0, H);
+  }
+
+  private bodyLines(node: DevToolsNode) {
+    const calls = toolCalls(node);
+    const taskLines = [
+      ` task.nodeId: ${node.task?.nodeId ?? "-"}`,
+      ` task.kind: ${node.task?.kind ?? "-"}`,
+      ` task.agent: ${node.task?.agent ?? "-"}`,
+      ` task.iteration: ${node.task?.iteration ?? 0}`,
+    ];
+    const callLines = calls.length > 0 ? ["", " tool calls:", ...calls.map((call) => `  - ${call}`)] : [];
+    switch (this.tab) {
+      case "output":
+        return [
+          ...taskLines,
+          ...callLines,
+          "",
+          " output:",
+          ...renderJsonLines(firstPresent(node, ["output", "row", "result", "value"]), " (no output captured)"),
+        ];
+      case "diff":
+        return [
+          ...taskLines,
+          "",
+          " diff:",
+          ...renderJsonLines(firstPresent(node, ["diff", "patches", "changes"]), " (no diff captured)"),
+        ];
+      case "logs":
+        return [
+          ...taskLines,
+          "",
+          " logs:",
+          ...renderJsonLines(firstPresent(node, ["logs", "log", "stdout", "stderr"]), " (no logs captured)"),
+        ];
+    }
+  }
+
+  private nextTab(delta: number) {
+    const tabs: InspectorTab[] = ["output", "diff", "logs"];
+    const current = tabs.indexOf(this.tab);
+    this.tab = tabs[(current + delta + tabs.length) % tabs.length];
+    this.scrollOffset = 0;
+  }
+
+  private pad(lines: string[], height: number) {
+    while (lines.length < height) {
+      lines.push("");
+    }
+    return lines;
+  }
+}

package/src/views/RunInspector.ts

@@ -0,0 +1,232 @@
+import { matchesKey, truncateToWidth } from "@mariozechner/pi-tui";
+import type { DevToolsStore } from "../runtime/DevToolsStore.js";
+import type { DevToolsClient } from "../runtime/DevToolsClient.js";
+import { FrameScrubber } from "./FrameScrubber.js";
+import { Header } from "./Header.js";
+import { NodeInspector } from "./NodeInspector.js";
+import { RunTree } from "./RunTree.js";
+
+type Theme = {
+  fg?: (color: string, value: string) => string;
+  bold?: (value: string) => string;
+};
+
+type FocusPane = "tree" | "inspector" | "scrubber";
+
+type RunInspectorOptions = {
+  workflowName?: string;
+  onClose?: () => void;
+  onNotify?: (message: string, level?: "info" | "warning" | "error") => void;
+};
+
+function paint(theme: Theme, color: string, value: string) {
+  return theme.fg ? theme.fg(color, value) : value;
+}
+
+function stripAnsi(value: string) {
+  return value.replace(new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g"), "");
+}
+
+function padRight(value: string, width: number) {
+  const plain = stripAnsi(value);
+  return plain.length >= width ? value : value + " ".repeat(width - plain.length);
+}
+
+function joinPanes(left: string, right: string, leftWidth: number, rightWidth: number) {
+  return `${padRight(truncateToWidth(left, leftWidth), leftWidth)} ${truncateToWidth(right, rightWidth)}`;
+}
+
+export class RunInspector {
+  private readonly header: Header;
+  private readonly scrubber: FrameScrubber;
+  private readonly tree: RunTree;
+  private readonly inspector: NodeInspector;
+  private readonly onClose: () => void;
+  private readonly onNotify: (message: string, level?: "info" | "warning" | "error") => void;
+  private focus: FocusPane = "tree";
+  private cachedLines: string[] | undefined;
+  private cachedWidth = 0;
+
+  constructor(
+    private readonly store: DevToolsStore,
+    private readonly client: DevToolsClient,
+    options: RunInspectorOptions = {},
+  ) {
+    this.header = new Header(store, options.workflowName);
+    this.scrubber = new FrameScrubber(store);
+    this.tree = new RunTree(store);
+    this.inspector = new NodeInspector(store);
+    this.onClose = options.onClose ?? (() => undefined);
+    this.onNotify = options.onNotify ?? (() => undefined);
+    store.subscribe(() => this.invalidate());
+  }
+
+  handleInput(data: string) {
+    this.invalidate();
+    if (matchesKey(data, "escape") || matchesKey(data, "q")) {
+      this.onClose();
+      return;
+    }
+    if (matchesKey(data, "tab")) {
+      this.cycleFocus(1);
+      return;
+    }
+    if (matchesKey(data, "shift+tab")) {
+      this.cycleFocus(-1);
+      return;
+    }
+    if (matchesKey(data, "a")) {
+      void this.approveSelected();
+      return;
+    }
+    if (matchesKey(data, "d")) {
+      void this.denySelected();
+      return;
+    }
+    if (matchesKey(data, "c")) {
+      void this.cancelRun();
+      return;
+    }
+    if (matchesKey(data, "l")) {
+      this.store.returnToLive();
+      return;
+    }
+    if (matchesKey(data, "w")) {
+      void this.rewindDisplayedFrame();
+      return;
+    }
+    if (matchesKey(data, "s")) {
+      this.focus = "scrubber";
+      return;
+    }
+    if (this.focus === "scrubber" && this.scrubber.handleInput(data)) {
+      return;
+    }
+    if (this.focus === "inspector") {
+      const result = this.inspector.handleInput(data);
+      if (result === "handled") {
+        return;
+      }
+    }
+    const treeResult = this.tree.handleInput(data);
+    if (treeResult === "focusInspector") {
+      this.focus = "inspector";
+    }
+  }
+
+  render(width: number, height = 34, theme: Theme) {
+    if (this.cachedLines && this.cachedWidth === width) {
+      return this.cachedLines;
+    }
+    const W = Math.max(60, width);
+    const H = Math.max(18, height);
+    const lines: string[] = [];
+    lines.push(...this.header.render(W, theme));
+    if (this.store.isStaleBannerVisible) {
+      const since = this.store.staleSince ? Math.max(0, Math.floor((Date.now() - this.store.staleSince.getTime()) / 1_000)) : 0;
+      lines.push(truncateToWidth(paint(theme, "warning", ` stale: gateway disconnected for ${since}s; showing last known tree`), W));
+    }
+    lines.push(...this.scrubber.render(W, theme));
+
+    const bodyHeight = Math.max(8, H - lines.length - 2);
+    const leftWidth = Math.max(30, Math.min(Math.floor(W * 0.46), W - 31));
+    const rightWidth = Math.max(24, W - leftWidth - 1);
+    const left = this.tree.render(leftWidth, bodyHeight, theme);
+    const right = this.inspector.render(rightWidth, bodyHeight, theme);
+    for (let index = 0; index < bodyHeight; index += 1) {
+      lines.push(joinPanes(left[index] ?? "", right[index] ?? "", leftWidth, rightWidth));
+    }
+
+    const focusLabel = paint(theme, "accent", this.focus);
+    lines.push(
+      truncateToWidth(
+        paint(
+          theme,
+          "dim",
+          ` focus:${stripAnsi(focusLabel)}  tab:focus  arrows/jk:tree  1-3:tabs  s:frames  a/d:approve/deny  w:rewind  c:cancel  q:close`,
+        ),
+        W,
+      ),
+    );
+    this.cachedWidth = width;
+    this.cachedLines = lines;
+    return lines;
+  }
+
+  invalidate() {
+    this.cachedLines = undefined;
+    this.cachedWidth = 0;
+  }
+
+  dispose() {
+    this.store.disconnect();
+  }
+
+  private cycleFocus(delta: number) {
+    const panes: FocusPane[] = ["tree", "inspector", "scrubber"];
+    const current = panes.indexOf(this.focus);
+    this.focus = panes[(current + delta + panes.length) % panes.length];
+  }
+
+  private selectedTask() {
+    const node = this.store.selectedNode;
+    const runId = this.store.runId;
+    const nodeId = node?.task?.nodeId;
+    if (!runId || !nodeId) {
+      return undefined;
+    }
+    return {
+      runId,
+      nodeId,
+      iteration: node.task?.iteration ?? 0,
+    };
+  }
+
+  private async approveSelected() {
+    const task = this.selectedTask();
+    if (!task) {
+      this.onNotify("No task node selected.", "warning");
+      return;
+    }
+    try {
+      await this.client.approve(task.runId, task.nodeId, task.iteration);
+      this.onNotify(`Approved ${task.nodeId}.`, "info");
+    } catch (error) {
+      this.onNotify(error instanceof Error ? error.message : String(error), "error");
+    }
+  }
+
+  private async denySelected() {
+    const task = this.selectedTask();
+    if (!task) {
+      this.onNotify("No task node selected.", "warning");
+      return;
+    }
+    try {
+      await this.client.deny(task.runId, task.nodeId, task.iteration);
+      this.onNotify(`Denied ${task.nodeId}.`, "warning");
+    } catch (error) {
+      this.onNotify(error instanceof Error ? error.message : String(error), "error");
+    }
+  }
+
+  private async cancelRun() {
+    if (!this.store.runId) {
+      return;
+    }
+    try {
+      await this.client.cancel(this.store.runId);
+      this.onNotify(`Cancelling ${this.store.runId.slice(0, 8)}.`, "warning");
+    } catch (error) {
+      this.onNotify(error instanceof Error ? error.message : String(error), "error");
+    }
+  }
+
+  private async rewindDisplayedFrame() {
+    if (!this.store.isRewindEligible) {
+      this.onNotify("Rewind is only available while viewing a historical frame for a live run.", "warning");
+      return;
+    }
+    await this.store.rewind(this.store.displayedFrameNo, true);
+  }
+}