great-cto 3.69.0 → 3.70.1

package/board/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "great-cto",
   "description": "You already have the agent. This is everything around it. great_cto runs Claude Code as a pipeline of 72 specialist agents \u2014 an independent model checks each stage before the next builds on it, spending caps refuse rather than warn, and three decisions stay yours: what gets built, how, and whether it ships.",
-  "version": "3.69.0",
+  "version": "3.70.1",
   "author": {
     "name": "Alexander Velikiy",
     "url": "https://hashnode.com/@Greatcto"

package/board/packages/board/lib/routes.mjs

@@ -1266,6 +1266,11 @@ async function dispatch(req, res, url, cwd) {
   // shared sanitized projection only: prompts, approval tokens and artifact
   // bytes never cross into the browser payload.
   if (pathname === '/api/codex-runs') {
+    if (requestedProject && resolveProjectInfo(requestedProject).resolved === 'fallback') {
+      res.writeHead(404, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' });
+      res.end(JSON.stringify({ error: 'Unknown project; execution graphs were not read', state: 'unavailable' }));
+      return true;
+    }
     const result = listCodexRuns({ root: cwd });
     const headers = { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' };
     if (result.state === 'degraded') headers['X-Board-Degraded'] = encodeURIComponent(`${result.unreadable} unreadable Codex run state file(s)`);

package/board/packages/board/lib/work.mjs

@@ -29,7 +29,8 @@ function executionAttempts(run) {
     phase: short(a.phase), status: short(a.status), startedAt: date(a.startedAt), finishedAt: date(a.finishedAt),
   }));
   const truncated = attempts.length > 200;
-  return { state: nodes.length ? 'recorded' : 'unknown', nodes, topology: 'unknown', truncated,
+  const graph = run?.executionGraph || { state: 'unavailable', complete: false, nodes: [], edges: [], snapshots: [], reason: 'No linked controller-recorded graph is available.' };
+  return { state: nodes.length ? 'recorded' : 'unknown', nodes, topology: graph.state === 'recorded' ? 'recorded' : 'unknown', graph, truncated,
     partial: !run || truncated || nodes.length !== window.length,
     reason: !run ? 'Stable attempt observations are unavailable without a single explicitly linked controlled run.'
       : !nodes.length ? 'No usable attempt observations are recorded.' : null };

package/board/packages/board/public/assets/admin-shell.css

@@ -1,4 +1,18 @@
 /* Approved task-first shell, using existing light/dark semantic tokens. */
+.execution-graph{min-width:0;margin:18px 0;padding:16px;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg-card)}
+.execution-graph-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
+.execution-graph-canvas{overflow:auto;max-width:100%;max-height:560px;border:1px solid var(--border-strong);background:var(--bg-page)}
+.execution-graph-canvas svg{display:block;max-width:none;font-family:var(--sans);font-size:12px;color:var(--text)}
+.execution-node{cursor:pointer;outline:none}
+.execution-node rect{fill:var(--bg-card);stroke:var(--text2);stroke-width:1.5}
+.execution-node text{fill:var(--text)}
+.execution-node:focus rect,.execution-node:hover rect{stroke:var(--focus-ring);stroke-width:3}
+.execution-edges{stroke:var(--text2);stroke-width:1.5}
+#execution-arrow path{fill:var(--text2)}
+.execution-node-detail{margin:8px 0;padding:10px;border:1px solid var(--border-strong);border-radius:5px;overflow-wrap:anywhere}
+.execution-node-detail summary{cursor:pointer;min-height:28px}
+.execution-node-detail dt{margin-top:10px;font-weight:600}
+.execution-node-detail dd{margin:4px 0;color:var(--text2);overflow-wrap:anywhere}
 #nav-tablist .nav-item{width:100%;background:transparent;border:0;border-radius:5px;font-family:var(--sans,Geist,sans-serif);font-size:14px;text-align:left;min-height:44px;color:var(--text2);cursor:pointer}
 #nav-tablist .nav-item.active{background:var(--accent-soft);color:var(--text);font-weight:600}
 #nav-tablist .nav-item:hover{background:var(--bg-muted)}
@@ -36,3 +50,66 @@
 #panel-inbox .inbox-page{max-width:1500px}.nav-item:focus-visible,.admin-subtab:focus-visible,.knowledge-file:focus-visible,.work-filter:focus-visible,.work-tab:focus-visible,.work-task-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
 @media(max-width:1100px){.knowledge-layout,.work-cockpit{grid-template-columns:230px minmax(0,1fr)}.admin-metrics{grid-template-columns:1fr 1fr}.admin-metrics section{border-bottom:1px solid var(--border)}}
 @media(max-width:768px){.admin-page,.work-page{padding:16px!important}.knowledge-layout,.work-cockpit{grid-template-columns:minmax(0,1fr)}#knowledge-index{border-right:0;border-bottom:1px solid var(--border);max-height:270px}.work-task-list{border-right:0;border-bottom:1px solid var(--border);max-height:240px;overflow:auto}#knowledge-document,.work-detail{padding:18px}.admin-page-heading{align-items:flex-start}.admin-metrics section{padding:15px 10px}.admin-metrics h2{font-size:23px}.admin-doc-heading{align-items:flex-start;flex-direction:column}#admin-subnav{padding:10px 16px}.admin-table{min-width:530px}.work-tabs{gap:4px}}
+
+/* Canvas focus: the selected task owns the content area, not a nested master list. */
+.canvas-task .work-page{max-width:none!important;padding:18px 24px!important}
+.work-list-only .work-task-list{border:1px solid var(--border);border-radius:6px;background:var(--bg-card)}
+.work-list-only .work-task-row{padding:16px 18px;display:grid;grid-template-columns:minmax(180px,2fr) minmax(130px,1fr) minmax(110px,1fr);gap:16px;align-items:center}
+.work-list-only .work-task-row:last-child{border-bottom:0}
+.work-task-header{display:block;margin:0 0 16px;min-width:0}
+.work-task-header h2{font-size:23px;line-height:1.3;letter-spacing:-.5px;margin:12px 0 8px;overflow-wrap:anywhere}
+.work-task-header p{margin:8px 0;font-size:12px;color:var(--text2)}
+.work-task-header button{min-height:40px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:5px;background:var(--bg-card);color:var(--text);font:inherit;cursor:pointer;flex-shrink:0}
+.work-detail-only,.work-workspace{min-width:0}
+.work-detail-only .work-detail{padding:0}
+.canvas-task .work-tabs{margin-bottom:16px}
+.work-execution-flat{padding:0!important;border:0!important;background:transparent!important}
+.work-execution-flat>.execution-graph{padding:0;border:0;margin:12px 0}
+.execution-graph-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
+.execution-graph-toolbar h3{font-size:15px;margin:0}
+.execution-graph-toolbar .execution-graph-tools{margin:0;gap:6px}
+.execution-graph-tools .gate-btn{width:auto;flex:0 0 auto;min-height:40px;padding:7px 12px;font-size:12px;border:1px solid var(--border-strong);border-radius:5px;background:var(--bg-card);color:var(--text)}
+.canvas-execution .execution-graph-canvas{height:clamp(360px,calc(100dvh - 340px),850px);max-height:none;border:1px solid var(--border-strong);border-radius:6px;overscroll-behavior:contain;background:var(--bg-page);touch-action:pan-x pan-y}
+.canvas-task .execution-node-detail{margin:8px 0;padding:10px}
+.work-execution-flat>details{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
+.work-execution-flat>details>summary{min-height:40px;cursor:pointer}
+.work-switcher,.work-node-inspector{color:var(--text);background:var(--bg-card);border:1px solid var(--border-strong);border-radius:8px;padding:20px;box-shadow:0 8px 32px rgb(0 0 0 / .18);max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;overflow-wrap:anywhere}
+.work-switcher{width:590px}
+.work-switcher::backdrop{background:rgb(0 0 0 / .35)}
+.work-switcher input{display:block;box-sizing:border-box;width:100%;padding:10px;margin:10px 0;border:1px solid var(--border-strong);background:var(--bg-page);color:var(--text);font:inherit;border-radius:5px}
+.work-switcher button,.work-node-inspector button{min-height:40px;padding:8px 12px;background:var(--bg-card);color:var(--text);border:1px solid var(--border-strong);border-radius:5px;font:inherit;cursor:pointer}
+.work-switcher [data-work-select]{display:block;width:100%;text-align:left;margin-top:8px}
+.work-switcher h2,.work-node-inspector h2{font-size:18px;margin:0 0 12px}
+.work-node-inspector{position:fixed;inset:260px 14px 14px auto;margin:0;width:360px;max-height:calc(100dvh - 274px);z-index:25}
+.work-node-inspector .execution-node-detail{border:0;padding:0}
+.work-node-inspector .execution-node-detail summary{overflow-wrap:anywhere;line-height:1.6}
+.work-node-inspector dd code{white-space:normal;overflow-wrap:anywhere}
+.work-node-inspector [data-graph-close]{float:right}
+.canvas-nav-toggle{display:none;align-items:center;justify-content:center;min-width:40px;min-height:40px;border:1px solid var(--border-strong);border-radius:5px;background:var(--bg-card);color:var(--text);cursor:pointer}
+@media(min-width:769px){
+ .canvas-execution .canvas-nav-toggle{display:inline-flex}
+ .canvas-execution:not(.canvas-navigation-expanded) .sidebar{width:64px;overflow:visible}
+ .canvas-execution:not(.canvas-navigation-expanded) .sidebar-brand{justify-content:center;padding:14px 10px}
+ .canvas-execution:not(.canvas-navigation-expanded) .brand-name,.canvas-execution:not(.canvas-navigation-expanded) #build-version,.canvas-execution:not(.canvas-navigation-expanded) .sw-meta,.canvas-execution:not(.canvas-navigation-expanded) .proj-switch>.chev,.canvas-execution:not(.canvas-navigation-expanded) .nav-label,.canvas-execution:not(.canvas-navigation-expanded) .sidebar-footer #live-label,.canvas-execution:not(.canvas-navigation-expanded) .sidebar .nav-section,.canvas-execution:not(.canvas-navigation-expanded) #nav-views-label,.canvas-execution:not(.canvas-navigation-expanded) .nav-views{display:none!important}
+ .canvas-execution:not(.canvas-navigation-expanded) .proj-switch{justify-content:center;padding:14px 8px}
+ .canvas-execution:not(.canvas-navigation-expanded) .proj-menu{left:54px;width:320px;top:0}
+ .canvas-execution:not(.canvas-navigation-expanded) #nav-tablist{padding:8px}
+ .canvas-execution:not(.canvas-navigation-expanded) #nav-tablist .nav-item{justify-content:center;position:relative;min-height:44px;padding:10px;overflow:visible}
+ .canvas-execution:not(.canvas-navigation-expanded) #nav-tablist .count{display:none}
+ .canvas-execution:not(.canvas-navigation-expanded) #nav-tablist .nav-item:is(:hover,:focus-visible)::after{content:attr(data-nav-label);position:absolute;left:50px;top:4px;z-index:50;white-space:nowrap;padding:8px 12px;border:1px solid var(--border-strong);border-radius:5px;background:var(--bg-card);color:var(--text);box-shadow:0 3px 12px rgb(0 0 0 / .12);pointer-events:none}
+ .canvas-execution:not(.canvas-navigation-expanded) .sidebar-footer{justify-content:center;padding:12px 8px}
+}
+@media(max-width:768px){
+ .canvas-task .work-page{padding:16px!important}
+ .work-task-header h2{font-size:20px}
+ .work-list-only .work-task-row{display:block;line-height:1.6}
+ .work-list-only .work-task-row small{margin-top:6px}
+ .work-node-inspector{inset:auto 12px 12px 12px;width:auto;max-height:65dvh}
+ .canvas-execution .execution-graph-canvas{height:55dvh;min-height:300px}
+ .canvas-execution .topbar .search-box{display:none}
+ .execution-graph-tools .gate-btn{min-height:44px}
+}
+
+.work-task-navigation{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.work-task-navigation>.work-meta{margin-right:auto}.canvas-task .topbar .btn-new{display:none}
+
+.work-page .execution-graph-tools .gate-btn{background:var(--bg-card);color:var(--text);width:auto;min-height:40px}.work-node-inspector header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.work-node-inspector [data-dialog-close]{flex-shrink:0}

package/board/packages/board/public/assets/admin-shell.js

@@ -3,6 +3,8 @@
   const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
   const aliases = { docs:'knowledge', usage:'insights/consumption', ledger:'insights/ledger', budgets:'insights/ledger', dashboard:'insights/ledger', fleet:'settings/executors', agents:'settings/executors', harness:'settings/runtime', skills:'settings/capabilities', history:'work/completed', inbox:'decisions', notifications:'settings/general', share:'settings/general' };
   function route(input) {
+    const taskRoute = window.GctoWork?.parseRoute?.(input);
+    if (taskRoute) return { canonical:taskRoute.canonical, panel:'work', primary:'work', workRoute:true };
     if (/^(?:agents|fleet)\/[a-z0-9-]+$/i.test(input)) return {canonical:input,panel:'agents',primary:'settings'};
     const canonical = aliases[input] || input;
     const panels = { work:'work','work/completed':'history',decisions:'inbox',knowledge:'knowledge',insights:'admin-outcomes','insights/outcomes':'admin-outcomes','insights/consumption':'usage','insights/ledger':'budgets',settings:'agents','settings/executors':'agents','settings/runtime':'harness','settings/capabilities':'skills','settings/general':'settings' };
@@ -76,10 +78,31 @@
       });
     } catch(error) {if(current(seq,project)&&docTicket===request) panel('knowledge-document').textContent='Document could not be read: '+error.message;}
   }
+  let expandedNavigation = false;
+  function setWorkView(view = {}) {
+    const detail = !!view.detail && selectedRoute.split('/')[0].split('?')[0] === 'work';
+    const execution = detail && view.tab === 'execution';
+    document.body.classList.toggle('canvas-task', detail);
+    document.body.classList.toggle('canvas-execution', execution);
+    document.body.classList.toggle('canvas-navigation-expanded', execution && expandedNavigation);
+    const toggle = panel('canvas-nav-toggle');
+    if (toggle) { toggle.hidden = !execution; toggle.setAttribute('aria-expanded', String(expandedNavigation)); toggle.setAttribute('aria-label', expandedNavigation ? 'Compact navigation' : 'Expand navigation'); toggle.title = expandedNavigation ? 'Compact navigation' : 'Expand navigation'; }
+    const composer = panel('work-compose')?.closest('.admin-compose');
+    if (composer) composer.hidden = detail;
+    const heading = document.querySelector('.work-page > h1');
+    if (heading) heading.hidden = detail;
+  }
+  function navigateWork(canonical) {
+    const parsed = window.GctoWork?.parseRoute?.(canonical);
+    if (!parsed) return;
+    const hash = '#/' + parsed.canonical;
+    if (location.hash !== hash) history.pushState(null, '', hash);
+    window.switchTab(parsed.canonical);
+  }
   function setup() {
     const nav=panel('nav-tablist'), existing={};
     document.querySelectorAll('.nav-item[data-tab]').forEach(n=>existing[n.dataset.tab]=n.querySelector('svg')?.outerHTML||'');
-    nav.innerHTML=['work','decisions','knowledge','insights','settings'].map(key=>`<button type="button" class="nav-item${key==='work'?' active':''}" role="tab" aria-selected="${key==='work'}" data-tab="${key}" tabindex="0" onkeydown="navTabKeydown(event,this)">${existing[key]||existing[key==='knowledge'?'skills':key==='insights'?'usage':'harness']||''}<span class="nav-label">${key[0].toUpperCase()+key.slice(1)}</span>${key==='decisions'?'<span class="count" id="nav-inbox-count">0</span>':''}</button>`).join('');
+    nav.innerHTML=['work','decisions','knowledge','insights','settings'].map(key=>`<button type="button" class="nav-item${key==='work'?' active':''}" role="tab" aria-selected="${key==='work'}" data-tab="${key}" aria-label="${key[0].toUpperCase()+key.slice(1)}" data-nav-label="${key[0].toUpperCase()+key.slice(1)}" tabindex="0" onkeydown="navTabKeydown(event,this)">${existing[key]||existing[key==='knowledge'?'skills':key==='insights'?'usage':'harness']||''}<span class="nav-label">${key[0].toUpperCase()+key.slice(1)}</span>${key==='decisions'?'<span class="count" id="nav-inbox-count">0</span>':''}</button>`).join('');
     nav.querySelectorAll('[data-tab]').forEach(n=>n.addEventListener('click',()=>window.switchTab(n.dataset.tab)));
     const tools=panel('tools-nav');tools.hidden=true;
     const workspace=document.querySelector('.workspace');
@@ -88,6 +111,14 @@
     panel('knowledge-reload').addEventListener('click',()=>{generation++;loadKnowledge();});
     const insights=document.createElement('div');insights.id='panel-admin-outcomes';insights.className='panel';insights.setAttribute('role','tabpanel');insights.innerHTML='<div class="admin-page"><header class="admin-page-heading"><div><h1>Insights</h1><p>Recorded outcomes are separate from token consumption.</p></div><button type="button" class="gate-btn" id="outcomes-reload">Reload</button></header><div id="admin-outcomes-body" aria-live="polite"></div></div>';workspace.append(insights);
     panel('outcomes-reload').addEventListener('click',loadTaskOutcomes);
+    const toggle = document.createElement('button');
+    toggle.id = 'canvas-nav-toggle'; toggle.type = 'button'; toggle.className = 'canvas-nav-toggle'; toggle.hidden = true;
+    toggle.setAttribute('aria-controls', 'nav-tablist'); toggle.innerHTML = '<span aria-hidden="true">☰</span>';
+    workspace.querySelector('.topbar').prepend(toggle);
+    toggle.addEventListener('click', () => { expandedNavigation = !expandedNavigation; setWorkView({detail:true, tab:'execution'}); });
+    const projectSwitch = panel('proj-switch');
+    projectSwitch.setAttribute('role','button'); projectSwitch.tabIndex = 0; projectSwitch.setAttribute('aria-label','Choose project');
+    projectSwitch.addEventListener('keydown', event => { if (event.target === projectSwitch && ['Enter',' '].includes(event.key)) { event.preventDefault(); toggleProjMenu(event); } });
     const original=window.switchTab;
     window.switchTab=function(id,el){
       const agentLink=String(id).match(/^(?:agents|fleet)\/([a-z0-9-]+)$/i);
@@ -98,16 +129,19 @@
         open(0);return;
       }
       const r=route(id);
-      if(!r) {bar.hidden=true;return original(id,el);}
+      if(!r) {window.GctoWork.leaveView?.();setWorkView({detail:false});bar.hidden=true;return original(id,el);}
       selectedRoute=r.canonical;
+      if (r.workRoute) { window.GctoWork.navigateRoute(r.canonical); const input = panel('search-input'); if(input) input.value = window.GctoWork.parseRoute(r.canonical).search; }
+      else { window.GctoWork.leaveView?.(); setWorkView({detail:false}); }
       const old={inbox:'decisions',budgets:'ledger',agents:'fleet','admin-outcomes':'admin-outcomes',knowledge:'knowledge'}[r.panel]||r.panel;
-      original(old); // Keep established loaders and mutation guards.
+      if (r.workRoute && typeof currentTab === 'string' && currentTab === 'work') { closeMenu(false); window.GctoWork.refresh(); }
+      else original(old); // Keep established loaders and mutation guards; task inspection adds no view POST.
       document.querySelectorAll('.nav-item[data-tab]').forEach(n=>{const active=n.closest('#nav-tablist')&&n.dataset.tab===r.primary;n.classList.toggle('active',!!active);n.setAttribute('aria-selected',String(!!active));});
       panel('crumb-here').textContent=r.primary[0].toUpperCase()+r.primary.slice(1);
       const items=r.primary==='settings'?[['settings/executors','Executors'],['settings/runtime','Runtime'],['settings/capabilities','Capabilities'],['settings/general','General']]:r.primary==='insights'?[['insights/outcomes','Outcomes'],['insights/consumption','Consumption'],['insights/ledger','Ledger & budgets']]:[];
       bar.hidden=!items.length;bar.innerHTML=items.map(([key,label])=>`<button type="button" class="admin-subtab" data-route="${key}" aria-pressed="${r.canonical===key||(r.canonical===r.primary&&key===items[0][0])}">${label}</button>`).join('');
       bar.querySelectorAll('[data-route]').forEach(b=>b.onclick=()=>window.switchTab(b.dataset.route));
-      history.replaceState(null,'','#/'+r.canonical);
+      history.replaceState(history.state,'','#/'+r.canonical);
       if(r.primary==='knowledge')loadKnowledge();
       if(r.panel==='admin-outcomes')loadTaskOutcomes();
       // Restore a working route after projection errors; an error is not an empty list.
@@ -117,6 +151,6 @@
     composer.querySelector('button[type="submit"]').textContent='Copy launch command';
     window.switchTab((location.hash||'#/work').replace(/^#\/?/,''));
   }
-  window.GctoAdmin={route,outcomes,reset,openDocument};
+  window.GctoAdmin={route,outcomes,reset,openDocument,setWorkView,navigateWork};
   if(typeof document!=='undefined') setup();
 })();

package/board/packages/board/public/assets/work-view.js

@@ -69,22 +69,89 @@
   function cockpitEntries(data, category, search) {
     return data.entries.filter(e => inCategory(e, category) && (!search || `${e.title} ${e.key}`.toLowerCase().includes(search.toLowerCase())));
   }
-  function renderExecution(entry) {
+  function renderExecution(entry, options = {}) {
     const roles = Array.isArray(entry.evidence) ? entry.evidence : [];
     const execution = entry.execution, nodes = Array.isArray(execution?.nodes) ? execution.nodes.slice(0, 200) : [];
-    return '<section class="work-execution"><h3>Recorded observations</h3>'
-      + '<p>Dependencies not recorded. This is an observation list, not an inferred execution graph. Event order does not establish dependencies.</p>'
+    return (options.canvas ? '<section class="work-execution work-execution-flat">' : '<section class="work-execution"><h3>Recorded observations</h3>')
+      + renderExecutionGraph(execution?.graph, options)
+      + (execution?.graph?.state === 'recorded' ? '' : '<p>Dependencies not recorded. This is an observation list, not an inferred execution graph. Event order does not establish dependencies.</p>')
       + `<p>Recorded stage: ${esc(entry.stage || 'not recorded')}</p>`
       + (execution?.reason ? `<p>${esc(execution.reason)}</p>` : '')
       + (execution?.truncated ? '<p class="work-warning">Showing the latest 200 recorded attempts; earlier observations are truncated.</p>' : execution?.partial ? '<p class="work-warning">Attempt observations are incomplete.</p>' : '')
+      + (options.canvas && entry.inspector?.partial ? '<p class="work-warning">Activity window is incomplete.</p>' : '')
+      + (options.canvas && entry.inspector?.reason ? `<p class="work-warning">${esc(entry.inspector.reason)}</p>` : '')
+      + (options.canvas && !entry.inspector ? '<p class="work-meta">Linked activity unavailable. Absence of events is not proof of inactivity.</p>' : '')
+      + (options.canvas ? '<details class="work-attempt-details"><summary>Recorded observations & technical details</summary>' : '')
       + (nodes.length ? '<ul class="work-observations" aria-label="Recorded execution attempts">' + nodes.map(n => `<li class="work-observation" data-attempt-id="${esc(n.attemptId)}"><strong>${esc(n.role)} · attempt ${esc(n.number || 'unknown')}</strong>`
         + `<p>${esc(n.host || 'Host not recorded')} · phase: ${esc(n.phase || 'not recorded')}</p><p>Controller recorded status: ${esc(n.status || 'unknown')}; not current verification or acceptance.</p>`
         + `<p>Run: ${esc(n.runId)} · Attempt: ${esc(n.attemptId)}</p><p>Started: ${esc(n.startedAt || 'not recorded')} · Finished: ${esc(n.finishedAt || 'not recorded')}</p></li>`).join('') + '</ul>' : '')
       + (roles.length ? '<ul class="work-observations">' + roles.map(role => `<li class="work-observation">${esc(role.label)} · recorded role observation; acceptance is not inferred</li>`).join('') + '</ul>' : '<p>No role observations recorded.</p>')
       + (entry.inspector ? renderInspector(entry.inspector).replace('<details ', '<details open ') : '<p>Linked activity unavailable. Absence of events is not proof of inactivity.</p>')
+      + (options.canvas ? '</details>' : '')
       + '</section>';
   }
+  function renderExecutionGraph(graph, options = {}) {
+    if (graph?.state !== 'recorded' || !Array.isArray(graph.nodes) || !graph.nodes.length)
+      return `<p class="work-meta">${esc(graph?.reason || 'Controller-recorded graph unavailable. Native and legacy observations remain partial.')}</p>`;
+    if (graph.nodes.length > 512 || !Array.isArray(graph.edges) || graph.edges.length > 2048) return '<p>Graph exceeds the display limit.</p>';
+    const horizontal = options.canvas && options.direction !== 'tb';
+    const nodes = graph.nodes, ids = new Map(nodes.map((n, i) => [n.id, i]));
+    if (ids.size !== nodes.length || graph.edges.some(e => !ids.has(e.from) || !ids.has(e.to) || ids.get(e.from) >= ids.get(e.to)))
+      return '<p>Graph dependencies cannot be displayed safely.</p>';
+    const levels = new Map(nodes.map(n => [n.id, 0]));
+    const parents = new Map(nodes.map(n => [n.id, []]));
+    for (const e of graph.edges) parents.get(e.to).push(e);
+    const rows = new Map(), positions = new Map();
+    for (const n of nodes) {
+      const level = Math.max(0, ...parents.get(n.id).map(e => levels.get(e.from) + 1));
+      levels.set(n.id, level);
+      const row = rows.get(level) || 0; rows.set(level, row + 1);
+      positions.set(n.id, horizontal ? { x: 24 + level * 272, y: 24 + row * 112 } : { x: 24 + row * 236, y: 24 + level * 112 });
+    }
+    const width = horizontal ? (Math.max(...levels.values()) + 1) * 272 : Math.max(500, Math.max(...rows.values()) * 236 + 24), height = horizontal ? Math.max(240, Math.max(...rows.values()) * 112 + 24) : (Math.max(...levels.values()) + 1) * 112 + 24;
+    const edges = graph.edges.map(e => {
+      const a = positions.get(e.from), b = positions.get(e.to);
+      if (horizontal) return `<path d="M${a.x + 208} ${a.y + 39} C${a.x + 240} ${a.y + 39},${b.x - 32} ${b.y + 39},${b.x} ${b.y + 39}" marker-end="url(#execution-arrow)"><title>${esc(e.kind)}: ${esc(e.from)} to ${esc(e.to)}</title></path>`;
+      return `<path d="M${a.x + 104} ${a.y + 78} C${a.x + 104} ${a.y + 98},${b.x + 104} ${b.y - 20},${b.x + 104} ${b.y}" marker-end="url(#execution-arrow)"><title>${esc(e.kind)}: ${esc(e.from)} to ${esc(e.to)}</title></path>`;
+    }).join('');
+    const short = value => String(value || '').length > 27 ? String(value).slice(0, 26) + '…' : String(value || '');
+    const boxes = nodes.map(n => {
+      const p = positions.get(n.id);
+      return `<g class="execution-node" role="button" tabindex="0" data-graph-node="${esc(n.id)}" aria-label="${esc(n.kind)} ${esc(n.role || '')}: ${esc(n.status)}. Open recorded details." transform="translate(${p.x},${p.y})">${options.canvas ? `<title>${esc(n.kind)} · ${esc(n.role || 'controller')} · ${esc(n.status)}</title>` : ''}<rect width="208" height="78" rx="6"/><text x="12" y="23">${esc(short(n.role || n.kind))}</text><text x="12" y="45">${options.canvas ? esc(short(`${n.kind} · ${n.status}`)) : `${esc(n.kind)} · ${esc(n.status)}`}</text><text x="12" y="64">${esc(n.host || 'controller')}</text></g>`;
+    }).join('');
+    const details = nodes.map(n => `<details class="execution-node-detail" data-graph-detail="${esc(n.id)}"><summary>${esc(n.id)} · ${esc(n.kind)} · ${esc(n.role || 'controller')} · ${esc(n.status)}</summary><dl>`
+      + [['Attempt', n.attemptId], ['Host', n.host], ['Recorded at', n.at], ['Verdict', n.verdict], ['Wave', n.waveId], ['Gates', (n.gates || []).join(', ')],
+        ['Workflow snapshot SHA-256', n.graphDigest], ['Input receipt SHA-256', n.inputDigest], ['Output receipt SHA-256', n.outputDigest],
+        [n.kind === 'reuse' ? 'Historical report SHA-256 (worker not invoked)' : 'Stage context SHA-256', n.contextDigest], ['Result SHA-256', n.resultDigest]]
+        .map(([key, value]) => `<dt>${esc(key)}</dt><dd><code>${esc(value || 'Not recorded')}</code></dd>`).join('')
+      + `<dt>Recorded predecessors</dt><dd>${parents.get(n.id).map(e => `${esc(e.from)} (${esc(e.kind)})`).join(', ') || 'None recorded; not proof of complete external inputs'}</dd></dl></details>`).join('');
+    return `<section class="execution-graph" aria-label="Controller-recorded execution graph"><h3>Controller-recorded graph</h3><p>${nodes.length} nodes · ${graph.edges.length} recorded edges · ${graph.snapshots?.length || 0} workflow snapshots. ${graph.complete ? 'Controller history recorded from run creation.' : 'Partial history: missing edges are not inferred.'}</p>`
+      + `<p class="work-meta">Dispatch, input, verification, gate and join edges describe controller observations. Intent is not proof of a live worker; recorded approval is not deployment or task acceptance. Historical reuse does not invoke a worker. Stage context digests exclude separately admitted domain packets.</p>`
+      + (graph.reason ? `<p class="work-warning">${esc(graph.reason)}</p>` : '')
+      + `<div class="execution-graph-tools execution-graph-toolbar" role="group" aria-label="Graph zoom"><button type="button" class="gate-btn" data-graph-scale="0.75">Zoom out</button><button type="button" class="gate-btn" data-graph-scale="1.333333">Zoom in</button><button type="button" class="gate-btn" data-graph-scale="reset">Reset zoom</button>${options.canvas ? `<button type="button" class="gate-btn" data-graph-scale="fit">Fit graph</button><button type="button" class="gate-btn" data-graph-direction="lr" aria-pressed="${horizontal}">Left to right</button><button type="button" class="gate-btn" data-graph-direction="tb" aria-pressed="${!horizontal}">Top to bottom</button>` : ''}</div>`
+      + `<div class="execution-graph-canvas" tabindex="0" aria-label="Scrollable graph. Tab to a node and press Enter for details."><svg data-graph-layout="${horizontal ? 'lr' : 'tb'}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="group" aria-label="Recorded execution dependencies"><defs><marker id="execution-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0 0 L8 4 L0 8"/></marker></defs><g class="execution-edges" fill="none">${edges}</g>${boxes}</svg></div>`
+      + (options.canvas ? '<details class="execution-node-list"><summary>Recorded node details · keyboard list</summary>' : '<h3>Recorded node details</h3>') + `<p class="work-meta">Use the graph or expand a node below. Digests bind recorded inputs, not correctness.</p>${details}${options.canvas ? '</details>' : ''}</section>`;
+  }
+  function graphInteraction(target) {
+    const direction = target.closest('[data-graph-direction]');
+    if (config?.canvas && ['lr', 'tb'].includes(direction?.dataset.graphDirection)) { graphDirection = direction.dataset.graphDirection; closeWorkDialog(false); paint(); document.querySelector?.('[data-graph-direction][aria-pressed="true"]')?.focus(); return true; }
+    const node = target.closest('[data-graph-node]');
+    if (node?.dataset.graphNode) {
+      const detail = [...document.querySelectorAll('[data-graph-detail]')].find(el => el.dataset.graphDetail === node.dataset.graphNode);
+      if (detail && config?.canvas) openNodeInspector(detail, node);
+      else if (detail) { detail.open = true; detail.querySelector('summary')?.focus(); detail.scrollIntoView({ block: 'nearest' }); }
+      return true;
+    }
+    const scale = target.closest('[data-graph-scale]');
+    if (!scale?.dataset.graphScale) return false;
+    const svg = scale.closest('.execution-graph').querySelector('svg'), bounds = svg.viewBox.baseVal;
+    const fit = scale.dataset.graphScale === 'fit' ? Math.min(1, Math.max(0.05, (scale.closest('.execution-graph').querySelector('.execution-graph-canvas').clientWidth - 2) / bounds.width)) : null;
+    const next = fit ?? (scale.dataset.graphScale === 'reset' ? 1 : Math.min(2, Math.max(0.25, Number(svg.dataset.zoom || 1) * Number(scale.dataset.graphScale))));
+    svg.dataset.zoom = String(next); svg.setAttribute('width', String(bounds.width * next)); svg.setAttribute('height', String(bounds.height * next));
+    return true;
+  }
   function renderCockpit(data, options = {}) {
+    if (options.canvas) return renderWorkspace(data, options);
     const category = categories.some(([key]) => key === options.category) ? options.category : 'active';
     const tab = ['overview', 'execution', 'evidence'].includes(options.tab) ? options.tab : 'overview';
     const rows = cockpitEntries(data, category, options.search || '');
@@ -104,6 +171,55 @@
       + `<div class="work-cockpit">${list}<section class="work-detail" aria-label="Selected task details">${tabs}<div id="work-detail-panel" role="tabpanel" aria-labelledby="work-tab-${tab}" tabindex="0">${detail}</div></section></div>`
       + (data.sessions.length ? `<details><summary>Claude sessions (${data.sessions.length}) · task linkage not recorded</summary>${data.sessions.map(s => `<p>${esc(s.session)} · ${esc(s.state)} · ${esc(s.reason || '')}</p>`).join('')}</details>` : '');
   }
+  const taskTabs = ['overview', 'execution', 'evidence'];
+  function parseRoute(input) {
+    if (typeof input !== 'string' || input.length > 4096 || /[\u0000-\u001f\u007f]/.test(input)) return null;
+    const [path, query, extra] = input.split('?');
+    if (extra !== undefined) return null;
+    const params = new URLSearchParams(query || '');
+    if ([...params.keys()].some(key => !['category', 'search'].includes(key) || params.getAll(key).length !== 1)) return null;
+    const category = params.get('category') || (path === 'work/completed' ? 'completed' : 'active'), search = params.get('search') || '';
+    if (!categories.some(([key]) => key === category) || search.length > 1000 || /[\u0000-\u001f\u007f]/.test(search)) return null;
+    let selectedKey = null, tab = 'overview';
+    if (path !== 'work' && path !== 'work/completed') {
+      const match = path.match(/^work\/task\/([^/]+)\/(overview|execution|evidence)$/);
+      if (!match) return null;
+      try { selectedKey = decodeURIComponent(match[1]); } catch { return null; }
+      if (!selectedKey || selectedKey.length > 512 || /[\u0000-\u001f\u007f]/.test(selectedKey)) return null;
+      tab = match[2];
+    }
+    return { canonical: workspaceRoute(selectedKey, tab, category, search), selectedKey, tab, category, search };
+  }
+  function workspaceRoute(key, selectedTab, selectedCategory, search) {
+    const params = new URLSearchParams();
+    if (selectedCategory !== 'active') params.set('category', selectedCategory);
+    if (search) params.set('search', search);
+    return (key ? `work/task/${encodeURIComponent(key)}/${selectedTab}` : 'work') + (params.size ? '?' + params : '');
+  }
+  function taskRows(rows, selected = null) {
+    return rows.map(e => `<button type="button" class="work-task-row" data-work-select="${esc(e.key)}" aria-current="${e.key === selected}"><strong>${esc(e.title)}</strong><span>${esc(phaseLabel(e))}</span><small>${esc(e.host || 'Host not linked')} · ${esc(e.stage || 'Stage not recorded')}</small></button>`).join('');
+  }
+  function renderWorkspace(data, options) {
+    const category = categories.some(([key]) => key === options.category) ? options.category : 'active';
+    const tab = taskTabs.includes(options.tab) ? options.tab : 'overview';
+    const rows = cockpitEntries(data, category, options.search || '');
+    const feedback = data.sources.filter(s => ['degraded', 'unavailable'].includes(s.health)).map(s => `<p class="work-warning">${esc(s.id)}: ${esc(s.reason || s.health)}</p>`).join('');
+    const observation = `<p class="work-meta">Observed ${esc(data.observedAt)} · ${data.health === 'current' ? 'Sources read' : 'Sources incomplete'}. Recorded activity is not proof of current liveness or task acceptance.</p>`;
+    if (!options.selectedKey) {
+      const toolbar = '<div class="work-filters" role="group" aria-label="Task status filters">' + categories.map(([key, label]) => `<button type="button" class="work-filter" data-work-filter="${key}" aria-pressed="${category === key}">${label} <span>${cockpitEntries(data, key, options.search || '').length}</span></button>`).join('') + '</div>';
+      return `<section class="work-workspace work-list-only" aria-label="Project work list">${toolbar}${observation}${feedback}` + (rows.length ? `<div class="work-task-list" role="group" aria-label="Project tasks">${taskRows(rows)}</div>` : `<p>${data.health !== 'current' || feedback ? 'No readable entries match this view; sources are incomplete.' : options.search ? 'No entries match the search.' : 'No work records match this filter.'}</p>`) + '</section>';
+    }
+    const selected = data.entries.find(e => e.key === options.selectedKey);
+    const back = '<button type="button" class="work-back" data-work-back>← Work</button>';
+    if (!selected) return `<section class="work-workspace work-detail-only">${back}${observation}${feedback}<h2>Selected task is unavailable</h2><p>The requested task is not in the readable records for this project. Another task will not be substituted.</p></section>`;
+    const tabs = '<div class="work-tabs" role="tablist" aria-label="Selected task">' + taskTabs.map(name => `<button type="button" class="work-tab" id="work-tab-${name}" data-work-tab="${name}" role="tab" aria-selected="${tab === name}" aria-controls="work-detail-panel" tabindex="${tab === name ? 0 : -1}">${name[0].toUpperCase() + name.slice(1)}</button>`).join('') + '</div>';
+    const detail = tab === 'execution' ? renderExecution(selected, { canvas: true, direction: options.direction }) : tab === 'evidence'
+      ? (Array.isArray(selected.evidenceSections) && selected.evidenceSections.length ? renderEvidence(selected.evidenceSections).replace('<details ', '<details open ') : '<p>Evidence unavailable. No verification or acceptance is inferred.</p>')
+      : render({ ...data, sources: [], sessions: [], entries: [{ ...selected, inspector: null, evidenceSections: null }] }, selected.terminal);
+    const runLabel = selected.title.match(/^Controlled run ([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/i);
+    const title = runLabel ? `Controlled run <small class="work-meta work-run-identifier">${esc(runLabel[1].slice(0, 8))}</small>` : esc(selected.title);
+    return `<section class="work-workspace work-detail-only" data-selected-work="${esc(selected.key)}"><header class="work-task-header"><div class="work-task-navigation">${back}<span class="work-meta">${esc(selected.kind)} · ${esc(selected.host || 'Host not linked')}</span><button type="button" data-work-switch>Switch task</button><button type="button" data-work-previous${rows.findIndex(e => e.key === selected.key) > 0 ? '' : ' disabled'} aria-label="Previous task in current filter">Previous</button><button type="button" data-work-next${rows.findIndex(e => e.key === selected.key) >= 0 && rows.findIndex(e => e.key === selected.key) < rows.length - 1 ? '' : ' disabled'} aria-label="Next task in current filter">Next</button></div><h2>${title}</h2><p>${esc(phaseLabel(selected))}</p></header>${tabs}${feedback}${tab === 'overview' ? '' : observation}<div id="work-detail-panel" role="tabpanel" aria-labelledby="work-tab-${tab}" tabindex="0">${detail}</div></section>`;
+  }
   function renderEvidence(sections) {
     if (!Array.isArray(sections)) return '';
     return '<details data-work-detail="evidence"><summary>Task evidence · read-only</summary>'
@@ -152,40 +268,125 @@
       status('Draft PR publication recorded. Merge and release remain separate decisions.'); await refresh();
     } catch (error) { if (project === config.project()) { status(error.message); await refresh(); } }
   }
-  let config, snapshot, generation = 0, filter = '', selectedKey = null, category = 'active', tab = 'overview';
+  let config, snapshot, snapshotProject = null, generation = 0, filter = '', selectedKey = null, category = 'active', tab = 'overview';
+  let graphDirection = 'lr';
+  let activeDialog = null, dialogOpener = null, dialogReturn = null, dialogEscape = null, pendingPaint = false, listPosition = null;
   const status = message => { document.getElementById('work-feedback').textContent = message; };
+  function notifyView() { config?.onViewChange?.({ detail: !!selectedKey, tab }); }
+  function navigateRoute(input) {
+    const route = parseRoute(input);
+    if (!route) return false;
+    closeWorkDialog(false);
+    const wasDetail = !!selectedKey;
+    if (selectedKey !== route.selectedKey) graphDirection = 'lr';
+    selectedKey = route.selectedKey; tab = route.tab; category = route.category; filter = route.search;
+    if (snapshot && snapshotProject !== config?.project()) { snapshot = null; previews.clear(); document.getElementById('work-list').innerHTML = ''; document.getElementById('work-list').textContent = 'Loading selected project…'; }
+    notifyView(); paint();
+    if (wasDetail && !selectedKey) restoreListPosition();
+    return true;
+  }
+  function rememberListPosition() {
+    const list = document.getElementById('work-list'), scroller = list.closest?.('.panel');
+    listPosition = { project: config.project(), category, filter, key: selectedKey, top: scroller?.scrollTop || 0 };
+  }
+  function restoreListPosition() {
+    if (!listPosition || listPosition.project !== config.project() || listPosition.category !== category || listPosition.filter !== filter) return;
+    const list = document.getElementById('work-list'), scroller = list.closest?.('.panel');
+    if (scroller) scroller.scrollTop = listPosition.top;
+    [...document.querySelectorAll('[data-work-select]')].find(n => n.dataset.workSelect === listPosition.key)?.focus({ preventScroll: true });
+  }
+  function changeWorkspace() {
+    closeWorkDialog(false); notifyView(); paint();
+    config.navigate?.(workspaceRoute(selectedKey, tab, category, filter));
+  }
+  function closeWorkDialog(restore = true) {
+    if (!activeDialog) return;
+    const dialog = activeDialog, opener = dialogOpener, returnTo = dialogReturn;
+    activeDialog = null; dialogOpener = null; dialogReturn = null;
+    if (dialogEscape) { document.removeEventListener('keydown', dialogEscape, true); dialogEscape = null; }
+    if (dialog.open) dialog.close();
+    dialog.remove();
+    if (pendingPaint) { pendingPaint = false; paint(); }
+    if (!restore || !returnTo || returnTo.project !== config.project() || returnTo.task !== selectedKey) return;
+    const replacement = returnTo.node
+      ? [...document.querySelectorAll('[data-graph-node]')].find(node => node.dataset.graphNode === returnTo.node)
+      : returnTo.switcher ? document.querySelectorAll('[data-work-switch]')[0] : null;
+    if (opener?.isConnected) opener.focus();
+    else replacement?.focus();
+  }
+  function leaveView() { pendingPaint = false; closeWorkDialog(false); }
+  function makeWorkDialog(className, title, opener, content, modal) {
+    closeWorkDialog(false);
+    const dialog = document.createElement('dialog'); dialog.className = className;
+    dialog.setAttribute('aria-label', title);
+    dialog.innerHTML = `<header><h2>${esc(title)}</h2><button type="button" data-dialog-close aria-label="Close ${esc(title)}">Close</button></header>${content}`;
+    document.body.append(dialog); activeDialog = dialog; dialogOpener = opener;
+    dialogReturn = { project: config.project(), task: selectedKey, node: opener?.dataset?.graphNode || null, switcher: Object.prototype.hasOwnProperty.call(opener?.dataset || {}, 'workSwitch') };
+    dialogEscape = event => { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeWorkDialog(); } };
+    document.addEventListener('keydown', dialogEscape, true);
+    dialog.addEventListener('cancel', event => { event.preventDefault(); closeWorkDialog(); });
+    dialog.addEventListener('keydown', event => { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeWorkDialog(); } });
+    dialog.addEventListener('click', event => { if (event.target.closest('[data-dialog-close]')) closeWorkDialog(); });
+    dialog.addEventListener('close', () => { if (activeDialog === dialog) closeWorkDialog(); });
+    if (modal) dialog.showModal(); else dialog.show();
+    return dialog;
+  }
+  function openTaskSwitcher(opener) {
+    const rows = cockpitEntries(snapshot, category, filter);
+    const dialog = makeWorkDialog('work-switcher', 'Switch task', opener, '<label>Find a task<input type="search" data-switch-search placeholder="Title or task ID"></label><p class="work-meta">Tasks in the current project and list filter.</p><div data-switch-rows>' + taskRows(rows, selectedKey) + '</div><p data-switch-empty hidden>No matching task.</p>', true);
+    const input = dialog.querySelector('[data-switch-search]'); input.focus();
+    input.addEventListener('input', () => { let count = 0; dialog.querySelectorAll('[data-work-select]').forEach(button => { const entry = rows.find(e => e.key === button.dataset.workSelect); button.hidden = !`${entry.title} ${entry.key}`.toLowerCase().includes(input.value.toLowerCase()); if (!button.hidden) count++; }); dialog.querySelector('[data-switch-empty]').hidden = count > 0; });
+    dialog.addEventListener('click', event => { const button = event.target.closest('[data-work-select]'); if (button && snapshot?.entries.some(e => e.key === button.dataset.workSelect) && snapshotProject === config.project()) { selectedKey = button.dataset.workSelect; tab = 'overview'; changeWorkspace(); document.querySelector('[data-work-tab]')?.focus(); } });
+  }
+  function openNodeInspector(detail, opener) {
+    document.querySelectorAll('[data-graph-detail][open]').forEach(node => { node.open = false; });
+    const content = detail.outerHTML.replace('<details ', '<details open ');
+    const dialog = makeWorkDialog('work-node-inspector', 'Recorded node details', opener, '<p class="work-meta">Recorded inputs, not proof of correctness, current activity or acceptance.</p>' + content, false);
+    dialog.querySelector('summary')?.focus();
+  }
   async function refresh() {
     const seq = ++generation, project = config.project();
     try {
       const data = await config.read(`/api/work${project ? '?project=' + encodeURIComponent(project) : ''}`);
       if (seq !== generation || project !== config.project()) return;
       if (!data || data.error || data.schemaVersion !== 1) throw Error(data?.error || 'Cannot read work state. Check the board connection and refresh.');
-      if (snapshot?.revision === data.revision) return;
-      snapshot = data; paint();
+      if (snapshotProject === project && snapshot?.revision === data.revision) return;
+      snapshot = data; snapshotProject = project;
+      if (config.canvas && activeDialog?.open) { pendingPaint = true; previews.clear(); } else paint();
     } catch (error) {
       if (seq !== generation || project !== config.project()) return;
-      snapshot = null;
+      snapshot = null; snapshotProject = null; pendingPaint = false; closeWorkDialog(false);
       for (const id of ['work-list', 'history-list']) document.getElementById(id).textContent = error.message;
     }
   }
   function paint() {
-    if (!snapshot) return;
+    if (!snapshot || (config?.canvas && snapshotProject !== config.project())) return;
     previews.clear(); // Repaint removes the reviewed diff and its confirmation controls.
     const expanded = [...document.querySelectorAll('.work-card details[open]')].map(d => `${d.closest('[data-entry-key]').dataset.entryKey}:${d.dataset.workDetail}`);
     const focused = document.activeElement;
     const focusKey = focused?.dataset?.workKey, focusAction = focused?.dataset?.workAction;
     const focusSelect = focused?.dataset?.workSelect, focusFilter = focused?.dataset?.workFilter, focusTab = focused?.dataset?.workTab;
-    document.getElementById('work-list').innerHTML = renderCockpit(snapshot, { search: filter, selectedKey, category, tab });
+    const focusNode = focused?.dataset?.graphNode;
+    const oldCanvas = config.canvas ? document.querySelector?.('.execution-graph-canvas') : null;
+    const oldSvg = oldCanvas?.querySelector('svg'), oldZoom = oldSvg ? Number(oldSvg.dataset.zoom || 1) : 1;
+    const graphScroll = oldCanvas?.closest('[data-selected-work]')?.dataset.selectedWork === selectedKey && oldSvg?.dataset.graphLayout === graphDirection ? { left: oldCanvas.scrollLeft, top: oldCanvas.scrollTop } : null;
+    document.getElementById('work-list').innerHTML = renderCockpit(snapshot, { search: filter, selectedKey, category, tab, canvas: !!config.canvas, direction: graphDirection });
     document.getElementById('history-list').innerHTML = render(snapshot, true, filter);
+    if (graphScroll) {
+      const canvas = document.querySelector?.('.execution-graph-canvas'), svg = canvas?.querySelector('svg');
+      if (svg && Number.isFinite(oldZoom) && oldZoom > 0) { const bounds = svg.viewBox.baseVal; svg.dataset.zoom = String(oldZoom); svg.setAttribute('width', String(bounds.width * oldZoom)); svg.setAttribute('height', String(bounds.height * oldZoom)); canvas.scrollLeft = graphScroll.left; canvas.scrollTop = graphScroll.top; }
+    }
     for (const card of document.querySelectorAll('[data-entry-key]')) for (const detail of card.querySelectorAll('details'))
       if (expanded.includes(`${card.dataset.entryKey}:${detail.dataset.workDetail}`)) detail.open = true;
     if (focusKey) [...document.querySelectorAll('[data-work-key]')].find(b => b.dataset.workKey === focusKey && b.dataset.workAction === focusAction)?.focus();
     else if (focusSelect) [...document.querySelectorAll('[data-work-select]')].find(b => b.dataset.workSelect === focusSelect)?.focus();
     else if (focusFilter) [...document.querySelectorAll('[data-work-filter]')].find(b => b.dataset.workFilter === focusFilter)?.focus();
     else if (focusTab) [...document.querySelectorAll('[data-work-tab]')].find(b => b.dataset.workTab === focusTab)?.focus();
+    else if (focusNode) [...document.querySelectorAll('[data-graph-node]')].find(n => n.dataset.graphNode === focusNode)?.focus({ preventScroll: true });
   }
   function reset() {
-    generation++; snapshot = null; previews.clear(); selectedKey = null; category = 'active'; tab = 'overview'; filter = ''; status('');
+    closeWorkDialog(false); pendingPaint = false; listPosition = null; graphDirection = 'lr';
+    generation++; snapshotProject = null; snapshot = null; previews.clear(); selectedKey = null; category = 'active'; tab = 'overview'; filter = ''; status(''); notifyView();
     for (const id of ['work-list', 'history-list']) document.getElementById(id).textContent = 'Loading project work…';
     refresh();
   }
@@ -207,15 +408,24 @@
       document.getElementById('work-command').textContent = ''; status('');
     });
     for (const id of ['work-list', 'history-list']) document.getElementById(id).addEventListener('click', event => {
-      if (!snapshot) return;
+      if (config.canvas && snapshotProject !== config.project()) return;
+      if (graphInteraction(event.target)) return;
+      if (!snapshot || (config.canvas && snapshotProject !== config.project())) return;
+      if (config.canvas) {
+        if (event.target.closest('[data-work-back]')) { selectedKey = null; tab = 'overview'; changeWorkspace(); restoreListPosition(); return; }
+        const switcher = event.target.closest('[data-work-switch]');
+        if (switcher) { openTaskSwitcher(switcher); return; }
+        const direction = event.target.closest('[data-work-previous]') ? -1 : event.target.closest('[data-work-next]') ? 1 : 0;
+        if (direction) { const rows = cockpitEntries(snapshot, category, filter), index = rows.findIndex(e => e.key === selectedKey), next = index >= 0 ? rows[index + direction] : null; if (next) { selectedKey = next.key; tab = 'overview'; changeWorkspace(); } return; }
+      }
       const button = event.target.closest('[data-work-action]');
       if (!button?.dataset.workAction) {
         const selection = event.target.closest('[data-work-select]');
         const filterButton = event.target.closest('[data-work-filter]');
         const tabButton = event.target.closest('[data-work-tab]');
-        if (selection?.dataset.workSelect && snapshot.entries.some(e => e.key === selection.dataset.workSelect)) { selectedKey = selection.dataset.workSelect; tab = 'overview'; paint(); }
-        else if (categories.some(([key]) => key === filterButton?.dataset.workFilter)) { category = filterButton.dataset.workFilter; selectedKey = null; tab = 'overview'; paint(); }
-        else if (['overview', 'execution', 'evidence'].includes(tabButton?.dataset.workTab)) { tab = tabButton.dataset.workTab; paint(); }
+        if (selection?.dataset.workSelect && snapshot.entries.some(e => e.key === selection.dataset.workSelect)) { if (config.canvas) { rememberListPosition(); listPosition.key = selection.dataset.workSelect; } selectedKey = selection.dataset.workSelect; tab = 'overview'; if (config.canvas) changeWorkspace(); else paint(); }
+        else if (categories.some(([key]) => key === filterButton?.dataset.workFilter)) { category = filterButton.dataset.workFilter; selectedKey = null; tab = 'overview'; if (config.canvas) changeWorkspace(); else paint(); }
+        else if (['overview', 'execution', 'evidence'].includes(tabButton?.dataset.workTab)) { tab = tabButton.dataset.workTab; if (config.canvas) changeWorkspace(); else paint(); }
         return;
       }
       const entry = snapshot.entries.find(e => e.key === button.dataset.workKey);
@@ -227,16 +437,18 @@
       else options.openIssue(entry.issueIds[0], action.action === 'review_decision');
     });
     document.getElementById('work-list').addEventListener('keydown', event => {
+      if (config.canvas && snapshotProject !== config.project()) return;
+      if (['Enter', ' '].includes(event.key) && event.target.closest('[data-graph-node]')) { event.preventDefault(); graphInteraction(event.target); return; }
       const button = event.target.closest('[data-work-tab]');
       if (!button || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
       const tabs = ['overview', 'execution', 'evidence'], current = tabs.indexOf(button.dataset.workTab);
       if (current < 0) return;
       event.preventDefault();
       tab = event.key === 'Home' ? tabs[0] : event.key === 'End' ? tabs[2] : tabs[(current + (event.key === 'ArrowRight' ? 1 : 2)) % 3];
-      paint();
+      if (config.canvas) changeWorkspace(); else paint();
       [...document.querySelectorAll('[data-work-tab]')].find(b => b.dataset.workTab === tab)?.focus();
     });
     setInterval(() => { if (!document.hidden && options.visible()) refresh(); }, 10000);
   }
-  window.GctoWork = { bind, refresh, reset, render, renderCockpit, commandFor, publicationCommand, getSnapshot() { return snapshot; }, showCompleted() { category = 'completed'; selectedKey = null; tab = 'overview'; paint(); }, search(value) { filter = value; paint(); } };
+  window.GctoWork = { bind, refresh, reset, leaveView, parseRoute, navigateRoute, render, renderCockpit, renderExecutionGraph, commandFor, publicationCommand, getSnapshot() { return snapshot; }, showCompleted() { category = 'completed'; selectedKey = null; tab = 'overview'; notifyView(); paint(); }, search(value) { filter = value; if (config?.canvas) { if (!selectedKey) changeWorkspace(); } else paint(); } };
 })();