@bastani/atomic 0.6.6-1 → 0.6.7-0

package/src/sdk/components/orchestrator-panel.tsx

@@ -14,20 +14,39 @@ import { StoreContext, ThemeContext, TmuxSessionContext } from "./orchestrator-p
 import type { PanelSession, PanelOptions, SessionData } from "./orchestrator-panel-types.ts";
 import { SessionGraphPanel } from "./session-graph-panel.tsx";
 import { ErrorBoundary } from "./error-boundary.tsx";
+import {
+  requestRendererBackgroundRepaint,
+  resetRendererTerminalBackground,
+  setRendererBackground,
+} from "./renderer-background.ts";
+import { createTuiDiagnostics, type TuiDiagnostics } from "./tui-diagnostics.ts";
 
 export class OrchestratorPanel {
   private store: PanelStore;
   private renderer: CliRenderer;
   private destroyed = false;
+  private terminalBackgroundSynced: boolean;
+  private diagnostics: TuiDiagnostics | null = null;
+  private unsubscribeDiagnostics: (() => void) | null = null;
 
   private constructor(
     renderer: CliRenderer,
     store: PanelStore,
     graphTheme: GraphTheme,
     tmuxSession: string,
+    terminalBackgroundSynced: boolean,
   ) {
     this.renderer = renderer;
     this.store = store;
+    this.terminalBackgroundSynced = terminalBackgroundSynced;
+    this.diagnostics = createTuiDiagnostics({
+      renderer,
+      graphTheme,
+      getSnapshot: () => this.getDiagnosticSnapshot(),
+    });
+    this.unsubscribeDiagnostics = this.diagnostics
+      ? store.subscribe(() => this.diagnostics?.capture("store-update"))
+      : null;
 
     createRoot(renderer).render(
       <StoreContext.Provider value={store}>
@@ -56,6 +75,8 @@ export class OrchestratorPanel {
         </ThemeContext.Provider>
       </StoreContext.Provider>,
     );
+    requestRendererBackgroundRepaint(this.renderer);
+    this.diagnostics?.capture("post-mount");
   }
 
   /**
@@ -69,18 +90,20 @@ export class OrchestratorPanel {
       exitOnCtrlC: false,
       exitSignals: ["SIGTERM", "SIGQUIT", "SIGABRT", "SIGHUP", "SIGPIPE", "SIGBUS", "SIGFPE"],
     });
-    return OrchestratorPanel.createWithRenderer(renderer, options);
+    return OrchestratorPanel.createWithRenderer(renderer, options, { syncTerminalBackground: true });
   }
 
   /** Create with an externally-provided renderer (e.g. a test renderer). */
   static createWithRenderer(
     renderer: CliRenderer,
     options: PanelOptions,
+    { syncTerminalBackground = false }: { syncTerminalBackground?: boolean } = {},
   ): OrchestratorPanel {
     const termTheme = resolveTheme(renderer.themeMode);
+    setRendererBackground(renderer, termTheme.bg, { syncTerminalDefault: syncTerminalBackground });
     const graphTheme = deriveGraphTheme(termTheme);
     const store = new PanelStore();
-    return new OrchestratorPanel(renderer, store, graphTheme, options.tmuxSession);
+    return new OrchestratorPanel(renderer, store, graphTheme, options.tmuxSession, syncTerminalBackground);
   }
 
   /**
@@ -175,7 +198,15 @@ export class OrchestratorPanel {
   destroy(): void {
     if (this.destroyed) return;
     this.destroyed = true;
+    this.unsubscribeDiagnostics?.();
+    this.unsubscribeDiagnostics = null;
+    this.diagnostics?.capture("destroy");
+    this.diagnostics?.dispose();
+    this.diagnostics = null;
     try {
+      if (this.terminalBackgroundSynced) {
+        resetRendererTerminalBackground(this.renderer);
+      }
       this.renderer.destroy();
     } catch {}
   }
@@ -214,4 +245,18 @@ export class OrchestratorPanel {
       sessions: this.store.sessions,
     };
   }
+
+  private getDiagnosticSnapshot() {
+    return {
+      workflowName: this.store.workflowName,
+      agent: this.store.agent,
+      prompt: this.store.prompt,
+      fatalError: this.store.fatalError,
+      completionReached: this.store.completionReached,
+      sessions: this.store.sessions,
+      backgroundTaskCount: this.store.backgroundTaskCount,
+      viewMode: this.store.viewMode,
+      activeAgentId: this.store.activeAgentId,
+    };
+  }
 }

package/src/sdk/components/renderer-background.ts

@@ -0,0 +1,49 @@
+import type { CliRenderer } from "@opentui/core";
+
+export function setRendererBackground(
+  renderer: CliRenderer,
+  color: string,
+  { syncTerminalDefault = false }: { syncTerminalDefault?: boolean } = {},
+): void {
+  renderer.setBackgroundColor(color);
+  if (syncTerminalDefault) {
+    process.stdout.write(wrapForTmuxIfNeeded(terminalBackgroundColorSequence(color)));
+  }
+}
+
+export function requestRendererBackgroundRepaint(renderer: CliRenderer): void {
+  // OpenTUI 0.1.103+ no longer syncs the renderer background to the terminal
+  // default via OSC 11. Force the next frame so blank cells with this background
+  // are emitted instead of being skipped as unchanged initial buffer contents.
+  Object.assign(renderer, { forceFullRepaintRequested: true });
+  renderer.requestRender();
+}
+
+export function resetRendererTerminalBackground(renderer: CliRenderer): void {
+  if (process.env.TMUX) {
+    process.stdout.write(wrapForTmuxIfNeeded("\x1b]111\x07"));
+    return;
+  }
+
+  renderer.resetTerminalBgColor();
+}
+
+export function terminalBackgroundColorSequence(color: string): string {
+  const match = /^#?([0-9a-f]{6})$/i.exec(color);
+  if (!match) {
+    throw new Error(`Cannot sync terminal background for non-hex color: ${color}`);
+  }
+
+  const hex = match[1]!;
+  return `\x1b]11;rgb:${hex.slice(0, 2)}/${hex.slice(2, 4)}/${hex.slice(4, 6)}\x07`;
+}
+
+export function wrapForTmuxIfNeeded(sequence: string): string {
+  if (!process.env.TMUX) return sequence;
+
+  let escaped = "";
+  for (const char of sequence) {
+    escaped += char === "\x1b" ? "\x1b\x1b" : char;
+  }
+  return `\x1bPtmux;${escaped}\x1b\\`;
+}

package/src/sdk/components/session-graph-panel.tsx

@@ -433,9 +433,16 @@ export function SessionGraphPanel() {
           },
         }}
       >
-        <box width={canvasW} height={canvasH} position="relative">
+        <box width={canvasW} height={canvasH} position="relative" backgroundColor={theme.background}>
           {/* Offset all content by padding to center the graph */}
-          <box position="absolute" left={padX} top={padY} width={layout.width} height={layout.height}>
+          <box
+            position="absolute"
+            left={padX}
+            top={padY}
+            width={layout.width}
+            height={layout.height}
+            backgroundColor={theme.background}
+          >
             {/* Connectors (rendered behind nodes) */}
             {connectors.map((conn, i) => (
               <Edge key={`e${i}`} {...conn} />

package/src/sdk/components/statusline.tsx

@@ -15,17 +15,19 @@ export function Statusline({
     <box height={1} flexDirection="row" backgroundColor={theme.backgroundElement}>
       {/* Mode badge — always GRAPH since this bar is only visible in the orchestrator window */}
       <box backgroundColor={theme.primary} paddingLeft={1} paddingRight={1} alignItems="center">
-        <text fg={theme.backgroundElement}>
-          <strong>GRAPH</strong>
+        <text>
+          <span fg={theme.backgroundElement} bg={theme.primary}>
+            <strong>GRAPH</strong>
+          </span>
         </text>
       </box>
 
       {store.backgroundTaskCount > 0 ? (
-        <box backgroundColor="transparent" paddingLeft={1} alignItems="center">
+        <box backgroundColor={theme.backgroundElement} paddingLeft={1} alignItems="center">
           <text>
-            <span fg={theme.textDim}>{"\u00B7"} </span>
-            <span fg={theme.warning}>{"\u25C6"} </span>
-            <span fg={theme.textMuted}>
+            <span fg={theme.textDim} bg={theme.backgroundElement}>{"\u00B7"} </span>
+            <span fg={theme.warning} bg={theme.backgroundElement}>{"\u25C6"} </span>
+            <span fg={theme.textMuted} bg={theme.backgroundElement}>
               {store.backgroundTaskCount} background
             </span>
           </text>
@@ -37,25 +39,27 @@ export function Statusline({
       {/* Navigation hints — always graph-mode (tmux status bar handles attached-mode hints) */}
       <box paddingRight={2} alignItems="center">
         {attachMsg ? (
-          <text fg={theme.text}>
-            <strong>{attachMsg}</strong>
+          <text>
+            <span fg={theme.text} bg={theme.backgroundElement}>
+              <strong>{attachMsg}</strong>
+            </span>
           </text>
         ) : (
           <text>
-            <span fg={theme.text}>{"\u2191\u2193\u2190\u2192"}</span>
-            <span fg={theme.textMuted}> navigate</span>
-            <span fg={theme.textDim}> {"\u00B7"} </span>
-            <span fg={theme.text}>{"\u21B5"}</span>
-            <span fg={theme.textMuted}> attach</span>
-            <span fg={theme.textDim}> {"\u00B7"} </span>
-            <span fg={theme.text}>/</span>
-            <span fg={theme.textMuted}> stages</span>
-            <span fg={theme.textDim}> {"\u00B7"} </span>
-            <span fg={theme.text}>ctrl+b d</span>
-            <span fg={theme.textMuted}> detach</span>
-            <span fg={theme.textDim}> {"\u00B7"} </span>
-            <span fg={theme.text}>q</span>
-            <span fg={theme.textMuted}> quit</span>
+            <span fg={theme.text} bg={theme.backgroundElement}>{"\u2191\u2193\u2190\u2192"}</span>
+            <span fg={theme.textMuted} bg={theme.backgroundElement}> navigate</span>
+            <span fg={theme.textDim} bg={theme.backgroundElement}> {"\u00B7"} </span>
+            <span fg={theme.text} bg={theme.backgroundElement}>{"\u21B5"}</span>
+            <span fg={theme.textMuted} bg={theme.backgroundElement}> attach</span>
+            <span fg={theme.textDim} bg={theme.backgroundElement}> {"\u00B7"} </span>
+            <span fg={theme.text} bg={theme.backgroundElement}>/</span>
+            <span fg={theme.textMuted} bg={theme.backgroundElement}> stages</span>
+            <span fg={theme.textDim} bg={theme.backgroundElement}> {"\u00B7"} </span>
+            <span fg={theme.text} bg={theme.backgroundElement}>ctrl+b d</span>
+            <span fg={theme.textMuted} bg={theme.backgroundElement}> detach</span>
+            <span fg={theme.textDim} bg={theme.backgroundElement}> {"\u00B7"} </span>
+            <span fg={theme.text} bg={theme.backgroundElement}>q</span>
+            <span fg={theme.textMuted} bg={theme.backgroundElement}> quit</span>
           </text>
         )}
       </box>

package/src/sdk/components/tui-diagnostics.ts

@@ -0,0 +1,273 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import type { CliRenderer, OptimizedBuffer } from "@opentui/core";
+import type { GraphTheme } from "./graph-theme.ts";
+import type { SessionData } from "./orchestrator-panel-types.ts";
+
+type BackgroundRun = {
+  x: number;
+  width: number;
+  color: string;
+};
+
+type BufferRowDiagnostic = {
+  y: number;
+  text: string;
+  backgrounds: BackgroundRun[];
+};
+
+type ColorCount = {
+  color: string;
+  count: number;
+  percent: number;
+};
+
+export type BufferDiagnostic = {
+  width: number;
+  height: number;
+  topBackgrounds: ColorCount[];
+  yellowHueCells: number;
+  yellowHueSamples: Array<{ x: number; y: number; color: string; char: string }>;
+  rows: BufferRowDiagnostic[];
+};
+
+export type WorkflowDiagnosticSnapshot = {
+  workflowName: string;
+  agent: string;
+  prompt: string;
+  fatalError: string | null;
+  completionReached: boolean;
+  sessions: readonly SessionData[];
+  backgroundTaskCount: number;
+  viewMode: string;
+  activeAgentId: string;
+};
+
+export type TuiDiagnostics = {
+  capture: (reason: string) => void;
+  dispose: () => void;
+};
+
+type TuiDiagnosticsOptions = {
+  renderer: CliRenderer;
+  graphTheme: GraphTheme;
+  getSnapshot: () => WorkflowDiagnosticSnapshot;
+};
+
+const DEFAULT_INTERVAL_MS = 1_000;
+const DEFAULT_MAX_CAPTURES = 45;
+
+export function isTuiDiagnosticsEnabled(): boolean {
+  const value = process.env.ATOMIC_TUI_DIAGNOSTICS;
+  return value === "1" || value === "true" || value === "yes";
+}
+
+export function createTuiDiagnostics({
+  renderer,
+  graphTheme,
+  getSnapshot,
+}: TuiDiagnosticsOptions): TuiDiagnostics | null {
+  if (!isTuiDiagnosticsEnabled()) return null;
+
+  const directory = resolveDiagnosticsDirectory();
+  mkdirSync(directory, { recursive: true });
+
+  let sequence = 0;
+  let disposed = false;
+  const maxCaptures = readPositiveInt(process.env.ATOMIC_TUI_DIAGNOSTICS_MAX, DEFAULT_MAX_CAPTURES);
+  const intervalMs = readPositiveInt(process.env.ATOMIC_TUI_DIAGNOSTICS_INTERVAL_MS, DEFAULT_INTERVAL_MS);
+
+  writeJson(join(directory, "metadata.json"), {
+    directory,
+    pid: process.pid,
+    startedAt: new Date().toISOString(),
+    environment: diagnosticEnvironment(),
+    graphTheme,
+  });
+
+  const capture = (reason: string): void => {
+    if (disposed || sequence >= maxCaptures) return;
+    sequence++;
+    const timestamp = Date.now();
+    const payload = {
+      sequence,
+      reason,
+      capturedAt: new Date(timestamp).toISOString(),
+      environment: diagnosticEnvironment(),
+      renderer: {
+        width: renderer.width,
+        height: renderer.height,
+        terminalWidth: renderer.terminalWidth,
+        terminalHeight: renderer.terminalHeight,
+        themeMode: renderer.themeMode,
+        capabilities: cloneJson(renderer.capabilities),
+      },
+      graphTheme,
+      workflow: getSnapshot(),
+      currentRenderBuffer: summarizeBuffer(renderer.currentRenderBuffer),
+      nextRenderBuffer: summarizeBuffer(renderer.nextRenderBuffer),
+    };
+
+    writeJson(join(directory, `${String(sequence).padStart(4, "0")}-${sanitizeReason(reason)}.json`), payload);
+    writeJson(join(directory, "latest.json"), payload);
+
+    if (process.env.ATOMIC_TUI_DIAGNOSTICS_OPENTUI_DUMP === "1") {
+      renderer.dumpBuffers(timestamp);
+      renderer.dumpStdoutBuffer(timestamp);
+    }
+  };
+
+  const timer = setInterval(() => capture("interval"), intervalMs);
+  capture("created");
+
+  return {
+    capture,
+    dispose: () => {
+      if (disposed) return;
+      disposed = true;
+      clearInterval(timer);
+      writeJson(join(directory, "disposed.json"), {
+        disposedAt: new Date().toISOString(),
+        captures: sequence,
+      });
+    },
+  };
+}
+
+export function summarizeBuffer(buffer: OptimizedBuffer): BufferDiagnostic {
+  const raw = buffer.buffers;
+  const width = buffer.width;
+  const height = buffer.height;
+  const counts = new Map<string, number>();
+  const rows: BufferRowDiagnostic[] = [];
+  const yellowHueSamples: Array<{ x: number; y: number; color: string; char: string }> = [];
+  let yellowHueCells = 0;
+
+  for (let y = 0; y < height; y++) {
+    const backgrounds: BackgroundRun[] = [];
+    let text = "";
+    let currentColor = "";
+    let runStart = 0;
+
+    for (let x = 0; x < width; x++) {
+      const index = y * width + x;
+      const color = readColor(raw.bg, index);
+      const char = readChar(raw.char[index] ?? 0);
+      text += char;
+
+      counts.set(color, (counts.get(color) ?? 0) + 1);
+      if (isYellowHue(color)) {
+        yellowHueCells++;
+        if (yellowHueSamples.length < 40) {
+          yellowHueSamples.push({ x, y, color, char });
+        }
+      }
+
+      if (x === 0) {
+        currentColor = color;
+        runStart = 0;
+      } else if (color !== currentColor) {
+        backgrounds.push({ x: runStart, width: x - runStart, color: currentColor });
+        currentColor = color;
+        runStart = x;
+      }
+    }
+
+    if (width > 0) {
+      backgrounds.push({ x: runStart, width: width - runStart, color: currentColor });
+    }
+    rows.push({ y, text: text.trimEnd(), backgrounds });
+  }
+
+  const total = Math.max(1, width * height);
+  const topBackgrounds = Array.from(counts.entries())
+    .map(([color, count]) => ({
+      color,
+      count,
+      percent: Math.round((count / total) * 10_000) / 100,
+    }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 16);
+
+  return {
+    width,
+    height,
+    topBackgrounds,
+    yellowHueCells,
+    yellowHueSamples,
+    rows,
+  };
+}
+
+function resolveDiagnosticsDirectory(): string {
+  const explicit = process.env.ATOMIC_TUI_DIAGNOSTICS_DIR;
+  if (explicit && explicit.trim() !== "") return explicit;
+  return join(tmpdir(), `atomic-tui-diagnostics-${process.pid}`);
+}
+
+function diagnosticEnvironment(): Record<string, string | null> {
+  return {
+    TERM: process.env.TERM ?? null,
+    TERM_PROGRAM: process.env.TERM_PROGRAM ?? null,
+    COLORTERM: process.env.COLORTERM ?? null,
+    TMUX: process.env.TMUX ?? null,
+    SSH_TTY: process.env.SSH_TTY ?? null,
+  };
+}
+
+function readPositiveInt(value: string | undefined, fallback: number): number {
+  if (value === undefined) return fallback;
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+
+function writeJson(path: string, value: object): void {
+  writeFileSync(path, `${JSON.stringify(value, null, 2)}\n`, "utf8");
+}
+
+function sanitizeReason(reason: string): string {
+  const sanitized = reason.replace(/[^a-z0-9_-]+/gi, "-").replace(/^-+|-+$/g, "");
+  return sanitized === "" ? "capture" : sanitized;
+}
+
+function readColor(buffer: Uint16Array, cellIndex: number): string {
+  const offset = cellIndex * 4;
+  return `#${toHex(buffer[offset] ?? 0)}${toHex(buffer[offset + 1] ?? 0)}${toHex(buffer[offset + 2] ?? 0)}`;
+}
+
+function toHex(value: number): string {
+  const clamped = Math.max(0, Math.min(255, value));
+  return clamped.toString(16).padStart(2, "0");
+}
+
+function readChar(codePoint: number): string {
+  if (codePoint <= 0 || codePoint > 0x10ffff) return " ";
+  return String.fromCodePoint(codePoint);
+}
+
+function isYellowHue(color: string): boolean {
+  const red = Number.parseInt(color.slice(1, 3), 16);
+  const green = Number.parseInt(color.slice(3, 5), 16);
+  const blue = Number.parseInt(color.slice(5, 7), 16);
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  if (max < 32 || max === min) return false;
+
+  const saturation = (max - min) / max;
+  if (saturation < 0.12) return false;
+
+  const hue =
+    max === red
+      ? ((green - blue) / (max - min)) * 60
+      : max === green
+        ? (2 + (blue - red) / (max - min)) * 60
+        : (4 + (red - green) / (max - min)) * 60;
+  const normalizedHue = hue < 0 ? hue + 360 : hue;
+  return normalizedHue >= 35 && normalizedHue <= 85;
+}
+
+function cloneJson(value: object | null): object | null {
+  if (value === null) return null;
+  return JSON.parse(JSON.stringify(value)) as object;
+}