@yemi33/squad 0.1.13 → 0.1.15

package/dashboard.html

@@ -47,6 +47,48 @@
   .status-badge.working { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid var(--yellow); animation: pulse 1.5s infinite; }
   .status-badge.done { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid var(--green); }
   .agent-action { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+  .modal-qa { border-top: 1px solid var(--border); padding: 10px 20px; }
+  .modal-qa-thread { max-height: 200px; overflow-y: auto; margin-bottom: 8px; }
+  .modal-qa-q { font-size: 12px; color: var(--blue); margin-bottom: 4px; font-weight: 600; }
+  .modal-qa-q .selection-ref { font-weight: 400; color: var(--muted); font-style: italic; display: block; font-size: 10px; margin-top: 2px; }
+  .modal-qa-a { font-size: 12px; color: var(--text); margin-bottom: 12px; padding: 8px 10px; background: var(--surface2); border-radius: 6px; border-left: 2px solid var(--blue); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
+  .modal-qa-loading { font-size: 11px; color: var(--muted); padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
+  .modal-qa-loading .dot-pulse { display: inline-flex; gap: 3px; }
+  .modal-qa-loading .dot-pulse span { width: 5px; height: 5px; background: var(--blue); border-radius: 50%; animation: dotPulse 1.2s infinite; }
+  .modal-qa-loading .dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
+  .modal-qa-loading .dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
+  @keyframes dotPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
+  .modal-qa-selection-pill { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin-bottom: 6px; background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.25); border-radius: 4px; font-size: 11px; }
+  .modal-qa-selection-pill .pill-label { color: var(--blue); font-weight: 600; white-space: nowrap; }
+  .modal-qa-selection-pill .pill-text { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
+  .modal-qa-selection-pill .pill-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
+  .modal-qa-selection-pill .pill-clear:hover { color: var(--red); }
+  .modal-qa-input-wrap { display: flex; gap: 6px; }
+  .modal-qa-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 12px; color: var(--text); font-family: inherit; }
+  .modal-qa-input:focus { border-color: var(--blue); outline: none; }
+  .modal-qa-btn { background: var(--blue); color: #fff; border: none; border-radius: 4px; padding: 6px 14px; font-size: 12px; cursor: pointer; }
+  .modal-qa-btn:hover { opacity: 0.9; }
+  .modal-qa-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+  .ask-selection-btn { display: none; position: fixed; z-index: 500; background: var(--blue); color: #fff; font-size: 11px; padding: 5px 12px; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
+  .ask-selection-btn:hover { opacity: 0.9; }
+  .plan-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 8px; }
+  .plan-card.awaiting { border-left: 3px solid var(--yellow, #d29922); }
+  .plan-card.approved { border-left: 3px solid var(--green); }
+  .plan-card.rejected { border-left: 3px solid var(--red); opacity: 0.6; }
+  .plan-card.revision-requested { border-left: 3px solid var(--purple, #a855f7); }
+  .plan-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
+  .plan-card-title { font-size: 13px; font-weight: 600; color: var(--text); }
+  .plan-card-meta { font-size: 10px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
+  .plan-card-actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
+  .plan-btn { font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: all 0.15s; }
+  .plan-btn:hover { border-color: var(--text); }
+  .plan-btn.approve { color: var(--green); border-color: var(--green); }
+  .plan-btn.approve:hover { background: rgba(63,185,80,0.1); }
+  .plan-btn.revise { color: var(--yellow, #d29922); border-color: var(--yellow, #d29922); }
+  .plan-btn.revise:hover { background: rgba(210,153,34,0.1); }
+  .plan-btn.reject { color: var(--red); border-color: var(--red); }
+  .plan-btn.reject:hover { background: rgba(248,81,73,0.1); }
+  .plan-feedback-input { width: 100%; margin-top: 6px; padding: 6px 8px; font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: inherit; resize: vertical; min-height: 50px; }
   .token-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
   .token-tile { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
   .token-tile-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
@@ -202,7 +244,19 @@
     transition: border-color 0.2s, box-shadow 0.2s; padding: 0;
   }
   .cmd-input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88,166,255,0.12); }
+  .cmd-highlight-layer {
+    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+    padding: 14px 16px; font-size: 14px; font-family: inherit; line-height: 1.5;
+    white-space: pre-wrap; word-wrap: break-word; overflow: hidden;
+    pointer-events: none; color: transparent; border-radius: 10px;
+  }
+  .cmd-highlight-layer .hl-cmd { color: transparent; background: rgba(88,166,255,0.18); border-radius: 3px; }
+  .cmd-highlight-layer .hl-mention { color: transparent; background: rgba(63,185,80,0.18); border-radius: 3px; }
+  .cmd-highlight-layer .hl-priority { color: transparent; background: rgba(210,153,34,0.18); border-radius: 3px; }
+  .cmd-highlight-layer .hl-project { color: transparent; background: rgba(188,140,255,0.18); border-radius: 3px; }
+  .cmd-highlight-layer .hl-flag { color: transparent; background: rgba(248,81,73,0.18); border-radius: 3px; }
   .cmd-input-wrap textarea {
+    position: relative; z-index: 1;
     flex: 1; background: transparent; border: none; color: var(--text);
     padding: 14px 16px; font-size: 14px; font-family: inherit; resize: none;
     outline: none; line-height: 1.5; min-height: 48px; max-height: 200px;
@@ -321,11 +375,15 @@
   .dispatch-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
   .dispatch-type { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 8px; text-transform: uppercase; white-space: nowrap; }
   .dispatch-type.implement { background: rgba(88,166,255,0.15); color: var(--blue); }
+  .dispatch-type.implement\:large { background: rgba(88,166,255,0.25); color: var(--blue); }
   .dispatch-type.review { background: rgba(188,140,255,0.15); color: var(--purple); }
   .dispatch-type.fix { background: rgba(210,153,34,0.15); color: var(--yellow); }
   .dispatch-type.analyze { background: rgba(63,185,80,0.15); color: var(--green); }
   .dispatch-type.explore { background: rgba(139,148,158,0.15); color: var(--muted); }
   .dispatch-type.test { background: rgba(227,179,65,0.15); color: var(--orange); }
+  .dispatch-type.plan { background: rgba(168,85,247,0.15); color: #a855f7; }
+  .dispatch-type.plan-to-prd { background: rgba(168,85,247,0.1); color: #a855f7; }
+  .dispatch-type.ask { background: rgba(63,185,80,0.15); color: var(--green); }
   .dispatch-type.manual { background: rgba(139,148,158,0.15); color: var(--muted); }
   .dispatch-agent { font-weight: 600; color: var(--text); }
   .dispatch-task { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -441,8 +499,9 @@
   <section class="cmd-center">
     <h2>Command Center</h2>
     <div class="cmd-input-wrap" id="cmd-input-wrap">
+      <div class="cmd-highlight-layer" id="cmd-highlight" aria-hidden="true"></div>
       <textarea id="cmd-input" rows="1" placeholder='What do you need? e.g. "Fix the auth bug @dallas", "explain the dispatch flow", or "/note always use feature flags"'
-        oninput="cmdInputChanged()" onkeydown="cmdKeyDown(event)"></textarea>
+        oninput="cmdInputChanged()" onkeydown="cmdKeyDown(event)" onscroll="syncHighlightScroll()"></textarea>
       <button class="cmd-send-btn" id="cmd-send-btn" onclick="cmdSubmit()">Send <kbd>Ctrl+Enter</kbd></button>
     </div>
     <div class="cmd-mention-popup" id="cmd-mention-popup"></div>
@@ -450,10 +509,12 @@
     <div class="cmd-hints">
       <span><code>@agent</code> assign</span>
       <span><code>@everyone</code> fan-out</span>
+      <span><code>#project</code> target</span>
       <span><code>!high</code> / <code>!low</code> priority</span>
-      <span><code>/note</code> team note</span>
+      <span><code>/plan</code> feature plan</span>
       <span><code>/prd</code> PRD item</span>
-      <span><code>#project</code> target project</span>
+      <span><code>/note</code> team note</span>
+      <span>or just type a task</span>
       <button class="cmd-history-btn" onclick="cmdShowHistory()">Past Commands</button>
     </div>
     <div class="cmd-toast" id="cmd-toast"></div>
@@ -482,7 +543,12 @@
   </section>
 
   <section>
-    <h2>Notes Inbox <span class="count" id="inbox-count">0</span></h2>
+    <h2>Plans <span class="count" id="plans-count">0</span></h2>
+    <div id="plans-list"><p class="empty">No plans yet. Use /plan in the command center to create one.</p></div>
+  </section>
+
+  <section>
+    <h2>Notes Inbox <span class="count" id="inbox-count">0</span> <span style="font-size:10px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">auto-consolidates at 3 notes</span></h2>
     <div class="inbox-list" id="inbox-list">Loading...</div>
   </section>
 
@@ -502,6 +568,11 @@
     <div id="skills-list"><p class="empty">No skills yet. Agents create these when they discover repeatable workflows.</p></div>
   </section>
 
+  <section>
+    <h2>MCP Servers <span class="count" id="mcp-count">0</span></h2>
+    <div id="mcp-list"><p class="empty">No MCP servers synced.</p></div>
+  </section>
+
   <section>
     <h2>Dispatch Queue</h2>
     <div class="dispatch-stats" id="dispatch-stats"></div>
@@ -555,9 +626,24 @@
       </div>
     </div>
     <div class="modal-body" id="modal-body"></div>
+    <div class="modal-qa" id="modal-qa">
+      <div class="modal-qa-thread" id="modal-qa-thread"></div>
+      <div class="modal-qa-selection-pill" id="modal-qa-pill" style="display:none">
+        <span class="pill-label">Selection:</span>
+        <span class="pill-text" id="modal-qa-pill-text"></span>
+        <button class="pill-clear" onclick="clearQaSelection()" title="Clear selection">&times;</button>
+      </div>
+      <div class="modal-qa-input-wrap">
+        <input type="text" class="modal-qa-input" id="modal-qa-input" placeholder="Ask about this document (or select text first)..." onkeydown="if(event.key==='Enter')modalAskSubmit()">
+        <button class="modal-qa-btn" id="modal-qa-btn" onclick="modalAskSubmit()">Ask</button>
+      </div>
+    </div>
   </div>
 </div>
 
+<!-- Floating "Ask about selection" button -->
+<div class="ask-selection-btn" id="ask-selection-btn" onclick="modalAskAboutSelection()">Ask about this</div>
+
 <script>
 let inboxData = [];
 let agentData = [];
@@ -668,7 +754,26 @@ function renderDetailContent(detail, tab) {
   } else if (tab === 'charter') {
     el.innerHTML = '<div class="section">' + escHtml(detail.charter || 'No charter found.') + '</div>';
   } else if (tab === 'history') {
-    el.innerHTML = '<div class="section">' + escHtml(detail.history || 'No history yet.') + '</div>';
+    let html = '';
+    // Recent dispatch results
+    if (detail.recentDispatches && detail.recentDispatches.length > 0) {
+      html += '<h4>Recent Dispatches</h4><table class="pr-table" style="margin-bottom:16px"><thead><tr><th>Task</th><th>Type</th><th>Result</th><th>Completed</th></tr></thead><tbody>';
+      detail.recentDispatches.forEach(d => {
+        const isError = d.result === 'error';
+        const color = isError ? 'var(--red)' : 'var(--green)';
+        const reason = d.reason ? ' title="' + escHtml(d.reason) + '"' : '';
+        html += '<tr>' +
+          '<td style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(d.task) + '">' + escHtml(d.task.slice(0, 80)) + '</td>' +
+          '<td><span class="dispatch-type ' + d.type + '">' + escHtml(d.type) + '</span></td>' +
+          '<td style="color:' + color + '"' + reason + '>' + escHtml(d.result) + (isError && d.reason ? ' <span style="font-size:10px;color:var(--muted)">(' + escHtml(d.reason.slice(0, 50)) + ')</span>' : '') + '</td>' +
+          '<td style="font-size:10px;color:var(--muted)">' + (d.completed_at ? new Date(d.completed_at).toLocaleString() : '') + '</td>' +
+        '</tr>';
+      });
+      html += '</tbody></table>';
+    }
+    // Raw history.md
+    html += '<h4>Task History</h4><div class="section">' + escHtml(detail.history || 'No history yet.') + '</div>';
+    el.innerHTML = html;
   } else if (tab === 'output') {
     el.innerHTML = '<div class="section">' + escHtml(detail.outputLog || 'No output log. The coordinator will save agent output here when tasks complete.') + '</div>';
   }
@@ -777,23 +882,45 @@ function renderInbox(inbox) {
         <span>${escHtml(item.name)}</span><span>${item.age}</span>
       </div>
       <div class="inbox-preview" onclick="openModal(${i})" style="cursor:pointer">${escHtml(item.content.slice(0,200))}</div>
-      <div style="display:flex;gap:6px;margin-top:6px">
-        <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" onclick="event.stopPropagation();persistInboxItem('${escHtml(item.name)}')">Persist as Note</button>
+      <div style="display:flex;gap:6px;margin-top:6px;align-items:center">
+        <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" onclick="event.stopPropagation();promoteToKB('${escHtml(item.name)}')">Add to Knowledge Base</button>
         <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" onclick="event.stopPropagation();openInboxInExplorer('${escHtml(item.name)}')">Open in Explorer</button>
       </div>
     </div>
   `).join('');
 }
 
-async function persistInboxItem(name) {
+function promoteToKB(name) {
+  const categories = [
+    { id: 'architecture', label: 'Architecture' },
+    { id: 'conventions', label: 'Conventions' },
+    { id: 'project-notes', label: 'Project Notes' },
+    { id: 'build-reports', label: 'Build Reports' },
+    { id: 'reviews', label: 'Reviews' },
+  ];
+  const picker = '<div style="padding:16px 20px">' +
+    '<p style="font-size:13px;color:var(--text);margin-bottom:12px">Choose a category for <strong>' + escHtml(name) + '</strong>:</p>' +
+    '<div style="display:flex;flex-direction:column;gap:8px">' +
+    categories.map(c =>
+      '<button class="pr-pager-btn" style="font-size:12px;padding:8px 16px;text-align:left" onclick="doPromoteToKB(\'' + escHtml(name) + '\',\'' + c.id + '\')">' + c.label + '</button>'
+    ).join('') +
+    '</div></div>';
+  document.getElementById('modal-title').textContent = 'Add to Knowledge Base';
+  document.getElementById('modal-body').innerHTML = picker;
+  document.getElementById('modal').classList.add('open');
+}
+
+async function doPromoteToKB(name, category) {
   try {
-    const res = await fetch('/api/inbox/persist', {
+    const res = await fetch('/api/inbox/promote-kb', {
       method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name })
+      body: JSON.stringify({ name, category })
     });
     const data = await res.json();
     if (res.ok) {
+      closeModal();
       refresh();
+      refreshKnowledgeBase();
     } else {
       alert('Failed: ' + (data.error || 'unknown'));
     }
@@ -929,10 +1056,21 @@ function openModal(i) {
   const item = inboxData[i];
   if (!item) return;
   document.getElementById('modal-title').textContent = item.name;
-  document.getElementById('modal-body').textContent = item.content;
+  document.getElementById('modal-body').innerHTML =
+    '<div style="margin-bottom:12px"><button class="pr-pager-btn" style="font-size:10px;padding:3px 10px" onclick="promoteToKB(\'' + escHtml(item.name) + '\')">Add to Knowledge Base</button></div>' +
+    '<pre style="white-space:pre-wrap;word-wrap:break-word;margin:0;font-family:Consolas,monospace;font-size:12px;line-height:1.7;color:var(--muted)">' + escHtml(item.content) + '</pre>';
   document.getElementById('modal').classList.add('open');
 }
-function closeModal() { document.getElementById('modal').classList.remove('open'); }
+function closeModal() {
+  document.getElementById('modal').classList.remove('open');
+  // Clear Q&A state
+  _modalDocContext = { title: '', content: '', selection: '' };
+  document.getElementById('modal-qa-thread').innerHTML = '';
+  document.getElementById('modal-qa-input').value = '';
+  document.getElementById('modal-qa-input').placeholder = 'Ask about this document (or select text first)...';
+  document.getElementById('modal-qa-pill').style.display = 'none';
+  document.getElementById('ask-selection-btn').style.display = 'none';
+}
 
 document.addEventListener('keydown', e => {
   if (e.key === 'Escape') { closeDetail(); closeModal(); }
@@ -1173,9 +1311,10 @@ async function refresh() {
     renderMetrics(data.metrics || {});
     renderWorkItems(data.workItems || []);
     renderSkills(data.skills || []);
-    // Refresh KB less frequently (every 3rd cycle = ~12s)
+    renderMcpServers(data.mcpServers || []);
+    // Refresh KB and plans less frequently (every 3rd cycle = ~12s)
     if (!window._kbRefreshCount) window._kbRefreshCount = 0;
-    if (window._kbRefreshCount++ % 3 === 0) refreshKnowledgeBase();
+    if (window._kbRefreshCount++ % 3 === 0) { refreshKnowledgeBase(); refreshPlans(); }
   } catch(e) { console.error('refresh error', e); }
 }
 
@@ -1201,6 +1340,25 @@ function renderProjects(projects) {
 
 }
 
+// -- MCP Servers --
+function renderMcpServers(servers) {
+  const el = document.getElementById('mcp-list');
+  const countEl = document.getElementById('mcp-count');
+  countEl.textContent = servers.length;
+  if (!servers.length) {
+    el.innerHTML = '<p class="empty">No MCP servers found. Add them to <code>~/.claude.json</code> and they\'ll appear here automatically.</p>';
+    return;
+  }
+  el.innerHTML = '<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px">' +
+    servers.map(s =>
+      '<div style="font-size:11px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text)" title="' + escHtml(s.args || s.command) + '">' +
+        escHtml(s.name) +
+      '</div>'
+    ).join('') +
+  '</div>' +
+  '<p style="font-size:10px;color:var(--muted);margin:0">Synced from <code style="color:var(--blue)">~/.claude.json</code> — add MCP servers there to make them available to all agents.</p>';
+}
+
 // -- Squad Skills --
 function renderSkills(skills) {
   const el = document.getElementById('skills-list');
@@ -1526,7 +1684,7 @@ function detectWorkItemType(text) {
   const t = text.toLowerCase();
   const patterns = [
     { type: 'ask',      words: ['explain', 'why does', 'why is', 'what does', 'how do i', 'how do you', 'what\'s the', 'tell me', 'can you explain', 'walk me through'] },
-    { type: 'explore',  words: ['explore', 'investigate', 'understand', 'analyze', 'audit', 'document', 'architecture', 'how does', 'what is', 'look into', 'research', 'survey', 'map out', 'codebase'] },
+    { type: 'explore',  words: ['explore', 'investigate', 'understand', 'analyze', 'audit', 'document', 'architecture', 'how does', 'what is', 'look into', 'research', 'survey', 'map out', 'codebase', 'make a note of', 'find out'] },
     { type: 'fix',      words: ['fix', 'bug', 'broken', 'crash', 'error', 'issue', 'patch', 'repair', 'resolve', 'regression', 'failing', 'doesn\'t work', 'not working'] },
     { type: 'review',   words: ['review', 'code review', 'check pr', 'look at pr', 'audit code', 'inspect'] },
     { type: 'test',     words: ['test', 'write tests', 'add tests', 'unit test', 'e2e test', 'coverage', 'testing', 'build', 'run locally', 'localhost', 'start the', 'spin up', 'verify', 'check if it works'] },
@@ -1557,18 +1715,18 @@ function cmdParseInput(raw) {
   if (/^\/decide\b/i.test(text) || /^\/note\b/i.test(text) || rememberPattern.test(text)) {
     result.intent = 'note';
     text = text.replace(/^\/decide\s*/i, '').replace(/^\/note\s*/i, '').replace(rememberPattern, '').trim();
-  } else if (/^\/plan\b/i.test(text)) {
+  } else if (/^\/plan\b/i.test(text) || /^(make a plan|plan out|plan for|plan how|create a plan|design a plan|come up with a plan|draft a plan|write a plan)\b/i.test(text)) {
     result.intent = 'plan';
-    text = text.replace(/^\/plan\s*/i, '');
+    text = text.replace(/^\/plan\s*/i, '').replace(/^(make a plan for|plan out how|plan for how|plan how|create a plan for|design a plan for|come up with a plan for|draft a plan for|write a plan for|make a plan|plan out|create a plan|design a plan|come up with a plan|draft a plan|write a plan)\s*/i, '').trim();
     // Extract branch strategy flag
     if (/--parallel\b/i.test(text)) {
       result.branchStrategy = 'parallel';
       text = text.replace(/--parallel\b/i, '').trim();
-    } else if (/--shared\b/i.test(text)) {
+    } else if (/--stack\b/i.test(text)) {
       result.branchStrategy = 'shared-branch';
-      text = text.replace(/--shared\b/i, '').trim();
+      text = text.replace(/--stack\b/i, '').trim();
     } else {
-      result.branchStrategy = 'shared-branch'; // default
+      result.branchStrategy = 'parallel'; // default — items without depends_on get independent branches
     }
   } else if (/^\/prd\b/i.test(text)) {
     result.intent = 'prd';
@@ -1631,19 +1789,19 @@ function cmdRenderMeta() {
   let chips = [];
 
   // Intent chip
-  const intentLabels = { 'work-item': 'Work Item', 'note': 'Note', 'prd': 'PRD Item', 'plan': 'Plan → PRD → Dispatch' };
-  chips.push('<span class="cmd-chip intent">' + intentLabels[parsed.intent] + '</span>');
+  if (parsed.intent === 'plan') {
+    const strategy = parsed.branchStrategy || 'parallel';
+    const stratLabel = strategy === 'parallel' ? 'parallel branches' : 'stacked';
+    chips.push('<span class="cmd-chip" style="background:var(--purple,#a855f7);color:#fff">Plan → PRD → Dispatch (' + stratLabel + ')</span>');
+  } else {
+    const intentLabels = { 'work-item': 'Work Item', 'note': 'Note', 'prd': 'PRD Item' };
+    chips.push('<span class="cmd-chip intent">' + intentLabels[parsed.intent] + '</span>');
+  }
 
   // Type chip (only for work items)
   if (parsed.intent === 'work-item') {
     chips.push('<span class="cmd-chip">' + parsed.type + '</span>');
   }
-  // Pipeline chip for /plan
-  if (parsed.intent === 'plan') {
-    const strategy = parsed.branchStrategy || 'shared-branch';
-    const stratLabel = strategy === 'parallel' ? 'parallel branches' : 'shared branch';
-    chips.push('<span class="cmd-chip" style="background:var(--purple,#a855f7);color:#fff">plan → prd → agents (' + stratLabel + ')</span>');
-  }
 
   // Priority chip
   chips.push('<span class="cmd-chip priority-' + parsed.priority + '">' + parsed.priority + ' priority</span>');
@@ -1751,8 +1909,30 @@ function cmdAutoResize() {
   ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
 }
 
+function cmdUpdateHighlight() {
+  const text = document.getElementById('cmd-input').value;
+  const hl = document.getElementById('cmd-highlight');
+  if (!text) { hl.innerHTML = ''; return; }
+  // Escape HTML then wrap tokens with highlight spans
+  let html = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  html = html.replace(/(\/(?:plan|prd|note|decide)\b)/gi, '<span class="hl-cmd">$1</span>');
+  html = html.replace(/(@\w+)/g, '<span class="hl-mention">$1</span>');
+  html = html.replace(/(![a-z]+\b)/gi, '<span class="hl-priority">$1</span>');
+  html = html.replace(/(#\S+)/g, '<span class="hl-project">$1</span>');
+  html = html.replace(/(--(?:stack|parallel)\b)/gi, '<span class="hl-flag">$1</span>');
+  hl.innerHTML = html + '\n'; // trailing newline prevents layout shift
+}
+
+function syncHighlightScroll() {
+  const ta = document.getElementById('cmd-input');
+  const hl = document.getElementById('cmd-highlight');
+  hl.scrollTop = ta.scrollTop;
+  hl.scrollLeft = ta.scrollLeft;
+}
+
 function cmdInputChanged() {
   cmdAutoResize();
+  cmdUpdateHighlight();
   cmdRenderMeta();
 
   // Check for @ mention or # project trigger
@@ -1933,7 +2113,7 @@ async function cmdSubmitPlan(parsed) {
     title: parsed.title,
     description: parsed.description || '',
     priority: parsed.priority,
-    branch_strategy: parsed.branchStrategy || 'shared-branch',
+    branch_strategy: parsed.branchStrategy || 'parallel',
   };
   if (parsed.project) body.project = parsed.project;
   if (parsed.agents.length === 1) body.agent = parsed.agents[0];
@@ -1968,6 +2148,313 @@ async function cmdSubmitPrd(parsed) {
   const projLabel = (parsed.projects || []).length > 0 ? ' (' + parsed.projects.join(', ') + ')' : '';
   showToast('cmd-toast', 'PRD item ' + (data.id || id) + ' added' + projLabel, true);
 }
+// ─── Modal Q&A (Ask about document) ──────────────────────────────────────────
+
+let _modalDocContext = { title: '', content: '', selection: '' };
+
+// Track text selection anywhere in content areas for the floating "Ask about this" button
+document.addEventListener('mouseup', function(e) {
+  // Small delay to let the selection finalize
+  setTimeout(() => {
+    const btn = document.getElementById('ask-selection-btn');
+    if (!btn) return;
+    const sel = window.getSelection();
+    const text = sel?.toString()?.trim();
+
+    if (!text || text.length < 3) {
+      btn.style.display = 'none';
+      return;
+    }
+
+    // Check if selection is in any content area: modal body, detail panel, notes, kb
+    const anchor = sel?.anchorNode;
+    if (!anchor) { btn.style.display = 'none'; return; }
+
+    const modalBody = document.getElementById('modal-body');
+    const detailContent = document.getElementById('detail-content');
+    const isInModal = modalBody?.contains(anchor);
+    const isInDetail = detailContent?.contains(anchor);
+
+    if (isInModal || isInDetail) {
+      _modalDocContext.selection = text;
+      // If we don't have document context yet (e.g. detail panel), capture it
+      if (!_modalDocContext.content && isInDetail) {
+        _modalDocContext.content = detailContent.textContent || '';
+        _modalDocContext.title = document.getElementById('detail-agent-name')?.textContent || 'Agent Detail';
+      }
+      btn.style.display = 'block';
+      // Position near the cursor but within viewport
+      const x = Math.min(e.clientX, window.innerWidth - 140);
+      const y = Math.max(e.clientY - 35, 10);
+      btn.style.left = x + 'px';
+      btn.style.top = y + 'px';
+      btn.style.position = 'fixed';
+    } else {
+      btn.style.display = 'none';
+    }
+  }, 10);
+});
+
+function modalAskAboutSelection() {
+  document.getElementById('ask-selection-btn').style.display = 'none';
+
+  // If the modal isn't open but we have a selection (from detail panel), open modal for Q&A
+  const modal = document.getElementById('modal');
+  if (!modal.classList.contains('open')) {
+    document.getElementById('modal-title').textContent = 'Q&A: ' + (_modalDocContext.title || 'Document');
+    document.getElementById('modal-body').textContent = _modalDocContext.content.slice(0, 3000) + (_modalDocContext.content.length > 3000 ? '\n\n...(truncated for display)' : '');
+    modal.classList.add('open');
+  }
+
+  // Show the selection pill
+  const pill = document.getElementById('modal-qa-pill');
+  const pillText = document.getElementById('modal-qa-pill-text');
+  const sel = _modalDocContext.selection || '';
+  if (sel) {
+    pillText.textContent = sel.slice(0, 80) + (sel.length > 80 ? '...' : '');
+    pill.style.display = 'flex';
+  }
+
+  const input = document.getElementById('modal-qa-input');
+  input.value = '';
+  input.placeholder = 'What do you want to know about this?';
+  input.focus();
+}
+
+function clearQaSelection() {
+  _modalDocContext.selection = '';
+  document.getElementById('modal-qa-pill').style.display = 'none';
+  document.getElementById('modal-qa-input').placeholder = 'Ask about this document (or select text first)...';
+}
+
+async function modalAskSubmit() {
+  const input = document.getElementById('modal-qa-input');
+  const question = input.value.trim();
+  if (!question) return;
+
+  // Capture content from modal body if not already set
+  if (!_modalDocContext.content) {
+    const body = document.getElementById('modal-body');
+    if (body) {
+      _modalDocContext.content = body.textContent || body.innerText || '';
+      _modalDocContext.title = document.getElementById('modal-title')?.textContent || '';
+    }
+  }
+  if (!_modalDocContext.content) {
+    showToast('cmd-toast', 'No document content to ask about', false);
+    return;
+  }
+
+  const thread = document.getElementById('modal-qa-thread');
+  const btn = document.getElementById('modal-qa-btn');
+
+  // Show question
+  let qHtml = '<div class="modal-qa-q">' + escHtml(question);
+  if (_modalDocContext.selection) {
+    qHtml += '<span class="selection-ref">Re: "' + escHtml(_modalDocContext.selection.slice(0, 100)) + ((_modalDocContext.selection.length > 100) ? '...' : '') + '"</span>';
+  }
+  qHtml += '</div>';
+  thread.innerHTML += qHtml;
+
+  // Show loading
+  const loadingId = 'qa-loading-' + Date.now();
+  thread.innerHTML += '<div class="modal-qa-loading" id="' + loadingId + '"><div class="dot-pulse"><span></span><span></span><span></span></div> Thinking...</div>';
+  thread.scrollTop = thread.scrollHeight;
+
+  input.value = '';
+  input.placeholder = 'Ask another question...';
+  btn.disabled = true;
+
+  try {
+    const res = await fetch('/api/ask-about', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        question,
+        document: _modalDocContext.content,
+        title: _modalDocContext.title,
+        selection: _modalDocContext.selection || '',
+      }),
+    });
+    const data = await res.json();
+    const loadingEl = document.getElementById(loadingId);
+    if (loadingEl) loadingEl.remove();
+
+    if (data.ok && data.answer) {
+      thread.innerHTML += '<div class="modal-qa-a">' + escHtml(data.answer) + '</div>';
+    } else {
+      thread.innerHTML += '<div class="modal-qa-a" style="color:var(--red)">Error: ' + escHtml(data.error || 'No answer') + '</div>';
+    }
+  } catch (e) {
+    const loadingEl = document.getElementById(loadingId);
+    if (loadingEl) loadingEl.remove();
+    thread.innerHTML += '<div class="modal-qa-a" style="color:var(--red)">Error: ' + escHtml(e.message) + '</div>';
+  }
+
+  _modalDocContext.selection = ''; // Clear selection after asking
+  document.getElementById('modal-qa-pill').style.display = 'none';
+  document.getElementById('modal-qa-input').placeholder = 'Ask another question...';
+  btn.disabled = false;
+  thread.scrollTop = thread.scrollHeight;
+  input.focus();
+}
+
+// Override closeModal to clear Q&A state
+const _origCloseModal = typeof closeModal === 'function' ? closeModal : null;
+
+// ─── Plans (Approval Gate) ────────────────────────────────────────────────────
+
+async function refreshPlans() {
+  try {
+    const plans = await fetch('/api/plans').then(r => r.json());
+    renderPlans(plans);
+  } catch {}
+}
+
+function renderPlans(plans) {
+  const el = document.getElementById('plans-list');
+  const countEl = document.getElementById('plans-count');
+  countEl.textContent = plans.length;
+
+  if (plans.length === 0) {
+    el.innerHTML = '<p class="empty">No plans yet. Use /plan in the command center to create one.</p>';
+    return;
+  }
+
+  const statusLabels = { 'awaiting-approval': 'Awaiting Approval', 'approved': 'Approved', 'rejected': 'Rejected', 'revision-requested': 'Revision Requested', 'completed': 'Completed', 'active': 'Active' };
+  const statusClass = (s) => s === 'awaiting-approval' ? 'awaiting' : s || '';
+
+  el.innerHTML = plans.map(p => {
+    const status = p.status || 'active';
+    const label = statusLabels[status] || status;
+    const needsAction = status === 'awaiting-approval';
+    const isRevision = status === 'revision-requested';
+
+    let actions = '';
+    if (needsAction) {
+      actions = '<div class="plan-card-actions">' +
+        '<button class="plan-btn approve" onclick="planApprove(\'' + escHtml(p.file) + '\')">Approve</button>' +
+        '<button class="plan-btn" style="color:var(--blue);border-color:var(--blue)" onclick="planDiscuss(\'' + escHtml(p.file) + '\')">Discuss &amp; Revise</button>' +
+        '<button class="plan-btn reject" onclick="planReject(\'' + escHtml(p.file) + '\')">Reject</button>' +
+        '<button class="plan-btn" onclick="planView(\'' + escHtml(p.file) + '\')">View Full Plan</button>' +
+      '</div>' +
+      '<div id="revise-input-' + escHtml(p.file).replace(/\./g, '-') + '" style="display:none">' +
+        '<textarea class="plan-feedback-input" placeholder="What should be changed? Be specific..." id="revise-feedback-' + escHtml(p.file).replace(/\./g, '-') + '"></textarea>' +
+        '<div class="plan-card-actions" style="margin-top:4px">' +
+          '<button class="plan-btn revise" onclick="planSubmitRevise(\'' + escHtml(p.file) + '\')">Submit Revision Request</button>' +
+          '<button class="plan-btn" onclick="planHideRevise(\'' + escHtml(p.file) + '\')">Cancel</button>' +
+        '</div>' +
+      '</div>';
+    } else if (isRevision) {
+      actions = '<div class="plan-card-meta" style="margin-top:6px;color:var(--purple,#a855f7)">Revision in progress: ' + escHtml((p.revisionFeedback || '').slice(0, 100)) + '</div>';
+    } else if (status === 'approved' || status === 'active') {
+      actions = '<div class="plan-card-actions"><button class="plan-btn" onclick="planView(\'' + escHtml(p.file) + '\')">View</button></div>';
+    }
+
+    return '<div class="plan-card ' + statusClass(status) + '">' +
+      '<div class="plan-card-header">' +
+        '<div><div class="plan-card-title">' + escHtml(p.summary || p.file) + '</div>' +
+          '<div class="plan-card-meta">' +
+            '<span style="font-weight:600;color:' + (needsAction ? 'var(--yellow,#d29922)' : status === 'approved' ? 'var(--green)' : 'var(--muted)') + '">' + label + '</span>' +
+            '<span>' + escHtml(p.project) + '</span>' +
+            '<span>' + p.itemCount + ' items</span>' +
+            '<span>' + escHtml(p.branchStrategy) + '</span>' +
+            (p.generatedBy ? '<span>by ' + escHtml(p.generatedBy) + '</span>' : '') +
+            (p.generatedAt ? '<span>' + p.generatedAt + '</span>' : '') +
+          '</div>' +
+        '</div>' +
+      '</div>' +
+      actions +
+    '</div>';
+  }).join('');
+}
+
+async function planApprove(file) {
+  try {
+    await fetch('/api/plans/approve', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file }) });
+    showToast('cmd-toast', 'Plan approved — work will begin on next engine tick', true);
+    refreshPlans();
+  } catch (e) { showToast('cmd-toast', 'Error: ' + e.message, false); }
+}
+
+async function planReject(file) {
+  if (!confirm('Reject this plan? It will not be executed.')) return;
+  const reason = prompt('Reason for rejection (optional):') || '';
+  try {
+    await fetch('/api/plans/reject', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file, reason }) });
+    showToast('cmd-toast', 'Plan rejected', true);
+    refreshPlans();
+  } catch (e) { showToast('cmd-toast', 'Error: ' + e.message, false); }
+}
+
+function planShowRevise(file) {
+  const id = 'revise-input-' + file.replace(/\./g, '-');
+  document.getElementById(id).style.display = 'block';
+}
+
+function planHideRevise(file) {
+  const id = 'revise-input-' + file.replace(/\./g, '-');
+  document.getElementById(id).style.display = 'none';
+}
+
+async function planSubmitRevise(file) {
+  const id = 'revise-feedback-' + file.replace(/\./g, '-');
+  const feedback = document.getElementById(id).value.trim();
+  if (!feedback) { showToast('cmd-toast', 'Please enter feedback', false); return; }
+  try {
+    const res = await fetch('/api/plans/revise', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file, feedback }) });
+    const data = await res.json();
+    showToast('cmd-toast', 'Revision requested — agent will update the plan (' + data.workItemId + ')', true);
+    planHideRevise(file);
+    refreshPlans();
+  } catch (e) { showToast('cmd-toast', 'Error: ' + e.message, false); }
+}
+
+async function planDiscuss(file) {
+  try {
+    const res = await fetch('/api/plans/discuss', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file })
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error);
+
+    // Show the launch command in a modal
+    const content = `To discuss and revise this plan interactively, run this command in a terminal:\n\n` +
+      `━━━ Bash / Git Bash ━━━\n${data.command}\n\n` +
+      `━━━ PowerShell ━━━\n${data.psCommand}\n\n` +
+      `━━━━━━━━━━━━━━━━━━━━━━━\n\n` +
+      `This launches an interactive Claude session with the plan pre-loaded.\n` +
+      `Chat naturally to review and refine. When you're satisfied, say "approve" and the session will write the approved plan back to disk.\n\n` +
+      `The engine will pick it up on the next tick and start dispatching work.`;
+
+    document.getElementById('modal-title').textContent = 'Discuss Plan: ' + file;
+    document.getElementById('modal-body').textContent = content;
+    document.getElementById('modal').classList.add('open');
+  } catch (e) {
+    showToast('cmd-toast', 'Error: ' + e.message, false);
+  }
+}
+
+async function planView(file) {
+  try {
+    const plan = await fetch('/api/plans/' + encodeURIComponent(file)).then(r => r.json());
+    const items = (plan.missing_features || []).map((f, i) =>
+      (i + 1) + '. [' + f.id + '] ' + f.name + ' (' + f.estimated_complexity + ', ' + f.priority + ')' +
+      (f.depends_on?.length ? ' → depends on: ' + f.depends_on.join(', ') : '') +
+      '\n   ' + (f.description || '').slice(0, 150)
+    ).join('\n\n');
+    const text = 'Project: ' + plan.project + '\nStrategy: ' + (plan.branch_strategy || 'parallel') +
+      '\nBranch: ' + (plan.feature_branch || 'per-item') +
+      '\nStatus: ' + (plan.status || 'active') +
+      '\n\n--- Items ---\n\n' + items +
+      (plan.open_questions?.length ? '\n\n--- Open Questions ---\n\n' + plan.open_questions.join('\n') : '');
+    document.getElementById('modal-title').textContent = plan.plan_summary || file;
+    document.getElementById('modal-body').textContent = text;
+    document.getElementById('modal').classList.add('open');
+  } catch (e) { console.error(e); }
+}
+
 // ─── Knowledge Base ──────────────────────────────────────────────────────────
 let _kbData = {};
 let _kbActiveTab = 'all';