agent-control-plane 0.7.1 → 0.8.0

package/tools/dashboard/app.js

@@ -6,6 +6,10 @@ const profilesNode = document.querySelector("#profiles");
 const seenAlertIds = new Set();
 let notificationPermissionRequested = false;
 const THEME_STORAGE_KEY = "acp-dashboard-theme";
+const ROWS_PER_PAGE = 10;
+
+// Pagination state: { [tableId]: { page: number } }
+window._acpPagination = {};
 
 function systemPrefersDark() {
   return typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -72,6 +76,14 @@ function relativeTime(input) {
   return seconds >= 0 ? `${absolute}s ago` : `in ${absolute}s`;
 }
 
+function formatCompactDate(input) {
+  if (!input) return "n/a";
+  const d = new Date(input);
+  if (Number.isNaN(d.getTime())) return input;
+  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+  return `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+}
+
 function formatDuration(seconds) {
   if (!seconds && seconds !== 0) return "n/a";
   const absSeconds = Math.abs(seconds);
@@ -107,7 +119,7 @@ function statusClass(status) {
 }
 
 function renderLifecycle(row) {
-  const note = row.result_only_completion === "yes" ? `<div class="muted">Recovered from result file</div>` : "";
+  const note = row.result_only_completion === "yes" ? `<div class="muted">Recovered</div>` : "";
   return `<span class="status-pill ${statusClass(row.lifecycle_status || row.status)}">${row.lifecycle_status || row.status || "UNKNOWN"}</span>${note}`;
 }
 
@@ -172,12 +184,74 @@ function renderOverview(snapshot) {
     .join("");
 }
 
-function renderTable(columns, rows, emptyMessage = "No data right now.") {
+// Build windowed pagination: max 5 page buttons with ellipsis
+function buildWindowedPages(current, total) {
+  const pages = [];
+  const maxVisible = 5;
+  if (total <= maxVisible) {
+    for (let i = 1; i <= total; i++) pages.push(i);
+    return pages;
+  }
+  // Always show first, last, and surrounding pages
+  const pagesSet = new Set();
+  pagesSet.add(1);
+  pagesSet.add(total);
+  for (let i = Math.max(1, current - 1); i <= Math.min(total, current + 1); i++) {
+    pagesSet.add(i);
+  }
+  const sorted = Array.from(pagesSet).sort((a, b) => a - b);
+  // Add ellipsis markers
+  const result = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (p - prev > 1) result.push("...");
+    result.push(p);
+    prev = p;
+  }
+  return result;
+}
+
+function renderPagination(tableId, currentPage, totalPages, totalRows) {
+  if (totalPages <= 1) return "";
+  const start = (currentPage - 1) * ROWS_PER_PAGE + 1;
+  const end = Math.min(currentPage * ROWS_PER_PAGE, totalRows);
+  const pages = buildWindowedPages(currentPage, totalPages);
+  const buttons = pages
+    .map((p) => {
+      if (p === "...") return `<span class="pagination-ellipsis">…</span>`;
+      return `<button class="${p === currentPage ? "active" : ""}" onclick="window._acpGoToPage('${tableId}',${p})">${p}</button>`;
+    })
+    .join("");
+  return `
+    <div class="pagination">
+      <span class="pagination-info">Showing ${start}-${end} of ${totalRows}</span>
+      <div class="pagination-controls">
+        <button ${currentPage <= 1 ? "disabled" : ""} onclick="window._acpGoToPage('${tableId}',${currentPage - 1})">‹</button>
+        ${buttons}
+        <button ${currentPage >= totalPages ? "disabled" : ""} onclick="window._acpGoToPage('${tableId}',${currentPage + 1})">›</button>
+      </div>
+    </div>`;
+}
+
+window._acpGoToPage = function(tableId, page) {
+  window._acpPagination[tableId] = { page };
+  rerenderAll();
+};
+
+function renderTableWithPagination(tableId, columns, rows, emptyMessage = "No data right now.") {
   if (!rows.length) {
     return `<div class="empty-state">${emptyMessage}</div>`;
   }
+  const state = window._acpPagination[tableId] || { page: 1 };
+  let { page } = state;
+  const totalPages = Math.ceil(rows.length / ROWS_PER_PAGE);
+  if (page < 1) page = 1;
+  if (page > totalPages) page = totalPages;
+  window._acpPagination[tableId] = { page };
+  const start = (page - 1) * ROWS_PER_PAGE;
+  const pageRows = rows.slice(start, start + ROWS_PER_PAGE);
   const headers = columns.map((column) => `<th>${column.label}</th>`).join("");
-  const body = rows
+  const body = pageRows
     .map((row) => {
       const cells = columns
         .map((column) => `<td>${column.render ? column.render(row) : row[column.key] ?? ""}</td>`)
@@ -185,7 +259,8 @@ function renderTable(columns, rows, emptyMessage = "No data right now.") {
       return `<tr>${cells}</tr>`;
     })
     .join("");
-  return `<div class="table-wrap"><table><thead><tr>${headers}</tr></thead><tbody>${body}</tbody></table></div>`;
+  const paginationHtml = renderPagination(tableId, page, totalPages, rows.length);
+  return `<div class="table-wrap"><table><thead><tr>${headers}</tr></thead><tbody>${body}</tbody></table></div>${paginationHtml}`;
 }
 
 function renderAlerts(alerts) {
@@ -207,8 +282,8 @@ function renderAlerts(alerts) {
               </div>
               <p>${alert.message}</p>
               <div class="alert-meta">
-                <span>${alert.reset_at ? `Reset: ${alert.reset_at}` : "Reset: n/a"}</span>
-                <span>${alert.updated_at ? `${relativeTime(alert.updated_at)} · ${alert.updated_at}` : "updated n/a"}</span>
+                <span>${alert.reset_at ? `Reset: ${formatCompactDate(alert.reset_at)}` : "Reset: n/a"}</span>
+                <span>${alert.updated_at ? `${relativeTime(alert.updated_at)} · ${formatCompactDate(alert.updated_at)}` : "updated n/a"}</span>
               </div>
             </article>
           `,
@@ -225,13 +300,14 @@ function renderCodexRotation(rotation) {
   const candidates = (rotation.candidate_labels || []).length ? rotation.candidate_labels.join(", ") : "n/a";
   const ready = (rotation.ready_candidates || []).length ? rotation.ready_candidates.join(", ") : "none";
   const nextRetry = rotation.next_retry_at
-    ? `${rotation.next_retry_label || "n/a"} · ${relativeTime(rotation.next_retry_at)}<div class="muted">${rotation.next_retry_at}</div>`
+    ? `${rotation.next_retry_label || "n/a"} · ${relativeTime(rotation.next_retry_at)}<div class="muted">${formatCompactDate(rotation.next_retry_at)}</div>`
     : "n/a";
   const lastSwitch = rotation.last_switch_label
     ? `${rotation.last_switch_label}${rotation.last_switch_reason ? ` · ${rotation.last_switch_reason}` : ""}`
     : "n/a";
 
-  return renderTable(
+  return renderTableWithPagination(
+    "codex-rotation",
     [
       { label: "Current", render: () => `<div class="mono">${rotation.active_label}</div>` },
       { label: "Decision", render: () => `<span class="status-pill ${statusClass(rotation.switch_decision || "unknown")}">${rotation.switch_decision || "unknown"}</span>` },
@@ -304,7 +380,8 @@ function renderProfile(profile) {
     return true;
   });
 
-  const runsTable = renderTable(
+  const runsTable = renderTableWithPagination(
+    `runs-${profile.id}`,
     [
       { label: "Session", render: (row) => `<div class="mono">${row.session}</div>` },
       { label: "Task", render: (row) => `${row.task_kind || "n/a"} ${row.task_id || ""}`.trim() },
@@ -312,7 +389,7 @@ function renderProfile(profile) {
       { label: "Worker", key: "coding_worker" },
       { label: "Provider", render: (row) => row.provider_model || "n/a" },
       { label: "Result", render: renderResult },
-      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${row.updated_at}</div>` : "n/a" },
+      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${formatCompactDate(row.updated_at)}</div>` : "n/a" },
     ],
     filteredRuns,
     "No active run directories for this profile.",
@@ -334,20 +411,22 @@ function renderProfile(profile) {
     return true;
   });
 
-  const recentHistoryTable = renderTable(
+  const recentHistoryTable = renderTableWithPagination(
+    `history-${profile.id}`,
     [
       { label: "Session", render: (row) => `<div class="mono">${row.session}</div>` },
       { label: "Task", render: (row) => `${row.task_kind || "n/a"} ${row.task_id || ""}`.trim() },
       { label: "Lifecycle", render: renderLifecycle },
       { label: "Worker", key: "coding_worker" },
       { label: "Result", render: renderResult },
-      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${row.updated_at}</div>` : "n/a" },
+      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${formatCompactDate(row.updated_at)}</div>` : "n/a" },
     ],
     filteredHistory,
     "No recently archived runs.",
   );
 
-  const controllerTable = renderTable(
+  const controllerTable = renderTableWithPagination(
+    `controllers-${profile.id}`,
     [
       { label: "Issue", key: "issue_id" },
       { label: "State", render: renderControllerState },
@@ -356,39 +435,42 @@ function renderProfile(profile) {
       { label: "Provider", render: (row) => `${row.provider_backend || "n/a"} ${row.provider_model || ""}`.trim() },
       { label: "Failover", render: (row) => `${row.provider_failover_count} failovers / ${row.provider_switch_count} switches` },
       { label: "Wait", render: (row) => `${row.provider_wait_count} waits / ${row.provider_wait_total_seconds}s` },
-      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${row.updated_at}</div>` : "n/a" },
+      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${formatCompactDate(row.updated_at)}</div>` : "n/a" },
     ],
     profile.resident_controllers,
     "No resident controllers recorded for this profile.",
   );
 
-  const retryTable = renderTable(
+  const retryTable = renderTableWithPagination(
+    `retries-${profile.id}`,
     [
       { label: "Issue", key: "issue_id" },
       { label: "Status", render: (row) => `<span class="status-pill ${row.ready ? "" : "waiting-provider"}">${row.ready ? "ready" : "retrying"}</span>` },
       { label: "Reason", render: (row) => row.last_reason || "n/a" },
       { label: "Attempts", key: "attempts" },
-      { label: "Next attempt", render: (row) => row.next_attempt_at ? `${relativeTime(row.next_attempt_at)}<div class="muted">${row.next_attempt_at}</div>` : "n/a" },
+      { label: "Next attempt", render: (row) => row.next_attempt_at ? `${relativeTime(row.next_attempt_at)}<div class="muted">${formatCompactDate(row.next_attempt_at)}</div>` : "n/a" },
       { label: "Time Remaining", render: (row) => row.next_attempt_at ? timeRemaining(row.next_attempt_at) : "n/a" },
     ],
     profile.issue_retries || [],
     "No issue retries recorded.",
   );
 
-  const prRetryTable = renderTable(
+  const prRetryTable = renderTableWithPagination(
+    `pr-retries-${profile.id}`,
     [
       { label: "PR", key: "pr_number" },
       { label: "Status", render: (row) => `<span class="status-pill ${row.ready ? "" : "waiting-provider"}">${row.ready ? "ready" : "retrying"}</span>` },
       { label: "Reason", render: (row) => row.last_reason || "n/a" },
       { label: "Attempts", key: "attempts" },
-      { label: "Next attempt", render: (row) => row.next_attempt_at ? `${relativeTime(row.next_attempt_at)}<div class="muted">${row.next_attempt_at}</div>` : "n/a" },
+      { label: "Next attempt", render: (row) => row.next_attempt_at ? `${relativeTime(row.next_attempt_at)}<div class="muted">${formatCompactDate(row.next_attempt_at)}</div>` : "n/a" },
       { label: "Time Remaining", render: (row) => row.next_attempt_at ? timeRemaining(row.next_attempt_at) : "n/a" },
     ],
     profile.pr_retries || [],
     "No PR retries recorded.",
   );
 
-  const workerTable = renderTable(
+  const workerTable = renderTableWithPagination(
+    `workers-${profile.id}`,
     [
       { label: "Key", render: (row) => `<div class="mono">${row.key}</div>` },
       { label: "Scope", key: "scope" },
@@ -397,61 +479,66 @@ function renderProfile(profile) {
       { label: "Lane", render: (row) => `${row.resident_lane_kind || "n/a"} / ${row.resident_lane_value || "n/a"}` },
       { label: "Tasks", key: "task_count" },
       { label: "Last status", render: (row) => row.last_status || "n/a" },
-      { label: "Last started", render: (row) => row.last_started_at ? `${relativeTime(row.last_started_at)}<div class="muted">${row.last_started_at}</div>` : "n/a" },
+      { label: "Last started", render: (row) => row.last_started_at ? `${relativeTime(row.last_started_at)}<div class="muted">${formatCompactDate(row.last_started_at)}</div>` : "n/a" },
     ],
     profile.resident_workers,
     "No resident worker metadata yet.",
   );
 
-  const cooldownTable = renderTable(
+  const cooldownTable = renderTableWithPagination(
+    `cooldowns-${profile.id}`,
     [
       { label: "Provider key", render: (row) => `<div class="mono">${row.provider_key}</div>` },
       { label: "State", render: (row) => `<span class="status-pill ${row.active ? "waiting-provider" : ""}">${row.active ? "cooldown" : "expired"}</span>` },
       { label: "Reason", render: (row) => row.last_reason || "n/a" },
       { label: "Attempts", key: "attempts" },
-      { label: "Next attempt", render: (row) => row.next_attempt_at ? `${relativeTime(row.next_attempt_at)}<div class="muted">${row.next_attempt_at}</div>` : "n/a" },
+      { label: "Next attempt", render: (row) => row.next_attempt_at ? `${relativeTime(row.next_attempt_at)}<div class="muted">${formatCompactDate(row.next_attempt_at)}</div>` : "n/a" },
       { label: "Time Remaining", render: (row) => row.next_attempt_at ? timeRemaining(row.next_attempt_at) : "n/a" },
     ],
     profile.provider_cooldowns,
     "No provider cooldowns recorded.",
   );
 
-  const scheduledTable = renderTable(
+  const scheduledTable = renderTableWithPagination(
+    `scheduled-${profile.id}`,
     [
       { label: "Issue", key: "issue_id" },
       { label: "Interval", render: (row) => `${row.interval_seconds}s` },
-      { label: "Next due", render: (row) => row.next_due_at ? `${relativeTime(row.next_due_at)}<div class="muted">${row.next_due_at}</div>` : "n/a" },
+      { label: "Next due", render: (row) => row.next_due_at ? `${relativeTime(row.next_due_at)}<div class="muted">${formatCompactDate(row.next_due_at)}</div>` : "n/a" },
       { label: "Time Remaining", render: (row) => row.next_due_at ? timeRemaining(row.next_due_at) : "n/a" },
-      { label: "Last started", render: (row) => row.last_started_at ? `${relativeTime(row.last_started_at)}<div class="muted">${row.last_started_at}</div>` : "n/a" },
+      { label: "Last started", render: (row) => row.last_started_at ? `${relativeTime(row.last_started_at)}<div class="muted">${formatCompactDate(row.last_started_at)}</div>` : "n/a" },
     ],
     profile.scheduled_issues,
     "No scheduled issue state recorded.",
   );
 
-  const queueTable = renderTable(
+  const queueTable = renderTableWithPagination(
+    `queue-${profile.id}`,
     [
       { label: "Issue", key: "issue_id" },
       { label: "Session", render: (row) => row.session ? `<div class="mono">${row.session}</div>` : "n/a" },
       { label: "Queued by", key: "queued_by" },
-      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${row.updated_at}</div>` : "n/a" },
+      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${formatCompactDate(row.updated_at)}</div>` : "n/a" },
     ],
     profile.issue_queue.pending,
     "No pending leased issues.",
   );
 
-  const claimsTable = renderTable(
+  const claimsTable = renderTableWithPagination(
+    `claims-${profile.id}`,
     [
       { label: "Issue", key: "issue_id" },
       { label: "Session", render: (row) => row.session ? `<div class="mono">${row.session}</div>` : "n/a" },
       { label: "Claimed by", key: "claimer" },
-      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${row.updated_at}</div>` : "n/a" },
+      { label: "Updated", render: (row) => row.updated_at ? `${relativeTime(row.updated_at)}<div class="muted">${formatCompactDate(row.updated_at)}</div>` : "n/a" },
     ],
     profile.issue_queue.claims || [],
     "No claimed issues.",
   );
 
   const githubOutbox = profile.github_outbox || { counts: {}, pending: [] };
-  const githubOutboxTable = renderTable(
+  const githubOutboxTable = renderTableWithPagination(
+    `github-outbox-${profile.id}`,
     [
       { label: "Type", render: (row) => row.type || "n/a" },
       { label: "Target", render: (row) => `${row.kind || row.type || "write"} #${row.number || "?"}` },
@@ -464,7 +551,7 @@ function renderProfile(profile) {
           return row.body_preview || "n/a";
         },
       },
-      { label: "Created", render: (row) => row.created_at ? `${relativeTime(row.created_at)}<div class="muted">${row.created_at}</div>` : "n/a" },
+      { label: "Created", render: (row) => row.created_at ? `${relativeTime(row.created_at)}<div class="muted">${formatCompactDate(row.created_at)}</div>` : "n/a" },
     ],
     githubOutbox.pending || [],
     "No pending GitHub write intents.",
@@ -556,9 +643,9 @@ function renderProfile(profile) {
           <h3>Troubleshooting</h3>
           <p class="panel-subtitle">Run diagnostics or debugging tools against this live profile.</p>
           <div class="action-bar">
-            <button class="action-btn" onclick="runDoctor('${profile.id}')">Run Doctor</button>
-            <button class="action-btn" onclick="exportProfile('${profile.id}')">Export Profile</button>
-            <button class="action-btn" onclick="document.getElementById('import-file-${profile.id}').click()">Import Profile</button>
+            <button class="action-btn" onclick="runDoctor('${profile.id}')">🔧 Run Doctor</button>
+            <button class="action-btn" onclick="exportProfile('${profile.id}')">📤 Export</button>
+            <button class="action-btn" onclick="document.getElementById('import-file-${profile.id}').click()">📥 Import</button>
             <input type="file" id="import-file-${profile.id}" style="display:none" accept=".json" onchange="importProfile('${profile.id}', this)">
             <span id="doctor-status-${profile.id}"></span>
           </div>
@@ -639,7 +726,7 @@ async function loadSnapshot() {
 }
 
 function renderFromSnapshot(snapshot) {
-  generatedAtNode.textContent = `Snapshot: ${snapshot.generated_at}`;
+  generatedAtNode.textContent = `Snapshot: ${formatCompactDate(snapshot.generated_at)}`;
   renderOverview(snapshot);
   profilesNode.innerHTML = snapshot.profiles.map(renderProfile).join("");
 }
@@ -716,7 +803,6 @@ async function importProfile(profileId, inputEl) {
     const result = await response.json();
     if (response.ok) {
       alert(`Profile ${profileId} imported successfully!`);
-      // Refresh the page to show imported profile
       setTimeout(() => window.location.reload(), 1000);
     } else {
       alert(`Import failed: ${result.error || response.status}`);
@@ -750,9 +836,14 @@ function connectWebSocket() {
     console.log("ACP Dashboard: WebSocket connected");
   };
 
-  ws.onmessage = (event) => {
+  ws.onmessage = async (event) => {
     try {
-      const snapshot = JSON.parse(event.data);
+      let data = event.data;
+      // Handle Blob (binary) or string
+      if (data instanceof Blob) {
+        data = await data.text();
+      }
+      const snapshot = JSON.parse(data);
       window._acpSnapshot = snapshot;
       renderFromSnapshot(snapshot);
       maybeNotifyAlerts(snapshot);