@bastani/atomic 0.8.31-alpha.5 → 0.9.0-alpha.2

package/dist/builtin/workflows/src/tui/graph-view-render.ts

@@ -0,0 +1,194 @@
+import type { RunSnapshot } from "../shared/store-types.js";
+import { hexBg, hexToAnsi, RESET } from "./color-utils.js";
+import { GraphViewGraphRenderer } from "./graph-view-graph-render.js";
+import { renderOutlinePill, renderHeader } from "./header.js";
+import { renderPromptCard } from "./prompt-card.js";
+import { renderSwitcher } from "./switcher.js";
+import { truncateToWidth } from "./text-helpers.js";
+import { renderToasts } from "./toast.js";
+
+/** Overlay/widget rendering orchestration for GraphView. */
+export abstract class GraphViewRenderer extends GraphViewGraphRenderer {
+  /** Render to string lines. width = terminal columns. */
+  render(width: number): string[] {
+    if (this.mode === "widget") {
+      return this._renderWidget(width);
+    }
+    return this._renderOverlay(width);
+  }
+
+  protected _renderWidget(width: number): string[] {
+    const run = this._getCurrentRun();
+    if (!run) {
+      return [`${hexToAnsi(this.graphTheme.dim)}no active workflow${RESET}`];
+    }
+    const displayStages = this._displayStages(run);
+    const headerLines = renderHeader({ ...run, stages: displayStages }, { width, theme: this.graphTheme });
+    const counts = this._counts(displayStages);
+    const trailer =
+      `${hexToAnsi(this.graphTheme.dim)}` +
+      `${counts.completed}/${displayStages.length} done` +
+      (counts.running > 0 ? ` · ${counts.running} running` : "") +
+      (counts.failed > 0 ? ` · ${counts.failed} failed` : "") +
+      (counts.blocked > 0 ? ` · ${counts.blocked} blocked` : "") +
+      RESET;
+    return [...headerLines, ` ${trailer}`];
+  }
+
+  protected _renderOverlay(width: number): string[] {
+    const frameWidth = Math.max(40, width);
+    const lines: string[] = [];
+    const run = this._getCurrentRun();
+
+    if (!run) {
+      return this._renderEmptyState(frameWidth);
+    }
+
+    // 1. Header chrome (3 rows: outline pill + session name + counts).
+    lines.push(
+      ...renderHeader({ ...run, stages: this._displayStages(run) }, { width: frameWidth, theme: this.graphTheme }),
+    );
+
+    // 2. Graph occupies the full body. No section labels, no focused-
+    //    stage panel — status colour on each card carries that signal.
+    const graphLines = this._renderGraph(frameWidth);
+    const bodyTarget = this._overlayBodyRows(this._overlayPanelLineCount());
+    const visibleGraph = this._visibleGraphLines(
+      graphLines,
+      frameWidth,
+      bodyTarget,
+    );
+    for (let i = 0; i < visibleGraph.topPad; i++)
+      lines.push(this._blankRow(frameWidth));
+    for (const line of visibleGraph.lines) {
+      lines.push(this._canvasRow(line, frameWidth));
+    }
+    while (lines.length < 3 + bodyTarget)
+      lines.push(this._blankRow(frameWidth));
+    if (lines.length > 3 + bodyTarget) lines.length = 3 + bodyTarget;
+
+    this._renderSwitcherOverlay(lines, run, frameWidth, bodyTarget);
+    this._renderPromptOverlay(lines, frameWidth, bodyTarget);
+    this._renderToastOverlay(lines, frameWidth);
+
+    // 5. Three-row statusline pinned to the bottom.
+    lines.push(...this._renderStatusline(frameWidth));
+
+    return this._withVerticalMargins(lines, frameWidth);
+  }
+
+  protected _renderEmptyState(width: number): string[] {
+    const t = this.graphTheme;
+    const muted = hexToAnsi(t.textMuted);
+    const dim = hexToAnsi(t.dim);
+    const accent = hexToAnsi(t.accent);
+    const chromeBg = hexBg(t.backgroundPanel);
+
+    const {
+      top,
+      mid,
+      bot,
+      visibleWidth: pillW,
+    } = renderOutlinePill("ORCHESTRATOR", t.accent, chromeBg);
+    const idleLabel = `  ${muted}idle${RESET}`;
+    const fillerVisible = Math.max(0, width - 1 - pillW - 6 /* "  idle" */ - 2);
+    const filler = " ".repeat(fillerVisible);
+    const lines: string[] = [
+      `${chromeBg} ${RESET}${top}${chromeBg}${" ".repeat(6 + fillerVisible)}${" ".repeat(2)}${RESET}`,
+      `${chromeBg} ${RESET}${mid}${chromeBg}${idleLabel}${filler}${" ".repeat(2)}${RESET}`,
+      `${chromeBg} ${RESET}${bot}${chromeBg}${" ".repeat(6 + fillerVisible)}${" ".repeat(2)}${RESET}`,
+    ];
+    const bodyTarget = this._overlayBodyRows(this._overlayPanelLineCount());
+    const body: string[] = [
+      this._canvasRow(`  ${muted}No active workflow run.${RESET}`, width),
+      this._canvasRow(
+        `  ${dim}Start one with ${accent}/workflow <name>${RESET}${dim} or press ${accent}F2${RESET}${dim} on an active run.${RESET}`,
+        width,
+      ),
+    ];
+    const topPad = Math.max(0, Math.floor((bodyTarget - body.length) / 2));
+    for (let i = 0; i < topPad; i++) lines.push(this._blankRow(width));
+    for (const l of body) lines.push(l);
+    while (lines.length < 3 + bodyTarget) lines.push(this._blankRow(width));
+    lines.push(...this._renderStatusline(width));
+    return this._withVerticalMargins(lines, width);
+  }
+
+  private _renderSwitcherOverlay(
+    lines: string[],
+    run: RunSnapshot,
+    frameWidth: number,
+    bodyTarget: number,
+  ): void {
+    // Switcher overlay — floats over the body when open.
+    if (!this.switcherOpen) return;
+
+    const bodyStart = 3;
+    const bodyEnd = 3 + bodyTarget;
+    for (let row = bodyStart; row < bodyEnd; row++) {
+      lines[row] = this._blankRow(frameWidth);
+    }
+    const switcherWidth = Math.min(60, Math.max(40, frameWidth - 8));
+    const switcherLines = renderSwitcher(this._displayStages(run), this.switcherState, {
+      width: switcherWidth,
+      theme: this.graphTheme,
+    });
+    const insertAt = Math.max(bodyStart, bodyStart + Math.min(2, Math.floor((bodyTarget - switcherLines.length) / 3)));
+    const switcherLeft = Math.max(2, Math.floor((frameWidth - switcherWidth) / 2));
+    for (let i = 0; i < switcherLines.length; i++) {
+      const lineIdx = insertAt + i;
+      if (lineIdx >= bodyEnd) break;
+      const base = lines[lineIdx] ?? this._blankRow(frameWidth);
+      const merged = this._overlayCard(base, switcherLines[i]!, switcherLeft, frameWidth);
+      if (lineIdx < lines.length) lines[lineIdx] = merged;
+      else lines.push(merged);
+    }
+  }
+
+  private _renderPromptOverlay(
+    lines: string[],
+    frameWidth: number,
+    bodyTarget: number,
+  ): void {
+    // Pending HIL prompt — floats over the graph body, centred. The
+    // chat editor remains free regardless: the overlay is the only
+    // surface that interacts with the prompt. When the stage switcher is
+    // open it owns the body/input, so hide the prompt card until it closes.
+    if (!this.promptState || this.switcherOpen) return;
+
+    const cardWidth = Math.min(72, Math.max(40, frameWidth - 6));
+    const cardLines = renderPromptCard({
+      state: this.promptState,
+      theme: this.graphTheme,
+      width: cardWidth,
+      cursorOn: ((Date.now() / 530) | 0) % 2 === 0,
+    });
+    const bodyStart = 3;
+    const bodyEnd = 3 + bodyTarget;
+    const slot = Math.max(
+      bodyStart,
+      bodyStart + Math.floor((bodyTarget - cardLines.length) / 2),
+    );
+    const leftPad = Math.max(0, Math.floor((frameWidth - cardWidth) / 2));
+    for (let i = 0; i < cardLines.length; i++) {
+      const lineIdx = slot + i;
+      if (lineIdx >= bodyEnd) break;
+      const base = lines[lineIdx] ?? this._blankRow(frameWidth);
+      lines[lineIdx] = this._overlayCard(base, cardLines[i]!, leftPad, frameWidth);
+    }
+  }
+
+  private _renderToastOverlay(lines: string[], frameWidth: number): void {
+    // Toast overlay — top-right of header band.
+    const toastLines = renderToasts(this.toastManager.active(), {
+      theme: this.graphTheme,
+    });
+    if (toastLines.length === 0) return;
+
+    for (let i = 0; i < toastLines.length && i < lines.length; i++) {
+      const existing = lines[i] ?? "";
+      const merged = `${existing} ${toastLines[i]}`;
+      lines[i] = truncateToWidth(merged, frameWidth, "", true);
+    }
+  }
+}

package/dist/builtin/workflows/src/tui/graph-view-state.ts

@@ -0,0 +1,306 @@
+import type { Store } from "../shared/store.js";
+import type {
+  PendingPrompt,
+  RunSnapshot,
+  StageSnapshot,
+  StoreSnapshot,
+} from "../shared/store-types.js";
+import {
+  expandedStageTarget,
+  expandWorkflowGraph,
+  type ExpandedWorkflowGraph,
+  type ExpandedWorkflowStage,
+} from "../shared/expanded-workflow-graph.js";
+import type { GraphTheme } from "./graph-theme.js";
+import type { LayoutNode } from "./layout.js";
+import { computeLayout } from "./layout.js";
+import {
+  createPromptCardState,
+  type PromptCardState,
+} from "./prompt-card.js";
+import { createToastManager } from "./toast.js";
+import type { SwitcherState } from "./switcher.js";
+import { ANIMATION_TICK_MS } from "./graph-view-constants.js";
+import type { GraphViewMode, GraphViewOpts } from "./graph-view-types.js";
+
+export interface GraphStageCounts {
+  pending: number;
+  running: number;
+  awaiting_input: number;
+  paused: number;
+  blocked: number;
+  completed: number;
+  failed: number;
+  skipped: number;
+}
+
+/** Expansion, focus, prompt, and store-backed layout state for GraphView. */
+export abstract class GraphViewState {
+  protected mode: GraphViewMode;
+  protected runId: string | null;
+  protected store: Store;
+  protected graphTheme: GraphTheme;
+  protected onClose?: () => void;
+  protected onKill?: (runId: string) => void;
+  protected onHide?: () => void;
+  protected onPromptResolve?: (runId: string, promptId: string, response: unknown) => void;
+  protected onStageAttach?: (runId: string, stageId: string) => void;
+  protected onDetach?: () => void;
+  protected initialFocusedStageId?: string;
+  protected getViewportRows?: () => number | undefined;
+  protected requestRender?: () => void;
+  protected piKeybindings?: unknown;
+
+  /** Active HIL prompt state, set when `_rebuildLayout` sees a new prompt id. */
+  protected promptState: PromptCardState | null = null;
+
+  protected focusedIndex = 0;
+  protected switcherOpen = false;
+  protected switcherState: SwitcherState = { query: "", selectedIndex: 0 };
+  protected toastManager = createToastManager();
+  protected detailsExpanded = true;
+  protected cachedLayout: LayoutNode[] = [];
+  protected expandedGraph: ExpandedWorkflowGraph = { stages: [], targets: new Map() };
+  protected currentSnapshot: StoreSnapshot | null = null;
+  protected graphScrollOffset = 0;
+  protected graphScrollColOffset = 0;
+  protected pendingEnsureFocusedVisible = true;
+  protected lastAutoFocusedAwaitingInputKey: string | null = null;
+
+  protected _intervalId: ReturnType<typeof setInterval> | null = null;
+  protected _lastGTime: number | null = null;
+  protected _unsubscribe: (() => void) | null = null;
+
+  constructor(opts: GraphViewOpts) {
+    this.mode = opts.mode;
+    this.runId = opts.runId;
+    this.store = opts.store;
+    this.graphTheme = opts.graphTheme;
+    this.onClose = opts.onClose;
+    this.onKill = opts.onKill;
+    this.onHide = opts.onHide;
+    this.onPromptResolve = opts.onPromptResolve;
+    this.onStageAttach = opts.onStageAttach;
+    this.onDetach = opts.onDetach;
+    this.initialFocusedStageId = opts.initialFocusedStageId;
+    this.getViewportRows = opts.getViewportRows;
+    this.requestRender = opts.requestRender;
+    this.piKeybindings = opts.piKeybindings;
+
+    this._unsubscribe = this.store.subscribe((snap) => {
+      this.currentSnapshot = snap;
+      this._rebuildLayout();
+    });
+    this.currentSnapshot = this.store.snapshot();
+    this._rebuildLayout();
+
+    // Animation tick: while the overlay is mounted, fire a render
+    // request every `ANIMATION_TICK_MS` so the duration counter on
+    // each running stage advances and the border-pulse lerp animates
+    // even when the user isn't pressing keys. Only overlay mode owns
+    // visible animations; widget mode renders a single status line
+    // that never needs a steady cadence. The host's `requestRender`
+    // is responsible for gating on overlay visibility / focus — see
+    // `overlay-adapter.ts` and `workflow-attach-pane.ts`. With that
+    // gate in place the previous tmux scrollback "ghost overlay"
+    // failure mode does not apply: pi-tui owns the screen buffer
+    // and diff-blits frames in place.
+    if (this.mode === "overlay" && this.requestRender) {
+      this._intervalId = setInterval(() => {
+        this.requestRender?.();
+      }, ANIMATION_TICK_MS);
+      (this._intervalId as { unref?: () => void }).unref?.();
+    }
+  }
+
+  protected _rebuildLayout(): void {
+    const run = this._getCurrentRun();
+    if (!run) {
+      this.cachedLayout = [];
+      this.expandedGraph = { stages: [], targets: new Map() };
+      this.focusedIndex = 0;
+      this.graphScrollOffset = 0;
+      this.graphScrollColOffset = 0;
+      this.pendingEnsureFocusedVisible = true;
+      this.promptState = null;
+      return;
+    }
+
+    const previousFocusedStageId = this.cachedLayout[this.focusedIndex]?.stage.id;
+    const graphStages = this._graphStages(run);
+    const nextLayout = computeLayout(graphStages, { orientation: "vertical" });
+    this.cachedLayout = nextLayout;
+
+    let focusNeedsReveal = this.pendingEnsureFocusedVisible;
+    // One-shot: if the host passed `initialFocusedStageId`, snap the
+    // cursor to that stage now that the layout exists. The attach shell
+    // uses this when swapping back from chat mode so the focus lands on
+    // the same node the user just attached to.
+    if (this.initialFocusedStageId !== undefined) {
+      const idx = this.cachedLayout.findIndex(
+        (n) =>
+          n.stage.id === this.initialFocusedStageId ||
+          expandedStageTarget(this.expandedGraph, n.stage.id)?.stageId === this.initialFocusedStageId,
+      );
+      if (idx >= 0 && idx !== this.focusedIndex) {
+        this.focusedIndex = idx;
+        focusNeedsReveal = true;
+      }
+      this.initialFocusedStageId = undefined;
+    } else if (previousFocusedStageId !== undefined) {
+      const idx = this.cachedLayout.findIndex(
+        (n) => n.stage.id === previousFocusedStageId,
+      );
+      if (idx >= 0 && idx !== this.focusedIndex) {
+        this.focusedIndex = idx;
+        focusNeedsReveal = true;
+      }
+    }
+
+    const awaitingTarget = this._awaitingInputFocusTarget();
+    if (awaitingTarget) {
+      if (awaitingTarget.key !== this.lastAutoFocusedAwaitingInputKey) {
+        this.focusedIndex = awaitingTarget.index;
+        focusNeedsReveal = true;
+        this.lastAutoFocusedAwaitingInputKey = awaitingTarget.key;
+      }
+    } else {
+      this.lastAutoFocusedAwaitingInputKey = null;
+    }
+
+    if (this.cachedLayout.length === 0) {
+      this.focusedIndex = 0;
+      this.graphScrollOffset = 0;
+      this.graphScrollColOffset = 0;
+    } else if (this.focusedIndex >= this.cachedLayout.length) {
+      this.focusedIndex = this.cachedLayout.length - 1;
+      focusNeedsReveal = true;
+    }
+    this.pendingEnsureFocusedVisible = focusNeedsReveal;
+    this._syncPromptState(run.pendingPrompt);
+  }
+
+  protected _awaitingInputFocusTarget(): { index: number; key: string } | null {
+    let newest: { index: number; key: string; createdAt: number } | null = null;
+    for (let index = 0; index < this.cachedLayout.length; index++) {
+      const stage = this.cachedLayout[index]!.stage;
+      const target = this._awaitingInputKey(stage);
+      if (!target) continue;
+      if (!newest || target.createdAt >= newest.createdAt) {
+        newest = { index, key: target.key, createdAt: target.createdAt };
+      }
+    }
+    return newest ? { index: newest.index, key: newest.key } : null;
+  }
+
+  protected _awaitingInputKey(stage: StageSnapshot): { key: string; createdAt: number } | null {
+    const target = expandedStageTarget(this.expandedGraph, stage.id);
+    const prefix = target ? `${target.runId}:${target.stageId}` : stage.id;
+    if (stage.pendingPrompt) {
+      return {
+        key: `prompt:${prefix}:${stage.pendingPrompt.id}`,
+        createdAt: stage.pendingPrompt.createdAt,
+      };
+    }
+    if (stage.inputRequest) {
+      return {
+        key: `input-request:${prefix}:${stage.inputRequest.id}`,
+        createdAt: stage.inputRequest.createdAt,
+      };
+    }
+    if (stage.status === "awaiting_input") {
+      return {
+        key: `awaiting:${prefix}:${stage.awaitingInputSince ?? "active"}`,
+        createdAt: stage.awaitingInputSince ?? stage.startedAt ?? 0,
+      };
+    }
+    return null;
+  }
+
+  protected _graphStages(run: RunSnapshot): ExpandedWorkflowStage[] {
+    this.expandedGraph = this.currentSnapshot
+      ? expandWorkflowGraph(this.currentSnapshot, run.id)
+      : { stages: [], targets: new Map() };
+    const stages = [...this.expandedGraph.stages];
+    const hasStagePrompt = stages.some((stage) =>
+      stage.pendingPrompt !== undefined ||
+      (stage.status === "awaiting_input" && stage.promptFootprint?.kind === "custom")
+    );
+    if (!hasStagePrompt) return stages;
+    return stages.filter((stage) => {
+      // Prompt-node injection can leave unstarted author stages in the store
+      // while the prompt node owns focus; hide only these inert placeholders.
+      const isUnstartedPlaceholder =
+        stage.status === "pending" &&
+        stage.startedAt === undefined &&
+        stage.pendingPrompt === undefined &&
+        stage.toolEvents.length === 0;
+      return !isUnstartedPlaceholder;
+    });
+  }
+
+  /**
+   * Mirror the run's `pendingPrompt` into a UI working state. A new prompt
+   * id resets the state (caret + buffer); a cleared prompt drops the state
+   * so the card disappears.
+   */
+  protected _syncPromptState(prompt: PendingPrompt | undefined): void {
+    if (!prompt) {
+      this.promptState = null;
+      return;
+    }
+    if (!this.promptState || this.promptState.prompt.id !== prompt.id) {
+      this.promptState = createPromptCardState(prompt);
+    }
+  }
+
+  protected _getCurrentRun(): RunSnapshot | null {
+    if (!this.currentSnapshot) return null;
+    // Pin to the first run we see so a completed run stays visible after
+    // `activeRunId()` clears. Caller can still pass an explicit runId.
+    if (this.runId == null) {
+      const activeId = this.store.activeRunId();
+      if (activeId != null) {
+        this.runId = activeId;
+      }
+    }
+    if (this.runId == null) return null;
+    return this.currentSnapshot.runs.find((r) => r.id === this.runId) ?? null;
+  }
+
+  protected _displayStages(run: RunSnapshot): StageSnapshot[] {
+    return this.cachedLayout.length > 0
+      ? this.cachedLayout.map((layoutNode) => layoutNode.stage)
+      : [...run.stages];
+  }
+
+  protected _counts(stages: readonly StageSnapshot[]): GraphStageCounts {
+    const c: GraphStageCounts = {
+      pending: 0,
+      running: 0,
+      awaiting_input: 0,
+      paused: 0,
+      blocked: 0,
+      completed: 0,
+      failed: 0,
+      skipped: 0,
+    };
+    for (const s of stages) c[s.status]++;
+    return c;
+  }
+
+  dispose(): void {
+    if (this._intervalId != null) {
+      clearInterval(this._intervalId);
+      this._intervalId = null;
+    }
+    if (this._unsubscribe) {
+      this._unsubscribe();
+      this._unsubscribe = null;
+    }
+  }
+
+  invalidate(): void {
+    this._rebuildLayout();
+  }
+}

package/dist/builtin/workflows/src/tui/graph-view-types.ts

@@ -0,0 +1,70 @@
+import type { Store } from "../shared/store.js";
+import type { GraphTheme } from "./graph-theme.js";
+
+export type GraphViewMode = "overlay" | "widget";
+
+export interface GraphViewOpts {
+  mode: GraphViewMode;
+  runId: string | null;
+  store: Store;
+  graphTheme: GraphTheme;
+  onClose?: () => void;
+  /**
+   * Invoked when the user presses `q` inside the pane on an in-flight
+   * run. Fires immediately (no confirm) per the toggle-driven UX:
+   * `h` hides without quitting; `q` is reserved for terminating the
+   * current run.
+   */
+  onKill?: (runId: string) => void;
+  /**
+   * Invoked when the user presses `h` inside the pane. Hides without
+   * unmounting (overlay-adapter calls `setHidden(true)`). Re-open via
+   * `F2` or `/workflow connect <id>`.
+   */
+  onHide?: () => void;
+  /**
+   * Invoked when the user submits (or skips) a HIL prompt rendered inside
+   * the pane. The callback typically calls `store.resolvePendingPrompt`;
+   * GraphView itself stays UI-only.
+   */
+  onPromptResolve?: (runId: string, promptId: string, response: unknown) => void;
+  /**
+   * Invoked when the user presses Enter on a focused graph node — the
+   * parent attach shell swaps the popup interior to that stage's chat
+   * pane. When unset, Enter is a no-op (preserves graph mode).
+   */
+  onStageAttach?: (runId: string, stageId: string) => void;
+  /**
+   * Invoked when the user presses `Ctrl+D` while in graph mode. Mirrors
+   * the in-chat back affordance: detaches the whole popup (host calls
+   * `setHidden(true)`). Falls back to `onHide` when unset.
+   */
+  onDetach?: () => void;
+  /**
+   * When provided, GraphView restores focus to this stage on construction
+   * — used by the attach shell so returning from the chat lands the
+   * cursor on the same node the user just attached to.
+   */
+  initialFocusedStageId?: string;
+  /**
+   * Optional accessor returning the current terminal row count. When
+   * present in overlay mode the renderer expands the frame to roughly
+   * `viewportRows` lines (clamped to at least the header + statusline
+   * budget) so the popup fills the terminal under pi-tui's
+   * `width: "100%" / maxHeight: "100%"` geometry. Returning `undefined`
+   * falls back to the constant `OVERLAY_LINE_COUNT` rectangle.
+   */
+  getViewportRows?: () => number | undefined;
+  /**
+   * Invoked on each animation tick (~10 FPS) so the host can call
+   * `tui.requestRender()`. Only wired in `overlay` mode; supplying it
+   * starts the tick loop in the constructor so duration counters and
+   * the running-stage border pulse refresh without requiring a key
+   * press. The host is responsible for gating the underlying
+   * `requestRender` on overlay visibility / focus (see
+   * `overlay-adapter.ts`).
+   */
+  requestRender?: () => void;
+  /** Host Pi keybindings manager used by run-level prompt cards. */
+  piKeybindings?: unknown;
+}