feat: launch dev UI directly from init, add terminal spinner, remove start_dev_ui tool

Replace subprocess spawn with direct startDevServer() call in init wizard,
auto-open browser on launch, add loading spinner to terminal, add --verbose
flag to dev server, pass initial prompt to Claude via PTY args, and remove
the start_dev_ui MCP tool since the dev UI is now launched by init/dev CLI.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: cevian

packages/core/dev-ui/src/App.tsx

@@ -40,6 +40,7 @@ export function App() {
             attachTo={terminal.attachTo}
             fit={terminal.fit}
             ptyAlive={terminal.ptyAlive}
+            hasData={terminal.hasData}
             restart={terminal.restart}
           />
         ),

packages/core/dev-ui/src/components/ClaudeTerminal.tsx

@@ -5,10 +5,11 @@ interface ClaudeTerminalProps {
   attachTo: (el: HTMLDivElement | null) => void;
   fit: () => void;
   ptyAlive: boolean;
+  hasData: boolean;
   restart: () => void;
 }
 
-export function ClaudeTerminal({ attachTo, fit, ptyAlive, restart }: ClaudeTerminalProps) {
+export function ClaudeTerminal({ attachTo, fit, ptyAlive, hasData, restart }: ClaudeTerminalProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   // Attach terminal to the container div
@@ -52,8 +53,19 @@ export function ClaudeTerminal({ attachTo, fit, ptyAlive, restart }: ClaudeTermi
   }, [ptyAlive, restart]);
 
   return (
-    <div className="h-full w-full overflow-hidden bg-[#1a1a1a] px-4 py-2">
+    <div className="relative h-full w-full overflow-hidden bg-[#1a1a1a] px-4 py-2">
       <div ref={containerRef} className="h-full w-full" />
+      {!hasData && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="flex items-center gap-3 text-zinc-500">
+            <svg className="h-5 w-5 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            <span>Starting Claude Code...</span>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

packages/core/dev-ui/src/hooks/useTerminal.ts

@@ -55,6 +55,7 @@ function createTerminal(sendRef: React.MutableRefObject<(msg: object) => void>)
 
 export function useTerminal({ sendMessage, ptyEvents }: UseTerminalOptions) {
   const [ptyAlive, setPtyAlive] = useState(false);
+  const [hasData, setHasData] = useState(false);
 
   // Stable ref for sendMessage so Terminal.onData doesn't recreate
   const sendRef = useRef(sendMessage);
@@ -88,6 +89,7 @@ export function useTerminal({ sendMessage, ptyEvents }: UseTerminalOptions) {
       const data = (e as CustomEvent).detail as string;
       if (openedRef.current) {
         term.write(data);
+        setHasData(true);
       } else {
         bufferRef.current.push(data);
       }
@@ -125,10 +127,13 @@ export function useTerminal({ sendMessage, ptyEvents }: UseTerminalOptions) {
         openedRef.current = true;
 
         // Flush any data buffered before the terminal was opened
-        for (const chunk of bufferRef.current) {
-          term.write(chunk);
+        if (bufferRef.current.length > 0) {
+          for (const chunk of bufferRef.current) {
+            term.write(chunk);
+          }
+          bufferRef.current = [];
+          setHasData(true);
         }
-        bufferRef.current = [];
       } else if (term.element) {
         // Re-attach: move existing xterm DOM into the new container
         container.appendChild(term.element);
@@ -157,5 +162,5 @@ export function useTerminal({ sendMessage, ptyEvents }: UseTerminalOptions) {
     sendRef.current({ type: "pty-spawn" });
   }, [term]);
 
-  return { attachTo, fit, ptyAlive, restart };
+  return { attachTo, fit, ptyAlive, hasData, restart };
 }

packages/core/src/cli/index.ts

@@ -508,7 +508,9 @@ program
   .option("-p, --port <number>", "Port to serve on", "4173")
   .option("--host", "Expose to network")
   .option("--dangerously-skip-permissions", "Pass --dangerously-skip-permissions to Claude Code")
-  .action(async (options: { port: string; host?: boolean; dangerouslySkipPermissions?: boolean }) => {
+  .option("--claude-prompt <text>", "Initial prompt to send to Claude Code")
+  .option("--verbose", "Show detailed startup information")
+  .action(async (options: { port: string; host?: boolean; dangerouslySkipPermissions?: boolean; claudePrompt?: string; verbose?: boolean }) => {
     // Load .env for DATABASE_URL and NANGO_SECRET_KEY
     try {
       resolveEnv();
@@ -531,6 +533,8 @@ program
       nangoSecretKey: process.env.NANGO_SECRET_KEY,
       claudePluginDir: pluginDir,
       claudeSkipPermissions: options.dangerouslySkipPermissions,
+      claudePrompt: options.claudePrompt,
+      verbose: options.verbose,
     });
   });
 

packages/core/src/cli/init.ts

@@ -1,4 +1,4 @@
-import { execSync, spawn } from "node:child_process";
+import { execSync } from "node:child_process";
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import { basename, join, resolve } from "node:path";
 import * as p from "@clack/prompts";
@@ -8,14 +8,14 @@ import {
   createDatabase,
   setupAppSchema,
 } from "./mcp/lib/scaffolding.js";
-import { packageRoot } from "./mcp/config.js";
 
-// Monorepo root (only valid in dev mode)
-const monorepoRoot = join(packageRoot, "..", "..");
-
-function isDevMode(): boolean {
-  const corePath = join(monorepoRoot, "packages", "core");
-  return existsSync(corePath);
+function isClaudeAvailable(): boolean {
+  try {
+    execSync("claude --version", { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 function isCwdEmpty(): boolean {
@@ -28,15 +28,6 @@ function isCwdEmpty(): boolean {
   }
 }
 
-function isClaudeAvailable(): boolean {
-  try {
-    execSync("claude --version", { stdio: "ignore" });
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 /**
  * Poll Tiger Cloud until the service is ready (status != "creating").
  * Returns true if ready, false on timeout.
@@ -79,37 +70,62 @@ function isExisting0pflow(): boolean {
   }
 }
 
-function launchClaude(cwd: string, { yolo = false }: { yolo?: boolean } = {}): void {
-  const prompt =
-    "Welcome to your 0pflow project! What workflow would you like to create? Here are some ideas:\n\n" +
-    '- "Enrich leads from a CSV file with company data"\n' +
-    '- "Monitor website uptime and send Slack alerts"\n' +
-    '- "Sync Salesforce contacts to our database nightly"\n' +
-    '- "Score and route inbound leads based on firmographics"\n\n' +
-    "Describe what you'd like to automate and I'll help you build it with /create-workflow.";
-
-  const claudeArgs: string[] = [];
-  if (isDevMode()) claudeArgs.push("--plugin-dir", monorepoRoot);
-  if (yolo) claudeArgs.push("--dangerously-skip-permissions");
-  claudeArgs.push(prompt);
-
-  const child = spawn("claude", claudeArgs, {
-    cwd,
-    stdio: "inherit",
+const WELCOME_PROMPT =
+  "Welcome to your 0pflow project! What workflow would you like to create? Here are some ideas:\n\n" +
+  '- "Enrich leads from a CSV file with company data"\n' +
+  '- "Monitor website uptime and send Slack alerts"\n' +
+  '- "Sync Salesforce contacts to our database nightly"\n' +
+  '- "Score and route inbound leads based on firmographics"\n\n' +
+  "Describe what you'd like to automate and I'll help you build it with /create-workflow.";
+
+async function launchDevServer(cwd: string, { yolo = false }: { yolo?: boolean } = {}): Promise<void> {
+  // Load .env for DATABASE_URL and NANGO_SECRET_KEY
+  try {
+    const { resolveEnv } = await import("./env.js");
+    resolveEnv();
+  } catch {
+    // Dev UI can work without env
+  }
+
+  // Detect dev mode (running from monorepo source) for --plugin-dir
+  const { packageRoot } = await import("./mcp/config.js");
+  const monorepoRoot = resolve(packageRoot, "..", "..");
+  const pluginDir = existsSync(resolve(monorepoRoot, "packages", "core")) ? monorepoRoot : undefined;
+
+  const { startDevServer } = await import("../dev-ui/index.js");
+  const { url } = await startDevServer({
+    projectRoot: cwd,
+    databaseUrl: process.env.DATABASE_URL,
+    nangoSecretKey: process.env.NANGO_SECRET_KEY,
+    claudePluginDir: pluginDir,
+    claudeSkipPermissions: yolo,
+    claudePrompt: WELCOME_PROMPT,
   });
-  child.on("exit", (code) => process.exit(code ?? 0));
+
+  // Open browser
+  try {
+    const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+    execSync(`${cmd} ${url}`, { stdio: "ignore" });
+  } catch {
+    // Non-fatal — user can open manually
+  }
 }
 
 export async function runInit(): Promise<void> {
   p.intro(pc.red("0pflow") + pc.dim(" — create a new project"));
 
+  if (!isClaudeAvailable()) {
+    p.log.error("Claude Code CLI not found. Install it from https://claude.ai/code");
+    process.exit(1);
+  }
+
   // ── Existing project check ──────────────────────────────────────────
   if (isExisting0pflow()) {
     const action = await p.select({
       message: "This directory is already an 0pflow project.",
       options: [
-        { value: "claude" as const, label: "Launch Claude Code" },
-        { value: "claude-yolo" as const, label: "Launch Claude Code with --dangerously-skip-permissions" },
+        { value: "claude" as const, label: "Launch Dev UI" },
+        { value: "claude-yolo" as const, label: "Launch Dev UI with --dangerously-skip-permissions" },
         { value: "new" as const, label: "Create a new project in a subdirectory" },
       ],
     });
@@ -120,12 +136,8 @@ export async function runInit(): Promise<void> {
     }
 
     if (action === "claude" || action === "claude-yolo") {
-      if (!isClaudeAvailable()) {
-        p.log.error("Claude Code CLI not found. Install it from https://claude.ai/code");
-        process.exit(1);
-      }
-      p.outro(pc.green("Launching Claude Code..."));
-      launchClaude(process.cwd(), { yolo: action === "claude-yolo" });
+      p.outro(pc.green("Launching Dev UI..."));
+      await launchDevServer(process.cwd(), { yolo: action === "claude-yolo" });
       return;
     }
     // fall through to normal wizard (cwdEmpty will be false, so directory defaults to ./<name>)
@@ -388,39 +400,28 @@ export async function runInit(): Promise<void> {
     }
   }
 
-  // ── Launch Claude? ──────────────────────────────────────────────────
-  const hasClaude = isClaudeAvailable();
-
-  if (hasClaude) {
-    const launchChoice = await p.select({
-      message: "Launch Claude Code to design your first workflow?",
-      options: [
-        { value: "claude" as const, label: "Yes" },
-        { value: "claude-yolo" as const, label: "Yes, with --dangerously-skip-permissions" },
-        { value: "no" as const, label: "No, I'll do it later" },
-      ],
-    });
+  // ── Launch Dev UI? ──────────────────────────────────────────────────
+  const launchChoice = await p.select({
+    message: "Launch Dev UI to design your first workflow?",
+    options: [
+      { value: "claude" as const, label: "Yes" },
+      { value: "claude-yolo" as const, label: "Yes, with --dangerously-skip-permissions" },
+      { value: "no" as const, label: "No, I'll do it later" },
+    ],
+  });
 
-    if (!p.isCancel(launchChoice) && launchChoice !== "no") {
-      p.outro(pc.green("Launching Claude Code..."));
-      launchClaude(resolve(appPath), { yolo: launchChoice === "claude-yolo" });
-      return;
-    }
+  if (!p.isCancel(launchChoice) && launchChoice !== "no") {
+    p.outro(pc.green("Launching Dev UI..."));
+    await launchDevServer(resolve(appPath), { yolo: launchChoice === "claude-yolo" });
+    return;
   }
 
   // ── Done ────────────────────────────────────────────────────────────
   const cdCmd = directory === "." ? "" : `cd ${directory} && `;
-  const pluginFlag = isDevMode() ? ` --plugin-dir ${monorepoRoot}` : "";
-  const claudeCmd = `${cdCmd}claude${pluginFlag}`;
 
   p.outro(pc.green("Project created!"));
   console.log();
-  console.log(pc.bold("  To launch Claude Code later:"));
-  console.log(pc.cyan(`  ${claudeCmd}`));
-  console.log();
-  console.log(pc.bold("  Example prompts to get started:"));
-  console.log(pc.dim('  "Create a workflow that enriches leads from a CSV file"'));
-  console.log(pc.dim('  "Build a workflow that monitors website uptime and sends Slack alerts"'));
-  console.log(pc.dim('  "Create a data pipeline that syncs Salesforce contacts to our database"'));
+  console.log(pc.bold("  To launch the Dev UI later:"));
+  console.log(pc.cyan(`  ${cdCmd}0pflow dev`));
   console.log();
 }

packages/core/src/cli/mcp/tools/index.ts

@@ -3,7 +3,7 @@ import { createDatabaseFactory } from "./createDatabase.js";
 import { setupAppSchemaFactory } from "./setupAppSchema.js";
 import { listIntegrationsFactory } from "./listIntegrations.js";
 import { getConnectionInfoFactory } from "./getConnectionInfo.js";
-import { startDevUiFactory } from "./startDevUi.js";
+
 import { listWorkflowsFactory } from "./listWorkflows.js";
 import { runWorkflowFactory } from "./runWorkflow.js";
 import { runNodeFactory } from "./runNode.js";
@@ -18,7 +18,7 @@ export async function getApiFactories() {
     setupAppSchemaFactory,
     listIntegrationsFactory,
     getConnectionInfoFactory,
-    startDevUiFactory,
+
     listWorkflowsFactory,
     runWorkflowFactory,
     runNodeFactory,