@staix/agent-hub 0.12.26 → 0.12.27

package/src/ui/index.html

@@ -5,12 +5,16 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>agent-hub | Local dashboard</title>
 <script>
+const dashboardCookie = {
+  get: (name, fallback = '') => { try { return document.cookie.split(';').map(value => value.trim()).find(value => value.startsWith(name + '='))?.slice(name.length + 1) ?? fallback; } catch { return fallback; } },
+  set: (name, value) => { try { document.cookie = `${name}=${value}; Path=/; Max-Age=31536000; SameSite=Strict`; } catch {} }
+};
 const dashboardTheme = (() => {
   let choice = 'system';
-  try { const saved = document.cookie.split(';').map(value => value.trim()).find(value => value.startsWith('agent-hub-theme='))?.slice('agent-hub-theme='.length); if (['system','light','dark'].includes(saved)) choice = saved; } catch {}
+  const saved = dashboardCookie.get('agent-hub-theme'); if (['system','light','dark'].includes(saved)) choice = saved;
   const apply = () => { document.documentElement.dataset.theme = choice; };
   apply();
-  return { get: () => choice, set: (value) => { choice = ['system','light','dark'].includes(value) ? value : 'system'; apply(); try { document.cookie = `agent-hub-theme=${choice}; Path=/; Max-Age=31536000; SameSite=Strict`; } catch {} } };
+  return { get: () => choice, set: (value) => { choice = ['system','light','dark'].includes(value) ? value : 'system'; apply(); dashboardCookie.set('agent-hub-theme', choice) } };
 })();
 </script>
 <style>
@@ -19,52 +23,86 @@ const dashboardTheme = (() => {
 /* PEER_PALETTE_CSS */
 .task-board-section{grid-column:1/-1}.board-columns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:18px}.board-column{min-width:0;background:var(--panel-soft);border:1px solid var(--line);border-radius:6px;padding:10px}.board-column h3{font-size:14px;margin:0 0 12px}.board-column h4{font-size:12px;color:var(--muted);margin:12px 0 8px}.task-card{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:12px;margin:0 0 10px;overflow-wrap:anywhere}.task-card .row-head{align-items:flex-start}.task-card .label{font-size:14px}.task-card .actions{display:grid;gap:8px}.task-card .actions select{max-width:none;width:100%}.task-card button,.task-card select,.agent-legend button{min-height:44px}.task-card .body{font-size:13px}.task-card .task-stage{font-size:12px}.board-columns .empty{padding:8px 0}.board-lane{border-top:1px solid var(--line)}.board-lane>h3{padding:14px 18px 0;font-size:15px}.peer-mark{display:inline-flex;align-items:center;gap:6px}.peer-color-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:var(--peer-color);flex-shrink:0}.peer-color-dot.reviewer{background:transparent;border:2px solid var(--peer-color)}.agent-legend{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}.agent-legend .agent-slot{border:1px solid var(--line);border-radius:5px;padding:10px;flex:1 1 180px;min-width:0}.agent-legend .meta{overflow-wrap:anywhere}.board-drop-active{outline:2px solid var(--green);outline-offset:2px}.board-toolbar{padding:12px 18px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}.board-toolbar label{margin:0}.board-toolbar select{width:auto;max-width:220px}.board-unknown{padding:12px 18px;color:var(--amber)}.task-list{max-height:none;overflow:visible}.progress-backlog{fill:var(--dot)}
 @media(max-width:1100px){.board-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.split{grid-template-columns:minmax(0,1fr)}.board-columns{grid-template-columns:1fr;padding:12px}.board-toolbar{align-items:stretch}.board-toolbar select{max-width:none;width:100%}.board-toolbar label{width:100%}}
-.office-scene{display:block;width:100%;height:auto}.office-scene text{font-family:system-ui,sans-serif}.office-room{fill:var(--panel-soft);stroke:var(--line)}.office-room-title{fill:var(--muted);font-size:1.8px;letter-spacing:.1px;text-transform:uppercase}.office-room-count{fill:var(--ink);font-size:1.8px;font-variant-numeric:tabular-nums}.office-desk-surface{fill:var(--panel);stroke:var(--line)}.office-desk.office-dimmed{opacity:.55}.office-name{fill:var(--ink);font-size:1.6px;font-weight:600}.office-state{fill:var(--muted);font-size:1.4px}.office-glyph{font-size:1.8px}.office-idle .office-glyph{fill:var(--dot-ok)}.office-busy .office-glyph{fill:var(--dot-warn)}.office-offline .office-glyph{fill:var(--dot)}.office-paused .office-glyph{fill:var(--dot-warn)}.office-waiting .office-glyph{fill:var(--dot-err)}.office-unknown .office-glyph{fill:var(--dot)}.office-meta{fill:var(--muted);font-size:1.2px}.office-hand{fill:var(--dot-err);font-size:1.6px}.office-bubble{fill:var(--blue-soft);stroke:var(--blue)}.office-bubble-text{fill:var(--blue);font-size:1.3px}.office-mode{fill:var(--amber);font-size:1.2px;font-family:ui-monospace,monospace}.office-card{fill:var(--control);stroke:var(--control-border)}.office-card-text{fill:var(--ink);font-size:1.3px;font-family:ui-monospace,monospace}.office-waiting-card .office-card{stroke:var(--waiting);stroke-dasharray:.5 .4}.office-rework-card .office-card{stroke:var(--red)}.office-more{fill:var(--blue);font-size:1.4px}.office-spotlight .office-desk-surface,.office-spotlight .office-card{stroke:var(--focus);stroke-width:.5}.row.spotlight{background:var(--hover)}
-.office-movable{transition:transform .8s ease}.office-arc .office-arc-path{fill:none;stroke:var(--blue);stroke-width:.35}.office-arc .office-arc-head{fill:var(--blue)}.office-arc-important .office-arc-path{stroke:var(--amber)}.office-arc-important .office-arc-head{fill:var(--amber)}.office-arc-dropped .office-arc-path{stroke:var(--red);stroke-dasharray:.6 .4}.office-arc-dropped .office-arc-head{fill:var(--red)}.office-arc-label{fill:var(--muted);font-size:1.2px}.office-alert{fill:var(--red);font-size:1.4px}.office-latch{fill:var(--dot-warn);font-size:1.4px}.office-link-line{fill:none;stroke-width:.45;stroke-dasharray:.8 .5}.office-link-overlap .office-link-line{stroke:var(--amber)}.office-link-conflict .office-link-line{stroke:var(--red)}.office-link-cohort .office-link-line{stroke:var(--blue)}.office-link-label{font-size:1.2px;fill:var(--muted)}.office-link-conflict .office-link-label{fill:var(--red)}.office-link-overlap .office-link-label{fill:var(--amber)}.office-link-cohort .office-link-label{fill:var(--blue)}.office-checking{fill:var(--blue);font-size:1.1px}.office-card-checking .office-card{stroke:var(--blue)}
-.office-avatar{fill:var(--muted)}.office-idle .office-avatar{fill:var(--dot-ok)}.office-busy .office-avatar{fill:var(--dot-warn)}.office-offline .office-avatar{fill:var(--dot)}.office-paused .office-avatar{fill:var(--dot-warn)}.office-waiting .office-avatar{fill:var(--amber)}.office-waiting .office-desk-surface{stroke:var(--amber);stroke-width:.6}.office-glyph-shape{fill:none;stroke-width:.32}.office-idle .office-glyph-shape{stroke:var(--dot-ok)}.office-busy .office-glyph-shape{stroke:var(--dot-warn);fill:var(--dot-warn)}.office-paused .office-glyph-shape{stroke:var(--dot-warn);fill:var(--dot-warn)}.office-offline .office-glyph-shape{stroke:var(--dot)}.office-handshape{fill:none;stroke:var(--dot-err);stroke-width:.28}.office-desk-leg{fill:var(--panel-soft);stroke:var(--line);stroke-width:.2}.office-nameplate{fill:var(--control);stroke:var(--control-border);stroke-width:.2}.office-room-wire{fill:none;stroke:var(--line);stroke-width:.25}.office-divider{fill:none;stroke:var(--line);stroke-width:.2}.office-shelf{fill:var(--panel-soft);stroke:var(--line);stroke-width:.3}.office-shelf-card{fill:var(--green-soft);stroke:var(--green);stroke-width:.25}.office-box-top{fill:var(--control);stroke:var(--control-border);stroke-width:.2}.office-box-left{fill:var(--panel-soft);stroke:var(--line);stroke-width:.2}.office-box-right{fill:var(--panel);stroke:var(--line);stroke-width:.2}.office-busy .office-glyph,.office-hand{animation:office-pulse 1.2s ease-in-out infinite}.office-appear{animation:office-appear .5s ease-out}.office-leaving{pointer-events:none;animation:office-fade .4s linear forwards}.office-fadeout{animation-name:office-fade;animation-duration:1s;animation-timing-function:linear;animation-fill-mode:forwards}.office-settle .office-movable{transition:none}.office-settle .office-appear{animation:none}
+.office-scene{display:block;max-width:100%;height:auto;margin-inline:auto;font-family:system-ui,sans-serif;font-size:1px}.office-scene :is(rect,path,line,polygon,circle){vector-effect:non-scaling-stroke;stroke-width:1px}.office-room{fill:var(--panel-soft);stroke:var(--line)}.office-room-title{fill:var(--ink);font-size:1.083333px;font-weight:600}.office-room-count{fill:var(--ink);font-size:1px;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}.office-header-surface{fill:var(--panel);stroke:var(--line)}.office-count-pill{fill:var(--panel);stroke:var(--line)}.office-desk-surface{fill:var(--panel);stroke:var(--line)}.office-desk.office-dimmed .office-avatar{opacity:.55}.office-name{fill:var(--ink);font-size:1.083333px;font-weight:600}.office-state,.office-meta,.office-empty{fill:var(--muted);font-size:1px}.office-glyph,.office-hand{font-size:1px}.office-idle .office-glyph{fill:var(--green)}.office-busy .office-glyph{fill:var(--amber)}.office-offline .office-glyph,.office-unknown .office-glyph{fill:var(--muted)}.office-paused .office-glyph{fill:var(--amber)}.office-waiting .office-glyph{fill:var(--red)}.office-hand{fill:var(--red)}.office-bubble{fill:var(--panel);stroke:var(--blue)}.office-bubble-text{fill:var(--ink);font-size:1px}.office-mode{fill:var(--muted);font-size:1px;font-family:ui-monospace,monospace}.office-card{fill:var(--control);stroke:var(--control-border)}.office-card-text{fill:var(--ink);font-size:1px}.office-card-id{font-family:ui-monospace,monospace}.office-card-accent{fill:var(--line)}.office-waiting-card .office-card-accent{fill:var(--waiting)}.office-rework-card .office-card-accent{fill:var(--red)}.office-card-checking .office-card-accent{fill:var(--blue)}.office-more{fill:var(--blue);font-size:1px}.office-scene .office-spotlight .office-desk-surface,.office-scene .office-spotlight .office-card,.office-scene [role="button"]:focus-visible > .office-card{stroke:var(--focus);stroke-width:2px}.office-card-hit{fill:transparent;stroke:none;pointer-events:all}.office-card-focus:focus-visible{outline:none}.row.spotlight{background:var(--hover)}
+
+.office-movable{transition:transform .8s ease}.office-arc .office-arc-path{fill:none;stroke:var(--blue);stroke-width:1px}.office-arc .office-arc-head{fill:var(--blue)}.office-arc-important .office-arc-path{stroke:var(--amber)}.office-arc-important .office-arc-head{fill:var(--amber)}.office-arc-dropped .office-arc-path{stroke:var(--red);stroke-dasharray:.6 .4}.office-arc-dropped .office-arc-head{fill:var(--red)}.office-arc-label{fill:var(--muted);font-size:1px}.office-alert{fill:var(--red);font-size:1px}.office-latch{fill:var(--amber);font-size:1px}.office-link-line{fill:none;stroke-width:1px;stroke-dasharray:.8 .5}.office-link-overlap .office-link-line{stroke:var(--amber)}.office-link-conflict .office-link-line{stroke:var(--red)}.office-link-cohort .office-link-line{stroke:var(--blue)}.office-link-label{font-size:1px;fill:var(--muted)}.office-link-conflict .office-link-label{fill:var(--red)}.office-link-overlap .office-link-label{fill:var(--amber)}.office-link-cohort .office-link-label{fill:var(--blue)}.office-checking{fill:var(--blue);font-size:.916667px}
+.office-avatar{fill:var(--muted)}.office-idle .office-avatar{fill:var(--dot-ok)}.office-busy .office-avatar{fill:var(--dot-warn)}.office-offline .office-avatar{fill:var(--dot)}.office-paused .office-avatar{fill:var(--dot-warn)}.office-waiting .office-avatar{fill:var(--amber)}.office-waiting .office-desk-surface{stroke:var(--amber)}.office-glyph-shape{fill:none;stroke-width:1px}.office-idle .office-glyph-shape{stroke:var(--dot-ok)}.office-busy .office-glyph-shape{stroke:var(--dot-warn);fill:var(--dot-warn)}.office-paused .office-glyph-shape{stroke:var(--dot-warn);fill:var(--dot-warn)}.office-offline .office-glyph-shape{stroke:var(--dot)}.office-handshape{fill:none;stroke:var(--dot-err);stroke-width:1px}.office-desk-leg{fill:var(--panel-soft);stroke:var(--line);stroke-width:1px}.office-nameplate{fill:var(--control);stroke:var(--control-border);stroke-width:1px}.office-room-wire{fill:none;stroke:var(--line);stroke-width:1px}.office-divider{fill:none;stroke:var(--line);stroke-width:1px}.office-shelf{fill:var(--panel-soft);stroke:var(--line);stroke-width:1px}.office-shelf-card{fill:var(--green-soft);stroke:var(--green);stroke-width:1px}.office-box-top{fill:var(--control);stroke:var(--control-border);stroke-width:1px}.office-box-left{fill:var(--panel-soft);stroke:var(--line);stroke-width:1px}.office-box-right{fill:var(--panel);stroke:var(--line);stroke-width:1px}.office-busy .office-glyph,.office-hand{animation:office-pulse 1.2s ease-in-out infinite}.office-appear{animation:office-appear .5s ease-out}.office-leaving{pointer-events:none;animation:office-fade .4s linear forwards}.office-fadeout{animation-name:office-fade;animation-duration:1s;animation-timing-function:linear;animation-fill-mode:forwards}.office-settle .office-movable{transition:none}.office-settle .office-appear{animation:none}
 @keyframes office-pulse{50%{opacity:.45}}@keyframes office-appear{from{opacity:0}}@keyframes office-fade{to{opacity:0}}
 @media(prefers-reduced-motion:reduce){.office-scene,.office-scene *{transition:none!important;animation:none!important}}
 
-.pet-container[hidden]{display:none}.pet-container{display:flex;justify-content:flex-end;padding:8px 24px}.pet-control{display:flex;align-items:center;gap:12px;min-height:64px;min-width:40px;font-variant-numeric:tabular-nums}.pet-art{width:72px;height:64px;fill:currentColor}.pet-pixel{shape-rendering:crispEdges}.pet-accent{fill:var(--amber)}.pet-blink{opacity:0}.pet-waiting .pet-open{animation:pet-open 2s steps(1,end) infinite}.pet-waiting .pet-blink{animation:pet-blink 2s steps(1,end) infinite}@keyframes pet-open{50%{opacity:0}}@keyframes pet-blink{50%{opacity:1}}@media(prefers-reduced-motion:reduce){.pet-waiting .pet-open,.pet-waiting .pet-blink{animation:none}}
+
+[hidden]{display:none!important}main{display:block}main>.stack{margin-top:24px}.view-nav{max-width:1440px;margin:auto;padding:16px 32px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.view-nav button{min-height:44px}.view-nav button[aria-current="page"]{background:var(--green);color:var(--on-accent);border-color:var(--green)}.view-nav .attention-badge{margin-left:auto}.view-nav .badge{margin-left:4px}.task-card.compact{cursor:pointer;min-height:44px}.task-card.compact:hover{border-color:var(--focus)}.task-card.compact .row-head{gap:6px;flex-wrap:wrap}.task-card.compact .label{flex:1 1 100px}.task-detail .actions{display:flex;flex-wrap:wrap}.task-detail .actions select{width:auto;max-width:260px}.task-detail button,.task-detail select{min-height:44px}.board-focus{grid-template-columns:minmax(0,1fr)}.column-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:12px}.column-head h3{margin:0}.column-head button{min-height:44px;font-size:12px}#task-detail-dialog{width:min(720px,calc(100% - 32px));max-height:85vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);padding:20px}#task-detail-dialog::backdrop{background:rgba(0,0,0,.35)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.dialog-head button{min-height:44px}@media(max-width:600px){.view-nav{padding:12px}.view-nav .attention-badge{margin-left:0}.board-focus{grid-template-columns:minmax(0,1fr)}}
 </style>
 </head>
 <body>
-<header><div><div class="eyebrow">Local control room</div><h1>agent-hub <span>/ dashboard</span></h1><div id="project-context" class="meta"></div></div><div><label for="theme">Theme</label><select id="theme" class="theme-choice"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select><div id="connection" class="connection" role="status">Connecting...</div></div><div class="filters"><label for="office-view">View</label><select id="office-view"><option value="off">Off</option><option value="flat">Flat</option><option value="isometric">Isometric</option></select></div></header>
-<div id="pet-container" class="pet-container" hidden></div>
+<header><div><div class="eyebrow">Local control room</div><h1>agent-hub <span>/ dashboard</span></h1><div id="project-context" class="meta"></div></div><div><label for="theme">Theme</label><select id="theme" class="theme-choice"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select><div id="connection" class="connection" role="status">Connecting...</div></div></header>
+<nav id="dashboard-nav" class="view-nav" aria-label="Dashboard views">
+<button type="button" data-view-target="board" aria-current="page">Board</button>
+<button type="button" data-view-target="office">Office</button>
+<button type="button" data-view-target="stream">Stream</button>
+<button type="button" data-view-target="agents">Agents <span id="agents-approval-count" class="badge warn" hidden></span></button>
+<button type="button" data-view-target="message">Message</button>
+<button type="button" data-view-target="memory">Memory</button>
+<button type="button" data-view-target="settings">Settings</button>
+<button type="button" id="attention-badge" class="attention-badge" aria-label="Global attention" hidden>(0)</button>
+</nav>
 <main>
 <p id="notice" class="notice" role="status" aria-live="polite"></p>
-<section class="task-board-section" aria-labelledby="tasks-title"><div class="section-head"><h2 id="tasks-title">Task board</h2><div class="filters"><select id="task-filter" aria-label="Filter tasks by state"><option value="">All states</option><option value="backlog">Backlog</option><option value="proposed">To Do</option><option value="work">Work (including rework)</option><option value="in_progress">In progress</option><option value="in_review">In review</option><option value="approved">Approved</option><option value="changes_requested">Changes requested</option></select><span id="task-count" class="meta"></span></div></div><div id="task-progress" class="task-progress" aria-live="polite"></div><div class="board-toolbar"><label for="task-peer-filter">Agent<select id="task-peer-filter"><option value="">All agents</option></select></label><label for="task-release-filter">Release<select id="task-release-filter"><option value="">All releases</option></select></label><label for="task-lanes">View<select id="task-lanes"><option value="columns">By state</option><option value="agents">By agent</option><option value="releases">By release</option></select></label></div><div id="task-legend" class="agent-legend" role="group" aria-label="Agent legend and assignment targets"></div><div id="tasks" class="task-list"></div><details><summary>Plan a task</summary><form id="planning"><div class="field"><label for="planning-task">Task</label><select id="planning-task"><option value="">Select task</option></select></div><div class="split"><label>Priority<select id="planning-priority"><option value="">Default</option><option value="0">P0</option><option value="1">P1</option><option value="2">P2</option><option value="3">P3</option></select></label><label>Order<input id="planning-rank" type="number" min="0" step="1"></label><label>Release<select id="planning-release"><option value="">No release</option></select></label><label>Planned start<input id="planning-start" type="datetime-local" step="any"></label><label>Due<input id="planning-due" type="datetime-local" step="any"></label></div><label><input id="planning-pinned" type="checkbox">Pin against planner changes</label><label>Reason<input id="planning-reason" maxlength="1000" required></label><div class="actions"><button id="planning-save" type="submit" data-mutation="project">Save plan</button><button id="planning-undo" type="button" data-mutation="project">Undo latest plan</button><button id="planning-reload" type="button">Reload current values</button></div><p id="planning-version" class="meta"></p></form></details><details id="split-panel" hidden><summary>Split the selected backlog task</summary><form id="split-backlog"><label>Part titles, one per line<textarea id="split-titles" maxlength="2408" required></textarea></label><label><input id="split-sequential" type="checkbox">Each part waits for the previous part</label><label>Reason<input id="split-reason" maxlength="1000" required></label><p class="meta">Two to eight parts. The original task retains integration and acceptance. Unused parts can be undone from its current plan.</p><button id="split-save" type="submit" data-mutation="project">Stage parts</button></form></details><details><summary>Releases</summary><div id="releases" class="content"></div><form id="release-new"><div class="split"><label>Name<input id="release-name" maxlength="64" required></label><label>Order<input id="release-order" type="number" min="0" value="0" step="1" required></label></div><label>Goal<input id="release-goal" maxlength="1000" required></label><button type="submit" data-mutation="project">Create release</button></form><form id="release-plan"><label>Release<select id="release-edit"><option value="">Select release</option></select></label><div class="split"><label>Planned start<input id="release-start" type="datetime-local" step="any"></label><label>Cut<input id="release-cut" type="datetime-local" step="any"></label><label>Ship<input id="release-ship" type="datetime-local" step="any"></label></div><button id="release-save" type="submit" data-mutation="project">Save dates</button><button id="release-reload" type="button">Reload current release</button><p id="release-version" class="meta"></p></form></details><details id="delivery"><summary>Delivery evidence (read-only)</summary><div class="field"><label for="delivery-repo">GitHub repository</label><input id="delivery-repo" maxlength="200" placeholder="owner/repository"></div><div class="field"><label for="delivery-live">Live verification issue IDs (optional)</label><input id="delivery-live" maxlength="300" placeholder="Comma-separated issue numbers"></div><div class="actions"><button id="delivery-queue" type="button">Read merge queue</button><button id="delivery-release" type="button">Read release checklist</button></div><pre id="delivery-report" class="body" aria-live="polite"></pre></details><details><summary>Propose a task</summary><form id="propose"><div class="field"><label for="title">Title</label><input id="title" name="title" required maxlength="300" placeholder="What should the team do?"></div><div class="field"><label for="detail">Details (optional)</label><textarea id="detail" name="detail" maxlength="8000"></textarea></div><div class="split"><div class="field"><label for="class">Class</label><select id="class" name="class"><option>implement</option><option>plan</option><option>bulk_edit</option><option>test</option><option>review</option><option>summarize</option><option>triage</option></select></div><div class="field"><label for="owner">Owner</label><select id="owner" name="owner"><option value="">Automatic</option></select></div></div><label><input id="backlog-proposal" type="checkbox"> Add to Backlog without offering</label><button class="primary" data-mutation="project" type="submit">Propose task</button></form></details></section>
+<section class="task-board-section" aria-labelledby="tasks-title" data-view="board"><div class="section-head"><h2 id="tasks-title">Task board</h2><div class="filters"><select id="task-filter" aria-label="Filter tasks by state"><option value="">All states</option><option value="backlog">Backlog</option><option value="proposed">To Do</option><option value="work">Work (including rework)</option><option value="in_progress">In progress</option><option value="in_review">In review</option><option value="approved">Approved</option><option value="changes_requested">Changes requested</option></select><span id="task-count" class="meta"></span></div></div><div id="task-progress" class="task-progress" aria-live="polite"></div><div class="board-toolbar"><button id="board-back" type="button" hidden>Back to board</button><span id="board-focus-title" class="meta" hidden></span><label for="task-peer-filter">Agent<select id="task-peer-filter"><option value="">All agents</option></select></label><label for="task-release-filter">Release<select id="task-release-filter"><option value="">All releases</option></select></label><label for="task-lanes">View<select id="task-lanes"><option value="columns">By state</option><option value="agents">By agent</option><option value="releases">By release</option></select></label></div><div id="task-legend" class="agent-legend" role="group" aria-label="Agent legend and assignment targets"></div><div id="tasks" class="task-list"></div><details><summary>Plan a task</summary><form id="planning"><div class="field"><label for="planning-task">Task</label><select id="planning-task"><option value="">Select task</option></select></div><div class="split"><label>Priority<select id="planning-priority"><option value="">Default</option><option value="0">P0</option><option value="1">P1</option><option value="2">P2</option><option value="3">P3</option></select></label><label>Order<input id="planning-rank" type="number" min="0" step="1"></label><label>Release<select id="planning-release"><option value="">No release</option></select></label><label>Planned start<input id="planning-start" type="datetime-local" step="any"></label><label>Due<input id="planning-due" type="datetime-local" step="any"></label></div><label><input id="planning-pinned" type="checkbox">Pin against planner changes</label><label>Reason<input id="planning-reason" maxlength="1000" required></label><div class="actions"><button id="planning-save" type="submit" data-mutation="project">Save plan</button><button id="planning-undo" type="button" data-mutation="project">Undo latest plan</button><button id="planning-reload" type="button">Reload current values</button></div><p id="planning-version" class="meta"></p></form></details><details id="split-panel" hidden><summary>Split the selected backlog task</summary><form id="split-backlog"><label>Part titles, one per line<textarea id="split-titles" maxlength="2408" required></textarea></label><label><input id="split-sequential" type="checkbox">Each part waits for the previous part</label><label>Reason<input id="split-reason" maxlength="1000" required></label><p class="meta">Two to eight parts. The original task retains integration and acceptance. Unused parts can be undone from its current plan.</p><button id="split-save" type="submit" data-mutation="project">Stage parts</button></form></details><details><summary>Releases</summary><div id="releases" class="content"></div><form id="release-new"><div class="split"><label>Name<input id="release-name" maxlength="64" required></label><label>Order<input id="release-order" type="number" min="0" value="0" step="1" required></label></div><label>Goal<input id="release-goal" maxlength="1000" required></label><button type="submit" data-mutation="project">Create release</button></form><form id="release-plan"><label>Release<select id="release-edit"><option value="">Select release</option></select></label><div class="split"><label>Planned start<input id="release-start" type="datetime-local" step="any"></label><label>Cut<input id="release-cut" type="datetime-local" step="any"></label><label>Ship<input id="release-ship" type="datetime-local" step="any"></label></div><button id="release-save" type="submit" data-mutation="project">Save dates</button><button id="release-reload" type="button">Reload current release</button><p id="release-version" class="meta"></p></form></details><details id="delivery"><summary>Delivery evidence (read-only)</summary><div class="field"><label for="delivery-repo">GitHub repository</label><input id="delivery-repo" maxlength="200" placeholder="owner/repository"></div><div class="field"><label for="delivery-live">Live verification issue IDs (optional)</label><input id="delivery-live" maxlength="300" placeholder="Comma-separated issue numbers"></div><div class="actions"><button id="delivery-queue" type="button">Read merge queue</button><button id="delivery-release" type="button">Read release checklist</button></div><pre id="delivery-report" class="body" aria-live="polite"></pre></details><details><summary>Propose a task</summary><form id="propose"><div class="field"><label for="title">Title</label><input id="title" name="title" required maxlength="300" placeholder="What should the team do?"></div><div class="field"><label for="detail">Details (optional)</label><textarea id="detail" name="detail" maxlength="8000"></textarea></div><div class="split"><div class="field"><label for="class">Class</label><select id="class" name="class"><option>implement</option><option>plan</option><option>bulk_edit</option><option>test</option><option>review</option><option>summarize</option><option>triage</option></select></div><div class="field"><label for="owner">Owner</label><select id="owner" name="owner"><option value="">Automatic</option></select></div></div><label><input id="backlog-proposal" type="checkbox"> Add to Backlog without offering</label><button class="primary" data-mutation="project" type="submit">Propose task</button></form></details></section>
 <div class="stack">
-<section id="office-section" aria-labelledby="office-title" hidden><div class="section-head"><h2 id="office-title">Office</h2></div><div id="office" class="content"></div></section>
-<section aria-labelledby="stream-title"><div class="section-head"><h2 id="stream-title">Live stream</h2><div class="filters"><div id="stream-filters" class="chips" role="group" aria-label="Filter events by kind"></div><label><input id="follow" type="checkbox" checked> Follow latest</label></div></div><div id="stream" class="stream" tabindex="0" aria-label="Recent hub events"><p class="empty">Waiting for hub activity...</p></div><p id="stream-empty" class="empty" hidden>No events match this filter.</p></section>
+<section id="office-section" aria-labelledby="office-title" data-view="office" hidden><div class="section-head"><h2 id="office-title">Office</h2><div class="filters"><label for="office-view">Office mode</label><select id="office-view"><option value="off">Off</option><option value="flat">Flat</option><option value="isometric">Isometric</option></select></div></div><div id="office" class="content"></div></section>
+<section aria-labelledby="stream-title" data-view="stream" hidden><div class="section-head"><h2 id="stream-title">Live stream</h2><div class="filters"><div id="stream-filters" class="chips" role="group" aria-label="Filter events by kind"></div><label><input id="follow" type="checkbox" checked> Follow latest</label></div></div><div id="stream" class="stream" tabindex="0" aria-label="Recent hub events"><p class="empty">Waiting for hub activity...</p></div><p id="stream-empty" class="empty" hidden>No events match this filter.</p></section>
 
-<section aria-labelledby="memory-title"><div class="section-head"><h2 id="memory-title">Memory</h2><div class="filters"><div id="memory-tiers" class="chips" role="group" aria-label="Memory tier"></div><span id="memory-count" class="meta"></span></div></div><div class="memory-controls"><input id="memory-q" type="search" maxlength="200" placeholder="Search memory" aria-label="Search memory"><select id="memory-kind" aria-label="Filter memory by kind"><option value="">All kinds</option><option value="decision">Decisions</option><option value="contract">Contracts</option><option value="fail">Fails</option><option value="finding">Findings</option></select><select id="memory-peer" aria-label="Filter memory by peer"><option value="">All peers</option></select><select id="memory-machine" aria-label="Filter memory by machine"><option value="">All machines</option></select><select id="memory-since" aria-label="Filter memory by time"><option value="">Any time</option><option value="1">Last day</option><option value="7">Last week</option><option value="30">Last 30 days</option></select><select id="memory-hops" aria-label="Graph neighbourhood depth"><option value="1">1 hop</option><option value="2">2 hops</option></select></div><div id="memory-list" class="task-list" aria-label="Memory entries"></div><div id="memory-graph" class="memory-graph"></div><div id="memory-detail"></div></section>
-<section aria-labelledby="compose-title"><div class="section-head"><h2 id="compose-title">Console message</h2></div><form id="send" class="content"><div class="field"><label for="recipient">Recipient</label><select id="recipient" name="recipient"><option value="">All peers</option></select></div><div class="field"><label for="message">Message</label><textarea id="message" name="body" required maxlength="8000" placeholder="Send an instruction to the team..."></textarea></div><button class="primary" data-mutation="project" type="submit">Send message</button></form></section>
-<section aria-labelledby="settings-title"><div class="section-head"><h2 id="settings-title">Settings</h2><span id="settings-session" class="meta" role="status"></span></div><div id="settings"><p class="empty">Waiting for the hub...</p></div></section>
+<section aria-labelledby="memory-title" data-view="memory" hidden><div class="section-head"><h2 id="memory-title">Memory</h2><div class="filters"><div id="memory-tiers" class="chips" role="group" aria-label="Memory tier"></div><span id="memory-count" class="meta"></span></div></div><div class="memory-controls"><input id="memory-q" type="search" maxlength="200" placeholder="Search memory" aria-label="Search memory"><select id="memory-kind" aria-label="Filter memory by kind"><option value="">All kinds</option><option value="decision">Decisions</option><option value="contract">Contracts</option><option value="fail">Fails</option><option value="finding">Findings</option></select><select id="memory-peer" aria-label="Filter memory by peer"><option value="">All peers</option></select><select id="memory-machine" aria-label="Filter memory by machine"><option value="">All machines</option></select><select id="memory-since" aria-label="Filter memory by time"><option value="">Any time</option><option value="1">Last day</option><option value="7">Last week</option><option value="30">Last 30 days</option></select><select id="memory-hops" aria-label="Graph neighbourhood depth"><option value="1">1 hop</option><option value="2">2 hops</option></select></div><div id="memory-list" class="task-list" aria-label="Memory entries"></div><div id="memory-graph" class="memory-graph"></div><div id="memory-detail"></div></section>
+<section aria-labelledby="compose-title" data-view="message" hidden><div class="section-head"><h2 id="compose-title">Console message</h2></div><form id="send" class="content"><div class="field"><label for="recipient">Recipient</label><select id="recipient" name="recipient"><option value="">All peers</option></select></div><div class="field"><label for="message">Message</label><textarea id="message" name="body" required maxlength="8000" placeholder="Send an instruction to the team..."></textarea></div><button class="primary" data-mutation="project" type="submit">Send message</button></form></section>
+<section aria-labelledby="settings-title" data-view="settings" hidden><div class="section-head"><h2 id="settings-title">Settings</h2><span id="settings-session" class="meta" role="status"></span></div><div id="settings"><p class="empty">Waiting for the hub...</p></div></section>
 </div>
 <div class="stack">
-<section id="projects-panel" aria-labelledby="projects-title"><div class="section-head"><h2 id="projects-title">Projects</h2><span id="project-count" class="meta"></span></div><div id="projects"></div></section>
-<section aria-labelledby="peers-title"><div class="section-head"><h2 id="peers-title">Peers &amp; queues</h2><span id="peer-count" class="meta"></span></div><div id="peers"></div></section>
-<section aria-labelledby="permissions-title"><div class="section-head"><h2 id="permissions-title">Pending approvals</h2><span id="permission-count" class="meta"></span></div><div id="permissions"></div></section>
-<section aria-labelledby="budget-title"><div class="section-head"><h2 id="budget-title">Usage budgets</h2></div><div id="budget"></div></section>
-<section aria-labelledby="bench-title"><div class="section-head"><h2 id="bench-title">Benchmarks</h2><span id="bench-count" class="meta"></span></div><div id="bench"></div></section>
+<section id="projects-panel" aria-labelledby="projects-title" data-view="agents" hidden><div class="section-head"><h2 id="projects-title">Projects</h2><span id="project-count" class="meta"></span></div><div id="projects"></div></section>
+<section aria-labelledby="peers-title" data-view="agents" hidden><div class="section-head"><h2 id="peers-title">Peers &amp; queues</h2><span id="peer-count" class="meta"></span></div><div id="peers"></div></section>
+<section aria-labelledby="permissions-title" data-view="agents" hidden><div class="section-head"><h2 id="permissions-title">Pending approvals</h2><span id="permission-count" class="meta"></span></div><div id="permissions"></div></section>
+<section aria-labelledby="budget-title" data-view="agents" hidden><div class="section-head"><h2 id="budget-title">Usage budgets</h2></div><div id="budget"></div></section>
+<section aria-labelledby="bench-title" data-view="agents" hidden><div class="section-head"><h2 id="bench-title">Benchmarks</h2><span id="bench-count" class="meta"></span></div><div id="bench"></div></section>
 </div>
 </main>
+<dialog id="task-detail-dialog" aria-labelledby="task-detail-title"><div class="dialog-head"><h2 id="task-detail-title">Task details</h2><button id="task-detail-close" type="button" autofocus>Close details</button></div><div id="task-detail-content"></div></dialog>
 <footer>Loopback session. Private task content stays in the terminal. Reopen with <code>ahub ui</code> when your session expires.</footer>
 <script>
 'use strict';
 /* TASK_PROGRESS_MODEL */
 /* PEER_START_RETRY_MS */
 /* BOARD_MODEL */
-/* PET_MODEL */
+/* NEEDS_MODEL */
 /* OFFICE_MODEL */
 const officeView = (() => {
   let choice = 'off';
-  try { const saved = document.cookie.split(';').map(value => value.trim()).find(value => value.startsWith('agent-hub-office='))?.slice('agent-hub-office='.length); if (['off','flat','isometric'].includes(saved)) choice = saved; } catch {}
-  return { get: () => choice, set: (value) => { choice = ['off','flat','isometric'].includes(value) ? value : 'off'; try { document.cookie = `agent-hub-office=${choice}; Path=/; Max-Age=31536000; SameSite=Strict`; } catch {} } };
+  const saved = dashboardCookie.get('agent-hub-office'); if (['off','flat','isometric'].includes(saved)) choice = saved;
+  return { get: () => choice, set: (value) => { choice = ['off','flat','isometric'].includes(value) ? value : 'off'; dashboardCookie.set('agent-hub-office', choice) } };
 })();
 const themeControl = document.getElementById('theme'); themeControl.value = dashboardTheme.get(); themeControl.addEventListener('change', () => dashboardTheme.set(themeControl.value));
-const officeControl = document.getElementById('office-view'); officeControl.value = officeView.get(); document.getElementById('office-section').hidden = officeView.get() === 'off'; officeControl.addEventListener('change', () => { officeView.set(officeControl.value); if (lastSnapshot) render(lastSnapshot); else document.getElementById('office-section').hidden = officeView.get() === 'off'; });
+const officeControl = document.getElementById('office-view'); officeControl.value = officeView.get(); document.getElementById('office-section').hidden = officeView.get() === 'off'; officeControl.addEventListener('change', () => { officeView.set(officeControl.value); if (lastSnapshot) render(lastSnapshot); else document.getElementById('office-section').hidden = officeView.get() === 'off'; applyDashboardView(); });
+// dashboard-navigation-begin
+const DASHBOARD_VIEWS = ['board','office','stream','agents','message','memory','settings'];
+let currentView = dashboardCookie.get('agent-hub-view', 'board');
+if (!DASHBOARD_VIEWS.includes(currentView)) currentView = 'board';
+function applyDashboardView() {
+  for (const section of document.querySelectorAll('main section[data-view]')) section.hidden = section.dataset.view !== currentView;
+  for (const stack of document.querySelectorAll('main > .stack')) stack.hidden = ![...stack.children].some(section => section.dataset.view === currentView);
+  for (const button of document.querySelectorAll('button[data-view-target]')) button.setAttribute('aria-current', button.dataset.viewTarget === currentView ? 'page' : 'false');
+}
+function switchView(view) {
+  if (!DASHBOARD_VIEWS.includes(view)) return;
+  currentView = view; dashboardCookie.set('agent-hub-view', view); applyDashboardView();
+}
+function initializeDashboardNavigation() {
+  for (const button of document.querySelectorAll('button[data-view-target]')) button.addEventListener('click', () => switchView(button.dataset.viewTarget));
+  $('attention-badge').addEventListener('click', reachAttention);
+  $('board-back').addEventListener('click', () => setColumnFocus(null));
+  $('task-detail-close').addEventListener('click', closeTaskDetail);
+  $('task-detail-dialog').addEventListener('close', () => { if ($('task-detail-dialog').open) return; taskDetailId = null; $('task-detail-content').replaceChildren(); signatures.delete('task-detail-content'); });
+  applyDashboardView();
+}
+// dashboard-navigation-end
 let ticket = location.hash.slice(1);
 history.replaceState(null, '', location.pathname);
 const $ = (id) => document.getElementById(id);
@@ -166,8 +204,7 @@ function resetView(id, instance) {
   lastSnapshot = null;
   officePrev = null; officeDesks.clear(); officeCards.clear(); officeScene = null;
   $('office').replaceChildren(); $('office-section').hidden = true;
-  const pet=$('pet-container');if(pet){pet.replaceChildren();pet.hidden=true;}
-  if(typeof petSignature!=='undefined')petSignature='';if(typeof petFirst!=='undefined')petFirst=undefined;if(typeof petBaseTitle!=='undefined')document.title=petBaseTitle;
+  closeTaskDetail(); renderNeedsAttention(null); applyDashboardView();
   signatures.clear(); $('stream').replaceChildren(); empty($('stream'), managerMode ? 'Select a running project...' : 'Waiting for hub activity...');
   if (streamFilter) { streamFilter = ''; for (const child of $('stream-filters').children) child.setAttribute('aria-pressed', 'false'); }
   $('stream-empty').hidden = true; $('task-filter').value = '';
@@ -410,6 +447,8 @@ function renderStarts(target, starts) {
   }
 }
 let boardViewState = null, showAllDone = false;
+const BOARD_FOCUS_COLUMNS = ['backlog','todo','progress','review','done'];
+let columnFocus, taskDetailId = null;
 let planningEdit = null, releaseEdit = null;
 const loadedPlanningDates = new Map();
 const localDateInput = value => {
@@ -515,13 +554,8 @@ function dropTarget(node, accepted, payload) {
     void action({...payload, id:card.id});
   });
 }
-function taskCard(task, card, stage, ids, overdue) {
-  const row = el('article', undefined, 'task-card'), head = el('div', undefined, 'row-head');
-  row.tabIndex = 0; taskRows.set(task.id,row);
-  const trackCard = on => { const sceneCard=officeCards.get(task.id);if(sceneCard)sceneCard.classList.toggle('office-spotlight',on); };
-  row.addEventListener('mouseenter',()=>trackCard(true));row.addEventListener('mouseleave',()=>trackCard(false));
-  row.addEventListener('focus',()=>trackCard(true));row.addEventListener('blur',()=>trackCard(false));
-
+function taskDetail(task, card, stage, ids, overdue) {
+  const row = el('article', undefined, 'task-detail'), head = el('div', undefined, 'row-head');
   row.setAttribute('aria-label', '#' + task.id + ' ' + task.title + ', ' + task.state.replaceAll('_', ' ') + ', owner ' + (task.owner || 'unassigned') + ', priority P' + card.priority);
   head.append(el('span', '#' + task.id + ' ' + task.title, 'label'), badge('P' + card.priority));
   if (card.starred) { const star = el('span', '★'); star.setAttribute('aria-hidden','true'); head.append(star); }
@@ -552,6 +586,30 @@ function taskCard(task, card, stage, ids, overdue) {
     assign.addEventListener('click', () => { if(!sameBoardContext(expected))return notice('The project changed. Use its current board.',true);if(select.value)void action({action:'assign',id:task.id,peer:select.value},assign);else notice('Select a peer before assigning this task.',true); }); controls.append(select,assign);
   }
   if (controls.children.length) row.append(controls);
+  return row;
+}
+function taskCard(task, card, stage, ids, overdue, compact = true) {
+  const row = compact ? el('article', undefined, 'task-card compact') : taskDetail(task, card, stage, ids, overdue);
+  if (!compact) row.classList.add('task-card');
+  row.tabIndex = 0; taskRows.set(task.id,row);
+  const trackCard = on => { const sceneCard=officeCards.get(task.id);if(sceneCard)sceneCard.classList.toggle('office-spotlight',on); };
+  row.addEventListener('mouseenter',()=>trackCard(true));row.addEventListener('mouseleave',()=>trackCard(false));
+  row.addEventListener('focus',()=>trackCard(true));row.addEventListener('blur',()=>trackCard(false));
+  if (compact) {
+    row.setAttribute('role', 'button');
+    row.setAttribute('aria-label', '#' + task.id + ' ' + task.title + ', ' + task.state.replaceAll('_', ' ') + ', owner ' + (task.owner || 'unassigned') + ', priority P' + card.priority);
+    if (task.role) row.setAttribute('aria-label', row.getAttribute('aria-label') + ', Task guidance: ' + task.role + ' (grants no authority)');
+    if (task.release != null) { const release=boardViewState?.snapshot.releases?.find(release=>release.id===task.release);row.setAttribute('aria-label',row.getAttribute('aria-label')+', Release #'+task.release+' '+(release?.name || '(label unavailable)')); }
+    const head = el('div', undefined, 'row-head'); head.append(el('span', '#' + task.id + ' ' + task.title, 'label'), badge('P' + card.priority));
+    const owner = el('span', undefined, 'peer-mark peer-' + (Object.hasOwn(peerPalette, task.owner || '') ? task.owner : 'other'));
+    owner.setAttribute('aria-label', 'owner: ' + (task.owner || 'unassigned')); owner.title = 'owner: ' + (task.owner || 'unassigned'); owner.append(el('span', undefined, 'peer-color-dot')); head.append(owner);
+    if (card.starred) { const star=el('span','★');star.setAttribute('aria-hidden','true');head.append(star); }
+    row.append(head);
+    if (overdue) row.append(badge('Overdue','warn'));
+    if (task.checking) row.append(badge('Check running','info'));
+    row.addEventListener('click', () => openTaskDetail(task.id));
+    row.addEventListener('keydown', event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); openTaskDetail(task.id); } });
+  }
   if (card.pull || card.assignable) {
     row.draggable = true; row.title = 'Drag to an available peer or Backlog/To Do, or use the buttons.';
     row.addEventListener('dragstart', event => {
@@ -561,8 +619,36 @@ function taskCard(task, card, stage, ids, overdue) {
   }
   return row;
 }
+function setColumnFocus(column) {
+  if (column !== null && !BOARD_FOCUS_COLUMNS.includes(column)) return;
+  columnFocus = column; dashboardCookie.set('agent-hub-column-focus', column || ''); switchView('board');
+  if (boardViewState) renderBoard(boardViewState.snapshot, boardViewState.peers, boardViewState.ids);
+}
+function closeTaskDetail() {
+  taskDetailId = null; const dialog = $('task-detail-dialog'); if (dialog.open) dialog.close();
+  $('task-detail-content').replaceChildren(); signatures.delete('task-detail-content');
+}
+function refreshTaskDetail() {
+  if (taskDetailId === null) return;
+  const snapshot = boardViewState?.snapshot, task = snapshot?.tasks?.find(task => task.id === taskDetailId), card = boardViewState?.cards.get(taskDetailId);
+  if (!task || !card) return closeTaskDetail();
+  const stage = taskProgress(snapshot.tasks).stages.find(stage => stage.id === taskDetailId);
+  const ids = boardViewState.ids.filter(id => ['idle','busy'].includes(boardViewState.peers[id]?.state) && boardViewState.peers[id]?.attached !== false && boardViewState.peers[id]?.rostered !== false);
+  const overdue = task.due != null && task.due < Date.now() && task.state !== 'approved';
+  $('task-detail-title').textContent = 'Task #' + task.id;
+  update('task-detail-content', [task, card, stage, ids, overdue, boardContext()], target => target.append(taskDetail(task, card, stage, ids, overdue)));
+}
+function openTaskDetail(id) {
+  if (stopped || !Number.isSafeInteger(id) || !snapshotValid || !boardViewState?.cards.has(id)) return;
+  switchView('board'); taskDetailId = id; refreshTaskDetail();
+  const dialog = $('task-detail-dialog'); if (taskDetailId !== null && !dialog.open) dialog.showModal();
+}
 function renderBoard(snapshot, peers, ids) {
-  if (!Array.isArray(snapshot.tasks)) { boardViewState=null; return update('tasks','unavailable',target=>empty(target,'Task board unavailable.')); }
+  if (columnFocus === undefined) {
+    columnFocus = dashboardCookie.get('agent-hub-column-focus') || null;
+    if (!BOARD_FOCUS_COLUMNS.includes(columnFocus)) columnFocus = null;
+  }
+  if (!Array.isArray(snapshot.tasks)) { boardViewState=null; closeTaskDetail(); return update('tasks','unavailable',target=>empty(target,'Task board unavailable.')); }
   const progress = taskProgress(snapshot.tasks), model = boardColumns(snapshot.tasks, peers);
   renderTaskProgress(progress);
   const stages = new Map(progress.stages.map(stage=>[stage.id,stage])), byId = new Map(snapshot.tasks.map(task=>[task.id,task]));
@@ -577,6 +663,8 @@ function renderBoard(snapshot, peers, ids) {
   const taskFilter=$('task-filter').value, ownerFilter=peerFilter.value, releaseFilter=$('task-release-filter').value, lanes=$('task-lanes').value;
   const eligible=ids.filter(id=>['idle','busy'].includes(peers[id].state) && peers[id].attached!==false && peers[id].rostered!==false);
   $('task-count').textContent=snapshot.tasks.length+' tasks';
+  $('board-back').hidden = columnFocus === null; $('board-focus-title').hidden = columnFocus === null;
+  $('board-focus-title').textContent = columnFocus ? model.columns.find(column => column.id === columnFocus)?.label || '' : '';
   update('task-legend',[snapshot.boardLegend,peers],target=>{
     for (const id of ids) {
       const data=(snapshot.boardLegend || []).find(item=>item.peer===id), row=el('div',undefined,'agent-slot');
@@ -590,11 +678,11 @@ function renderBoard(snapshot, peers, ids) {
     }
     if (!ids.length) empty(target,'No peer status available.');
   });
-  update('tasks',[snapshot.tasks,peers,snapshot.boardCapabilities,taskFilter,ownerFilter,releaseFilter,lanes,showAllDone,[...overdue]],target=>{
+  update('tasks',[snapshot.tasks,peers,snapshot.boardCapabilities,taskFilter,ownerFilter,releaseFilter,lanes,showAllDone,[...overdue],columnFocus],target=>{
     taskRows.clear();
     const visible=snapshot.tasks.filter(task=>(!taskFilter || (taskFilter==='work' ? ['in_progress','changes_requested'].includes(task.state) : task.state===taskFilter)) && (!ownerFilter || task.owner===ownerFilter || task.reviewer===ownerFilter) && (!releaseFilter || task.release===Number(releaseFilter)));
     const visibleIds=new Set(visible.map(task=>task.id));
-    const owners=lanes==='agents' ? [...new Set(visible.map(task=>task.owner || ''))] : lanes==='releases' ? [...new Set(visible.map(task=>task.release ?? 0))] : [null];
+    const owners=columnFocus ? [null] : lanes==='agents' ? [...new Set(visible.map(task=>task.owner || ''))] : lanes==='releases' ? [...new Set(visible.map(task=>task.release ?? 0))] : [null];
     if (!owners.length) owners.push(null);
     for (const [laneIndex, owner] of owners.entries()) {
       const lane=el('div',undefined,'board-lane');
@@ -603,19 +691,22 @@ function renderBoard(snapshot, peers, ids) {
         if(lanes==='agents' && eligible.includes(owner)) dropTarget(heading,card=>card.assignable,{action:'assign',peer:owner});
         lane.append(heading);
       }
-      const grid=el('div',undefined,'board-columns');
+      const grid=el('div',undefined,'board-columns' + (columnFocus ? ' board-focus' : ''));
       const inLane=card=>visibleIds.has(card.id) && (owner===null || (lanes==='releases' ? (byId.get(card.id)?.release ?? 0)===owner : (byId.get(card.id)?.owner || '')===owner));
       for (const column of model.columns) {
-        const box=el('div',undefined,'board-column'), heading=el('h3',column.label);heading.id='board-lane-'+laneIndex+'-'+column.id;box.setAttribute('role','group');box.setAttribute('aria-labelledby',heading.id);box.append(heading);
+        if (columnFocus && column.id !== columnFocus) continue;
+        const box=el('div',undefined,'board-column'), heading=el('h3',column.label);heading.id='board-lane-'+laneIndex+'-'+column.id;box.setAttribute('role','group');box.setAttribute('aria-labelledby',heading.id);const columnHead = el('div',undefined,'column-head'); columnHead.append(heading);
+        if (!columnFocus) { const expand=el('button','Expand');expand.type='button';expand.setAttribute('aria-label','Expand '+column.label);expand.addEventListener('click',()=>setColumnFocus(column.id));columnHead.append(expand); }
+        box.append(columnHead);
         if (column.id==='backlog' && snapshot.boardCapabilities?.backlog===true) dropTarget(box,card=>card.returnable,{action:'backlog_return'});
         if (column.id==='todo' && snapshot.boardCapabilities?.backlog===true) dropTarget(box,card=>card.pull,{action:'backlog_pull'});
         let ready=column.ready.filter(inLane), waiting=column.waiting.filter(inLane);
         if(column.id==='done') ready.sort((a,b)=>(byId.get(b.id)?.updated || 0)-(byId.get(a.id)?.updated || 0) || b.id-a.id);
-        const hidden=column.id==='done' && !showAllDone ? Math.max(0,ready.length-10) : 0;
+        const hidden=column.id==='done' && !columnFocus && !showAllDone ? Math.max(0,ready.length-10) : 0;
         if(hidden) ready=ready.slice(0,10);
         for(const [label,list] of [['Ready',ready],['Waiting',waiting]]) {
           if(column.id==='todo') box.append(el('h4',label+' ('+list.length+')'));
-          for(const card of list) box.append(taskCard(byId.get(card.id),card,stages.get(card.id),eligible,overdue.has(card.id)));
+          for(const card of list) box.append(taskCard(byId.get(card.id),card,stages.get(card.id),eligible,overdue.has(card.id),columnFocus === null));
         }
         if(!ready.length && !waiting.length) empty(box,'No tasks');
         if(hidden){const more=el('button','Show '+hidden+' older Done tasks');more.type='button';more.addEventListener('click',()=>{if(!boardViewState)return;showAllDone=true;renderBoard(boardViewState.snapshot,boardViewState.peers,boardViewState.ids)});box.append(more)}
@@ -625,43 +716,36 @@ function renderBoard(snapshot, peers, ids) {
     }
     const unknown=model.unknown.filter(id=>visibleIds.has(id));if(unknown.length) target.append(el('p','Unsupported task states: '+unknown.map(id=>'#'+id).join(', '),'board-unknown'));
   });
+  refreshTaskDetail();
 }
-const petBaseTitle = typeof document === 'undefined' ? 'agent-hub | Local dashboard' : document.title;
-let petSignature = '', petFirst;
-function reachPetNeed() {
-  if (!snapshotValid || !petFirst) return;
-  const item = petFirst;
-  const row = item.kind === 'review' || item.kind === 'offline' ? taskRows.get(item.id) : item.kind === 'delivery' || item.kind === 'default' ? peerRows.get(item.peer) : item.kind === 'approval' ? document.querySelector('[data-permission-id="'+item.id+'"]') : undefined;
+const attentionBaseTitle = typeof document === 'undefined' ? 'agent-hub | Local dashboard' : document.title;
+let attentionSignature = '', attentionFirst;
+function reachAttention() {
+  if (!snapshotValid || !attentionFirst) return;
+  const item = attentionFirst, view = ['review','offline'].includes(item.kind) ? 'board' : 'agents';
+  switchView(view);
+  const row = ['review','offline'].includes(item.kind) ? taskRows.get(item.id) : item.kind === 'approval' ? [...document.querySelectorAll('[data-permission-id]')].find(row => row.dataset.permissionId === String(item.id)) : undefined;
   if (row) { row.scrollIntoView({block:'center',behavior:'instant'}); row.focus?.(); return; }
   const heading = item.kind === 'approval' ? 'permissions-title' : ['review','offline'].includes(item.kind) ? 'tasks-title' : item.kind === 'budget' ? 'budget-title' : 'peers-title';
   $(heading)?.scrollIntoView({block:'start',behavior:'instant'});
   notice('Attention: '+item.kind+(item.peer?' '+item.peer:'')+(item.id?' '+item.id:''));
 }
-function renderPetAttention(snapshot) {
-  const valid = snapshot && snapshot.pet?.enabled === true && typeof snapshot.pet.character === 'string' && Object.hasOwn(petCharacters,snapshot.pet.character) && snapshot.attention && typeof snapshot.attention === 'object' && !Array.isArray(snapshot.attention);
-  const target=$('pet-container');if(!target)return;
-  const input=snapshot?.attention;
-  const shape=valid && Array.isArray(input.approvals) && Array.isArray(input.defaults) && Array.isArray(input.tasks) && input.peers && typeof input.peers==='object' && !Array.isArray(input.peers) && input.budget && typeof input.budget==='object' && !Array.isArray(input.budget) && typeof input.storageBlocked==='boolean';
-  let value;try{if(shape)value=needs(input,Date.now());}catch{ /* malformed optional attention never breaks the existing dashboard */ }
-  const signature = JSON.stringify(value ? [snapshot.pet.character,snapshot.pet.blink,value] : null);
-  if(signature===petSignature)return;
-  petSignature=signature;petFirst=value?.items[0];
-  target.replaceChildren();target.hidden=!value;
-  const title=value?.act?'('+value.act+') agent-hub':petBaseTitle;if(document.title!==title)document.title=title;
-  if(!value)return;
-  const character=petCharacters[snapshot.pet.character],frame=character.frames.blocks[value.state].full,model=petPixels(frame);
-  const blink = snapshot.pet.blink!==false && value.items.some(item=>item.kind==='approval');
-  const button=el('button',undefined,'pet-control'+(blink?' pet-waiting':''));button.type='button';
-  const label=character.name+': '+value.state+', '+value.act+' action, '+value.watch+' watch';button.setAttribute('aria-label',label);button.addEventListener('click',reachPetNeed);
-  const svg=document.createElementNS('http://www.w3.org/2000/svg','svg');svg.setAttribute('viewBox','0 0 '+model.width+' '+model.height);svg.setAttribute('class','pet-art');svg.setAttribute('aria-hidden','true');
-  const accent=character.accent?.full;
-  const poses=blink?[['pet-open',model],['pet-blink',petPixels(character.frames.blocks.waitingBlink.full)]]:[['pet-open',model]];
-  for(const [cls,pose] of poses){const group=document.createElementNS('http://www.w3.org/2000/svg','g');group.setAttribute('class',cls);
-    for(const [x,y] of pose.pixels){const pixel=document.createElementNS('http://www.w3.org/2000/svg','rect');pixel.setAttribute('x',String(x));pixel.setAttribute('y',String(y));pixel.setAttribute('width','1');pixel.setAttribute('height','1');pixel.setAttribute('class',accent && Math.floor(y/8)===accent.row && Math.floor(x/5)>=accent.start && Math.floor(x/5)<accent.start+accent.length?'pet-pixel pet-accent':'pet-pixel');group.append(pixel);}svg.append(group);}
-  button.append(svg,el('span',value.state+' / '+value.act+' action'+(value.watch?' +'+value.watch+' watch':'')));target.append(button);
+function renderNeedsAttention(snapshot) {
+  const input = snapshot?.attention;
+  const shape = input && typeof input === 'object' && !Array.isArray(input) && Array.isArray(input.approvals) && Array.isArray(input.defaults) && Array.isArray(input.tasks) && input.peers && typeof input.peers==='object' && !Array.isArray(input.peers) && input.budget && typeof input.budget==='object' && !Array.isArray(input.budget) && typeof input.storageBlocked==='boolean';
+  let value;try{if(shape)value=needs(input,Date.now());}catch{ /* malformed optional attention remains unavailable */ }
+  const approvalCount = Array.isArray(snapshot?.permissions) ? snapshot.permissions.filter(permission => permission && (permission.expiresAt === undefined || permission.expiresAt > Date.now())).length : value?.items.filter(item => item.kind === 'approval').length || 0;
+  const signature = JSON.stringify([value || null, approvalCount]);
+  if(signature===attentionSignature)return;
+  attentionSignature=signature;attentionFirst=value?.items[0];
+  const target=$('attention-badge');target.hidden=!value;target.disabled=!value?.items.length;
+  target.textContent=value?'('+value.act+')'+(value.watch?' +'+value.watch+' watch':''):'(0)';
+  target.setAttribute('aria-label',value?'Global attention: '+value.act+' action, '+value.watch+' watch':'Attention unavailable');
+  const approvals=$('agents-approval-count');approvals.textContent=approvalCount?'('+approvalCount+')':'';approvals.hidden=!approvalCount;
+  const title=value?.act?'('+value.act+') agent-hub':attentionBaseTitle;if(document.title!==title)document.title=title;
 }
 function render(snapshot) {
-  renderPetAttention(snapshot);
+  renderNeedsAttention(snapshot);
   const peers = Object.fromEntries(Object.entries(snapshot.status.peers || {}).map(([id, peer]) => [id, {...peer, ...(snapshot.status.roleInfo || {})[id]}])), ids = Object.keys(peers), starts = Array.isArray(snapshot.starts) ? snapshot.starts : [];
   $('peer-count').textContent = ids.length + ' peers';
   syncStarts(snapshot);
@@ -745,7 +829,7 @@ function render(snapshot) {
   if ($('follow').checked) stream.scrollTop = stream.scrollHeight;
   refreshRelativeTimes(document);
   refreshStreamEmpty();
-  syncMutationControls();
+  syncMutationControls(); applyDashboardView();
 }
 async function poll() {
   if (stopped) return;
@@ -767,24 +851,35 @@ async function poll() {
 // busy latch, timed at render from the model's timestamps; expired nodes purge on the next changed render or
 // their own animationend. The projection (phase 4) maps grid coordinates only: x' = (x - y) cos 30, y' =
 // (x + y) sin 30; nodes are laid out upright in local coordinates, so text is never rotated and the DOM
-// order and accessible names do not depend on the projection.
+// focus order for shared visible cards and accessible names do not depend on the projection.
+const OFFICE_SCALE = 12;
 let officeProjection = 'flat';
 let officeLastProjection = '';
+let officeRoomOffset = 0;
 const officeRound = (v) => Math.round(v * 100) / 100;
 function officeIsoLocal(x, y) { return [(x - y) * 0.8660254, (x + y) * 0.5]; }
 function officeProject(x, y) { return officeProjection === 'iso' ? officeIsoLocal(x, y) : [x, y]; }
-function officePlace(node, x, y) { const p = officeProject(x, y); node.style.transform = 'translate(' + p[0] + 'px,' + p[1] + 'px)'; }
+function officePlace(node, x, y, room = false) { const p = officeProject(x, y); if (room) p[1] += officeRoomOffset; node.style.transform = 'translate(' + p[0] + 'px,' + p[1] + 'px)'; }
+function officeOrderNodes(parent, nodes) {
+  for (let index = 0; index < nodes.length; index++) {
+    const node = nodes[index], before = parent.children[index] || null;
+    if (before === node) continue;
+    const active = document.activeElement, restore = active && (active === node || node.contains?.(active));
+    if (typeof parent.moveBefore === 'function') parent.moveBefore(node, before);
+    else { parent.insertBefore(node, before); if (restore) active.focus({ preventScroll: true }); }
+  }
+}
 function officePolygon(points, cls) { return officeNode('polygon', { points: points.map((p) => p.map(officeRound).join(',')).join(' '), class: cls }); }
 function officeTile(w, h, cls) {
-  if (officeProjection !== 'iso') return officeNode('rect', { x: 0, y: 0, width: w, height: h, rx: 1, class: cls });
+  if (officeProjection !== 'iso') return officeNode('rect', { x: 0, y: 0, width: w, height: h, rx: 2 / 3, class: cls });
   return officePolygon([[0, 0], officeIsoLocal(w, 0), officeIsoLocal(w, h), officeIsoLocal(0, h)], cls);
 }
-function officeViewBox(w, h) {
+function officeViewBox(w, h, model) {
   if (officeProjection !== 'iso') return '0 0 ' + w + ' ' + h;
-  const corners = [officeProject(0, 0), officeProject(w, 0), officeProject(0, h), officeProject(w, h)];
+  const corners = model ? [...model.rooms, ...model.desks].flatMap(tile => [officeProject(tile.x, tile.y), officeProject(tile.x + tile.w, tile.y), officeProject(tile.x, tile.y + tile.h), officeProject(tile.x + tile.w, tile.y + tile.h)].map(([x, y]) => [x, y + (model.rooms.includes(tile) ? officeRoomOffset : 0)])) : [officeProject(0, 0), officeProject(w, 0), officeProject(0, h), officeProject(w, h)];
   const xs = corners.map((p) => p[0]), ys = corners.map((p) => p[1]), m = 3;
   const minX = Math.min(...xs), minY = Math.min(...ys);
-  return (minX - m) + ' ' + (minY - m) + ' ' + (Math.max(...xs) - minX + 2 * m) + ' ' + (Math.max(...ys) - minY + 2 * m);
+  return (minX - m) + ' ' + (minY - 6) + ' ' + (Math.max(...xs) - minX + 2 * m) + ' ' + (Math.max(...ys) - minY + 9);
 }
 // A raised hand as outline shapes (palm and fingers), coloured by the desk's condition class.
 function officeHand(x, y) {
@@ -813,29 +908,79 @@ function officeAvatar() {
     officeNode('path', { d: 'M 1.2 4.6 A 1 1 0 0 1 3.2 4.6 Z', class: 'office-avatar' })];
 }
 // The Done shelf: a small cabinet of stacked card rows (flat) or boxes on a slab (iso); the count stays text.
-function officeShelf(iso) {
-  if (!iso) {
-    const nodes = [officeNode('rect', { x: 6.5, y: 4.4, width: 9, height: 10.4, rx: 1, class: 'office-shelf' })];
-    for (const sy of [7.8, 11.2]) nodes.push(officeNode('line', { x1: 6.5, y1: sy, x2: 15.5, y2: sy, class: 'office-divider' }));
-    for (const sy of [5.1, 8.5, 11.9]) for (const sx of [7.2, 11.4]) nodes.push(officeNode('rect', { x: sx, y: sy, width: 3.4, height: 2.1, rx: 0.5, class: 'office-shelf-card' }));
-    return nodes;
-  }
-  const nodes = [officePolygon([officeIsoLocal(6, 3), officeIsoLocal(16, 3), officeIsoLocal(16, 9), officeIsoLocal(6, 9)], 'office-shelf')];
-  for (const [bx, by] of [[7, 4], [11.5, 4], [9.2, 6.2]]) {
-    const s = 2.4, rise = 2.2;
-    const top = [officeIsoLocal(bx, by), officeIsoLocal(bx + s, by), officeIsoLocal(bx + s, by + s), officeIsoLocal(bx, by + s)];
-    const up = top.map(([x, y]) => [x, y - rise]);
-    nodes.push(officePolygon(up, 'office-box-top'), officePolygon([up[3], up[2], top[2], top[3]], 'office-box-left'), officePolygon([up[2], up[1], top[1], top[2]], 'office-box-right'));
+function officeShelf(iso, count) {
+  const shown = Math.min(Math.max(0, count), iso ? 3 : 6);
+  if (!shown) return [];
+  const nodes = [];
+  for (let i = 0; i < shown; i++) {
+    if (!iso) nodes.push(officeNode('rect', { x: 1 + (i % 2) * 10.5, y: 4 + Math.floor(i / 2) * 3, width: 9.5, height: 2.2, rx: 0.5, class: 'office-shelf-card' }));
+    else {
+      const bx = 7 + (i % 2) * 4.5, by = 8 + Math.floor(i / 2) * 5, size = 2.4, rise = 0.8;
+      const top = [officeIsoLocal(bx, by), officeIsoLocal(bx + size, by), officeIsoLocal(bx + size, by + size), officeIsoLocal(bx, by + size)];
+      const up = top.map(([x, y]) => [x, y - rise]);
+      nodes.push(officePolygon(up, 'office-box-top'), officePolygon([up[3], up[2], top[2], top[3]], 'office-box-left'), officePolygon([up[2], up[1], top[1], top[2]], 'office-box-right'));
+    }
   }
   return nodes;
 }
-function officeClip(text, max) { text = String(text); return text.length > max ? text.slice(0, max - 3) + '...' : text; }
+function officeClip(text, max) {
+  text = String(text); max = Math.max(4, Math.floor(max));
+  if (text.length <= max) return text;
+  const cut = max - 3, space = text.lastIndexOf(' ', cut);
+  return text.slice(0, space >= cut - 8 && space >= 3 ? space : cut).trimEnd() + '...';
+}
+let officeClipSerial = 0;
+let officeMeasureContext;
+function officeTextWidth(value, monospace) {
+  if (officeMeasureContext === undefined) {
+    try { officeMeasureContext = document.createElement('canvas').getContext?.('2d') || null; } catch { officeMeasureContext = null; }
+  }
+  if (officeMeasureContext) {
+    officeMeasureContext.font = OFFICE_SCALE + 'px ' + (monospace ? 'ui-monospace,monospace' : 'system-ui,sans-serif');
+    return officeMeasureContext.measureText(value).width;
+  }
+  // Non-browser fixtures or unavailable canvas: conservative glyph widths; clipPath is the hard boundary.
+  return [...value].reduce((width, char) => width + (!/^[ -~]$/.test(char) ? 1 : monospace ? 0.6 : /[MW@#%]/.test(char) ? 0.9 : /[ilI., ']/.test(char) ? 0.3 : 0.55), 0) * OFFICE_SCALE;
+}
+function officeCardLabel(card, width) {
+  const prefix = '#' + card.id, rest = String(card.label).slice(prefix.length);
+  const measure = value => officeTextWidth(prefix, true) + officeTextWidth(value, false);
+  if (measure(rest) <= width) return prefix + rest;
+  const chars = [...rest], suffix = '...';
+  let low = 0, high = chars.length;
+  while (low < high) {
+    const mid = Math.ceil((low + high) / 2);
+    if (measure(chars.slice(0, mid).join('') + suffix) <= width) low = mid; else high = mid - 1;
+  }
+  let clipped = chars.slice(0, low).join(''), space = clipped.lastIndexOf(' ');
+  if (space >= clipped.length - 8 && space > 1) clipped = clipped.slice(0, space);
+  return prefix + clipped.trimEnd() + suffix;
+}
+// Upright chips follow the tile grid; omit any that cannot fit wholly inside its padded footprint.
+function officeTileCards(tile, centerX, startY, lift = 0) {
+  if (officeProjection !== 'iso') return tile.cards;
+  const origin = officeProject(tile.x, tile.y), visible = [];
+  for (let i = 0; i < tile.cards.length; i++) {
+    const card = tile.cards[i], at = officeIsoLocal(centerX, startY + i * (card.h + 0.5) * 2);
+    const left = at[0] - card.w / 2, top = at[1];
+    const corners = [[left, top], [left + card.w, top], [left, top + card.h], [left + card.w, top + card.h]];
+    const fits = corners.every(([x, y]) => {
+      const gx = (x / 0.8660254 + y / 0.5) / 2, gy = (y / 0.5 - x / 0.8660254) / 2;
+      return gx >= 1 && gx <= tile.w - 1 && gy >= 1 && gy <= tile.h - 1;
+    });
+    if (fits) visible.push({ ...card, drawX: origin[0] + left, drawY: origin[1] + top + lift });
+  }
+  return visible;
+}
+function officeRoomCards(room) { return officeTileCards(room, room.w / 2, 8, officeRoomOffset); }
+function officeDeskCards(desk) { return officeTileCards(desk, desk.w / 2 - 0.5, 9); }
+
 function officeNode(tag, attrs, text) { const node = document.createElementNS('http://www.w3.org/2000/svg', tag); for (const key in attrs) node.setAttribute(key, String(attrs[key])); if (text !== undefined) node.textContent = text; return node; }
 function officeKeys(event, activate) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); activate(); } }
 let spotlitRow = null;
 function spotlightRow(row) { if (spotlitRow && spotlitRow !== row) spotlitRow.classList.remove('spotlight'); spotlitRow = row; if (row) row.classList.add('spotlight'); }
-function activateOfficePeer(id) { const row = peerRows.get(id); if (!row) return; spotlightRow(row); row.scrollIntoView({ block: 'nearest' }); }
-function activateOfficeTask(id) { if (!taskRows.has(id)) officeFilter(''); const row = taskRows.get(id); if (!row) return; spotlightRow(row); row.scrollIntoView({ block: 'nearest' }); }
+function activateOfficePeer(id) { switchView('agents'); const row = peerRows.get(id); if (!row) return; spotlightRow(row); row.scrollIntoView({ block: 'nearest' }); row.focus?.(); }
+function activateOfficeTask(id) { setColumnFocus(null); if (!taskRows.has(id)) officeFilter(''); const row = taskRows.get(id); if (!row) return; spotlightRow(row); row.scrollIntoView({ block: 'nearest' }); openTaskDetail(id); }
 function officeFilter(state) { $('task-filter').value = state; $('task-peer-filter').value = ''; $('task-release-filter').value = ''; if (!stopped && snapshotValid && lastSnapshot) render(lastSnapshot); }
 // Fade timing for a transient mark: it holds, then fades over the final second so it is gone at `until`.
 // Applied once at creation; later renders leave the running animation alone.
@@ -853,10 +998,16 @@ function officeFade(node, until, now) {
 function officeCardPaint(node, card) {
   node.setAttribute('class', 'office-card-node office-movable' + (card.waiting ? ' office-waiting-card' : '') + (card.rework ? ' office-rework-card' : '') + (card.checking ? ' office-card-checking' : ''));
   node.setAttribute('aria-label', card.name);
-  const children = [
-    officeNode('rect', { x: 0, y: 0, width: card.w, height: card.h, rx: 0.6, class: 'office-card' }),
-    officeNode('text', { x: 0.8, y: card.h - 0.7, class: 'office-card-text' }, officeClip(card.label, card.w > 12 ? 22 : 10))];
-  if (card.checking) children.push(officeNode('text', { x: card.w - 0.6, y: card.h - 0.7, 'text-anchor': 'end', class: 'office-checking' }, '⟳'));
+  const innerWidth = Math.max(0.1, card.w - 1.6 - (card.checking ? 1 : 0));
+  const label = officeCardLabel(card, innerWidth * OFFICE_SCALE), prefix = '#' + card.id, clipId = node.dataset.officeClipId || (node.dataset.officeClipId = 'office-card-clip-' + (++officeClipSerial));
+  const clip = officeNode('clipPath', { id: clipId, clipPathUnits: 'userSpaceOnUse' });
+  clip.append(officeNode('rect', { x: 0.8, y: 0, width: innerWidth, height: card.h }));
+  const text = officeNode('text', { x: 0.8, y: card.h / 2 + 0.33, class: 'office-card-text', 'clip-path': 'url(#' + clipId + ')' });
+  text.append(officeNode('tspan', { class: 'office-card-id' }, prefix), officeNode('tspan', {}, label.slice(prefix.length)));
+  const children = [officeNode('title', {}, card.label), clip,
+    officeNode('rect', { x: 0, y: 0, width: card.w, height: card.h, rx: 0.5, class: 'office-card' }),
+    officeNode('rect', { x: 0.15, y: 0.25, width: 0.2, height: Math.max(0.4, card.h - 0.5), rx: 0.1, class: 'office-card-accent' }), text];
+  if (card.checking) children.push(officeNode('text', { x: card.w - 0.6, y: card.h / 2 + 0.33, 'text-anchor': 'end', class: 'office-checking' }, '⟳'));
   node.replaceChildren(...children);
 }
 function officeDeskPaint(node, desk) {
@@ -905,32 +1056,37 @@ function officeDeskPaint(node, desk) {
   if (desk.tray.needsReview) tray.push(desk.tray.needsReview + ' to review');
   if (desk.tray.heldBy) tray.push('held by ' + desk.tray.heldBy);
   if (tray.length) children.push(officeNode('text', { x: 1, y: line, class: 'office-meta' }, officeClip(tray.join(' / '), 38)));
-  if (desk.extraCards > 0) children.push(officeNode('text', { x: 1, y: desk.h - 0.4, class: 'office-meta' }, '+' + desk.extraCards + ' more'));
   node.replaceChildren(...children);
 }
+// More is a sibling of the desk button, so assistive technology exposes both targets.
+function officeDeskMorePaint(node, desk) {
+  officePlace(node, desk.x, desk.y);
+  node.setAttribute('class', 'office-desk-more');
+  node.setAttribute('aria-label', 'Show ' + desk.extraCards + ' more tasks owned by ' + desk.id);
+  const iso = officeProjection === 'iso', at = iso ? officeIsoLocal(desk.w / 2, desk.h + 1) : [1, desk.h - 1];
+  if (iso) at[1] += 4.1; // below the nameplate and its upright desk name, clear of the front legs
+  node.replaceChildren(officeNode('text', { x: at[0], y: at[1], 'text-anchor': iso ? 'middle' : 'start', class: 'office-more' }, '+' + desk.extraCards + ' more'));
+}
+function officeRoomHeader(node, room) {
+  officePlace(node, room.x, room.y, true);
+  const iso = officeProjection === 'iso', y = iso ? -1.2 : 2.2, right = iso ? 12 : room.w - 1;
+  node.setAttribute('class', 'office-room-header');
+  node.replaceChildren(...(iso ? [officeNode('rect', { x: -0.5, y: -2.55, width: 12.5, height: 2, rx: 0.5, class: 'office-header-surface' })] : []), officeNode('text', { x: iso ? 0 : 1, y, class: 'office-room-title' }, room.label),
+    officeNode('rect', { x: right - 3, y: y - 1.35, width: 3, height: 2, rx: 0.5, class: 'office-count-pill' }),
+    officeNode('text', { x: right - 1.5, y, 'text-anchor': 'middle', class: 'office-room-count' }, String(room.count)));
+}
 function officeRoomPaint(node, room) {
   node.setAttribute('class', 'office-roombox office-roombox-' + room.id);
-  officePlace(node, room.x, room.y);
-  const iso = officeProjection === 'iso';
-  const children = [officeTile(room.w, room.h, 'office-room')];
-  let moreAt = { x: 1, y: room.h - 1, anchor: 'start' };
-  if (iso) {
-    // A faint wireframe floor box: the floor tile and the two back vertical edges; the label sits at the base.
-    const B = officeIsoLocal(room.w, 0), D = officeIsoLocal(0, room.h), C = officeIsoLocal(room.w, room.h);
-    for (const p of [B, D]) children.push(officeNode('line', { x1: p[0], y1: p[1], x2: p[0], y2: p[1] - 6, class: 'office-room-wire' }));
-    children.push(officeNode('text', { x: C[0], y: C[1] + 2.4, 'text-anchor': 'middle', class: 'office-room-title' }, room.label));
-    children.push(officeNode('text', { x: C[0], y: C[1] + 3.8, 'text-anchor': 'middle', class: 'office-room-count' }, String(room.count)));
-    moreAt = { x: D[0], y: D[1] + 2.4, anchor: 'middle' };
-  } else {
-    if (room.x > 0) children.push(officeNode('line', { x1: -1, y1: 0.6, x2: -1, y2: room.h - 0.6, class: 'office-divider' }));
-    children.push(officeNode('text', { x: 1, y: 2.2, class: 'office-room-title' }, room.label));
-    children.push(officeNode('text', { x: room.w - 1, y: 2.2, 'text-anchor': 'end', class: 'office-room-count' }, String(room.count)));
-  }
-  if (room.id === 'done') children.push(...officeShelf(iso));
+  officePlace(node, room.x, room.y, true);
+  const iso = officeProjection === 'iso', children = [officeTile(room.w, room.h, 'office-room')];
+  const emptyAt = iso ? officeIsoLocal(room.w / 2, 10) : [1, 5];
+  if (room.id === 'done') children.push(...officeShelf(iso, room.count));
+  if ((room.id === 'done' ? room.count : room.cards.length) === 0) children.push(officeNode('text', { x: emptyAt[0], y: emptyAt[1], 'text-anchor': iso ? 'middle' : 'start', class: 'office-empty' }, 'No tasks'));
   node.replaceChildren(...children);
   if (room.overflow > 0 && room.filterState) {
+    const at = iso ? officeIsoLocal(room.w / 2, room.h - 1.5) : [1, room.h - 1];
     const more = officeNode('g', { tabindex: '0', role: 'button', 'aria-label': 'Show ' + room.overflow + ' more ' + room.filterState.replaceAll('_', ' ') + ' tasks in the task list' });
-    more.append(officeNode('text', { x: moreAt.x, y: moreAt.y, 'text-anchor': moreAt.anchor, class: 'office-more' }, '+' + room.overflow + ' more'));
+    more.append(officeNode('text', { x: at[0], y: at[1], 'text-anchor': iso ? 'middle' : 'start', class: 'office-more' }, '+' + room.overflow + ' more'));
     const open = () => officeFilter(room.filterState);
     more.addEventListener('click', open);
     more.addEventListener('keydown', (event) => officeKeys(event, open));
@@ -942,7 +1098,7 @@ function officeEnsure(target) {
   if (officeScene) return officeScene;
   const svg = officeNode('svg', { class: 'office-scene', role: 'group', 'aria-label': 'Office: desks, rooms and task cards' });
   const layers = {};
-  for (const name of ['rooms', 'desks', 'links', 'marks', 'arcs', 'cards']) { const layer = officeNode('g', { class: 'office-layer office-layer-' + name }); svg.append(layer); layers[name] = layer; }
+  for (const name of ['rooms', 'desks', 'links', 'marks', 'arcs', 'cards', 'cardFocus', 'headers']) { const layer = officeNode('g', { class: 'office-layer office-layer-' + name }); svg.append(layer); layers[name] = layer; }
   officeScene = { svg, layers, els: new Map(), leaving: new Map(), settled: true };
   target.replaceChildren(svg);
   return officeScene;
@@ -967,7 +1123,12 @@ function officeLeave(scene, key) {
 }
 function drawOffice(target, model) {
   const scene = officeEnsure(target), els = scene.els, now = Date.now();
-  scene.svg.setAttribute('viewBox', officeViewBox(model.width, model.height));
+  // Separate upright desk labels and room headers by one projected unit, including the desk legs.
+  officeRoomOffset = officeProjection === 'iso' && model.desks.length
+    ? Math.max(0, Math.max(...model.desks.map(desk => officeProject(desk.x + desk.w, desk.y + desk.h)[1] + 2.4)) + 1 - Math.min(...model.rooms.map(room => officeProject(room.x, room.y)[1] - 2.55))) : 0;
+  const viewBox = officeViewBox(model.width, model.height, model);
+  scene.svg.setAttribute('viewBox', viewBox);
+  scene.svg.setAttribute('width', Number(viewBox.split(' ')[2]) * OFFICE_SCALE);
   const switched = officeLastProjection !== officeProjection; // a view switch jumps, never animates
   officeLastProjection = officeProjection;
   scene.settled = model.settle || switched;
@@ -976,7 +1137,7 @@ function drawOffice(target, model) {
   const seen = new Set();
   const keep = (key, sig, layer, paint, appear) => {
     seen.add(key);
-    sig = officeProjection + '|' + sig; // a projection switch repaints every node in place
+    sig = officeProjection + '|' + officeRoomOffset + '|' + sig; // a projection switch repaints every node in place
     const entry = els.get(key);
     if (entry && entry.sig === sig) return { node: entry.node, fresh: false };
     const node = entry ? entry.node : officeNode('g', {});
@@ -989,33 +1150,60 @@ function drawOffice(target, model) {
     }
     return { node, fresh: true };
   };
-  for (const room of model.rooms) {
-    keep('room:' + room.id, JSON.stringify({ ...room, cards: undefined }), scene.layers.rooms, (node) => officeRoomPaint(node, room), false);
+  const roomCards = new Map(model.rooms.map(room => [room.id, officeRoomCards(room)]));
+  for (const original of model.rooms) {
+    const visible = roomCards.get(original.id), room = { ...original, cards: visible, overflow: original.overflow + original.cards.length - visible.length };
+    keep('room:' + room.id, JSON.stringify({ ...room, cards: undefined, visibleCount: room.cards.length }), scene.layers.rooms, (node) => officeRoomPaint(node, room), false);
   }
-  for (const desk of model.desks) {
-    const { node, fresh } = keep('desk:' + desk.id, JSON.stringify({ ...desk, cards: undefined }), scene.layers.desks, (n) => officeDeskPaint(n, desk));
+  const deskCards = new Map(model.desks.map(desk => [desk.id, officeDeskCards(desk)]));
+  for (const original of model.desks) {
+    const visible = deskCards.get(original.id), desk = { ...original, cards: visible, extraCards: original.extraCards + original.cards.length - visible.length };
+    const { node, fresh } = keep('desk:' + desk.id, JSON.stringify({ ...desk, cards: undefined, visibleCount: desk.cards.length }), scene.layers.desks, (n) => officeDeskPaint(n, desk));
     if (fresh && !node.getAttribute('tabindex')) {
       node.setAttribute('tabindex', '0'); node.setAttribute('role', 'button');
       const open = () => activateOfficePeer(desk.id);
       node.addEventListener('click', open);
       node.addEventListener('keydown', (event) => officeKeys(event, open));
     }
+    if (desk.extraCards > 0) {
+      const { node: more, fresh: newMore } = keep('desk-more:' + desk.id, JSON.stringify([desk.id, desk.x, desk.y, desk.w, desk.h, desk.extraCards]), scene.layers.marks, n => officeDeskMorePaint(n, desk), false);
+      if (newMore && !more.getAttribute('tabindex')) {
+        more.setAttribute('tabindex', '0'); more.setAttribute('role', 'button');
+        const open = event => { event.stopPropagation(); setColumnFocus(null); officeFilter('work'); $('task-peer-filter').value = desk.id; if (!stopped && snapshotValid && lastSnapshot) render(lastSnapshot); switchView('board'); };
+        more.addEventListener('click', open);
+        more.addEventListener('keydown', event => officeKeys(event, () => open(event)));
+      }
+    }
   }
   const cards = [];
-  for (const desk of model.desks) cards.push(...desk.cards);
-  for (const room of model.rooms) cards.push(...room.cards);
+  for (const desk of model.desks) cards.push(...deskCards.get(desk.id));
+  for (const room of model.rooms) cards.push(...roomCards.get(room.id));
+  const focusCards = [...cards]; // Model order stays stable while visual depth changes.
+  if (officeProjection === 'iso') cards.sort((a, b) => (a.drawY ?? officeProject(a.x, a.y)[1]) - (b.drawY ?? officeProject(b.x, b.y)[1]) || a.id - b.id);
+  const placeCard = (node, card) => {
+    const p = card.drawX === undefined ? officeProject(card.x, card.y) : [card.drawX, card.drawY], transform = 'translate(' + p[0] + 'px,' + p[1] + 'px)';
+    if (node.style.transform !== transform) node.style.transform = transform; // the only animated property
+  };
+  const paintNodes = [], focusNodes = [];
   for (const card of cards) {
-    const key = 'card:' + card.id;
-    const { node, fresh } = keep(key, JSON.stringify([card.label, card.name, card.waiting, card.rework, card.checking, card.w, card.h]), scene.layers.cards, (n) => officeCardPaint(n, card));
+    const { node } = keep('paint:card:' + card.id, JSON.stringify([card.label, card.name, card.waiting, card.rework, card.checking, card.w, card.h]), scene.layers.cards, n => { officeCardPaint(n, card); n.setAttribute('aria-hidden', 'true'); });
+    paintNodes.push(node); placeCard(node, card);
+  }
+  for (const card of focusCards) {
+    const { node, fresh } = keep('card:' + card.id, JSON.stringify([card.label, card.name, card.w, card.h]), scene.layers.cardFocus, n => {
+      n.setAttribute('class', 'office-card-focus office-movable'); n.setAttribute('aria-label', card.name);
+      n.replaceChildren(officeNode('title', {}, card.label), officeNode('rect', { x: 0, y: 0, width: card.w, height: card.h, rx: 0.5, class: 'office-card office-card-hit' }));
+    });
     if (fresh && !node.getAttribute('tabindex')) {
       node.setAttribute('tabindex', '0'); node.setAttribute('role', 'button');
       const open = () => activateOfficeTask(card.id);
       node.addEventListener('click', open);
       node.addEventListener('keydown', (event) => officeKeys(event, open));
     }
-    const p = officeProject(card.x, card.y), transform = 'translate(' + p[0] + 'px,' + p[1] + 'px)';
-    if (node.style.transform !== transform) node.style.transform = transform; // the only animated property
+    focusNodes.push(node); placeCard(node, card);
   }
+  officeOrderNodes(scene.layers.cards, paintNodes); officeOrderNodes(scene.layers.cardFocus, focusNodes);
+  for (const room of model.rooms) keep('header:' + room.id, JSON.stringify([room.x, room.y, room.w, room.count, room.label]), scene.layers.headers, node => officeRoomHeader(node, room), false);
   if (model.extraPeers > 0) {
     keep('extra:peers', String(model.extraPeers) + ':' + model.width, scene.layers.marks,
       (node) => { officePlace(node, model.width, 0); node.replaceChildren(officeNode('text', { x: 0, y: 1.8, 'text-anchor': 'end', class: 'office-meta' }, '+' + model.extraPeers + ' peers')); }, false);
@@ -1086,9 +1274,9 @@ function renderOffice(snapshot) {
   section.hidden = view === 'off';
   if (view === 'off') {
     if (signatures.has('office')) { signatures.delete('office'); $('office').replaceChildren(); officeScene = null; }
-    officePrev = null; officeDesks.clear(); officeCards.clear(); return;
+    officePrev = null; officeDesks.clear(); officeCards.clear(); $('office').replaceChildren(el('p','Office is off. Choose Flat or Isometric above.','empty')); return;
   }
-  const cols = (section.clientWidth || 0) >= 1000 ? 4 : (section.clientWidth || 0) >= 700 ? 2 : 1;
+  const cols = (section.clientWidth || 0) >= 1000 && view !== 'isometric' ? 4 : (section.clientWidth || 0) >= 700 ? 2 : 1;
   const model = officeModel(snapshot, officePrev, { cols, now: Date.now() });
   officePrev = model;
   const signature = JSON.stringify([view, cols, model]);
@@ -1306,6 +1494,7 @@ $('task-filter').addEventListener('change', () => { if (!stopped && snapshotVali
 window.addEventListener('resize', () => { if (!stopped && officeView.get() !== 'off' && snapshotValid && lastSnapshot) renderOffice(lastSnapshot); });
 $('send').addEventListener('submit', async (event) => { event.preventDefault(); const generation = viewGeneration, body = $('message').value.trim(); if (!body) return; const to = $('recipient').value, payload = {action:'send', body}; if (to) payload.to = [to]; if (await action(payload, event.submitter) && generation === viewGeneration) $('message').value = ''; });
 $('propose').addEventListener('submit', async (event) => { event.preventDefault(); const generation = viewGeneration, title = $('title').value.trim(); if (!title) return; const payload = {action:'propose', title, class:$('class').value}; if ($('detail').value.trim()) payload.detail = $('detail').value.trim(); if ($('owner').value) payload.owner = $('owner').value; if ($('backlog-proposal').checked) { if(boardViewState?.snapshot.boardCapabilities?.backlog!==true || !sameBoardContext(boardContext())) return notice('Backlog is unavailable for this project snapshot.',true);payload.backlog=true; } if (await action(payload, event.submitter) && generation === viewGeneration) { $('title').value = ''; $('detail').value = ''; } });
+initializeDashboardNavigation();
 (async () => { try { if (ticket) await post('/session', {ticket}); ticket = ''; renderStreamChips(); await refreshProjects(); await poll(); } catch (error) { ticket = ''; if (!stopped) { stopped = true; notice('Could not start session: ' + error.message + ' Run ahub ui to reopen.', true); $('connection').textContent = 'Session unavailable'; } } })();
 </script>
 </body>