cc-agent-ui 0.2.2 → 0.2.4

package/package.json

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

package/public/index.html

@@ -296,26 +296,23 @@ body {
 }
 
 /* status colors */
-.tcard.running  { border-color: #2a3545; box-shadow: 0 0 24px var(--cyan-glow); }
+
 .tcard.done     { border-color: #1e2d1e; box-shadow: 0 0 16px var(--green-glow); }
 .tcard.failed   { border-color: #2d1e20; box-shadow: 0 0 16px var(--red-glow); }
 .tcard.pending_approval { border-color: #2d2a1e; box-shadow: 0 0 16px var(--yellow-glow); }
 .tcard.cloning  { border-color: #1e2233; box-shadow: 0 0 16px rgba(97,175,239,0.1); }
 
-/* scan line on running */
-.tcard.running::before {
-  content: '';
-  position: absolute;
-  left: 0; right: 0; height: 1px;
-  background: linear-gradient(90deg, transparent 0%, var(--cyan) 50%, transparent 100%);
-  opacity: 0.4;
-  animation: scanline 3s linear infinite;
-  pointer-events: none;
-  z-index: 5;
+@keyframes border-race {
+  0%   { box-shadow: 0 -1px 4px 0px #60a5fa, inset 0 0 0 1px #1e3a8a, 0 0 10px rgba(59,130,246,0.12); }
+  25%  { box-shadow: 2px 0 4px 0px #60a5fa, inset 0 0 0 1px #1e3a8a, 0 0 10px rgba(59,130,246,0.12); }
+  50%  { box-shadow: 0 2px 4px 0px #60a5fa, inset 0 0 0 1px #1e3a8a, 0 0 10px rgba(59,130,246,0.12); }
+  75%  { box-shadow: -2px 0 4px 0px #60a5fa, inset 0 0 0 1px #1e3a8a, 0 0 10px rgba(59,130,246,0.12); }
+  100% { box-shadow: 0 -1px 4px 0px #60a5fa, inset 0 0 0 1px #1e3a8a, 0 0 10px rgba(59,130,246,0.12); }
 }
-@keyframes scanline {
-  0%   { top: 0; }
-  100% { top: 100%; }
+
+.tcard.running {
+  border-color: #1e3a8a;
+  animation: border-race 2s linear infinite;
 }
 
 /* ── Card Header ── */
@@ -328,7 +325,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;
@@ -388,6 +387,7 @@ body {
 }
 .card-repo-icon { color: var(--dimmer); }
 .card-branch { color: var(--purple); margin-left: auto; flex-shrink:0; }
+.card-docker-badge { color: #38bdf8; font-size:9px; background: rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.3); border-radius:3px; padding:1px 5px; flex-shrink:0; }
 
 /* ── Terminal body ── */
 .card-term {
@@ -407,11 +407,11 @@ body {
 
 /* Output line coloring */
 .tl { white-space: pre-wrap; word-break: break-all; }
-.tl-sys  { color: var(--dim); }           /* [cc-agent] meta lines */
+.tl-sys  { color: #7a8099; }              /* [cc-agent] meta lines */
 .tl-ok   { color: var(--green); }         /* success */
 .tl-err  { color: var(--red); }           /* errors */
 .tl-warn { color: var(--yellow); }        /* warnings */
-.tl-tool { color: var(--blue); }          /* tool calls */
+.tl-tool { color: var(--blue); opacity: 0.8; font-size: 10px; } /* tool calls */
 .tl-file { color: var(--orange); }        /* file operations */
 .tl-head { color: var(--cyan); font-weight:600; }  /* bold headings */
 .tl-dim  { color: var(--dim); }           /* faded */
@@ -541,6 +541,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);
@@ -554,6 +647,49 @@ body {
   text-decoration-color: var(--orange);
 }
 
+/* ── Message bar (job panel) ── */
+#jp-msg-bar {
+  border-top: 1px solid var(--border);
+  padding: 8px 14px;
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  background: rgba(0,0,0,0.15);
+}
+#jp-msg-bar.hidden { display: none; }
+#jp-msg-input {
+  flex: 1;
+  background: rgba(0,0,0,0.4);
+  border: 1px solid var(--border-hi);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 11px;
+  padding: 5px 10px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+#jp-msg-input::placeholder { color: var(--dim); }
+#jp-msg-input:focus { border-color: var(--cyan); }
+#jp-msg-send {
+  font-family: var(--font); font-size: 10px;
+  padding: 5px 14px; border-radius: 4px; cursor: pointer;
+  border: 1px solid rgba(86,182,194,0.4);
+  background: transparent; color: var(--cyan); font-weight: 600;
+  transition: all 0.15s; white-space: nowrap;
+}
+#jp-msg-send:hover { background: rgba(86,182,194,0.12); border-color: var(--cyan); }
+#jp-msg-send:disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* ── Working indicator on empty running terminal ── */
+.term-working {
+  padding: 12px 0 4px;
+  display: flex; align-items: center; gap: 8px;
+  color: var(--dim); font-size: 10px;
+}
+.term-spinner { animation: spin 1.2s linear infinite; display: inline-block; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
 /* ── Empty state ── */
 #empty-state {
   position: absolute;
@@ -567,10 +703,41 @@ body {
 #empty-state .e-icon { font-size: 48px; color: var(--dimmer); margin-bottom: 4px; }
 #empty-state .e-title { font-size: 16px; font-weight:700; color: var(--dim); }
 #empty-state .e-sub { font-size: 11px; color: var(--dimmer); }
+/* ── Loading overlay ──────────────────────────────────────────────────── */
+#loading-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  z-index: 9999;
+}
+#loading-spinner {
+  font-size: 24px;
+  color: var(--cyan);
+  text-shadow: 0 0 12px var(--cyan);
+  font-family: var(--font);
+  line-height: 1;
+}
+#loading-text {
+  font-size: 12px;
+  color: var(--dim);
+  letter-spacing: 0.08em;
+  font-family: var(--font);
+}
 </style>
 </head>
 <body>
 
+<!-- Loading overlay -->
+<div id="loading-overlay">
+  <div id="loading-spinner">⣾</div>
+  <div id="loading-text">Loading agents…</div>
+</div>
+
 <!-- Top bar -->
 <div id="topbar">
   <div id="logo">
@@ -618,6 +785,22 @@ 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 id="jp-msg-bar" class="hidden">
+    <input id="jp-msg-input" type="text" placeholder="Send message to Claude…" autocomplete="off">
+    <button id="jp-msg-send" onclick="jpSendMessage()">↵ Send</button>
+  </div>
+</div>
+
 <!-- File Browser Panel -->
 <div id="filebrowser">
   <div id="fb-topbar">
@@ -713,29 +896,51 @@ viewport.addEventListener('touchmove', e => {
 }, { passive: false });
 
 // ── Log line colorizer ─────────────────────────────────────────────────────
+const TOOL_ICONS = {
+  Read:'📖', Edit:'✏️', Write:'💾', Bash:'$', Glob:'🔍', Grep:'🔎',
+  WebFetch:'🌐', WebSearch:'🌐', TodoWrite:'✅', Agent:'🤖',
+  MultiEdit:'✏️', NotebookEdit:'📓', Dispatch:'⚡',
+};
+
 function classifyLine(raw) {
   const s = raw.replace(/\x1b\[[0-9;]*m/g, '').trim();
   if (!s) return null;
+  if (s.startsWith('[tool] '))           return 'tl tl-tool';
+  if (s.startsWith('[you] '))            return 'tl tl-head';
   if (s.startsWith('[cc-agent]'))        return 'tl tl-sys';
   if (/✓|✅|PASS|passed|merged|pushed|success/i.test(s)) return 'tl tl-ok';
   if (/✗|❌|error|Error|FAIL|failed|exception/i.test(s)) return 'tl tl-err';
   if (/⚠|warn|Warning/i.test(s))        return 'tl tl-warn';
-  if (/^(Read|Edit|Write|Bash|Glob|Grep|WebFetch|TodoWrite|Agent)\b/.test(s)) return 'tl tl-tool';
+  if (/^(Read|Edit|Write|Bash|Glob|Grep|WebFetch|WebSearch|TodoWrite|Agent)\b/.test(s)) return 'tl tl-tool';
   if (/\.(ts|js|tsx|jsx|py|go|rs|md|json|yaml|sh)\b/.test(s)) return 'tl tl-file';
   if (/^#{1,3}\s|^\*\*/.test(s))         return 'tl tl-head';
   if (/^[\-–—>·]/.test(s))              return 'tl tl-dim';
   return 'tl';
 }
 
+function formatLine(raw) {
+  const s = raw.replace(/\x1b\[[0-9;]*m/g, '');
+  // Enrich [tool] lines with icon
+  const toolMatch = s.match(/^\[tool\] (\w+)(.*)/);
+  if (toolMatch) {
+    const icon = TOOL_ICONS[toolMatch[1]] || '⚙';
+    return `${icon} ${toolMatch[1]}${toolMatch[2]}`;
+  }
+  return s;
+}
+
 function appendLines(logEl, lines, isNew) {
+  // Remove working indicator if present
+  const working = logEl.querySelector('.term-working');
+  if (working && lines.some(l => l.trim())) working.remove();
+
   const frag = document.createDocumentFragment();
   for (const raw of lines) {
     const cls = classifyLine(raw);
     if (!cls) continue;
     const d = document.createElement('div');
     d.className = isNew ? cls + ' tl-new' : cls;
-    const clean = raw.replace(/\x1b\[[0-9;]*m/g, '');
-    // Linkify file paths
+    const clean = formatLine(raw);
     d.innerHTML = linkifyPaths(clean);
     if (isNew) setTimeout(() => d.classList.remove('tl-new'), 1500);
     frag.appendChild(d);
@@ -745,6 +950,18 @@ function appendLines(logEl, lines, isNew) {
   logEl.scrollTop = logEl.scrollHeight;
 }
 
+function setWorkingIndicator(logEl, show) {
+  const existing = logEl.querySelector('.term-working');
+  if (show && !existing && logEl.children.length === 0) {
+    const d = document.createElement('div');
+    d.className = 'term-working';
+    d.innerHTML = '<span class="term-spinner">⟳</span> Claude is working…';
+    logEl.appendChild(d);
+  } else if (!show && existing) {
+    existing.remove();
+  }
+}
+
 // ── Card factory ───────────────────────────────────────────────────────────
 function shortRepo(url) {
   if (!url) return 'local';
@@ -795,6 +1012,7 @@ function makeCard(job, n) {
       <span class="card-repo-icon">⎇</span>
       <span>${escHtml(repoStr)}</span>
       ${job.branch ? `<span class="card-branch">${escHtml(job.branch)}</span>` : ''}
+      ${job.dockerIsolation ? `<span class="card-docker-badge" title="Running in Docker container">🐳 isolated</span>` : ''}
     </div>
     <div class="card-term"></div>
     <div class="card-foot">
@@ -819,6 +1037,7 @@ function makeSidebarItem(job) {
   const item = document.createElement('div');
   item.className = `job-item`;
   item.id = `si-${job.id}`;
+  item.dataset.startedAt = job.startedAt || '';
   const status = job.status || 'unknown';
 
   item.innerHTML = `
@@ -982,6 +1201,7 @@ function handleSnapshot(data) {
   updateCounts();
   applyFilter();
   if (Object.keys(jobs).length > 0) emptyState.style.display = 'none';
+  if (typeof hideLoader === 'function') hideLoader();
 }
 
 function addJob(job, lines) {
@@ -992,10 +1212,17 @@ function addJob(job, lines) {
   getOrCreateCol(key);
   insertCardInColumn(key, card, job);
   const sidebarItem = makeSidebarItem(job);
-  jobList.prepend(sidebarItem);
+  const jobTime = new Date(job.startedAt || 0).getTime();
+  const after = Array.from(jobList.children).find(el =>
+    new Date(el.dataset.startedAt || 0).getTime() < jobTime
+  );
+  if (after) jobList.insertBefore(sidebarItem, after);
+  else jobList.appendChild(sidebarItem);
   jobs[job.id] = { job: { ...job }, card, logEl, n: jobCounter };
   if (lines.length) appendLines(logEl, lines, false);
+  else if (job.status === 'running' || job.status === 'cloning') setWorkingIndicator(logEl, true);
   updateColHeader(key);
+  wireCardClick(card, job.id);
 }
 
 // ── Handle job update ──────────────────────────────────────────────────────
@@ -1016,6 +1243,10 @@ function handleJobUpdate(data) {
   entry.job = { ...entry.job, ...job };
   const status = job.status;
 
+  // Working indicator
+  if (status === 'running' || status === 'cloning') setWorkingIndicator(entry.logEl, true);
+  else setWorkingIndicator(entry.logEl, false);
+
   // Update card class
   entry.card.className = `tcard ${status}`;
 
@@ -1041,6 +1272,16 @@ 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);
+    const msgBar = $('jp-msg-bar');
+    if (status === 'running') msgBar.classList.remove('hidden');
+    else msgBar.classList.add('hidden');
+  }
+
   updateColHeader(repoKey(job));
   updateCounts();
   applyFilter();
@@ -1060,6 +1301,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 ──────────────────────────────────────────────────────────────
@@ -1083,6 +1328,164 @@ 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 jpSendMessage() {
+  const input = $('jp-msg-input');
+  const btn = $('jp-msg-send');
+  const text = input.value.trim();
+  if (!text || !jpCurrentId) return;
+  input.value = '';
+  btn.disabled = true;
+  try {
+    const r = await fetch('/api/job/action', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id: jpCurrentId, action: 'message', message: text }),
+    });
+    const data = await r.json();
+    const d = document.createElement('div');
+    d.className = 'tl tl-head';
+    d.textContent = `[you] ${text}`;
+    jpLog.appendChild(d);
+    jpLog.scrollTop = jpLog.scrollHeight;
+    // Also echo to card terminal
+    const entry = jobs[jpCurrentId];
+    if (entry?.logEl) appendLines(entry.logEl, [`[you] ${text}`], true);
+  } catch (e) {
+    const d = document.createElement('div');
+    d.className = 'tl tl-err';
+    d.textContent = `[ui] Error: ${e.message}`;
+    jpLog.appendChild(d);
+  } finally {
+    btn.disabled = false;
+    input.focus();
+  }
+}
+
+// Enter key submits message
+document.addEventListener('DOMContentLoaded', () => {
+  $('jp-msg-input').addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); jpSendMessage(); }
+  });
+});
+
+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>` : ''}
+      ${job.dockerIsolation ? ` · <span style="color:#38bdf8">🐳 docker isolated</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);
+
+  // Show/hide message bar
+  const msgBar = $('jp-msg-bar');
+  if (status === 'running') {
+    msgBar.classList.remove('hidden');
+    setTimeout(() => $('jp-msg-input').focus(), 50);
+  } else {
+    msgBar.classList.add('hidden');
+  }
+
+  // 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');
@@ -1220,6 +1623,32 @@ setInterval(() => {
   }
 }, 30000);
 
+// ── Loading overlay ────────────────────────────────────────────────────────
+(function() {
+  const overlay = document.getElementById('loading-overlay');
+  const spinnerEl = document.getElementById('loading-spinner');
+  const textEl = document.getElementById('loading-text');
+  const frames = ['⣾','⣽','⣻','⢿','⡿','⣟','⣯','⣷'];
+  let frame = 0;
+  const spinInterval = setInterval(() => {
+    spinnerEl.textContent = frames[frame++ % frames.length];
+  }, 100);
+
+  let snapshotReceived = false;
+  const fallbackTimer = setTimeout(() => {
+    if (!snapshotReceived) {
+      textEl.textContent = 'Reconnecting…';
+    }
+  }, 8000);
+
+  window.hideLoader = function() {
+    snapshotReceived = true;
+    clearInterval(spinInterval);
+    clearTimeout(fallbackTimer);
+    overlay.style.display = 'none';
+  };
+})();
+
 connect();
 </script>
 </body>

package/server.js

@@ -195,6 +195,63 @@ 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') {
+          // Mark approved in Redis — cc-agent MCP must be called separately to actually start it
+          // (cc-agent's approval is in-memory; this sets a flag for reference and for GitHub issue polling)
+          const updated = { ...job, approvedAt: new Date().toISOString(), approved: true };
+          await redis.set(`cca:job:${id}`, JSON.stringify(updated));
+          await redis.rPush(`cca:job:${id}:output`, '[cc-agent-ui] Approved by UI — use MCP approve_job to start');
+          broadcast({ type: 'job_output', id, lines: ['[cc-agent-ui] Approved by UI — use MCP approve_job to start'] });
+        } 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') {
+          if (message) {
+            // Queue for cc-agent to pick up (future: cc-agent polls cca:job:{id}:input)
+            await redis.rPush(`cca:job:${id}:input`, message);
+            // Echo to output so it's visible in terminal immediately
+            const line = `[you] ${message}`;
+            await redis.rPush(`cca:job:${id}:output`, line);
+            broadcast({ type: 'job_output', id, lines: [line] });
+          }
+        }
+
+        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();
   }
@@ -214,6 +271,25 @@ wss.on('connection', async ws => {
   ws.on('close', () => { clients.delete(ws); });
 });
 
+// ── Tool call synthesis from recentTools diff ──────────────────────────────
+const toolTrack = {}; // id → last recentTools array
+
+function diffTools(prevArr, currArr) {
+  if (!currArr?.length) return [];
+  if (!prevArr?.length) return currArr.slice(-3); // first snapshot: emit up to 3
+  if (JSON.stringify(prevArr) === JSON.stringify(currArr)) return [];
+  // Find how many NEW items appeared at the tail of currArr relative to prevArr.
+  // Strategy: find the longest suffix of prevArr that matches a prefix of the new tail.
+  for (let overlap = Math.min(prevArr.length, currArr.length); overlap >= 0; overlap--) {
+    const prevSuffix = prevArr.slice(prevArr.length - overlap);
+    const currPrefix = currArr.slice(0, overlap);
+    if (JSON.stringify(prevSuffix) === JSON.stringify(currPrefix)) {
+      return currArr.slice(overlap); // these are genuinely new
+    }
+  }
+  return currArr.slice(-Math.min(3, currArr.length)); // fallback: last 3
+}
+
 // ── Polling: job status changes ────────────────────────────────────────────
 setInterval(async () => {
   try {
@@ -227,6 +303,7 @@ setInterval(async () => {
         if (!prev) {
           // New job
           jobCache[job.id] = job;
+          toolTrack[job.id] = job.recentTools || [];
           const lines = await getOutputTail(job.id, 50);
           broadcast({ type: 'job_new', job: { ...job, lines } });
         } else if (prev.status !== job.status) {
@@ -235,6 +312,22 @@ setInterval(async () => {
         } else {
           jobCache[job.id] = { ...prev, ...job };
         }
+        // Detect new tool calls via recentTools diff
+        const activeStatuses = new Set(['running', 'cloning']);
+        if (activeStatuses.has(job.status)) {
+          const prevTools = toolTrack[job.id] || [];
+          const currTools = job.recentTools || [];
+          const newTools = diffTools(prevTools, currTools);
+          toolTrack[job.id] = currTools;
+          if (newTools.length) {
+            const lines = newTools.map(t => `[tool] ${t}`);
+            broadcast({ type: 'job_output', id: job.id, lines });
+            // Also write to Redis output so it persists
+            const pipeline = redis.multi();
+            for (const l of lines) pipeline.rPush(`cca:job:${job.id}:output`, l);
+            pipeline.exec().catch(() => {});
+          }
+        }
       }
     }
   } catch (e) {
@@ -242,11 +335,21 @@ setInterval(async () => {
   }
 }, 2500);
 
-// ── Polling: output for active jobs ───────────────────────────────────────
+// ── Polling: output for active + recently-finished jobs ───────────────────
+const recentlyFinished = new Map(); // id → finishedTimestamp
 setInterval(async () => {
+  const now = Date.now();
   const activeStatuses = new Set(['running', 'cloning', 'pending_approval']);
-  const active = Object.values(jobCache).filter(j => activeStatuses.has(j.status));
-  for (const job of active) {
+  // Include recently finished jobs for 15s to catch tail output
+  const toPoll = Object.values(jobCache).filter(j =>
+    activeStatuses.has(j.status) ||
+    (recentlyFinished.has(j.id) && now - recentlyFinished.get(j.id) < 15000)
+  );
+  for (const job of toPoll) {
+    // Track when jobs finish
+    if (!activeStatuses.has(job.status) && !recentlyFinished.has(job.id)) {
+      recentlyFinished.set(job.id, now);
+    }
     try {
       const lines = await pollNewOutput(job.id);
       if (lines.length > 0) {
@@ -254,6 +357,10 @@ setInterval(async () => {
       }
     } catch {}
   }
+  // Clean up old entries
+  for (const [id, ts] of recentlyFinished) {
+    if (now - ts > 30000) recentlyFinished.delete(id);
+  }
 }, 900);
 
 // ── Start ──────────────────────────────────────────────────────────────────