@bastani/atomic 0.5.0-1

package/src/sdk/components/connectors.ts

@@ -0,0 +1,156 @@
+// ─── Connectors ───────────────────────────────────
+
+import type { GraphTheme } from "./graph-theme.ts";
+import { NODE_W, NODE_H, type LayoutNode } from "./layout.ts";
+
+export interface ConnectorResult {
+  text: string;
+  col: number;
+  row: number;
+  width: number;
+  height: number;
+  color: string;
+}
+
+/** Fan-out connector: one parent branching down to one or more tree children. */
+export function buildConnector(
+  parent: LayoutNode,
+  rowH: Record<number, number>,
+  theme: GraphTheme,
+): ConnectorResult | null {
+  if (parent.children.length === 0) return null;
+
+  const pcx = parent.x + Math.floor(NODE_W / 2);
+  const parentBottom = parent.y + (rowH[parent.depth] ?? NODE_H);
+  const firstChildRow = Math.min(...parent.children.map((c: LayoutNode) => c.y));
+  const numRows = firstChildRow - parentBottom;
+  if (numRows < 1) return null;
+
+  const childCxs = parent.children.map((c: LayoutNode) => c.x + Math.floor(NODE_W / 2));
+  const isStraight = parent.children.length === 1 && childCxs[0] === pcx;
+
+  // Straight drop: single child directly below
+  if (isStraight) {
+    const text = Array(numRows).fill("│").join("\n");
+    return {
+      text,
+      col: pcx,
+      row: parentBottom,
+      width: 1,
+      height: numRows,
+      color: theme.borderActive,
+    };
+  }
+
+  // Branching: horizontal bar connecting all children
+  const allCols = [pcx, ...childCxs];
+  const minCol = Math.min(...allCols);
+  const maxCol = Math.max(...allCols);
+  const width = maxCol - minCol + 1;
+  const toL = (c: number) => c - minCol;
+
+  const barRow = numRows - 1;
+  const grid: string[][] = Array.from({ length: numRows }, () => Array(width).fill(" "));
+
+  // Vertical stem from parent center down to bar
+  for (let r = 0; r < barRow; r++) grid[r]![toL(pcx)] = "│";
+
+  // Horizontal bar
+  for (let c = 0; c < width; c++) grid[barRow]![c] = "─";
+
+  // Parent junction on bar
+  const childAtParent = childCxs.includes(pcx);
+  const pl = toL(pcx);
+  if (pcx === minCol) {
+    grid[barRow]![pl] = childAtParent ? "├" : "╰";
+  } else if (pcx === maxCol) {
+    grid[barRow]![pl] = childAtParent ? "┤" : "╯";
+  } else {
+    grid[barRow]![pl] = childAtParent ? "┼" : "┴";
+  }
+
+  // Child junctions on bar
+  for (const cx of childCxs) {
+    if (cx === pcx) continue;
+    const cl = toL(cx);
+    if (cx === minCol) grid[barRow]![cl] = "╭";
+    else if (cx === maxCol) grid[barRow]![cl] = "╮";
+    else grid[barRow]![cl] = "┬";
+  }
+
+  return {
+    text: grid.map((row) => row.join("")).join("\n"),
+    col: minCol,
+    row: parentBottom,
+    width,
+    height: numRows,
+    color: theme.borderActive,
+  };
+}
+
+/** Fan-in connector: multiple parents converging down to a single merge child. */
+export function buildMergeConnector(
+  child: LayoutNode,
+  rowH: Record<number, number>,
+  allNodes: Record<string, LayoutNode>,
+  theme: GraphTheme,
+): ConnectorResult | null {
+  if (child.parents.length < 2) return null;
+
+  const parentNodes = child.parents
+    .map((p) => allNodes[p])
+    .filter((n): n is LayoutNode => n != null);
+  if (parentNodes.length < 2) return null;
+
+  const parentCxs = parentNodes.map((p) => p.x + Math.floor(NODE_W / 2));
+  const childCx = child.x + Math.floor(NODE_W / 2);
+
+  const parentBottom = Math.max(
+    ...parentNodes.map((p) => p.y + (rowH[p.depth] ?? NODE_H)),
+  );
+  const childTop = child.y;
+  const numRows = childTop - parentBottom;
+  if (numRows < 1) return null;
+
+  const allCols = [...parentCxs, childCx];
+  const minCol = Math.min(...allCols);
+  const maxCol = Math.max(...allCols);
+  const width = maxCol - minCol + 1;
+  const toL = (c: number) => c - minCol;
+
+  const grid: string[][] = Array.from({ length: numRows }, () => Array(width).fill(" "));
+
+  // Bar at the top row — parents converge here
+  const barRow = 0;
+  for (let c = 0; c < width; c++) grid[barRow]![c] = "─";
+
+  // Vertical stem from bar down to child
+  for (let r = barRow + 1; r < numRows; r++) grid[r]![toL(childCx)] = "│";
+
+  // Junction characters on the bar
+  const parentSet = new Set(parentCxs);
+  for (const cx of allCols) {
+    const cl = toL(cx);
+    const hasUp = parentSet.has(cx);
+    const hasDown = cx === childCx;
+    const isLeft = cx === minCol;
+    const isRight = cx === maxCol;
+
+    if (hasUp && hasDown) {
+      grid[barRow]![cl] = isLeft ? "├" : isRight ? "┤" : "┼";
+    } else if (hasUp) {
+      grid[barRow]![cl] = isLeft ? "╰" : isRight ? "╯" : "┴";
+    } else if (hasDown) {
+      grid[barRow]![cl] = isLeft ? "╭" : isRight ? "╮" : "┬";
+    }
+  }
+
+  return {
+    text: grid.map((row) => row.join("")).join("\n"),
+    col: minCol,
+    row: parentBottom,
+    width,
+    height: numRows,
+    color: theme.borderActive,
+  };
+}

package/src/sdk/components/edge.tsx

@@ -0,0 +1,11 @@
+/** @jsxImportSource @opentui/react */
+
+import type { ConnectorResult } from "./connectors.ts";
+
+export function Edge({ text, col, row, width, height, color: edgeColor }: ConnectorResult) {
+  return (
+    <box position="absolute" left={col} top={row} width={width} height={height}>
+      <text fg={edgeColor}>{text}</text>
+    </box>
+  );
+}

package/src/sdk/components/error-boundary.tsx

@@ -0,0 +1,38 @@
+/** @jsxImportSource @opentui/react */
+/**
+ * React Error Boundary for the orchestrator panel.
+ *
+ * Catches render-time errors in the component tree and displays a
+ * static fallback so the rest of the TUI doesn't crash.
+ */
+
+import { Component, type ReactNode, type ErrorInfo } from "react";
+
+interface ErrorBoundaryProps {
+  fallback: (error: Error) => ReactNode;
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  override state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
+    // Log to stderr so it lands in the orchestrator log file
+    console.error("[ErrorBoundary]", error, info.componentStack);
+  }
+
+  override render(): ReactNode {
+    if (this.state.error) {
+      return this.props.fallback(this.state.error);
+    }
+    return this.props.children;
+  }
+}

package/src/sdk/components/graph-theme.ts

@@ -0,0 +1,36 @@
+// ─── Graph Theme ──────────────────────────────────
+
+import type { TerminalTheme } from "../runtime/theme.ts";
+import { lerpColor } from "./color-utils.ts";
+
+export interface GraphTheme {
+  background: string;
+  backgroundElement: string;
+  text: string;
+  textMuted: string;
+  textDim: string;
+  primary: string;
+  success: string;
+  error: string;
+  warning: string;
+  info: string;
+  border: string;
+  borderActive: string;
+}
+
+export function deriveGraphTheme(t: TerminalTheme): GraphTheme {
+  return {
+    background: t.bg,
+    backgroundElement: t.surface,
+    text: t.text,
+    textMuted: lerpColor(t.text, t.bg, 0.3),
+    textDim: t.dim,
+    primary: t.accent,
+    success: t.success,
+    error: t.error,
+    warning: t.warning,
+    info: t.accent,
+    border: t.borderDim,
+    borderActive: t.border,
+  };
+}

package/src/sdk/components/header.tsx

@@ -0,0 +1,60 @@
+/** @jsxImportSource @opentui/react */
+
+import type { SessionStatus } from "./orchestrator-panel-types.ts";
+import { useStore, useGraphTheme } from "./orchestrator-panel-contexts.ts";
+
+export function Header() {
+  const store = useStore();
+  const theme = useGraphTheme();
+
+  const counts: Record<SessionStatus, number> = { complete: 0, running: 0, pending: 0, error: 0 };
+  for (const s of store.sessions) counts[s.status]++;
+
+  const isFailed = store.fatalError !== null;
+  const isDone = store.completionInfo !== null;
+  const badgeColor = isFailed ? theme.error : isDone ? theme.success : theme.info;
+  const badgeText = isFailed
+    ? " \u2717 Failed "
+    : isDone
+      ? ` \u2713 ${store.workflowName} `
+      : " Orchestrator ";
+
+  return (
+    <box
+      height={1}
+      backgroundColor={theme.backgroundElement}
+      flexDirection="row"
+      paddingRight={2}
+      alignItems="center"
+    >
+      <text>
+        <span fg={theme.backgroundElement} bg={badgeColor}>
+          <strong>{badgeText}</strong>
+        </span>
+      </text>
+
+      <box flexGrow={1} justifyContent="flex-end" flexDirection="row" gap={2}>
+        {counts.complete > 0 ? (
+          <text>
+            <span fg={theme.success}>{"\u2713"} {counts.complete}</span>
+          </text>
+        ) : null}
+        {counts.running > 0 ? (
+          <text>
+            <span fg={theme.warning}>{"\u25CF"} {counts.running}</span>
+          </text>
+        ) : null}
+        {counts.pending > 0 ? (
+          <text>
+            <span fg={theme.textDim}>{"\u25CB"} {counts.pending}</span>
+          </text>
+        ) : null}
+        {counts.error > 0 ? (
+          <text>
+            <span fg={theme.error}>{"\u2717"} {counts.error}</span>
+          </text>
+        ) : null}
+      </box>
+    </box>
+  );
+}