chore: bump version to 0.1394

src/web/public/app.js

@@ -2635,34 +2635,67 @@ class ClaudemanApp {
   async generatePlan() {
     const config = this.ralphWizardConfig;
 
-    // Stop any existing timer
+    // Stop any existing timers
     if (this.planLoadingTimer) {
       clearInterval(this.planLoadingTimer);
       this.planLoadingTimer = null;
     }
+    if (this.planPhaseTimer) {
+      clearInterval(this.planPhaseTimer);
+      this.planPhaseTimer = null;
+    }
 
     // Show loading state
     document.getElementById('planGenerationError')?.classList.add('hidden');
     document.getElementById('planEditor')?.classList.add('hidden');
     document.getElementById('planGenerationLoading')?.classList.remove('hidden');
 
-    // Start elapsed time display
+    // Animated progress phases
+    const phases = [
+      { time: 0, title: 'Starting Opus 4.5...', hint: 'Initializing deep reasoning model' },
+      { time: 3, title: 'Analyzing task requirements...', hint: 'Understanding the scope and complexity' },
+      { time: 8, title: 'Identifying components...', hint: 'Breaking down into modules and features' },
+      { time: 15, title: 'Planning TDD approach...', hint: 'Designing test-first implementation strategy' },
+      { time: 25, title: 'Generating implementation steps...', hint: 'Creating detailed action items with tests' },
+      { time: 40, title: 'Adding verification checkpoints...', hint: 'Ensuring each phase has validation' },
+      { time: 55, title: 'Reviewing for completeness...', hint: 'Checking all requirements are covered' },
+      { time: 70, title: 'Finalizing plan...', hint: 'Organizing and prioritizing steps' },
+      { time: 90, title: 'Still working...', hint: 'Complex tasks take longer - hang tight!' },
+    ];
+
+    // Start elapsed time and phase display
     this.planLoadingStartTime = Date.now();
     const timeEl = document.getElementById('planLoadingTime');
-    if (timeEl) timeEl.textContent = '0s';
+    const titleEl = document.getElementById('planLoadingTitle');
+    const hintEl = document.getElementById('planLoadingHint');
 
+    if (timeEl) timeEl.textContent = '0s';
+    if (titleEl) titleEl.textContent = phases[0].title;
+    if (hintEl) hintEl.textContent = phases[0].hint;
+
+    let currentPhaseIndex = 0;
     this.planLoadingTimer = setInterval(() => {
       const elapsed = Math.floor((Date.now() - this.planLoadingStartTime) / 1000);
       if (timeEl) timeEl.textContent = `${elapsed}s`;
+
+      // Update phase based on elapsed time
+      for (let i = phases.length - 1; i >= 0; i--) {
+        if (elapsed >= phases[i].time && i > currentPhaseIndex) {
+          currentPhaseIndex = i;
+          if (titleEl) titleEl.textContent = phases[i].title;
+          if (hintEl) hintEl.textContent = phases[i].hint;
+          break;
+        }
+      }
     }, 1000);
 
     // Determine max items based on detail level
     const detailConfig = {
-      brief: { maxItems: 5, includeTests: false },
-      standard: { maxItems: 8, includeTests: true },
-      detailed: { maxItems: 12, includeTests: true },
+      brief: { maxItems: 10 },
+      standard: { maxItems: 15 },
+      detailed: { maxItems: 20 },
     };
-    const { maxItems, includeTests } = detailConfig[config.planDetailLevel] || detailConfig.standard;
+    const { maxItems } = detailConfig[config.planDetailLevel] || detailConfig.standard;
 
     try {
       const res = await fetch('/api/generate-plan', {
@@ -2671,7 +2704,6 @@ class ClaudemanApp {
         body: JSON.stringify({
           taskDescription: config.taskDescription,
           maxItems,
-          includeTests,
           detailLevel: config.planDetailLevel,
         }),
       });
@@ -2838,6 +2870,16 @@ class ClaudemanApp {
   }
 
   skipPlanGeneration() {
+    // Stop any running timers
+    if (this.planLoadingTimer) {
+      clearInterval(this.planLoadingTimer);
+      this.planLoadingTimer = null;
+    }
+    if (this.planPhaseTimer) {
+      clearInterval(this.planPhaseTimer);
+      this.planPhaseTimer = null;
+    }
+
     this.ralphWizardConfig.skipPlanGeneration = true;
     this.ralphWizardConfig.planGenerated = false;
     this.ralphWizardConfig.generatedPlan = null;

src/web/public/index.html

@@ -1011,11 +1011,12 @@
               <div class="plan-loading-content">
                 <div class="plan-spinner"></div>
                 <div class="plan-loading-text">
-                  <span class="plan-loading-title">Generating implementation plan...</span>
+                  <span class="plan-loading-title" id="planLoadingTitle">Starting Opus 4.5...</span>
                   <span class="plan-loading-time" id="planLoadingTime">0s</span>
                 </div>
               </div>
-              <p class="plan-loading-hint">Claude is breaking down your task into actionable steps with tests</p>
+              <p class="plan-loading-hint" id="planLoadingHint">Initializing deep reasoning model</p>
+              <button class="btn-toolbar btn-sm plan-skip-btn" onclick="app.skipPlanGeneration()">Skip</button>
             </div>
 
             <!-- Error state -->

src/web/public/styles.css

@@ -5344,7 +5344,7 @@ kbd {
 
 /* Wizard Pages */
 .wizard-page {
-  min-height: 280px;
+  min-height: 180px;
 }
 
 .wizard-page.hidden {
@@ -5482,7 +5482,15 @@ kbd {
 .plan-loading-hint {
   color: var(--text-dim);
   font-size: 0.85rem;
-  margin: 0;
+  margin: 0 0 1rem 0;
+}
+
+.plan-skip-btn {
+  opacity: 0.6;
+}
+
+.plan-skip-btn:hover {
+  opacity: 1;
 }
 
 .plan-error-msg {
@@ -5744,11 +5752,11 @@ kbd {
   background: var(--bg-dark);
   border: 1px solid var(--border);
   border-radius: 4px;
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
   font-family: 'SF Mono', Monaco, 'Courier New', monospace;
   font-size: 0.75rem;
   color: var(--text-dim);
-  max-height: 200px;
+  max-height: 120px;
   overflow-y: auto;
   white-space: pre-wrap;
   word-break: break-word;