@bastani/atomic 0.8.21 → 0.8.22-0

package/dist/builtin/workflows/src/tui/store-widget-installer.ts

@@ -40,6 +40,15 @@
  *      live Atomic widgets without reintroducing a high-frequency spinner.
  */
 
+import {
+  decideReactiveWidgetAction,
+  installReactiveWidget,
+  type ReactiveWidgetAction,
+  type ReactiveWidgetFactory,
+  type ReactiveWidgetRenderState,
+  type ReactiveWidgetTimerApi,
+  type ReactiveWidgetTimerHandle,
+} from "@bastani/atomic";
 import type { Store } from "../shared/store.js";
 import type { StoreSnapshot } from "../shared/store-types.js";
 import { buildThemedWidgetLines, nextWidgetRefreshDelayMs } from "./widget.js";
@@ -49,15 +58,9 @@ export interface PiTheme {
   bold(text: string): string;
 }
 
-export type WidgetFactory = (
-  tui: unknown,
-  theme: PiTheme | unknown,
-) => Component & { dispose?(): void };
-
-export interface Component {
-  render(width: number): string[];
-  dispose?(): void;
-}
+export type WidgetFactory = ReactiveWidgetFactory<unknown>;
+export type WidgetAction = ReactiveWidgetAction;
+export type WidgetRenderState = ReactiveWidgetRenderState;
 
 interface UiSlice {
   setWidget?: (
@@ -68,14 +71,8 @@ interface UiSlice {
   requestRender?: () => void;
 }
 
-interface TimerHandle {
-  unref?: () => void;
-}
-
-interface TimerApi {
-  setTimeout(handler: () => void, delayMs: number): TimerHandle;
-  clearTimeout(handle: TimerHandle): void;
-}
+interface TimerApi extends ReactiveWidgetTimerApi {}
+interface TimerHandle extends ReactiveWidgetTimerHandle {}
 
 const defaultTimerApi: TimerApi = {
   setTimeout: (handler, delayMs) => setTimeout(handler, delayMs) as TimerHandle,
@@ -97,59 +94,11 @@ function isStale(err: unknown): boolean {
   return err instanceof Error && err.message.includes(STALE_CONTEXT);
 }
 
-/** The four ways a refresh can reach (or skip) the terminal. */
-export type WidgetAction = "mount" | "unmount" | "update" | "none";
-
-export interface WidgetRenderState {
-  /** Whether the widget is currently mounted (factory installed via setWidget). */
-  readonly mounted: boolean;
-  /** Plain preview lines last rendered while mounted (empty when not mounted). */
-  readonly lines: readonly string[];
-}
-
-function linesEqual(a: readonly string[], b: readonly string[]): boolean {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}
-
-/**
- * Pure decision: given the previous mount state + previously rendered lines
- * and the next preview lines, decide how a refresh should reach the terminal.
- *  - hidden  → visible             => "mount"   (setWidget(factory))
- *  - visible → hidden              => "unmount" (setWidget(undefined))
- *  - visible → visible, changed    => "update"  (requestRender only — no remount)
- *  - visible → visible, identical  => "none"    (skip the redundant repaint)
- *  - hidden  → hidden              => "none"
- *
- * No UI/terminal dependency, so it is unit-testable without a real terminal.
- */
 export function decideWidgetAction(
   prev: WidgetRenderState,
   nextLines: readonly string[],
 ): WidgetAction {
-  const nextVisible = nextLines.length > 0;
-  if (!prev.mounted) return nextVisible ? "mount" : "none";
-  if (!nextVisible) return "unmount";
-  return linesEqual(prev.lines, nextLines) ? "none" : "update";
-}
-
-/**
- * Build the long-lived widget factory closure. Pi invokes the factory once
- * with `(this.ui, theme)` at mount; the returned component is reused across
- * renders. It closes over a *live* snapshot getter rather than a captured
- * snapshot, so each `requestRender()` recomputes lines from the latest
- * snapshot (and a fresh `Date.now()`) with no dispose/remount.
- */
-function widgetFactory(getSnap: () => StoreSnapshot): WidgetFactory {
-  return (_tui, theme) => {
-    return {
-      render: (width: number) =>
-        buildThemedWidgetLines(getSnap(), theme as PiTheme | undefined, width),
-    };
-  };
+  return decideReactiveWidgetAction(prev, nextLines);
 }
 
 export function installStoreWidget(
@@ -160,96 +109,25 @@ export function installStoreWidget(
   const ui = pi.ui;
   if (!ui?.setWidget) return () => {};
 
-  let disposed = false;
-  let refreshTimer: TimerHandle | undefined;
-  // In-place widget state: whether the long-lived component is mounted, the
-  // latest snapshot it should render, and the last plain preview lines used
-  // to detect no-op refreshes.
-  let mounted = false;
-  let currentSnap: StoreSnapshot;
-  let lastLines: readonly string[] = [];
-
-  const clearRefreshTimer = (): void => {
-    if (refreshTimer === undefined) return;
-    timers.clearTimeout(refreshTimer);
-    refreshTimer = undefined;
-  };
-
-  const scheduleRefresh = (snap: StoreSnapshot): void => {
-    const delayMs = nextWidgetRefreshDelayMs(snap);
-    if (delayMs === undefined) return;
-    refreshTimer = timers.setTimeout(() => {
-      refreshTimer = undefined;
-      rerender();
-    }, delayMs);
-    refreshTimer.unref?.();
-  };
-
-  const rerender = (): void => {
-    if (disposed) return;
-    clearRefreshTimer();
-    try {
-      currentSnap = storeInstance.snapshot();
-      const nextLines = buildThemedWidgetLines(currentSnap, undefined);
-      const action = decideWidgetAction({ mounted, lines: lastLines }, nextLines);
-
-      switch (action) {
-        case "mount":
-          // Mount the single long-lived component. It reads `currentSnap`
-          // through the getter on every subsequent render, so we never need
-          // to re-issue setWidget to refresh content.
-          ui.setWidget?.(WIDGET_KEY, widgetFactory(() => currentSnap), {
-            // belowEditor (not aboveEditor): the widget renders a live elapsed
-            // clock that re-renders every second. pi-tui's differential
-            // renderer does a full screen+scrollback clear whenever a *changed*
-            // line sits ABOVE the viewport fold (tui.js `firstChanged <
-            // prevViewportTop -> fullRender(true)`). An aboveEditor widget is
-            // pushed above the fold when the bottom region (usage meter,
-            // multi-line editor, below-editor widgets, footer) grows tall,
-            // so each clock tick then repainted the whole screen — the resize
-            // flicker in #1109. belowEditor keeps the widget among the last
-            // rendered lines (always within the bottom viewport), so its
-            // per-second tick is a clean in-place differential redraw.
-            placement: "belowEditor",
-          });
-          ui.requestRender?.();
-          mounted = true;
-          break;
-        case "unmount":
-          ui.setWidget?.(WIDGET_KEY, undefined);
-          ui.requestRender?.();
-          mounted = false;
-          break;
-        case "update":
-          // In place — NO setWidget, NO dispose/remount (the #1109 flicker fix).
-          ui.requestRender?.();
-          break;
-        case "none":
-          break;
-      }
-
-      lastLines = nextLines;
-      scheduleRefresh(currentSnap);
-    } catch (err) {
-      if (isStale(err)) return;
-      throw err;
-    }
-  };
-
-  const unsubscribe = storeInstance.subscribe(() => rerender());
-  rerender();
-
-  return () => {
-    disposed = true;
-    clearRefreshTimer();
-    unsubscribe();
-    try {
-      ui.setWidget?.(WIDGET_KEY, undefined);
-      ui.requestRender?.();
-    } catch (err) {
-      if (!isStale(err)) throw err;
-    }
-  };
+  const requestRender = ui.requestRender;
+  const controller = installReactiveWidget<StoreSnapshot, unknown>({
+    ui: {
+      setWidget: (key, factory, opts) => ui.setWidget?.(key, factory, opts),
+      ...(requestRender ? { requestRender: () => requestRender.call(ui) } : {}),
+    },
+    key: WIDGET_KEY,
+    placement: "belowEditor",
+    timers,
+    getSnapshot: () => storeInstance.snapshot(),
+    subscribe: (listener) => storeInstance.subscribe(() => listener()),
+    getPreviewLines: (snap, now) => buildThemedWidgetLines(snap, undefined, 120, now),
+    render: (snap, { theme, width, now }) =>
+      buildThemedWidgetLines(snap, theme as PiTheme | undefined, width, now),
+    getNextRefreshDelayMs: (snap, now) => nextWidgetRefreshDelayMs(snap, now),
+    isStaleError: isStale,
+  });
+
+  return () => controller.dispose();
 }
 
 interface ToolExecutionStartPayload {
@@ -372,7 +250,8 @@ export function installToolExecutionHooks(pi: LiveWidgetAPI, storeInstance: Stor
   function recordToolEnd(payload: unknown): void {
     if (!isToolExecutionPayload(payload)) return;
 
-    const ids = findActiveAskCall(payload) ?? resolveIds(payload, true);
+    const activeAskCall = findActiveAskCall(payload);
+    const ids = activeAskCall ?? resolveIds(payload, false);
     if (!ids) return;
 
     storeInstance.recordToolEnd(ids.runId, ids.stageId, {
@@ -382,7 +261,7 @@ export function installToolExecutionHooks(pi: LiveWidgetAPI, storeInstance: Stor
       endedAt: payload.endedAt ?? payload.ended_at ?? Date.now(),
       output: payload.output,
     });
-    recordAskUserQuestionEnd(payload, ids);
+    recordAskUserQuestionEnd(payload, activeAskCall ?? ids);
   }
 
   const safeStart = safelyHandle(recordToolStart);

package/dist/builtin/workflows/src/tui/toast.ts

@@ -3,8 +3,8 @@
  *
  * Visual: solid status-coloured pill (`success`/`warning`/`info`/`error`)
  * with `backgroundElement` foreground and bold weight — same vocabulary as
- * the header pill (DESIGN.md §5 Mode Pills). Icon glyphs from the canonical
- * Unicode set (`✓ ✗ ⚠ ℹ`).
+ * the header pill (DESIGN.md §5 Mode Pills). Icon glyphs use the same
+ * cross-platform text symbols as the rest of the workflow UI (`✓ ✗ ⚠ ℹ`).
  */
 import type { GraphTheme } from "./graph-theme.js";
 import { hexBg, hexToAnsi, RESET, BOLD } from "./color-utils.js";

package/dist/builtin/workflows/src/tui/widget.ts

@@ -27,12 +27,14 @@ import type {
   RunSnapshot,
 } from "../shared/store-types.js";
 import { elapsedRunMs } from "../shared/timing.js";
+import { topLevelWorkflowRuns } from "../shared/run-visibility.js";
 import type { PiTheme } from "./store-widget-installer.js";
 import { renderRoundedBoxLines } from "./chat-surface.js";
 import type { FlatBandBadge } from "./chat-surface.js";
 import { deriveGraphTheme } from "./graph-theme.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { hexToAnsi, RESET, BOLD } from "./color-utils.js";
+import { statusIcon } from "./status-helpers.js";
 
 // ---------------------------------------------------------------------------
 // Tunables
@@ -81,17 +83,36 @@ interface RunCounts {
   awaiting: number;
 }
 
-function countRuns(runs: readonly RunSnapshot[]): RunCounts {
+function runAwaitsInput(run: RunSnapshot): boolean {
+  return (
+    run.endedAt === undefined &&
+    (run.pendingPrompt !== undefined || run.stages.some((s) => s.status === "awaiting_input"))
+  );
+}
+
+/**
+ * A top-level run "needs attention" when it OR any of its nested
+ * `ctx.workflow()` descendants is awaiting human input. Nested child runs are
+ * hidden from the widget, but each carries `rootRunId` pointing at the ultimate
+ * top-level run, so a hidden child's awaiting (HiL) state surfaces on the
+ * visible ancestor instead of vanishing with it.
+ */
+function subtreeAwaitsInput(root: RunSnapshot, allRuns: readonly RunSnapshot[]): boolean {
+  if (runAwaitsInput(root)) return true;
+  return allRuns.some((run) => run.rootRunId === root.id && runAwaitsInput(run));
+}
+
+function countRuns(
+  runs: readonly RunSnapshot[],
+  allRuns: readonly RunSnapshot[] = runs,
+): RunCounts {
   const counts: RunCounts = { active: 0, paused: 0, done: 0, failed: 0, awaiting: 0 };
   for (const r of runs) {
     if (r.endedAt === undefined && r.status === "paused") counts.paused++;
     else if (r.endedAt === undefined) counts.active++;
     else if (r.status === "completed") counts.done++;
     else if (r.status === "failed" || r.status === "killed") counts.failed++;
-    if (
-      r.endedAt === undefined &&
-      (r.pendingPrompt !== undefined || r.stages.some((s) => s.status === "awaiting_input"))
-    ) {
+    if (r.endedAt === undefined && subtreeAwaitsInput(r, allRuns)) {
       counts.awaiting++;
     }
   }
@@ -120,7 +141,12 @@ export function nextWidgetRefreshDelayMs(
 }
 
 function selectDisplayRuns(snap: StoreSnapshot, now: number): RunSnapshot[] {
-  const all = snap.runs as readonly RunSnapshot[];
+  // Only surface top-level workflows. Nested `ctx.workflow()` child runs carry
+  // a `parentRunId`, and they are already represented inline as flattened
+  // stages of their parent's graph, so listing them here would show the same
+  // composition three times (root + parent + child). Matches the visibility
+  // rule `statusRuns`/the `status` action already apply.
+  const all = topLevelWorkflowRuns(snap.runs);
   const active = all.filter((r) => isActive(r));
   const recent = all.filter((r) => recentlyEnded(r, now));
   // Most recently started first within each bucket; active runs precede recent.
@@ -223,10 +249,10 @@ function countBadges(counts: RunCounts, theme: GraphTheme): FlatBandBadge[] {
     badges.push({ text: `❚❚ ${counts.paused} paused`, fg: theme.warning });
   }
   // Awaiting input is shown in Sky per DESIGN.md status semantics: a live
-  // human-in-the-loop request that requires attention. Spell it out in the
-  // widget title instead of relying on the ↵ glyph alone.
+  // human-in-the-loop request that requires attention. Mirror the graph node's
+  // question-mark status glyph, then keep ↵ as the attach/respond action hint.
   if (counts.awaiting > 0) {
-    badges.push({ text: `↵ ${counts.awaiting} needs attention (attach to workflow with \`/workflow connect\`)`, fg: theme.info });
+    badges.push({ text: `${statusIcon("awaiting_input")} ↵ ${counts.awaiting} needs attention (attach to workflow with \`/workflow connect\`)`, fg: theme.info });
   }
   if (counts.done > 0) {
     badges.push({ text: `✓ ${counts.done} complete`, fg: theme.success });
@@ -237,6 +263,20 @@ function countBadges(counts: RunCounts, theme: GraphTheme): FlatBandBadge[] {
   return badges;
 }
 
+function formatTitleBadges(
+  badges: readonly FlatBandBadge[],
+  theme: GraphTheme,
+  themed: boolean,
+): string {
+  if (badges.length === 0) return "";
+  if (!themed) return badges.map((b) => b.text).join("  ");
+
+  const fallbackFg = hexToAnsi(theme.border);
+  return badges
+    .map((b) => `${b.fg ? hexToAnsi(b.fg) : fallbackFg}${b.text}${RESET}${fallbackFg}`)
+    .join("  ");
+}
+
 // ---------------------------------------------------------------------------
 // Themed rendering (ANSI + Catppuccin)
 // ---------------------------------------------------------------------------
@@ -313,12 +353,12 @@ export function buildThemedWidgetLines(
   snap: StoreSnapshot,
   piTheme: PiTheme | undefined,
   width = 120,
+  now = Date.now(),
 ): string[] {
-  const now = Date.now();
   const display = selectDisplayRuns(snap, now);
   if (display.length === 0) return [];
 
-  const counts = countRuns(snap.runs as readonly RunSnapshot[]);
+  const counts = countRuns(topLevelWorkflowRuns(snap.runs), snap.runs);
   // Active + recently-ended dominate the badge counts so a finished run
   // visually persists for a beat before dropping off.
   const visibleCounts: RunCounts = {
@@ -340,7 +380,8 @@ export function buildThemedWidgetLines(
   const total = counts.active + counts.paused + counts.done + counts.failed;
   const subtitle = `${total} run${total === 1 ? "" : "s"}`;
 
-  const badges = countBadges(visibleCounts, graphTheme).map((b) => b.text).join("  ");
+  const badgeList = countBadges(visibleCounts, graphTheme);
+  const badges = formatTitleBadges(badgeList, graphTheme, themed);
   const title = `BACKGROUND  ${subtitle}${badges ? `  ${badges}` : ""}`;
   const body: string[] = [];