fix terminal sizing, add welcome prompt with session resume, improve dev UI

cevian · claude · cevian · commit 406899a9564c · 2026-02-27T17:44:32.000+01:00
Defer PTY spawn until the first client sends pty-resize with actual
terminal dimensions, fixing line overflow on initial load. Move welcome
prompt into pty.ts with auto-resume for existing sessions. Improve
empty-state UX in canvas/dashboard. Restructure Dockerfile for better
layer caching by installing template deps before runcrayon.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/core/dev-ui/src/App.tsx b/packages/core/dev-ui/src/App.tsx
@@ -18,7 +18,7 @@ import { DashboardPage } from "./components/DashboardPage";
 
 export function App() {
   const { state, connected, sendMessage, ptyEvents } = useDAGSocket();
-  const terminal = useTerminal({ sendMessage, ptyEvents });
+  const terminal = useTerminal({ sendMessage, ptyEvents, connected });
   const connectionsApi = useConnections();
   const router = useHashRouter();
   const sidebar = useSidebarState();
@@ -209,8 +209,16 @@ export function App() {
                   </div>
                 </ReactFlowProvider>
               ) : (
-                <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
-                  Waiting for workflow files...
+                <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm gap-4">
+                  <p className="font-medium">Create a workflow with Claude Code</p>
+                  <ul className="list-none space-y-1.5 text-xs text-center">
+                    <li>"Create workflow to qualify inbound leads and route to sales reps"</li>
+                    <li>"Create workflow to track competitor pricing and alert on changes"</li>
+                    <li>"Create workflow to generate weekly pipeline reports from CRM data"</li>
+                  </ul>
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mt-2 animate-bounce">
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
                 </div>
               )}
 
diff --git a/packages/core/dev-ui/src/components/DashboardPage.tsx b/packages/core/dev-ui/src/components/DashboardPage.tsx
@@ -69,7 +69,7 @@ export function DashboardPage({ workflows, parseErrors, onSelectWorkflow }: Dash
             </div>
             <p className="text-[15px] text-[#1a1a1a] font-medium">No workflows yet</p>
             <p className="text-[13px] text-[#a8a099] mt-1.5 max-w-sm">
-              Create a workflow file in your project to get started. Use Claude Code to generate one.
+              Go to the <a href="#/canvas" className="underline text-[#1a1a1a] hover:text-[#000]">Canvas</a> tab to create workflows.
             </p>
           </div>
         ) : (
diff --git a/packages/core/dev-ui/src/components/WorkflowSelector.tsx b/packages/core/dev-ui/src/components/WorkflowSelector.tsx
@@ -20,7 +20,7 @@ export function WorkflowSelector({
       </h2>
 
       {workflows.length === 0 && parseErrors.length === 0 && (
-        <p className="text-xs text-[#a8a099] italic">No workflows found</p>
+        <p className="text-xs text-[#a8a099] italic">No workflows yet — create one with Claude Code</p>
       )}
 
       {workflows.map((w) => (
diff --git a/packages/core/dev-ui/src/hooks/useTerminal.ts b/packages/core/dev-ui/src/hooks/useTerminal.ts
@@ -6,6 +6,7 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
 export interface UseTerminalOptions {
   sendMessage: (msg: object) => void;
   ptyEvents: EventTarget;
+  connected: boolean;
 }
 
 function createTerminal(sendRef: React.MutableRefObject<(msg: object) => void>) {
@@ -53,7 +54,7 @@ function createTerminal(sendRef: React.MutableRefObject<(msg: object) => void>)
   return { term, fitAddon };
 }
 
-export function useTerminal({ sendMessage, ptyEvents }: UseTerminalOptions) {
+export function useTerminal({ sendMessage, ptyEvents, connected }: UseTerminalOptions) {
   const [ptyAlive, setPtyAlive] = useState(false);
   const [hasData, setHasData] = useState(false);
 
@@ -117,6 +118,18 @@ export function useTerminal({ sendMessage, ptyEvents }: UseTerminalOptions) {
     };
   }, [ptyEvents, term]);
 
+  // When WebSocket connects (or reconnects), ensure PTY is spawned with correct size.
+  // The initial pty-resize from attachTo may have been lost if the WS wasn't open yet.
+  useEffect(() => {
+    if (connected && !ptyAlive && openedRef.current) {
+      fitAddon.fit();
+      sendRef.current({
+        type: "pty-resize",
+        data: { cols: term.cols, rows: term.rows },
+      });
+    }
+  }, [connected, ptyAlive, term, fitAddon]);
+
   const attachTo = useCallback(
     (container: HTMLDivElement | null) => {
       if (!container) return;
diff --git a/packages/core/docker/Dockerfile.cloud-dev b/packages/core/docker/Dockerfile.cloud-dev
@@ -11,6 +11,39 @@ RUN apt-get update && apt-get install -y python3 make g++ git curl openssh-serve
 # This means users can run `npm install` without extra flags and still hit the cache.
 RUN npm config set cache /npm-cache --global
 
+# Install Claude Code CLI early so this layer is cached independently of crayon changes.
+# The _setup user is reused later by `crayon install` to register the plugin.
+RUN groupadd -f devs && \
+    useradd -m -s /bin/bash -g devs _setup && \
+    su -s /bin/bash _setup -c "curl -fsSL https://claude.ai/install.sh | bash" && \
+    ln -sf /home/_setup/.local/bin/claude /usr/local/bin/claude
+
+# Pre-install app template node_modules at /node_modules so Node.js finds them
+# via standard parent-directory resolution from /data/app (no NODE_PATH needed).
+# The template package.json has Handlebars placeholders (e.g. {{crayon_version}})
+# that must be resolved before npm install can parse it.
+#
+# Step 1: Get the template package.json into /tmp/cache-build/.
+# For local builds, build-dev.sh copies it into the build context.
+# For npm builds, download the tarball and extract just the template.
+COPY entrypoint.sh template-package.json* /tmp/
+RUN mkdir -p /tmp/cache-build && \
+    if [ "$CRAYON_SOURCE" = "local" ]; then \
+      mv /tmp/template-package.json /tmp/cache-build/package.json; \
+    else \
+      npm pack runcrayon@dev --pack-destination /tmp && \
+      tar -xzf /tmp/runcrayon-*.tgz -C /tmp/cache-build --strip-components=3 package/templates/app/package.json && \
+      rm -f /tmp/runcrayon-*.tgz; \
+    fi
+
+# Step 2: Install template deps. This layer caches when deps don't change.
+RUN cd /tmp/cache-build && \
+    sed -i 's/{{crayon_version}}/dev/g' package.json && \
+    sed -i 's/{{app_name}}/cache-app/g' package.json && \
+    npm install && \
+    mv node_modules / && \
+    rm -rf /tmp/cache-build
+
 # runcrayon — install from local tarball or npm depending on build arg.
 # In dev mode, run: npm pack --pack-destination docker/ (from packages/core)
 # The wildcard COPY uses a dot file as fallback so it never fails when no .tgz exists.
@@ -23,36 +56,19 @@ RUN if [ "$CRAYON_SOURCE" = "local" ] && ls /tmp/build/runcrayon-*.tgz 1>/dev/nu
     else \
       npm install -g runcrayon@dev; \
     fi && \
-    rm -rf /tmp/build
-
-# Pre-install app template node_modules at /node_modules so Node.js finds them
-# via standard parent-directory resolution from /data/app (no NODE_PATH needed).
-# The template package.json has Handlebars placeholders (e.g. {{crayon_version}})
-# that must be resolved before npm install can parse it.
-RUN GLOBAL_MODULES="$(npm root -g)" && \
-    TEMPLATE_DIR="$GLOBAL_MODULES/runcrayon/templates/app" && \
-    mkdir -p /tmp/cache-build && cp "$TEMPLATE_DIR/package.json" /tmp/cache-build/ && \
-    cd /tmp/cache-build && sed -i 's/{{crayon_version}}/dev/g' package.json && \
-    sed -i 's/{{app_name}}/cache-app/g' package.json && \
-    npm install && \
-    mv node_modules / && \
-    rm -rf /tmp/cache-build && \
+    rm -rf /tmp/build && \
     rm -rf /node_modules/runcrayon && \
-    ln -s "$GLOBAL_MODULES/runcrayon" /node_modules/runcrayon
+    ln -s "$(npm root -g)/runcrayon" /node_modules/runcrayon
 
 # /node_modules found by Node.js via parent-directory resolution from /data/app.
 # /npm-cache is pre-populated during build; world-writable so DEV_USER can use it.
 RUN chmod -R a+rwx /npm-cache
 ENV PATH=/node_modules/.bin:$PATH
 
-# Pre-run claude install + crayon install as a temp user, then save to /etc/skel.
+# Register crayon plugin with the _setup user created earlier, then bake into /etc/skel.
 # useradd -m copies /etc/skel into new home dirs, so runtime users get Claude Code
 # + plugin/marketplace registration without the slow setup on every boot.
-RUN groupadd -f devs && \
-    useradd -m -s /bin/bash -g devs _setup && \
-    su -s /bin/bash _setup -c "curl -fsSL https://claude.ai/install.sh | bash" && \
-    ln -sf /home/_setup/.local/bin/claude /usr/local/bin/claude && \
-    CRAYON="$(npm prefix -g)/bin/crayon" && \
+RUN CRAYON="$(npm prefix -g)/bin/crayon" && \
     su -s /bin/bash _setup -c "$CRAYON install --force" && \
     test -f /home/_setup/.claude/settings.json || { echo "ERROR: crayon plugin not registered"; exit 1; } && \
     cp -a /home/_setup/. /etc/skel/ && \
diff --git a/packages/core/docker/build-dev.sh b/packages/core/docker/build-dev.sh
@@ -31,6 +31,7 @@ echo "==> Packing tarball..."
 cd "$CORE_DIR"
 rm -f docker/runcrayon-*.tgz
 npm pack --pack-destination docker/
+cp templates/app/package.json docker/template-package.json
 
 echo "==> Building and pushing Docker image (tag: $TAG)..."
 cd "$SCRIPT_DIR"
diff --git a/packages/core/docker/template-package.json b/packages/core/docker/template-package.json
@@ -0,0 +1,59 @@
+{
+  "name": "{{app_name}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "preinstall": "[ ! -f /tmp/node_modules.lock ] || flock /tmp/node_modules.lock true",
+    "postinstall": "rm -rf node_modules/runcrayon",
+    "prebuild": "crayon build",
+    "build": "next build",
+    "check": "biome check .",
+    "check:unsafe": "biome check --write --unsafe .",
+    "check:write": "biome check --write .",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio",
+    "predev": "crayon build",
+    "dev": "next dev --turbo",
+    "crayon": "crayon",
+    "preview": "next build && next start",
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "runcrayon": "{{crayon_version}}",
+    "@nangohq/node": "^0.45.0",
+    "@dbos-inc/otel": "latest",
+    "@t3-oss/env-nextjs": "^0.13.10",
+    "@tanstack/react-query": "^5.90.19",
+    "@trpc/client": "^11.8.1",
+    "@trpc/react-query": "^11.8.1",
+    "@trpc/server": "^11.8.1",
+    "drizzle-orm": "^0.41.0",
+    "next": "^16.1.4",
+    "postgres": "^3.4.8",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "server-only": "^0.0.1",
+    "superjson": "^2.2.6",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.11",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "drizzle-kit": "^0.31.8",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.40.0"
+  },
+  "packageManager": "npm@11.7.0"
+}
diff --git a/packages/core/src/cli/index.ts b/packages/core/src/cli/index.ts
@@ -602,9 +602,8 @@ 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")
-  .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 }) => {
+  .action(async (options: { port: string; host?: boolean; dangerouslySkipPermissions?: boolean; verbose?: boolean }) => {
     // Load .env for DATABASE_URL and NANGO_SECRET_KEY
     try {
       resolveEnv();
@@ -627,7 +626,6 @@ program
       nangoSecretKey: process.env.NANGO_SECRET_KEY,
       claudePluginDir: pluginDir,
       claudeSkipPermissions: options.dangerouslySkipPermissions,
-      claudePrompt: options.claudePrompt,
       verbose: options.verbose,
     });
   });
diff --git a/packages/core/src/cli/run.ts b/packages/core/src/cli/run.ts
@@ -207,14 +207,6 @@ function discoverProjects(): ProjectInfo[] {
   return projects;
 }
 
-const WELCOME_PROMPT =
-  "Welcome to your crayon 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 launchExistingProject(projectPath: string): Promise<void> {
   // Check if database is paused and start it if needed
   try {
@@ -284,7 +276,6 @@ async function launchDevServer(cwd: string, { yolo = false }: { yolo?: boolean }
     nangoSecretKey: process.env.NANGO_SECRET_KEY,
     claudePluginDir: pluginDir,
     claudeSkipPermissions: yolo,
-    claudePrompt: WELCOME_PROMPT,
   });
 
   // Open browser
diff --git a/packages/core/src/dev-ui/dev-server.ts b/packages/core/src/dev-ui/dev-server.ts
@@ -53,7 +53,6 @@ export interface DevServerOptions {
   nangoSecretKey?: string;
   claudePluginDir?: string;
   claudeSkipPermissions?: boolean;
-  claudePrompt?: string;
 }
 
 export async function startDevServer(options: DevServerOptions) {
@@ -156,16 +155,27 @@ export async function startDevServer(options: DevServerOptions) {
   let ptyManager: PtyManager | null = null;
 
   const onClientMessage = (_ws: import("ws").WebSocket, msg: WSClientMessage) => {
-    if (!ptyManager) return;
+    if (!ptyManager) {
+      console.log(`[dev-server] Ignoring ${msg.type}: ptyManager is null (node-pty not available)`);
+      return;
+    }
     switch (msg.type) {
       case "pty-input":
         ptyManager.write(msg.data);
         break;
       case "pty-resize":
-        ptyManager.resize(msg.data.cols, msg.data.rows);
+        if (!ptyManager.isAlive()) {
+          // First resize from client — spawn PTY with correct dimensions
+          console.log(`[dev-server] First pty-resize, spawning PTY (${msg.data.cols}x${msg.data.rows})`);
+          const pid = ptyManager.spawn(msg.data.cols, msg.data.rows);
+          broadcast({ type: "pty-spawned", data: { pid } });
+        } else {
+          ptyManager.resize(msg.data.cols, msg.data.rows);
+        }
         break;
       case "pty-spawn":
         if (!ptyManager.isAlive()) {
+          console.log("[dev-server] pty-spawn received, spawning PTY");
           const pid = ptyManager.spawn();
           broadcast({ type: "pty-spawned", data: { pid } });
         }
@@ -183,12 +193,12 @@ export async function startDevServer(options: DevServerOptions) {
       claudeArgs: [
         ...(options.claudePluginDir ? ["--plugin-dir", options.claudePluginDir] : []),
         ...(options.claudeSkipPermissions ? ["--dangerously-skip-permissions"] : []),
-        ...(options.claudePrompt ? ["--", options.claudePrompt] : []),
       ],
       onData: (data) => broadcast({ type: "pty-data", data }),
       onExit: (code) => broadcast({ type: "pty-exit", data: { code } }),
     });
-  } catch {
+  } catch (err) {
+    console.log(`[dev-server] Failed to load node-pty: ${err}`);
     if (!options.quiet) {
       console.log("  Terminal: unavailable (node-pty not installed)\n");
     }
@@ -200,20 +210,7 @@ export async function startDevServer(options: DevServerOptions) {
     onMessage: (msg) => broadcast(msg),
   });
 
-  // Auto-spawn Claude Code PTY
-  if (ptyManager) {
-    try {
-      const pid = ptyManager.spawn();
-      if (options.verbose) {
-        console.log(`  Terminal: Claude Code running (PID ${pid})\n`);
-      }
-    } catch (err) {
-      if (!options.quiet) {
-        console.log(`  Terminal: failed to spawn claude (${err instanceof Error ? err.message : err})\n`);
-      }
-      ptyManager = null;
-    }
-  }
+  // PTY spawns on first client pty-resize so it starts with correct dimensions
 
   // On new WS connection, wait for initial scan then send full state
   wss.on("connection", async (ws) => {
diff --git a/packages/core/src/dev-ui/pty.ts b/packages/core/src/dev-ui/pty.ts
