create-claude-workspace 1.1.129 → 1.1.131

package/dist/scripts/lib/tui.mjs

@@ -1,7 +1,7 @@
 // ─── Terminal UI for autonomous loop ───
-// Two modes:
-//   Default: beautiful colored line-by-line output (works everywhere)
-//   Interactive (--interactive): adds input prompt + keyboard controls (needs capable terminal)
+// Log lines scroll naturally. Status bar + input are the last line,
+// erased and redrawn with \r\x1b[2K (single line, no cursor-up tricks).
+// Agent names shown as colored prefix on every log line.
 import { appendFileSync } from 'node:fs';
 // ─── ANSI ───
 const a = {
@@ -57,19 +57,18 @@ export class TUI {
     tokens_ = { input: 0, output: 0 };
     iterStart_ = 0;
     agents = [];
-    lastModel_ = '';
     inputBuf = '';
+    ticker = null;
+    statusVisible = false; // track if status line is currently on screen
     constructor(logFile, interactive = false) {
         this.logFile = logFile;
         this.interactive = interactive && process.stdin.isTTY === true;
         if (this.interactive) {
             this.setupInput();
-            // Initial status bar + input prompt
-            this.renderStatusBar();
-            this.printInputPrompt('');
+            this.ticker = setInterval(() => this.tickStatus(), 1000);
         }
     }
-    // ─── Input handling (interactive only) ───
+    // ─── Input handling ───
     setupInput() {
         if (!process.stdin.isTTY)
             return;
@@ -80,57 +79,83 @@ export class TUI {
             if (key === '\x03') {
                 this.onHotkey?.('quit');
                 return;
-            } // Ctrl+C
-            if (key === '\x1a') { // Ctrl+Z
+            }
+            if (key === '\x1a') {
                 this.paused_ = !this.paused_;
                 this.onHotkey?.(this.paused_ ? 'pause' : 'resume');
+                this.tickStatus();
                 return;
             }
             if (key === '\x13') {
                 this.onHotkey?.('stop');
                 return;
-            } // Ctrl+S
+            }
             if (key === '\r' || key === '\n') {
-                if (this.inputBuf.trim()) {
+                if (this.inputBuf.trim())
                     this.onInput?.(this.inputBuf.trim());
-                }
                 this.inputBuf = '';
-                this.printInputPrompt(this.inputBuf);
+                this.tickStatus();
                 return;
             }
             if (key === '\x7f' || key === '\b') {
                 this.inputBuf = this.inputBuf.slice(0, -1);
-                this.printInputPrompt(this.inputBuf);
+                this.tickStatus();
                 return;
             }
             if (key.length === 1 && key >= ' ') {
                 this.inputBuf += key;
-                this.printInputPrompt(this.inputBuf);
+                this.tickStatus();
             }
         });
     }
-    printInputPrompt(buf) {
-        const prompt = `${a.fg.gray}  › ${a.fg.white}${buf}${a.reset}`;
-        process.stdout.write(`\r\x1b[2K${prompt}`);
-    }
     destroy() {
+        if (this.ticker) {
+            clearInterval(this.ticker);
+            this.ticker = null;
+        }
         if (this.interactive && process.stdin.isTTY) {
             process.stdin.setRawMode(false);
+            this.clearStatus();
             process.stdout.write('\n');
         }
     }
     setInputHandler(handler) { this.onInput = handler; }
     setHotkeyHandler(handler) { this.onHotkey = handler; }
     isPaused() { return this.paused_; }
+    // ─── Status line (single line, rewritten in place) ───
+    buildStatusLine() {
+        const elapsed = fmtDur(Date.now() - this.loopStart);
+        const iterTime = this.iterStart_ ? fmtDur(Date.now() - this.iterStart_) : '—';
+        const pct = this.maxIter > 0 ? Math.round((this.iteration_ / this.maxIter) * 100) : 0;
+        const tok = fmtTok(this.tokens_.input + this.tokens_.output);
+        const agent = this.agents.length > 0 ? ` │ ${agentColor(this.agents[this.agents.length - 1])}${this.agents[this.agents.length - 1]}${a.reset}` : '';
+        const task = this.taskName_ ? ` │ ${a.fg.cyan}${trunc(this.taskName_, 25)}${a.reset}` : '';
+        const pause = this.paused_ ? ` │ ${a.fg.yellow}⏸ PAUSED${a.reset}` : '';
+        const input = this.inputBuf ? `  › ${this.inputBuf}` : '';
+        return `${a.bg.gray} ${elapsed} │ Iter ${this.iteration_}/${this.maxIter} ${bar(pct, 8)} │ ${iterTime} │ ${this.tools} tools │ ${tok} tok${agent}${task}${pause}${input} ${a.reset}`;
+    }
+    tickStatus() {
+        if (!this.interactive)
+            return;
+        // Overwrite current status line in place
+        const line = this.buildStatusLine();
+        const cols = process.stdout.columns || 120;
+        const padded = line + ' '.repeat(Math.max(0, cols - strip(line).length));
+        process.stdout.write(`\r\x1b[2K${padded}`);
+        this.statusVisible = true;
+    }
+    clearStatus() {
+        if (this.statusVisible) {
+            process.stdout.write('\r\x1b[2K');
+            this.statusVisible = false;
+        }
+    }
     // ─── Output ───
     out(formatted, raw) {
         if (this.interactive) {
-            // Move up 2 lines (status + input), clear them, print log, redraw
-            process.stdout.write('\x1b[2K\r'); // clear input line
-            process.stdout.write('\x1b[A\x1b[2K\r'); // move up, clear status line
-            console.log(formatted);
-            this.renderStatusBar();
-            this.printInputPrompt(this.inputBuf);
+            this.clearStatus(); // erase status line
+            console.log(formatted); // print log line (scrolls naturally)
+            this.tickStatus(); // redraw status line after log
         }
         else {
             console.log(formatted);
@@ -143,16 +168,6 @@ export class TUI {
             catch { /* */ }
         }
     }
-    renderStatusBar() {
-        const elapsed = this.loopStart ? fmtDur(Date.now() - this.loopStart) : '—';
-        const iterElapsed = this.iterStart_ ? fmtDur(Date.now() - this.iterStart_) : '—';
-        const pct = this.maxIter > 0 ? Math.round((this.iteration_ / this.maxIter) * 100) : 0;
-        const tok = fmtTok(this.tokens_.input + this.tokens_.output);
-        const taskInfo = this.taskName_ ? ` │ ${a.fg.cyan}${trunc(this.taskName_, 30)}${a.reset}` : '';
-        const pauseLabel = this.paused_ ? ` │ ${a.fg.yellow}⏸ PAUSED${a.reset}` : '';
-        const line = `  ${a.fg.gray}${elapsed}${a.reset} │ Iter ${this.iteration_}/${this.maxIter} ${bar(pct, 10)} │ ${iterElapsed} │ ${a.fg.cyan}${this.tools}${a.reset} tools │ ${a.fg.yellow}${tok}${a.reset} tok${taskInfo}${pauseLabel}`;
-        process.stdout.write(`${a.bg.gray}${line}${' '.repeat(Math.max(0, (process.stdout.columns || 80) - strip(line).length))}${a.reset}\n`);
-    }
     fileOnly(msg) {
         if (this.logFile) {
             try {
@@ -161,6 +176,22 @@ export class TUI {
             catch { /* */ }
         }
     }
+    // ─── Agent label (shown as prefix on log lines) ───
+    agentPrefix() {
+        if (this.agents.length === 0)
+            return '';
+        const current = this.agents[this.agents.length - 1];
+        const col = agentColor(current);
+        const short = current.length > 12 ? current.slice(0, 12) : current;
+        return `${col}${short}${a.reset} `;
+    }
+    indent() {
+        const prefix = this.agentPrefix();
+        if (this.agents.length <= 1)
+            return `  ${prefix}`;
+        const pipes = this.agents.slice(0, -1).map(n => `${agentColor(n)}│${a.reset}`).join('');
+        return `  ${pipes} ${prefix}`;
+    }
     // ─── Public methods ───
     banner() {
         this.out('');
@@ -168,7 +199,7 @@ export class TUI {
         this.out(`  ${a.fg.cyan}${a.bold}║   ${a.fg.white}Claude Starter Kit — Autonomous Loop${a.fg.cyan}       ║${a.reset}`);
         this.out(`  ${a.fg.cyan}${a.bold}╚══════════════════════════════════════════════╝${a.reset}`);
         if (this.interactive) {
-            this.out(`  ${a.fg.gray}  Ctrl+Z pause/resume │ Ctrl+S stop │ Ctrl+C quit${a.reset}`);
+            this.out(`  ${a.fg.gray}  Ctrl+Z pause │ Ctrl+S stop │ Ctrl+C quit │ Type to send input${a.reset}`);
         }
         this.out('');
     }
@@ -230,11 +261,6 @@ export class TUI {
             this.tokens_.input += msg.message.usage.input_tokens || 0;
             this.tokens_.output += msg.message.usage.output_tokens || 0;
         }
-        // Show model from message if available
-        const model = msg.message?.model;
-        if (model && !this.lastModel_) {
-            this.lastModel_ = model;
-        }
         for (const block of content) {
             if (block.type === 'text' && block.text?.trim()) {
                 this.out(`${this.indent()}${a.fg.white}${trunc(block.text, 300)}${a.reset}`, `TEXT: ${trunc(block.text, 300)}`);
@@ -250,7 +276,7 @@ export class TUI {
         const input = block.input || {};
         const pre = this.indent();
         const time = `${a.fg.gray}${ts()}${a.reset}`;
-        // Agent delegation
+        // Agent delegation via tool
         if (name === 'Agent') {
             const type = input.subagent_type || input.type || 'agent';
             const model = input.model ? ` ${a.fg.gray}(${input.model})${a.reset}` : '';
@@ -306,32 +332,27 @@ export class TUI {
         }
     }
     onSystem(msg) {
-        // Init message — show model, agents, version
         if (msg.subtype === 'init') {
             const model = msg.model || 'unknown';
             const agents = msg.agents?.length ? msg.agents.join(', ') : 'none';
             const ver = msg.claude_code_version || '';
             this.out(`  ${a.fg.gray}${ts()}${a.reset}  ${a.fg.cyan}⚙${a.reset}  Claude Code ${ver} │ Model: ${a.bold}${model}${a.reset} │ Agents: ${a.fg.cyan}${agents}${a.reset}`);
-            if (msg.tools?.length) {
-                this.out(`  ${a.fg.gray}       Tools: ${msg.tools.join(', ')}${a.reset}`);
-            }
             return;
         }
         if (msg.subtype === 'task_started') {
             const desc = msg.description || '';
-            const taskType = msg.task_type || '';
             const col = agentColor(desc);
             this.agents.push(desc);
-            this.out(`  ${a.fg.gray}${ts()}${a.reset}  🤖  ${col}${a.bold}${desc}${a.reset}${taskType ? ` ${a.fg.gray}(${taskType})${a.reset}` : ''}`, `AGENT_START: ${desc} ${taskType}`);
+            this.out(`  ${a.fg.gray}${ts()}${a.reset}  🤖  ${col}${a.bold}${desc}${a.reset}`, `AGENT_START: ${desc}`);
             return;
         }
         if (msg.subtype === 'task_notification') {
             const status = msg.status || '';
+            const name = this.agents.length > 0 ? this.agents.pop() : 'agent';
+            const col = agentColor(name);
             const icon = status === 'completed' ? `${a.fg.green}✓` : `${a.fg.red}✗`;
-            const summary = msg.summary ? ` ${a.fg.gray}${trunc(msg.summary, 80)}${a.reset}` : '';
-            if (this.agents.length > 0)
-                this.agents.pop();
-            this.out(`  ${a.fg.gray}${ts()}${a.reset}  ${icon}${a.reset}  Agent ${status}${summary}`, `AGENT_END: ${status} ${msg.summary || ''}`);
+            const summary = msg.summary ? ` ${a.fg.gray}${trunc(msg.summary, 60)}${a.reset}` : '';
+            this.out(`  ${a.fg.gray}${ts()}${a.reset}  ${icon}${a.reset}  ${col}${name}${a.reset} ${status}${summary}`, `AGENT_END: ${name} ${status}`);
             return;
         }
         if (msg.subtype === 'task_progress' && msg.description) {
@@ -339,7 +360,7 @@ export class TUI {
             return;
         }
         if (msg.subtype === 'api_retry') {
-            this.out(`  ${a.fg.gray}${ts()}${a.reset}  ${a.fg.yellow}↻${a.reset}  ${a.fg.yellow}API retry ${msg.attempt}/${msg.max_retries} (${msg.error || 'unknown'})${a.reset}`);
+            this.out(`  ${a.fg.gray}${ts()}${a.reset}  ${a.fg.yellow}↻${a.reset}  ${a.fg.yellow}API retry ${msg.attempt}/${msg.max_retries} (${msg.error || ''})${a.reset}`);
             return;
         }
     }
@@ -347,12 +368,6 @@ export class TUI {
         if (msg.session_id)
             this.fileOnly(`SESSION: ${msg.session_id}`);
     }
-    // ─── Indent ───
-    indent() {
-        if (this.agents.length === 0)
-            return '  ';
-        return '  ' + this.agents.map(n => `${agentColor(n)}│${a.reset} `).join('');
-    }
     resetAgentStack() { this.agents = []; }
     getSessionId(msg) { return msg.session_id ?? null; }
 }

package/package.json

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