trantor 0.17.10 → 0.17.11

package/.claude-plugin/marketplace.json

@@ -6,14 +6,14 @@
   },
   "metadata": {
     "description": "Trantor — the hub-world for AI agent crews: live message bus, presence, project Kanban/flow board + context-handoff for independent AI coding agents (Claude, Codex, Gemini, …)",
-    "version": "0.17.10"
+    "version": "0.17.11"
   },
   "plugins": [
     {
       "name": "trantor",
       "source": "./",
       "description": "The hub-world for AI agent crews. Say \"fire up the crew\" and Claude becomes the architect: a plan-aware Advisor routes the work (solo / cheap inline calls / live crew of Codex, Gemini, Kimi & DeepSeek in their own terminal windows), a Kanban/flow command center with a testing gate tracks it, and an economics brain (Scrooge) keeps the receipts. Includes the relay MCP, a SessionStart auto-discovery hook, and a PreCompact context-handoff so a fresh session can take over a full window instead of compacting.",
-      "version": "0.17.10",
+      "version": "0.17.11",
       "author": {
         "name": "Sasha Bogojevic"
       },

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "trantor",
-  "version": "0.17.10",
+  "version": "0.17.11",
   "description": "Trantor — the hub-world for AI agent crews: live message bus, presence, project Kanban/flow board + crew orchestration for independent AI coding agents (Claude, Codex, Gemini, Kimi, DeepSeek)",
   "mcpServers": {
     "relay": {

package/hub.mjs

@@ -237,6 +237,20 @@ const server = http.createServer(async (req, res) => {
       const events = (q.project ? state.cardEvents.filter(e => e.project === q.project) : state.cardEvents).slice(-limit);
       return json(res, 200, { events });
     }
+    // A single card's FULL story for the detail panel: the card itself, its status events, and the
+    // bus messages that reference it (#<id>) — i.e. the agent's own reports of what it did, why, how.
+    if (req.method === "GET" && P === "/card") {
+      const id = Number(q.id);
+      if (!Number.isInteger(id)) return json(res, 400, { error: "numeric id required" });
+      const task = state.tasks.find(t => t.id === id) || null;
+      const events = state.cardEvents.filter(e => e.taskId === id);
+      const re = new RegExp("#" + id + "(?![0-9])");   // #5 but not #50
+      const messages = state.messages.filter(m => re.test(String(m.text || ""))).slice(-200);
+      // fall back to the last event for title/project/assignee when the card was deleted
+      const last = events[events.length - 1];
+      const meta = task || (last ? { id, title: last.title, project: last.project, status: "deleted", assignee: last.assignee, difficulty: last.difficulty } : null);
+      return json(res, 200, { task: meta, events, messages });
+    }
     if (req.method === "POST" && P === "/project") {        // set a project's brief (what & why)
       const b = await body(req); const k = String(b.project || "").slice(0, 80);
       if (!k) return json(res, 400, { error: "project required" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trantor",
-  "version": "0.17.10",
+  "version": "0.17.11",
   "type": "module",
   "bin": {
     "trantor": "bin/cli.mjs"

package/ui.html

@@ -162,6 +162,26 @@ main:not(.learn-open) .learn-body{display:none}
 .tlgl{display:flex;align-items:center;gap:6px;padding-left:8px;font-size:11px;font-weight:600;color:var(--mut)}
 .tlgl svg{flex:none}
 .tlwrap .fhint{position:absolute;right:10px;bottom:6px;z-index:3}
+.tlnode{cursor:pointer}
+/* card detail modal — the full story of one card: status journey + the agent's own bus reports */
+.cmodal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(4,7,12,.62)}
+.cmpanel{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(760px,93vw);max-height:84vh;display:flex;flex-direction:column;box-shadow:0 20px 64px rgba(0,0,0,.55)}
+.cmhead{display:flex;align-items:flex-start;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
+.cmtitle{font-size:15px;font-weight:700;color:var(--tx);line-height:1.35}
+.cmmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--mut)}
+.cmmeta svg{flex:none;vertical-align:middle}
+.cmstat{font-size:10px;padding:1px 8px;border-radius:9px;border:1px solid var(--line)}
+.cmclose{margin-left:auto;cursor:pointer;color:var(--mut);font-size:17px;line-height:1;padding:3px 7px;border-radius:6px;flex:none}
+.cmclose:hover{background:var(--card);color:var(--tx)}
+.cmbody{overflow-y:auto;padding:10px 18px 18px}
+.cmrow{display:flex;gap:10px;padding:8px 0;border-top:1px solid #161e2c;font-size:12.5px;line-height:1.5}
+.cmrow:first-child{border-top:none}
+.cmrow .cmt{flex:none;color:var(--dim);font-size:10px;width:66px;padding-top:2px}
+.cmrow.ev .cmtx{color:var(--mut)}
+.cmrow .cmtx b{color:var(--tx);font-weight:600}
+.cmrow.msg .cmfrom{color:var(--tx);font-weight:600}
+.cmrow.msg svg{vertical-align:-2px}
+.cmempty{color:var(--dim);font-style:italic;font-size:12px;padding:8px 0}
 /* timeline view */
 .timeline{padding:14px 18px;overflow-y:auto;max-height:66vh;display:flex;flex-direction:column;gap:5px;background:#0c111c;border-top:1px solid var(--line)}
 .tevent{font-size:12.5px;line-height:1.4;color:var(--mut);display:flex;align-items:center;gap:7px;padding:4px 0}
@@ -227,6 +247,7 @@ aside h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:va
     </div>
   </aside>
 </main>
+<div id="cardmodal" class="cmodal" style="display:none"></div>
 <script>
 const $=s=>document.querySelector(s);
 const esc=s=>String(s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
@@ -361,7 +382,40 @@ function wireTimeline(el){
     if (TLSCROLL[proj] != null) s.scrollLeft = TLSCROLL[proj];
     s.onscroll = () => { TLSCROLL[proj] = s.scrollLeft; };
   });
+  el.querySelectorAll('.tlnode').forEach(n => n.onclick = () => openCard(+n.dataset.id));
 }
+// Card detail modal: one card's FULL story — its status journey interleaved with the agent's own bus
+// reports (what it did, why, how). Click any card in the FLOW timeline to open it.
+let cardEsc = null;
+async function openCard(id){
+  let d; try { d = await (await fetch('/card?id=' + id)).json(); } catch { return; }
+  const t = d.task; if (!t) return;
+  const SC = { todo:'var(--mut)', doing:'var(--blu)', testing:'var(--amb)', failed:'var(--red)', blocked:'var(--red)', done:'var(--grn)', deleted:'var(--dim)' };
+  const items = [];
+  for (const e of (d.events||[])) items.push({ ts:e.ts, ev:e });
+  for (const m of (d.messages||[])) items.push({ ts:m.ts, m });
+  items.sort((a,b)=> (a.ts||0)-(b.ts||0));
+  const tm = ts => new Date(ts).toLocaleString([], {month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'});
+  const rows = items.map(it => {
+    if (it.ev){ const e=it.ev; const tx = e.type==='created'?`created as <b>${esc(e.to||'todo')}</b>` : e.type==='moved'?`moved <b>${esc(e.from||'')}</b> → <b>${esc(e.to||'')}</b>` : e.type==='deleted'?`deleted` : `updated`;
+      return `<div class="cmrow ev"><span class="cmt">${esc(tm(e.ts))}</span><span class="cmtx">${tx}${e.by?` · ${esc(String(e.by).split(':')[0])}`:''}</span></div>`; }
+    const m=it.m; return `<div class="cmrow msg"><span class="cmt">${esc(tm(m.ts))}</span><span class="cmtx">${iconFor(m.from,13)} <span class="cmfrom">${esc(String(m.from).split(':')[0])}</span>${m.to&&m.to!=='all'?` → ${esc(String(m.to).split(':')[0])}`:''}: ${esc(m.text)}</span></div>`;
+  }).join('');
+  const el = $('#cardmodal');
+  el.innerHTML = `<div class="cmpanel">`
+    + `<div class="cmhead"><div><div class="cmtitle">${esc(t.title)}</div>`
+    + `<div class="cmmeta">${iconFor(t.assignee||'',14)} ${esc(String(t.assignee||'unassigned').split(':')[0])}`
+    + ` <span class="cmstat" style="color:${SC[t.status]||'var(--mut)'};border-color:${SC[t.status]||'var(--line)'}">${esc(t.status)}</span>`
+    + `${t.difficulty?` · ${esc(t.difficulty)}`:''}${t.model?` · ${esc(String(t.model).slice(0,26))}`:''} · #${id} · ${esc(t.project||'')}</div></div>`
+    + `<span class="cmclose" id="cmclose">✕</span></div>`
+    + `<div class="cmbody">${rows || '<div class="cmempty">No recorded activity for this card yet — no bus reports reference #'+id+'.</div>'}</div></div>`;
+  el.style.display = 'flex';
+  el.querySelector('.cmpanel').onclick = e => e.stopPropagation();
+  el.onclick = closeCard; $('#cmclose').onclick = closeCard;
+  cardEsc = e => { if (e.key === 'Escape') closeCard(); };
+  document.addEventListener('keydown', cardEsc);
+}
+function closeCard(){ const el=$('#cardmodal'); el.style.display='none'; el.innerHTML=''; if(cardEsc){ document.removeEventListener('keydown', cardEsc); cardEsc=null; } }
 let dragging = null;   // suppresses re-render mid-gesture
 function saveCam(proj, cam){ const c = JSON.parse(localStorage.getItem("abFlowCam") || "{}"); c[proj] = cam; localStorage.setItem("abFlowCam", JSON.stringify(c)); }
 function wireFlow(el){