@longshot/cli 0.0.1

package/dist/views/diff.js

@@ -0,0 +1,321 @@
+import { html as diff2htmlHtml } from "diff2html";
+import { ColorSchemeType } from "diff2html/lib/types.js";
+import { marked } from "marked";
+import { layout } from "./layout.js";
+export function diffPage(diffId, diffContent, task, taskId, chatMessages = [], chatPending = false, acceptanceCriteria, agentSummary, checks) {
+    const diffHtml = diff2htmlHtml(diffContent, {
+        drawFileList: true,
+        matching: "lines",
+        outputFormat: "line-by-line",
+        colorScheme: ColorSchemeType.DARK,
+    });
+    const verifyBtn = taskId
+        ? `<a href="/task/${taskId}/verify?diffId=${diffId}" class="btn btn-verify">Verify</a>`
+        : "";
+    // Chat section — only for task diffs
+    const chatHtml = taskId
+        ? `
+      <div class="diff-chat-section">
+        <div class="task-chat">
+          <div class="messages" id="diff-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>
+          <div class="chat-input-area">
+            <form class="chat-input" id="diff-chat-form">
+              <textarea
+                name="message"
+                id="diff-message-input"
+                placeholder="Describe what needs fixing..."
+                rows="2"
+              ></textarea>
+              <div class="task-chat-buttons">
+                <button type="button" id="diff-fix-btn" class="btn btn-primary">Fix</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>`
+        : "";
+    // Acceptance criteria section
+    const criteriaHtml = acceptanceCriteria
+        ? `<details class="diff-criteria">
+        <summary>Acceptance Criteria</summary>
+        <div class="diff-criteria-content spec-content">${marked.parse(acceptanceCriteria, { async: false })}</div>
+      </details>`
+        : "";
+    // Change summary section
+    const summaryHtml = agentSummary
+        ? `<div class="diff-summary">
+        <div class="diff-summary-text"><strong>${escapeHtml(agentSummary.summary)}</strong></div>
+        ${agentSummary.filesChanged.length > 0
+            ? `<div class="diff-summary-files">${agentSummary.filesChanged.map((f) => `<span class="diff-summary-file">${escapeHtml(f)}</span>`).join("")}</div>`
+            : ""}
+        ${agentSummary.actions.length > 0
+            ? `<ul class="diff-summary-actions">${agentSummary.actions.map((a) => `<li>${escapeHtml(a)}</li>`).join("")}</ul>`
+            : ""}
+      </div>`
+        : "";
+    // Checks section
+    let checksHtml = "";
+    if (checks && (checks.testsRun || (checks.todoItems && checks.todoItems.length > 0))) {
+        const testStatusHtml = checks.testsRun
+            ? `<div class="diff-check-item">
+          <span class="diff-check-indicator ${checks.testsPassed ? "check-pass" : "check-fail"}">${checks.testsPassed ? "PASS" : "FAIL"}</span>
+          <span>Tests</span>
+        </div>`
+            : "";
+        const todoHtml = checks.todoItems && checks.todoItems.length > 0
+            ? `<div class="diff-check-todos">${checks.todoItems.map((t) => `<div class="diff-check-todo ${t.status === "completed" ? "todo-done" : ""}">
+            <span class="todo-check">${t.status === "completed" ? "&#10003;" : "&#9711;"}</span>
+            <span>${escapeHtml(t.content)}</span>
+          </div>`).join("")}</div>`
+            : "";
+        checksHtml = `<details class="diff-checks" open>
+      <summary>Checks</summary>
+      <div class="diff-checks-content">
+        ${testStatusHtml}
+        ${todoHtml}
+      </div>
+    </details>`;
+    }
+    const body = `
+    <div class="diff-container">
+      <div class="diff-header">
+        <h1>Review Changes</h1>
+        <p class="diff-task">${escapeHtml(task)}</p>
+      </div>
+      ${summaryHtml}
+      <div class="diff-actions diff-actions-top">
+        ${verifyBtn}
+        <button class="btn btn-approve" onclick="reviewDiff('${diffId}', 'approve')">Approve</button>
+        <button class="btn btn-reject" onclick="reviewDiff('${diffId}', 'reject')">Reject</button>
+      </div>
+      ${criteriaHtml}
+      ${checksHtml}
+      ${chatHtml}
+      <div class="diff-content">
+        ${diffHtml}
+      </div>
+      <div class="diff-actions diff-actions-bottom">
+        ${verifyBtn}
+        <button class="btn btn-approve" onclick="reviewDiff('${diffId}', 'approve')">Approve</button>
+        <button class="btn btn-reject" onclick="reviewDiff('${diffId}', 'reject')">Reject</button>
+      </div>
+    </div>
+    <script>
+      async function reviewDiff(id, action) {
+        const btns = document.querySelectorAll('.diff-actions .btn');
+        btns.forEach(b => { b.disabled = true; });
+
+        // Hide action bars and chat section
+        const actionBars = document.querySelectorAll('.diff-actions');
+        const chatSection = document.querySelector('.diff-chat' + '-section');
+        actionBars.forEach(el => { el.style.display = 'none'; });
+        if (chatSection) chatSection.style.display = 'none';
+
+        // Show status banner
+        const statusBanner = document.createElement('div');
+        statusBanner.className = 'agent-done';
+        statusBanner.id = 'review-status-banner';
+        statusBanner.style.cssText = 'text-align:center;padding:16px;margin:16px';
+        statusBanner.textContent = action === 'approve' ? 'Approving...' : 'Rejecting...';
+        document.querySelector('.diff-container').prepend(statusBanner);
+
+        try {
+          const res = await fetch('/diff/' + id + '/' + action, { method: 'POST' });
+          const data = await res.json();
+          if (data.ok) {
+            if (data.specUpdate) {
+              statusBanner.textContent = 'Approved \\u2014 updating spec...';
+              setTimeout(function() { window.location.href = '/tasks'; }, 1500);
+            } else {
+              window.location.href = '/chat';
+            }
+          } else {
+            // Restore everything on error
+            statusBanner.remove();
+            actionBars.forEach(el => { el.style.display = ''; });
+            if (chatSection) chatSection.style.display = '';
+            btns.forEach(b => { b.disabled = false; });
+            alert('Error: ' + (data.error || 'unknown'));
+          }
+        } catch (err) {
+          // Restore everything on network error
+          statusBanner.remove();
+          actionBars.forEach(el => { el.style.display = ''; });
+          if (chatSection) chatSection.style.display = '';
+          btns.forEach(b => { b.disabled = false; });
+          alert('Error: network failure');
+        }
+      }
+
+      ${taskId ? diffChatScript(taskId, diffId, chatMessages.length, chatPending) : ""}
+    </script>`;
+    return layout("Diff", "chat", body, `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css">`);
+}
+function diffChatScript(taskId, diffId, messageCount, chatPending) {
+    return `
+      (function() {
+        const taskId = ${taskId};
+        const diffId = '${diffId}';
+        const form = document.getElementById('diff-chat-form');
+        const input = document.getElementById('diff-message-input');
+        const messagesEl = document.getElementById('diff-messages');
+        const fixBtn = document.getElementById('diff-fix-btn');
+        let messageCount = ${messageCount};
+        let polling = ${chatPending ? "true" : "false"};
+
+        function scrollToBottom() {
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+        }
+        scrollToBottom();
+
+        function escapeHtml(str) {
+          const div = document.createElement('div');
+          div.textContent = str;
+          return div.innerHTML;
+        }
+
+        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();
+            fixBtn.click();
+          }
+        });
+
+        function showThinking() {
+          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 (polling) return;
+          polling = true;
+          showThinking();
+
+          const poll = async () => {
+            try {
+              const resp = await fetch('/api/tasks/' + taskId + '/chat?after=' + messageCount);
+              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);
+                }
+                messageCount = data.total;
+                scrollToBottom();
+              }
+
+              if (data.pending) {
+                showThinking();
+                setTimeout(poll, 2000);
+              } else {
+                removeThinking();
+                polling = false;
+                fixBtn.disabled = false;
+                fixBtn.textContent = 'Fix';
+              }
+            } catch {
+              polling = false;
+              removeThinking();
+              fixBtn.disabled = false;
+              fixBtn.textContent = 'Fix';
+            }
+          };
+
+          setTimeout(poll, 2000);
+        }
+
+        // If already pending on page load, start polling
+        if (polling) {
+          polling = false;
+          pollForResponse();
+        }
+
+        fixBtn.addEventListener('click', async () => {
+          const message = input.value.trim();
+          if (!message || polling) 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">[Fix] ' + escapeHtml(message) + '</div>';
+          messagesEl.appendChild(userDiv);
+
+          input.value = '';
+          input.style.height = 'auto';
+          fixBtn.disabled = true;
+          fixBtn.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: '[Fix] ' + message }),
+            });
+
+            // Enqueue fix via the fix endpoint
+            const resp = await fetch('/api/tasks/' + taskId + '/fix', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ message, diffId }),
+            });
+            const data = await resp.json();
+            if (data.runId) {
+              window.location.href = '/agent/' + data.runId;
+            } else if (data.ok) {
+              // Queued — go to tasks to see progress
+              window.location.href = '/tasks';
+            } else {
+              fixBtn.disabled = false;
+              fixBtn.textContent = 'Fix';
+            }
+          } catch {
+            fixBtn.disabled = false;
+            fixBtn.textContent = 'Fix';
+          }
+        });
+      })();`;
+}
+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>`;
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}

package/dist/views/history.js

@@ -0,0 +1,124 @@
+import { layout } from "./layout.js";
+const typeIcons = {
+    spec_update: "S",
+    agent_spawn: "A",
+    agent_complete: "C",
+    checkpoint: "OK",
+    rejection: "X",
+    action: "i",
+    task_created: "T",
+    task_complete: "T",
+};
+const typeColors = {
+    spec_update: "type-spec",
+    agent_spawn: "type-agent",
+    agent_complete: "type-agent",
+    checkpoint: "type-checkpoint",
+    rejection: "type-rejection",
+    action: "type-action",
+    task_created: "type-spec",
+    task_complete: "type-checkpoint",
+};
+function extractRunId(details) {
+    if (!details)
+        return null;
+    const match = details.match(/Run:\s*(\S+)/);
+    return match ? match[1] : null;
+}
+function renderEntry(entry) {
+    const time = new Date(entry.timestamp).toLocaleString();
+    const icon = typeIcons[entry.type] || "?";
+    const colorClass = typeColors[entry.type] || "";
+    const runId = extractRunId(entry.details);
+    return `<div class="history-entry">
+    <div class="history-marker ${colorClass}">${icon}</div>
+    <div class="history-body">
+      <div class="history-summary">${escapeHtml(entry.summary)}</div>
+      <div class="history-time">${time}</div>
+      ${entry.details ? `<div class="history-details">${escapeHtml(entry.details)}</div>` : ""}
+      ${runId ? `<a href="/run/${encodeURIComponent(runId)}" class="history-run-link">View run log →</a>` : ""}
+    </div>
+  </div>`;
+}
+export function historyPage(entries) {
+    const reversed = [...entries].reverse();
+    const entriesHtml = reversed.length
+        ? reversed.map(renderEntry).join("\n")
+        : '<p class="empty-state">No history yet.</p>';
+    const body = `
+    <div class="history-container">
+      <div class="history-header">
+        <h1>History</h1>
+        <button class="btn btn-small" onclick="location.reload()">Refresh</button>
+      </div>
+      <div class="history-timeline" id="history-timeline">
+        ${entriesHtml}
+      </div>
+    </div>
+    <script>
+      let historyTotal = ${entries.length};
+
+      const typeIcons = ${JSON.stringify(typeIcons)};
+      const typeColors = ${JSON.stringify(typeColors)};
+
+      function escapeHtmlClient(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+      }
+
+      function extractRunIdClient(details) {
+        if (!details) return null;
+        const match = details.match(/Run:\\s*(\\S+)/);
+        return match ? match[1] : null;
+      }
+
+      function renderEntryClient(entry) {
+        const time = new Date(entry.timestamp).toLocaleString();
+        const icon = typeIcons[entry.type] || '?';
+        const colorClass = typeColors[entry.type] || '';
+        const runId = extractRunIdClient(entry.details);
+
+        return '<div class="history-entry">' +
+          '<div class="history-marker ' + colorClass + '">' + icon + '</div>' +
+          '<div class="history-body">' +
+            '<div class="history-summary">' + escapeHtmlClient(entry.summary) + '</div>' +
+            '<div class="history-time">' + time + '</div>' +
+            (entry.details ? '<div class="history-details">' + escapeHtmlClient(entry.details) + '</div>' : '') +
+            (runId ? '<a href="/run/' + encodeURIComponent(runId) + '" class="history-run-link">View run log \\u2192</a>' : '') +
+          '</div>' +
+        '</div>';
+      }
+
+      async function pollHistory() {
+        try {
+          const resp = await fetch('/api/history');
+          if (!resp.ok) return;
+          const data = await resp.json();
+
+          if (data.total !== historyTotal) {
+            historyTotal = data.total;
+            const timeline = document.getElementById('history-timeline');
+            if (timeline) {
+              const reversed = [...data.entries].reverse();
+              if (reversed.length) {
+                timeline.innerHTML = reversed.map(renderEntryClient).join('');
+              } else {
+                timeline.innerHTML = '<p class="empty-state">No history yet.</p>';
+              }
+            }
+          }
+        } catch {}
+      }
+
+      setInterval(pollHistory, 5000);
+    </script>`;
+    return layout("History", "history", body);
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}

package/dist/views/layout.js

@@ -0,0 +1,121 @@
+import { execFileSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import * as projects from "../projects.js";
+function getCurrentBranchSync() {
+    try {
+        const cwd = projects.getProjectRoot();
+        if (!existsSync(join(cwd, ".git")))
+            return "";
+        const result = execFileSync("git", ["rev-parse", "--abbrev-ref", "HEAD"], {
+            cwd,
+            encoding: "utf-8",
+            timeout: 2000,
+        });
+        return result.trim();
+    }
+    catch {
+        return "";
+    }
+}
+export function layout(title, activeTab, body, extraHead) {
+    const isMulti = projects.isMultiProject();
+    const currentProject = projects.getCurrentProjectName();
+    const allProjects = isMulti ? projects.readProjects() : [];
+    const currentBranch = getCurrentBranchSync();
+    const projectSelector = isMulti
+        ? `<div class="project-selector">
+        <button class="project-selector-btn" onclick="document.getElementById('project-dropdown').classList.toggle('open')">${escapeHtml(currentProject || "No project")}</button>
+        <div id="project-dropdown" class="project-dropdown">
+          ${allProjects.map((p) => `<button class="project-option${p.name === currentProject ? " active" : ""}" onclick="switchProject('${escapeAttr(p.name)}')">${escapeHtml(p.name)}</button>`).join("")}
+          <div class="project-dropdown-divider"></div>
+          <button class="project-option project-option-action" onclick="showNewProjectForm()">+ New Project</button>
+          <button class="project-option project-option-action" onclick="showAdoptForm()">+ Adopt Existing</button>
+          <div id="new-project-form" class="project-inline-form" style="display:none">
+            <input type="text" id="new-project-name" placeholder="project-name" class="project-inline-input" />
+            <button onclick="createProject()" class="btn-small btn-primary">Create</button>
+          </div>
+          <div id="adopt-form" class="project-inline-form" style="display:none">
+            <div id="adopt-list" class="adopt-list">Loading...</div>
+          </div>
+        </div>
+      </div>
+      <script>
+        function switchProject(name) {
+          fetch('/api/projects/current', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})})
+            .then(r => { if(r.ok) location.reload(); });
+        }
+        function showNewProjectForm() {
+          document.getElementById('new-project-form').style.display = 'flex';
+          document.getElementById('adopt-form').style.display = 'none';
+          document.getElementById('new-project-name').focus();
+        }
+        function createProject() {
+          const name = document.getElementById('new-project-name').value.trim();
+          if (!name) return;
+          fetch('/api/projects', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})})
+            .then(r => { if(r.ok) location.reload(); else r.json().then(d => alert(d.error)); });
+        }
+        function showAdoptForm() {
+          document.getElementById('adopt-form').style.display = 'block';
+          document.getElementById('new-project-form').style.display = 'none';
+          fetch('/api/projects/available').then(r=>r.json()).then(d => {
+            const list = document.getElementById('adopt-list');
+            if (!d.available || d.available.length === 0) {
+              list.textContent = 'No available subdirectories';
+              return;
+            }
+            list.innerHTML = d.available.map(name =>
+              '<button class="project-option" onclick="adoptProject(\\'' + name + '\\')">' + name + '</button>'
+            ).join('');
+          });
+        }
+        function adoptProject(name) {
+          fetch('/api/projects/adopt', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})})
+            .then(r => { if(r.ok) location.reload(); else r.json().then(d => alert(d.error)); });
+        }
+        document.addEventListener('click', function(e) {
+          const dd = document.getElementById('project-dropdown');
+          const btn = document.querySelector('.project-selector-btn');
+          if (dd && !dd.contains(e.target) && e.target !== btn) {
+            dd.classList.remove('open');
+          }
+        });
+      </script>`
+        : "";
+    const isDefaultBranch = !currentBranch || currentBranch === "master" || currentBranch === "main";
+    const branchIndicator = currentBranch
+        ? `<a href="/branches" class="branch-indicator${isDefaultBranch ? "" : " branch-indicator-feature"}">${escapeHtml(currentBranch)}</a>`
+        : "";
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title} - longshot</title>
+  ${extraHead || ""}
+  <link rel="stylesheet" href="/style.css">
+  <script src="https://unpkg.com/marked@17.0.2/marked.min.js"></script>
+</head>
+<body>
+  <nav class="nav">
+    ${projectSelector}
+    <a href="/chat" class="nav-tab${activeTab === "chat" ? " active" : ""}">Chat</a>
+    <a href="/tasks" class="nav-tab${activeTab === "tasks" ? " active" : ""}">Tasks</a>
+    <a href="/services" class="nav-tab${activeTab === "services" ? " active" : ""}">Svc</a>
+    <a href="/spec" class="nav-tab${activeTab === "spec" ? " active" : ""}">Spec</a>
+    <a href="/history" class="nav-tab${activeTab === "history" ? " active" : ""}">History</a>
+  </nav>
+  ${branchIndicator}
+  <main class="main${branchIndicator ? " main-with-branch" : ""}">
+    ${body}
+  </main>
+</body>
+</html>`;
+}
+function escapeHtml(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttr(s) {
+    return s.replace(/'/g, "\\'").replace(/"/g, "&quot;");
+}

package/dist/views/run.js

@@ -0,0 +1,92 @@
+import { layout } from "./layout.js";
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+function truncate(str, max) {
+    if (str.length <= max)
+        return str;
+    return str.slice(0, max) + "…";
+}
+function renderEvent(event) {
+    const time = new Date(event.ts).toLocaleTimeString();
+    switch (event.type) {
+        case "user_message":
+            return `<div class="run-event run-event-user">
+        <div class="run-event-marker">U</div>
+        <div class="run-event-body">
+          <div class="run-event-label">User message <span class="run-event-time">${time}</span></div>
+          <div class="run-event-content">${escapeHtml(truncate(event.content || "", 500))}</div>
+        </div>
+      </div>`;
+        case "text":
+            return `<div class="run-event run-event-text">
+        <div class="run-event-marker">T</div>
+        <div class="run-event-body">
+          <div class="run-event-label">Text <span class="run-event-time">${time}</span></div>
+          <div class="run-event-content">${escapeHtml(truncate(event.content || "", 500))}</div>
+        </div>
+      </div>`;
+        case "tool_use":
+            return `<div class="run-event run-event-tool-use">
+        <div class="run-event-marker">⚙</div>
+        <div class="run-event-body">
+          <div class="run-event-label">Tool: ${escapeHtml(event.name || "unknown")} <span class="run-event-time">${time}</span></div>
+          ${event.input ? `<details class="run-event-details"><summary>Input</summary><pre>${escapeHtml(JSON.stringify(event.input, null, 2).slice(0, 2000))}</pre></details>` : ""}
+        </div>
+      </div>`;
+        case "tool_result":
+            return `<div class="run-event run-event-tool-result">
+        <div class="run-event-marker">✓</div>
+        <div class="run-event-body">
+          <div class="run-event-label">Result <span class="run-event-time">${time}</span></div>
+          ${event.content ? `<details class="run-event-details"><summary>Output</summary><pre>${escapeHtml(truncate(event.content, 2000))}</pre></details>` : ""}
+        </div>
+      </div>`;
+        case "error":
+            return `<div class="run-event run-event-error">
+        <div class="run-event-marker">!</div>
+        <div class="run-event-body">
+          <div class="run-event-label">Error <span class="run-event-time">${time}</span></div>
+          <div class="run-event-content">${escapeHtml(event.message || "")}</div>
+        </div>
+      </div>`;
+        case "done":
+            return `<div class="run-event run-event-done">
+        <div class="run-event-marker">●</div>
+        <div class="run-event-body">
+          <div class="run-event-label">Done <span class="run-event-time">${time}</span></div>
+          <div class="run-event-content">Exit code: ${event.exitCode ?? "unknown"}</div>
+        </div>
+      </div>`;
+        default:
+            return `<div class="run-event">
+        <div class="run-event-marker">?</div>
+        <div class="run-event-body">
+          <div class="run-event-label">${escapeHtml(event.type)} <span class="run-event-time">${time}</span></div>
+        </div>
+      </div>`;
+    }
+}
+export function runPage(runId, events) {
+    const eventsHtml = events.length
+        ? events.map(renderEvent).join("\n")
+        : '<p class="empty-state">No events recorded.</p>';
+    const body = `
+    <div class="run-container">
+      <div class="run-header">
+        <h1>Run Log</h1>
+        <div class="run-id">${escapeHtml(runId)}</div>
+      </div>
+      <div class="run-timeline">
+        ${eventsHtml}
+      </div>
+      <div class="run-footer">
+        <a href="/history" class="btn btn-small">← History</a>
+      </div>
+    </div>`;
+    return layout("Run", "history", body);
+}