taskplane 0.1.5 → 0.1.6

package/dashboard/public/app.js

@@ -142,6 +142,11 @@ const $historyBody    = $("history-body");
 let historyList = [];  // compact batch summaries
 let viewingHistoryId = null; // batchId if viewing history, null if live
 
+// ─── Viewer State ───────────────────────────────────────────────────────────
+
+let viewerMode = null;   // "conversation" | "status-md" | null
+let viewerTarget = null; // session name (conversation) or taskId (status-md)
+
 // ─── Render: Header ─────────────────────────────────────────────────────────
 
 function renderHeader(batch) {
@@ -300,7 +305,8 @@ function renderLanesTasks(batch, tmuxSessions) {
     html += `  <div class="lane-right">`;
     html += `    <span class="tmux-dot ${alive ? "alive" : "dead"}" title="${alive ? "tmux alive" : "tmux dead"}"></span>`;
     // View button: shows conversation stream if available, else tmux pane
-    html += `    <button class="tmux-view-btn" onclick="viewConversation('${escapeHtml(lane.tmuxSessionName)}')" title="View worker conversation">👁 View</button>`;
+    const isViewingConv = viewerMode === 'conversation' && viewerTarget === lane.tmuxSessionName;
+    html += `    <button class="tmux-view-btn${isViewingConv ? ' active' : ''}" onclick="viewConversation('${escapeHtml(lane.tmuxSessionName)}')" title="View worker conversation">👁 View</button>`;
     if (alive) {
       html += `    <span class="tmux-cmd" data-tmux="${escapeHtml(lane.tmuxSessionName)}" onclick="copyTmuxCmd('${escapeHtml(lane.tmuxSessionName)}')" title="Click to copy">${escapeHtml(tmuxCmd)}</span>`;
     } else {
@@ -387,9 +393,15 @@ function renderLanesTasks(batch, tmuxSessions) {
         workerHtml = `<div class="worker-stats"><span class="worker-stat" style="color:var(--red)">✗ Worker error</span></div>`;
       }
 
+      const isViewingStatus = viewerMode === 'status-md' && viewerTarget === task.taskId;
+      const eyeHtml = task.status !== 'pending'
+        ? `<button class="viewer-eye-btn${isViewingStatus ? ' active' : ''}" onclick="viewStatusMd('${escapeHtml(task.taskId)}')" title="View STATUS.md">👁</button>`
+        : '';
+
       html += `
         <div class="task-row">
           <span class="task-icon"><span class="status-dot ${task.status}"></span></span>
+          <span class="task-actions">${eyeHtml}</span>
           <span class="task-id status-${task.status}">${escapeHtml(task.taskId)}</span>
           <span><span class="status-badge status-${task.status}"><span class="status-dot ${task.status}"></span> ${task.status}</span></span>
           <span class="task-duration">${dur}</span>
@@ -601,65 +613,236 @@ function connect() {
   };
 }
 
-// ─── Terminal Viewer ─────────────────────────────────────────────────────────
+// ─── Viewer Panel (Conversation + STATUS.md) ────────────────────────────────
 
 const $terminalPanel = document.getElementById("terminal-panel");
 const $terminalTitle = document.getElementById("terminal-title");
 const $terminalBody  = document.getElementById("terminal-body");
 const $terminalClose = document.getElementById("terminal-close");
+const $autoScrollCheckbox = document.getElementById("auto-scroll-checkbox");
+const $autoScrollText = document.getElementById("auto-scroll-text");
+
+// Viewer state
+let viewerTimer = null;
+let autoScrollOn = false;
+let isProgrammaticScroll = false;
+
+// Conversation append-only state
+let convRenderedLines = 0;
 
-let activeSession = null;
-let conversationTimer = null;
+// STATUS.md diff-and-skip state
+let lastStatusMdText = "";
+
+// ── Open conversation viewer ────────────────────────────────────────────────
 
 function viewConversation(sessionName) {
-  if (activeSession === sessionName && $terminalPanel.style.display !== "none") return;
+  // Toggle off if already viewing this session
+  if (viewerMode === 'conversation' && viewerTarget === sessionName && $terminalPanel.style.display !== 'none') {
+    closeViewer();
+    return;
+  }
 
-  closeConversation();
+  closeViewer();
+
+  viewerMode = 'conversation';
+  viewerTarget = sessionName;
+  autoScrollOn = true;
+  convRenderedLines = 0;
 
-  activeSession = sessionName;
   $terminalTitle.textContent = `Worker Conversation — ${sessionName}`;
-  $terminalPanel.style.display = "";
+  $autoScrollText.textContent = 'Follow feed';
+  $autoScrollCheckbox.checked = true;
+  $terminalPanel.style.display = '';
+  $terminalBody.innerHTML = '<div class="conv-stream"></div>';
 
-  // Initial load + start polling
-  loadConversation(sessionName);
-  conversationTimer = setInterval(() => loadConversation(sessionName), 2000);
+  pollConversation();
+  viewerTimer = setInterval(pollConversation, 2000);
 
-  $terminalPanel.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  $terminalPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 }
 
-function loadConversation(sessionName) {
-  fetch(`/api/conversation/${encodeURIComponent(sessionName)}`)
+function pollConversation() {
+  fetch(`/api/conversation/${encodeURIComponent(viewerTarget)}`)
     .then(r => r.text())
-    .then(text => renderConversation(text))
+    .then(text => {
+      if (!text.trim()) {
+        if (convRenderedLines === 0) {
+          $terminalBody.innerHTML = '<div class="conv-empty">No conversation events yet…</div>';
+        }
+        return;
+      }
+
+      const lines = text.trim().split('\n');
+
+      // File was reset (new task on same lane) — full re-render
+      if (lines.length < convRenderedLines) {
+        convRenderedLines = 0;
+        const container = $terminalBody.querySelector('.conv-stream');
+        if (container) container.innerHTML = '';
+      }
+
+      // Nothing new
+      if (lines.length === convRenderedLines) return;
+
+      // Ensure container exists
+      let container = $terminalBody.querySelector('.conv-stream');
+      if (!container) {
+        $terminalBody.innerHTML = '';
+        container = document.createElement('div');
+        container.className = 'conv-stream';
+        $terminalBody.appendChild(container);
+      }
+
+      // Append only new events
+      const newLines = lines.slice(convRenderedLines);
+      for (const line of newLines) {
+        try {
+          const event = JSON.parse(line);
+          const html = renderConvEvent(event);
+          if (html) container.insertAdjacentHTML('beforeend', html);
+        } catch { continue; }
+      }
+
+      convRenderedLines = lines.length;
+
+      // Auto-scroll to bottom
+      if (autoScrollOn) {
+        isProgrammaticScroll = true;
+        $terminalBody.scrollTop = $terminalBody.scrollHeight;
+        requestAnimationFrame(() => { isProgrammaticScroll = false; });
+      }
+    })
     .catch(() => {});
 }
 
-function renderConversation(jsonlText) {
-  if (!jsonlText.trim()) {
-    $terminalBody.innerHTML = '<div class="conv-empty">No conversation events yet…</div>';
+// ── Open STATUS.md viewer ───────────────────────────────────────────────────
+
+function viewStatusMd(taskId) {
+  // Toggle off if already viewing this task
+  if (viewerMode === 'status-md' && viewerTarget === taskId && $terminalPanel.style.display !== 'none') {
+    closeViewer();
     return;
   }
 
-  const lines = jsonlText.trim().split("\n");
-  let html = '<div class="conv-stream">';
+  closeViewer();
 
-  for (const line of lines) {
-    try {
-      const event = JSON.parse(line);
-      html += renderConvEvent(event);
-    } catch { continue; }
+  viewerMode = 'status-md';
+  viewerTarget = taskId;
+  autoScrollOn = false;
+  lastStatusMdText = '';
+
+  $terminalTitle.textContent = `STATUS.md — ${taskId}`;
+  $autoScrollText.textContent = 'Track progress';
+  $autoScrollCheckbox.checked = false;
+  $terminalPanel.style.display = '';
+  $terminalBody.innerHTML = '<div class="conv-empty">Loading…</div>';
+
+  pollStatusMd();
+  viewerTimer = setInterval(pollStatusMd, 2000);
+
+  $terminalPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+function pollStatusMd() {
+  fetch(`/api/status-md/${encodeURIComponent(viewerTarget)}`)
+    .then(r => {
+      if (!r.ok) throw new Error('not found');
+      return r.text();
+    })
+    .then(text => {
+      // Diff-and-skip: no change, no DOM update
+      if (text === lastStatusMdText) return;
+      lastStatusMdText = text;
+
+      const { html, hasLastChecked } = renderStatusMd(text);
+      $terminalBody.innerHTML = html;
+
+      // Update tracking highlight
+      updateTrackingHighlight();
+
+      // Auto-scroll to last checked item
+      if (autoScrollOn && hasLastChecked) {
+        scrollToLastChecked();
+      }
+    })
+    .catch(() => {
+      if (!lastStatusMdText) {
+        $terminalBody.innerHTML = '<div class="conv-empty">STATUS.md not found</div>';
+      }
+    });
+}
+
+// ── STATUS.md renderer ──────────────────────────────────────────────────────
+
+function renderStatusMd(markdown) {
+  const lines = markdown.split('\n');
+  let lastCheckedIdx = -1;
+
+  // First pass: find last checked item
+  for (let i = 0; i < lines.length; i++) {
+    if (/^\s*-\s*\[x\]/i.test(lines[i])) lastCheckedIdx = i;
   }
 
-  html += '</div>';
+  let html = '<div class="status-md-content">';
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
 
-  // Preserve scroll position if already scrolled up
-  const wasAtBottom = $terminalBody.scrollTop + $terminalBody.clientHeight >= $terminalBody.scrollHeight - 20;
-  $terminalBody.innerHTML = html;
-  if (wasAtBottom) {
-    $terminalBody.scrollTop = $terminalBody.scrollHeight;
+    // Headings
+    const hMatch = line.match(/^(#{1,6})\s+(.+)/);
+    if (hMatch) {
+      const lvl = Math.min(hMatch[1].length, 4);
+      html += `<div class="status-md-h${lvl}">${renderInlineMd(hMatch[2])}</div>`;
+      continue;
+    }
+
+    // Checked checkbox
+    if (/^\s*-\s*\[x\]/i.test(line)) {
+      const text = line.replace(/^\s*-\s*\[x\]\s*/i, '');
+      const isLast = i === lastCheckedIdx;
+      const cls = isLast ? 'status-md-check checked last-checked' : 'status-md-check checked';
+      const id = isLast ? ' id="last-checked"' : '';
+      html += `<div class="${cls}"${id}><span class="check-box">☑</span><span>${renderInlineMd(text)}</span></div>`;
+      continue;
+    }
+
+    // Unchecked checkbox
+    if (/^\s*-\s*\[\s\]/.test(line)) {
+      const text = line.replace(/^\s*-\s*\[\s\]\s*/, '');
+      html += `<div class="status-md-check unchecked"><span class="check-box">☐</span><span>${renderInlineMd(text)}</span></div>`;
+      continue;
+    }
+
+    // List item
+    const liMatch = line.match(/^\s*-\s+(.*)/);
+    if (liMatch) {
+      html += `<div class="status-md-li">• ${renderInlineMd(liMatch[1])}</div>`;
+      continue;
+    }
+
+    // Empty line
+    if (!line.trim()) {
+      html += '<div class="status-md-spacer"></div>';
+      continue;
+    }
+
+    // Plain text
+    html += `<div class="status-md-text">${renderInlineMd(line)}</div>`;
   }
+
+  html += '</div>';
+  return { html, hasLastChecked: lastCheckedIdx >= 0 };
+}
+
+function renderInlineMd(text) {
+  let s = escapeHtml(text);
+  s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  s = s.replace(/`(.+?)`/g, '<code class="status-md-code">$1</code>');
+  return s;
 }
 
+// ── Conversation event renderer ─────────────────────────────────────────────
+
 function renderConvEvent(event) {
   switch (event.type) {
     case "message_update": {
@@ -705,20 +888,81 @@ function renderConvEvent(event) {
   }
 }
 
-function closeConversation() {
-  if (conversationTimer) {
-    clearInterval(conversationTimer);
-    conversationTimer = null;
+// ── Auto-scroll logic ───────────────────────────────────────────────────────
+
+function scrollToLastChecked() {
+  const el = document.getElementById('last-checked');
+  if (!el) return;
+  isProgrammaticScroll = true;
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  setTimeout(() => { isProgrammaticScroll = false; }, 600);
+}
+
+function updateTrackingHighlight() {
+  const container = $terminalBody.querySelector('.status-md-content');
+  if (container) {
+    container.classList.toggle('tracking', autoScrollOn && viewerMode === 'status-md');
+  }
+}
+
+$autoScrollCheckbox.addEventListener('change', () => {
+  autoScrollOn = $autoScrollCheckbox.checked;
+  if (autoScrollOn) {
+    if (viewerMode === 'conversation') {
+      isProgrammaticScroll = true;
+      $terminalBody.scrollTop = $terminalBody.scrollHeight;
+      requestAnimationFrame(() => { isProgrammaticScroll = false; });
+    } else if (viewerMode === 'status-md') {
+      scrollToLastChecked();
+      updateTrackingHighlight();
+    }
+  } else {
+    updateTrackingHighlight();
+  }
+});
+
+$terminalBody.addEventListener('scroll', () => {
+  if (isProgrammaticScroll) return;
+
+  if (viewerMode === 'conversation') {
+    const isAtBottom = $terminalBody.scrollTop + $terminalBody.clientHeight >= $terminalBody.scrollHeight - 30;
+    if (isAtBottom && !autoScrollOn) {
+      autoScrollOn = true;
+      $autoScrollCheckbox.checked = true;
+    } else if (!isAtBottom && autoScrollOn) {
+      autoScrollOn = false;
+      $autoScrollCheckbox.checked = false;
+    }
+  } else if (viewerMode === 'status-md') {
+    if (autoScrollOn) {
+      autoScrollOn = false;
+      $autoScrollCheckbox.checked = false;
+      updateTrackingHighlight();
+    }
+  }
+});
+
+// ── Close viewer ────────────────────────────────────────────────────────────
+
+function closeViewer() {
+  if (viewerTimer) {
+    clearInterval(viewerTimer);
+    viewerTimer = null;
   }
-  activeSession = null;
-  $terminalPanel.style.display = "none";
-  $terminalBody.innerHTML = "";
+  viewerMode = null;
+  viewerTarget = null;
+  autoScrollOn = false;
+  convRenderedLines = 0;
+  lastStatusMdText = '';
+  $terminalPanel.style.display = 'none';
+  $terminalBody.innerHTML = '';
 }
 
-$terminalClose.addEventListener("click", closeConversation);
+$terminalClose.addEventListener('click', closeViewer);
 
-// Make viewConversation available globally for onclick handlers
+// Make viewer functions available globally for onclick handlers
 window.viewConversation = viewConversation;
+window.viewStatusMd = viewStatusMd;
 
 // ─── History ────────────────────────────────────────────────────────────────
 

package/dashboard/public/index.html

@@ -62,11 +62,17 @@
         </div>
       </div>
 
-      <!-- Terminal Viewer (hidden until a session is clicked) -->
+      <!-- Viewer Panel: Conversation + STATUS.md (hidden until activated) -->
       <div class="panel terminal-panel" id="terminal-panel" style="display:none;">
         <div class="panel-header">
           <span id="terminal-title">Terminal</span>
-          <button class="terminal-close" id="terminal-close" title="Close terminal">✕</button>
+          <div class="terminal-controls">
+            <label class="auto-scroll-label">
+              <input type="checkbox" id="auto-scroll-checkbox">
+              <span id="auto-scroll-text">Follow feed</span>
+            </label>
+            <button class="terminal-close" id="terminal-close" title="Close viewer">✕</button>
+          </div>
         </div>
         <div class="panel-body" id="terminal-body"></div>
       </div>

package/dashboard/public/style.css

@@ -439,7 +439,7 @@ body {
 
 .task-row {
   display: grid;
-  grid-template-columns: 36px 100px 90px 80px 200px 1fr;
+  grid-template-columns: 36px 24px 100px 90px 80px 200px 1fr;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
@@ -700,6 +700,190 @@ body {
   color: var(--text-faint);
 }
 
+/* ─── Viewer Eye Button (task row) ─────────────────────────────────────── */
+
+.task-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.viewer-eye-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  opacity: 0.35;
+  transition: opacity 0.2s, background 0.2s;
+  line-height: 1;
+}
+
+.viewer-eye-btn:hover {
+  opacity: 0.8;
+  background: rgba(88,166,255,0.1);
+}
+
+.viewer-eye-btn.active {
+  opacity: 1;
+  background: rgba(88,166,255,0.15);
+}
+
+.tmux-view-btn.active {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+/* ─── Viewer Controls (auto-scroll checkbox + close) ───────────────────── */
+
+.terminal-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.auto-scroll-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.auto-scroll-label input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--bg-inset);
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.auto-scroll-label input[type="checkbox"]:checked {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+}
+
+.auto-scroll-label input[type="checkbox"]:checked::after {
+  content: '✓';
+  position: absolute;
+  top: -1px;
+  left: 2px;
+  font-size: 11px;
+  color: #fff;
+}
+
+/* ─── STATUS.md Rendered Content ───────────────────────────────────────── */
+
+.status-md-content {
+  padding: 12px 16px;
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
+.status-md-h1 {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--text);
+  margin: 16px 0 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.status-md-h1:first-child { margin-top: 0; }
+
+.status-md-h2 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text);
+  margin: 14px 0 6px;
+}
+
+.status-md-h3 {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin: 12px 0 4px;
+}
+
+.status-md-h4 {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin: 10px 0 4px;
+}
+
+.status-md-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  border-left: 2px solid transparent;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.status-md-check.checked {
+  color: var(--text-muted);
+}
+
+.status-md-check.checked .check-box {
+  color: var(--green);
+}
+
+.status-md-check.unchecked {
+  color: var(--text);
+}
+
+.status-md-check.unchecked .check-box {
+  color: var(--text-faint);
+}
+
+.check-box {
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
+/* Progress frontier highlight — only when tracking is active */
+.status-md-content.tracking .status-md-check.last-checked {
+  border-left-color: var(--accent);
+  background: rgba(88, 166, 255, 0.06);
+}
+
+.status-md-li {
+  padding: 2px 8px;
+  color: var(--text);
+}
+
+.status-md-text {
+  padding: 2px 8px;
+  color: var(--text);
+}
+
+.status-md-spacer {
+  height: 8px;
+}
+
+.status-md-code {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  padding: 1px 5px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 3px;
+  color: var(--accent);
+}
+
 /* ─── Errors Panel ─────────────────────────────────────────────────────── */
 
 .errors-panel .panel-header { color: var(--red); }
@@ -750,7 +934,7 @@ body {
 
 @media (max-width: 900px) {
   .task-row {
-    grid-template-columns: 36px 90px 80px 70px 1fr;
+    grid-template-columns: 36px 24px 90px 80px 70px 1fr;
   }
   .task-row .task-step { display: none; }
   .progress-bar-bg { width: 160px; }

package/dashboard/server.cjs

@@ -426,6 +426,57 @@ function serveHistoryEntry(req, res, batchId) {
   res.end(JSON.stringify(entry));
 }
 
+/** GET /api/status-md/:taskId — return raw STATUS.md content for a task. */
+function serveStatusMd(req, res, taskId) {
+  if (!/^[\w-]+$/.test(taskId)) {
+    res.writeHead(400, { "Content-Type": "text/plain" });
+    res.end("Invalid task ID");
+    return;
+  }
+
+  const state = loadBatchState();
+  if (!state) {
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "No batch state" }));
+    return;
+  }
+
+  const task = (state.tasks || []).find(t => t.taskId === taskId);
+  if (!task) {
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "Task not found" }));
+    return;
+  }
+
+  const effectiveFolder = resolveTaskFolder(task, state);
+  if (!effectiveFolder) {
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "Cannot resolve task folder" }));
+    return;
+  }
+
+  // Try effective folder, then archive
+  const candidates = [effectiveFolder];
+  const archiveBase = effectiveFolder.replace(/[/\\]tasks[/\\][^/\\]+$/, "/tasks/archive/" + taskId);
+  if (archiveBase !== effectiveFolder) candidates.push(archiveBase);
+
+  for (const folder of candidates) {
+    const statusPath = path.join(folder, "STATUS.md");
+    try {
+      const content = fs.readFileSync(statusPath, "utf-8");
+      res.writeHead(200, {
+        "Content-Type": "text/plain; charset=utf-8",
+        "Access-Control-Allow-Origin": "*",
+      });
+      res.end(content);
+      return;
+    } catch { continue; }
+  }
+
+  res.writeHead(404, { "Content-Type": "application/json" });
+  res.end(JSON.stringify({ error: "STATUS.md not found" }));
+}
+
 // ─── HTTP Server ────────────────────────────────────────────────────────────
 
 function createServer() {
@@ -452,6 +503,9 @@ function createServer() {
     } else if (pathname.startsWith("/api/history/") && req.method === "GET") {
       const batchId = decodeURIComponent(pathname.slice("/api/history/".length));
       serveHistoryEntry(req, res, batchId);
+    } else if (pathname.startsWith("/api/status-md/") && req.method === "GET") {
+      const taskId = decodeURIComponent(pathname.slice("/api/status-md/".length));
+      serveStatusMd(req, res, taskId);
     } else {
       serveStatic(req, res);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskplane",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "AI agent orchestration for pi — parallel task execution with checkpoint discipline",
   "keywords": [
     "pi-package",