@hueyexe/opencode-ensemble 0.13.1 → 0.13.3

package/README.md

@@ -1,8 +1,12 @@
+<p align="center">
+  <img src="social-preview.png" alt="OpenCode Ensemble - Parallel agents. One coordinated team." width="100%">
+</p>
+
 # OpenCode Ensemble
 
 [![npm version](https://img.shields.io/npm/v/@hueyexe/opencode-ensemble.svg)](https://www.npmjs.com/package/@hueyexe/opencode-ensemble)
 [![npm downloads](https://img.shields.io/npm/dm/@hueyexe/opencode-ensemble.svg)](https://www.npmjs.com/package/@hueyexe/opencode-ensemble)
-[![tests](https://img.shields.io/badge/tests-492%20passing-brightgreen.svg)]()
+[![tests](https://img.shields.io/badge/tests-512%20passing-brightgreen.svg)]()
 [![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg)]()
 [![OpenCode SDK](https://img.shields.io/badge/deps-OpenCode%20SDK%20only-blue.svg)]()
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
@@ -15,7 +19,7 @@ Plugin built on the public OpenCode SDK. No internal dependencies.
 
 ```json
 {
-  "plugin": ["@hueyexe/opencode-ensemble@0.13.1"]
+  "plugin": ["@hueyexe/opencode-ensemble@0.13.3"]
 }
 ```
 
@@ -136,7 +140,7 @@ Add to your OpenCode config with a pinned version. Project-level or global.
 
 ```json
 {
-  "plugin": ["@hueyexe/opencode-ensemble@0.13.1"]
+  "plugin": ["@hueyexe/opencode-ensemble@0.13.3"]
 }
 ```
 
@@ -144,7 +148,7 @@ Add to your OpenCode config with a pinned version. Project-level or global.
 
 ```json
 {
-  "plugin": ["@hueyexe/opencode-ensemble@0.13.1"]
+  "plugin": ["@hueyexe/opencode-ensemble@0.13.3"]
 }
 ```
 
@@ -406,7 +410,7 @@ Same coordination model (shared tasks, peer messaging, lead coordination) with s
 ```bash
 bun install
 bun run typecheck
-bun test             # 492 tests
+bun test             # 512 tests
 bun run build
 ```
 

package/dist/index.js

@@ -15987,7 +15987,7 @@ function buildLeadSystemPrompt(db, teamId, config2) {
     }
     lines.push(`If user picks "I'll choose per agent", ask for each agent's model individually before each team_spawn call.`, "Pass the chosen model via the model parameter on each team_spawn call.");
   }
-  lines.push("", "Spawn teammates ONE AT A TIME. Wait for each tool result before spawning the next.", "This avoids git worktree contention. Once all are spawned, wait for their messages.", "", "Teammates work asynchronously and message you when done.", "Do NOT poll team_status or team_tasks_list repeatedly \u2014 wait for messages.", "After spawning all teammates, tell the user what you've set up and wait.", "When all teammates finish, summarize results and suggest next steps.", "", "MERGE WORKFLOW:", "After a teammate finishes and you shut them down, use team_merge to merge their branch.", "Do NOT tell teammates to commit \u2014 they handle that themselves.", "Do NOT run git merge manually \u2014 use team_merge which squash-merges and unstages for you.", "team_cleanup will safety-net merge any branches you forgot, but prefer explicit team_merge.", "", "Before calling team_cleanup, verify teammates have committed their work.", "team_shutdown will warn you if a teammate has uncommitted changes.", "team_cleanup will block if any worktree has uncommitted changes \u2014 merge or commit first.");
+  lines.push("", "Spawn teammates ONE AT A TIME. Wait for each tool result before spawning the next.", "This avoids git worktree contention. Once all are spawned, wait for their messages.", "Read-only agents (explore, plan) automatically skip worktree creation.", "For other agents that only need to read, pass worktree: false to avoid unnecessary isolation.", "", "Teammates work asynchronously and message you when done.", "Do NOT poll team_status or team_tasks_list repeatedly \u2014 wait for messages.", "After spawning all teammates, tell the user what you've set up and wait.", "When all teammates finish, summarize results and suggest next steps.", "", "MERGE WORKFLOW:", "After a teammate finishes and you shut them down, use team_merge to merge their branch.", "Do NOT tell teammates to commit \u2014 they handle that themselves.", "Do NOT run git merge manually \u2014 use team_merge which squash-merges and unstages for you.", "team_cleanup will safety-net merge any branches you forgot, but prefer explicit team_merge.", "", "Before calling team_cleanup, verify teammates have committed their work.", "team_shutdown will warn you if a teammate has uncommitted changes.", "team_cleanup will block if any worktree has uncommitted changes \u2014 merge or commit first.");
   return lines.join(`
 `);
 }
@@ -16271,7 +16271,7 @@ var DASHBOARD_HEAD = `<!DOCTYPE html>
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
 <script src="https://cdn.tailwindcss.com"></script>
-<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>
+<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:'#aab4c6',400:'#8a96aa',500:'#7b879b'}},fontFamily:{sans:['Inter','system-ui','sans-serif'],mono:['JetBrains Mono','monospace']}}}}</script>
 <style>
 @media(prefers-reduced-motion:no-preference){
 @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@@ -16283,8 +16283,10 @@ var DASHBOARD_HEAD = `<!DOCTYPE html>
 .hl{animation:hl 1.5s ease-out}
 .shimmer{background:linear-gradient(90deg,#22c55e 0%,#4ade80 50%,#22c55e 100%)!important;background-size:200% 100%;animation:shimmer 1.5s ease-in-out}
 }
+@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
 .scroll::-webkit-scrollbar{width:5px}.scroll::-webkit-scrollbar-track{background:transparent}.scroll::-webkit-scrollbar-thumb{background:#2a3144;border-radius:3px}
 details summary::-webkit-details-marker{display:none}details summary{list-style:none}
+:focus-visible{outline:2px solid rgba(96,165,250,.85);outline-offset:2px}
 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}
 .xp{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.xp-open{max-height:3000px;transition:max-height .5s ease-in}
 .card-sel{outline:2px solid rgba(59,130,246,.4);outline-offset:1px}
@@ -16303,13 +16305,13 @@ select{-webkit-appearance:none;appearance:none;background-image:url("data:image/
 </style>
 </head>
 <body class="bg-base-950 text-txt-100 min-h-screen antialiased font-sans">
-<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">
-<div class="flex items-center gap-3">
+<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-3 sm:px-4 z-50">
+<div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
 <span class="font-mono font-semibold text-[13px] tracking-[.08em] text-txt-200">ensemble</span>
 <span class="text-base-700">|</span>
-<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>
+<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 max-w-[180px] sm:max-w-[320px] min-w-0"></select>
 </div>
-<div class="flex items-center gap-4">
+<div class="flex items-center gap-2 sm:gap-4 shrink-0">
 <div id="hring" class="w-6 h-6 rounded-full" title="Team health"></div>
 <div class="flex items-center gap-2">
 <span id="clk" class="text-[11px] text-txt-400 font-mono"></span>
@@ -16319,25 +16321,28 @@ select{-webkit-appearance:none;appearance:none;background-image:url("data:image/
 </div>
 </div>
 </header>
-<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>
+<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-3 sm:px-4 gap-3 sm:gap-4 text-[11px] text-txt-300 z-40 overflow-x-auto scroll whitespace-nowrap"></div>
 <main class="pt-[76px] px-4 pb-16">
 <div id="empty" class="hidden flex-col items-center justify-center h-[70vh] gap-3">
 <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>
 <div class="text-txt-400 text-sm">Waiting for a team</div>
 <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>
 </div>
-<div id="content" class="hidden">
-<div id="agents" class="grid gap-2 mb-4" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))"></div>
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-<div id="tasks" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div>
-<div id="activity" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div>
+<div id="content" class="hidden max-w-[1600px] mx-auto">
+<section id="attention" aria-label="Team attention" class="mb-3"></section>
+<div class="grid grid-cols-1 xl:grid-cols-[minmax(360px,1.35fr)_minmax(320px,.8fr)] gap-4 items-start">
+<section aria-label="Agent roster"><div id="agents" class="grid gap-2" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))"></div></section>
+<div class="grid grid-cols-1 gap-4">
+<section aria-label="Task board"><div id="tasks" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div></section>
+<section aria-label="Activity feed"><div id="activity" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div></section>
+</div>
 </div>
 </div>
 </main>
-<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>
-<div id="sco" onclick="this.classList.remove('show')">
+<div id="tl" aria-label="Event timeline" 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>
+<div id="sco" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="shortcuts-title" tabindex="-1" onclick="closeShortcuts()">
 <div class="bg-base-900 border border-base-800 rounded-lg p-6 max-w-sm" onclick="event.stopPropagation()">
-<div class="text-txt-200 font-semibold text-sm mb-4">Keyboard Shortcuts</div>
+<div id="shortcuts-title" class="text-txt-200 font-semibold text-sm mb-4">Keyboard Shortcuts</div>
 <div class="grid grid-cols-2 gap-y-2 gap-x-6 text-[12px]">
 <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>
 <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>
@@ -16349,7 +16354,7 @@ select{-webkit-appearance:none;appearance:none;background-image:url("data:image/
 </div>
 </div>
 <div id="drawer-bg" onclick="closeDrawer()"></div>
-<div id="drawer" class="scroll p-4"></div>`;
+<div id="drawer" class="scroll p-4" tabindex="-1" inert role="dialog" aria-modal="true" aria-labelledby="drawer-title" aria-hidden="true"><h2 id="drawer-title" class="sr-only">Agent detail</h2></div>`;
 
 // src/dashboard-js-part1.ts
 var DASHBOARD_JS_PART1 = `
@@ -16423,6 +16428,40 @@ function deriveHealth(t){
   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};
 }
 
+function lastMessageFor(name,msgs){return msgs.filter(m=>m.fromName===name||m.toName===name).sort((a,b)=>b.timeCreated-a.timeCreated)[0]||null}
+function activeTaskFor(name,tasks){return tasks.find(x=>x.assignee===name&&x.status==='in_progress')||tasks.find(x=>x.assignee===name&&x.status==='blocked')||null}
+function blockedTaskFor(name,tasks){return tasks.find(x=>x.assignee===name&&x.status==='blocked')||null}
+
+function rankAgent(a,b,t){
+  const tasks=t?.tasks||[],msgs=t?.messages||[];
+  const score=m=>{
+    const lm=lastMessageFor(m.name,msgs),bt=blockedTaskFor(m.name,tasks);
+    let s=0;
+    if(m.status==='error')s-=1000;
+    if(bt)s-=800;
+    if(m.status==='shutdown_requested')s-=650;
+    if(m.status==='busy')s-=500;
+    if(m.status==='ready'&&activeTaskFor(m.name,tasks))s-=350;
+    if(lm)s-=Math.max(0,200-Math.floor((Date.now()-lm.timeCreated)/60000));
+    if(m.status==='shutdown')s+=700;
+    return s;
+  };
+  const d=score(a)-score(b);return d||String(a.name).localeCompare(String(b.name));
+}
+
+function deriveAttention(t){
+  const tasks=t.tasks||[],msgs=t.messages||[];
+  const blocked=tasks.filter(x=>x.status==='blocked'),running=tasks.filter(x=>x.status==='in_progress');
+  const errored=(t.members||[]).filter(m=>m.status==='error');
+  const stopping=(t.members||[]).filter(m=>m.status==='shutdown_requested');
+  const latest=msgs[0]||null;
+  const items=[];
+  errored.forEach(m=>items.push({kind:'Agent error',label:m.name,detail:m.executionStatus||m.status,color:'red'}));
+  blocked.forEach(x=>items.push({kind:'Blocked task',label:x.assignee||'unassigned',detail:x.content,color:'amber'}));
+  stopping.forEach(m=>items.push({kind:'Stopping',label:m.name,detail:'shutdown requested',color:'amber'}));
+  return{items,running,latest,blocked,errored};
+}
+
 function deriveSparkline(name,msgs){
   const mine=msgs.filter(m=>m.fromName===name).map(m=>m.timeCreated).sort();
   if(mine.length<2)return '';
@@ -16498,17 +16537,32 @@ function rSum(t){
   );
 }
 
+function rAttention(t){
+  const el=document.getElementById('attention'),a=deriveAttention(t),h=deriveHealth(t),tk=t.tasks||[];
+  const tone=a.items.length?'border-amber-500/30 bg-amber-500/[0.05]':'border-emerald-500/20 bg-emerald-500/[0.035]';
+  const lead=a.items.length?'Needs attention':'No blockers detected';
+  const chips=[chip(h.w+' working','blue'),chip(a.running.length+' active tasks','green'),chip(a.blocked.length+' blocked',a.blocked.length?'amber':'muted'),chip(tk.filter(x=>x.status==='pending').length+' pending','muted')];
+  let html='<div class="rounded-lg border '+tone+' px-3 py-2 flex flex-col md:flex-row md:items-center gap-2 md:gap-4">';
+  html+='<div class="min-w-[180px]"><div class="text-[10px] uppercase tracking-[.16em] text-txt-500">Team attention</div><div class="text-[14px] font-semibold text-txt-100">'+lead+'</div></div>';
+  html+='<div class="flex flex-wrap gap-1.5">'+chips.join('')+'</div>';
+  if(a.items.length){html+='<div class="flex-1 grid gap-1 md:grid-cols-2">'+a.items.slice(0,4).map(x=>'<div class="text-[12px] text-txt-200 truncate">'+chip(E(x.kind),x.color)+' <span class="font-mono">'+E(x.label)+'</span> <span class="text-txt-400">'+E(x.detail)+'</span></div>').join('')+'</div>'}
+  else if(a.latest){html+='<div class="text-[12px] text-txt-400 truncate md:ml-auto">Latest: <span class="text-txt-200">'+E(a.latest.fromName)+'</span> '+relT(a.latest.timeCreated)+'</div>'}
+  html+='</div>';
+  patch(el,html);
+}
+
 function rAgents(t){
   const el=document.getElementById('agents'),mm=t.members||[];
   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}
-  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)});
+  const n=Date.now(),msgs=t.messages||[],sorted=[...mm].sort((a,b)=>rankAgent(a,b,t));
   const html=sorted.map((m,idx)=>{
-    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);
+    const s=si(m.status),task=activeTaskFor(m.name,t.tasks||[]),msg=lastMessageFor(m.name,msgs),blocked=blockedTaskFor(m.name,t.tasks||[]);
     const d=D(n-m.timeUpdated),mi=msg?relT(msg.timeCreated):'\\u2014';
     const tt=task?.content,tr=tt&&tt.length>90?tt.slice(0,90)+'\\u2026':tt;
+    const mp=msg?(msg.content.length>90?msg.content.slice(0,90)+'\\u2026':msg.content):'';
     const spark=deriveSparkline(m.name,msgs);
     const isSel=selCard===idx;
-    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)+'\\')">'+
+    return '<button type="button" class="text-left rounded-lg border '+s.c+' p-3 transition-all duration-300 cursor-pointer hover:border-base-600 focus-visible:border-blue-400'+(isSel?' card-sel':'')+'" data-card="'+E(m.name)+'" onclick="openDrawer(this.dataset.card)" onkeydown="if(event.key===\\'Enter\\'||event.key===\\' \\'){event.preventDefault();openDrawer(this.dataset.card)}">'+
       '<div class="flex items-center gap-2">'+
         '<span class="w-[8px] h-[8px] rounded-full '+s.d+(m.status==='busy'?' pulse':'')+' shrink-0"></span>'+
         '<span class="font-mono font-semibold text-[14px] truncate">'+E(m.name)+'</span>'+
@@ -16517,11 +16571,12 @@ function rAgents(t){
         '<span class="text-[10px] text-txt-500 ml-auto shrink-0">'+E(m.agent)+'</span>'+
         (m.model?chip(E(m.model),'muted'):'')+
       '</div>'+
-      (tr?'<div class="mt-2 text-[13px] text-txt-200 leading-snug truncate">'+E(tr)+'</div>':'')+
+      (tr?'<div class="mt-2 text-[13px] text-txt-200 leading-snug truncate">'+(blocked?'<span class="text-amber-400">Blocked: </span>':'Current task: ')+E(tr)+'</div>':'<div class="mt-2 text-[13px] text-txt-500 leading-snug">No active task</div>')+
+      (mp?'<div class="mt-1 text-[12px] text-txt-400 truncate">Latest: '+E(mp)+'</div>':'')+
       '<div class="mt-2 flex items-center gap-1.5 flex-wrap">'+
-        chip(d,'muted')+chip('msg '+mi,'muted')+
+        chip('status '+d,'muted')+chip('msg '+mi,'muted')+chip(E(m.executionStatus||m.status),m.status==='busy'?'blue':m.status==='error'?'red':'muted')+
         (m.worktreeBranch?chip(E(m.worktreeBranch),'muted'):'')+
-      '</div></div>';
+      '</div></button>';
   }).join('');
   patch(el,html);
 }
@@ -16533,8 +16588,8 @@ function openDrawer(name){
   var h='';
   // Header
   h+='<div class="flex items-center justify-between mb-4">';
-  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>';
-  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>';
+  h+='<div class="flex items-center gap-2"><span class="w-[10px] h-[10px] rounded-full '+s.d+(m.status==='busy'?' pulse':'')+'"></span><h2 id="drawer-title" class="font-mono font-semibold text-[16px]">'+E(m.name)+'</h2><span class="text-[11px] px-2 py-[2px] rounded '+s.t+' bg-base-800/80">'+s.l+'</span></div>';
+  h+='<button id="drawer-close" aria-label="Close agent detail" 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>';
   h+='</div>';
   // Meta chips
   var meta=[];
@@ -16581,13 +16636,22 @@ function openDrawer(name){
       h+='</div></div>';
     });
   }
-  document.getElementById('drawer').innerHTML=h;
-  document.getElementById('drawer').classList.add('open');
+  var drawer=document.getElementById('drawer');
+  drawer.innerHTML=h;
+  drawer.classList.add('open');
+  drawer.setAttribute('aria-hidden','false');
+  drawer.inert=false;
+  setBackgroundInert(true);
+  drawer.focus();
   document.getElementById('drawer-bg').classList.add('open');
 }
 
 function closeDrawer(){
-  document.getElementById('drawer').classList.remove('open');
+  var drawer=document.getElementById('drawer');
+  drawer.classList.remove('open');
+  drawer.setAttribute('aria-hidden','true');
+  drawer.inert=true;
+  if(!modalOpen())setBackgroundInert(false);
   document.getElementById('drawer-bg').classList.remove('open');
 }
 
@@ -16606,7 +16670,8 @@ function rTasks(t){
       const icl=x.status==='completed'?'text-emerald-500':x.status==='in_progress'?'text-blue-400':'text-txt-500';
       const p=PR[x.priority]||PR.low,cn=x.content.length>55?x.content.slice(0,55)+'\\u2026':x.content;
       let dep='';
-      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>'}
+      const depIds=Array.isArray(x.dependsOn)?x.dependsOn:(x.dependsOn?[String(x.dependsOn)]:[]);
+      if(depIds.length){const labels=depIds.map(id=>{const parent=taskMap[id];return parent?parent.content.slice(0,42):id}).join(', ');dep='<div class="text-[10px] text-txt-500 mt-0.5">blocked by: '+E(labels)+'</div>'}
       return '<div class="flex items-start gap-2 py-1.5 px-1 rounded hover:bg-base-800/40 transition-colors">'+
         '<span class="'+icl+' text-[11px] mt-[2px] shrink-0">'+ic+'</span>'+
         '<div class="flex-1 min-w-0"><div class="text-[13px] text-txt-200 truncate">'+E(cn)+'</div>'+
@@ -16633,7 +16698,7 @@ function rActivity(t){
   if(!msgs.length){patch(el,'<div class="text-txt-500 text-sm py-6 text-center">Waiting for agent messages...</div>');return}
   const sp=saveSc(el);
   const newCount=msgs.length,hasNew=newCount>prevMC&&prevMC>0;
-  let html='<div class="text-[11px] text-txt-300 font-semibold uppercase tracking-wider mb-3">Activity '+chip(msgs.length+' msgs','muted')+'</div>';
+  let html='<div class="flex items-center gap-2 mb-3"><span class="text-[11px] text-txt-300 font-semibold uppercase tracking-wider">Activity feed</span>'+chip(msgs.length+' msgs','muted')+'</div>';
   html+='<div class="max-h-[50vh] overflow-y-auto scroll space-y-2">';
   msgs.slice(0,30).forEach(function(m,mi){
     const isNew=hasNew&&mi<(newCount-prevMC);
@@ -16646,7 +16711,7 @@ function rActivity(t){
     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';
     const initial=m.fromName.charAt(0).toUpperCase();
     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';
-    html+='<div class="'+align+(isNew?' hl':'')+' cursor-pointer" data-msg="'+E(m.id)+'" onclick="toggleMsg(\\''+E(m.id)+'\\')">';
+    html+='<div class="'+align+(isNew?' hl':'')+' cursor-pointer" role="button" tabindex="0" aria-expanded="'+(isExp?'true':'false')+'" data-msg="'+E(m.id)+'" onclick="toggleMsg(this.dataset.msg)" onkeydown="if(event.key===\\'Enter\\'||event.key===\\' \\'){event.preventDefault();toggleMsg(this.dataset.msg)}">';
     html+='<div class="flex items-start gap-2">';
     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>';
     html+='<div class="flex-1 min-w-0 rounded-xl border '+bubbleBg+' px-3 py-2">';
@@ -16693,16 +16758,49 @@ function render(){
   const empty=document.getElementById('empty'),content=document.getElementById('content');
   if(!t){empty.classList.remove('hidden');empty.classList.add('flex');content.classList.add('hidden');document.getElementById('tl').classList.add('hidden');return}
   empty.classList.add('hidden');empty.classList.remove('flex');content.classList.remove('hidden');
-  rHealth(t);rSum(t);rAgents(t);rTasks(t);rActivity(t);rTimeline(t);
+  rHealth(t);rSum(t);rAttention(t);rAgents(t);rTasks(t);rActivity(t);rTimeline(t);
 }
 
 function conn(ok){
   document.getElementById('cd').className='w-[7px] h-[7px] rounded-full '+(ok?'bg-emerald-500 pulse':'bg-red-500');
-  document.getElementById('ct').textContent=ok?D(Date.now()-pollT)+' ago':'disconnected';
+  document.getElementById('ct').textContent=ok?D(Date.now()-pollT)+' ago':'reconnecting to dashboard state';
 }
 
 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)}}
 
+function setBackgroundInert(locked){
+  document.querySelectorAll('header,main,#sum,#tl').forEach(function(el){
+    el.inert=locked;
+    if(locked)el.setAttribute('aria-hidden','true');
+    else el.removeAttribute('aria-hidden');
+  });
+}
+
+function modalOpen(){return document.getElementById('sco').classList.contains('show')||document.getElementById('drawer').classList.contains('open')}
+
+function trapFocus(root,e){
+  const nodes=[...root.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')].filter(function(el){return !el.disabled&&!el.inert&&el.offsetParent!==null});
+  if(!nodes.length){e.preventDefault();root.focus();return}
+  const first=nodes[0],last=nodes[nodes.length-1];
+  if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();return}
+  if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();return}
+}
+
+function openShortcuts(){
+  const el=document.getElementById('sco');
+  setBackgroundInert(true);
+  el.classList.add('show');
+  el.setAttribute('aria-hidden','false');
+  document.getElementById('sco').focus();
+}
+
+function closeShortcuts(){
+  const el=document.getElementById('sco');
+  el.classList.remove('show');
+  el.setAttribute('aria-hidden','true');
+  if(!modalOpen())setBackgroundInert(false);
+}
+
 // Clock update every second
 setInterval(function(){var t=cur();if(t)rClock(t);if(fails<3)conn(true)},1000);
 
@@ -16711,11 +16809,18 @@ setInterval(poll,2500);
 
 // Keyboard shortcuts
 document.addEventListener('keydown',function(e){
+  const shortcutsOpen=document.getElementById('sco').classList.contains('show');
+  if(shortcutsOpen&&e.key==='Tab'){trapFocus(document.getElementById('sco'),e);return}
+  if(shortcutsOpen&&e.key==='Escape'){e.preventDefault();closeShortcuts();return}
+  const drawerOpen=document.getElementById('drawer').classList.contains('open');
+  if(drawerOpen&&e.key==='Tab'){trapFocus(document.getElementById('drawer'),e);return}
+  if(drawerOpen&&e.key==='Escape'){e.preventDefault();closeDrawer();return}
+  if(drawerOpen&&e.key==='?'){e.preventDefault();return}
   if(e.target.tagName==='INPUT'||e.target.tagName==='SELECT'||e.target.tagName==='TEXTAREA')return;
   var t=cur();if(!t)return;
-  var mm=t.members||[];
-  if(e.key==='?'){e.preventDefault();document.getElementById('sco').classList.toggle('show');return}
-  if(e.key==='Escape'){closeDrawer();expMsgs.clear();selCard=-1;document.getElementById('sco').classList.remove('show');render();return}
+  var mm=[...(t.members||[])].sort((a,b)=>rankAgent(a,b,t));
+  if(e.key==='?'){e.preventDefault();shortcutsOpen?closeShortcuts():openShortcuts();return}
+  if(e.key==='Escape'){closeDrawer();expMsgs.clear();selCard=-1;closeShortcuts();render();return}
   if(e.key==='j'&&mm.length){e.preventDefault();selCard=Math.min(selCard+1,mm.length-1);render();return}
   if(e.key==='k'&&mm.length){e.preventDefault();selCard=Math.max(selCard-1,0);render();return}
   if(e.key==='Enter'&&selCard>=0&&selCard<mm.length){e.preventDefault();openDrawer(mm[selCard].name);return}
@@ -16745,6 +16850,20 @@ function jsonResponse(data, status = 200) {
     headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" }
   });
 }
+function parseDependsOn(value) {
+  if (!value)
+    return [];
+  try {
+    const parsed = JSON.parse(value);
+    if (Array.isArray(parsed))
+      return parsed.filter((item) => typeof item === "string");
+    if (typeof parsed === "string")
+      return [parsed];
+  } catch {
+    return [value];
+  }
+  return [];
+}
 function buildState(db) {
   const teams = db.query("SELECT id, name, status, lead_agent, time_created, time_updated FROM team ORDER BY time_created DESC").all();
   const memberStmt = db.query("SELECT name, agent, status, execution_status, worktree_branch, prompt, model, plan_approval, time_created, time_updated FROM team_member WHERE team_id = ?");
@@ -16776,7 +16895,7 @@ function buildState(db) {
         status: tk.status,
         priority: tk.priority,
         assignee: tk.assignee,
-        dependsOn: tk.depends_on,
+        dependsOn: parseDependsOn(tk.depends_on),
         timeCreated: tk.time_created,
         timeUpdated: tk.time_updated
       })),
@@ -16949,7 +17068,8 @@ async function executeTeamSpawn(deps, args, sessionId) {
   const existing = deps.db.query("SELECT name FROM team_member WHERE team_id = ? AND name = ?").get(teamInfo.teamId, args.name);
   if (existing)
     throw new Error(`Teammate "${args.name}" already exists in team "${teamInfo.teamName}"`);
-  const useWorktree = args.worktree !== false && !isWorktreeDirectory(deps.directory);
+  const isReadOnly = args.agent === "plan" || args.agent === "explore";
+  const useWorktree = args.worktree !== false && !isReadOnly && !isWorktreeDirectory(deps.directory);
   const usePlanApproval = args.plan_approval === true;
   log(`spawn:start name=${args.name} agent=${args.agent} worktree=${useWorktree}`);
   let worktreeDir = null;
@@ -16989,7 +17109,6 @@ async function executeTeamSpawn(deps, args, sessionId) {
       log(`spawn:workspace:failed name=${args.name} err=${err instanceof Error ? err.message : String(err)}`);
     }
   }
-  const isReadOnly = args.agent === "plan" || args.agent === "explore";
   const TEAM_TOOLS = ["team_message", "team_broadcast", "team_tasks_list", "team_tasks_add", "team_tasks_complete", "team_claim"];
   const permission = [];
   if (worktreeDir) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hueyexe/opencode-ensemble",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "description": "Agent teams for OpenCode — parallel agents with peer-to-peer communication, shared tasks, and coordinated execution",
   "module": "src/index.ts",
   "main": "dist/index.js",
@@ -23,7 +23,8 @@
     "dist",
     "src",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "social-preview.png"
   ],
   "scripts": {
     "lint": "bunx biome lint src/",

package/src/dashboard-html.ts

@@ -10,7 +10,7 @@ export const DASHBOARD_HEAD = `<!DOCTYPE html>
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
 <script src="https://cdn.tailwindcss.com"><\/script>
-<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>
+<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:'#aab4c6',400:'#8a96aa',500:'#7b879b'}},fontFamily:{sans:['Inter','system-ui','sans-serif'],mono:['JetBrains Mono','monospace']}}}}<\/script>
 <style>
 @media(prefers-reduced-motion:no-preference){
 @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@@ -22,8 +22,10 @@ export const DASHBOARD_HEAD = `<!DOCTYPE html>
 .hl{animation:hl 1.5s ease-out}
 .shimmer{background:linear-gradient(90deg,#22c55e 0%,#4ade80 50%,#22c55e 100%)!important;background-size:200% 100%;animation:shimmer 1.5s ease-in-out}
 }
+@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
 .scroll::-webkit-scrollbar{width:5px}.scroll::-webkit-scrollbar-track{background:transparent}.scroll::-webkit-scrollbar-thumb{background:#2a3144;border-radius:3px}
 details summary::-webkit-details-marker{display:none}details summary{list-style:none}
+:focus-visible{outline:2px solid rgba(96,165,250,.85);outline-offset:2px}
 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}
 .xp{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.xp-open{max-height:3000px;transition:max-height .5s ease-in}
 .card-sel{outline:2px solid rgba(59,130,246,.4);outline-offset:1px}
@@ -42,13 +44,13 @@ select{-webkit-appearance:none;appearance:none;background-image:url("data:image/
 </style>
 </head>
 <body class="bg-base-950 text-txt-100 min-h-screen antialiased font-sans">
-<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">
-<div class="flex items-center gap-3">
+<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-3 sm:px-4 z-50">
+<div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
 <span class="font-mono font-semibold text-[13px] tracking-[.08em] text-txt-200">ensemble</span>
 <span class="text-base-700">|</span>
-<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>
+<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 max-w-[180px] sm:max-w-[320px] min-w-0"></select>
 </div>
-<div class="flex items-center gap-4">
+<div class="flex items-center gap-2 sm:gap-4 shrink-0">
 <div id="hring" class="w-6 h-6 rounded-full" title="Team health"></div>
 <div class="flex items-center gap-2">
 <span id="clk" class="text-[11px] text-txt-400 font-mono"></span>
@@ -58,25 +60,28 @@ select{-webkit-appearance:none;appearance:none;background-image:url("data:image/
 </div>
 </div>
 </header>
-<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>
+<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-3 sm:px-4 gap-3 sm:gap-4 text-[11px] text-txt-300 z-40 overflow-x-auto scroll whitespace-nowrap"></div>
 <main class="pt-[76px] px-4 pb-16">
 <div id="empty" class="hidden flex-col items-center justify-center h-[70vh] gap-3">
 <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>
 <div class="text-txt-400 text-sm">Waiting for a team</div>
 <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>
 </div>
-<div id="content" class="hidden">
-<div id="agents" class="grid gap-2 mb-4" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))"></div>
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-<div id="tasks" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div>
-<div id="activity" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div>
+<div id="content" class="hidden max-w-[1600px] mx-auto">
+<section id="attention" aria-label="Team attention" class="mb-3"></section>
+<div class="grid grid-cols-1 xl:grid-cols-[minmax(360px,1.35fr)_minmax(320px,.8fr)] gap-4 items-start">
+<section aria-label="Agent roster"><div id="agents" class="grid gap-2" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))"></div></section>
+<div class="grid grid-cols-1 gap-4">
+<section aria-label="Task board"><div id="tasks" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div></section>
+<section aria-label="Activity feed"><div id="activity" class="bg-base-900 rounded-lg p-3 border border-base-800/50"></div></section>
+</div>
 </div>
 </div>
 </main>
-<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>
-<div id="sco" onclick="this.classList.remove('show')">
+<div id="tl" aria-label="Event timeline" 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>
+<div id="sco" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="shortcuts-title" tabindex="-1" onclick="closeShortcuts()">
 <div class="bg-base-900 border border-base-800 rounded-lg p-6 max-w-sm" onclick="event.stopPropagation()">
-<div class="text-txt-200 font-semibold text-sm mb-4">Keyboard Shortcuts</div>
+<div id="shortcuts-title" class="text-txt-200 font-semibold text-sm mb-4">Keyboard Shortcuts</div>
 <div class="grid grid-cols-2 gap-y-2 gap-x-6 text-[12px]">
 <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>
 <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>
@@ -88,4 +93,4 @@ select{-webkit-appearance:none;appearance:none;background-image:url("data:image/
 </div>
 </div>
 <div id="drawer-bg" onclick="closeDrawer()"></div>
-<div id="drawer" class="scroll p-4"></div>`;
+<div id="drawer" class="scroll p-4" tabindex="-1" inert role="dialog" aria-modal="true" aria-labelledby="drawer-title" aria-hidden="true"><h2 id="drawer-title" class="sr-only">Agent detail</h2></div>`;

package/src/dashboard-js-part1.ts

@@ -70,6 +70,40 @@ function deriveHealth(t){
   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};
 }
 
+function lastMessageFor(name,msgs){return msgs.filter(m=>m.fromName===name||m.toName===name).sort((a,b)=>b.timeCreated-a.timeCreated)[0]||null}
+function activeTaskFor(name,tasks){return tasks.find(x=>x.assignee===name&&x.status==='in_progress')||tasks.find(x=>x.assignee===name&&x.status==='blocked')||null}
+function blockedTaskFor(name,tasks){return tasks.find(x=>x.assignee===name&&x.status==='blocked')||null}
+
+function rankAgent(a,b,t){
+  const tasks=t?.tasks||[],msgs=t?.messages||[];
+  const score=m=>{
+    const lm=lastMessageFor(m.name,msgs),bt=blockedTaskFor(m.name,tasks);
+    let s=0;
+    if(m.status==='error')s-=1000;
+    if(bt)s-=800;
+    if(m.status==='shutdown_requested')s-=650;
+    if(m.status==='busy')s-=500;
+    if(m.status==='ready'&&activeTaskFor(m.name,tasks))s-=350;
+    if(lm)s-=Math.max(0,200-Math.floor((Date.now()-lm.timeCreated)/60000));
+    if(m.status==='shutdown')s+=700;
+    return s;
+  };
+  const d=score(a)-score(b);return d||String(a.name).localeCompare(String(b.name));
+}
+
+function deriveAttention(t){
+  const tasks=t.tasks||[],msgs=t.messages||[];
+  const blocked=tasks.filter(x=>x.status==='blocked'),running=tasks.filter(x=>x.status==='in_progress');
+  const errored=(t.members||[]).filter(m=>m.status==='error');
+  const stopping=(t.members||[]).filter(m=>m.status==='shutdown_requested');
+  const latest=msgs[0]||null;
+  const items=[];
+  errored.forEach(m=>items.push({kind:'Agent error',label:m.name,detail:m.executionStatus||m.status,color:'red'}));
+  blocked.forEach(x=>items.push({kind:'Blocked task',label:x.assignee||'unassigned',detail:x.content,color:'amber'}));
+  stopping.forEach(m=>items.push({kind:'Stopping',label:m.name,detail:'shutdown requested',color:'amber'}));
+  return{items,running,latest,blocked,errored};
+}
+
 function deriveSparkline(name,msgs){
   const mine=msgs.filter(m=>m.fromName===name).map(m=>m.timeCreated).sort();
   if(mine.length<2)return '';

package/src/dashboard-js-part2.ts

@@ -47,17 +47,32 @@ function rSum(t){
   );
 }
 
+function rAttention(t){
+  const el=document.getElementById('attention'),a=deriveAttention(t),h=deriveHealth(t),tk=t.tasks||[];
+  const tone=a.items.length?'border-amber-500/30 bg-amber-500/[0.05]':'border-emerald-500/20 bg-emerald-500/[0.035]';
+  const lead=a.items.length?'Needs attention':'No blockers detected';
+  const chips=[chip(h.w+' working','blue'),chip(a.running.length+' active tasks','green'),chip(a.blocked.length+' blocked',a.blocked.length?'amber':'muted'),chip(tk.filter(x=>x.status==='pending').length+' pending','muted')];
+  let html='<div class="rounded-lg border '+tone+' px-3 py-2 flex flex-col md:flex-row md:items-center gap-2 md:gap-4">';
+  html+='<div class="min-w-[180px]"><div class="text-[10px] uppercase tracking-[.16em] text-txt-500">Team attention</div><div class="text-[14px] font-semibold text-txt-100">'+lead+'</div></div>';
+  html+='<div class="flex flex-wrap gap-1.5">'+chips.join('')+'</div>';
+  if(a.items.length){html+='<div class="flex-1 grid gap-1 md:grid-cols-2">'+a.items.slice(0,4).map(x=>'<div class="text-[12px] text-txt-200 truncate">'+chip(E(x.kind),x.color)+' <span class="font-mono">'+E(x.label)+'</span> <span class="text-txt-400">'+E(x.detail)+'</span></div>').join('')+'</div>'}
+  else if(a.latest){html+='<div class="text-[12px] text-txt-400 truncate md:ml-auto">Latest: <span class="text-txt-200">'+E(a.latest.fromName)+'</span> '+relT(a.latest.timeCreated)+'</div>'}
+  html+='</div>';
+  patch(el,html);
+}
+
 function rAgents(t){
   const el=document.getElementById('agents'),mm=t.members||[];
   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}
-  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)});
+  const n=Date.now(),msgs=t.messages||[],sorted=[...mm].sort((a,b)=>rankAgent(a,b,t));
   const html=sorted.map((m,idx)=>{
-    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);
+    const s=si(m.status),task=activeTaskFor(m.name,t.tasks||[]),msg=lastMessageFor(m.name,msgs),blocked=blockedTaskFor(m.name,t.tasks||[]);
     const d=D(n-m.timeUpdated),mi=msg?relT(msg.timeCreated):'\\u2014';
     const tt=task?.content,tr=tt&&tt.length>90?tt.slice(0,90)+'\\u2026':tt;
+    const mp=msg?(msg.content.length>90?msg.content.slice(0,90)+'\\u2026':msg.content):'';
     const spark=deriveSparkline(m.name,msgs);
     const isSel=selCard===idx;
-    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)+'\\')">'+
+    return '<button type="button" class="text-left rounded-lg border '+s.c+' p-3 transition-all duration-300 cursor-pointer hover:border-base-600 focus-visible:border-blue-400'+(isSel?' card-sel':'')+'" data-card="'+E(m.name)+'" onclick="openDrawer(this.dataset.card)" onkeydown="if(event.key===\\'Enter\\'||event.key===\\' \\'){event.preventDefault();openDrawer(this.dataset.card)}">'+
       '<div class="flex items-center gap-2">'+
         '<span class="w-[8px] h-[8px] rounded-full '+s.d+(m.status==='busy'?' pulse':'')+' shrink-0"></span>'+
         '<span class="font-mono font-semibold text-[14px] truncate">'+E(m.name)+'</span>'+
@@ -66,11 +81,12 @@ function rAgents(t){
         '<span class="text-[10px] text-txt-500 ml-auto shrink-0">'+E(m.agent)+'</span>'+
         (m.model?chip(E(m.model),'muted'):'')+
       '</div>'+
-      (tr?'<div class="mt-2 text-[13px] text-txt-200 leading-snug truncate">'+E(tr)+'</div>':'')+
+      (tr?'<div class="mt-2 text-[13px] text-txt-200 leading-snug truncate">'+(blocked?'<span class="text-amber-400">Blocked: </span>':'Current task: ')+E(tr)+'</div>':'<div class="mt-2 text-[13px] text-txt-500 leading-snug">No active task</div>')+
+      (mp?'<div class="mt-1 text-[12px] text-txt-400 truncate">Latest: '+E(mp)+'</div>':'')+
       '<div class="mt-2 flex items-center gap-1.5 flex-wrap">'+
-        chip(d,'muted')+chip('msg '+mi,'muted')+
+        chip('status '+d,'muted')+chip('msg '+mi,'muted')+chip(E(m.executionStatus||m.status),m.status==='busy'?'blue':m.status==='error'?'red':'muted')+
         (m.worktreeBranch?chip(E(m.worktreeBranch),'muted'):'')+
-      '</div></div>';
+      '</div></button>';
   }).join('');
   patch(el,html);
 }
@@ -82,8 +98,8 @@ function openDrawer(name){
   var h='';
   // Header
   h+='<div class="flex items-center justify-between mb-4">';
-  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>';
-  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>';
+  h+='<div class="flex items-center gap-2"><span class="w-[10px] h-[10px] rounded-full '+s.d+(m.status==='busy'?' pulse':'')+'"></span><h2 id="drawer-title" class="font-mono font-semibold text-[16px]">'+E(m.name)+'</h2><span class="text-[11px] px-2 py-[2px] rounded '+s.t+' bg-base-800/80">'+s.l+'</span></div>';
+  h+='<button id="drawer-close" aria-label="Close agent detail" 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>';
   h+='</div>';
   // Meta chips
   var meta=[];
@@ -130,13 +146,22 @@ function openDrawer(name){
       h+='</div></div>';
     });
   }
-  document.getElementById('drawer').innerHTML=h;
-  document.getElementById('drawer').classList.add('open');
+  var drawer=document.getElementById('drawer');
+  drawer.innerHTML=h;
+  drawer.classList.add('open');
+  drawer.setAttribute('aria-hidden','false');
+  drawer.inert=false;
+  setBackgroundInert(true);
+  drawer.focus();
   document.getElementById('drawer-bg').classList.add('open');
 }
 
 function closeDrawer(){
-  document.getElementById('drawer').classList.remove('open');
+  var drawer=document.getElementById('drawer');
+  drawer.classList.remove('open');
+  drawer.setAttribute('aria-hidden','true');
+  drawer.inert=true;
+  if(!modalOpen())setBackgroundInert(false);
   document.getElementById('drawer-bg').classList.remove('open');
 }
 
@@ -155,7 +180,8 @@ function rTasks(t){
       const icl=x.status==='completed'?'text-emerald-500':x.status==='in_progress'?'text-blue-400':'text-txt-500';
       const p=PR[x.priority]||PR.low,cn=x.content.length>55?x.content.slice(0,55)+'\\u2026':x.content;
       let dep='';
-      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>'}
+      const depIds=Array.isArray(x.dependsOn)?x.dependsOn:(x.dependsOn?[String(x.dependsOn)]:[]);
+      if(depIds.length){const labels=depIds.map(id=>{const parent=taskMap[id];return parent?parent.content.slice(0,42):id}).join(', ');dep='<div class="text-[10px] text-txt-500 mt-0.5">blocked by: '+E(labels)+'</div>'}
       return '<div class="flex items-start gap-2 py-1.5 px-1 rounded hover:bg-base-800/40 transition-colors">'+
         '<span class="'+icl+' text-[11px] mt-[2px] shrink-0">'+ic+'</span>'+
         '<div class="flex-1 min-w-0"><div class="text-[13px] text-txt-200 truncate">'+E(cn)+'</div>'+
@@ -182,7 +208,7 @@ function rActivity(t){
   if(!msgs.length){patch(el,'<div class="text-txt-500 text-sm py-6 text-center">Waiting for agent messages...</div>');return}
   const sp=saveSc(el);
   const newCount=msgs.length,hasNew=newCount>prevMC&&prevMC>0;
-  let html='<div class="text-[11px] text-txt-300 font-semibold uppercase tracking-wider mb-3">Activity '+chip(msgs.length+' msgs','muted')+'</div>';
+  let html='<div class="flex items-center gap-2 mb-3"><span class="text-[11px] text-txt-300 font-semibold uppercase tracking-wider">Activity feed</span>'+chip(msgs.length+' msgs','muted')+'</div>';
   html+='<div class="max-h-[50vh] overflow-y-auto scroll space-y-2">';
   msgs.slice(0,30).forEach(function(m,mi){
     const isNew=hasNew&&mi<(newCount-prevMC);
@@ -195,7 +221,7 @@ function rActivity(t){
     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';
     const initial=m.fromName.charAt(0).toUpperCase();
     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';
-    html+='<div class="'+align+(isNew?' hl':'')+' cursor-pointer" data-msg="'+E(m.id)+'" onclick="toggleMsg(\\''+E(m.id)+'\\')">';
+    html+='<div class="'+align+(isNew?' hl':'')+' cursor-pointer" role="button" tabindex="0" aria-expanded="'+(isExp?'true':'false')+'" data-msg="'+E(m.id)+'" onclick="toggleMsg(this.dataset.msg)" onkeydown="if(event.key===\\'Enter\\'||event.key===\\' \\'){event.preventDefault();toggleMsg(this.dataset.msg)}">';
     html+='<div class="flex items-start gap-2">';
     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>';
     html+='<div class="flex-1 min-w-0 rounded-xl border '+bubbleBg+' px-3 py-2">';

package/src/dashboard-js-part3.ts

@@ -7,16 +7,49 @@ function render(){
   const empty=document.getElementById('empty'),content=document.getElementById('content');
   if(!t){empty.classList.remove('hidden');empty.classList.add('flex');content.classList.add('hidden');document.getElementById('tl').classList.add('hidden');return}
   empty.classList.add('hidden');empty.classList.remove('flex');content.classList.remove('hidden');
-  rHealth(t);rSum(t);rAgents(t);rTasks(t);rActivity(t);rTimeline(t);
+  rHealth(t);rSum(t);rAttention(t);rAgents(t);rTasks(t);rActivity(t);rTimeline(t);
 }
 
 function conn(ok){
   document.getElementById('cd').className='w-[7px] h-[7px] rounded-full '+(ok?'bg-emerald-500 pulse':'bg-red-500');
-  document.getElementById('ct').textContent=ok?D(Date.now()-pollT)+' ago':'disconnected';
+  document.getElementById('ct').textContent=ok?D(Date.now()-pollT)+' ago':'reconnecting to dashboard state';
 }
 
 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)}}
 
+function setBackgroundInert(locked){
+  document.querySelectorAll('header,main,#sum,#tl').forEach(function(el){
+    el.inert=locked;
+    if(locked)el.setAttribute('aria-hidden','true');
+    else el.removeAttribute('aria-hidden');
+  });
+}
+
+function modalOpen(){return document.getElementById('sco').classList.contains('show')||document.getElementById('drawer').classList.contains('open')}
+
+function trapFocus(root,e){
+  const nodes=[...root.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')].filter(function(el){return !el.disabled&&!el.inert&&el.offsetParent!==null});
+  if(!nodes.length){e.preventDefault();root.focus();return}
+  const first=nodes[0],last=nodes[nodes.length-1];
+  if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();return}
+  if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();return}
+}
+
+function openShortcuts(){
+  const el=document.getElementById('sco');
+  setBackgroundInert(true);
+  el.classList.add('show');
+  el.setAttribute('aria-hidden','false');
+  document.getElementById('sco').focus();
+}
+
+function closeShortcuts(){
+  const el=document.getElementById('sco');
+  el.classList.remove('show');
+  el.setAttribute('aria-hidden','true');
+  if(!modalOpen())setBackgroundInert(false);
+}
+
 // Clock update every second
 setInterval(function(){var t=cur();if(t)rClock(t);if(fails<3)conn(true)},1000);
 
@@ -25,11 +58,18 @@ setInterval(poll,2500);
 
 // Keyboard shortcuts
 document.addEventListener('keydown',function(e){
+  const shortcutsOpen=document.getElementById('sco').classList.contains('show');
+  if(shortcutsOpen&&e.key==='Tab'){trapFocus(document.getElementById('sco'),e);return}
+  if(shortcutsOpen&&e.key==='Escape'){e.preventDefault();closeShortcuts();return}
+  const drawerOpen=document.getElementById('drawer').classList.contains('open');
+  if(drawerOpen&&e.key==='Tab'){trapFocus(document.getElementById('drawer'),e);return}
+  if(drawerOpen&&e.key==='Escape'){e.preventDefault();closeDrawer();return}
+  if(drawerOpen&&e.key==='?'){e.preventDefault();return}
   if(e.target.tagName==='INPUT'||e.target.tagName==='SELECT'||e.target.tagName==='TEXTAREA')return;
   var t=cur();if(!t)return;
-  var mm=t.members||[];
-  if(e.key==='?'){e.preventDefault();document.getElementById('sco').classList.toggle('show');return}
-  if(e.key==='Escape'){closeDrawer();expMsgs.clear();selCard=-1;document.getElementById('sco').classList.remove('show');render();return}
+  var mm=[...(t.members||[])].sort((a,b)=>rankAgent(a,b,t));
+  if(e.key==='?'){e.preventDefault();shortcutsOpen?closeShortcuts():openShortcuts();return}
+  if(e.key==='Escape'){closeDrawer();expMsgs.clear();selCard=-1;closeShortcuts();render();return}
   if(e.key==='j'&&mm.length){e.preventDefault();selCard=Math.min(selCard+1,mm.length-1);render();return}
   if(e.key==='k'&&mm.length){e.preventDefault();selCard=Math.max(selCard-1,0);render();return}
   if(e.key==='Enter'&&selCard>=0&&selCard<mm.length){e.preventDefault();openDrawer(mm[selCard].name);return}

package/src/dashboard.ts

@@ -58,6 +58,21 @@ function jsonResponse(data: unknown, status = 200): Response {
   })
 }
 
+function parseDependsOn(value: string | null): string[] {
+  if (!value) return []
+
+  try {
+    const parsed: unknown = JSON.parse(value)
+
+    if (Array.isArray(parsed)) return parsed.filter((item): item is string => typeof item === "string")
+    if (typeof parsed === "string") return [parsed]
+  } catch {
+    return [value]
+  }
+
+  return []
+}
+
 function buildState(db: Database): { teams: unknown[] } {
   const teams = db.query("SELECT id, name, status, lead_agent, time_created, time_updated FROM team ORDER BY time_created DESC").all() as TeamRow[]
   const memberStmt = db.query("SELECT name, agent, status, execution_status, worktree_branch, prompt, model, plan_approval, time_created, time_updated FROM team_member WHERE team_id = ?")
@@ -90,7 +105,7 @@ function buildState(db: Database): { teams: unknown[] } {
         status: tk.status,
         priority: tk.priority,
         assignee: tk.assignee,
-        dependsOn: tk.depends_on,
+        dependsOn: parseDependsOn(tk.depends_on),
         timeCreated: tk.time_created,
         timeUpdated: tk.time_updated,
       })),

package/src/system-prompt.ts

@@ -135,6 +135,8 @@ export function buildLeadSystemPrompt(db: Database, teamId: string, config?: Req
     "",
     "Spawn teammates ONE AT A TIME. Wait for each tool result before spawning the next.",
     "This avoids git worktree contention. Once all are spawned, wait for their messages.",
+    "Read-only agents (explore, plan) automatically skip worktree creation.",
+    "For other agents that only need to read, pass worktree: false to avoid unnecessary isolation.",
     "",
     "Teammates work asynchronously and message you when done.",
     "Do NOT poll team_status or team_tasks_list repeatedly — wait for messages.",

package/src/tools/team-spawn.ts

@@ -85,7 +85,8 @@ export async function executeTeamSpawn(
     .get(teamInfo.teamId, args.name)
   if (existing) throw new Error(`Teammate "${args.name}" already exists in team "${teamInfo.teamName}"`)
 
-  const useWorktree = args.worktree !== false && !isWorktreeDirectory(deps.directory)
+  const isReadOnly = args.agent === "plan" || args.agent === "explore"
+  const useWorktree = args.worktree !== false && !isReadOnly && !isWorktreeDirectory(deps.directory)
   const usePlanApproval = args.plan_approval === true
 
   log(`spawn:start name=${args.name} agent=${args.agent} worktree=${useWorktree}`)
@@ -143,7 +144,6 @@ export async function executeTeamSpawn(
   // Permission rules on session.create are the hard gate (server-enforced).
   // For read-only agents, deny write tools and explicitly allow team tools.
   // For all agents with worktrees, allowlist the worktree path for edit/bash.
-  const isReadOnly = args.agent === "plan" || args.agent === "explore"
   const TEAM_TOOLS = ["team_message", "team_broadcast", "team_tasks_list", "team_tasks_add", "team_tasks_complete", "team_claim"] as const
   const permission: PermissionRule[] = []