@bastani/atomic 0.6.6-1 → 0.6.7-0

package/src/sdk/components/workflow-picker-panel.tsx

@@ -43,6 +43,11 @@ import { useLatest } from "./hooks.ts";
 import { resolveTheme, type TerminalTheme } from "../runtime/theme.ts";
 import type { AgentType, WorkflowInput, WorkflowDefinition, Registry } from "../types.ts";
 import { ErrorBoundary } from "./error-boundary.tsx";
+import {
+  requestRendererBackgroundRepaint,
+  resetRendererTerminalBackground,
+  setRendererBackground,
+} from "./renderer-background.ts";
 
 // ─── Theme ──────────────────────────────────────
 // The picker uses a slightly extended palette vs. the base terminal theme:
@@ -68,26 +73,21 @@ export interface PickerTheme {
   borderActive: string;
 }
 
-export function buildPickerTheme(base: TerminalTheme, isDark: boolean): PickerTheme {
-  // For dark mode the prototype values track Catppuccin Mocha. For light
-  // mode we derive muted variants from the base palette — the specific
-  // extras (`info`, `mauve`, the three-level background ladder) have no
-  // direct entries in `TerminalTheme`, so we pick close-enough Catppuccin
-  // values to keep the picker visually consistent with the orchestrator.
+export function buildPickerTheme(base: TerminalTheme): PickerTheme {
   return {
     background: base.bg,
-    backgroundPanel: isDark ? "#181825" : "#e6e9ef",
-    backgroundElement: isDark ? "#11111b" : "#dce0e8",
+    backgroundPanel: base.backgroundPanel,
+    backgroundElement: base.backgroundElement,
     surface: base.surface,
     text: base.text,
-    textMuted: isDark ? "#a6adc8" : "#5c5f77",
+    textMuted: base.textMuted,
     textDim: base.dim,
     primary: base.accent,
     success: base.success,
     error: base.error,
     warning: base.warning,
-    info: isDark ? "#89dceb" : "#04a5e5",
-    mauve: isDark ? "#cba6f7" : "#8839ef",
+    info: base.info,
+    mauve: base.mauve,
     border: base.borderDim,
     borderActive: base.border,
   };
@@ -324,7 +324,7 @@ const WorkflowList = memo(function WorkflowList({
 
   if (rows.length === 0) {
     return (
-      <box paddingLeft={2} paddingTop={2}>
+      <box paddingLeft={2} paddingTop={2} backgroundColor={theme.backgroundPanel}>
         <text>
           <span fg={theme.textDim}>no matches</span>
         </text>
@@ -333,7 +333,7 @@ const WorkflowList = memo(function WorkflowList({
   }
 
   return (
-    <box flexDirection="column">
+    <box flexDirection="column" backgroundColor={theme.backgroundPanel}>
       {rows.map((row, i) => {
         if (row.kind === "section") {
           const ag = row.agent;
@@ -343,6 +343,7 @@ const WorkflowList = memo(function WorkflowList({
               height={2}
               paddingTop={1}
               paddingLeft={2}
+              backgroundColor={theme.backgroundPanel}
             >
               <text>
                 <span fg={theme[AGENT_COLOR[ag]]}>
@@ -362,7 +363,7 @@ const WorkflowList = memo(function WorkflowList({
             key={`wf-${wf.agent}-${wf.name}`}
             height={1}
             flexDirection="row"
-            backgroundColor={isFocused ? theme.border : "transparent"}
+            backgroundColor={isFocused ? theme.border : theme.backgroundPanel}
             paddingLeft={1}
             paddingRight={2}
           >
@@ -545,6 +546,7 @@ function TextAreaContent({
   onInput: (value: string) => void;
 }) {
   const theme = usePickerTheme();
+  const backgroundColor = focused ? theme.backgroundPanel : theme.backgroundElement;
   const instanceRef = useRef<TextareaRenderable | null>(null);
   const onInputRef = useLatest(onInput);
   const lastTextRef = useRef(value);
@@ -593,8 +595,8 @@ function TextAreaContent({
       placeholder={placeholder}
       focused={focused}
       textColor={theme.text}
-      backgroundColor="transparent"
-      focusedBackgroundColor="transparent"
+      backgroundColor={backgroundColor}
+      focusedBackgroundColor={backgroundColor}
       focusedTextColor={theme.text}
       placeholderColor={theme.textDim}
       wrapMode="word"
@@ -616,6 +618,7 @@ function StringContent({
   onInput: (value: string) => void;
 }) {
   const theme = usePickerTheme();
+  const backgroundColor = focused ? theme.backgroundPanel : theme.backgroundElement;
   return (
     <input
       value={value}
@@ -623,8 +626,8 @@ function StringContent({
       focused={focused}
       onInput={onInput}
       textColor={theme.text}
-      backgroundColor="transparent"
-      focusedBackgroundColor="transparent"
+      backgroundColor={backgroundColor}
+      focusedBackgroundColor={backgroundColor}
       focusedTextColor={theme.text}
       flexGrow={1}
     />
@@ -883,7 +886,7 @@ function InputPhase({
         renderBefore={syncScrollFrame}
         style={{
           rootOptions: {
-            backgroundColor: "transparent",
+            backgroundColor: theme.background,
             border: false,
           },
           contentOptions: {
@@ -1481,6 +1484,7 @@ export class WorkflowPickerPanel {
   private renderer: CliRenderer;
   private root: Root;
   private destroyed = false;
+  private terminalBackgroundSynced: boolean;
   private resolveSelection: ((r: WorkflowPickerResult | null) => void) | null =
     null;
   private selectionPromise: Promise<WorkflowPickerResult | null>;
@@ -1488,14 +1492,17 @@ export class WorkflowPickerPanel {
   private constructor(
     renderer: CliRenderer,
     options: WorkflowPickerPanelOptions,
+    { syncTerminalBackground = false }: { syncTerminalBackground?: boolean } = {},
   ) {
     this.renderer = renderer;
+    this.terminalBackgroundSynced = syncTerminalBackground;
     this.selectionPromise = new Promise((resolve) => {
       this.resolveSelection = resolve;
     });
 
-    const isDark = renderer.themeMode !== "light";
-    const theme = buildPickerTheme(resolveTheme(renderer.themeMode), isDark);
+    const termTheme = resolveTheme(renderer.themeMode);
+    setRendererBackground(renderer, termTheme.bg, { syncTerminalDefault: syncTerminalBackground });
+    const theme = buildPickerTheme(termTheme);
     // Filter registry to only the workflows for the selected agent.
     const workflows = options.registry
       .list()
@@ -1528,6 +1535,7 @@ export class WorkflowPickerPanel {
         />
       </ErrorBoundary>,
     );
+    requestRendererBackgroundRepaint(this.renderer);
   }
 
   /**
@@ -1550,7 +1558,7 @@ export class WorkflowPickerPanel {
         "SIGFPE",
       ],
     });
-    return new WorkflowPickerPanel(renderer, options);
+    return new WorkflowPickerPanel(renderer, options, { syncTerminalBackground: true });
   }
 
   /** Create with an externally-provided renderer (e.g. a test renderer). */
@@ -1580,6 +1588,9 @@ export class WorkflowPickerPanel {
       this.resolveSelection = null;
     }
     try {
+      if (this.terminalBackgroundSynced) {
+        resetRendererTerminalBackground(this.renderer);
+      }
       this.renderer.destroy();
     } catch (err) {
       console.error("[WorkflowPickerPanel] destroy failed:", err);

package/src/sdk/providers/copilot.ts

@@ -94,11 +94,15 @@ export function enumeratePathCandidates(cmd: string, pathEnv: string): string[]
   return results;
 }
 
-export function resolveCopilotCliPath(): string | undefined {
+export type CommandPathResolver = (cmd: string) => string | null;
+
+export function resolveCopilotCliPath(
+  resolveCommandPath: CommandPathResolver = getCommandPath,
+): string | undefined {
   const envPath = process.env["COPILOT_CLI_PATH"];
   if (envPath) return envPath;
 
-  const primary = getCommandPath("copilot");
+  const primary = resolveCommandPath("copilot");
   if (primary === null) return undefined;
   if (!isCopilotShim(primary)) return primary;
 
@@ -119,11 +123,13 @@ export function resolveCopilotCliPath(): string | undefined {
  * - `cliPath` from {@link resolveCopilotCliPath} when resolvable; omitted
  *   otherwise so the SDK falls back to its bundled CLI.
  */
-export function copilotSdkLaunchOptions(): CopilotClientOptions {
+export function copilotSdkLaunchOptions(
+  resolveCommandPath: CommandPathResolver = getCommandPath,
+): CopilotClientOptions {
   const options: CopilotClientOptions = {
     env: copilotSubprocessEnv(),
   };
-  const cliPath = resolveCopilotCliPath();
+  const cliPath = resolveCopilotCliPath(resolveCommandPath);
   if (cliPath !== undefined) {
     options.cliPath = cliPath;
   }

package/src/sdk/runtime/executor.ts

@@ -504,7 +504,11 @@ export async function executeWorkflow(
   const launcherExt = isWin ? "ps1" : "sh";
   const launcherPath = join(sessionsBaseDir, `orchestrator.${launcherExt}`);
   const logPath = join(sessionsBaseDir, "orchestrator.log");
-  const launcherEnvVars = agent === "claude" ? atomicTempEnv() : {};
+  const launcherEnvVars = {
+    ...(agent === "claude" ? atomicTempEnv() : {}),
+    ...terminalCapabilityEnv(),
+    ...workflowDiagnosticsEnv(),
+  };
 
   // Inputs are passed through as base64-encoded JSON so long multiline
   // text values survive shell quoting without any further escaping.
@@ -579,6 +583,29 @@ export async function executeWorkflow(
   return { id: workflowRunId, tmuxSessionName };
 }
 
+function workflowDiagnosticsEnv(): Record<string, string> {
+  const keys = [
+    "ATOMIC_TUI_DIAGNOSTICS",
+    "ATOMIC_TUI_DIAGNOSTICS_DIR",
+    "ATOMIC_TUI_DIAGNOSTICS_INTERVAL_MS",
+    "ATOMIC_TUI_DIAGNOSTICS_MAX",
+    "ATOMIC_TUI_DIAGNOSTICS_OPENTUI_DUMP",
+  ];
+  const env: Record<string, string> = {};
+  for (const key of keys) {
+    const value = process.env[key];
+    if (value !== undefined) env[key] = value;
+  }
+  return env;
+}
+
+function terminalCapabilityEnv(): Record<string, string> {
+  const env: Record<string, string> = {};
+  const colorterm = process.env.COLORTERM;
+  if (colorterm !== undefined) env.COLORTERM = colorterm;
+  return env;
+}
+
 /**
  * Print a short banner telling the user the workflow is running in the
  * background and how to attach to it. Written to stdout so scripts can

package/src/sdk/runtime/theme.ts

@@ -8,6 +8,7 @@
  */
 
 import type { ThemeMode } from "@opentui/core";
+import { flavors, type CatppuccinFlavor } from "@catppuccin/palette";
 
 // ---------------------------------------------------------------------------
 // Theme type
@@ -15,56 +16,47 @@ import type { ThemeMode } from "@opentui/core";
 
 export interface TerminalTheme {
   bg: string;
+  backgroundPanel: string;
+  backgroundElement: string;
   surface: string;
   selection: string;
   border: string;
   borderDim: string;
   accent: string;
   text: string;
+  textMuted: string;
   dim: string;
+  info: string;
   success: string;
   error: string;
   warning: string;
   mauve: string;
 }
 
-// ---------------------------------------------------------------------------
-// Catppuccin Mocha (dark)
-// ---------------------------------------------------------------------------
-
-const CATPPUCCIN_MOCHA: TerminalTheme = {
-  bg: "#1e1e2e",         // Base
-  surface: "#313244",    // Surface0
-  selection: "#45475a",  // Surface1
-  border: "#6c7086",     // Overlay0
-  borderDim: "#585b70",  // Surface2
-  accent: "#89b4fa",     // Blue
-  text: "#cdd6f4",       // Text
-  dim: "#7f849c",        // Overlay1
-  success: "#a6e3a1",    // Green
-  error: "#f38ba8",      // Red
-  warning: "#f9e2af",    // Yellow
-  mauve: "#cba6f7",      // Mauve
-};
-
-// ---------------------------------------------------------------------------
-// Catppuccin Latte (light)
-// ---------------------------------------------------------------------------
+function buildTerminalTheme(flavor: CatppuccinFlavor): TerminalTheme {
+  const { colors } = flavor;
+  return {
+    bg: colors.base.hex,
+    backgroundPanel: colors.mantle.hex,
+    backgroundElement: colors.crust.hex,
+    surface: colors.surface0.hex,
+    selection: colors.surface1.hex,
+    border: colors.overlay0.hex,
+    borderDim: colors.surface2.hex,
+    accent: colors.blue.hex,
+    text: colors.text.hex,
+    textMuted: flavor.dark ? colors.subtext0.hex : colors.subtext1.hex,
+    dim: colors.overlay1.hex,
+    info: colors.sky.hex,
+    success: colors.green.hex,
+    error: colors.red.hex,
+    warning: colors.yellow.hex,
+    mauve: colors.mauve.hex,
+  };
+}
 
-const CATPPUCCIN_LATTE: TerminalTheme = {
-  bg: "#eff1f5",         // Base
-  surface: "#ccd0da",    // Surface0
-  selection: "#bcc0cc",  // Surface1
-  border: "#9ca0b0",     // Overlay0
-  borderDim: "#acb0be",  // Surface2
-  accent: "#1e66f5",     // Blue
-  text: "#4c4f69",       // Text
-  dim: "#8c8fa1",        // Overlay1
-  success: "#40a02b",    // Green
-  error: "#d20f39",      // Red
-  warning: "#df8e1d",    // Yellow
-  mauve: "#8839ef",      // Mauve
-};
+const CATPPUCCIN_MOCHA = buildTerminalTheme(flavors.mocha);
+const CATPPUCCIN_LATTE = buildTerminalTheme(flavors.latte);
 
 // ---------------------------------------------------------------------------
 // Public API

package/src/services/system/install-ui.ts

@@ -22,7 +22,7 @@
  * library, just what auto-sync needs to stop being visually noisy.
  */
 
-import { COLORS } from "../../theme/colors.ts";
+import { COLORS, PALETTE, paletteRgb, type PaletteKey } from "../../theme/colors.ts";
 import {
   supportsTrueColor,
   supports256Color,
@@ -34,9 +34,9 @@ const BAR_EMPTY = "･";
 
 /**
  * Semantic bar states mapped to Catppuccin Mocha colors:
- *   progress → Yellow #f9e2af (warm accent; "in flight")
- *   success  → Green  #a6e3a1 (universal "completed")
- *   error    → Red    #f38ba8 (universal "failed")
+ *   progress → Yellow (warm accent; "in flight")
+ *   success  → Green  (universal "completed")
+ *   error    → Red    (universal "failed")
  *
  * The empty track stays dim regardless — only the filled portion carries
  * the status signal, which keeps the bar legible while still telegraphing
@@ -44,17 +44,16 @@ const BAR_EMPTY = "･";
  */
 type BarState = "progress" | "success" | "error";
 
+const BAR_STATE_PALETTE: Record<BarState, PaletteKey> = {
+  progress: "warning",
+  success: "success",
+  error: "error",
+};
+
 function fillColor(state: BarState): string {
   if (supportsTrueColor()) {
-    switch (state) {
-      case "success":
-        return "\x1b[38;2;166;227;161m"; // Catppuccin Green  #a6e3a1
-      case "error":
-        return "\x1b[38;2;243;139;168m"; // Catppuccin Red    #f38ba8
-      case "progress":
-      default:
-        return "\x1b[38;2;249;226;175m"; // Catppuccin Yellow #f9e2af
-    }
+    const [r, g, b] = PALETTE[BAR_STATE_PALETTE[state]];
+    return `\x1b[38;2;${r};${g};${b}m`;
   }
   if (supports256Color()) {
     switch (state) {
@@ -78,7 +77,7 @@ function fillColor(state: BarState): string {
   }
 }
 
-type RGB = [number, number, number];
+type RGB = readonly [number, number, number];
 
 /**
  * Gradient endpoints for the filled bar segment. Each state interpolates
@@ -88,12 +87,12 @@ type RGB = [number, number, number];
 function gradientEndpoints(state: BarState): { start: RGB; end: RGB } {
   switch (state) {
     case "success":
-      return { start: [126, 201, 138], end: [166, 227, 161] };
+      return { start: paletteRgb("teal"), end: paletteRgb("green") };
     case "error":
-      return { start: [224, 108, 136], end: [243, 139, 168] };
+      return { start: paletteRgb("maroon"), end: paletteRgb("red") };
     case "progress":
     default:
-      return { start: [242, 196, 120], end: [249, 226, 175] };
+      return { start: paletteRgb("peach"), end: paletteRgb("yellow") };
   }
 }
 

package/src/theme/colors.ts

@@ -1,4 +1,5 @@
 import { supportsColor, supportsTrueColor } from "../services/system/detect.ts";
+import { flavors, type ColorName } from "@catppuccin/palette";
 
 /**
  * ANSI color and formatting codes for CLI output
@@ -31,20 +32,24 @@ export const COLORS = supportsColor() ? ANSI_CODES : NO_COLORS;
 //
 // Truecolor terminals get the full palette via 24-bit ANSI SGR; legacy
 // terminals degrade to basic ANSI; NO_COLOR emits plain text.
-// Hex values mirror .impeccable.md and src/sdk/runtime/theme.ts.
 // ---------------------------------------------------------------------------
 
 export type PaletteKey = "text" | "dim" | "accent" | "success" | "error" | "warning" | "mauve" | "info";
 
+export function paletteRgb(name: ColorName): readonly [number, number, number] {
+  const { r, g, b } = flavors.mocha.colors[name].rgb;
+  return [r, g, b];
+}
+
 export const PALETTE: Record<PaletteKey, readonly [number, number, number]> = {
-  text:    [205, 214, 244], // #cdd6f4
-  dim:     [127, 132, 156], // #7f849c (Overlay1)
-  accent:  [137, 180, 250], // #89b4fa (Blue)
-  success: [166, 227, 161], // #a6e3a1 (Green)
-  error:   [243, 139, 168], // #f38ba8 (Red)
-  warning: [249, 226, 175], // #f9e2af (Yellow)
-  mauve:   [203, 166, 247], // #cba6f7 (Mauve)
-  info:    [137, 220, 235], // #89dceb (Sky)
+  text:    paletteRgb("text"),
+  dim:     paletteRgb("overlay1"),
+  accent:  paletteRgb("blue"),
+  success: paletteRgb("green"),
+  error:   paletteRgb("red"),
+  warning: paletteRgb("yellow"),
+  mauve:   paletteRgb("mauve"),
+  info:    paletteRgb("sky"),
 };
 
 export interface PaintOptions {

package/src/theme/logo.ts

@@ -9,6 +9,7 @@ import {
   supports256Color,
   supportsColor,
 } from "../services/system/detect.ts";
+import { flavors, type CatppuccinFlavor, type ColorName } from "@catppuccin/palette";
 
 export const ATOMIC_BLOCK_LOGO = [
   "█▀▀█ ▀▀█▀▀ █▀▀█ █▀▄▀█ ▀█▀ █▀▀",
@@ -16,17 +17,27 @@ export const ATOMIC_BLOCK_LOGO = [
   "▀  ▀   ▀   ▀▀▀▀ ▀   ▀ ▀▀▀ ▀▀▀",
 ];
 
-/** Catppuccin-inspired gradient (dark terminal). */
-export const GRADIENT_DARK = [
-  "#f5e0dc", "#f2cdcd", "#f5c2e7", "#cba6f7",
-  "#b4befe", "#89b4fa", "#74c7ec", "#89dceb", "#94e2d5",
-];
+const GRADIENT_COLOR_NAMES = [
+  "rosewater",
+  "flamingo",
+  "pink",
+  "mauve",
+  "lavender",
+  "blue",
+  "sapphire",
+  "sky",
+  "teal",
+] as const satisfies readonly ColorName[];
 
-/** Catppuccin-inspired gradient (light terminal). */
-export const GRADIENT_LIGHT = [
-  "#dc8a78", "#dd7878", "#ea76cb", "#8839ef",
-  "#7287fd", "#1e66f5", "#209fb5", "#04a5e5", "#179299",
-];
+function gradientFromFlavor(flavor: CatppuccinFlavor): string[] {
+  return GRADIENT_COLOR_NAMES.map((name) => flavor.colors[name].hex);
+}
+
+/** Catppuccin gradient (dark terminal). */
+export const GRADIENT_DARK = gradientFromFlavor(flavors.mocha);
+
+/** Catppuccin gradient (light terminal). */
+export const GRADIENT_LIGHT = gradientFromFlavor(flavors.latte);
 
 /** 256-color approximation of the gradient. */
 export const GRADIENT_256 = [224, 218, 219, 183, 147, 111, 117, 159, 115];
@@ -40,7 +51,7 @@ function hexToRgb(hex: string): [number, number, number] {
   ];
 }
 
-function interpolateHex(gradient: string[], t: number): [number, number, number] {
+function interpolateHex(gradient: readonly string[], t: number): [number, number, number] {
   const pos = Math.max(0, Math.min(1, t)) * (gradient.length - 1);
   const lo = Math.floor(pos);
   const hi = Math.min(lo + 1, gradient.length - 1);
@@ -60,7 +71,7 @@ function interpolate256(gradient: number[], t: number): number {
   return gradient[lo]!;
 }
 
-export function colorizeLineTrueColor(line: string, gradient: string[]): string {
+export function colorizeLineTrueColor(line: string, gradient: readonly string[]): string {
   let out = "";
   const len = line.length;
   for (let i = 0; i < len; i++) {