feat(cli): add new Ink-based TUI and gallery preview

Author: saintno

bun.lockb

@@ -7,11 +7,12 @@ if (!fs.existsSync("./dist")) {
 
 const result = await Bun.build({
   entrypoints: ["./cli/bin.ts"],
-  target: "bun",
+  target: "node",
   format: "esm",
-  minify: true,
+  minify: false,
   outdir: "./dist",
-  naming: "cli.js"
+  naming: "cli.js",
+  external: ["sharp", "sixel"]
 });
 
 if (!result.success) {

cli/build.ts

@@ -5,7 +5,7 @@ import { loadWorkflow, detectOutputNodes } from "cli/utils/fs";
 import { coerceValue, isValidNodePath } from "cli/utils/value-parser";
 import { extractMediaFromOutputs, buildResultOverrides, isFilePath } from "cli/runner";
 import { createRenderer, resolveMode } from "cli/renderer/index";
-import type { TuiRenderer } from "cli/renderer/tui";
+import type { InkTuiRenderer } from "cli/renderer/ink/ink-tui-renderer";
 import type { RunResult } from "cli/renderer/json";
 import type { RunConfig } from "cli/runner";
 
@@ -23,24 +23,29 @@ const DEBOUNCE_MS = 500;
 
 interface WatchState {
   runNumber: number;
-  abortController: AbortController | null;
   debounceTimer: Timer | null;
   running: boolean;
   client: ComfyApi | null;
 }
 
-function isTui(renderer: any): renderer is TuiRenderer {
+function isTui(renderer: any): renderer is InkTuiRenderer {
   return renderer && typeof renderer.showWatchStatus === "function";
 }
 
+export function buildWatchClientOptions(credentials: any, listenTerminal: boolean) {
+  return {
+    ...(credentials ? { credentials } : {}),
+    listenTerminal
+  };
+}
+
 export async function watchMode(config: RunConfig, noTui = false): Promise<void> {
   const mode = resolveMode(config.json, config.quiet);
   const useTui = mode === "terminal" && !noTui;
   const renderer = createRenderer(mode, config.host, config.file, useTui, noTui, useTui);
 
   const state: WatchState = {
     runNumber: 0,
-    abortController: null,
     debounceTimer: null,
     running: false,
     client: null
@@ -60,7 +65,9 @@ export async function watchMode(config: RunConfig, noTui = false): Promise<void>
     credentials = { type: "basic", username: config.user, password: config.pass };
   }
 
-  state.client = new ComfyApi(config.host, undefined, credentials ? { credentials } : undefined);
+  state.client = new ComfyApi(config.host, undefined, buildWatchClientOptions(credentials, useTui));
+
+  const detachTerminalStream = isTui(renderer) ? attachTerminalLogStream(state.client, renderer) : () => {};
 
   await state.client.init(5, 2000).waitForReady();
   if (isTui(renderer)) {
@@ -71,13 +78,17 @@ export async function watchMode(config: RunConfig, noTui = false): Promise<void>
   }
 
   const runOnce = async () => {
+    state.running = true;
     state.runNumber++;
     const runNum = state.runNumber;
     const startTime = performance.now();
     let interrupted = false;
 
     if (isTui(renderer)) {
       renderer.resetRun();
+      renderer.startRun(runNum);
+    } else if (!config.json) {
+      console.log(c.dim(`[Run #${runNum}]`) + ` ${c.cyan("starting")} ${config.file}`);
     }
 
     try {
@@ -131,11 +142,13 @@ export async function watchMode(config: RunConfig, noTui = false): Promise<void>
         };
         renderer.render(runResult);
       }
+    } finally {
+      state.running = false;
     }
 
     if (!interrupted && !isTui(renderer) && !config.json) {
       console.log();
-      console.log(c.dim(`${c.blue("watching")} ${config.file} ...`));
+      console.log(c.dim(`${c.blue("watching")} ${config.file} for changes ...`));
     }
   };
 
@@ -186,16 +199,15 @@ export async function watchMode(config: RunConfig, noTui = false): Promise<void>
         }
       }
 
-      state.running = true;
       await runOnce();
-      state.running = false;
     }, DEBOUNCE_MS);
   });
 
   return new Promise<void>(() => {
     process.on("SIGINT", () => {
       if (state.debounceTimer) clearTimeout(state.debounceTimer);
       watcher.close();
+      detachTerminalStream();
       state.client!.destroy();
       if (isTui(renderer)) {
         renderer.stop();
@@ -239,11 +251,7 @@ async function executeWorkflow(client: ComfyApi, config: RunConfig, renderer: an
     .onProgress((info: any) => renderer.onProgress(info))
     .onOutput((key: any, data: any) => renderer.onOutput(String(key), data))
     .onFinished((_data: any) => {})
-    .onFailed((err: Error) => {
-      if (!err.message.includes("interrupted") && !err.message.includes("Interrupted")) {
-        renderer.onFailed(err);
-      }
-    });
+    .onFailed((_err: Error) => {});
 
   const result = await Promise.race([
     callWrapper.run(),
@@ -258,3 +266,30 @@ async function executeWorkflow(client: ComfyApi, config: RunConfig, renderer: an
 
   return result;
 }
+
+export function attachTerminalLogStream(
+  client: Pick<ComfyApi, "addEventListener" | "removeEventListener">,
+  renderer: Pick<InkTuiRenderer, "addServerLog" | "showWatchStatus">
+): () => void {
+  let warned = false;
+
+  const onTerminal = (event: Event) => {
+    const detail = (event as CustomEvent<{ m: string; t: string } | null>).detail;
+    if (!detail?.m) return;
+    renderer.addServerLog(detail.m);
+  };
+
+  const onSubscriptionError = () => {
+    if (warned) return;
+    warned = true;
+    renderer.showWatchStatus("Live terminal logs unavailable; continuing with progress updates.");
+  };
+
+  client.addEventListener("terminal", onTerminal as EventListener);
+  client.addEventListener("terminal_subscription_error", onSubscriptionError as EventListener);
+
+  return () => {
+    client.removeEventListener("terminal", onTerminal as EventListener);
+    client.removeEventListener("terminal_subscription_error", onSubscriptionError as EventListener);
+  };
+}

cli/commands/watch.ts

@@ -77,6 +77,8 @@ async function cmdRun(args: ReturnType<typeof parseArgs>): Promise<void> {
         output: args.output,
         download: args.download,
         noDownload: args.noDownload,
+        json: args.json,
+        quiet: args.quiet,
         token: args.token,
         user: args.user,
         pass: args.pass,
@@ -190,6 +192,8 @@ async function cmdWatch(args: ReturnType<typeof parseArgs>): Promise<void> {
       output: args.output,
       download: args.download,
       noDownload: args.noDownload,
+      json: args.json,
+      quiet: args.quiet,
       token: args.token,
       user: args.user,
       pass: args.pass,

cli/index.ts

@@ -1,13 +1,13 @@
 import { TerminalRenderer } from "cli/renderer/terminal";
 import { JsonRenderer } from "cli/renderer/json";
 import { QuietRenderer } from "cli/renderer/quiet";
-import { TuiRenderer, isTuiAvailable } from "cli/renderer/tui";
+import { InkTuiRenderer, isInkAvailable } from "cli/renderer/ink/ink-tui-renderer";
 
-export { isTuiAvailable } from "cli/renderer/tui";
+export { isInkAvailable } from "cli/renderer/ink/ink-tui-renderer";
 export type { TerminalRenderer } from "cli/renderer/terminal";
 export type { JsonRenderer } from "cli/renderer/json";
 export type { QuietRenderer } from "cli/renderer/quiet";
-export type { TuiRenderer } from "cli/renderer/tui";
+export type { InkTuiRenderer } from "cli/renderer/ink/ink-tui-renderer";
 export type { RunResult } from "cli/renderer/json";
 
 export type RenderMode = "json" | "terminal" | "quiet";
@@ -25,9 +25,9 @@ export function createRenderer(
   persistent = false,
   noTui = false,
   useTui = false
-): TerminalRenderer | JsonRenderer | QuietRenderer | TuiRenderer {
-  if (useTui && mode === "terminal" && !noTui && isTuiAvailable()) {
-    return new TuiRenderer(host, file, persistent);
+): TerminalRenderer | JsonRenderer | QuietRenderer | InkTuiRenderer {
+  if (useTui && mode === "terminal" && !noTui && isInkAvailable()) {
+    return new InkTuiRenderer(host, file, persistent);
   }
   switch (mode) {
     case "json":

cli/renderer/index.ts

@@ -0,0 +1,91 @@
+import React, { useSyncExternalStore, useEffect, useState } from "react";
+import { Box, useStdout, useApp } from "ink";
+import type { TuiStore } from "./state";
+import { LogViewer } from "./components/log-viewer";
+import { StatusBar } from "./components/progress-bar";
+import { DashboardHeader } from "./components/dashboard-header";
+
+interface AppProps {
+  store: TuiStore;
+  persistent: boolean;
+}
+
+export function App({ store, persistent }: AppProps) {
+  const { stdout } = useStdout();
+  const { exit } = useApp();
+  const state = useSyncExternalStore(store.subscribe, store.getState);
+  const [viewport, setViewport] = useState({
+    cols: stdout?.columns ?? 80,
+    rows: stdout?.rows ?? 24
+  });
+
+  useEffect(() => {
+    if (!persistent && state.status === "done") {
+      const timer = setTimeout(() => exit(), 800);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [state.status, persistent, exit]);
+
+  useEffect(() => {
+    if (!stdout) return undefined;
+
+    const syncViewport = () => {
+      setViewport({
+        cols: stdout.columns ?? 80,
+        rows: stdout.rows ?? 24
+      });
+    };
+
+    syncViewport();
+    stdout.on("resize", syncViewport);
+
+    return () => {
+      stdout.off("resize", syncViewport);
+    };
+  }, [stdout]);
+
+  const cols = viewport.cols;
+  const rows = viewport.rows;
+
+  const HEADER_LINES = 6;
+  const STATUS_BAR_LINES = 6;
+  const logLines = Math.max(4, rows - HEADER_LINES - STATUS_BAR_LINES);
+
+  return (
+    <Box flexDirection='column' width={cols} height={rows}>
+      <DashboardHeader
+        connected={state.connected}
+        status={state.status}
+        host={state.host}
+        watchFile={state.watchFile}
+        runNumber={state.runNumber}
+        promptId={state.promptId}
+        lastRunOutcome={state.lastRunOutcome}
+        lastRunLabel={state.lastRunLabel}
+        inlineImagesSupported={state.inlineImagesSupported}
+        width={cols}
+      />
+      <LogViewer
+        feed={state.feed}
+        media={state.media}
+        maxLines={logLines}
+        width={cols}
+        inlineImagesSupported={state.inlineImagesSupported}
+      />
+      <StatusBar
+        status={state.status}
+        currentNode={state.currentNode}
+        progressValue={state.progressValue}
+        progressMax={state.progressMax}
+        runNumber={state.runNumber}
+        runDuration={state.runDuration}
+        runStartedAt={state.runStartedAt}
+        host={state.host}
+        watchFile={state.watchFile}
+        errorMessage={state.errorMessage}
+        width={cols}
+      />
+    </Box>
+  );
+}

cli/renderer/ink/app.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+type DashboardHeaderProps = {
+  connected: boolean;
+  status: "idle" | "connecting" | "queued" | "executing" | "done" | "failed";
+  host: string;
+  watchFile: string;
+  runNumber: number;
+  promptId: string;
+  lastRunOutcome: "idle" | "success" | "failed" | "interrupted";
+  lastRunLabel: string;
+  inlineImagesSupported: boolean;
+  width: number;
+};
+
+function toneForOutcome(outcome: DashboardHeaderProps["lastRunOutcome"]): "green" | "red" | "yellow" | "cyan" {
+  if (outcome === "success") return "green";
+  if (outcome === "failed") return "red";
+  if (outcome === "interrupted") return "yellow";
+  return "cyan";
+}
+
+export function DashboardHeader({
+  connected,
+  status,
+  host,
+  watchFile,
+  runNumber,
+  promptId,
+  lastRunOutcome,
+  lastRunLabel,
+  inlineImagesSupported,
+  width
+}: DashboardHeaderProps) {
+  const statusLabel =
+    status === "executing"
+      ? "Executing"
+      : status === "queued"
+        ? "Queued"
+        : status === "failed"
+          ? "Failed"
+          : status === "done"
+            ? "Completed"
+            : status === "connecting"
+              ? "Preparing"
+              : "Watching";
+
+  return (
+    <Box
+      flexDirection='column'
+      width={width}
+      borderStyle='round'
+      borderColor={connected ? "cyan" : "yellow"}
+      paddingX={1}
+    >
+      <Box justifyContent='space-between'>
+        <Text bold color='cyan'>
+          CFLI WATCH
+        </Text>
+        <Box>
+          <Text color={connected ? "green" : "yellow"}>{connected ? "ONLINE" : "CONNECTING"}</Text>
+          <Text dimColor>  </Text>
+          <Text color='blue'>{statusLabel}</Text>
+        </Box>
+      </Box>
+      <Box justifyContent='space-between'>
+        <Text wrap='truncate-end'>Host: {host}</Text>
+        <Text color='cyan'>Run #{Math.max(runNumber, 1)}</Text>
+      </Box>
+      <Box justifyContent='space-between'>
+        <Text wrap='truncate-end'>File: {watchFile}</Text>
+        <Text color={inlineImagesSupported ? "green" : "yellow"}>
+          {inlineImagesSupported ? "Image preview ready" : "Image preview fallback"}
+        </Text>
+      </Box>
+      <Box justifyContent='space-between'>
+        <Text wrap='truncate-end'>{promptId ? `Prompt: ${promptId}` : "Prompt: waiting for queue id"}</Text>
+        <Text color={toneForOutcome(lastRunOutcome)} wrap='truncate-end'>
+          {lastRunLabel}
+        </Text>
+      </Box>
+    </Box>
+  );
+}