cc-agent-ui 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc-agent-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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 ── */
@@ -390,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 {
@@ -409,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 */
@@ -649,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;
@@ -662,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">
@@ -723,6 +795,10 @@ body {
   <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 -->
@@ -820,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);
@@ -852,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';
@@ -902,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">
@@ -926,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 = `
@@ -1089,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) {
@@ -1099,9 +1212,15 @@ 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);
 }
@@ -1124,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}`;
 
@@ -1154,6 +1277,9 @@ function handleJobUpdate(data) {
     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));
@@ -1216,6 +1342,38 @@ function jpClose() {
   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 }),
+    });
+    await r.json();
+  } 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;
@@ -1233,6 +1391,7 @@ async function jpOpen(id) {
     <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>
@@ -1241,6 +1400,15 @@ async function jpOpen(id) {
   // 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 {
@@ -1447,6 +1615,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

@@ -220,11 +220,12 @@ const server = http.createServer((req, res) => {
         if (!job) { res.writeHead(404); res.end('job not found'); return; }
 
         if (action === 'approve') {
-          // Set approval flag — cc-agent polls for this
+          // 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));
-          // Also push approval to output list so agent sees it
-          await redis.rPush(`cca:job:${id}:output`, '[cc-agent-ui] Job approved by user');
+          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));
@@ -234,8 +235,16 @@ const server = http.createServer((req, res) => {
           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);
+          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}`;
+            const newLen = await redis.rPush(`cca:job:${id}:output`, line);
+            // Advance the output length tracker so the poller doesn't re-broadcast this line
+            outputLengths[id] = newLen;
+            broadcast({ type: 'job_output', id, lines: [line] });
+          }
         }
 
         res.writeHead(200, { 'Content-Type': 'application/json' });
@@ -264,6 +273,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 {
@@ -277,6 +305,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) {
@@ -285,6 +314,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) {
@@ -292,11 +337,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) {
@@ -304,6 +359,10 @@ setInterval(async () => {
       }
     } catch {}
   }
+  // Clean up old entries
+  for (const [id, ts] of recentlyFinished) {
+    if (now - ts > 30000) recentlyFinished.delete(id);
+  }
 }, 900);
 
 // ── Start ──────────────────────────────────────────────────────────────────