claude-kanban 0.6.0 → 0.6.2

package/dist/server/index.js

@@ -3194,6 +3194,16 @@ let state = {
   planningOutput: [],
   sidePanelTab: 'logs', // 'logs' or 'details'
   darkMode: localStorage.getItem('darkMode') === 'true', // Add dark mode state
+  // View state (board or roadmap)
+  currentView: 'board', // 'board' or 'roadmap'
+  // Roadmap state
+  roadmap: null,
+  roadmapGenerating: false,
+  roadmapProgress: null,
+  roadmapError: null,
+  roadmapSelectedFeature: null,
+  roadmapEnableCompetitors: false,
+  roadmapCustomPrompt: '',
 };
 
 // Toast notifications
@@ -3440,6 +3450,41 @@ socket.on('planning:cancelled', () => {
   render();
 });
 
+// Roadmap events
+socket.on('roadmap:started', () => {
+  state.roadmapGenerating = true;
+  state.roadmapProgress = { phase: 'analyzing', message: 'Starting roadmap generation...' };
+  state.roadmapError = null;
+  render();
+});
+
+socket.on('roadmap:progress', ({ phase, message }) => {
+  state.roadmapProgress = { phase, message };
+  render();
+});
+
+socket.on('roadmap:completed', ({ roadmap }) => {
+  state.roadmap = roadmap;
+  state.roadmapGenerating = false;
+  state.roadmapProgress = null;
+  state.showModal = null;
+  showToast('Roadmap generated successfully!', 'success');
+  render();
+});
+
+socket.on('roadmap:failed', ({ error }) => {
+  state.roadmapGenerating = false;
+  state.roadmapProgress = null;
+  state.roadmapError = error;
+  showToast('Roadmap generation failed: ' + error, 'error');
+  render();
+});
+
+socket.on('roadmap:updated', (roadmap) => {
+  state.roadmap = roadmap;
+  render();
+});
+
 // Load templates
 fetch('/api/templates').then(r => r.json()).then(data => {
   state.templates = data.templates;
@@ -3531,6 +3576,69 @@ async function cancelPlanning() {
   await fetch('/api/plan/cancel', { method: 'POST' });
 }
 
+// Roadmap API functions
+async function loadRoadmap() {
+  const res = await fetch('/api/roadmap');
+  const data = await res.json();
+  state.roadmap = data.roadmap;
+  render();
+}
+
+async function generateRoadmap() {
+  state.roadmapGenerating = true;
+  state.roadmapError = null;
+  render();
+  try {
+    await fetch('/api/roadmap/generate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        enableCompetitorResearch: state.roadmapEnableCompetitors,
+        customPrompt: state.roadmapCustomPrompt || undefined
+      })
+    });
+  } catch (e) {
+    state.roadmapGenerating = false;
+    state.roadmapError = e.message;
+    render();
+  }
+}
+
+async function cancelRoadmap() {
+  await fetch('/api/roadmap/cancel', { method: 'POST' });
+  state.roadmapGenerating = false;
+  state.roadmapProgress = null;
+  render();
+}
+
+async function addFeatureToKanban(featureId) {
+  try {
+    const res = await fetch('/api/roadmap/features/' + featureId + '/add-to-kanban', {
+      method: 'POST'
+    });
+    const data = await res.json();
+    if (data.task) {
+      showToast('Feature added to kanban!', 'success');
+      // Reload roadmap to update addedToKanban status
+      await loadRoadmap();
+    }
+  } catch (e) {
+    showToast('Failed to add feature: ' + e.message, 'error');
+  }
+}
+
+async function deleteRoadmapFeature(featureId) {
+  try {
+    await fetch('/api/roadmap/features/' + featureId, { method: 'DELETE' });
+    showToast('Feature removed', 'info');
+  } catch (e) {
+    showToast('Failed to remove feature: ' + e.message, 'error');
+  }
+}
+
+// Load roadmap on init
+loadRoadmap();
+
 // Enhanced Drag and drop
 let draggedTask = null;
 let draggedElement = null;
@@ -3703,6 +3811,185 @@ function showTaskMenu(taskId) {
   openSidePanel(taskId);
 }
 
+// Roadmap rendering functions
+function renderRoadmap() {
+  if (state.roadmapGenerating) {
+    return \`
+      <div class="flex-1 flex items-center justify-center">
+        <div class="text-center">
+          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-accent mx-auto mb-4"></div>
+          <h3 class="text-lg font-medium text-canvas-800 mb-2">Generating Roadmap...</h3>
+          <p class="text-canvas-500">\${state.roadmapProgress?.message || 'Please wait...'}</p>
+          <button onclick="cancelRoadmap()" class="btn btn-ghost mt-4 text-sm">Cancel</button>
+        </div>
+      </div>
+    \`;
+  }
+
+  if (!state.roadmap) {
+    return \`
+      <div class="flex-1 flex items-center justify-center">
+        <div class="text-center max-w-md">
+          <div class="text-6xl mb-4">\u{1F5FA}\uFE0F</div>
+          <h3 class="text-xl font-semibold text-canvas-800 mb-2">No Roadmap Yet</h3>
+          <p class="text-canvas-500 mb-6">Generate a strategic feature roadmap using AI to analyze your project and suggest features.</p>
+          <button onclick="state.showModal = 'roadmap'; render();" class="btn btn-primary px-6 py-2">
+            \u{1F680} Generate Roadmap
+          </button>
+        </div>
+      </div>
+    \`;
+  }
+
+  const roadmap = state.roadmap;
+  const phases = roadmap.phases || [];
+  const features = roadmap.features || [];
+
+  return \`
+    <div class="flex-1 overflow-y-auto p-6">
+      <!-- Roadmap Header -->
+      <div class="mb-6 flex items-start justify-between">
+        <div>
+          <h2 class="text-2xl font-semibold text-canvas-900">\${escapeHtml(roadmap.projectName)} Roadmap</h2>
+          <p class="text-canvas-500 mt-1">\${escapeHtml(roadmap.projectDescription || '')}</p>
+          <p class="text-sm text-canvas-400 mt-2">Target: \${escapeHtml(roadmap.targetAudience || 'Developers')}</p>
+        </div>
+        <div class="flex gap-2">
+          <button onclick="state.showModal = 'roadmap'; render();" class="btn btn-ghost text-sm">
+            \u{1F504} Regenerate
+          </button>
+        </div>
+      </div>
+
+      <!-- Competitors (if available) -->
+      \${roadmap.competitors && roadmap.competitors.length > 0 ? \`
+        <div class="mb-6">
+          <h3 class="text-sm font-medium text-canvas-700 mb-2">Competitor Insights</h3>
+          <div class="flex gap-2 flex-wrap">
+            \${roadmap.competitors.map(c => \`
+              <span class="px-3 py-1 bg-canvas-100 rounded-full text-sm text-canvas-600">
+                \${escapeHtml(c.name)}
+              </span>
+            \`).join('')}
+          </div>
+        </div>
+      \` : ''}
+
+      <!-- Phases -->
+      <div class="space-y-8">
+        \${phases.map(phase => {
+          const phaseFeatures = features.filter(f => f.phase === phase.name);
+          return \`
+            <div class="phase-section">
+              <div class="flex items-center gap-3 mb-4">
+                <h3 class="text-lg font-semibold text-canvas-800">\${escapeHtml(phase.name)}</h3>
+                <span class="text-xs bg-canvas-100 px-2 py-0.5 rounded-full text-canvas-500">\${phaseFeatures.length} features</span>
+              </div>
+              <p class="text-sm text-canvas-500 mb-4">\${escapeHtml(phase.description || '')}</p>
+              <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                \${phaseFeatures.map(f => renderRoadmapFeature(f)).join('')}
+              </div>
+            </div>
+          \`;
+        }).join('')}
+      </div>
+    </div>
+  \`;
+}
+
+function renderRoadmapFeature(feature) {
+  const priorityColors = {
+    must: 'bg-red-100 text-red-700',
+    should: 'bg-orange-100 text-orange-700',
+    could: 'bg-blue-100 text-blue-700',
+    wont: 'bg-gray-100 text-gray-500'
+  };
+  const priorityLabels = {
+    must: 'Must Have',
+    should: 'Should Have',
+    could: 'Could Have',
+    wont: "Won't Have"
+  };
+  const effortIcons = {
+    low: '\u26A1',
+    medium: '\u23F1\uFE0F',
+    high: '\u{1F3CB}\uFE0F'
+  };
+  const impactIcons = {
+    low: '\u{1F4C9}',
+    medium: '\u{1F4CA}',
+    high: '\u{1F4C8}'
+  };
+
+  return \`
+    <div class="card p-4 \${feature.addedToKanban ? 'opacity-60' : ''}" onclick="state.roadmapSelectedFeature = '\${feature.id}'; render();">
+      <div class="flex items-start justify-between mb-2">
+        <h4 class="font-medium text-canvas-800 text-sm">\${escapeHtml(feature.title)}</h4>
+        <span class="text-xs px-2 py-0.5 rounded-full \${priorityColors[feature.priority] || 'bg-gray-100'}">\${priorityLabels[feature.priority] || feature.priority}</span>
+      </div>
+      <p class="text-xs text-canvas-500 mb-3 line-clamp-2">\${escapeHtml(feature.description)}</p>
+      <div class="flex items-center justify-between">
+        <div class="flex gap-2 text-xs text-canvas-400">
+          <span title="Effort">\${effortIcons[feature.effort] || '\u23F1\uFE0F'} \${feature.effort}</span>
+          <span title="Impact">\${impactIcons[feature.impact] || '\u{1F4CA}'} \${feature.impact}</span>
+        </div>
+        \${feature.addedToKanban ? \`
+          <span class="text-xs text-green-600">\u2713 Added</span>
+        \` : \`
+          <button onclick="event.stopPropagation(); addFeatureToKanban('\${feature.id}')" class="text-xs text-accent hover:underline">+ Add to Kanban</button>
+        \`}
+      </div>
+    </div>
+  \`;
+}
+
+function renderRoadmapModal() {
+  return \`
+    <div class="modal-backdrop fixed inset-0 flex items-center justify-center z-50" onclick="if(event.target === event.currentTarget) { state.showModal = null; render(); }">
+      <div class="modal-content card rounded-xl w-full max-w-lg mx-4">
+        <div class="px-6 py-4 border-b border-canvas-200 flex justify-between items-center">
+          <h3 class="font-display font-semibold text-canvas-800 text-lg">\u{1F5FA}\uFE0F Generate Roadmap</h3>
+          <button onclick="state.showModal = null; render();" class="text-canvas-400 hover:text-canvas-600 text-xl leading-none">&times;</button>
+        </div>
+        <div class="p-6">
+          <p class="text-sm text-canvas-500 mb-6">
+            Generate a strategic feature roadmap by analyzing your project structure and optionally researching competitors.
+          </p>
+
+          <div class="space-y-5">
+            <label class="flex items-start gap-3 cursor-pointer p-3 rounded-lg border border-canvas-200 hover:border-canvas-300 transition-colors">
+              <input type="checkbox"
+                     \${state.roadmapEnableCompetitors ? 'checked' : ''}
+                     onchange="state.roadmapEnableCompetitors = this.checked; render();"
+                     class="w-4 h-4 mt-0.5 accent-accent">
+              <div>
+                <span class="text-sm font-medium text-canvas-700">Enable competitor research</span>
+                <p class="text-xs text-canvas-400 mt-0.5">Use web search to analyze competitors (takes longer)</p>
+              </div>
+            </label>
+
+            <div>
+              <label class="block text-sm font-medium text-canvas-700 mb-1.5">Additional context (optional)</label>
+              <textarea
+                class="input w-full text-sm"
+                rows="3"
+                placeholder="E.g., Focus on mobile features, target enterprise users..."
+                oninput="state.roadmapCustomPrompt = this.value;"
+              >\${escapeHtml(state.roadmapCustomPrompt)}</textarea>
+            </div>
+          </div>
+        </div>
+        <div class="px-6 py-4 border-t border-canvas-200 flex justify-end gap-3">
+          <button onclick="state.showModal = null; render();" class="btn btn-ghost px-4 py-2">Cancel</button>
+          <button onclick="generateRoadmap(); state.showModal = null; render();" class="btn btn-primary px-4 py-2">
+            \u{1F680} Generate Roadmap
+          </button>
+        </div>
+      </div>
+    </div>
+  \`;
+}
+
 function renderColumn(status, title, tasks) {
   const columnTasks = tasks.filter(t => t.status === status);
   const statusLabels = {
@@ -4049,6 +4336,11 @@ function renderModal() {
     \`;
   }
 
+  // Roadmap generation modal
+  if (state.showModal === 'roadmap') {
+    return renderRoadmapModal();
+  }
+
   return '';
 }
 
@@ -4368,7 +4660,7 @@ function escapeHtml(str) {
 // Main render
 function render() {
   const app = document.getElementById('app');
-  const hasSidePanel = state.sidePanel !== null;
+  const hasSidePanel = state.sidePanel !== null && state.currentView === 'board';
 
   app.innerHTML = \`
     <div class="min-h-screen flex flex-col bg-canvas-50">
@@ -4377,51 +4669,76 @@ function render() {
         <div class="px-6 py-3 flex items-center justify-between">
           <div class="flex items-center gap-6">
             <h1 class="text-lg font-semibold text-canvas-900">Claude Kanban</h1>
-            <div class="flex items-center gap-2">
-              <input type="text"
-                     placeholder="Search tasks..."
-                     value="\${escapeHtml(state.searchQuery)}"
-                     oninput="state.searchQuery = this.value; render();"
-                     class="input text-sm py-1.5 w-48">
-            </div>
+            <!-- Navigation Tabs -->
+            <nav class="flex items-center gap-1 bg-canvas-100 rounded-lg p-1">
+              <button onclick="state.currentView = 'board'; render();"
+                      class="px-3 py-1.5 text-sm rounded-md transition-colors \${state.currentView === 'board' ? 'bg-white shadow-sm text-canvas-900 font-medium' : 'text-canvas-500 hover:text-canvas-700'}">
+                \u{1F4CB} Board
+              </button>
+              <button onclick="state.currentView = 'roadmap'; render();"
+                      class="px-3 py-1.5 text-sm rounded-md transition-colors \${state.currentView === 'roadmap' ? 'bg-white shadow-sm text-canvas-900 font-medium' : 'text-canvas-500 hover:text-canvas-700'}">
+                \u{1F5FA}\uFE0F Roadmap
+              </button>
+            </nav>
+            \${state.currentView === 'board' ? \`
+              <div class="flex items-center gap-2">
+                <input type="text"
+                       placeholder="Search tasks..."
+                       value="\${escapeHtml(state.searchQuery)}"
+                       oninput="state.searchQuery = this.value; render();"
+                       class="input text-sm py-1.5 w-48">
+              </div>
+            \` : ''}
           </div>
           <div class="flex items-center gap-2">
-            <button onclick="openPlanningModal();"
-                    class="btn px-4 py-2 text-sm bg-blue-500 hover:bg-blue-600 text-white \${state.planning ? 'opacity-50 cursor-not-allowed' : ''}"
-                    \${state.planning ? 'disabled' : ''}
-                    title="AI Task Planner">
-              \u{1F3AF} \${state.planning ? 'Planning...' : 'Plan'}
-            </button>
-            <button onclick="state.showModal = 'new'; render();"
-                    class="btn btn-primary px-4 py-2 text-sm">
-              + Add Task
-            </button>
-            <button onclick="state.showModal = 'afk'; render();"
-                    class="btn btn-ghost px-3 py-2 text-sm \${state.afk.running ? 'text-status-success' : ''}"
-                    title="AFK Mode">
-              \u{1F504} \${state.afk.running ? 'AFK On' : 'AFK'}
-            </button>
+            \${state.currentView === 'board' ? \`
+              <button onclick="openPlanningModal();"
+                      class="btn px-4 py-2 text-sm bg-blue-500 hover:bg-blue-600 text-white \${state.planning ? 'opacity-50 cursor-not-allowed' : ''}"
+                      \${state.planning ? 'disabled' : ''}
+                      title="AI Task Planner">
+                \u{1F3AF} \${state.planning ? 'Planning...' : 'Plan'}
+              </button>
+              <button onclick="state.showModal = 'new'; render();"
+                      class="btn btn-primary px-4 py-2 text-sm">
+                + Add Task
+              </button>
+              <button onclick="state.showModal = 'afk'; render();"
+                      class="btn btn-ghost px-3 py-2 text-sm \${state.afk.running ? 'text-status-success' : ''}"
+                      title="AFK Mode">
+                \u{1F504} \${state.afk.running ? 'AFK On' : 'AFK'}
+              </button>
+            \` : \`
+              <button onclick="state.showModal = 'roadmap'; render();"
+                      class="btn btn-primary px-4 py-2 text-sm \${state.roadmapGenerating ? 'opacity-50 cursor-not-allowed' : ''}"
+                      \${state.roadmapGenerating ? 'disabled' : ''}>
+                \${state.roadmapGenerating ? '\u23F3 Generating...' : '\u{1F680} Generate Roadmap'}
+              </button>
+            \`}
           </div>
         </div>
       </header>
 
-      \${renderAFKBar()}
+      \${state.currentView === 'board' ? renderAFKBar() : ''}
 
-      <!-- Main Content Area - Flex container for board + sidebar -->
+      <!-- Main Content Area -->
       <div class="flex flex-1 overflow-hidden">
-        <!-- Kanban Board -->
-        <main class="main-content overflow-x-auto p-6">
-          <div class="flex gap-4">
-            \${renderColumn('draft', 'To Do', filterTasks(state.tasks))}
-            \${renderColumn('ready', 'Ready', filterTasks(state.tasks))}
-            \${renderColumn('in_progress', 'In Progress', filterTasks(state.tasks))}
-            \${renderColumn('completed', 'Done', filterTasks(state.tasks))}
-            \${renderColumn('failed', 'Failed', filterTasks(state.tasks))}
-          </div>
-        </main>
-
-        <!-- Side Panel (pushes content when open) -->
-        \${hasSidePanel ? renderSidePanel() : ''}
+        \${state.currentView === 'board' ? \`
+          <!-- Kanban Board -->
+          <main class="main-content overflow-x-auto p-6">
+            <div class="flex gap-4">
+              \${renderColumn('draft', 'To Do', filterTasks(state.tasks))}
+              \${renderColumn('ready', 'Ready', filterTasks(state.tasks))}
+              \${renderColumn('in_progress', 'In Progress', filterTasks(state.tasks))}
+              \${renderColumn('completed', 'Done', filterTasks(state.tasks))}
+              \${renderColumn('failed', 'Failed', filterTasks(state.tasks))}
+            </div>
+          </main>
+          <!-- Side Panel (pushes content when open) -->
+          \${hasSidePanel ? renderSidePanel() : ''}
+        \` : \`
+          <!-- Roadmap View -->
+          \${renderRoadmap()}
+        \`}
       </div>
 
       \${renderModal()}
@@ -4483,6 +4800,11 @@ window.closeSidePanel = closeSidePanel;
 window.showTaskMenu = showTaskMenu;
 window.filterTasks = filterTasks;
 window.scrollSidePanelLog = scrollSidePanelLog;
+window.generateRoadmap = generateRoadmap;
+window.cancelRoadmap = cancelRoadmap;
+window.addFeatureToKanban = addFeatureToKanban;
+window.deleteRoadmapFeature = deleteRoadmapFeature;
+window.loadRoadmap = loadRoadmap;
 
 // Keyboard shortcuts
 document.addEventListener('keydown', (e) => {