@longshot/cli 0.0.1

package/dist/views/tasks.js

@@ -0,0 +1,898 @@
+import { marked } from "marked";
+import { hasRealSpec } from "../store.js";
+import { layout } from "./layout.js";
+const statusColors = {
+    drafting: "status-drafting",
+    ready: "status-ready",
+    in_progress: "status-progress",
+    complete: "status-complete",
+    rejected: "status-rejected",
+    queued: "status-queued",
+    approved: "status-approved",
+    refining: "status-refining",
+    fixing: "status-fixing",
+    conflict: "status-conflict",
+};
+const statusLabels = {
+    drafting: "Drafting",
+    ready: "Ready",
+    in_progress: "In Progress",
+    complete: "Complete",
+    rejected: "Rejected",
+    queued: "Queued",
+    approved: "Approved",
+    refining: "Refining",
+    fixing: "Fixing",
+    conflict: "Conflict",
+};
+// Sort groups: agent-active tasks first, then other active, then terminal
+const statusGroup = {
+    in_progress: 0,
+    queued: 0,
+    approved: 0,
+    refining: 0,
+    fixing: 0,
+    conflict: 0,
+    ready: 1,
+    drafting: 1,
+    complete: 2,
+    rejected: 2,
+};
+function taskSortKey(t) {
+    const group = statusGroup[t.status] ?? 2;
+    return [group, t.id];
+}
+function renderTaskCard(task, ctx) {
+    const colorClass = statusColors[task.status] || "";
+    const label = statusLabels[task.status] || task.status;
+    // Build action buttons
+    const actions = [];
+    if (task.status === "drafting" && ctx.pendingQueueTaskIds.has(task.id) && ctx.agentTaskId !== task.id) {
+        actions.push(`<span class="btn btn-task-action btn-queued">Drafting...</span>`);
+    }
+    if (task.status === "ready") {
+        actions.push(`<button class="btn btn-task-action btn-primary" onclick="event.preventDefault(); startWork(${task.id})">Start Work</button>`);
+    }
+    if (task.status === "in_progress" && ctx.pendingDiffId) {
+        actions.push(`<a href="/diff/${ctx.pendingDiffId}" class="btn btn-task-action btn-approve" onclick="event.stopPropagation()">Review Diff</a>`);
+    }
+    if ((task.status === "in_progress" || task.status === "drafting" || task.status === "refining" || task.status === "approved" || task.status === "fixing" || task.status === "conflict") && ctx.agentTaskId === task.id && ctx.currentRunId) {
+        actions.push(`<a href="/agent/${ctx.currentRunId}" class="btn btn-task-action btn-task-progress" onclick="event.stopPropagation()">View Progress</a>`);
+    }
+    const actionsHtml = actions.length
+        ? `<div class="task-card-actions">${actions.join("\n")}</div>`
+        : "";
+    return `<a href="/tasks/${task.id}" class="task-card ${colorClass}">
+    <div class="task-card-top">
+      <span class="task-status-badge ${colorClass}">${label}</span>
+      <span class="task-id">#${task.id}</span>
+    </div>
+    <div class="task-title">${escapeHtml(task.title)}</div>
+    ${actionsHtml}
+  </a>`;
+}
+export function tasksListPage(tasks, taskDiffs = new Map(), agentRunning = false, currentRunId = null, agentTaskId = null, pendingQueueTaskIds = new Set()) {
+    const ctx = { agentRunning, currentRunId, agentTaskId, pendingQueueTaskIds };
+    const active = tasks
+        .filter((t) => t.status !== "complete" && t.status !== "rejected")
+        .sort((a, b) => {
+        const [aGroup, aId] = taskSortKey(a);
+        const [bGroup, bId] = taskSortKey(b);
+        if (aGroup !== bGroup)
+            return aGroup - bGroup;
+        // Group 0 (agent-active): ID ascending (oldest first)
+        // Group 1 (pending): ID descending (newest first)
+        return aGroup === 0 ? Number(aId) - Number(bId) : Number(bId) - Number(aId);
+    });
+    const done = tasks
+        .filter((t) => t.status === "complete" || t.status === "rejected")
+        .sort((a, b) => Number(b.id) - Number(a.id));
+    const body = `
+    <div class="tasks-container">
+      <div class="tasks-header">
+        <h1>Tasks</h1>
+      </div>
+      <div id="git-status-bar"></div>
+      <div id="task-list-container">
+      ${active.length ? `<div class="tasks-section">
+        <h2>Active</h2>
+        <div class="task-list">${active.map((t) => renderTaskCard(t, { ...ctx, pendingDiffId: taskDiffs.get(t.id) })).join("\n")}</div>
+      </div>` : ""}
+      ${done.length ? `<div class="tasks-section">
+        <h2>Done</h2>
+        <div class="task-list">${done.map((t) => renderTaskCard(t, { ...ctx, pendingDiffId: taskDiffs.get(t.id) })).join("\n")}</div>
+      </div>` : ""}
+      ${!tasks.length ? '<p class="empty-state">No tasks yet. Chat to create one.</p>' : ""}
+      </div>
+    </div>
+    <script>
+      const statusColors = ${JSON.stringify(statusColors)};
+      const statusLabels = ${JSON.stringify(statusLabels)};
+      const statusGroup = ${JSON.stringify(statusGroup)};
+
+      function escapeHtmlClient(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+      }
+
+      function renderTaskCardClient(task, taskDiffs, agentRunning, currentRunId, agentTaskId, pendingQueueTaskIds) {
+        const colorClass = statusColors[task.status] || '';
+        const label = statusLabels[task.status] || task.status;
+        const pendingDiffId = taskDiffs[task.id];
+        const pendingQueue = pendingQueueTaskIds && pendingQueueTaskIds.indexOf(task.id) >= 0;
+        const actions = [];
+
+        if (task.status === 'drafting' && pendingQueue && agentTaskId !== task.id) {
+          actions.push('<span class="btn btn-task-action btn-queued">Drafting...</span>');
+        }
+        if (task.status === 'ready') {
+          actions.push('<button class="btn btn-task-action btn-primary" onclick="event.preventDefault(); startWork(' + task.id + ')">Start Work</button>');
+        }
+        if (task.status === 'in_progress' && pendingDiffId) {
+          actions.push('<a href="/diff/' + pendingDiffId + '" class="btn btn-task-action btn-approve" onclick="event.stopPropagation()">Review Diff</a>');
+        }
+        if ((task.status === 'in_progress' || task.status === 'drafting' || task.status === 'refining' || task.status === 'approved' || task.status === 'fixing' || task.status === 'conflict') && agentTaskId === task.id && currentRunId) {
+          actions.push('<a href="/agent/' + currentRunId + '" class="btn btn-task-action btn-task-progress" onclick="event.stopPropagation()">View Progress</a>');
+        }
+
+        const actionsHtml = actions.length ? '<div class="task-card-actions">' + actions.join('') + '</div>' : '';
+
+        return '<a href="/tasks/' + task.id + '" class="task-card ' + colorClass + '">' +
+          '<div class="task-card-top">' +
+            '<span class="task-status-badge ' + colorClass + '">' + label + '</span>' +
+            '<span class="task-id">#' + task.id + '</span>' +
+          '</div>' +
+          '<div class="task-title">' + escapeHtmlClient(task.title) + '</div>' +
+          actionsHtml +
+        '</a>';
+      }
+
+      function renderTaskList(tasks, taskDiffs, agentRunning, currentRunId, agentTaskId, pendingQueueTaskIds) {
+        const active = tasks
+          .filter(t => t.status !== 'complete' && t.status !== 'rejected')
+          .sort((a, b) => {
+            const aGroup = a.status in statusGroup ? statusGroup[a.status] : 2;
+            const bGroup = b.status in statusGroup ? statusGroup[b.status] : 2;
+            if (aGroup !== bGroup) return aGroup - bGroup;
+            return aGroup === 0 ? a.id - b.id : b.id - a.id;
+          });
+        const done = tasks
+          .filter(t => t.status === 'complete' || t.status === 'rejected')
+          .sort((a, b) => b.id - a.id);
+
+        let html = '';
+        if (active.length) {
+          html += '<div class="tasks-section"><h2>Active</h2><div class="task-list">' +
+            active.map(t => renderTaskCardClient(t, taskDiffs, agentRunning, currentRunId, agentTaskId, pendingQueueTaskIds)).join('') +
+          '</div></div>';
+        }
+        if (done.length) {
+          html += '<div class="tasks-section"><h2>Done</h2><div class="task-list">' +
+            done.map(t => renderTaskCardClient(t, taskDiffs, agentRunning, currentRunId, agentTaskId, pendingQueueTaskIds)).join('') +
+          '</div></div>';
+        }
+        if (!tasks.length) {
+          html = '<p class="empty-state">No tasks yet. Chat to create one.</p>';
+        }
+        return html;
+      }
+
+      async function pollTasks() {
+        try {
+          const resp = await fetch('/api/tasks');
+          if (!resp.ok) return;
+          const data = await resp.json();
+          const container = document.getElementById('task-list-container');
+          if (container) {
+            container.innerHTML = renderTaskList(data.tasks, data.taskDiffs, data.agentRunning, data.currentRunId, data.agentTaskId, data.pendingQueueTaskIds || []);
+          }
+        } catch {}
+      }
+
+      setInterval(pollTasks, 3000);
+
+      async function startWork(id) {
+        const btn = event.target;
+        btn.disabled = true;
+        btn.textContent = 'Queuing...';
+        try {
+          const resp = await fetch('/tasks/' + id + '/status', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ status: 'in_progress' }),
+          });
+          if (resp.ok) {
+            pollTasks();
+          } else {
+            btn.disabled = false;
+            btn.textContent = 'Start Work';
+          }
+        } catch {
+          btn.disabled = false;
+          btn.textContent = 'Start Work';
+        }
+      }
+
+      // --- Git sync ---
+      let gitPullFailed = false;
+      let gitCommitsExpanded = false;
+
+      function renderGitStatus(data) {
+        const bar = document.getElementById('git-status-bar');
+        if (!bar) return;
+
+        if (!data.remote) {
+          bar.innerHTML = '';
+          return;
+        }
+
+        if (data.ahead === 0 && data.behind === 0 && !gitPullFailed) {
+          bar.innerHTML = '';
+          gitCommitsExpanded = false;
+          return;
+        }
+
+        let html = '<div class="git-sync-bar">';
+
+        if (gitPullFailed) {
+          html += '<div class="git-sync-error" id="git-error">' + escapeHtmlClient(gitPullFailed) + '</div>';
+          html += '<div class="git-sync-actions">';
+          html += '<button class="btn btn-small git-btn" onclick="gitPullRebase()">Pull (rebase)</button>';
+          html += '<button class="btn btn-small git-btn" onclick="gitDismissError()">Dismiss</button>';
+          html += '</div>';
+        } else {
+          html += '<div class="git-sync-info">';
+          if (data.ahead > 0) {
+            html += '<span class="git-ahead git-ahead-toggle" onclick="toggleCommitList()">' + data.ahead + ' commit' + (data.ahead === 1 ? '' : 's') + ' to push</span>';
+          }
+          if (data.behind > 0) {
+            html += '<span class="git-behind">' + data.behind + ' behind</span>';
+          }
+          html += '</div>';
+          html += '<div class="git-sync-actions">';
+          if (data.behind > 0) {
+            html += '<button class="btn btn-small git-btn git-pull-btn" onclick="gitPull()">Pull</button>';
+          }
+          html += '</div>';
+        }
+
+        html += '</div>';
+
+        // Expandable commit list
+        if (data.ahead > 0 && data.outgoing && data.outgoing.length > 0) {
+          html += '<div class="git-commit-list" id="git-commit-list" style="display:' + (gitCommitsExpanded ? 'block' : 'none') + '">';
+          html += '<div class="git-commit-entries">';
+          for (var i = 0; i < data.outgoing.length; i++) {
+            var c = data.outgoing[i];
+            html += '<div class="git-commit-entry"><span class="git-commit-hash">' + escapeHtmlClient(c.hash) + '</span> <span class="git-commit-subject">' + escapeHtmlClient(c.subject) + '</span></div>';
+          }
+          html += '</div>';
+          html += '<div class="git-commit-list-actions"><button class="btn btn-small git-btn git-push-btn" onclick="gitPush()">Push</button></div>';
+          html += '</div>';
+        }
+
+        bar.innerHTML = html;
+      }
+
+      function toggleCommitList() {
+        gitCommitsExpanded = !gitCommitsExpanded;
+        var el = document.getElementById('git-commit-list');
+        if (el) {
+          el.style.display = gitCommitsExpanded ? 'block' : 'none';
+        }
+      }
+
+      async function pollGitStatus() {
+        try {
+          const resp = await fetch('/api/git/status');
+          if (!resp.ok) return;
+          const data = await resp.json();
+          renderGitStatus(data);
+        } catch {}
+      }
+
+      async function gitPush() {
+        const btns = document.querySelectorAll('.git-btn');
+        btns.forEach(b => { b.disabled = true; });
+        try {
+          const resp = await fetch('/api/git/push', { method: 'POST' });
+          const data = await resp.json();
+          if (!data.success) {
+            alert('Push failed: ' + (data.error || 'Unknown error'));
+          }
+          pollGitStatus();
+        } catch {
+          alert('Push failed');
+        }
+        btns.forEach(b => { b.disabled = false; });
+      }
+
+      async function gitPull() {
+        const btns = document.querySelectorAll('.git-btn');
+        btns.forEach(b => { b.disabled = true; });
+        try {
+          const resp = await fetch('/api/git/pull', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({}),
+          });
+          const data = await resp.json();
+          if (!data.success) {
+            gitPullFailed = data.error || 'Pull failed';
+            pollGitStatus();
+          } else {
+            gitPullFailed = false;
+            pollGitStatus();
+          }
+        } catch {
+          alert('Pull failed');
+        }
+        btns.forEach(b => { b.disabled = false; });
+      }
+
+      async function gitPullRebase() {
+        const btns = document.querySelectorAll('.git-btn');
+        btns.forEach(b => { b.disabled = true; });
+        try {
+          const resp = await fetch('/api/git/pull', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ rebase: true }),
+          });
+          const data = await resp.json();
+          if (!data.success) {
+            gitPullFailed = data.error || 'Pull (rebase) failed';
+          } else {
+            gitPullFailed = false;
+          }
+          pollGitStatus();
+        } catch {
+          alert('Pull (rebase) failed');
+        }
+        btns.forEach(b => { b.disabled = false; });
+      }
+
+      function gitDismissError() {
+        gitPullFailed = false;
+        pollGitStatus();
+      }
+
+      pollGitStatus();
+      setInterval(pollGitStatus, 10000);
+    </script>`;
+    return layout("Tasks", "tasks", body);
+}
+function renderMessage(msg) {
+    const isUser = msg.role === "user";
+    const rendered = marked.parse(msg.content, { async: false });
+    return `<div class="message ${isUser ? "message-user" : "message-assistant"}">
+    <div class="message-role">${isUser ? "You" : "Claude"}</div>
+    <div class="message-content">${rendered}</div>
+  </div>`;
+}
+export function taskDetailPage(task, spec, agentRunning = false, currentRunId = null, chatMessages = [], chatPending = false, report = null, agentTaskId = null, pendingDiffId, hasPendingQueueItem = false, conflictError) {
+    const rendered = spec
+        ? marked.parse(spec, { async: false })
+        : '<p class="empty-state">No task spec written yet.</p>';
+    const colorClass = statusColors[task.status] || "";
+    const isDrafting = task.status === "drafting" || task.status === "refining";
+    const isConflict = task.status === "conflict";
+    const agentWorkingOnThis = agentTaskId === task.id && agentRunning;
+    const isComplete = task.status === "complete";
+    const draftPending = hasPendingQueueItem && !agentWorkingOnThis;
+    const actions = [];
+    // Drafting (no agent, no pending queue item): Mark Ready (only if spec has real content)
+    if (isDrafting && !agentWorkingOnThis && !draftPending && hasRealSpec(spec)) {
+        actions.push(`<button class="btn btn-approve" onclick="updateTask(${task.id}, 'ready')">Mark Ready</button>`);
+    }
+    // Show "Drafting..." indicator when queue item is pending
+    if (isDrafting && draftPending) {
+        actions.push(`<span class="btn btn-queued">Drafting...</span>`);
+    }
+    // Ready: Start Work
+    if (task.status === "ready") {
+        actions.push(`<button class="btn btn-primary" id="start-work-btn">Start Work</button>`);
+    }
+    // In Progress with pending diff: Review Diff
+    if (task.status === "in_progress" && pendingDiffId) {
+        actions.push(`<a href="/diff/${pendingDiffId}" class="btn btn-task-action btn-approve">Review Diff</a>`);
+    }
+    // In Progress with no diff and no agent: Done — Review Diff (after manual conflict resolution)
+    if (task.status === "in_progress" && !pendingDiffId && !agentWorkingOnThis) {
+        actions.push(`<button class="btn btn-approve" onclick="conflictDone()">Done — Review Diff</button>`);
+    }
+    // Agent working on this task: View Progress
+    if (agentWorkingOnThis && currentRunId) {
+        actions.push(`<a href="/agent/${currentRunId}" class="btn btn-task-action btn-task-progress">View Progress</a>`);
+    }
+    const bannerHtml = agentWorkingOnThis && currentRunId
+        ? `<a href="/agent/${currentRunId}" class="agent-banner">Agent working... tap to view progress</a>`
+        : "";
+    // Completion report for completed tasks
+    const reportHtml = isComplete && report
+        ? `<div class="task-report">
+        <h2>Completion Report</h2>
+        <div class="report-content">${marked.parse(report, { async: false })}</div>
+      </div>`
+        : "";
+    // Chat UI for drafting tasks — history always visible, input hidden while agent is running
+    const chatHistoryHtml = isDrafting ? `
+      <div class="task-chat">
+        <div class="messages" id="task-messages">
+          ${chatMessages.map(renderMessage).join("\n")}
+          ${chatPending ? `<div class="message message-assistant" id="thinking-indicator">
+            <div class="message-role">Claude</div>
+            <div class="message-content"><em>Thinking...</em></div>
+          </div>` : ""}
+        </div>
+        ${!agentWorkingOnThis && !draftPending ? `<div class="chat-input-area">
+          <form class="chat-input" id="task-chat-form">
+            <textarea
+              name="message"
+              id="task-message-input"
+              placeholder="Describe changes to the spec..."
+              rows="2"
+              autofocus
+            ></textarea>
+            <div class="task-chat-buttons">
+              <button type="button" id="task-refine-btn" class="btn btn-primary">Refine</button>
+            </div>
+          </form>
+        </div>` : `<div class="chat-busy">
+          <p>Claude is working on this task...${currentRunId ? ` <a href="/agent/${currentRunId}">View progress</a>` : ""}</p>
+        </div>`}
+      </div>` : "";
+    const chatHtml = chatHistoryHtml;
+    const body = `
+    <div class="task-detail">
+      <div id="task-banner">${bannerHtml}</div>
+      <div class="task-detail-header">
+        <a href="/tasks" class="back-link">Tasks</a>
+        <h1>${escapeHtml(task.title)}</h1>
+        <div class="task-meta">
+          <span class="task-status-badge ${colorClass}" id="task-status-badge">${statusLabels[task.status] || task.status}</span>
+          <span class="task-id">#${task.id}</span>
+        </div>
+      </div>
+      <div id="task-primary-actions">${actions.length ? `<div class="task-actions">${actions.join("\n")}</div>` : ""}</div>
+      ${task.status !== "complete" && task.status !== "rejected" ? `<div class="task-actions" style="margin-top: 8px;">
+        <button class="btn btn-reject" style="opacity: 0.7; font-size: 0.85em;" id="cancel-task-btn" onclick="cancelTask(this, ${task.id})">Cancel Task</button>
+      </div>` : ""}
+      ${isConflict ? `<div class="conflict-section">
+        <div class="conflict-error">
+          <strong>Merge Conflict</strong>
+          <p>${escapeHtml(conflictError || "Stash apply failed due to merge conflicts.")}</p>
+        </div>
+        <div class="conflict-actions">
+          <button class="btn btn-primary" onclick="resolveConflict('restart')">Restart Task</button>
+          <button class="btn btn-approve" onclick="resolveConflict('agent-resolve')">Agent Resolve</button>
+          <button class="btn btn-task-action" onclick="resolveConflict('manual')">Manual Resolve</button>
+        </div>
+      </div>` : ""}
+      <details class="spec-collapsible" ${isDrafting ? "" : "open"}>
+        <summary>Task Spec</summary>
+        <div class="spec-content">
+          ${rendered}
+        </div>
+      </details>
+      ${reportHtml}
+      ${chatHtml}
+    </div>
+    <script>
+      const statusColors = ${JSON.stringify(statusColors)};
+      const statusLabels = ${JSON.stringify(statusLabels)};
+      const agentBusy = ${agentRunning};
+      const taskId = ${task.id};
+      const isDrafting = ${isDrafting};
+      let currentStatus = '${task.status}';
+      let lastPendingQueueItem = ${draftPending};
+
+      async function updateTask(id, status) {
+        const btns = document.querySelectorAll('.task-actions .btn');
+        btns.forEach(b => { b.disabled = true; });
+
+        try {
+          const resp = await fetch('/tasks/' + id + '/status', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ status }),
+          });
+          if (!resp.ok) {
+            const data = await resp.json();
+            alert(data.error || 'Failed to update task');
+            btns.forEach(b => { b.disabled = false; });
+            return;
+          }
+          location.reload();
+        } catch {
+          btns.forEach(b => { b.disabled = false; });
+        }
+      }
+
+      async function resolveConflict(action) {
+        const btns = document.querySelectorAll('.conflict-actions .btn');
+        btns.forEach(b => { b.disabled = true; });
+
+        try {
+          const resp = await fetch('/api/tasks/' + taskId + '/conflict/' + action, { method: 'POST' });
+          if (!resp.ok) {
+            const data = await resp.json();
+            alert(data.error || 'Failed to resolve conflict');
+            btns.forEach(b => { b.disabled = false; });
+            return;
+          }
+          const data = await resp.json();
+          if (action === 'manual' && data.conflicts && data.conflicts.length > 0) {
+            alert('Conflict markers written to disk in: ' + data.conflicts.join(', ') + '\\n\\nResolve the conflicts locally, then come back and click "Done — Review Diff".');
+          }
+          location.reload();
+        } catch {
+          btns.forEach(b => { b.disabled = false; });
+        }
+      }
+
+      async function conflictDone() {
+        try {
+          const resp = await fetch('/api/tasks/' + taskId + '/conflict/done', { method: 'POST' });
+          if (!resp.ok) {
+            const data = await resp.json();
+            alert(data.error || 'No changes to review');
+            return;
+          }
+          const data = await resp.json();
+          if (data.diffId) {
+            location.href = '/diff/' + data.diffId;
+          } else {
+            location.reload();
+          }
+        } catch {
+          alert('Failed to create diff');
+        }
+      }
+
+      async function cancelTask(btn, id) {
+        if (!confirm('Cancel this task?')) return;
+        const origText = btn.textContent;
+        btn.disabled = true;
+        btn.textContent = 'Cancelling...';
+        try {
+          const resp = await fetch('/tasks/' + id + '/status', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ status: 'rejected' }),
+          });
+          if (resp.ok) {
+            location.href = '/tasks';
+          } else {
+            btn.disabled = false;
+            btn.textContent = origText;
+          }
+        } catch {
+          btn.disabled = false;
+          btn.textContent = origText;
+        }
+      }
+
+      // Poll for task status changes
+      async function pollTaskStatus() {
+        try {
+          const resp = await fetch('/api/tasks/' + taskId + '/status');
+          if (!resp.ok) return;
+          const data = await resp.json();
+
+          // Update status badge
+          const badge = document.getElementById('task-status-badge');
+          if (badge) {
+            const newColorClass = statusColors[data.status] || '';
+            const newLabel = statusLabels[data.status] || data.status;
+            badge.className = 'task-status-badge ' + newColorClass;
+            badge.textContent = newLabel;
+          }
+
+          const agentWorkingOnThis = data.agentTaskId === taskId && data.agentRunning;
+
+          // Update banner
+          const bannerEl = document.getElementById('task-banner');
+          if (bannerEl) {
+            if (agentWorkingOnThis && data.currentRunId) {
+              bannerEl.innerHTML = '<a href="/agent/' + data.currentRunId + '" class="agent-banner">Agent working... tap to view progress</a>';
+            } else {
+              bannerEl.innerHTML = '';
+            }
+          }
+
+          // Update action buttons
+          const actionsEl = document.getElementById('task-primary-actions');
+          if (actionsEl) {
+            const actions = [];
+            const taskIsDrafting = data.status === 'drafting' || data.status === 'refining';
+            const draftPending = data.hasPendingQueueItem && !agentWorkingOnThis;
+            if (taskIsDrafting && !agentWorkingOnThis && !draftPending && data.hasSpec) {
+              actions.push('<button class="btn btn-approve" onclick="updateTask(' + taskId + ', \\'ready\\')">Mark Ready</button>');
+            }
+            if (taskIsDrafting && draftPending) {
+              actions.push('<span class="btn btn-queued">Drafting...</span>');
+            }
+            if (data.status === 'ready') {
+              actions.push('<button class="btn btn-primary" id="start-work-btn" onclick="updateTask(' + taskId + ', \\'in_progress\\')">Start Work</button>');
+            }
+            if (data.status === 'in_progress' && data.pendingDiffId) {
+              actions.push('<a href="/diff/' + data.pendingDiffId + '" class="btn btn-task-action btn-approve">Review Diff</a>');
+            }
+            if (agentWorkingOnThis && data.currentRunId) {
+              actions.push('<a href="/agent/' + data.currentRunId + '" class="btn btn-task-action btn-task-progress">View Progress</a>');
+            }
+            actionsEl.innerHTML = actions.length ? '<div class="task-actions">' + actions.join('') + '</div>' : '';
+          }
+
+          // Update spec content in-place (preserves <details> open state)
+          if (data.specHtml) {
+            const specContent = document.querySelector('.spec-content');
+            if (specContent) specContent.innerHTML = data.specHtml;
+          }
+
+          // Check for state changes
+          const pendingQueueChanged = !!data.hasPendingQueueItem !== lastPendingQueueItem;
+          if (pendingQueueChanged) lastPendingQueueItem = !!data.hasPendingQueueItem;
+
+          if (data.status !== currentStatus || pendingQueueChanged) {
+            const staysDraftingOrRefining =
+              (data.status === 'drafting' || data.status === 'refining') &&
+              (currentStatus === 'drafting' || currentStatus === 'refining');
+
+            if (staysDraftingOrRefining) {
+              // Handle refining <-> drafting transitions in-place
+              const wasRefining = currentStatus === 'refining';
+              const nowRefining = data.status === 'refining';
+              currentStatus = data.status;
+
+              if (wasRefining && !nowRefining) {
+                // refining → drafting: show chat input, hide busy message, refresh chat messages
+                const busyEl = document.querySelector('.chat-busy');
+                if (busyEl) {
+                  const inputArea = document.createElement('div');
+                  inputArea.className = 'chat-input-area';
+                  inputArea.innerHTML = '<form class="chat-input" id="task-chat-form">' +
+                    '<textarea name="message" id="task-message-input" placeholder="Describe changes to the spec..." rows="2" autofocus></textarea>' +
+                    '<div class="task-chat-buttons"><button type="button" id="task-refine-btn" class="btn btn-primary">Refine</button></div>' +
+                    '</form>';
+                  busyEl.replaceWith(inputArea);
+                  // Re-bind chat input handlers
+                  rebindChatInput();
+                }
+                // Fetch any new chat messages added during refining
+                refreshChatMessages();
+              } else if (!wasRefining && nowRefining) {
+                // drafting → refining: hide chat input, show busy message
+                const inputArea = document.querySelector('.chat-input-area');
+                if (inputArea) {
+                  const busyEl = document.createElement('div');
+                  busyEl.className = 'chat-busy';
+                  busyEl.innerHTML = '<p>Claude is working on this task...' +
+                    (data.currentRunId ? ' <a href="/agent/' + data.currentRunId + '">View progress</a>' : '') + '</p>';
+                  inputArea.replaceWith(busyEl);
+                }
+              }
+              // pendingQueueChanged within drafting/refining — no reload needed
+            } else {
+              // For non-drafting/refining transitions, reload as before
+              const needsReload = (data.status === 'complete') ||
+                (data.status === 'conflict') ||
+                (currentStatus === 'conflict') ||
+                (data.status === 'drafting' && currentStatus !== 'drafting' && currentStatus !== 'refining') ||
+                (currentStatus === 'drafting' && data.status !== 'drafting' && data.status !== 'refining') ||
+                pendingQueueChanged;
+              currentStatus = data.status;
+              if (needsReload) {
+                location.reload();
+              }
+            }
+          }
+        } catch {}
+      }
+
+      setInterval(pollTaskStatus, 3000);
+
+      // Start Work button
+      const startBtn = document.getElementById('start-work-btn');
+      if (startBtn) {
+        startBtn.addEventListener('click', () => {
+          updateTask(${task.id}, 'in_progress');
+        });
+      }
+
+      // Task chat logic (drafting/refining — history always visible, input only when not refining)
+      var messagesEl = document.getElementById('task-messages');
+      var chatMessageCount = ${chatMessages.length};
+      var chatPolling = ${chatPending ? "true" : "false"};
+
+      function scrollToBottom() {
+        if (messagesEl) messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      function escapeHtml(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+      }
+
+      function showThinking() {
+        if (!messagesEl) return;
+        let indicator = document.getElementById('thinking-indicator');
+        if (!indicator) {
+          indicator = document.createElement('div');
+          indicator.id = 'thinking-indicator';
+          indicator.className = 'message message-assistant';
+          indicator.innerHTML = '<div class="message-role">Claude</div><div class="message-content"><em>Thinking...</em></div>';
+          messagesEl.appendChild(indicator);
+        }
+        scrollToBottom();
+      }
+
+      function removeThinking() {
+        const indicator = document.getElementById('thinking-indicator');
+        if (indicator) indicator.remove();
+      }
+
+      async function pollForResponse() {
+        if (chatPolling) return;
+        chatPolling = true;
+        showThinking();
+
+        const poll = async () => {
+          try {
+            const resp = await fetch('/api/tasks/' + taskId + '/chat?after=' + chatMessageCount);
+            const data = await resp.json();
+
+            if (data.messages.length > 0) {
+              removeThinking();
+              for (const msg of data.messages) {
+                const div = document.createElement('div');
+                div.className = 'message ' + (msg.role === 'user' ? 'message-user' : 'message-assistant');
+                div.innerHTML = '<div class="message-role">' + (msg.role === 'user' ? 'You' : 'Claude') + '</div><div class="message-content">' + (msg.html || msg.content) + '</div>';
+                messagesEl.appendChild(div);
+              }
+              chatMessageCount = data.total;
+              scrollToBottom();
+            }
+
+            if (data.pending) {
+              showThinking();
+              setTimeout(poll, 2000);
+            } else {
+              removeThinking();
+              chatPolling = false;
+              const btn = document.getElementById('task-refine-btn');
+              if (btn) {
+                btn.disabled = false;
+                btn.textContent = 'Refine';
+              }
+            }
+          } catch {
+            chatPolling = false;
+            removeThinking();
+            const btn = document.getElementById('task-refine-btn');
+            if (btn) {
+              btn.disabled = false;
+              btn.textContent = 'Refine';
+            }
+          }
+        };
+
+        setTimeout(poll, 2000);
+      }
+
+      async function refreshChatMessages() {
+        try {
+          const resp = await fetch('/api/tasks/' + taskId + '/chat?after=' + chatMessageCount);
+          const data = await resp.json();
+          if (data.messages.length > 0 && messagesEl) {
+            removeThinking();
+            for (const msg of data.messages) {
+              const div = document.createElement('div');
+              div.className = 'message ' + (msg.role === 'user' ? 'message-user' : 'message-assistant');
+              div.innerHTML = '<div class="message-role">' + (msg.role === 'user' ? 'You' : 'Claude') + '</div><div class="message-content">' + (msg.html || msg.content) + '</div>';
+              messagesEl.appendChild(div);
+            }
+            chatMessageCount = data.total;
+            scrollToBottom();
+          }
+        } catch {}
+      }
+
+      function rebindChatInput() {
+        const input = document.getElementById('task-message-input');
+        const refineBtn = document.getElementById('task-refine-btn');
+
+        if (input) {
+          input.addEventListener('input', () => {
+            input.style.height = 'auto';
+            input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+          });
+
+          input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              if (refineBtn) refineBtn.click();
+            }
+          });
+        }
+
+        if (refineBtn) {
+          refineBtn.addEventListener('click', async () => {
+            const inp = document.getElementById('task-message-input');
+            const message = inp ? inp.value.trim() : '';
+            if (!message || chatPolling) return;
+
+            // Add user message to DOM
+            const userDiv = document.createElement('div');
+            userDiv.className = 'message message-user';
+            userDiv.innerHTML = '<div class="message-role">You</div><div class="message-content">' + escapeHtml(message) + '</div>';
+            if (messagesEl) messagesEl.appendChild(userDiv);
+
+            inp.value = '';
+            inp.style.height = 'auto';
+            refineBtn.disabled = true;
+            refineBtn.textContent = 'Starting...';
+            scrollToBottom();
+
+            try {
+              // Save message to task conversation first
+              await fetch('/api/tasks/' + taskId + '/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message }),
+              });
+
+              // Then enqueue refine via the agent route
+              const resp = await fetch('/agent/refine-task/' + taskId, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message }),
+              });
+              if (resp.ok) {
+                // Transition will be handled by polling — just update state
+                currentStatus = 'refining';
+                lastPendingQueueItem = true;
+                // Hide input, show busy
+                const inputArea = document.querySelector('.chat-input-area');
+                if (inputArea) {
+                  const busyEl = document.createElement('div');
+                  busyEl.className = 'chat-busy';
+                  busyEl.innerHTML = '<p>Claude is working on this task...</p>';
+                  inputArea.replaceWith(busyEl);
+                }
+              } else {
+                refineBtn.disabled = false;
+                refineBtn.textContent = 'Refine';
+              }
+            } catch {
+              refineBtn.disabled = false;
+              refineBtn.textContent = 'Refine';
+            }
+          });
+        }
+      }
+
+      if (isDrafting) {
+        scrollToBottom();
+
+        // If already pending on page load, start polling
+        if (chatPolling) {
+          chatPolling = false;
+          pollForResponse();
+        }
+
+        rebindChatInput();
+      }
+    </script>`;
+    return layout("Task #" + task.id, "tasks", body);
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}