create-claude-workspace 1.1.150 → 1.1.152

package/dist/scripts/autonomous.mjs

@@ -430,6 +430,7 @@ async function main() {
             let sessionId = '';
             if (opts.interactive) {
                 tui.setInputHandler((text) => {
+                    tui.addPendingInput(text);
                     const msg = {
                         type: 'user',
                         message: { role: 'user', content: text },

package/dist/scripts/lib/tui.mjs

@@ -22,6 +22,8 @@ const DIM = '\x1b[2m';
 const HIDE_CURSOR = '\x1b[?25l';
 const SHOW_CURSOR = '\x1b[?25h';
 const CLEAR_LINE = '\r\x1b[2K';
+const CLEAR_TO_END = '\x1b[J'; // clear from cursor to end of screen
+const CURSOR_UP = (n) => n > 0 ? `\x1b[${n}A` : '';
 // ─── Tool icons ───
 const ICONS = {
     Bash: '⚡', Read: '📖', Write: '✏️ ', Edit: '🔧', Glob: '🔍', Grep: '🔎',
@@ -39,7 +41,7 @@ export class TUI {
     onInput = null;
     onHotkey = null;
     state;
-    statusBarVisible = false;
+    statusBarLines = 0;
     statusTimer = null;
     stdinHandler = null;
     topAgent = null;
@@ -50,6 +52,7 @@ export class TUI {
             iteration: 0, maxIter: 0, loopStart: Date.now(), iterStart: 0,
             tools: 0, tokensIn: 0, tokensOut: 0, agents: [], taskName: '',
             tasksDone: 0, tasksTotal: 0, paused: false, inputBuf: '',
+            pendingInputs: [],
         };
         if (this.interactive) {
             // Hide cursor to prevent flickering
@@ -122,10 +125,10 @@ export class TUI {
     }
     destroy() {
         if (this.interactive) {
-            // Clear status bar
-            if (this.statusBarVisible) {
-                process.stdout.write(CLEAR_LINE);
-                this.statusBarVisible = false;
+            // Clear status area
+            if (this.statusBarLines > 0) {
+                process.stdout.write(CURSOR_UP(this.statusBarLines - 1) + '\r' + CLEAR_TO_END);
+                this.statusBarLines = 0;
             }
             // Show cursor
             process.stdout.write(SHOW_CURSOR);
@@ -151,6 +154,19 @@ export class TUI {
     setInputHandler(h) { this.onInput = h; }
     setHotkeyHandler(h) { this.onHotkey = h; }
     isPaused() { return this.state.paused; }
+    addPendingInput(text) {
+        this.state.pendingInputs.push(text);
+        this.log(`  ${ANSI_COLORS.gray}${ts()}${RESET}  ${ANSI_COLORS.magenta}▲${RESET}  ${ANSI_COLORS.white}Queued:${RESET} ${trunc(text, 60)}`);
+        this.renderStatusBar();
+    }
+    consumePendingInput() {
+        const item = this.state.pendingInputs.shift();
+        if (item) {
+            this.log(`  ${ANSI_COLORS.gray}${ts()}${RESET}  ${ANSI_COLORS.green}▼${RESET}  ${ANSI_COLORS.white}Processing:${RESET} ${trunc(item, 60)}`);
+            this.renderStatusBar();
+        }
+        return item;
+    }
     /** Set the top-level agent name so all log lines show it from the start. */
     setTopAgent(name) {
         this.topAgent = name;
@@ -158,69 +174,92 @@ export class TUI {
             this.state.agents.push(name);
         }
     }
-    // ─── Status bar (overwrites current line, no \n) ───
-    buildStatusBar() {
+    // ─── Status area (multi-line: pending queue + input + stats) ───
+    buildStatusLines() {
         const s = this.state;
+        const lines = [];
+        // Line 1: Pending input queue (only if non-empty)
+        if (s.pendingInputs.length > 0) {
+            const nums = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨'];
+            const items = s.pendingInputs.slice(0, 5).map((t, i) => `${nums[i] || '•'} ${trunc(t, 25)}`).join('  ');
+            const more = s.pendingInputs.length > 5 ? `  +${s.pendingInputs.length - 5}` : '';
+            lines.push(` ${ANSI_COLORS.magenta}[${s.pendingInputs.length} queued]${RESET} ${ANSI_COLORS.gray}${items}${more}${RESET}`);
+        }
+        // Line 2: Input prompt
+        if (s.inputBuf) {
+            lines.push(` ${ANSI_COLORS.white}› ${s.inputBuf}${RESET}`);
+        }
+        else {
+            lines.push(` ${ANSI_COLORS.gray}› type to send input${RESET}`);
+        }
+        // Line 3: Status bar (stats)
         const elapsed = fmtDur(Date.now() - s.loopStart);
         const iterTime = s.iterStart ? fmtDur(Date.now() - s.iterStart) : '—';
         const pct = s.maxIter > 0 ? Math.round((s.iteration / s.maxIter) * 100) : 0;
         const filled = Math.round((pct / 100) * 8);
-        const bar = '\u2588'.repeat(filled) + '\u2591'.repeat(8 - filled);
+        const bar = `${ANSI_COLORS.green}${'\u2588'.repeat(filled)}${ANSI_COLORS.gray}${'\u2591'.repeat(8 - filled)}${RESET}`;
         const tok = fmtTok(s.tokensIn + s.tokensOut);
         const cur = s.agents.length > 0 ? s.agents[s.agents.length - 1] : '';
-        let line = ` ${elapsed} | Iter ${s.iteration}/${s.maxIter} ${bar} | ${iterTime} | ${s.tools} tools | ${tok} tok`;
-        if (cur)
-            line += ` | ${cur}`;
+        let stats = `\x1b[7m ${elapsed} | Iter ${s.iteration}/${s.maxIter} \x1b[27m ${bar} \x1b[7m ${iterTime} | ${ANSI_COLORS.cyan}${s.tools}${RESET}\x1b[7m tools | ${ANSI_COLORS.yellow}${tok}${RESET}\x1b[7m tok`;
+        if (cur) {
+            const col = ANSI_COLORS[agentColor(cur)] || '';
+            stats += ` | ${col}${BOLD}${cur}${RESET}\x1b[7m`;
+        }
         if (s.taskName)
-            line += ` | ${trunc(s.taskName, 20)}`;
+            stats += ` | ${ANSI_COLORS.cyan}${trunc(s.taskName, 20)}${RESET}\x1b[7m`;
         if (s.paused)
-            line += ' | PAUSED';
-        line += s.inputBuf ? `  › ${s.inputBuf}` : '  › type to send input';
-        // Truncate to terminal width
-        const cols = process.stdout.columns || 120;
-        if (line.length > cols)
-            line = line.slice(0, cols - 1) + '…';
-        return line;
+            stats += ` | ${ANSI_COLORS.yellow}⏸ PAUSED${RESET}\x1b[7m`;
+        stats += ` ${RESET}`;
+        lines.push(stats);
+        return lines;
     }
-    buildColoredStatusBar() {
+    /** Plain-text version for testing / non-ANSI contexts. */
+    buildPlainStatusLines() {
         const s = this.state;
+        const lines = [];
+        if (s.pendingInputs.length > 0) {
+            const items = s.pendingInputs.slice(0, 5).map((t, i) => `${i + 1}. ${trunc(t, 25)}`).join('  ');
+            const more = s.pendingInputs.length > 5 ? `  +${s.pendingInputs.length - 5}` : '';
+            lines.push(` [${s.pendingInputs.length} queued] ${items}${more}`);
+        }
+        lines.push(s.inputBuf ? ` › ${s.inputBuf}` : ' › type to send input');
         const elapsed = fmtDur(Date.now() - s.loopStart);
         const iterTime = s.iterStart ? fmtDur(Date.now() - s.iterStart) : '—';
         const pct = s.maxIter > 0 ? Math.round((s.iteration / s.maxIter) * 100) : 0;
         const filled = Math.round((pct / 100) * 8);
-        const bar = `${ANSI_COLORS.green}${'\u2588'.repeat(filled)}${ANSI_COLORS.gray}${'\u2591'.repeat(8 - filled)}${RESET}`;
+        const bar = '\u2588'.repeat(filled) + '\u2591'.repeat(8 - filled);
         const tok = fmtTok(s.tokensIn + s.tokensOut);
         const cur = s.agents.length > 0 ? s.agents[s.agents.length - 1] : '';
-        let line = `\x1b[7m ${elapsed} | Iter ${s.iteration}/${s.maxIter} \x1b[27m ${bar} \x1b[7m ${iterTime} | ${ANSI_COLORS.cyan}${s.tools}${RESET}\x1b[7m tools | ${ANSI_COLORS.yellow}${tok}${RESET}\x1b[7m tok`;
-        if (cur) {
-            const col = ANSI_COLORS[agentColor(cur)] || '';
-            line += ` | ${col}${BOLD}${cur}${RESET}\x1b[7m`;
-        }
+        let stats = ` ${elapsed} | Iter ${s.iteration}/${s.maxIter} ${bar} | ${iterTime} | ${s.tools} tools | ${tok} tok`;
+        if (cur)
+            stats += ` | ${cur}`;
         if (s.taskName)
-            line += ` | ${ANSI_COLORS.cyan}${trunc(s.taskName, 20)}${RESET}\x1b[7m`;
+            stats += ` | ${trunc(s.taskName, 20)}`;
         if (s.paused)
-            line += ` | ${ANSI_COLORS.yellow}⏸ PAUSED${RESET}\x1b[7m`;
-        if (s.inputBuf) {
-            line += `  ${RESET}${ANSI_COLORS.white}› ${s.inputBuf}${RESET}`;
-        }
-        else {
-            line += `  ${RESET}${ANSI_COLORS.gray}› type to send input${RESET}`;
+            stats += ' | PAUSED';
+        lines.push(stats);
+        return lines;
+    }
+    clearStatusArea() {
+        if (this.statusBarLines > 0) {
+            // Move cursor up to first status line, then clear everything below
+            process.stdout.write(CURSOR_UP(this.statusBarLines - 1) + '\r' + CLEAR_TO_END);
         }
-        line += ` ${RESET}`;
-        return line;
     }
     renderStatusBar() {
         if (!this.interactive)
             return;
-        const line = this.buildColoredStatusBar();
-        process.stdout.write(CLEAR_LINE + line);
-        this.statusBarVisible = true;
+        this.clearStatusArea();
+        const lines = this.buildStatusLines();
+        process.stdout.write(lines.join('\n'));
+        this.statusBarLines = lines.length;
     }
     // ─── Log output (stdout — preserves scroll history) ───
     log(formatted, raw) {
-        if (this.interactive && this.statusBarVisible) {
-            // Clear the status bar line, write the log line, then re-render status bar
-            process.stdout.write(CLEAR_LINE + formatted + '\n');
+        if (this.interactive && this.statusBarLines > 0) {
+            // Clear status area, write the log line, then re-render status
+            this.clearStatusArea();
+            process.stdout.write(formatted + '\n');
             this.renderStatusBar();
         }
         else {
@@ -299,6 +338,10 @@ export class TUI {
                 this.onAssistant(message);
                 break;
             case 'user':
+                // Detect echoed user input (string content) vs tool results (array content)
+                if (typeof message.message?.content === 'string' && this.state.pendingInputs.length > 0) {
+                    this.consumePendingInput();
+                }
                 this.onToolResult(message);
                 break;
             case 'system':

package/dist/scripts/lib/tui.spec.js

@@ -288,3 +288,59 @@ describe('TUI — message handling', () => {
         expect(true).toBe(true);
     });
 });
+describe('TUI — pending input queue', () => {
+    it('addPendingInput logs the queued message', () => {
+        const tui = new TUI(LOG_FILE, false);
+        tui.addPendingInput('fix login bug');
+        expect(readLog()).toContain('Queued:');
+        expect(readLog()).toContain('fix login bug');
+    });
+    it('consumePendingInput returns and logs first item', () => {
+        const tui = new TUI(LOG_FILE, false);
+        tui.addPendingInput('first');
+        tui.addPendingInput('second');
+        const consumed = tui.consumePendingInput();
+        expect(consumed).toBe('first');
+        expect(readLog()).toContain('Processing:');
+        expect(readLog()).toContain('first');
+    });
+    it('consumePendingInput returns undefined when empty', () => {
+        const tui = new TUI(LOG_FILE, false);
+        expect(tui.consumePendingInput()).toBeUndefined();
+    });
+    it('echoed user message consumes from pending queue', () => {
+        const tui = new TUI(LOG_FILE, false);
+        tui.addPendingInput('add tests');
+        // Simulate SDK echoing back the user message (string content, not tool_result array)
+        tui.handleMessage(msg({
+            type: 'user',
+            message: { role: 'user', content: 'add tests' },
+        }));
+        const log = readLog();
+        expect(log).toContain('Queued:');
+        expect(log).toContain('Processing:');
+        // Queue should be empty now
+        expect(tui.consumePendingInput()).toBeUndefined();
+    });
+    it('tool_result user messages do not consume from queue', () => {
+        const tui = new TUI(LOG_FILE, false);
+        tui.addPendingInput('pending task');
+        // Tool result has array content, should NOT consume
+        tui.handleMessage(msg({
+            type: 'user',
+            message: { content: [{ type: 'tool_result', content: 'ok', is_error: false }] },
+        }));
+        // Queue should still have the item
+        expect(tui.consumePendingInput()).toBe('pending task');
+    });
+    it('multiple pending inputs are consumed in FIFO order', () => {
+        const tui = new TUI(LOG_FILE, false);
+        tui.addPendingInput('first');
+        tui.addPendingInput('second');
+        tui.addPendingInput('third');
+        // Consume via echoed user messages
+        tui.handleMessage(msg({ type: 'user', message: { role: 'user', content: 'first' } }));
+        tui.handleMessage(msg({ type: 'user', message: { role: 'user', content: 'second' } }));
+        expect(tui.consumePendingInput()).toBe('third');
+    });
+});

package/dist/template/.claude/agents/orchestrator.md

@@ -369,6 +369,19 @@ If `PLAN.md` exists in the project root, check whether it changed since the last
 - After merge (STEP 10), EXIT. Do NOT update MEMORY.md after merge — it was already committed in STEP 9 and arrived on main via merge. Do NOT ask whether to continue, do NOT wait for confirmation, do NOT start another task. Do NOT create any commits after merge.
 - Track complexity in MEMORY.md `Complexity This Session` for informational purposes only (S=1, M=2, L=4).
 
+### 14. User input during autonomous operation
+The user can send messages mid-session via the interactive TUI. When you receive a user message during the workflow:
+
+- **Read and understand the request** — determine what the user wants.
+- **Task/feature request** ("add X", "build Y", "I want Z"): delegate to `technical-planner` to create properly structured tasks in TODO.md with correct phase, dependencies, complexity, and Type field. The planner decides priority placement — urgent requests go to the top of the current phase, normal requests go to the appropriate phase. Then **continue your current task** — do NOT drop what you're doing. The new task will be picked up in a future invocation.
+- **Change to current task** ("use X instead", "also add Y here", "don't forget Z"): incorporate the feedback into your current implementation. If you're past STEP 3 (IMPLEMENT), adjust the code. If you're in STEP 2 (PLAN), adjust the plan.
+- **Bug report / fix request** ("X is broken", "fix Y"): if it's related to the current task, fix it now. If it's a separate issue, create a hotfix task at the top of the current phase in TODO.md (mark as `Complexity: S`, `Type:` based on affected files).
+- **Stop / abort** ("stop", "cancel", "skip this"): mark the current task as `[~]` SKIPPED in TODO.md with reason "user request", clean up worktree, commit tracking on main, EXIT.
+- **Question / status** ("what are you doing?", "how far along?"): respond briefly with current step and task, then continue working.
+- **Reprioritization** ("do X first", "skip phase 2", "focus on Y"): update TODO.md accordingly (reorder, mark `[~]` SKIPPED with reason). If the current task should be dropped, treat as stop/abort above.
+
+**Do NOT pause or ask for confirmation** — process the input and continue. The user is monitoring asynchronously; they don't expect a back-and-forth conversation.
+
 ## Task Type Detection
 
 To determine if a task is frontend, backend, or fullstack, use this heuristic:

package/dist/template/.claude/agents/project-initializer.md

@@ -43,7 +43,7 @@ After the conversation, scan what already exists. Do NOT create or scaffold anyt
   - `react` or `next` → React
   - `vue` or `nuxt` → Vue
   - `svelte` or `@sveltejs/kit` → Svelte
-  - None of the above → no frontend / backend-only / TS library
+  - None of the above → no frontend detected yet (for new projects, the framework will be chosen in Step 4b)
   - Store the detected framework for Step 4 (profile selection)
 - List `apps/` and `libs/` structure if they exist
 - Check for existing plan/design/UX files (TODO.md, PLAN.md, PRODUCT.md, UX.md)
@@ -182,9 +182,13 @@ Create a **minimal** CLAUDE.md in the project root by filling what is KNOWN from
 - Keep: CLI-First Principle, Code Quality & Linting, and general coding conventions — these apply to all project types
 - The result should be a working CLAUDE.md that will be EXPANDED by architect agents as they make technical decisions
 
-**4b. Copy frontend profile:**
+**4b. Choose and copy frontend profile:**
 
-If a frontend framework was detected (or is expected for a new project):
+**For new projects with a UI (no framework detected yet):** Ask the user which frontend framework they prefer: Angular, React, Vue, or Svelte. If they have no preference, default to React. **NEVER use plain HTML/CSS/JS** — all frontend development requires one of the four supported frameworks (there are no agents or profiles for vanilla web development).
+
+**For existing projects:** Use the framework detected in Step 3.
+
+Once the framework is determined:
 1. Check `.claude/profiles/` for the matching profile file:
    - Angular → `.claude/profiles/angular.md`
    - React → `.claude/profiles/react.md`
@@ -193,7 +197,7 @@ If a frontend framework was detected (or is expected for a new project):
 2. Copy the profile to `.claude/profiles/frontend.md` in the project
 3. If the profile file doesn't exist in the kit (not yet created), warn: "No profile found for [framework]. The ui-engineer, test-engineer, and senior-code-reviewer agents will rely on their native knowledge of [framework]. Consider creating `.claude/profiles/frontend.md` with project-specific conventions."
 
-If no frontend framework is detected (backend-only / TS library), skip this step.
+If the project has no UI (backend-only / TS library), skip this step.
 
 ### Step 5: Product Planning — DELEGATE to `product-owner` agent
 

package/dist/template/.claude/agents/technical-planner.md

@@ -31,7 +31,7 @@ Read these files (all mandatory if they exist):
 ### 2. Determine Tech Stack (for new/empty projects)
 
 If the codebase has no `nx.json` or `package.json` (brand new project), YOU must decide the tech stack based on PRODUCT.md features:
-- **Does it need a UI?** → Choose frontend framework based on project needs. Check if `.claude/profiles/` has a matching profile. If the user mentioned a preference in the discovery conversation, use that.
+- **Does it need a UI?** → MUST choose one of the supported frontend frameworks: **Angular, React, Vue, or Svelte**. NEVER use plain HTML/CSS/JS — there is no agent or profile for vanilla web development. Check `.claude/profiles/` for available profiles. If the user mentioned a preference in the discovery conversation, use that. If no preference, default to React (widest ecosystem).
 - **Does it need a backend?** → Default: Hono on Cloudflare Workers (production) + Node.js (local dev). Backend code must be platform-agnostic — no Node-specific or CF-specific APIs in business/domain layers.
 - **Does it need a database?** → Default: D1 (Cloudflare production) + SQLite/better-sqlite3 (local dev). Both behind repository interfaces.
 - **Package manager** → Default to `npm` unless PRODUCT.md or user context suggests otherwise.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-workspace",
-  "version": "1.1.150",
+  "version": "1.1.152",
   "author": "",
   "repository": {
     "type": "git",