@compilr-dev/cli 0.5.0 → 0.5.2

package/dist/ui/todo-zone.d.ts

@@ -26,6 +26,7 @@ export declare class TodoZone {
     private thinkingWord;
     private customSpinnerText;
     private animationTimer;
+    private isThinking;
     private onAnimationUpdate;
     constructor(options?: TodoZoneOptions);
     /**
@@ -46,9 +47,25 @@ export declare class TodoZone {
      */
     setSpinnerText(text: string | null): void;
     /**
-     * Add tokens to the counter
+     * Add tokens to the counter (legacy - adds to total)
      */
     addTokens(count: number): void;
+    /**
+     * Add input/output tokens separately (new API for live display)
+     */
+    addTokensDetailed(inputTokens: number, outputTokens: number): void;
+    /**
+     * Get current token counts
+     */
+    getTokenCounts(): {
+        input: number;
+        output: number;
+        total: number;
+    };
+    /**
+     * Set whether extended thinking mode is active
+     */
+    setThinking(thinking: boolean): void;
     /**
      * Set callback for animation updates
      */
@@ -103,6 +120,7 @@ export declare class TodoZone {
     private getDisplayText;
     /**
      * Render the spinner line (when agent running)
+     * Format: ✱ Working... (ctrl+c to interrupt · 1m 23s · ↓ 1.2k ↑ 500 · breakdown · thinking)
      */
     private renderSpinnerLine;
     /**

package/dist/ui/todo-zone.js

@@ -10,6 +10,8 @@
  */
 import chalk from 'chalk';
 import { getStyles } from '../themes/index.js';
+import { formatBreakdownCompact, formatCacheInfo } from '../utils/token-tracker.js';
+import { formatTokens } from './base/index.js';
 // =============================================================================
 // Thinking Words (for random selection when no active todo)
 // =============================================================================
@@ -83,15 +85,6 @@ function formatDuration(ms) {
     const remainingSeconds = seconds % 60;
     return `${String(minutes)}m ${String(remainingSeconds)}s`;
 }
-/**
- * Format token count (e.g., "1.2k", "500")
- */
-function formatTokens(tokens) {
-    if (tokens >= 1000) {
-        return `${(tokens / 1000).toFixed(1)}k`;
-    }
-    return tokens.toString();
-}
 // =============================================================================
 // Todo Zone Class
 // =============================================================================
@@ -109,6 +102,7 @@ export class TodoZone {
     thinkingWord = '';
     customSpinnerText = null;
     animationTimer = null;
+    isThinking = false; // Extended thinking mode active
     // Callback for when animation updates (Footer will re-render)
     onAnimationUpdate = null;
     constructor(options = {}) {
@@ -152,13 +146,42 @@ export class TodoZone {
         this.customSpinnerText = text;
     }
     /**
-     * Add tokens to the counter
+     * Add tokens to the counter (legacy - adds to total)
      */
     addTokens(count) {
         if (this.spinnerState) {
             this.spinnerState.tokens += count;
         }
     }
+    /**
+     * Add input/output tokens separately (new API for live display)
+     */
+    addTokensDetailed(inputTokens, outputTokens) {
+        if (this.spinnerState) {
+            this.spinnerState.inputTokens += inputTokens;
+            this.spinnerState.outputTokens += outputTokens;
+            this.spinnerState.tokens += inputTokens + outputTokens;
+        }
+    }
+    /**
+     * Get current token counts
+     */
+    getTokenCounts() {
+        if (this.spinnerState) {
+            return {
+                input: this.spinnerState.inputTokens,
+                output: this.spinnerState.outputTokens,
+                total: this.spinnerState.tokens,
+            };
+        }
+        return { input: 0, output: 0, total: 0 };
+    }
+    /**
+     * Set whether extended thinking mode is active
+     */
+    setThinking(thinking) {
+        this.isThinking = thinking;
+    }
     /**
      * Set callback for animation updates
      */
@@ -248,6 +271,8 @@ export class TodoZone {
         this.spinnerState = {
             text: this.thinkingWord,
             tokens: 0,
+            inputTokens: 0,
+            outputTokens: 0,
             startTime: Date.now(),
         };
         // Reset animation
@@ -310,6 +335,7 @@ export class TodoZone {
     }
     /**
      * Render the spinner line (when agent running)
+     * Format: ✱ Working... (ctrl+c to interrupt · 1m 23s · ↓ 1.2k ↑ 500 · breakdown · thinking)
      */
     renderSpinnerLine() {
         if (!this.spinnerState) {
@@ -317,8 +343,34 @@ export class TodoZone {
         }
         const s = getStyles();
         const elapsed = formatDuration(Date.now() - this.spinnerState.startTime);
-        const tokenStr = formatTokens(this.spinnerState.tokens);
-        const stats = s.muted(` (esc to cancel · ${elapsed} · ↓ ${tokenStr} tokens)`);
+        const inputStr = formatTokens(this.spinnerState.inputTokens);
+        const outputStr = formatTokens(this.spinnerState.outputTokens);
+        // Build status parts (Claude Code style with input/output)
+        const parts = [
+            'ctrl+c to interrupt',
+            elapsed,
+            `↓ ${inputStr} ↑ ${outputStr}`,
+        ];
+        // Add token breakdown if we have input tokens
+        if (this.spinnerState.inputTokens > 0) {
+            // Check for cache info first
+            const cacheInfo = formatCacheInfo();
+            if (cacheInfo) {
+                parts.push(cacheInfo);
+            }
+            else {
+                // Show component breakdown
+                const breakdown = formatBreakdownCompact();
+                if (breakdown) {
+                    parts.push(breakdown);
+                }
+            }
+        }
+        // Add "thinking" indicator when extended thinking is active
+        if (this.isThinking) {
+            parts.push('thinking');
+        }
+        const stats = s.muted(` (${parts.join(' · ')})`);
         // Determine display text - tool name or thinking word
         const displayText = this.currentTool
             ? `● ${this.currentTool}`
@@ -359,10 +411,16 @@ export class TodoZone {
         for (const todo of this.todos) {
             let checkbox;
             let text;
+            let ownerBadge = '';
+            // Format owner badge
+            if (todo.owner) {
+                ownerBadge = s.muted(` @${todo.owner}`);
+            }
             switch (todo.status) {
                 case 'completed':
                     checkbox = s.muted('☒');
                     text = chalk.strikethrough(s.muted(todo.content));
+                    ownerBadge = ''; // Don't show owner for completed items
                     break;
                 case 'in_progress':
                     checkbox = s.primary('☐');
@@ -374,7 +432,7 @@ export class TodoZone {
                     text = s.muted(todo.content);
                     break;
             }
-            lines.push(`${indent}${checkbox} ${text}`);
+            lines.push(`${indent}${checkbox} ${text}${ownerBadge}`);
         }
         return lines;
     }