cc-agent-ui 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc-agent-ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Live canvas UI for cc-agent jobs — infinite canvas, streaming output, file browser",
   "type": "module",
   "repository": {

package/public/index.html

@@ -240,13 +240,48 @@ body {
   position: absolute;
   top: 0; left: 0;
   transform-origin: 0 0;
-  display: grid;
-  grid-template-columns: repeat(var(--cols, 3), 460px);
-  gap: 14px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 18px;
   padding: 24px;
   width: max-content;
 }
 
+/* ── Repo Column ──────────────────────────────────────────────────────── */
+.repo-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 460px;
+  flex-shrink: 0;
+}
+
+.col-header {
+  padding: 8px 12px;
+  background: rgba(0,0,0,0.35);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.col-repo-icon { color: var(--dimmer); font-size: 12px; }
+.col-repo-name {
+  font-size: 11px; font-weight: 600; color: var(--blue);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  flex: 1;
+}
+.col-counts { font-size: 9px; color: var(--dim); flex-shrink: 0; }
+.col-counts.live { color: var(--cyan); }
+
+.col-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 /* ── Terminal Card ────────────────────────────────────────────────────── */
 .tcard {
   width: 460px;
@@ -293,7 +328,9 @@ body {
   border-bottom: 1px solid var(--border);
   background: rgba(0,0,0,0.2);
   flex-shrink: 0;
+  cursor: pointer;
 }
+.card-hdr:hover { background: rgba(255,255,255,0.04); }
 
 .card-num {
   font-size: 10px;
@@ -506,6 +543,99 @@ body {
   border-radius: 4px;
 }
 
+/* ── Job Detail Panel ────────────────────────────────────────────────────── */
+#jobpanel {
+  position: fixed;
+  top: 40px; right: 0; bottom: 0;
+  width: 600px;
+  background: var(--sidebar-bg);
+  border-left: 1px solid var(--border-hi);
+  display: flex;
+  flex-direction: column;
+  z-index: 600;
+  transform: translateX(100%);
+  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
+}
+#jobpanel.open { transform: translateX(0); }
+#jobpanel.open ~ #filebrowser { right: 600px; }
+
+#jp-topbar {
+  display: flex; align-items: center;
+  padding: 0 14px; height: 44px;
+  border-bottom: 1px solid var(--border);
+  gap: 10px; flex-shrink: 0;
+}
+#jp-title {
+  flex: 1; font-size: 11px; font-weight: 600;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+#jp-close {
+  background: transparent; border: none;
+  color: var(--dim); font-size: 16px; cursor: pointer;
+  padding: 0 4px; line-height: 1; font-family: var(--font);
+}
+#jp-close:hover { color: var(--text); }
+
+#jp-meta {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  display: flex; flex-wrap: wrap; gap: 8px;
+  flex-shrink: 0;
+}
+.jp-badge {
+  font-size: 9px; padding: 3px 8px; border-radius: 3px;
+  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
+}
+.jp-meta-row {
+  width: 100%; font-size: 10px; color: var(--dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.jp-meta-row span { color: var(--text); }
+
+#jp-actions {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  display: flex; gap: 8px; flex-shrink: 0;
+  flex-wrap: wrap;
+}
+.jp-btn {
+  font-family: var(--font); font-size: 10px;
+  padding: 5px 14px; border-radius: 4px; cursor: pointer;
+  border: 1px solid var(--border); background: transparent;
+  color: var(--text); transition: all 0.15s;
+  font-weight: 600; letter-spacing: 0.04em;
+}
+.jp-btn:hover { border-color: var(--border-hi); background: rgba(255,255,255,0.04); }
+.jp-btn.approve { border-color: rgba(152,195,121,0.5); color: var(--green); }
+.jp-btn.approve:hover { background: rgba(152,195,121,0.12); }
+.jp-btn.cancel  { border-color: rgba(224,108,117,0.5); color: var(--red); }
+.jp-btn.cancel:hover  { background: rgba(224,108,117,0.12); }
+.jp-btn.wake    { border-color: rgba(229,192,123,0.5); color: var(--yellow); }
+.jp-btn.wake:hover    { background: rgba(229,192,123,0.12); }
+.jp-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
+#jp-log {
+  flex: 1; overflow-y: auto;
+  padding: 10px 14px;
+  font-size: 11px; line-height: 1.65;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+  background: var(--card-body);
+}
+#jp-log::-webkit-scrollbar { width: 4px; }
+#jp-log::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }
+
+#jp-task {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  font-size: 10px; color: var(--dim);
+  max-height: 100px; overflow-y: auto;
+  flex-shrink: 0;
+  white-space: pre-wrap; word-break: break-word;
+  line-height: 1.6;
+}
+#jp-task strong { color: var(--text); display: block; margin-bottom: 4px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
+
 /* Clickable file paths in terminal */
 .fp-link {
   color: var(--orange);
@@ -583,6 +713,18 @@ body {
 
 </div>
 
+<!-- Job Detail Panel -->
+<div id="jobpanel">
+  <div id="jp-topbar">
+    <span id="jp-title">—</span>
+    <button id="jp-close" onclick="jpClose()">✕</button>
+  </div>
+  <div id="jp-meta"></div>
+  <div id="jp-task"></div>
+  <div id="jp-actions"></div>
+  <div id="jp-log"></div>
+</div>
+
 <!-- File Browser Panel -->
 <div id="filebrowser">
   <div id="fb-topbar">
@@ -595,7 +737,8 @@ body {
 
 <script>
 // ── State ──────────────────────────────────────────────────────────────────
-const jobs = {};          // id → { job, card, logEl, lineCount }
+const jobs = {};          // id → { job, card, logEl, n }
+const cols = {};          // repoKey → { el, cardsEl }
 let filterMode = 'all';
 let jobCounter = 0;
 let scale = 1, ox = 40, oy = 40;
@@ -816,14 +959,14 @@ function focusCard(id) {
     applyFilter();
   }
 
-  // Use actual DOM layout positions (accurate regardless of grid index math)
-  const cardX = card.offsetLeft;
-  const cardY = card.offsetTop;
+  // Walk offsetParent chain up to inner for accurate canvas coordinates
+  let cx = 0, cy = 0, el = card;
+  while (el && el !== inner) { cx += el.offsetLeft; cy += el.offsetTop; el = el.offsetParent; }
   const cardW = card.offsetWidth  || 460;
   const cardH = card.offsetHeight || 370;
   const vw = viewport.clientWidth, vh = viewport.clientHeight;
-  ox = vw/2 - (cardX + cardW/2) * scale;
-  oy = vh/2 - (cardY + cardH/2) * scale;
+  ox = vw/2 - (cx + cardW/2) * scale;
+  oy = vh/2 - (cy + cardH/2) * scale;
   applyTransform();
 
   // Scroll terminal to bottom
@@ -856,6 +999,11 @@ function applyFilter() {
     if (item) item.style.display = show ? '' : 'none';
     if (card) card.style.display = show ? '' : 'none';
   }
+  // Hide columns with no visible cards
+  for (const [key, col] of Object.entries(cols)) {
+    const hasVisible = [...col.cardsEl.children].some(c => c.style.display !== 'none');
+    col.el.style.display = hasVisible ? '' : 'none';
+  }
 }
 
 document.querySelectorAll('.fbtn').forEach(btn => {
@@ -867,34 +1015,95 @@ document.querySelectorAll('.fbtn').forEach(btn => {
   });
 });
 
-// ── Handle snapshot (initial load) ────────────────────────────────────────
-function handleSnapshot(data) {
-  // Sort: running first, then pending, then recent done/failed
-  const sorted = [...data.jobs].sort((a, b) => {
-    const order = { running:0, cloning:1, pending_approval:2, failed:3, done:4, cancelled:5 };
-    return (order[a.status]??9) - (order[b.status]??9) ||
-           new Date(b.startedAt||0) - new Date(a.startedAt||0);
+// ── Column helpers ─────────────────────────────────────────────────────────
+function repoKey(job) {
+  return shortRepo(job.repoUrl) || 'local';
+}
+
+function getOrCreateCol(key) {
+  if (cols[key]) return cols[key];
+  const el = document.createElement('div');
+  el.className = 'repo-col';
+  el.id = `col-${key.replace(/[^a-z0-9]/gi, '-')}`;
+  el.innerHTML = `
+    <div class="col-header">
+      <span class="col-repo-icon">⎇</span>
+      <span class="col-repo-name" title="${escHtml(key)}">${escHtml(key)}</span>
+      <span class="col-counts"></span>
+    </div>
+    <div class="col-cards"></div>
+  `;
+  cols[key] = { el, cardsEl: el.querySelector('.col-cards') };
+  inner.appendChild(el);
+  return cols[key];
+}
+
+function insertCardInColumn(key, card, job) {
+  const { cardsEl } = cols[key];
+  const t = new Date(job.startedAt || 0).getTime();
+  for (const sib of cardsEl.children) {
+    const sibJob = jobs[sib.id.replace('card-', '')]?.job;
+    if (t >= new Date(sibJob?.startedAt || 0).getTime()) {
+      cardsEl.insertBefore(card, sib);
+      return;
+    }
+  }
+  cardsEl.appendChild(card);
+}
+
+function updateColHeader(key) {
+  const col = cols[key];
+  if (!col) return;
+  const colJobs = Object.values(jobs).filter(e => repoKey(e.job) === key);
+  const running = colJobs.filter(e => ['running','cloning','pending_approval'].includes(e.job.status)).length;
+  const el = col.el.querySelector('.col-counts');
+  if (!el) return;
+  if (running > 0) {
+    el.textContent = `${running} live · ${colJobs.length}`;
+    el.className = 'col-counts live';
+  } else {
+    el.textContent = `${colJobs.length}`;
+    el.className = 'col-counts';
+  }
+}
+
+function sortColumns() {
+  // Order columns by their most recent job's startedAt, descending
+  const keys = Object.keys(cols).sort((a, b) => {
+    const latest = key => Math.max(0, ...Object.values(jobs)
+      .filter(e => repoKey(e.job) === key)
+      .map(e => new Date(e.job.startedAt || 0).getTime()));
+    return latest(b) - latest(a);
   });
+  for (const key of keys) inner.appendChild(cols[key].el);
+}
 
-  for (const job of sorted) {
-    addJob(job, job.lines || []);
-  }
+// ── Handle snapshot (initial load) ────────────────────────────────────────
+function handleSnapshot(data) {
+  // Sort purely by time descending — columns handle repo grouping visually
+  const sorted = [...data.jobs].sort((a, b) =>
+    new Date(b.startedAt||0) - new Date(a.startedAt||0)
+  );
+  for (const job of sorted) addJob(job, job.lines || []);
+  sortColumns();
   updateCounts();
   applyFilter();
-  if (Object.keys(jobs).length > 0) {
-    emptyState.style.display = 'none';
-  }
+  if (Object.keys(jobs).length > 0) emptyState.style.display = 'none';
 }
 
 function addJob(job, lines) {
-  if (jobs[job.id]) return; // already exists
+  if (jobs[job.id]) return;
   jobCounter++;
   const { card, logEl } = makeCard(job, jobCounter);
-  inner.appendChild(card);
+  const key = repoKey(job);
+  getOrCreateCol(key);
+  insertCardInColumn(key, card, job);
   const sidebarItem = makeSidebarItem(job);
   jobList.prepend(sidebarItem);
   jobs[job.id] = { job: { ...job }, card, logEl, n: jobCounter };
   if (lines.length) appendLines(logEl, lines, false);
+  updateColHeader(key);
+  wireCardClick(card, job.id);
 }
 
 // ── Handle job update ──────────────────────────────────────────────────────
@@ -940,6 +1149,14 @@ function handleJobUpdate(data) {
   const dot = $(`si-${job.id}`)?.querySelector('.ji-status');
   if (dot) { dot.className = `ji-status ${status}`; }
 
+  // Refresh job panel if this job is open
+  if (jpCurrentId === job.id) {
+    jpMeta.querySelector('.jp-badge').className = `jp-badge badge-${status}`;
+    jpMeta.querySelector('.jp-badge').textContent = status.replace('_', ' ');
+    renderActions(status);
+  }
+
+  updateColHeader(repoKey(job));
   updateCounts();
   applyFilter();
 }
@@ -947,6 +1164,7 @@ function handleJobUpdate(data) {
 // ── Handle job_new ─────────────────────────────────────────────────────────
 function handleJobNew(data) {
   addJob(data.job, data.job.lines || []);
+  sortColumns();
   emptyState.style.display = 'none';
   updateCounts();
   applyFilter();
@@ -957,6 +1175,10 @@ function handleOutput(data) {
   const entry = jobs[data.id];
   if (!entry) return;
   appendLines(entry.logEl, data.lines, true);
+  // Mirror to job panel if open
+  if (jpCurrentId === data.id) {
+    appendLines(jpLog, data.lines, true);
+  }
 }
 
 // ── WebSocket ──────────────────────────────────────────────────────────────
@@ -980,6 +1202,114 @@ function connect() {
   };
 }
 
+// ── Job Detail Panel ───────────────────────────────────────────────────────
+const jp = $('jobpanel');
+const jpLog = $('jp-log');
+const jpTitle = $('jp-title');
+const jpMeta = $('jp-meta');
+const jpTask = $('jp-task');
+const jpActions = $('jp-actions');
+let jpCurrentId = null;
+
+function jpClose() {
+  jp.classList.remove('open');
+  jpCurrentId = null;
+}
+
+async function jpOpen(id) {
+  const entry = jobs[id];
+  if (!entry) return;
+  jpCurrentId = id;
+  jp.classList.add('open');
+
+  const job = entry.job;
+  const status = job.status || 'unknown';
+
+  jpTitle.textContent = shortTask(job.task);
+  jpTask.innerHTML = `<strong>Task</strong>${escHtml(job.task || '(no task)')}`;
+
+  // Meta
+  jpMeta.innerHTML = `
+    <span class="jp-badge badge-${status}">${status.replace('_',' ')}</span>
+    <span class="jp-meta-row">repo <span>${escHtml(shortRepo(job.repoUrl) || 'local')}</span>
+      ${job.branch ? ` · branch <span>${escHtml(job.branch)}</span>` : ''}
+    </span>
+    <span class="jp-meta-row">id <span>${escHtml(job.id || id)}</span></span>
+    <span class="jp-meta-row">started <span>${job.startedAt ? new Date(job.startedAt).toLocaleString() : '—'}</span></span>
+  `;
+
+  // Actions
+  renderActions(status);
+
+  // Load full log
+  jpLog.innerHTML = '<div style="color:var(--dim);padding:4px">loading…</div>';
+  try {
+    const r = await fetch(`/api/job/output?id=${encodeURIComponent(id)}`);
+    const data = await r.json();
+    jpLog.innerHTML = '';
+    appendLines(jpLog, data.lines || [], false);
+    jpLog.scrollTop = jpLog.scrollHeight;
+  } catch (e) {
+    jpLog.innerHTML = `<div style="color:var(--red)">${escHtml(e.message)}</div>`;
+  }
+}
+
+function renderActions(status) {
+  jpActions.innerHTML = '';
+  const add = (label, cls, action, extra = {}) => {
+    const b = document.createElement('button');
+    b.className = `jp-btn ${cls}`;
+    b.textContent = label;
+    if (extra.disabled) b.disabled = true;
+    b.addEventListener('click', () => jobAction(jpCurrentId, action));
+    jpActions.appendChild(b);
+  };
+
+  if (status === 'pending_approval') add('✓ Approve', 'approve', 'approve');
+  if (['running','cloning','pending_approval'].includes(status)) add('✕ Cancel', 'cancel', 'cancel');
+  if (status === 'failed' || status === 'cancelled') add('⟳ Wake', 'wake', 'wake');
+  if (jpActions.children.length === 0) {
+    jpActions.innerHTML = `<span style="font-size:10px;color:var(--dim)">no actions available for ${status} jobs</span>`;
+  }
+}
+
+async function jobAction(id, action) {
+  if (!id) return;
+  const btns = jpActions.querySelectorAll('.jp-btn');
+  btns.forEach(b => b.disabled = true);
+  try {
+    const r = await fetch('/api/job/action', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, action }),
+    });
+    const data = await r.json();
+    if (data.ok) {
+      // Append confirmation to panel log
+      const d = document.createElement('div');
+      d.className = 'tl tl-ok';
+      d.textContent = `[ui] Action "${action}" sent`;
+      jpLog.appendChild(d);
+      jpLog.scrollTop = jpLog.scrollHeight;
+    }
+  } catch (e) {
+    const d = document.createElement('div');
+    d.className = 'tl tl-err';
+    d.textContent = `[ui] Error: ${e.message}`;
+    jpLog.appendChild(d);
+  } finally {
+    btns.forEach(b => b.disabled = false);
+  }
+}
+
+// Wire card clicks to open job panel
+function wireCardClick(card, id) {
+  card.querySelector('.card-hdr').addEventListener('click', (e) => {
+    if (e.target.closest('.fp-link')) return; // don't interfere with file links
+    jpOpen(id);
+  });
+}
+
 // ── File Browser ───────────────────────────────────────────────────────────
 const fb = $('filebrowser');
 const fbBody = $('fb-body');
@@ -1117,15 +1447,6 @@ setInterval(() => {
   }
 }, 30000);
 
-// Auto-layout columns based on viewport width
-function updateCols() {
-  const vw = viewport.clientWidth;
-  const cols = Math.max(1, Math.floor((vw - 40) / 474));
-  inner.style.setProperty('--cols', cols);
-}
-updateCols();
-new ResizeObserver(updateCols).observe(viewport);
-
 connect();
 </script>
 </body>

package/server.js

@@ -195,6 +195,56 @@ const server = http.createServer((req, res) => {
       res.writeHead(404); res.end(e.message);
     }
 
+  } else if (url.pathname === '/api/job/output') {
+    // Full output for a job
+    const id = url.searchParams.get('id');
+    if (!id) { res.writeHead(400); res.end('missing id'); return; }
+    (async () => {
+      try {
+        const lines = await getOutputTail(id, 5000);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ lines }));
+      } catch (e) { res.writeHead(500); res.end(e.message); }
+    })();
+
+  } else if (url.pathname === '/api/job/action' && req.method === 'POST') {
+    // Job actions: approve, cancel, wake
+    let body = '';
+    req.on('data', d => body += d);
+    req.on('end', async () => {
+      try {
+        const { id, action, message } = JSON.parse(body);
+        if (!id || !action) { res.writeHead(400); res.end('missing id/action'); return; }
+        const jobRaw = await redis.get(`cca:job:${id}`);
+        const job = parseJob(jobRaw);
+        if (!job) { res.writeHead(404); res.end('job not found'); return; }
+
+        if (action === 'approve') {
+          // Set approval flag — cc-agent polls for this
+          const updated = { ...job, approvedAt: new Date().toISOString(), approved: true };
+          await redis.set(`cca:job:${id}`, JSON.stringify(updated));
+          // Also push approval to output list so agent sees it
+          await redis.rPush(`cca:job:${id}:output`, '[cc-agent-ui] Job approved by user');
+        } else if (action === 'cancel') {
+          const updated = { ...job, status: 'cancelled', cancelledAt: new Date().toISOString() };
+          await redis.set(`cca:job:${id}`, JSON.stringify(updated));
+          broadcast({ type: 'job_update', job: updated });
+        } else if (action === 'wake') {
+          const updated = { ...job, status: 'running', wakedAt: new Date().toISOString() };
+          await redis.set(`cca:job:${id}`, JSON.stringify(updated));
+          broadcast({ type: 'job_update', job: updated });
+        } else if (action === 'message') {
+          // Send a message into the job's input channel
+          if (message) await redis.rPush(`cca:job:${id}:input`, message);
+        }
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, action, id }));
+      } catch (e) {
+        res.writeHead(500); res.end(e.message);
+      }
+    });
+
   } else {
     res.writeHead(404); res.end();
   }