@hueyexe/opencode-ensemble 0.9.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +33 -5
  2. package/dist/index.js +715 -3
  3. package/package.json +1 -1
  4. package/src/config.ts +12 -0
  5. package/src/dashboard-html.ts +91 -0
  6. package/src/dashboard-js-part1.ts +97 -0
  7. package/src/dashboard-js-part2.ts +233 -0
  8. package/src/dashboard-js-part3.ts +50 -0
  9. package/src/dashboard.ts +166 -0
  10. package/src/index.ts +35 -0
  11. package/src/progress.ts +38 -0
  12. package/src/system-prompt.ts +28 -2
  13. package/src/tools/team-message.ts +16 -0
  14. package/src/tools/team-spawn.ts +13 -0
  15. package/src/watchdog.ts +44 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hueyexe/opencode-ensemble",
3
- "version": "0.9.1",
3
+ "version": "0.11.0",
4
4
  "description": "Agent teams for OpenCode — parallel agents with peer-to-peer communication, shared tasks, and coordinated execution",
5
5
  "module": "src/index.ts",
6
6
  "main": "dist/index.js",
package/src/config.ts CHANGED
@@ -15,6 +15,12 @@ export interface EnsembleConfig {
15
15
  timeoutMs?: number
16
16
  /** Rate limit capacity (default: 10, 0 to disable) */
17
17
  rateLimitCapacity?: number
18
+ /** Dashboard server port (default: 4747, 0 to disable) */
19
+ dashboardPort?: number
20
+ /** Max peer messages per agent per window before nudge (default: 5, 0 to disable) */
21
+ peerMessageLimit?: number
22
+ /** Time window for peer message rate limiting in ms (default: 300000 = 5 min) */
23
+ peerMessageWindowMs?: number
18
24
  }
19
25
 
20
26
  /** Default configuration values. */
@@ -25,6 +31,9 @@ export const DEFAULT_CONFIG: Required<EnsembleConfig> = {
25
31
  stallTokenThreshold: 500,
26
32
  timeoutMs: 30 * 60 * 1000,
27
33
  rateLimitCapacity: 10,
34
+ dashboardPort: 4747,
35
+ peerMessageLimit: 5,
36
+ peerMessageWindowMs: 300_000,
28
37
  }
29
38
 
30
39
  /** Read a JSON config file, returning an empty object on missing/invalid. */
@@ -40,6 +49,9 @@ function readConfigFile(filePath: string): Partial<EnsembleConfig> {
40
49
  if (typeof raw.stallTokenThreshold === "number") result.stallTokenThreshold = raw.stallTokenThreshold
41
50
  if (typeof raw.timeoutMs === "number") result.timeoutMs = raw.timeoutMs
42
51
  if (typeof raw.rateLimitCapacity === "number") result.rateLimitCapacity = raw.rateLimitCapacity
52
+ if (typeof raw.dashboardPort === "number") result.dashboardPort = raw.dashboardPort
53
+ if (typeof raw.peerMessageLimit === "number") result.peerMessageLimit = raw.peerMessageLimit
54
+ if (typeof raw.peerMessageWindowMs === "number") result.peerMessageWindowMs = raw.peerMessageWindowMs
43
55
  return result
44
56
  } catch (err) {
45
57
  if (err && typeof err === "object" && "code" in err && err.code === "ENOENT") return {}
package/src/dashboard-html.ts ADDED
@@ -0,0 +1,91 @@
1
+ /** Dashboard HTML head and body structure. JS is appended separately. */
2
+ export const DASHBOARD_HEAD = `<!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+ <title>Ensemble</title>
8
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6' fill='%2322c55e'/></svg>">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
12
+ <script src="https://cdn.tailwindcss.com"><\/script>
13
+ <script>tailwind.config={theme:{extend:{colors:{base:{950:'#0c0e14',900:'#141822',850:'#1a1f2e',800:'#1e2433',700:'#2a3144',600:'#3a4358'},txt:{100:'#e2e8f0',200:'#c1c9d9',300:'#8892a8',400:'#5e6a82',500:'#4a5568'}},fontFamily:{sans:['Inter','system-ui','sans-serif'],mono:['JetBrains Mono','monospace']}}}}<\/script>
14
+ <style>
15
+ @media(prefers-reduced-motion:no-preference){
16
+ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
17
+ @keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
18
+ @keyframes hl{from{background:rgba(59,130,246,.1)}to{background:transparent}}
19
+ @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
20
+ .pulse{animation:pulse 2s ease-in-out infinite}
21
+ .fadein{animation:fadein .25s ease-out}
22
+ .hl{animation:hl 1.5s ease-out}
23
+ .shimmer{background:linear-gradient(90deg,#22c55e 0%,#4ade80 50%,#22c55e 100%)!important;background-size:200% 100%;animation:shimmer 1.5s ease-in-out}
24
+ }
25
+ .scroll::-webkit-scrollbar{width:5px}.scroll::-webkit-scrollbar-track{background:transparent}.scroll::-webkit-scrollbar-thumb{background:#2a3144;border-radius:3px}
26
+ details summary::-webkit-details-marker{display:none}details summary{list-style:none}
27
+ select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235e6a82' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:22px}
28
+ .xp{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.xp-open{max-height:3000px;transition:max-height .5s ease-in}
29
+ .card-sel{outline:2px solid rgba(59,130,246,.4);outline-offset:1px}
30
+ .md pre{background:#1a1f2e;border:1px solid #1e2433;border-radius:6px;padding:8px 12px;overflow-x:auto;margin:6px 0;font-size:12px;line-height:1.5}
31
+ .md code{background:#1a1f2e;padding:1px 5px;border-radius:3px;font-size:12px}.md pre code{background:none;padding:0}
32
+ .md strong{color:#e2e8f0;font-weight:600}.md em{color:#c1c9d9;font-style:italic}
33
+ .md ul,.md ol{padding-left:18px;margin:4px 0}.md li{margin:2px 0}
34
+ .md h1,.md h2,.md h3{color:#e2e8f0;font-weight:600;margin:8px 0 4px}.md h1{font-size:15px}.md h2{font-size:14px}.md h3{font-size:13px}
35
+ .md a{color:#60a5fa;text-decoration:underline}.md p{margin:4px 0}
36
+ #sco{display:none;position:fixed;inset:0;background:rgba(12,14,20,.85);backdrop-filter:blur(8px);z-index:100;align-items:center;justify-content:center}
37
+ #sco.show{display:flex}
38
+ #drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,85vw);background:#141822;border-left:1px solid #1e2433;z-index:90;transform:translateX(100%);transition:transform .25s ease-out;overflow-y:auto}
39
+ #drawer.open{transform:translateX(0)}
40
+ #drawer-bg{position:fixed;inset:0;background:rgba(12,14,20,.5);z-index:89;display:none}
41
+ #drawer-bg.open{display:block}
42
+ </style>
43
+ </head>
44
+ <body class="bg-base-950 text-txt-100 min-h-screen antialiased font-sans">
45
+ <header class="fixed top-0 inset-x-0 h-11 bg-base-950/95 backdrop-blur border-b border-base-800 flex items-center justify-between px-4 z-50">
46
+ <div class="flex items-center gap-3">
47
+ <span class="font-mono font-semibold text-[13px] tracking-[.08em] text-txt-200">ensemble</span>
48
+ <span class="text-base-700">|</span>
49
+ <select id="sel" class="bg-base-900 border border-base-700 rounded-md px-2 py-[3px] text-[11px] text-txt-200 font-mono outline-none cursor-pointer hover:border-base-600 transition-colors"></select>
50
+ </div>
51
+ <div class="flex items-center gap-4">
52
+ <div id="hring" class="w-6 h-6 rounded-full" title="Team health"></div>
53
+ <div class="flex items-center gap-2">
54
+ <span id="clk" class="text-[11px] text-txt-400 font-mono"></span>
55
+ <span class="text-base-700">·</span>
56
+ <span id="cd" class="w-[7px] h-[7px] rounded-full bg-emerald-500 pulse"></span>
57
+ <span id="ct" class="text-[11px] text-txt-400 font-mono">...</span>
58
+ </div>
59
+ </div>
60
+ </header>
61
+ <div id="sum" class="fixed top-11 inset-x-0 h-8 bg-base-900/80 backdrop-blur border-b border-base-800/50 flex items-center px-4 gap-4 text-[11px] text-txt-300 z-40"></div>
62
+ <main class="pt-[76px] px-4 pb-16">
63
+ <div id="empty" class="hidden flex-col items-center justify-center h-[70vh] gap-3">
64
+ <div class="w-12 h-12 rounded-full border-2 border-base-700 flex items-center justify-center mb-2"><svg class="w-5 h-5 text-txt-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 4.5v15m7.5-7.5h-15"/></svg></div>
65
+ <div class="text-txt-400 text-sm">Waiting for a team</div>
66
+ <div class="text-txt-500 text-[11px]">Run <code class="px-1.5 py-0.5 bg-base-900 rounded text-txt-300 font-mono text-[11px]">team_create</code> in OpenCode to get started</div>
67
+ </div>
68
+ <div id="content" class="hidden">
69
+ <div id="agents" class="grid gap-2 mb-4" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))"></div>
70
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
71
+ <div id="tasks" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div>
72
+ <div id="activity" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div>
73
+ </div>
74
+ </div>
75
+ </main>
76
+ <div id="tl" class="fixed bottom-0 inset-x-0 h-10 bg-base-900/90 backdrop-blur border-t border-base-800 px-4 flex items-center z-40 overflow-x-auto scroll hidden"></div>
77
+ <div id="sco" onclick="this.classList.remove('show')">
78
+ <div class="bg-base-900 border border-base-800 rounded-lg p-6 max-w-sm" onclick="event.stopPropagation()">
79
+ <div class="text-txt-200 font-semibold text-sm mb-4">Keyboard Shortcuts</div>
80
+ <div class="grid grid-cols-2 gap-y-2 gap-x-6 text-[12px]">
81
+ <div><kbd class="px-1.5 py-0.5 bg-base-800 rounded font-mono text-txt-300 text-[11px]">j</kbd> <span class="text-txt-400">Next agent</span></div>
82
+ <div><kbd class="px-1.5 py-0.5 bg-base-800 rounded font-mono text-txt-300 text-[11px]">k</kbd> <span class="text-txt-400">Prev agent</span></div>
83
+ <div><kbd class="px-1.5 py-0.5 bg-base-800 rounded font-mono text-txt-300 text-[11px]">Enter</kbd> <span class="text-txt-400">Expand agent</span></div>
84
+ <div><kbd class="px-1.5 py-0.5 bg-base-800 rounded font-mono text-txt-300 text-[11px]">Esc</kbd> <span class="text-txt-400">Collapse all</span></div>
85
+ <div><kbd class="px-1.5 py-0.5 bg-base-800 rounded font-mono text-txt-300 text-[11px]">1-9</kbd> <span class="text-txt-400">Switch team</span></div>
86
+ <div><kbd class="px-1.5 py-0.5 bg-base-800 rounded font-mono text-txt-300 text-[11px]">?</kbd> <span class="text-txt-400">This help</span></div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ <div id="drawer-bg" onclick="closeDrawer()"></div>
91
+ <div id="drawer" class="scroll p-4"></div>`;
package/src/dashboard-js-part1.ts ADDED
@@ -0,0 +1,97 @@
1
+ /** Dashboard JS — utilities, data helpers, and state management. */
2
+ export const DASHBOARD_JS_PART1 = `
3
+ let S=null,selId=null,fails=0,pollT=Date.now(),prevMC=0,selCard=-1;
4
+ const expCards=new Set(),expMsgs=new Set();
5
+ const E=s=>s?String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'):'';
6
+ const D=ms=>{const s=Math.floor(Math.abs(ms)/1000);return s<60?s+'s':s<3600?Math.floor(s/60)+'m':Math.floor(s/3600)+'h'};
7
+ const T=e=>new Date(e).toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
8
+ function relT(ep){const ms=Date.now()-ep;if(ms<60000)return Math.floor(ms/1000)+'s ago';if(ms<3600000)return Math.floor(ms/60000)+'m ago';if(ms<86400000)return Math.floor(ms/3600000)+'h ago';return T(ep)}
9
+
10
+ // Chip: small readable badge with background tint
11
+ function chip(text,color){
12
+ var colors={
13
+ blue:'bg-blue-500/15 text-blue-400 border-blue-500/20',
14
+ green:'bg-emerald-500/15 text-emerald-400 border-emerald-500/20',
15
+ amber:'bg-amber-500/15 text-amber-400 border-amber-500/20',
16
+ red:'bg-red-500/15 text-red-400 border-red-500/20',
17
+ gray:'bg-base-700/40 text-txt-300 border-base-700/30',
18
+ muted:'bg-base-800/60 text-txt-400 border-base-700/20',
19
+ };
20
+ var c=colors[color]||colors.muted;
21
+ return '<span class="inline-flex items-center px-1.5 py-[1px] rounded text-[10px] font-medium border '+c+'">'+text+'</span>';
22
+ }
23
+
24
+ function md(s){
25
+ let h=E(s);
26
+ h=h.replace(/\`\`\`(\\w*)\\n([\\s\\S]*?)\`\`\`/g,function(_,l,c){return '<pre><code>'+c.trim()+'</code></pre>'});
27
+ h=h.replace(/\`([^\`]+)\`/g,'<code>$1</code>');
28
+ h=h.replace(/^### (.+)$/gm,'<h3>$1</h3>');
29
+ h=h.replace(/^## (.+)$/gm,'<h2>$1</h2>');
30
+ h=h.replace(/^# (.+)$/gm,'<h1>$1</h1>');
31
+ h=h.replace(/\\*\\*(.+?)\\*\\*/g,'<strong>$1</strong>');
32
+ h=h.replace(/\\*(.+?)\\*/g,'<em>$1</em>');
33
+ h=h.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g,'<a href="$2" target="_blank" rel="noopener">$1</a>');
34
+ h=h.replace(/^- (.+)$/gm,'<li>$1</li>');
35
+ h=h.replace(/(<li>.*<\\/li>\\n?)+/g,'<ul>$&</ul>');
36
+ h=h.replace(/^\\d+\\. (.+)$/gm,'<li>$1</li>');
37
+ h=h.replace(/\\n\\n/g,'</p><p>');
38
+ h=h.replace(/\\n/g,'<br>');
39
+ return '<p>'+h+'</p>';
40
+ }
41
+
42
+ function saveD(el){const s={};el.querySelectorAll('details').forEach((d,i)=>{s[i]=d.open});return s}
43
+ function restD(el,s){if(!s)return;el.querySelectorAll('details').forEach((d,i)=>{if(i in s)d.open=s[i]})}
44
+ function saveSc(el){const s=el.querySelector('.scroll');return s?s.scrollTop:0}
45
+ function restSc(el,p){const s=el.querySelector('.scroll');if(s)s.scrollTop=p}
46
+ function patch(el,h){if(el.innerHTML!==h)el.innerHTML=h}
47
+
48
+ const ST={
49
+ busy:{c:'border-blue-500 bg-blue-500/[0.04]',d:'bg-blue-500',t:'text-blue-400',l:'working',dim:false},
50
+ ready:{c:'border-base-700 bg-base-950/50',d:'bg-txt-400',t:'text-txt-400',l:'idle',dim:true},
51
+ shutdown_requested:{c:'border-amber-500/50 bg-amber-500/[0.04]',d:'bg-amber-500',t:'text-amber-400',l:'stopping',dim:false},
52
+ shutdown:{c:'border-base-800 bg-base-950/30',d:'bg-base-700',t:'text-txt-500',l:'done',dim:true},
53
+ error:{c:'border-red-500/50 bg-red-500/[0.04]',d:'bg-red-500',t:'text-red-400',l:'error',dim:false},
54
+ };
55
+ const si=s=>ST[s]||ST.ready;
56
+ const PR={high:'text-red-400 bg-red-500/10 border border-red-500/20',medium:'text-amber-400 bg-amber-500/10 border border-amber-500/20',low:'text-txt-400 bg-base-800 border border-base-700'};
57
+
58
+ function parseR(c){const m=c.match(/<task-result>([\\s\\S]*?)<\\/task-result>/);if(!m)return null;const i=m[1],s=(i.match(/<status>([\\s\\S]*?)<\\/status>/)||[])[1]?.trim(),u=(i.match(/<summary>([\\s\\S]*?)<\\/summary>/)||[])[1]?.trim(),d=(i.match(/<details>([\\s\\S]*?)<\\/details>/)||[])[1]?.trim();return s&&u?{status:s,summary:u,details:d||''}:null}
59
+
60
+ function allTeams(){
61
+ if(!S?.teams)return{active:[],archived:[]};
62
+ const active=[...S.teams.filter(t=>t.status==='active')].sort((a,b)=>b.timeUpdated-a.timeUpdated);
63
+ const archived=[...S.teams.filter(t=>t.status!=='active')].sort((a,b)=>b.timeUpdated-a.timeUpdated);
64
+ return{active,archived};
65
+ }
66
+ function cur(){const{active,archived}=allTeams(),all=[...active,...archived];if(!all.length)return null;if(selId){const t=all.find(t=>t.id===selId);if(t)return t}return active[0]||all[0]}
67
+
68
+ function deriveHealth(t){
69
+ const mm=t.members||[];if(!mm.length)return{w:0,i:0,e:0,d:0,total:0};
70
+ return{w:mm.filter(m=>m.status==='busy').length,i:mm.filter(m=>m.status==='ready').length,e:mm.filter(m=>m.status==='error').length,d:mm.filter(m=>m.status==='shutdown'||m.status==='shutdown_requested').length,total:mm.length};
71
+ }
72
+
73
+ function deriveSparkline(name,msgs){
74
+ const mine=msgs.filter(m=>m.fromName===name).map(m=>m.timeCreated).sort();
75
+ if(mine.length<2)return '';
76
+ const min=mine[0],max=mine[mine.length-1],range=max-min||1;
77
+ const buckets=new Array(12).fill(0);
78
+ mine.forEach(t=>{const idx=Math.min(11,Math.floor((t-min)/range*12));buckets[idx]++});
79
+ const mx=Math.max(...buckets)||1;
80
+ const bars=buckets.map((v,i)=>{const h=Math.max(1,Math.round(v/mx*14));return '<rect x="'+(i*5)+'" y="'+(14-h)+'" width="3.5" height="'+h+'" rx="0.5" fill="currentColor" opacity="'+(0.3+v/mx*0.7)+'"/>'}).join('');
81
+ return '<svg class="inline-block text-blue-500/60" width="60" height="14" viewBox="0 0 60 14">'+bars+'</svg>';
82
+ }
83
+
84
+ function deriveTimeline(t){
85
+ const ev=[];
86
+ (t.members||[]).forEach(m=>{ev.push({t:m.timeCreated,type:'spawn',label:E(m.name)+' spawned',c:'bg-blue-400'});if(m.status==='shutdown')ev.push({t:m.timeUpdated,type:'off',label:E(m.name)+' shut down',c:'bg-txt-500'});if(m.status==='error')ev.push({t:m.timeUpdated,type:'err',label:E(m.name)+' error',c:'bg-red-500'})});
87
+ (t.messages||[]).forEach(m=>{const p=parseR(m.content);ev.push({t:m.timeCreated,type:'msg',label:E(m.fromName)+' \\u2192 '+(E(m.toName)||'all'),c:p?'bg-emerald-500':'bg-blue-400'})});
88
+ (t.tasks||[]).filter(x=>x.status==='completed').forEach(x=>{ev.push({t:x.timeUpdated,type:'done',label:'Task done',c:'bg-emerald-500'})});
89
+ return ev.sort((a,b)=>a.t-b.t).slice(-50);
90
+ }
91
+
92
+ function deriveThreads(msgs){
93
+ const threads={};
94
+ msgs.forEach(m=>{const k=m.fromName;if(!threads[k])threads[k]={from:m.fromName,msgs:[]};threads[k].msgs.push(m)});
95
+ return Object.values(threads).sort((a,b)=>b.msgs[0].timeCreated-a.msgs[0].timeCreated);
96
+ }
97
+ `;
package/src/dashboard-js-part2.ts ADDED
@@ -0,0 +1,233 @@
1
+ /** Dashboard JS — render functions. */
2
+ export const DASHBOARD_JS_PART2 = `
3
+ function rSel(){
4
+ const el=document.getElementById('sel'),{active,archived}=allTeams(),c=cur();
5
+ if(!active.length&&!archived.length){el.innerHTML='<option>No teams</option>';return}
6
+ let h='';
7
+ if(active.length){h+='<optgroup label="Active">';h+=active.map(t=>'<option value="'+t.id+'">'+E(t.name)+' ('+relT(t.timeUpdated)+')</option>').join('');h+='</optgroup>'}
8
+ if(archived.length){h+='<optgroup label="Archived">';h+=archived.slice(0,5).map(t=>'<option value="'+t.id+'">'+E(t.name)+'</option>').join('');if(archived.length>5)h+='<option disabled>+ '+(archived.length-5)+' more</option>';h+='</optgroup>'}
9
+ if(el._lh!==h){el.innerHTML=h;el._lh=h}
10
+ if(c)el.value=c.id;
11
+ }
12
+
13
+ function rHealth(t){
14
+ const el=document.getElementById('hring'),h=deriveHealth(t);
15
+ if(!h.total){el.style.background='conic-gradient(#2a3144 0deg,#2a3144 360deg)';return}
16
+ const total=h.total,segs=[];let deg=0;
17
+ if(h.w){const d=h.w/total*360;segs.push('#3b82f6 '+deg+'deg '+(deg+d)+'deg');deg+=d}
18
+ if(h.i){const d=h.i/total*360;segs.push('#5e6a82 '+deg+'deg '+(deg+d)+'deg');deg+=d}
19
+ if(h.e){const d=h.e/total*360;segs.push('#ef4444 '+deg+'deg '+(deg+d)+'deg');deg+=d}
20
+ if(h.d){const d=h.d/total*360;segs.push('#2a3144 '+deg+'deg '+(deg+d)+'deg');deg+=d}
21
+ el.style.background='conic-gradient('+segs.join(',')+')';
22
+ el.style.mask='radial-gradient(circle at center,transparent 7px,black 8px)';
23
+ el.style.webkitMask=el.style.mask;
24
+ }
25
+
26
+ function rClock(t){
27
+ const el=document.getElementById('clk');
28
+ const now=new Date();
29
+ const hh=String(now.getHours()).padStart(2,'0'),mm=String(now.getMinutes()).padStart(2,'0'),ss=String(now.getSeconds()).padStart(2,'0');
30
+ const uptime=t?D(Date.now()-t.timeCreated):'';
31
+ el.textContent=hh+':'+mm+':'+ss+(uptime?' \\u00B7 '+uptime:'');
32
+ }
33
+
34
+ function rSum(t){
35
+ const el=document.getElementById('sum'),mm=t.members||[],tk=t.tasks||[],msgs=t.messages||[];
36
+ const h=deriveHealth(t),tc=tk.filter(x=>x.status==='completed').length;
37
+ patch(el,
38
+ '<span class="w-[6px] h-[6px] rounded-full '+(t.status==='active'?'bg-emerald-500':'bg-txt-500')+'"></span>'+
39
+ '<span class="font-mono font-semibold text-txt-200">'+E(t.name)+'</span>'+
40
+ (mm.length?chip(mm.length+' agent'+(mm.length!==1?'s':''),'gray'):'')+
41
+ (h.w?chip(h.w+' working','blue'):'')+
42
+ (h.i?chip(h.i+' idle','muted'):'')+
43
+ (h.d?chip(h.d+' done','muted'):'')+
44
+ (h.e?chip(h.e+' error','red'):'')+
45
+ (tk.length?chip(tc+'/'+tk.length+' tasks','green'):'')+
46
+ (msgs.length?chip(msgs.length+' msgs','muted'):'')
47
+ );
48
+ }
49
+
50
+ function rAgents(t){
51
+ const el=document.getElementById('agents'),mm=t.members||[];
52
+ if(!mm.length){patch(el,'<div class="col-span-full text-center py-12"><div class="text-txt-400 text-sm mb-1">No agents yet</div><div class="text-txt-500 text-[11px]">Spawn teammates with <code class="px-1 py-0.5 bg-base-900 rounded font-mono text-[10px]">team_spawn</code></div></div>');return}
53
+ const n=Date.now(),msgs=t.messages||[],sorted=[...mm].sort((a,b)=>{const o={busy:0,ready:1,shutdown_requested:2,error:3,shutdown:4};return(o[a.status]??5)-(o[b.status]??5)});
54
+ const html=sorted.map((m,idx)=>{
55
+ const s=si(m.status),task=(t.tasks||[]).find(x=>x.assignee===m.name&&x.status==='in_progress'),msg=msgs.find(x=>x.fromName===m.name);
56
+ const d=D(n-m.timeUpdated),mi=msg?relT(msg.timeCreated):'\\u2014';
57
+ const tt=task?.content,tr=tt&&tt.length>90?tt.slice(0,90)+'\\u2026':tt;
58
+ const spark=deriveSparkline(m.name,msgs);
59
+ const isSel=selCard===idx;
60
+ return '<div class="rounded-lg border '+s.c+' p-3 transition-all duration-300 cursor-pointer hover:border-base-600'+(s.dim?' opacity-50 hover:opacity-70':'')+(isSel?' card-sel':'')+'" data-card="'+E(m.name)+'" onclick="openDrawer(\\''+E(m.name)+'\\')">'+
61
+ '<div class="flex items-center gap-2">'+
62
+ '<span class="w-[8px] h-[8px] rounded-full '+s.d+(m.status==='busy'?' pulse':'')+' shrink-0"></span>'+
63
+ '<span class="font-mono font-semibold text-[14px] truncate">'+E(m.name)+'</span>'+
64
+ '<span class="text-[10px] px-1.5 py-[1px] rounded '+s.t+' bg-base-800/80 shrink-0">'+s.l+'</span>'+
65
+ spark+
66
+ '<span class="text-[10px] text-txt-500 ml-auto shrink-0">'+E(m.agent)+'</span>'+
67
+ '</div>'+
68
+ (tr?'<div class="mt-2 text-[13px] text-txt-200 leading-snug truncate">'+E(tr)+'</div>':'')+
69
+ '<div class="mt-2 flex items-center gap-1.5 flex-wrap">'+
70
+ chip(d,'muted')+chip('msg '+mi,'muted')+
71
+ (m.worktreeBranch?chip(E(m.worktreeBranch),'muted'):'')+
72
+ '</div></div>';
73
+ }).join('');
74
+ patch(el,html);
75
+ }
76
+
77
+ function openDrawer(name){
78
+ var t=cur();if(!t)return;
79
+ var m=(t.members||[]).find(x=>x.name===name);if(!m)return;
80
+ var s=si(m.status),msgs=(t.messages||[]).filter(x=>x.fromName===name);
81
+ var h='';
82
+ // Header
83
+ h+='<div class="flex items-center justify-between mb-4">';
84
+ h+='<div class="flex items-center gap-2"><span class="w-[10px] h-[10px] rounded-full '+s.d+(m.status==='busy'?' pulse':'')+'"></span><span class="font-mono font-semibold text-[16px]">'+E(m.name)+'</span><span class="text-[11px] px-2 py-[2px] rounded '+s.t+' bg-base-800/80">'+s.l+'</span></div>';
85
+ h+='<button onclick="closeDrawer()" class="text-txt-500 hover:text-txt-200 transition-colors p-1"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>';
86
+ h+='</div>';
87
+ // Meta chips
88
+ var meta=[];
89
+ meta.push(chip(E(m.agent),'gray'));
90
+ if(m.model)meta.push(chip(E(m.model),'gray'));
91
+ meta.push(chip(E(m.executionStatus||m.status),m.status==='busy'?'blue':m.status==='error'?'red':'muted'));
92
+ if(m.planApproval&&m.planApproval!=='none')meta.push(chip(E(m.planApproval),m.planApproval==='approved'?'green':m.planApproval==='rejected'?'red':'amber'));
93
+ meta.push(chip('spawned '+relT(m.timeCreated),'muted'));
94
+ if(m.worktreeBranch)meta.push(chip(E(m.worktreeBranch),'muted'));
95
+ h+='<div class="flex flex-wrap gap-1.5 mb-4 pb-4 border-b border-base-800/50">'+meta.join('')+'</div>';
96
+ // Prompt
97
+ if(m.prompt){
98
+ h+='<div class="mb-4"><div class="text-txt-400 text-[10px] uppercase tracking-wider mb-2">Original Prompt</div>';
99
+ h+='<div class="text-[13px] text-txt-200 md bg-base-800/20 rounded-lg p-3 border border-base-800/30">'+md(m.prompt)+'</div></div>';
100
+ }
101
+ // Chat log
102
+ h+='<div class="text-txt-400 text-[10px] uppercase tracking-wider mb-3">Conversation</div>';
103
+ if(!msgs.length){h+='<div class="text-txt-500 text-[12px]">No messages yet</div>'}
104
+ else{
105
+ // Get all messages involving this agent (sent or received)
106
+ var allMsgs=(t.messages||[]).filter(function(x){return x.fromName===name||x.toName===name});
107
+ allMsgs.sort(function(a,b){return a.timeCreated-b.timeCreated});
108
+ allMsgs.forEach(function(am){
109
+ var isAgent=am.fromName===name;
110
+ var p=parseR(am.content);
111
+ var deliv=am.delivered?(am.read?'\\u2713\\u2713':'\\u2713'):'';
112
+ var align=isAgent?'mr-8':'ml-8';
113
+ var bubbleBg=isAgent?'bg-blue-500/[0.07] border-blue-500/20':'bg-base-800/40 border-base-700/30';
114
+ var sender=isAgent?E(am.fromName):'lead';
115
+ h+='<div class="mb-2 '+align+'">';
116
+ h+='<div class="rounded-xl border '+bubbleBg+' p-3">';
117
+ h+='<div class="flex items-center gap-2 mb-1.5">';
118
+ h+='<span class="text-[10px] font-medium '+(isAgent?'text-blue-400':'text-txt-300')+'">'+sender+'</span>';
119
+ h+=chip(relT(am.timeCreated),'muted');
120
+ if(am.toName)h+=chip('\\u2192 '+E(am.toName),'muted');
121
+ if(deliv)h+='<span class="text-txt-500 text-[10px] ml-auto">'+deliv+'</span>';
122
+ h+='</div>';
123
+ if(p){
124
+ h+='<div class="mb-1">'+chip(E(p.status),p.status==='completed'?'green':'red')+' <span class="text-[13px] text-txt-200 font-medium">'+E(p.summary)+'</span></div>';
125
+ if(p.details)h+='<div class="text-[12px] text-txt-300 md mt-2">'+md(p.details)+'</div>';
126
+ }else{
127
+ h+='<div class="text-[12px] text-txt-300 md">'+md(am.content)+'</div>';
128
+ }
129
+ h+='</div></div>';
130
+ });
131
+ }
132
+ document.getElementById('drawer').innerHTML=h;
133
+ document.getElementById('drawer').classList.add('open');
134
+ document.getElementById('drawer-bg').classList.add('open');
135
+ }
136
+
137
+ function closeDrawer(){
138
+ document.getElementById('drawer').classList.remove('open');
139
+ document.getElementById('drawer-bg').classList.remove('open');
140
+ }
141
+
142
+ function rTasks(t){
143
+ const el=document.getElementById('tasks'),tk=t.tasks||[];
144
+ if(!tk.length){patch(el,'<div class="text-txt-500 text-sm py-6 text-center">No tasks yet</div>');return}
145
+ const c=tk.filter(x=>x.status==='completed').length,pct=Math.max(Math.round(c/tk.length*100),tk.length>0?2:0);
146
+ const allDone=c===tk.length&&tk.length>0;
147
+ const g={in_progress:[],pending:[],completed:[],blocked:[],cancelled:[]};for(const x of tk)(g[x.status]||(g[x.status]=[])).push(x);
148
+ const ds=saveD(el);
149
+ const taskMap={};tk.forEach(x=>{taskMap[x.id]=x});
150
+ function grp(label,items,dc,defOpen){
151
+ if(!items.length)return'';
152
+ const rows=items.map(x=>{
153
+ const ic=x.status==='completed'?'\\u2713':x.status==='in_progress'?'\\u25CF':'\\u25CB';
154
+ const icl=x.status==='completed'?'text-emerald-500':x.status==='in_progress'?'text-blue-400':'text-txt-500';
155
+ const p=PR[x.priority]||PR.low,cn=x.content.length>55?x.content.slice(0,55)+'\\u2026':x.content;
156
+ let dep='';
157
+ if(x.dependsOn){const parent=taskMap[x.dependsOn];dep='<div class="text-[10px] text-txt-500 mt-0.5">\\u2514\\u2192 '+(parent?E(parent.content.slice(0,30)):E(x.dependsOn))+'</div>'}
158
+ return '<div class="flex items-start gap-2 py-1.5 px-1 rounded hover:bg-base-800/40 transition-colors">'+
159
+ '<span class="'+icl+' text-[11px] mt-[2px] shrink-0">'+ic+'</span>'+
160
+ '<div class="flex-1 min-w-0"><div class="text-[13px] text-txt-200 truncate">'+E(cn)+'</div>'+
161
+ '<div class="flex gap-2 mt-1 text-[10px]"><span class="rounded px-1.5 py-[0px] '+p+'">'+E(x.priority)+'</span>'+
162
+ '<span class="text-txt-500">'+(E(x.assignee)||'unassigned')+'</span></div>'+dep+'</div></div>';
163
+ }).join('');
164
+ return '<details '+(defOpen?'open':'')+'><summary class="flex items-center gap-2 text-[11px] text-txt-300 cursor-pointer py-1.5 hover:text-txt-200 transition-colors select-none">'+
165
+ '<svg class="w-3 h-3 transition-transform [details[open]>summary>&]:rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>'+
166
+ '<span class="w-[6px] h-[6px] rounded-full '+dc+'"></span>'+label+' <span class="text-txt-500">('+items.length+')</span></summary>'+
167
+ '<div class="ml-5 mt-1">'+rows+'</div></details>';
168
+ }
169
+ el.innerHTML='<div class="flex items-center gap-3 mb-3">'+
170
+ '<span class="text-[11px] text-txt-300 font-semibold uppercase tracking-wider">Tasks</span>'+
171
+ '<div class="flex-1 bg-base-800 rounded-full h-[5px]"><div class="'+(allDone?'shimmer':'bg-emerald-500')+' h-[5px] rounded-full transition-all duration-500" style="width:'+pct+'%"></div></div>'+
172
+ '<span class="text-[11px] text-txt-400 font-mono">'+c+'/'+tk.length+'</span>'+
173
+ (allDone?'<span class="text-emerald-400 text-[10px] font-medium">All complete</span>':'')+
174
+ '</div>'+
175
+ grp('In Progress',g.in_progress,'bg-blue-500',true)+grp('Pending',g.pending,'bg-txt-500',true)+grp('Blocked',g.blocked||[],'bg-amber-500',true)+grp('Completed',g.completed,'bg-emerald-500',false);
176
+ restD(el,ds);
177
+ }
178
+
179
+ function rActivity(t){
180
+ const el=document.getElementById('activity'),msgs=t.messages||[];
181
+ if(!msgs.length){patch(el,'<div class="text-txt-500 text-sm py-6 text-center">Waiting for agent messages...</div>');return}
182
+ const sp=saveSc(el);
183
+ const newCount=msgs.length,hasNew=newCount>prevMC&&prevMC>0;
184
+ let html='<div class="text-[11px] text-txt-300 font-semibold uppercase tracking-wider mb-3">Activity '+chip(msgs.length+' msgs','muted')+'</div>';
185
+ html+='<div class="max-h-[50vh] overflow-y-auto scroll space-y-2">';
186
+ msgs.slice(0,30).forEach(function(m,mi){
187
+ const isNew=hasNew&&mi<(newCount-prevMC);
188
+ const isExp=expMsgs.has(m.id);
189
+ const p=parseR(m.content);
190
+ const deliv=m.delivered?(m.read?'\\u2713\\u2713':'\\u2713'):'';
191
+ const isFromAgent=m.fromName!=='lead'&&m.fromName!=='system';
192
+ const isPeer=isFromAgent&&m.toName&&m.toName!=='lead'&&m.toName!=='all';
193
+ const align=isFromAgent?'mr-6':'ml-6';
194
+ const bubbleBg=isPeer?'bg-violet-500/[0.06] border-violet-500/15':isFromAgent?'bg-blue-500/[0.06] border-blue-500/15':'bg-base-800/40 border-base-700/30';
195
+ const initial=m.fromName.charAt(0).toUpperCase();
196
+ const avatarColor=m.fromName==='system'?'bg-amber-500/20 text-amber-400':isPeer?'bg-violet-500/20 text-violet-400':isFromAgent?'bg-blue-500/20 text-blue-400':'bg-emerald-500/20 text-emerald-400';
197
+ html+='<div class="'+align+(isNew?' hl':'')+' cursor-pointer" data-msg="'+E(m.id)+'" onclick="toggleMsg(\\''+E(m.id)+'\\')">';
198
+ html+='<div class="flex items-start gap-2">';
199
+ html+='<span class="w-5 h-5 rounded-full '+avatarColor+' flex items-center justify-center text-[9px] font-semibold shrink-0 mt-0.5">'+E(initial)+'</span>';
200
+ html+='<div class="flex-1 min-w-0 rounded-xl border '+bubbleBg+' px-3 py-2">';
201
+ html+='<div class="flex items-center gap-1.5 mb-1">';
202
+ html+='<span class="text-[11px] font-medium '+(isPeer?'text-violet-400':isFromAgent?'text-blue-400':'text-txt-300')+'">'+E(m.fromName)+'</span>';
203
+ if(m.toName)html+=chip('\\u2192 '+E(m.toName),'muted');
204
+ html+=chip(relT(m.timeCreated),'muted');
205
+ if(deliv)html+='<span class="text-txt-500 text-[10px] ml-auto">'+deliv+'</span>';
206
+ html+='</div>';
207
+ if(p){
208
+ html+='<div>'+chip(E(p.status),p.status==='completed'?'green':'red')+' <span class="text-[13px] text-txt-200">'+E(p.summary)+'</span></div>';
209
+ if(isExp&&p.details)html+='<div class="mt-2 text-[12px] text-txt-300 md">'+md(p.details)+'</div>';
210
+ if(!isExp&&p.details)html+='<div class="mt-1 text-[10px] text-txt-500">Click to expand details</div>';
211
+ }else{
212
+ if(isExp){html+='<div class="text-[12px] text-txt-300 md">'+md(m.content)+'</div>'}
213
+ else{const preview=m.content.length>120?m.content.slice(0,120)+'\\u2026':m.content;html+='<div class="text-[13px] text-txt-300 truncate">'+E(preview)+'</div>'}
214
+ }
215
+ html+='</div></div></div>';
216
+ });
217
+ if(msgs.length>30)html+='<div class="text-center text-[10px] text-txt-500 py-2">+'+(msgs.length-30)+' older messages</div>';
218
+ html+='</div>';
219
+ prevMC=newCount;
220
+ el.innerHTML=html;
221
+ restSc(el,sp);
222
+ }
223
+
224
+ function rTimeline(t){
225
+ const el=document.getElementById('tl'),evs=deriveTimeline(t);
226
+ if(!evs.length){el.classList.add('hidden');return}
227
+ el.classList.remove('hidden');
228
+ const html=evs.map(ev=>{
229
+ return '<div class="flex flex-col items-center mx-1 shrink-0 group" title="'+E(ev.label)+' \\u00B7 '+relT(ev.t)+'"><div class="w-[6px] h-[6px] rounded-full '+ev.c+' group-hover:scale-150 transition-transform"></div><div class="text-[8px] text-txt-500 mt-0.5 hidden group-hover:block whitespace-nowrap">'+E(ev.label)+'</div></div>';
230
+ }).join('<div class="w-3 h-px bg-base-700 shrink-0 self-center"></div>');
231
+ patch(el,'<span class="text-[9px] text-txt-500 uppercase tracking-wider mr-3 shrink-0">Timeline</span>'+html);
232
+ }
233
+ `;
package/src/dashboard-js-part3.ts ADDED
@@ -0,0 +1,50 @@
1
+ /** Dashboard JS — interaction handlers, keyboard, polling. */
2
+ export const DASHBOARD_JS_PART3 = `
3
+ function toggleMsg(id){if(expMsgs.has(id))expMsgs.delete(id);else expMsgs.add(id);render()}
4
+
5
+ function render(){
6
+ rSel();const t=cur();
7
+ const empty=document.getElementById('empty'),content=document.getElementById('content');
8
+ if(!t){empty.classList.remove('hidden');empty.classList.add('flex');content.classList.add('hidden');document.getElementById('tl').classList.add('hidden');return}
9
+ empty.classList.add('hidden');empty.classList.remove('flex');content.classList.remove('hidden');
10
+ rHealth(t);rSum(t);rAgents(t);rTasks(t);rActivity(t);rTimeline(t);
11
+ }
12
+
13
+ function conn(ok){
14
+ document.getElementById('cd').className='w-[7px] h-[7px] rounded-full '+(ok?'bg-emerald-500 pulse':'bg-red-500');
15
+ document.getElementById('ct').textContent=ok?D(Date.now()-pollT)+' ago':'disconnected';
16
+ }
17
+
18
+ async function poll(){try{S=await(await fetch('/api/state')).json();fails=0;pollT=Date.now();conn(true);render()}catch{if(++fails>=3)conn(false)}}
19
+
20
+ // Clock update every second
21
+ setInterval(function(){var t=cur();if(t)rClock(t);if(fails<3)conn(true)},1000);
22
+
23
+ // Poll every 2.5s
24
+ setInterval(poll,2500);
25
+
26
+ // Keyboard shortcuts
27
+ document.addEventListener('keydown',function(e){
28
+ if(e.target.tagName==='INPUT'||e.target.tagName==='SELECT'||e.target.tagName==='TEXTAREA')return;
29
+ var t=cur();if(!t)return;
30
+ var mm=t.members||[];
31
+ if(e.key==='?'){e.preventDefault();document.getElementById('sco').classList.toggle('show');return}
32
+ if(e.key==='Escape'){closeDrawer();expMsgs.clear();selCard=-1;document.getElementById('sco').classList.remove('show');render();return}
33
+ if(e.key==='j'&&mm.length){e.preventDefault();selCard=Math.min(selCard+1,mm.length-1);render();return}
34
+ if(e.key==='k'&&mm.length){e.preventDefault();selCard=Math.max(selCard-1,0);render();return}
35
+ if(e.key==='Enter'&&selCard>=0&&selCard<mm.length){e.preventDefault();openDrawer(mm[selCard].name);return}
36
+ if(e.key>='1'&&e.key<='9'){
37
+ var teams=allTeams(),all=[...teams.active,...teams.archived];
38
+ var idx=parseInt(e.key)-1;
39
+ if(idx<all.length){selId=all[idx].id;render()}
40
+ }
41
+ });
42
+
43
+ // Select handler
44
+ document.getElementById('sel').addEventListener('change',function(){selId=this.value;render()});
45
+
46
+ // Initial poll
47
+ poll();
48
+
49
+ console.log('%c Ensemble Mission Control','font-size:14px;font-weight:bold;color:#22c55e');
50
+ `;