@agentdeck/bridge 1.1.0 → 1.2.0

package/dist/apme/dashboard-html.js

@@ -13,7 +13,26 @@ export function apmeDashboardHtml() {
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>AgentDeck — Agent Performance Monitoring & Evaluation</title>
 <style>
-:root{--bg:#0f172a;--surface:#1e293b;--border:#334155;--text:#e2e8f0;--muted:#94a3b8;--dim:#64748b;--green:#22c55e;--yellow:#f59e0b;--red:#ef4444;--blue:#3b82f6;--accent:#818cf8}
+/* Palette derived from design/tokens.css. The dashboard ships as one
+ * self-contained HTML string (WKWebView loads the bundled copy via the
+ * in-process daemon), so the canonical CSS file can't be <link>'d: the
+ * :root primitives below are a manual mirror of design/tokens.css §2,
+ * gated by design/verify-tokens-sync.py against the bundled resource —
+ * which is byte-identical to this renderer's output. Everything below
+ * :root references var(--…) only; the checker flags any stray hex. */
+:root{
+/* === Design system primitives (mirrors design/tokens.css §2) === */
+--ink-800:#15302f;--ink-700:#1f4544;--ink-500:#426664;--ink-300:#7c9694;
+--kelp-500:#2f8a7c;--kelp-300:#6fb6a8;
+--coral-500:#c0573a;--amber-500:#c8923a;
+--ui-ok:#52D988;--ui-attn:#FFA93D;--ui-error:#FF6B6B;--ui-cyan:#3ED6E8;
+--ui-idle-dark:#7a8a9c;--ui-popup-bg-dark:#0a1a2a;--ui-tty-text:#c8d0d8;
+/* === Dashboard-local semantic aliases === */
+--bg:var(--ui-popup-bg-dark);--surface:var(--ink-800);--border:var(--ink-700);
+--text:var(--ui-tty-text);--muted:var(--ui-idle-dark);--dim:var(--ink-500);
+--green:var(--ui-ok);--yellow:var(--ui-attn);--red:var(--ui-error);--blue:var(--ui-cyan);
+--accent:var(--kelp-500);--amber:var(--amber-500);--orange:var(--ui-attn)
+}
 *{margin:0;padding:0;box-sizing:border-box}
 body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;font-size:13px;height:100vh;overflow:hidden}
 
@@ -39,10 +58,10 @@ header .status{margin-left:auto;font-size:11px;color:var(--dim)}
 .table-wrap{flex:1;overflow-y:auto}
 table{width:100%;border-collapse:collapse;font-size:12px}
 th{position:sticky;top:0;text-align:left;color:var(--dim);font-weight:500;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:0.3px}
-td{padding:7px 10px;border-bottom:1px solid rgba(51,65,85,0.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
+td{padding:7px 10px;border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
 tr{cursor:pointer;transition:background 0.1s}
-tr:hover td{background:rgba(30,42,59,0.8)}
-tr.selected td{background:rgba(99,102,241,0.15);border-left:2px solid var(--accent)}
+tr:hover td{background:color-mix(in srgb,var(--surface) 80%,transparent)}
+tr.selected td{background:color-mix(in srgb,var(--accent) 15%,transparent);border-left:2px solid var(--accent)}
 .task-col{max-width:250px;color:var(--muted);font-style:italic}
 
 /* ── Scores / badges ── */
@@ -52,12 +71,12 @@ tr.selected td{background:rgba(99,102,241,0.15);border-left:2px solid var(--acce
 .score-low{color:var(--red)}
 .score-na{color:var(--dim)}
 .badge{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;display:inline-block}
-.badge-committed{background:#166534;color:#bbf7d0}
-.badge-abandoned{background:#7f1d1d;color:#fecaca}
-.badge-iterated{background:#78350f;color:#fef3c7}
+.badge-committed{background:color-mix(in srgb,var(--green) 18%,var(--bg));color:var(--green)}
+.badge-abandoned{background:color-mix(in srgb,var(--red) 18%,var(--bg));color:var(--red)}
+.badge-iterated{background:color-mix(in srgb,var(--yellow) 18%,var(--bg));color:var(--yellow)}
 .badge-exploratory{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
 .badge-pending{background:var(--surface);color:var(--dim)}
-.badge-cat{background:var(--surface);color:var(--accent);border:1px solid rgba(129,140,248,0.3);font-size:10px;padding:1px 6px;border-radius:4px}
+.badge-cat{background:var(--surface);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);font-size:10px;padding:1px 6px;border-radius:4px}
 
 /* ── Detail panel ── */
 .detail-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--dim);font-size:14px}
@@ -93,11 +112,35 @@ tr.selected td{background:rgba(99,102,241,0.15);border-left:2px solid var(--acce
 .vibe-bar{display:flex;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
 .vibe-btn{padding:8px 20px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.15s}
 .vibe-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
-.vibe-approve{background:#166534;color:#bbf7d0}
-.vibe-reject{background:#7f1d1d;color:#fecaca}
+.vibe-approve{background:color-mix(in srgb,var(--green) 22%,var(--bg));color:var(--green)}
+.vibe-reject{background:color-mix(in srgb,var(--red) 22%,var(--bg));color:var(--red)}
 .vibe-current{font-size:11px;color:var(--dim);display:flex;align-items:center;margin-left:8px}
 
 .panel{display:none}.panel.visible{display:block;height:100%}
+
+/* ── Work board ── */
+.work-tabs{display:flex;gap:4px;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
+.work-tab{padding:3px 10px;border-radius:10px;font-size:11px;color:var(--dim);cursor:pointer;border:1px solid transparent;background:none}
+.work-tab:hover{color:var(--muted)}
+.work-tab.active{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
+.work-tab .n{opacity:0.75;margin-left:3px;font-variant-numeric:tabular-nums}
+.work-row{padding:9px 12px;border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent);cursor:pointer}
+.work-row:hover{background:color-mix(in srgb,var(--surface) 80%,transparent)}
+.work-row.selected{background:color-mix(in srgb,var(--accent) 15%,transparent)}
+.work-row.attn{box-shadow:inset 3px 0 0 var(--yellow)}
+.work-title{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text);font-weight:600;min-width:0}
+.work-title .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
+.work-title .t.unnamed{color:var(--muted);font-weight:500;font-style:italic}
+.work-sub{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:10.5px;color:var(--dim);margin-top:3px;font-variant-numeric:tabular-nums}
+.session-link{appearance:none;background:transparent;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:9px;padding:1px 6px;font:inherit;cursor:pointer;white-space:nowrap}
+.session-link:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
+.work-scope{display:none;align-items:center;gap:8px;padding:6px 10px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));font-size:11px;color:var(--muted)}
+.work-scope code{color:var(--text);font-size:10.5px}
+.work-scope .clear{margin-left:auto;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:9px;padding:1px 7px;cursor:pointer}
+.chip{font-size:10px;padding:1px 7px;border-radius:9px;background:var(--surface);color:var(--muted);border:1px solid var(--border);white-space:nowrap}
+.chip-ok{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
+.chip-warn{background:color-mix(in srgb,var(--yellow) 12%,transparent);color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 30%,transparent)}
+.chip-bad{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
 /* Graph needs a column flex box so the canvas can claim the leftover height. */
 .panel#panel-graph.visible{display:flex;flex-direction:column}
 .activity-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;padding:10px;background:var(--surface);border-bottom:1px solid var(--border)}
@@ -118,7 +161,8 @@ tr.selected td{background:rgba(99,102,241,0.15);border-left:2px solid var(--acce
   <!-- Left: runs list + tabs -->
   <div class="left">
     <div class="tabs">
-      <button class="tab active" onclick="showTab('activity')">Activity</button>
+      <button class="tab active" onclick="showTab('work')">Work</button>
+      <button class="tab" onclick="showTab('activity')">Activity</button>
       <button class="tab" onclick="showTab('runs')">Runs</button>
       <button class="tab" onclick="showTab('tasks')">Tasks</button>
       <button class="tab" onclick="showTab('graph')">Graph</button>
@@ -127,7 +171,23 @@ tr.selected td{background:rgba(99,102,241,0.15);border-left:2px solid var(--acce
       <button class="tab" onclick="showTab('categories')">Categories</button>
     </div>
     <div class="table-wrap">
-      <div class="panel visible" id="panel-activity">
+      <!-- Work board: task-first default view. One row = intent title +
+           outcome/score, sub-line = boundary provenance chip + folded actions.
+           Lifecycle sub-tabs are triage (attention first, then recency) and
+           their badge counts come from the same SQL bucket definitions as the
+           filter, so tab and rows cannot disagree. -->
+      <div class="panel visible" id="panel-work">
+        <div class="work-tabs" id="work-tabs"></div>
+        <div style="display:flex;gap:6px;padding:6px 10px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap">
+          <input id="w-q" placeholder="Search prompt / summary" oninput="workSearchDebounced()" style="background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-size:11px;flex:1;min-width:140px">
+          <select id="w-agent" onchange="loadWork(0)" style="background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-size:11px"><option value="">All Agents</option></select>
+          <select id="w-project" onchange="loadWork(0)" style="background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-size:11px"><option value="">All Projects</option></select>
+        </div>
+        <div class="work-scope" id="work-scope"></div>
+        <div id="work-rows"></div>
+        <div id="work-pager" style="display:flex;gap:8px;align-items:center;justify-content:center;padding:10px;font-size:11px;color:var(--dim)"></div>
+      </div>
+      <div class="panel" id="panel-activity">
         <div class="activity-cards" id="activity-cards"></div>
         <table><thead><tr>
           <th>Agent</th><th>Task</th><th>Project</th><th>When</th><th>Time</th>
@@ -207,6 +267,7 @@ function showTab(n){
   if(n==='tasks'&&!tasksLoaded){tasksLoaded=true;loadTasks(0)}
   if(n==='graph'){requestAnimationFrame(()=>loadGraph())}
   if(n==='activity'){loadActivity()}
+  if(n==='work'){loadWork(workOffset)}
 }
 function fs(s){if(s==null)return'<span class="score score-na">—</span>';const p=Math.round(s*100),c=p>=70?'high':p>=40?'mid':'low';return'<span class="score score-'+c+'">'+p+'%</span>'}
 function fo(o){if(!o)return'';return'<span class="badge badge-'+o+'">'+o+'</span>'}
@@ -221,7 +282,8 @@ async function loadActivity(){
     cards.innerHTML=(d.agents||[]).map(a=>'<div class="activity-card"><div class="agent">'+esc(a.agentType)+'</div><div class="time">'+fd(a.durationMs)+'</div><div class="count">'+a.taskCount+' task'+(a.taskCount===1?'':'s')+'</div></div>').join('')||'<div class="empty">No activity yet</div>';
     const body=document.getElementById('activity-body');
     body.innerHTML=activityRows.map((x,i)=>'<tr onclick="selectActivity('+i+')"><td>'+esc(x.agentType)+'</td><td class="task-col" title="'+esc(x.task)+'">'+esc(x.task.slice(0,90))+'</td><td>'+esc(x.projectName||'—')+'</td><td>'+new Date(x.startedAt).toLocaleString([],{month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'})+'</td><td>'+fd(x.durationMs)+'</td></tr>').join('')||'<tr><td colspan="5" class="empty">No collected tasks yet</td></tr>';
-    document.getElementById('status').textContent=activityRows.length+' tasks · '+new Date().toLocaleTimeString();
+    if(document.getElementById('panel-activity').classList.contains('visible'))
+      document.getElementById('status').textContent=activityRows.length+' tasks · '+new Date().toLocaleTimeString();
   }catch(e){document.getElementById('status').textContent='Error: '+e.message}
 }
 function selectActivity(i){
@@ -323,6 +385,7 @@ async function selectRun(id){
     const startedAt=run.started_at??run.startedAt;
     const endedAt=run.ended_at??run.endedAt;
     const agentType=run.agent_type??run.agentType??'';
+    const sessionId=run.session_id??run.sessionId??'';
     const modelId=run.model_id??run.modelId??'—';
     const projectName=run.project_name??run.projectName??'—';
     const taskPrompt=run.task_prompt??run.taskPrompt;
@@ -342,6 +405,7 @@ async function selectRun(id){
     h+='<span>🕐 '+tm+(dur?' · '+fd(dur):'')+'</span>';
     if(taskCategory)h+='<span><span class="badge-cat">'+taskCategory+'</span></span>';
     h+='<span style="font-family:monospace;font-size:11px;color:var(--dim);cursor:pointer" onclick="navigator.clipboard.writeText(\\''+run.id+'\\');this.textContent=\\'copied!\\';;setTimeout(()=>this.textContent=\\''+run.id.slice(0,12)+'\\',1000)" title="Click to copy full ID">'+run.id.slice(0,12)+'</span>';
+    if(sessionId)h+='<button class="session-link" data-session="'+esc(sessionId)+'" data-project="'+esc(projectName==='—'?'':projectName)+'" data-agent="'+esc(agentType)+'" onclick="openWorkSessionFrom(this,event)" title="Open every task collected from this native session">View session work</button>';
     h+='</div></div>';
 
     // Task prompt
@@ -352,7 +416,7 @@ async function selectRun(id){
 
     // Active session notice
     if(!endedAt){
-      h+='<div class="section" style="padding:10px 12px;background:rgba(59,130,246,0.15);border:1px solid rgba(59,130,246,0.3);border-radius:6px;color:var(--blue);font-size:12px">⏳ Session active — score, category, and outcome appear after the session ends.</div>';
+      h+='<div class="section" style="padding:10px 12px;background:color-mix(in srgb,var(--blue) 15%,transparent);border:1px solid color-mix(in srgb,var(--blue) 30%,transparent);border-radius:6px;color:var(--blue);font-size:12px">⏳ Session active — score, category, and outcome appear after the session ends.</div>';
     }else{
       // Completed but un-scored: no composite, no LLM/task/turn judge, no
       // deterministic, no manual review. Without this, the panel reads as a
@@ -362,7 +426,7 @@ async function selectRun(id){
       const scored=compScore!=null||evals.length>0;
       if(!scored){
         const reason=layer1Skipped?('deterministic checks skipped ('+esc(layer1Skipped)+') and no LLM judge ran'):'no evaluation ran for this task';
-        h+='<div class="section" style="padding:10px 12px;background:rgba(148,163,184,0.12);border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--muted);line-height:1.5">🔍 Not evaluated — '+reason+'.<br>Turn on a judge (Anthropic API, OpenClaw, local MLX 8B+, or Apple Intelligence) in <code>apme.judge</code> to score future tasks. Tasks without a judge still record their trajectory, cost, and outcome — they just carry no quality score.</div>';
+        h+='<div class="section" style="padding:10px 12px;background:color-mix(in srgb,var(--muted) 12%,transparent);border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--muted);line-height:1.5">🔍 Not evaluated — '+reason+'.<br>Turn on a judge (Anthropic API, OpenClaw, local MLX 8B+, or Apple Intelligence) in <code>apme.judge</code> to score future tasks. Tasks without a judge still record their trajectory, cost, and outcome — they just carry no quality score.</div>';
       }
     }
 
@@ -389,7 +453,7 @@ async function selectRun(id){
       h+='<div class="section"><div class="section-head"><span>Manual Reviews <span style="font-size:10px;color:var(--dim);border:1px solid var(--dim);border-radius:8px;padding:1px 6px;margin-left:6px">hand-run</span></span><span style="font-size:11px;color:var(--dim)">'+mEvals.length+'</span></div>';
       for(const e of mEvals){
         const risk=e.score>=1?'low':e.score>=0.5?'medium':'high';
-        const rc=risk==='high'?'var(--red)':risk==='medium'?'var(--amber,#d19a3a)':'var(--green)';
+        const rc=risk==='high'?'var(--red)':risk==='medium'?'var(--amber)':'var(--green)';
         let summary='',findings=0;
         if(e.raw){try{const r=JSON.parse(e.raw);summary=r.summary||'';findings=(r.findings||[]).length;}catch{}}
         h+='<div style="padding:6px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.06))">';
@@ -473,7 +537,7 @@ async function selectRun(id){
         if(cscore!=null)h+=fs(cscore);else h+='<span style="font-size:11px;color:var(--dim)">…</span>';
         h+='</div>';
         const ocGlyph=oc==='success'?'✓':oc==='partial'?'△':oc==='fail'?'✗':oc==='abandoned'?'⊘':'';
-        const ocColor=oc==='success'?'var(--green)':oc==='fail'?'var(--red)':oc==='partial'?'var(--orange,#f59e0b)':oc==='abandoned'?'var(--dim)':'var(--dim)';
+        const ocColor=oc==='success'?'var(--green)':oc==='fail'?'var(--red)':oc==='partial'?'var(--orange)':oc==='abandoned'?'var(--dim)':'var(--dim)';
         if(cat||oc)h+='<div style="margin-top:4px">'+(cat?'<span class="badge-cat">'+cat+'</span>':'')+(oc?' <span style="font-size:11px;color:'+ocColor+';margin-left:6px">'+ocGlyph+' '+oc+'</span>':'')+'</div>';
         if(summary)h+='<div style="color:var(--muted);font-size:12px;margin:6px 0 0;padding:6px 8px;background:var(--bg);border-radius:4px;border-left:2px solid var(--accent)">'+esc(summary.slice(0,500))+'</div>';
         h+='</div>';
@@ -558,7 +622,7 @@ async function loadTasks(offset){
     if(!tasks.length){body.innerHTML='<tr><td colspan="9" class="empty">No tasks match</td></tr>';document.getElementById('tasks-pager').textContent='';return}
     let h='';
     for(const t of tasks){
-      const label=t.summary||t.firstPrompt||('Task '+t.taskIndex);
+      const label=t.summary||t.firstPrompt||('Task '+(t.taskIndex+1));
       // A unit whose replies were never archived can only be partly judged —
       // say so on the row instead of letting a blank score read as "not run".
       const gap=t.turnCount>t.answeredTurns
@@ -592,6 +656,160 @@ function fillTaskFacets(f){
 }
 function taskSearchDebounced(){clearTimeout(taskSearchTimer);taskSearchTimer=setTimeout(()=>loadTasks(0),250)}
 
+/* ── Work board ────────────────────────────────────────────────────────────
+   Task-first default view. Rows come from /apme/tasks (server-paged), whose
+   ordering is attention-first, then recency. The lifecycle sub-tabs map to
+   the endpoint's \`view\` buckets; badge counts ride the same response so a
+   tab can never disagree with its rows. */
+let workOffset=0,workTotal=0,workView='',workSearchTimer=null,workCounts=null,workSession='',workSessionMeta=null;const WORK_PAGE=50;
+const WORK_VIEWS=[['','All'],['attention','Attention'],['judged','Judged'],['reported','Reported'],['inprogress','In progress'],['orphaned','Orphaned']];
+const SIG_LABEL={todo_complete:'TODO done',clear:'/clear',session_end:'Session end',manual:'Manual',idle_gap:'Idle gap',orphaned:'Orphaned',open:'open'};
+/* Boundary provenance: explicit (user/agent said so) > inferred (idle gap) >
+   default (session end) > reaper (orphaned). The chip color says how much to
+   trust the segmentation, not how well the task went. */
+function sigChip(sig){
+  const cls=(sig==='clear'||sig==='manual'||sig==='todo_complete')?'chip chip-ok'
+    :sig==='idle_gap'?'chip chip-warn'
+    :sig==='orphaned'?'chip chip-bad':'chip';
+  return '<span class="'+cls+'" title="task boundary source">'+esc(SIG_LABEL[sig]||sig||'—')+'</span>';
+}
+function ago(ts){
+  if(!ts)return'—';const s=Math.max(0,Math.round((Date.now()-ts)/1000));
+  if(s<60)return s+'s ago';if(s<3600)return Math.floor(s/60)+'m ago';
+  if(s<86400)return Math.floor(s/3600)+'h ago';return Math.floor(s/86400)+'d ago';
+}
+function renderWorkTabs(){
+  const counts=workCounts||{};
+  document.getElementById('work-tabs').innerHTML=WORK_VIEWS.map(([v,label])=>{
+    const n=v===''?counts.all:counts[v];
+    return '<button class="work-tab'+(workView===v?' active':'')+'" onclick="setWorkView(\\''+v+'\\')">'+label+
+      (n!=null?'<span class="n">'+n+'</span>':'')+'</button>';
+  }).join('')+'<span style="margin-left:auto;font-size:10px;color:var(--dim)">'+(workSession?'session · recent first':'attention first, then recency')+'</span>';
+}
+function setWorkView(v){workView=v;loadWork(0)}
+function shortSession(id){
+  if(!id)return'unknown';
+  if(id.includes(':'))return id.length>22?'…'+id.slice(-20):id;
+  return id.length>10?id.slice(0,8)+'…':id;
+}
+function renderWorkScope(){
+  const el=document.getElementById('work-scope');
+  if(!workSession){el.style.display='none';el.innerHTML='';return}
+  const m=workSessionMeta||{};
+  el.style.display='flex';
+  el.innerHTML='<strong style="color:var(--accent)">Session</strong>'+
+    (m.project?'<span>'+esc(m.project)+'</span>':'')+
+    (m.agent?'<span class="chip">'+esc(m.agent)+'</span>':'')+
+    '<code title="'+esc(workSession)+'">'+esc(shortSession(workSession))+'</code>'+
+    '<span>'+workTotal+' task'+(workTotal===1?'':'s')+'</span>'+
+    '<button class="clear" onclick="clearWorkSession()" title="Return to all sessions">All sessions ×</button>';
+}
+function setWorkSession(id,project,agent){
+  if(!id)return;
+  workSession=id;workSessionMeta={project:project||'',agent:agent||''};workView='';
+  document.getElementById('w-q').value='';
+  document.getElementById('w-agent').value='';
+  document.getElementById('w-project').value='';
+  loadWork(0);
+}
+function clearWorkSession(){workSession='';workSessionMeta=null;workView='';loadWork(0)}
+function openWorkSessionFrom(el,ev){
+  if(ev)ev.stopPropagation();
+  const id=el.dataset.session||'';if(!id)return;
+  const visible=document.getElementById('panel-work').classList.contains('visible');
+  if(visible){setWorkSession(id,el.dataset.project||'',el.dataset.agent||'');return}
+  // Switching from Run/Task detail: prime the scope first, then let showTab's
+  // single load render it. Calling setWorkSession here would fetch twice.
+  workSession=id;workSessionMeta={project:el.dataset.project||'',agent:el.dataset.agent||''};workView='';
+  document.getElementById('w-q').value='';
+  document.getElementById('w-agent').value='';
+  document.getElementById('w-project').value='';
+  showTabById('work');
+}
+async function loadWork(offset){
+  workOffset=offset||0;
+  const rowsEl=document.getElementById('work-rows');
+  const p=new URLSearchParams();
+  p.set('limit',String(WORK_PAGE));p.set('offset',String(workOffset));
+  if(!workSession)p.set('sort','attention');
+  if(workView)p.set('view',workView);
+  if(workSession)p.set('session',workSession);
+  const q=document.getElementById('w-q').value.trim();if(q)p.set('q',q);
+  const ag=document.getElementById('w-agent').value;if(ag)p.set('agent',ag);
+  const pr=document.getElementById('w-project').value;if(pr)p.set('project',pr);
+  try{
+    const r=await fetch(api('/apme/tasks?'+p.toString()));
+    if(!r.ok)throw new Error('HTTP '+r.status);
+    const d=await r.json();
+    const tasks=d.tasks||[];workTotal=d.total||0;workCounts=d.viewCounts||null;
+    if(workSession&&tasks[0])workSessionMeta={project:tasks[0].projectName||'',agent:tasks[0].agentType||''};
+    renderWorkTabs();
+    renderWorkScope();
+    // A page that shrank under us (idle-gap closes, filters) leaves a stale
+    // offset past the new total — clamp back instead of rendering an empty
+    // page with no pager (which the 15s tick would then refetch forever).
+    if(!tasks.length&&workTotal>0&&workOffset>0){
+      loadWork(Math.max(0,Math.floor((workTotal-1)/WORK_PAGE)*WORK_PAGE));
+      return;
+    }
+    const fill=(id,vals)=>{const s=document.getElementById(id);const cur=s.value;
+      while(s.options.length>1)s.remove(1);
+      (vals||[]).forEach(v=>{const o=document.createElement('option');o.value=v;o.textContent=v;s.add(o)});
+      s.value=cur;};
+    fill('w-agent',(d.facets||{}).agents);fill('w-project',(d.facets||{}).projects);
+    if(!tasks.length){rowsEl.innerHTML='<div class="empty">No tasks in this view</div>';document.getElementById('work-pager').textContent='';return}
+    let h='';
+    for(const t of tasks){
+      // Summary-first, like the timeline SSOT: the judge's outcome sentence
+      // outranks the intent title; the intent covers the unjudged majority.
+      const label=t.summary||t.title||('Task '+(t.taskIndex+1));
+      const unnamed=!t.title&&!t.summary;
+      const gap=t.turnCount>t.answeredTurns
+        ?'<span title="'+(t.turnCount-t.answeredTurns)+' turn(s) archived without a reply" style="color:var(--yellow)">◍</span>':'';
+      const open=!t.endedAt;
+      const score=t.overallScore!=null?fs(t.overallScore)
+        :open?'<span class="badge badge-pending">open</span>'
+        :'<span style="font-size:10px;color:var(--dim)">unjudged</span>';
+      // Cost basis grammar: bare $ only for a KNOWN figure, ≈$ for estimates.
+      const cost=t.costUsd!=null?(t.costKnown?'$':'≈$')+t.costUsd.toFixed(2):'';
+      const turns=t.turnCount?t.turnCount+' turn'+(t.turnCount===1?'':'s'):'';
+      h+='<div class="work-row'+(t.attention?' attn':'')+(selTaskId===t.id?' selected':'')+'" id="wr-'+t.id+'" onclick="selectTask(\\''+t.id+'\\')">'+
+        '<div class="work-title"><span class="t'+(unnamed?' unnamed':'')+'" title="'+esc(t.firstPrompt||label)+'">'+esc(label)+'</span>'+gap+
+          (t.outcome?fo(t.outcome):'')+score+'</div>'+
+        '<div class="work-sub">'+
+          sigChip(open?'open':t.boundarySignal)+
+          '<span class="chip">'+esc(t.agentType||'—')+'</span>'+
+          (t.sessionId?'<button class="session-link" data-session="'+esc(t.sessionId)+'" data-project="'+esc(t.projectName||'')+'" data-agent="'+esc(t.agentType||'')+'" onclick="openWorkSessionFrom(this,event)" title="Show all work in this session">'+esc(t.projectName||'No project')+' · '+esc(shortSession(t.sessionId))+'</button>':'')+
+          (t.taskCategory?'<span class="badge-cat">'+esc(t.taskCategory)+'</span>':'')+
+          (t.coordination?'<span class="chip" title="subagent dispatches / agent-to-agent messages" style="color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)">'+
+            (t.coordination.dispatches?'⑂×'+t.coordination.dispatches:'')+
+            (t.coordination.dispatches&&t.coordination.messages?' ':'')+
+            (t.coordination.messages?'✉×'+t.coordination.messages:'')+'</span>':'')+
+          (t.actionFold?'<span>'+esc(t.actionFold)+'</span>':'')+
+          (turns?'<span>'+turns+'</span>':'')+
+          (cost?'<span>'+cost+'</span>':'')+
+          '<span style="margin-left:auto">'+ago(t.startedAt)+'</span>'+
+        '</div></div>';
+    }
+    rowsEl.innerHTML=h;
+    const from=workTotal?workOffset+1:0,to=Math.min(workOffset+tasks.length,workTotal);
+    document.getElementById('work-pager').innerHTML=
+      '<button onclick="loadWork('+Math.max(0,workOffset-WORK_PAGE)+')" '+(workOffset<=0?'disabled':'')+' style="background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:3px 10px;cursor:pointer">Prev</button>'+
+      '<span>'+from+'–'+to+' of '+workTotal+'</span>'+
+      '<button onclick="loadWork('+(workOffset+WORK_PAGE)+')" '+(to>=workTotal?'disabled':'')+' style="background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:3px 10px;cursor:pointer">Next</button>';
+    if(document.getElementById('panel-work').classList.contains('visible'))
+      document.getElementById('status').textContent=workTotal+' tasks · '+new Date().toLocaleTimeString();
+  }catch(e){
+    // Both daemons serve /apme/tasks now (Swift since 2026-08-29), but an
+    // OLDER Swift daemon build may not — say which capability is missing
+    // instead of a bare error, so a degraded board is a labeled state.
+    rowsEl.innerHTML='<div class="empty">Task list unavailable ('+esc(e.message)+').<br>'+
+      'An older daemon build may not serve /apme/tasks; Activity and Runs tabs still work.</div>';
+    document.getElementById('work-pager').textContent='';
+  }
+}
+function workSearchDebounced(){clearTimeout(workSearchTimer);workSearchTimer=setTimeout(()=>loadWork(0),250)}
+
 async function selectTask(id){
   selTaskId=id;
   const el=document.getElementById('detail-panel');
@@ -599,18 +817,30 @@ async function selectTask(id){
   try{
     const r=await fetch(api('/apme/tasks/'+id));const d=await r.json();
     const t=d.task||{},run=d.run||{},turns=d.turns||[],evals=d.evals||[],sample=d.sample;
+    // Normalize both casings like selectRun does — an older Swift daemon
+    // build serves this detail with snake_case keys.
+    const taskIndex=t.taskIndex??t.task_index;
+    const startedAt=t.startedAt??t.started_at;
+    const endedAt=t.endedAt??t.ended_at;
+    const boundarySignal=t.boundarySignal??t.boundary_signal;
+    const costUsd=t.costUsd??t.cost_usd;
+    const taskSessionId=run.sessionId??run.session_id??'';
+    const taskAgent=run.agentType||run.agent_type||'';
+    const taskProject=run.projectName||run.project_name||'';
     let h='';
-    h+='<div class="detail-header"><h2>'+esc(t.summary||('Task '+t.taskIndex))+'</h2>';
-    h+='<div class="meta-row"><span>'+esc(run.agentType||'')+'</span><span>'+esc(run.modelId||'—')+'</span>'+
-       '<span>'+esc(run.projectName||'—')+'</span>'+
-       '<span>'+(t.startedAt?new Date(t.startedAt).toLocaleString():'—')+'</span>'+
-       '<span>'+(t.endedAt?fd(t.endedAt-t.startedAt):'<span style="color:var(--yellow)">open</span>')+'</span>'+
-       '<span>boundary '+esc(t.boundarySignal||'—')+'</span></div></div>';
-    h+='<div class="section"><div class="metric-grid">'
-       '<div class="metric-card"><div class="lbl">Score</div><div class="val">'+fs(d.overallScore??t.compositeScore)+'</div></div>'+
+    h+='<div class="detail-header"><h2>'+esc(t.summary||('Task '+((taskIndex??0)+1)))+'</h2>';
+    h+='<div class="meta-row"><span>'+esc(run.agentType||run.agent_type||'')+'</span><span>'+esc(run.modelId||run.model_id||'—')+'</span>'+
+       '<span>'+esc(run.projectName||run.project_name||'—')+'</span>'+
+       '<span>'+(startedAt?new Date(startedAt).toLocaleString():'—')+'</span>'+
+       '<span>'+(endedAt?fd(endedAt-startedAt):'<span style="color:var(--yellow)">open</span>')+'</span>'+
+       '<span>boundary '+esc(boundarySignal||'—')+'</span>'+
+       (taskSessionId?'<button class="session-link" data-session="'+esc(taskSessionId)+'" data-project="'+esc(taskProject)+'" data-agent="'+esc(taskAgent)+'" onclick="openWorkSessionFrom(this,event)" title="Open every task collected from this native session">View session work</button>':'')+
+       '</div></div>';
+    h+='<div class="section"><div class="metric-grid">'+
+       '<div class="metric-card"><div class="lbl">Score</div><div class="val">'+fs(d.overallScore??t.compositeScore??t.composite_score)+'</div></div>'+
        '<div class="metric-card"><div class="lbl">Turns</div><div class="val">'+turns.length+'</div></div>'+
        '<div class="metric-card"><div class="lbl">Events</div><div class="val">'+((sample&&sample.events?sample.events.length:0))+'</div></div>'+
-       '<div class="metric-card"><div class="lbl">Cost</div><div class="val">'+(t.costUsd!=null?'$'+t.costUsd.toFixed(4):'—')+'</div></div>'+
+       '<div class="metric-card"><div class="lbl">Cost</div><div class="val">'+(costUsd!=null?'$'+costUsd.toFixed(4):'—')+'</div></div>'+
        '</div></div>';
     if(evals.length){
       h+='<div class="section"><div class="section-head"><span>Evals</span></div><table><tbody>';
@@ -634,7 +864,12 @@ async function selectTask(id){
     h+='</div>';
     el.innerHTML=h;
   }catch(e){el.innerHTML='<div class="detail-empty">Error: '+esc(e.message)+'</div>'}
-  loadTasks(taskOffset);
+  // Move the selection highlight in place — a full list refetch just to move
+  // a CSS class was the dashboard's most expensive click.
+  if(document.getElementById('panel-work').classList.contains('visible')){
+    document.querySelectorAll('.work-row.selected').forEach(r=>r.classList.remove('selected'));
+    const row=document.getElementById('wr-'+id);if(row)row.classList.add('selected');
+  } else loadTasks(taskOffset);
 }
 
 async function loadScorecard(){
@@ -681,7 +916,7 @@ async function loadRecommend(){
       h+='<table style="margin-top:4px"><thead><tr><th>Agent</th><th>Model</th><th>Quality</th><th>$/Quality</th><th>Cost</th><th>Samples</th></tr></thead><tbody>';
       for(const s of list){
         const isBest=s===best;
-        h+='<tr'+(isBest?' style="background:rgba(34,197,94,0.08)"':'')+'><td>'+(isBest?'★ ':'')+esc(s.agentType||'—')+'</td><td>'+esc((s.modelId||'—').slice(0,22))+'</td><td>'+fs(s.avgQuality)+'</td><td>'+(s.costPerQuality!=null?'$'+s.costPerQuality.toFixed(3):'—')+'</td><td>'+(s.totalCost!=null?'$'+s.totalCost.toFixed(2):'—')+'</td><td>'+s.samples+'</td></tr>';
+        h+='<tr'+(isBest?' style="background:color-mix(in srgb,var(--green) 8%,transparent)"':'')+'><td>'+(isBest?'★ ':'')+esc(s.agentType||'—')+'</td><td>'+esc((s.modelId||'—').slice(0,22))+'</td><td>'+fs(s.avgQuality)+'</td><td>'+(s.costPerQuality!=null?'$'+s.costPerQuality.toFixed(3):'—')+'</td><td>'+(s.totalCost!=null?'$'+s.totalCost.toFixed(2):'—')+'</td><td>'+s.samples+'</td></tr>';
       }
       h+='</tbody></table></div>';
     }
@@ -697,7 +932,11 @@ async function loadRecommend(){
 
    Colour is by node kind; radius by degree, so the derived hubs (a file many
    tasks touched, a tool used everywhere) are the ones that read as structural. */
-const G_COLORS={run:'#6166E0',task:'#22c55e',turn:'#64748b',session:'#eab308',project:'#06b6d4',model:'#a855f7',agent:'#C07058',tool:'#f97316',file:'#94a3b8'};
+// Canvas 2D can't resolve var() at draw time, so node colors are read off
+// :root once — every value is a design token, keeping the file hex-free
+// outside the :root mirror (design/verify-tokens-sync.py).
+const cssTok=n=>getComputedStyle(document.documentElement).getPropertyValue(n).trim();
+const G_COLORS={run:cssTok('--ui-cyan'),task:cssTok('--ui-ok'),turn:cssTok('--ui-idle-dark'),session:cssTok('--amber-500'),project:cssTok('--kelp-300'),model:cssTok('--kelp-500'),agent:cssTok('--coral-500'),tool:cssTok('--ui-attn'),file:cssTok('--ink-300')};
 const G_EDGE={contains:'rgba(148,163,184,0.35)',continues:'rgba(97,102,224,0.75)',produced:'rgba(234,179,8,0.30)',used:'rgba(249,115,22,0.30)',touched:'rgba(148,163,184,0.25)'};
 
 async function loadGraph(){
@@ -810,12 +1049,12 @@ function startGraphSim(nodes,edges){
       ctx.beginPath();ctx.moveTo(l.s.x,l.s.y);ctx.lineTo(l.t.x,l.t.y);ctx.stroke();
     }
     for(const n of nodes){
-      ctx.fillStyle=G_COLORS[n.kind]||'#94a3b8';
+      ctx.fillStyle=G_COLORS[n.kind]||G_COLORS.file;
       ctx.globalAlpha=hover&&hover!==n?0.55:1;
       ctx.beginPath();ctx.arc(n.x,n.y,n.r,0,6.2832);ctx.fill();
       // Label only what carries the structure, else the canvas is unreadable.
       if(n.r>7||n===hover){
-        ctx.globalAlpha=1;ctx.fillStyle='#cbd5e1';ctx.font='10px ui-monospace,monospace';
+        ctx.globalAlpha=1;ctx.fillStyle=cssTok('--ui-tty-text');ctx.font='10px ui-monospace,monospace';
         ctx.fillText(String(n.label||'').slice(0,26),n.x+n.r+3,n.y+3);
       }
       ctx.globalAlpha=1;
@@ -832,12 +1071,13 @@ function showTabById(n){
   if(btn)btn.click();
 }
 
-loadActivity();loadRuns();loadRecommend();loadScorecard();loadCategories();
+loadWork(0);loadActivity();loadRuns();loadRecommend();loadScorecard();loadCategories();
 setInterval(loadRuns,15000);setInterval(loadRecommend,30000);setInterval(loadScorecard,30000);setInterval(loadCategories,30000);
-// Tasks refresh only while its tab is up — the query is server-paged and there
-// is no reason to run it against the store every 15s in the background.
+// Tasks/Work refresh only while their tab is up — the query is server-paged and
+// there is no reason to run it against the store every 15s in the background.
 setInterval(()=>{if(document.getElementById('panel-tasks').classList.contains('visible'))loadTasks(taskOffset)},15000);
 setInterval(()=>{if(document.getElementById('panel-activity').classList.contains('visible'))loadActivity()},15000);
+setInterval(()=>{if(document.getElementById('panel-work').classList.contains('visible'))loadWork(workOffset)},15000);
 </script>
 </body>
 </html>`;

package/dist/apme/dashboard-html.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-html.js","sourceRoot":"","sources":["../../src/apme/dashboard-html.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,UAAU,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAk0BD,CAAC;AACT,CAAC"}
+{"version":3,"file":"dashboard-html.js","sourceRoot":"","sources":["../../src/apme/dashboard-html.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,UAAU,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkjCD,CAAC;AACT,CAAC"}

package/dist/apme/http.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"http.d.ts","sourceRoot":"","sources":["../../src/apme/http.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAM7C,wBAAsB,iBAAiB,CACrC,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,UAAU,GAAG,IAAI,GACtB,OAAO,CAAC,OAAO,CAAC,CAwQlB;AAyCD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAMzG"}
+{"version":3,"file":"http.d.ts","sourceRoot":"","sources":["../../src/apme/http.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAS7C,wBAAsB,iBAAiB,CACrC,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,UAAU,GAAG,IAAI,GACtB,OAAO,CAAC,OAAO,CAAC,CAmSlB;AAyCD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAMzG"}

package/dist/apme/http.js

@@ -15,8 +15,9 @@
  */
 import { loadApmeConfig } from './settings.js';
 import { apmeDashboardHtml } from './dashboard-html.js';
-import { EVAL_SCHEMA_VERSION } from '@agentdeck/shared';
+import { agentCoordinationSummary, deriveTaskTitle, foldActionCounts, EVAL_SCHEMA_VERSION } from '@agentdeck/shared';
 import { activitySnapshotForStore } from './activity-history.js';
+const TASK_VIEWS = ['attention', 'inprogress', 'judged', 'reported', 'orphaned'];
 export async function handleApmeRequest(req, res, apme) {
     const url = new URL(req.url ?? '/', `http://${req.headers.host ?? 'localhost'}`);
     if (!url.pathname.startsWith('/apme'))
@@ -113,19 +114,46 @@ export async function handleApmeRequest(req, res, apme) {
             const limit = clampInt(url.searchParams.get('limit'), 1, 500, 50);
             const offset = clampInt(url.searchParams.get('offset'), 0, 1_000_000, 0);
             const stateParam = url.searchParams.get('state');
-            const { total, tasks } = apme.store.listTaskPage({
-                limit, offset,
+            const viewParam = url.searchParams.get('view');
+            const view = TASK_VIEWS.find((v) => v === viewParam);
+            const filters = {
                 ...(url.searchParams.get('agent') ? { agentType: url.searchParams.get('agent') } : {}),
+                ...(url.searchParams.get('session') ? { sessionId: url.searchParams.get('session') } : {}),
                 ...(url.searchParams.get('project') ? { projectName: url.searchParams.get('project') } : {}),
                 ...(url.searchParams.get('category') ? { category: url.searchParams.get('category') } : {}),
                 ...(url.searchParams.get('outcome') ? { outcome: url.searchParams.get('outcome') } : {}),
-                ...(stateParam === 'closed' || stateParam === 'open' ? { state: stateParam } : {}),
                 ...(url.searchParams.get('q') ? { q: url.searchParams.get('q') } : {}),
+            };
+            const { total, tasks } = apme.store.listTaskPage({
+                limit, offset,
+                ...filters,
+                ...(stateParam === 'closed' || stateParam === 'open' ? { state: stateParam } : {}),
+                ...(view ? { view } : {}),
+                // Attention-first is the Work board's ordering and ONLY the Work
+                // board's — every other listTaskPage consumer keeps pure recency.
+                ...(url.searchParams.get('sort') === 'attention' ? { order: 'attention' } : {}),
+            });
+            // Work-board display projections, enriched here so the store keeps
+            // returning raw facts: intent title (deriveTaskTitle SSOT — the same
+            // rules that name the timeline's task_start header, over the task's OWN
+            // first prompt, never the run fallback) and the folded action line
+            // (foldActionCounts SSOT) over one grouped tool query.
+            const toolCounts = apme.store.toolCountsForTasks(tasks.map((t) => t.id));
+            const enriched = tasks.map((t) => {
+                const tools = toolCounts.get(t.id) ?? [];
+                return {
+                    ...t,
+                    title: deriveTaskTitle(t.ownFirstPrompt),
+                    actionFold: foldActionCounts({ tools, filesTouched: t.filesTouched }),
+                    coordination: agentCoordinationSummary(tools),
+                };
             });
             sendJson(res, 200, {
                 schema: EVAL_SCHEMA_VERSION,
-                total, limit, offset, tasks,
+                total, limit, offset, tasks: enriched,
                 facets: apme.store.taskFacets(),
+                // Badges honor the same narrowing filters as the rows.
+                viewCounts: apme.store.taskViewCounts(filters),
             });
             return true;
         }