@bastani/atomic 0.5.0-1

package/src/sdk/components/layout.ts

@@ -0,0 +1,186 @@
+// ─── Layout ───────────────────────────────────────
+
+import type { SessionData, SessionStatus } from "./orchestrator-panel-types.ts";
+
+// ─── Layout Constants ─────────────────────────────
+
+export const NODE_W = 36;
+export const NODE_H = 4;
+export const H_GAP = 6;
+export const V_GAP = 3;
+export const PAD = 3;
+
+// ─── Layout Types ─────────────────────────────────
+
+export interface LayoutNode {
+  name: string;
+  status: SessionStatus;
+  parents: string[];
+  error?: string;
+  startedAt: number | null;
+  endedAt: number | null;
+  children: LayoutNode[];
+  depth: number;
+  x: number;
+  y: number;
+}
+
+export interface LayoutResult {
+  roots: LayoutNode[];
+  map: Record<string, LayoutNode>;
+  rowH: Record<number, number>;
+  width: number;
+  height: number;
+}
+
+// ─── Layout Helpers ──────────────────────────────
+
+/** Shift a node and all its tree descendants by `dx` pixels horizontally. */
+function shiftSubtree(n: LayoutNode, dx: number): void {
+  n.x += dx;
+  for (const c of n.children) shiftSubtree(c, dx);
+}
+
+/**
+ * Walk every depth level and push overlapping nodes apart.
+ * Merge-node shifts can cause a sub-tree to land on top of nodes that
+ * were already placed by the root-tree pass.  This resolves those
+ * collisions by nudging the rightmost overlapping node (and its
+ * descendants) to the right.
+ */
+function resolveOverlaps(map: Record<string, LayoutNode>): void {
+  const byDepth: Record<number, LayoutNode[]> = {};
+  for (const n of Object.values(map)) {
+    (byDepth[n.depth] ??= []).push(n);
+  }
+
+  const depths = Object.keys(byDepth).map(Number).sort((a, b) => a - b);
+  for (const d of depths) {
+    const nodes = byDepth[d]!;
+    if (nodes.length < 2) continue;
+    nodes.sort((a, b) => a.x - b.x);
+    for (let i = 1; i < nodes.length; i++) {
+      const prev = nodes[i - 1]!;
+      const curr = nodes[i]!;
+      const minX = prev.x + NODE_W + H_GAP;
+      if (curr.x < minX) {
+        shiftSubtree(curr, minX - curr.x);
+      }
+    }
+  }
+}
+
+// ─── Layout Computation ───────────────────────────
+
+export function computeLayout(sessions: SessionData[]): LayoutResult {
+  const map: Record<string, LayoutNode> = {};
+  const roots: LayoutNode[] = [];
+  const mergeNodes: LayoutNode[] = [];
+
+  for (const s of sessions) {
+    map[s.name] = {
+      name: s.name,
+      status: s.status,
+      parents: s.parents,
+      error: s.error,
+      startedAt: s.startedAt,
+      endedAt: s.endedAt,
+      children: [],
+      depth: 0,
+      x: 0,
+      y: 0,
+    };
+  }
+
+  // Classify: single-parent → tree child, multi-parent → merge node, no parent → root
+  for (const s of sessions) {
+    if (s.parents.length > 1) {
+      mergeNodes.push(map[s.name]!);
+    } else if (s.parents.length === 1 && map[s.parents[0]!]) {
+      map[s.parents[0]!]!.children.push(map[s.name]!);
+    } else {
+      roots.push(map[s.name]!);
+    }
+  }
+
+  function setDepth(n: LayoutNode, d: number) {
+    n.depth = d;
+    for (const c of n.children) setDepth(c, d + 1);
+  }
+  for (const r of roots) setDepth(r, 0);
+
+  // Merge nodes: depth = max(parent depths) + 1, then recurse into children
+  for (const m of mergeNodes) {
+    const maxParentDepth = Math.max(...m.parents.map((p) => map[p]?.depth ?? 0));
+    setDepth(m, maxParentDepth + 1);
+  }
+
+  const rowH: Record<number, number> = {};
+  for (const n of Object.values(map)) {
+    rowH[n.depth] = Math.max(rowH[n.depth] ?? 0, NODE_H);
+  }
+
+  function yAt(d: number): number {
+    let y = 0;
+    for (let i = 0; i < d; i++) y += (rowH[i] ?? NODE_H) + V_GAP;
+    return y;
+  }
+
+  let cursor = 0;
+
+  function place(n: LayoutNode) {
+    if (n.children.length === 0) {
+      n.x = cursor;
+      n.y = yAt(n.depth);
+      cursor += NODE_W + H_GAP;
+    } else {
+      for (const c of n.children) place(c);
+      const first = n.children[0]!;
+      const last = n.children[n.children.length - 1]!;
+      n.x = Math.round((first.x + last.x) / 2);
+      n.y = yAt(n.depth);
+    }
+  }
+
+  let firstRoot = true;
+  for (const r of roots) {
+    if (!firstRoot) cursor += H_GAP;
+    place(r);
+    firstRoot = false;
+  }
+
+  // Place merge nodes centered under all parents (and their sub-trees)
+  for (const m of mergeNodes) {
+    const parentCenters = m.parents.map((p) => (map[p]?.x ?? 0) + Math.floor(NODE_W / 2));
+    const avgCenter = Math.round(parentCenters.reduce((a, b) => a + b, 0) / parentCenters.length);
+
+    if (m.children.length > 0) {
+      // Place sub-tree first, then shift to center under parents
+      place(m);
+      const currentCenter = m.x + Math.floor(NODE_W / 2);
+      const dx = avgCenter - currentCenter;
+      shiftSubtree(m, dx);
+    } else {
+      m.x = avgCenter - Math.floor(NODE_W / 2);
+      m.y = yAt(m.depth);
+    }
+  }
+
+  // Resolve horizontal overlaps that merge-node shifts may have introduced.
+  // Process depths in ascending order so child shifts cascade correctly.
+  resolveOverlaps(map);
+
+  for (const n of Object.values(map)) {
+    n.x += PAD;
+    n.y += PAD;
+  }
+
+  let maxX = 0;
+  let maxY = 0;
+  for (const n of Object.values(map)) {
+    maxX = Math.max(maxX, n.x + NODE_W);
+    maxY = Math.max(maxY, n.y + NODE_H);
+  }
+
+  return { roots, map, rowH, width: maxX + PAD, height: maxY + PAD };
+}

package/src/sdk/components/node-card.tsx

@@ -0,0 +1,68 @@
+/** @jsxImportSource @opentui/react */
+
+import { lerpColor } from "./color-utils.ts";
+import { useGraphTheme } from "./orchestrator-panel-contexts.ts";
+import { statusColor, fmtDuration } from "./status-helpers.ts";
+import { NODE_W, type LayoutNode } from "./layout.ts";
+
+export function NodeCard({
+  node,
+  focused,
+  pulsePhase,
+  displayH,
+}: {
+  node: LayoutNode;
+  focused: boolean;
+  pulsePhase: number;
+  displayH: number;
+}) {
+  const theme = useGraphTheme();
+  const sc = statusColor(node.status, theme);
+  const isPending = node.status === "pending";
+  const isRunning = node.status === "running";
+
+  // Border: running nodes smoothly pulse, others show status color
+  let borderCol: string;
+  if (isRunning) {
+    const t = (Math.sin((pulsePhase / 32) * Math.PI * 2 - Math.PI / 2) + 1) / 2;
+    borderCol = focused
+      ? lerpColor(theme.warning, "#ffffff", 0.2)
+      : lerpColor(theme.border, theme.warning, t);
+  } else if (isPending) {
+    borderCol = focused ? sc : theme.borderActive;
+  } else {
+    borderCol = sc;
+  }
+
+  // Background: focused nodes get a subtle status-colored tint
+  const bgCol = focused ? lerpColor(theme.background, sc, 0.12) : "transparent";
+
+  // Duration computed live from start/end timestamps
+  const durCol = isPending ? theme.textDim : sc;
+  const duration =
+    node.startedAt !== null
+      ? fmtDuration((node.endedAt ?? Date.now()) - node.startedAt)
+      : "\u2014";
+
+  return (
+    <box
+      position="absolute"
+      left={node.x}
+      top={node.y}
+      width={NODE_W}
+      height={displayH}
+      border
+      borderStyle="rounded"
+      borderColor={borderCol}
+      backgroundColor={bgCol}
+      flexDirection="column"
+      justifyContent="center"
+      title={` ${node.name} `}
+      titleAlignment="center"
+    >
+      <box alignItems="center">
+        <text fg={durCol}>{duration}</text>
+      </box>
+    </box>
+  );
+}

package/src/sdk/components/orchestrator-panel-contexts.ts

@@ -0,0 +1,26 @@
+// ─── React Contexts & Hooks ───────────────────────
+
+import { createContext, useContext, useState, useEffect } from "react";
+import type { PanelStore } from "./orchestrator-panel-store.ts";
+import type { GraphTheme } from "./graph-theme.ts";
+
+export const StoreContext = createContext<PanelStore | null>(null);
+export const ThemeContext = createContext<GraphTheme | null>(null);
+export const TmuxSessionContext = createContext("");
+
+export function useStore(): PanelStore {
+  const ctx = useContext(StoreContext);
+  if (!ctx) throw new Error("useStore must be used within StoreContext.Provider");
+  return ctx;
+}
+
+export function useGraphTheme(): GraphTheme {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useGraphTheme must be used within ThemeContext.Provider");
+  return ctx;
+}
+
+export function useStoreSubscription(store: PanelStore): void {
+  const [, forceRender] = useState(0);
+  useEffect(() => store.subscribe(() => forceRender((c) => c + 1)), [store]);
+}