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

package/dist/builtin/workflows/src/tui/chat-surface.ts

@@ -369,12 +369,6 @@ function renderTaggedCardThemed(
     1,
     width - row1StripePrefixW - tagW - titleSegW - suffixSegW - tagSubtitleW - trailingW - 1,
   );
-
-  // 1-cell leading space on every card line so the card content is
-  // column-aligned with the band's `[ LABEL ]` (which is itself offset by
-  // `leftPad` inside its surface0 fill) and with the hint rows' `▸` arrow.
-  // All three chat-surface families share the same left edge,
-  // matching the mockup's terminal-padding scheme.
   const row1 =
     ` ${stripe}${STRIPE_CHAR_THEMED}${RESET} ` +
     tagSeg +
@@ -382,7 +376,6 @@ function renderTaggedCardThemed(
     suffixSeg +
     tagSubtitleSeg +
     (opts.trailing ? " ".repeat(gap) + trailingSeg : "");
-
   const bodyPrefix = ` ${stripe}${STRIPE_CHAR_THEMED}${RESET}${" ".repeat(bodyStripePrefixW - 1)}`;
   const rows: string[] = [row1];
   for (const body of opts.bodyRows ?? []) {
@@ -390,13 +383,7 @@ function renderTaggedCardThemed(
   }
   return rows.join("\n");
 }
-
 function renderTaggedCardPlain(opts: RenderTaggedCardOpts, width: number): string {
-  // See renderTaggedCardThemed for the rationale behind the +1 hanging
-  // indent. Plain mode preserves the same column alignment: row 1's
-  // `[tag]` brackets stand in for the surface0 bg pill — the opening
-  // bracket sits at col 3 so the tag text starts at col 4, which is also
-  // where every body row's leading character lands.
   const row1StripePrefixW = 2; // "│ "
   const bodyStripePrefixW = 3; // "│  "
   const tagSeg = `[${opts.tag}]`;
@@ -408,7 +395,6 @@ function renderTaggedCardPlain(opts: RenderTaggedCardOpts, width: number): strin
   const trailingPad = 2;
   const titleSuffixW = opts.titleSuffix ? Math.max(0, opts.titleSuffixWidth ?? 0) : 0;
   const titleSuffixGap = opts.titleSuffix ? 2 : 0;
-
   const titleBudget = Math.max(
     8,
     width - row1StripePrefixW - tagW - tagSubtitleW - titleSuffixGap - titleSuffixW - trailingW - trailingPad - 2,
@@ -416,23 +402,14 @@ function renderTaggedCardPlain(opts: RenderTaggedCardOpts, width: number): strin
   const titleVisible = truncateToWidth(opts.title ?? "", titleBudget, ELLIPSIS);
   const titleSeg = titleVisible ? `  ${titleVisible}` : "";
   const titleW = visibleWidth(titleSeg);
-
-  // Plain-mode suffix: same shape as themed (2-cell gap then verbatim
-  // payload). Caller is responsible for picking a plain-text payload when
-  // theme is absent.
   const suffixSeg = opts.titleSuffix ? `  ${opts.titleSuffix}` : "";
   const suffixSegW = opts.titleSuffix ? titleSuffixGap + titleSuffixW : 0;
-
   const gap = Math.max(
     1,
     width - row1StripePrefixW - tagW - titleW - suffixSegW - tagSubtitleW - trailingW - 1,
   );
   const row1Trailing = opts.trailing ? `${" ".repeat(gap)}${trailing}` : "";
-  // See renderTaggedCardThemed for the leading-space rationale: every card
-  // line starts with one cell so the stripe lines up with the band label
-  // and the hint arrow.
   const row1 = ` ${STRIPE_CHAR_PLAIN} ${tagSeg}${titleSeg}${suffixSeg}${tagSubtitleSeg}${row1Trailing}`;
-
   const bodyPrefix = ` ${STRIPE_CHAR_PLAIN}${" ".repeat(bodyStripePrefixW - 1)}`;
   const rows: string[] = [row1];
   for (const body of opts.bodyRows ?? []) {
@@ -440,25 +417,9 @@ function renderTaggedCardPlain(opts: RenderTaggedCardOpts, width: number): strin
   }
   return rows.join("\n");
 }
-
-// ---------------------------------------------------------------------------
-// Progress strip — variable-width bracketed cells, coloured by stage status
-// ---------------------------------------------------------------------------
-
 export interface ProgressCell {
   status: StageStatus;
 }
-
-/**
- * Render a progress strip whose visible width is at most `budget` cells.
- * Each cell renders as a bracketed status glyph whose visible width can
- * vary by status (`[✓]` is 3 cells, `[❚❚]` is 4 cells). Truncation uses
- * the measured width of each rendered cell and appends a trailing `…`
- * when the next whole cell would exceed the budget.
- *
- * Themed mode colours the glyphs by status; plain mode emits the same
- * bracketed shape so logs remain readable.
- */
 export function progressStrip(
   cells: readonly ProgressCell[],
   budget: number,
@@ -466,11 +427,9 @@ export function progressStrip(
 ): string {
   const usable = Math.max(0, Math.floor(budget));
   if (usable < 3 || cells.length === 0) return "";
-
   const ellipsisWidth = visibleWidth(ELLIPSIS);
   const out: string[] = [];
   let used = 0;
-
   for (let i = 0; i < cells.length; i++) {
     const rendered = theme ? renderCellThemed(cells[i]!.status, theme) : renderCellPlain(cells[i]!.status);
     const renderedWidth = visibleWidth(rendered);
@@ -481,24 +440,19 @@ export function progressStrip(
     used += renderedWidth;
     if (isLast) return out.join("");
   }
-
   if (out.length === 0 && ellipsisWidth > usable) return "";
   const suffix = theme ? `${hexToAnsi(theme.dim)}${ELLIPSIS}${RESET}` : ELLIPSIS;
   return `${out.join("")}${suffix}`;
 }
-
 function renderCellThemed(status: StageStatus, theme: GraphTheme): string {
   const dim = hexToAnsi(theme.dim);
   const glyph = stageGlyph(status);
   const fg = stageColor(status, theme);
-  // Bracket lattice in dim, glyph in status colour.
   return `${dim}[${RESET}${fg}${glyph}${RESET}${dim}]${RESET}`;
 }
-
 function renderCellPlain(status: StageStatus): string {
   return `[${stageGlyph(status)}]`;
 }
-
 function stageGlyph(status: StageStatus): string {
   switch (status) {
     case "completed": return "✓";
@@ -511,7 +465,6 @@ function stageGlyph(status: StageStatus): string {
     default:          return "○";
   }
 }
-
 function stageColor(status: StageStatus, theme: GraphTheme): string {
   switch (status) {
     case "completed": return hexToAnsi(theme.success);
@@ -524,31 +477,12 @@ function stageColor(status: StageStatus, theme: GraphTheme): string {
     default:          return hexToAnsi(theme.dim);
   }
 }
-
-// ---------------------------------------------------------------------------
-// Hint rows — `▸ /slash command  verb-phrase hint`
-// ---------------------------------------------------------------------------
-
 export interface HintRow {
-  /** Full slash command (`/workflow connect <id>`). */
   command: string;
-  /** Verb-phrase trailing hint (`attach & watch`). */
   hint: string;
 }
-
-/**
- * Render one indented hint row per entry. Themed mode colours the arrow
- * dim, the command in `theme.accent`, and the hint in `theme.dim`.
- * Plain mode emits the same shape without ANSI.
- *
- * The plan calls for a single grammar across every chat surface:
- * `▸ /command   hint`.
- */
 export function renderHintRows(rows: readonly HintRow[], theme?: GraphTheme): string {
   if (rows.length === 0) return "";
-  // 1-cell leading space so the `▸` arrow column-aligns with the band's
-  // `[ LABEL ]` opening bracket and the card content. All three share
-  // column 1 — see renderTaggedCardThemed for the alignment contract.
   const indent = " ";
   if (!theme) {
     return rows

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

@@ -0,0 +1,45 @@
+export const HINT_KEYS: Array<{ key: string; label: string }> = [
+  { key: "↑↓←→", label: "navigate" },
+  { key: "↵", label: "attach" },
+  { key: "/", label: "stages" },
+  { key: "ctrl+d", label: "detach" },
+  { key: "q", label: "kill" },
+];
+
+/**
+ * Bottom mode pill. The status bar mirrors the top header band: a
+ * three-row chrome strip with an outlined pill flush-left and hints
+ * flowing right of it on the centre row.
+ */
+export const MODE_PILL_LABEL = "GRAPH";
+
+/**
+ * Fixed line count emitted by `_renderOverlay`. pi-tui paints the
+ * overlay in the same buffer as the chat, so a *variable* line count
+ * causes the chat to scroll every time the focused-stage section grows
+ * or shrinks — that's exactly the duplicate-rows bug we hit when
+ * navigating with j/k. Padding to a constant height keeps the overlay
+ * a stable rectangle that pi-tui can diff cell-by-cell.
+ *
+ * Mirrors the doom-overlay reference extension, which always emits the
+ * same number of lines per frame regardless of game state.
+ */
+export const OVERLAY_LINE_COUNT = 32;
+export const OVERLAY_VERTICAL_MARGIN_ROWS = 1;
+
+/**
+ * Animation tick period. Overlay re-renders fire on this cadence so
+ * duration counters tick from active elapsed time (freezing while paused)
+ * and the running-stage border lerps between `borderDim` and
+ * `warning` without a key press. The host-supplied `requestRender`
+ * gate prevents work while the overlay is hidden or unfocused.
+ */
+export const ANIMATION_TICK_MS = 100;
+
+/**
+ * Full lerp period of `pulseT` for running-stage borders, in ms.
+ * `pulsePhase ∈ [0, 1)` cycles every `PULSE_PERIOD_MS` so the sine
+ * eased lerp inside `pickBorder` traces one full breath per cycle.
+ */
+export const PULSE_PERIOD_MS = 2000;
+export const GRAPH_SCROLL_STEP_ROWS = 4;

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

@@ -0,0 +1,161 @@
+import { GraphCanvas } from "./graph-canvas.js";
+import { PULSE_PERIOD_MS } from "./graph-view-constants.js";
+import { GraphViewRenderHelpers } from "./graph-view-render-helpers.js";
+import { NODE_H, NODE_W } from "./layout.js";
+import { renderNodeCard } from "./node-card.js";
+import { hexBg, hexToAnsi, RESET } from "./color-utils.js";
+
+interface Placement {
+  startCol: number;
+  width: number;
+  line: string;
+}
+
+/** Graph body rendering and vertical/horizontal viewport management. */
+export abstract class GraphViewGraphRenderer extends GraphViewRenderHelpers {
+  protected _renderGraph(width: number): string[] {
+    const run = this._getCurrentRun();
+    if (!run || this.cachedLayout.length === 0) {
+      const dim = hexToAnsi(this.graphTheme.dim);
+      return [
+        this._centerCanvasContent(
+          `${dim}waiting for stage events…${RESET}`,
+          width,
+        ),
+      ];
+    }
+
+    const graphInner = Math.max(1, width - 4);
+    const canvasWidth = this.cachedLayout.reduce(
+      (max, node) => Math.max(max, node.x + NODE_W),
+      0,
+    );
+    // Centre the whole graph horizontally when it fits; otherwise keep a
+    // small gutter and reveal focused nodes by horizontally scrolling the
+    // graph canvas. Do not switch to a compact list: the orchestrator pane
+    // should always preserve the node-card graph view.
+    const leftMargin = Math.max(
+      2,
+      canvasWidth <= graphInner ? Math.floor((graphInner - canvasWidth) / 2) : 2,
+    );
+    const viewportWidth = Math.max(1, width - leftMargin);
+    const fullCanvasWidth = Math.max(canvasWidth, viewportWidth);
+    this._clampGraphHorizontalScroll(fullCanvasWidth, viewportWidth);
+    if (this.pendingEnsureFocusedVisible) {
+      this._scrollFocusedColumnIntoView(viewportWidth, fullCanvasWidth);
+    }
+
+    // Pulse phase ∈ [0, 1) derived from wall-clock time so cards lerp
+    // their border colour on the same beat regardless of how often
+    // render() fires. The animation tick (`ANIMATION_TICK_MS`) only
+    // controls render cadence — it does not advance the phase.
+    const pulsePhase = (Date.now() % PULSE_PERIOD_MS) / PULSE_PERIOD_MS;
+
+    // 1. Plot parent → child edges into a sparse char canvas so they
+    //    survive crisp through column gaps. Node-card bodies overwrite
+    //    edge cells per-row when we compose the final output below.
+    const edgeCanvas = new GraphCanvas();
+    const edgeColor = this.graphTheme.borderDim;
+    const nodeByStageId = new Map(
+      this.cachedLayout.map((n) => [n.stage.id, n]),
+    );
+    for (const node of this.cachedLayout) {
+      for (const parentId of node.stage.parentIds) {
+        const parent = nodeByStageId.get(parentId);
+        if (!parent) continue;
+        this._plotEdge(
+          edgeCanvas,
+          parent.x,
+          parent.y,
+          node.x,
+          node.y,
+          edgeColor,
+        );
+      }
+    }
+    const edgeLines = edgeCanvas.toLines();
+
+    // 2. Render each node card and record its row span / start column.
+    const placements: Map<number, Placement[]> = new Map();
+    for (let ni = 0; ni < this.cachedLayout.length; ni++) {
+      const node = this.cachedLayout[ni]!;
+      const focused = ni === this.focusedIndex;
+      const cardLines = renderNodeCard(node.stage, {
+        width: NODE_W,
+        height: NODE_H,
+        focused,
+        pulsePhase,
+        theme: this.graphTheme,
+        stages: this.cachedLayout.map((layoutNode) => layoutNode.stage),
+      });
+      for (let li = 0; li < cardLines.length; li++) {
+        const rowIdx = node.y + li;
+        let bucket = placements.get(rowIdx);
+        if (!bucket) {
+          bucket = [];
+          placements.set(rowIdx, bucket);
+        }
+        bucket.push({ startCol: node.x, width: NODE_W, line: cardLines[li]! });
+      }
+    }
+
+    // 3. Compose each output row by interleaving edge segments with the
+    //    card placements at their assigned columns.
+    const totalRows = Math.max(
+      edgeLines.length,
+      ...this.cachedLayout.map((n) => n.y + NODE_H),
+    );
+    const composed: string[] = [];
+    for (let rowIdx = 0; rowIdx < totalRows; rowIdx++) {
+      const edgeRowChars = this._edgeRowToCells(edgeLines[rowIdx] ?? "");
+      const cards = placements.get(rowIdx) ?? [];
+      composed.push(this._composeRow(edgeRowChars, cards, edgeColor));
+    }
+
+    // Pad the full graph canvas, then crop a horizontal viewport when the
+    // fan-out is wider than the terminal. Cards/edges only paint cells they
+    // occupy; everywhere else needs explicit bg so default terminal colours
+    // never leak through.
+    const bg = hexBg(this.graphTheme.bg);
+    const leftPad = `${bg}${" ".repeat(leftMargin)}${RESET}`;
+    return composed.map((line) => {
+      const full = this._padCanvas(line, fullCanvasWidth);
+      const sliced = this._sliceColumns(
+        full,
+        this.graphScrollColOffset,
+        this.graphScrollColOffset + viewportWidth,
+      );
+      return `${leftPad}${this._padCanvas(sliced, viewportWidth)}`;
+    });
+  }
+
+  protected _visibleGraphLines(
+    graphLines: string[],
+    frameWidth: number,
+    bodyRows: number,
+  ): { lines: string[]; topPad: number } {
+    if (graphLines.length <= bodyRows) {
+      this.graphScrollOffset = 0;
+      this.pendingEnsureFocusedVisible = false;
+      return {
+        lines: graphLines,
+        topPad: Math.min(3, Math.max(0, Math.floor((bodyRows - graphLines.length) / 2))),
+      };
+    }
+
+    this._clampGraphScroll(graphLines.length, bodyRows);
+    if (this.pendingEnsureFocusedVisible) {
+      this._scrollFocusedIntoView(frameWidth, bodyRows, graphLines.length);
+      this.pendingEnsureFocusedVisible = false;
+    }
+    this._clampGraphScroll(graphLines.length, bodyRows);
+    return {
+      lines: graphLines.slice(
+        this.graphScrollOffset,
+        this.graphScrollOffset + bodyRows,
+      ),
+      topPad: 0,
+    };
+  }
+
+}