@staix/agent-hub 0.12.22 → 0.12.24

package/src/ui/index.html

@@ -15,17 +15,32 @@ const dashboardTheme = (() => {
 </script>
 <style>
 :root{color-scheme:light;--waiting:#795399;--paper:#f5f4ef;--ink:#252b29;--muted:#68716c;--line:#d9ddd5;--panel:#ffffff;--panel-soft:#f4f6f2;--control:#ffffff;--control-border:#bbc4bb;--hover:#f0f4ef;--green:#245f45;--green-soft:#e4efe9;--amber:#8a5b12;--amber-soft:#f8eed6;--blue:#245a93;--blue-soft:#e6eef8;--red:#a2392f;--red-soft:#f6e5e2;--dot:#98a29b;--dot-ok:#2f7a52;--dot-warn:#b07a16;--dot-err:#b24539;--focus:#245f45;--on-accent:#ffffff}:root[data-theme="dark"]{color-scheme:dark;--waiting:#b9a0df;--paper:#161a18;--ink:#e5e8e3;--muted:#97a099;--line:#2c342f;--panel:#1d2320;--panel-soft:#17201b;--control:#1d2320;--control-border:#3a443d;--hover:#263029;--green:#6fc2a0;--green-soft:#1e3a2e;--amber:#d9a64f;--amber-soft:#3a2f14;--blue:#8ab8ea;--blue-soft:#1d2f44;--red:#e28b80;--red-soft:#3d2320;--dot:#5b6660;--dot-ok:#4cb77f;--dot-warn:#d9a64f;--dot-err:#e28b80;--focus:#6fc2a0;--on-accent:#161a18}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]){color-scheme:dark;--waiting:#b9a0df;--paper:#161a18;--ink:#e5e8e3;--muted:#97a099;--line:#2c342f;--panel:#1d2320;--panel-soft:#17201b;--control:#1d2320;--control-border:#3a443d;--hover:#263029;--green:#6fc2a0;--green-soft:#1e3a2e;--amber:#d9a64f;--amber-soft:#3a2f14;--blue:#8ab8ea;--blue-soft:#1d2f44;--red:#e28b80;--red-soft:#3d2320;--dot:#5b6660;--dot-ok:#4cb77f;--dot-warn:#d9a64f;--dot-err:#e28b80;--focus:#6fc2a0;--on-accent:#161a18}}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,sans-serif}header,main{max-width:1440px;margin:auto;padding:24px 32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}h1{font-size:24px;letter-spacing:-1px;margin:0}h1 span{font-weight:400;color:var(--muted)}h2{font-size:15px;margin:0}p{margin:6px 0}.eyebrow{overflow-wrap:anywhere;font-size:12px;color:var(--muted)}.eyebrow{letter-spacing:1.5px;text-transform:uppercase}.meta{overflow-wrap:anywhere;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.connection{font-size:12px;color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}.stack{display:flex;flex-direction:column;gap:24px;min-width:0}section{border:1px solid var(--line);background:var(--panel);border-radius:8px;overflow:hidden}.section-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);gap:12px}.section-head .filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.content{padding:16px 18px}.empty{color:var(--muted);padding:20px 18px}.row{padding:14px 18px;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.peername{display:flex;align-items:center;gap:8px;min-width:0}.label{font-weight:600;overflow-wrap:anywhere}.badge{display:inline-block;font:11px ui-monospace,monospace;padding:2px 7px;background:var(--panel-soft);color:var(--muted);border-radius:4px;white-space:nowrap}.badge.ok{background:var(--green-soft);color:var(--green)}.badge.warn{color:var(--amber);background:var(--amber-soft)}.badge.info{color:var(--blue);background:var(--blue-soft)}.badge.err{color:var(--red);background:var(--red-soft)}.dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--dot)}.dot.ok{background:var(--dot-ok)}.dot.warn{background:var(--dot-warn)}.dot.err{background:var(--dot-err)}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{background:var(--control);color:var(--muted);border:1px solid var(--control-border);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;line-height:1.2}.chip:hover{background:var(--hover)}.chip[aria-pressed="true"]{background:var(--green);color:var(--on-accent);border-color:var(--green);font-weight:600}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}button,input,select,textarea{font:inherit}button{background:var(--control);color:var(--ink);border:1px solid var(--control-border);border-radius:5px;padding:6px 10px;cursor:pointer}button:hover{background:var(--hover)}button.primary{background:var(--green);color:var(--on-accent);border-color:var(--green)}button.danger{color:var(--red)}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}input,select,textarea{width:100%;border:1px solid var(--control-border);border-radius:5px;padding:8px;background:var(--control);color:var(--ink)}input[type="checkbox"]{width:auto;margin-right:6px}textarea{resize:vertical;min-height:78px}label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}form .field{margin-bottom:12px}.actions select{width:auto;max-width:220px}.section-head .filters select{width:auto;max-width:220px}.body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:7px}.stream{height:360px;overflow:auto}.event{padding:12px 18px;border-bottom:1px solid var(--line)}.event[hidden]{display:none}.event .body{font:13px/1.55 ui-monospace,monospace}.notice{grid-column:1/-1;margin:0;border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:var(--panel);overflow-wrap:anywhere}.notice.error{color:var(--red);border-color:var(--red)}.notice:empty{display:none}progress{width:100%;height:8px;accent-color:var(--green);display:block;margin:8px 0}progress.warn{accent-color:var(--amber)}progress.warn::-webkit-progress-value{background:var(--amber)}progress.critical{accent-color:var(--red)}progress.critical::-webkit-progress-value{background:var(--red)}progress::-moz-progress-bar{background:var(--green)}progress.warn::-moz-progress-bar{background:var(--amber)}progress.critical::-moz-progress-bar{background:var(--red)}.budget-window+.budget-window{margin-top:14px}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}details summary{cursor:pointer;padding:14px 18px;color:var(--green);font-weight:600}details form{padding:0 18px 18px}.task-list{max-height:460px;overflow:auto}footer{max-width:1440px;margin:auto;padding:0 32px 24px;color:var(--muted);font-size:12px}@media(max-width:900px){main{grid-template-columns:1fr}.stack{gap:18px}header,main{padding:18px}.stream{height:300px}footer{padding:0 18px 18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
-.task-progress{padding:12px 18px;border-bottom:1px solid var(--line)}.task-progress svg{display:block;width:100%;height:12px;margin:8px 0}.progress-proposed{fill:var(--dot)}.progress-unknown{fill:var(--dot)}.progress-waiting{fill:var(--waiting)}.progress-in_progress{fill:var(--blue)}.progress-in_review{fill:var(--amber)}.progress-changes_requested{fill:var(--red)}.progress-approved{fill:var(--green)}.task-stage{font:12px ui-monospace,monospace;margin:8px 0;color:var(--muted)}.task-stage .reached{color:var(--green)}.task-stage.changes{color:var(--red)}.theme-choice{width:auto}
+.task-progress{padding:12px 18px;border-bottom:1px solid var(--line)}.task-progress svg{display:block;width:100%;height:12px;margin:8px 0}.progress-proposed{fill:var(--dot)}.progress-unknown{fill:var(--dot)}.progress-waiting{fill:var(--waiting)}.progress-in_progress{fill:var(--blue)}.progress-in_review{fill:var(--amber)}.progress-changes_requested{fill:var(--red)}.progress-approved{fill:var(--green)}.task-stage{font:12px ui-monospace,monospace;margin:8px 0;color:var(--muted)}.task-stage .reached{color:var(--green)}.task-stage.changes{color:var(--red)}.theme-choice{width:auto}.actions input[type="text"]{width:auto;flex:1 1 160px;max-width:320px}details.settings-group>summary{padding:12px 18px;cursor:pointer;border-bottom:1px solid var(--line);font-weight:600}details.settings-group:last-child:not([open])>summary{border-bottom:0}.preview{margin-top:8px;padding:8px 10px;background:var(--panel-soft);border-radius:5px;font:12px ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.preview:empty{display:none}.memory-controls{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}.memory-controls input,.memory-controls select{width:auto;flex:1 1 130px}.memory-row{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 18px;background:var(--panel)}.memory-row[aria-pressed="true"]{background:var(--green-soft)}.memory-graph svg{display:block;width:100%;height:320px;background:var(--panel-soft)}.medge{stroke:var(--dot);stroke-width:1.5}.medge.rules_out{stroke:var(--red)}.medge.supersedes{stroke-dasharray:4 3}.medge.suggested{stroke-dasharray:2 4;opacity:.75}.medge.contradicts{stroke:var(--amber)}.mnode{cursor:pointer}.mnode circle{fill:var(--dot);stroke:var(--panel);stroke-width:2}.mnode.memory circle{fill:var(--blue)}.mnode.fail circle{fill:var(--red)}.mnode.decision circle{fill:var(--green)}.mnode.contract circle{fill:var(--amber)}.mnode.selected circle{stroke:var(--focus);stroke-width:3}.mnode:focus-visible circle{stroke:var(--focus);stroke-width:4}.mnode text{font:11px system-ui,sans-serif;fill:var(--ink)}.memory-edges{margin:0;padding:8px 18px 12px 34px;font:12px ui-monospace,monospace;color:var(--muted);max-height:160px;overflow:auto}
+/* 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}
+@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}}
 </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></header>
+<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>
 <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>
 <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 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="proposed">Proposed</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 id="tasks" class="task-list"></div><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><button class="primary" data-mutation="project" type="submit">Propose task</button></form></details></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>
 </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>
@@ -39,7 +54,17 @@ const dashboardTheme = (() => {
 <script>
 'use strict';
 /* TASK_PROGRESS_MODEL */
+/* PEER_START_RETRY_MS */
+/* BOARD_MODEL */
+/* PET_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 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'; });
 let ticket = location.hash.slice(1);
 history.replaceState(null, '', location.pathname);
 const $ = (id) => document.getElementById(id);
@@ -47,8 +72,11 @@ const el = (tag, text, cls) => { const node = document.createElement(tag); if (t
 let stopped = false, cursor = 0, timer, projectsTimer, eventCount = 0;
 let managerMode = false, projectList = [], selectedProjectId = '', selectedInstanceId = '', snapshotValid = false, viewGeneration = 0, projectRequest = 0;
 let lastSnapshot = null;
+let officePrev = null;
+const peerRows = new Map(), taskRows = new Map(), officeDesks = new Map(), officeCards = new Map();
 const drafts = new Map();
 const pendingButtons = new WeakSet();
+const pendingStarts = new Map();
 let draftChoicesPending = false;
 const signatures = new Map();
 const time = (value) => value ? new Date(value).toLocaleString() : 'unknown';
@@ -72,22 +100,48 @@ async function post(path, body) {
   const response = await fetch(path, {method:'POST', credentials:'same-origin', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)});
   if (response.status === 401) { expire(); throw new Error('Run ahub ui to start a new session.'); }
   const result = await response.json();
+  if (result.unconfirmed === true) return result;
   if (!response.ok || result.ok === false) throw new Error(result.error || 'Request failed (' + response.status + ').');
   return result;
 }
 function canMutate() { return !managerMode || snapshotValid; }
 function context() { return { projectId: selectedProjectId, instanceId: selectedInstanceId, generation: viewGeneration }; }
+function startKey(peer, projectId = selectedProjectId, instanceId = selectedInstanceId) { return JSON.stringify([projectId, instanceId, peer]); }
+function clearPendingStart(key) { const pending = pendingStarts.get(key); if (pending) { clearTimeout(pending.timer); pendingStarts.delete(key); } }
+function redrawStartControls() { if (stopped) return; syncMutationControls(); if (snapshotValid && lastSnapshot) render(lastSnapshot); }
 async function action(payload, button, managerAction = false) {
   if (stopped) return false;
   if (!managerAction && !canMutate()) { notice('Wait for a current project snapshot before changing it.', true); return false; }
   const captured = context();
+  const key = payload.action === 'start_peer' ? startKey(payload.peer, captured.projectId, captured.instanceId) : undefined;
+  if (key && pendingStarts.has(key)) return false;
+  const pending = key ? {phase:'pending', text:'Starting ' + payload.peer + '. Waiting for the hub result.'} : undefined;
+  if (key) pendingStarts.set(key, pending);
   if (managerMode && !managerAction) payload = {...payload, projectId: captured.projectId, instanceId: captured.instanceId};
   if (button) { pendingButtons.add(button); button.disabled = true; }
-  try { const result = await post('/action', payload); if (!managerMode || captured.generation === viewGeneration) notice(result.text || 'Action accepted.'); return true; }
-  catch (error) { if (!stopped && (!managerMode || captured.generation === viewGeneration)) notice(error.message, true); return false; }
-  finally { if (button) { pendingButtons.delete(button); if (!stopped) button.disabled = !managerAction && managerMode && !snapshotValid; } }
+  if (key) redrawStartControls();
+  try {
+    const result = await post('/action', payload);
+    if (result.unconfirmed === true) {
+      if (key && pendingStarts.get(key) === pending) {
+        if (managerMode) {
+          pending.phase = 'unconfirmed'; pending.retryAt = Date.now() + PEER_START_RETRY_MS;
+          pending.text = (result.text || 'Start result is unconfirmed. Check the Peers panel before retrying; the hub may still be starting the peer.') + ' Retry becomes available ' + Math.ceil(PEER_START_RETRY_MS / 1000) + ' seconds after this unconfirmed result unless the peer attaches sooner.';
+          pending.timer = setTimeout(() => { if (pendingStarts.get(key) === pending) { clearPendingStart(key); redrawStartControls(); } }, PEER_START_RETRY_MS);
+        } else clearPendingStart(key);
+      }
+      if (!managerMode || captured.generation === viewGeneration) notice(result.text || 'Start result is unconfirmed. Check the Peers panel before retrying; the hub may still be starting the peer.');
+      return false;
+    }
+    if (key && pendingStarts.get(key) === pending) clearPendingStart(key);
+    if (!managerMode || captured.generation === viewGeneration) notice(result.text || 'Action accepted.');
+    if ((payload.action === 'sdlc_queue' || payload.action === 'sdlc_release') && (stopped || captured.generation !== viewGeneration || captured.projectId !== selectedProjectId || captured.instanceId !== selectedInstanceId)) return false;
+    return (payload.action === 'sdlc_queue' || payload.action === 'sdlc_release') ? result.report : true;
+  }
+  catch (error) { if (key && pendingStarts.get(key) === pending) clearPendingStart(key); if (!stopped && (!managerMode || captured.generation === viewGeneration)) notice(error.message, true); return false; }
+  finally { if (button) { pendingButtons.delete(button); if (!stopped) button.disabled = Boolean(key && pendingStarts.has(key)) || (!managerAction && managerMode && !snapshotValid); } if (key) redrawStartControls(); }
 }
-function button(text, payload, cls, managerAction = false) { const node = el('button', text, cls); node.type = 'button'; node.dataset.mutation = managerAction ? 'manager' : 'project'; node.disabled = !managerAction && managerMode && !snapshotValid; node.addEventListener('click', () => void action(payload, node, managerAction)); return node; }
+function button(text, payload, cls, managerAction = false) { const node = el('button', text, cls); node.type = 'button'; node.dataset.mutation = managerAction ? 'manager' : 'project'; if (payload.action === 'start_peer') node.dataset.startKey = startKey(payload.peer); node.disabled = Boolean(node.dataset.startKey && pendingStarts.has(node.dataset.startKey)) || (!managerAction && managerMode && !snapshotValid); node.addEventListener('click', () => void action(payload, node, managerAction)); return node; }
 function update(id, data, render) { const signature = JSON.stringify(data); if (signatures.get(id) === signature) return; signatures.set(id, signature); const target = $(id); target.replaceChildren(); render(target); }
 function empty(target, text) { target.append(el('p', text, 'empty')); }
 function count(value) { return Array.isArray(value) ? value.length : value && typeof value === 'object' ? Object.keys(value).length : value; }
@@ -96,22 +150,35 @@ function saveDraft() {
   if (!managerMode || !selectedProjectId) return;
   const previous = drafts.get(selectedProjectId) || {};
   drafts.set(selectedProjectId, {message:$('message').value, recipient:draftChoicesPending ? previous.recipient || '' : $('recipient').value,
-    title:$('title').value, detail:$('detail').value, class:$('class').value, owner:draftChoicesPending ? previous.owner || '' : $('owner').value});
+    ...($('backlog-proposal')?.checked ? {backlog:true} : {}), title:$('title').value, detail:$('detail').value, class:$('class').value, owner:draftChoicesPending ? previous.owner || '' : $('owner').value});
 }
 function restoreDraft(choices = false) {
   const draft = drafts.get(selectedProjectId) || {};
+  const staged=$('backlog-proposal'); if(staged)staged.checked=draft.backlog===true;
   if (choices) {
     for (const id of ['recipient','owner']) $(id).value = Array.from($(id).options).some((o) => o.value === draft[id]) ? draft[id] : '';
   } else { $('message').value = draft.message || ''; $('title').value = draft.title || ''; $('detail').value = draft.detail || ''; $('class').value = draft.class || 'implement'; }
 }
-function syncMutationControls() { document.querySelectorAll('button[data-mutation="project"]').forEach((b) => { b.disabled = pendingButtons.has(b) || (managerMode && !snapshotValid); }); }
+function syncMutationControls() { document.querySelectorAll('button[data-mutation="project"]').forEach((b) => { b.disabled = pendingButtons.has(b) || Boolean(b.dataset.startKey && pendingStarts.has(b.dataset.startKey)) || (managerMode && !snapshotValid); }); }
 function resetView(id, instance) {
   saveDraft();
   selectedProjectId = id || ''; selectedInstanceId = instance || ''; snapshotValid = false; cursor = 0; eventCount = 0; viewGeneration++;
+  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;
   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 = '';
-  for (const [id, text] of [['peers','No project selected.'],['tasks','No project selected.'],['task-progress','No project selected.'],['permissions','No project selected.'],['budget','No project selected.']]) { $(id).replaceChildren(); empty($(id), text); }
+  if(typeof loadedPlanningDates!=='undefined')loadedPlanningDates.clear();
+  if(typeof planningEdit!=='undefined')planningEdit=null;if(typeof releaseEdit!=='undefined')releaseEdit=null; if (typeof boardViewState !== 'undefined') boardViewState=null; if (typeof showAllDone !== 'undefined') showAllDone=false;
+  const legend = $('task-legend'); if (legend) legend.replaceChildren(); const filter = $('task-peer-filter'); if (filter) filter.value = '';
+  $('split-titles').value='';$('split-reason').value='';$('split-sequential').checked=false;
+  $('release-name').value='';$('release-goal').value='';$('release-order').value='0';
+  $('delivery-report').textContent = ''; $('delivery-repo').value = ''; $('delivery-live').value = '';
+  for (const [id, text] of [['memory-list','No project selected.'],['memory-graph',''],['memory-detail',''],['peers','No project selected.'],['tasks','No project selected.'],['task-progress','No project selected.'],['permissions','No project selected.'],['budget','No project selected.'],['settings','No project selected.']]) { $(id).replaceChildren(); if (text) empty($(id), text); }
+  $('settings-session').textContent = '';
   $('peer-count').textContent = ''; $('task-count').textContent = ''; $('permission-count').textContent = ''; $('project-context').textContent = '';
   notice('');
   draftChoicesPending = managerMode && Boolean(selectedProjectId);
@@ -184,7 +251,7 @@ function renderApprovals(permissions) {
   update('permissions', permissions, (target) => {
     if (!permissions.length) return empty(target, 'No approvals waiting.');
     for (const permission of permissions) {
-      const row = el('div', undefined, 'row'); row.append(el('div', permission.peer, 'label'), el('p', permission.title, 'body'));
+      const row = el('div', undefined, 'row'); row.dataset.permissionId=permission.id;row.tabIndex=0;row.append(el('div', permission.peer, 'label'), el('p', permission.title, 'body'));
       if (permission.terminalOnly) row.append(el('p', 'Review in the console or ahub tail; answer with ahub permit. You can deny here.', 'meta'));
       const actions = el('div', undefined, 'actions');
       for (const option of permission.options) { const deny = option.kind === 'reject_once' || option.kind === 'reject_always'; if (permission.terminalOnly && !deny) continue; actions.append(button(option.name, {action:'permit', id:permission.id, option:option.optionId}, deny ? 'danger' : 'primary')); }
@@ -192,55 +259,446 @@ function renderApprovals(permissions) {
     }
   });
 }
+const SETTING_GROUPS = ['Roster', 'Permissions', 'Roles', 'Start', 'Routing', 'Switches'], INHERIT = '__inherit__';
+const settingsOpen = new Set(['Permissions']);
+const settingText = (value) => value === null || value === undefined ? '(not set)' : Array.isArray(value) ? (value.join(', ') || '(none)') : String(value);
+async function previewSetting(row, value, out, control) {
+  if (stopped) return;
+  if (!canMutate()) return notice('Wait for a current project snapshot before previewing a change.', true);
+  const captured = context();
+  let payload = {action:'setting_preview', key:row.key, value};
+  if (managerMode) payload = {...payload, projectId: captured.projectId, instanceId: captured.instanceId};
+  control.disabled = true;
+  try {
+    const result = await post('/action', payload), lines = [...(result.lines || [])];
+    // Each side is route explain: the task line, "if it were assigned now:", then the trace.
+    for (const task of result.tasks || []) lines.push('', task.before[0], '  before:', ...task.before.slice(2).map((line) => '    ' + line), '  after:', ...task.after.slice(2).map((line) => '    ' + line));
+    if (result.hidden) lines.push('', result.hidden + ' more open tasks are not shown.');
+    out.textContent = lines.join('\n');
+  } catch (error) { out.textContent = error.message; }
+  finally { if (!stopped) control.disabled = false; }
+}
+function settingRow(row, raise) {
+  const node = el('div', undefined, 'row'), head = el('div', undefined, 'row-head'), id = 'setting-' + row.key.replaceAll('.', '-');
+  const title = el('label', row.label, 'label'); title.htmlFor = id;
+  head.append(title, badge(settingText(row.value), row.group === 'Permissions' && row.value !== null && row.value !== 'ask' ? 'warn' : ''));
+  node.append(head, el('p', row.key + ' / from ' + row.source + ' / ' + (row.applies === 'live' ? 'applies at once' : row.applies === 'peer start' ? "applies at the peer's next start" : 'read at hub start') + ' / written to ' + row.file, 'meta'));
+  if (row.pending !== undefined) node.append(el('p', 'Pending restart: ' + settingText(row.pending) + ' at the next ' + (row.applies === 'peer start' ? 'peer' : 'hub') + ' start.', 'meta'));
+  if (row.hint) node.append(el('p', 'Bounds: ' + row.hint, 'meta'));
+  if (row.note) node.append(el('p', row.note, 'meta'));
+  if (row.risk === 'raises' && !raise) node.append(el('p', 'Raising this needs a settings session: run ahub ui --settings.' + (row.floor === undefined ? '' : ' Setting it to ' + row.floor + ' works here.'), 'meta'));
+  const actions = el('div', undefined, 'actions'), stored = row.file !== 'this hub run';
+  let read, confirm, force;
+  if (row.type === 'roles') {
+    const current = Array.isArray(row.pending) ? row.pending : Array.isArray(row.value) ? row.value : [];
+    const choices = [0, 1].map(index => {
+      const select = el('select'); select.id = index ? id + '-second' : id;
+      if (index) select.setAttribute('aria-label', row.label + ': second optional role');
+      select.append(Object.assign(el('option', 'No role'), {value:''}));
+      for (const value of row.values || []) select.append(Object.assign(el('option', value), {value}));
+      if (current[index] && !(row.values || []).includes(current[index])) select.append(Object.assign(el('option', current[index] + ' (unavailable)'), {value:current[index],disabled:true}));
+      select.value = current[index] || ''; actions.append(select); return select;
+    });
+    read = () => choices.map(select => select.value).filter(Boolean);
+  } else if (row.type === 'integer') {
+    const input=el('input');input.type='number';input.id=id;input.step='1';input.min=String(row.min ?? 0);input.max=String(row.max ?? Number.MAX_SAFE_INTEGER);const current=row.pending!==undefined ? row.pending : row.value;input.value=current===null ? '' : String(current);input.placeholder='Empty inherits';
+    read=()=>input.value==='' ? null : Number(input.value);actions.append(input);
+  } else if (row.type === 'peers') {
+    const input = el('input'); input.type = 'text'; input.id = id; input.value = Array.isArray(row.value) ? row.value.join(', ') : ''; input.placeholder = 'peer ids, comma-separated; empty inherits'; input.autocomplete = 'off'; input.spellcheck = false;
+    read = () => { const list = input.value.split(',').map((value) => value.trim()).filter(Boolean); return list.length ? list : null; };
+    actions.append(input);
+  } else {
+    const select = el('select'), values = row.type === 'boolean' ? ['true', 'false'] : (row.values || []), current = row.value === null ? '' : String(row.value); select.id = id;
+    if (current && !values.includes(current)) { const option = el('option', current + ' (now)'); option.value = current; option.disabled = true; select.append(option); }
+    for (const value of values) { const option = el('option', value); option.value = value; select.append(option); }
+    if (stored) { const option = el('option', 'inherit (remove the machine-local value)'); option.value = INHERIT; select.append(option); }
+    select.value = current || (stored ? INHERIT : 'ask');
+    read = () => select.value === INHERIT ? null : row.type === 'boolean' ? select.value === 'true' : select.value;
+    actions.append(select);
+    if (row.group === 'Permissions') {
+      // never-ask: the person types the peer it is for, as the console asks for y. Removing the machine-local value
+      // can leave a never-ask from the shared file in force, so inherit offers the same field.
+      const peer = row.key.split('.').pop();
+      confirm = el('input'); confirm.type = 'text'; confirm.placeholder = 'type ' + peer + ' to confirm never-ask'; confirm.setAttribute('aria-label', 'Type ' + peer + ' to confirm never-ask for ' + peer); confirm.autocomplete = 'off'; confirm.spellcheck = false;
+      const removable = row.source === 'config.local.json'; // inherit changes something only where the machine-local file holds a value
+      const sync = () => { confirm.hidden = select.value !== 'never-ask' && !(select.value === INHERIT && removable); }; select.addEventListener('change', sync); sync();
+      actions.append(confirm);
+    }
+  }
+  if (row.group === 'Roster') {
+    const peer = row.key.split('.').pop();
+    confirm = el('input'); confirm.type = 'text'; confirm.placeholder = 'type ' + peer + ' to confirm removal'; confirm.setAttribute('aria-label', 'Confirm removal of ' + peer); confirm.autocomplete = 'off'; confirm.spellcheck = false;
+    force = el('input'); force.type = 'checkbox'; force.setAttribute('aria-label', 'Stop an active turn now');
+    const label = el('label', ' Stop an active turn now (--now)'); label.append(force); actions.append(confirm, label);
+  }
+  const out = el('div', undefined, 'preview'); out.setAttribute('role', 'status'); out.setAttribute('aria-live', 'polite');
+  if (row.type === 'roles') for (const select of actions.querySelectorAll('select')) select.addEventListener('change', () => { const ids = read(); out.textContent = new Set(ids).size !== ids.length ? 'Choose two distinct roles, or clear the second.' : 'Selection applies at the next peer start.'; });
+  if (row.group === 'Permissions' || row.group === 'Routing' || row.group === 'Roster') {
+    const preview = el('button', 'Preview'); preview.type = 'button'; preview.setAttribute('aria-label', 'Preview ' + row.label);
+    preview.addEventListener('click', () => void previewSetting(row, read(), out, preview)); actions.append(preview);
+  }
+  const save = el('button', 'Save', 'primary'); save.type = 'button'; save.dataset.mutation = 'project'; save.disabled = managerMode && !snapshotValid; save.setAttribute('aria-label', 'Save ' + row.label);
+  save.addEventListener('click', async () => { const payload = {action:'setting', key:row.key, value:read()}; if (confirm && !confirm.hidden && confirm.value.trim()) payload.confirm = confirm.value.trim(); if (force) payload.now = force.checked; if (row.group === 'Roster') await previewSetting(row, read(), out, save); if (row.type === 'roles') { if (new Set(payload.value).size !== payload.value.length) { out.textContent = 'Choose two distinct roles, or clear the second.'; return; } out.textContent = 'Saving role guidance...'; const accepted = await action(payload, save); out.textContent = accepted ? 'Saved. Applies at the next peer start.' : $('notice').textContent; } else void action(payload, save); });
+  actions.append(save); if (row.type === 'roles') { const inherit = el('button', 'Use profile/shared roles'); inherit.type = 'button'; inherit.dataset.mutation = 'project'; inherit.disabled = managerMode && !snapshotValid; inherit.setAttribute('aria-label', 'Inherit ' + row.label); inherit.addEventListener('click', async () => { out.textContent = 'Restoring inherited role guidance...'; const accepted = await action({action:'setting',key:row.key,value:null}, inherit); out.textContent = accepted ? 'Inherited selection saved. Applies at the next peer start.' : $('notice').textContent; }); actions.append(inherit); } node.append(actions, out);
+  return node;
+}
+const settingSlots = new Map();
+function setText(node, text) { if (node.textContent !== text) node.textContent = text; }
+function renderSettings(settings, roster = []) {
+  if (!settings || !Array.isArray(settings.rows)) { setText($('settings-session'), ''); settingSlots.clear(); return update('settings', 'none', (target) => empty(target, 'This hub does not report settings.')); }
+  const raise = typeof settings.sessionUntil === 'number' && settings.sessionUntil > Date.now();
+  // Written only when it changes: a status region that is rewritten every second is read out every second.
+  setText($('settings-session'), raise ? 'Settings session: ' + Math.max(1, Math.ceil((settings.sessionUntil - Date.now()) / 60000)) + ' min left' : 'Read, lower and safe switches only');
+  // The frame (the groups) follows the list of keys. The undo row and every setting sit in slots of their own and
+  // are rebuilt only when their own data changed, so a value being typed in one row survives a save of another.
+  update('settings', settings.rows.map((row) => row.key), (target) => {
+    settingSlots.clear();
+    const undo = el('div'); settingSlots.set('', { node: undo, signature: null }); target.append(undo);
+    for (const group of SETTING_GROUPS) {
+      const rows = settings.rows.filter((row) => row.group === group);
+      if (!rows.length) continue;
+      const box = el('details', undefined, 'settings-group'); box.open = settingsOpen.has(group);
+      box.addEventListener('toggle', () => { if (box.open) settingsOpen.add(group); else settingsOpen.delete(group); });
+      box.append(el('summary', group + ' (' + rows.length + ')'));
+      for (const row of rows) { const slot = el('div'); settingSlots.set(row.key, { node: slot, signature: '' }); box.append(slot); }
+      target.append(box);
+    }
+  });
+  const undoSlot = settingSlots.get(''), undoKey = settings.undo || '';
+  if (undoSlot && undoSlot.signature !== undoKey) {
+    undoSlot.signature = undoKey; undoSlot.node.replaceChildren();
+    if (undoKey) {
+      const row = el('div', undefined, 'row'); row.append(el('p', 'Last settings write: ' + undoKey, 'meta'));
+      const actions = el('div', undefined, 'actions');
+      if (undoKey.startsWith('roster.')) {
+        const peer = undoKey.slice('roster.'.length), confirm = el('input'); confirm.type = 'text'; confirm.placeholder = 'type ' + peer + ' if undo removes it'; confirm.setAttribute('aria-label', 'Confirm roster undo for ' + peer);
+        const force = el('input'); force.type = 'checkbox'; force.setAttribute('aria-label', 'Stop an active turn now for undo');
+        const undo = el('button', 'Undo last write'); undo.type = 'button'; undo.dataset.mutation = 'project'; undo.addEventListener('click', () => void action({action:'setting_undo', confirm:confirm.value.trim(), now:force.checked}, undo));
+        actions.append(confirm, el('label', 'Stop an active turn now'), force, undo);
+      } else actions.append(button('Undo last write', {action:'setting_undo'}));
+      row.append(actions); undoSlot.node.append(row);
+    }
+  }
+  for (const row of settings.rows) {
+    const membership = roster.find(peer => row.key === 'roster.' + peer.peer);
+    const slot = settingSlots.get(row.key), signature = JSON.stringify([row, raise]);
+    if (!slot) continue;
+    if (slot.signature !== signature) {
+      slot.signature = signature; slot.node.replaceChildren(settingRow(row, raise)); slot.membership = null;
+    }
+    if (membership) {
+      if (!slot.membership) { slot.membership = el('p', '', 'meta'); slot.node.append(slot.membership); }
+      setText(slot.membership, `${membership.state}; ${membership.queued} queued; ${membership.tasks} open tasks`);
+    }
+  }
+}
+function syncStarts(snapshot) {
+  for (const start of Array.isArray(snapshot.starts) ? snapshot.starts : []) if (start.attached) clearPendingStart(startKey(start.peer));
+}
+function renderStarts(target, starts) {
+  // A Start control per peer that is not attached: the mode it will use and where that comes from.
+  for (const start of starts) {
+    if (start.attached) { clearPendingStart(startKey(start.peer)); continue; }
+    const row = el('div', undefined, 'row'), head = el('div', undefined, 'row-head');
+    head.append(el('span', 'Start ' + start.peer, 'label'), badge(start.mode));
+    const tui = start.mode === 'tui';
+    row.append(head, el('p', !tui ? 'Starts headless: its start mode.' : start.via ? 'Start mode tui: opens ' + start.command + ' in a terminal through ' + start.via + '.' : 'Start mode tui, and the hub has no terminal to open (' + start.why + '). Run ' + start.command + ' in a terminal.', 'meta'));
+    if (!tui || start.via) { const actions = el('div', undefined, 'actions'); actions.append(button('Start ' + start.peer, {action:'start_peer', peer:start.peer})); row.append(actions); }
+    const pending = pendingStarts.get(startKey(start.peer));
+    if (pending) row.append(el('p', pending.text, 'meta'));
+    target.append(row);
+  }
+}
+let boardViewState = null, showAllDone = false;
+let planningEdit = null, releaseEdit = null;
+const loadedPlanningDates = new Map();
+const localDateInput = value => {
+  if(!Number.isSafeInteger(value) || value<=0 || value>8_640_000_000_000_000)return '';
+  const date=new Date(value),pad=(value,size=2)=>String(value).padStart(size,'0');
+  return pad(date.getFullYear(),4)+'-'+pad(date.getMonth()+1)+'-'+pad(date.getDate())+'T'+pad(date.getHours())+':'+pad(date.getMinutes())+':'+pad(date.getSeconds())+'.'+pad(date.getMilliseconds(),3);
+};
+function loadPlanningDate(id,value) {
+  const input=$(id);input.value=localDateInput(value);
+  loadedPlanningDates.set(id,{text:input.value,utc:Number.isSafeInteger(value)&&value>0&&value<=8_640_000_000_000_000 ? value : null});
+}
+const plannedDateInput = id => {
+  const value=$(id).value,loaded=loadedPlanningDates.get(id);
+  if(loaded && loaded.text===value)return loaded.utc;
+  return value ? new Date(value.replace(/^(\d{5,})-/,(_match,year)=>'+'+year.padStart(6,'0')+'-')).getTime() : null;
+};
+const dateText = value => !Number.isSafeInteger(value) || value<=0 || value>8_640_000_000_000_000 ? 'unknown' : new Date(value).toLocaleString();
+function loadPlanning() {
+  const task=boardViewState?.snapshot.tasks.find(task=>task.id===Number($('planning-task').value));
+  planningEdit=task ? {id:task.id,revision:task.planningRevision ?? 0,context:boardContext()} : null;
+  if(!task)return;
+  $('planning-priority').value=task.priority == null ? '' : String(task.priority);$('planning-rank').value=task.rank == null ? '' : String(task.rank);
+  $('planning-release').value=task.release == null ? '' : String(task.release);$('planning-pinned').checked=task.pinned===true;
+  loadPlanningDate('planning-start',task.plannedStart);loadPlanningDate('planning-due',task.due);$('planning-reason').value='';
+  $('planning-version').textContent='Loaded current task plan.';
+}
+function loadReleasePlanning() {
+  const release=boardViewState?.snapshot.releases?.find(release=>release.id===Number($('release-edit').value));
+  releaseEdit=release ? {id:release.id,revision:release.revision,context:boardContext()} : null;
+  $('release-version').textContent=release ? 'Loaded current release.' : 'Select release.';
+  for(const [id,key] of [['release-start','plannedStart'],['release-cut','cut'],['release-ship','ship']])loadPlanningDate(id,release?.[key]);
+}
+function planningOptions(node, rows, label, selected) {
+  node.replaceChildren();const initial=el('option',label);initial.value='';node.append(initial);
+  for(const row of rows){const option=el('option',row.label);option.value=String(row.id);node.append(option)}
+  if(rows.some(row=>String(row.id)===selected))node.value=selected;
+}
+function renderPlanning(snapshot) {
+  const supported=snapshot.planningCapabilities?.enabled===true;
+  $('split-panel').hidden=snapshot.planningCapabilities?.split!==true;$('split-save').disabled=snapshot.planningCapabilities?.split!==true || !sameBoardContext(boardContext());
+  for(const id of ['planning-save','planning-undo','release-save'])$(id).disabled=!supported || !sameBoardContext(boardContext());
+  const releases=Array.isArray(snapshot.releases)?snapshot.releases:[], releaseRows=releases.map(release=>({id:release.id,label:'#'+release.id+' '+release.name}));
+  for(const id of ['task-release-filter','planning-release','release-edit'])planningOptions($(id),releaseRows,id==='task-release-filter'?'All releases':'No release',$(id).value);
+  if(releaseEdit && (!sameBoardContext(releaseEdit.context) || releases.find(release=>release.id===releaseEdit.id)?.revision!==releaseEdit.revision)){releaseEdit=null;$('release-version').textContent='Release changed. Reload before saving.';}
+  const selection=$('planning-task').value;planningOptions($('planning-task'),snapshot.tasks.filter(task=>task.state!=='approved').map(task=>({id:task.id,label:'#'+task.id+' '+task.title})),'Select task',selection);
+  if(planningEdit && (!sameBoardContext(planningEdit.context) || !snapshot.tasks.some(task=>task.id===planningEdit.id)))planningEdit=null;
+  if(planningEdit && snapshot.tasks.find(task=>task.id===planningEdit.id)?.planningRevision!==planningEdit.revision)$('planning-version').textContent='Task changed. Reload before saving.';
+  const states=new Map(snapshot.tasks.map(task=>[task.id,task.state]));
+  update('releases',{releases,taskStates:[...states]},target=>{
+    if(!releases.length)return empty(target,'No releases planned.');
+    const auditIds=(ids,count)=>ids.map(id=>'#'+id).join(', ')+(Number.isSafeInteger(count)&&count>ids.length?' (showing '+ids.length+' of '+count+')':'');
+    for(const release of releases){const row=el('div',undefined,'row');row.append(el('strong','#'+release.id+' '+release.name),badge(release.state),el('p',release.goal));
+      const scope=Array.isArray(release.tasks)?release.tasks:null, remaining=scope?.filter(task=>task.state!=='approved');
+      const blocking=remaining?.filter(task=>(task.deps || []).some(id=>states.get(id)!=='approved'));
+      row.append(el('p',scope?remaining.length+' remaining of '+scope.length+' / '+blocking.length+' blocked':'Scope unknown','meta'));
+      if(scope){const progress=el('progress');progress.max=Math.max(1,scope.length);progress.value=scope.length-remaining.length;progress.setAttribute('aria-label','Approved tasks in '+release.name);row.append(progress)}
+      row.append(el('p','Start '+dateText(release.plannedStart)+' / cut '+dateText(release.cut)+' / ship '+dateText(release.ship),'meta'));
+      row.append(el('p','Actual: active '+dateText(release.activatedAt)+' / frozen '+dateText(release.frozenAt)+' / shipped '+dateText(release.shippedAt),'meta'));
+      if(Array.isArray(release.afterCutUnknown) && release.afterCutUnknown.length)row.append(el('p','Timing relative to release cut unknown: '+auditIds(release.afterCutUnknown,release.afterCutUnknownCount),'meta'));
+      if(Array.isArray(release.afterCut) && release.afterCut.length)row.append(el('p','Approved after cut outside this release: '+auditIds(release.afterCut,release.afterCutCount),'meta'));
+      const controls=el('div',undefined,'actions');for(const [from,state,label] of [['planning','active','Activate'],['active','frozen','Freeze'],['frozen','shipped','Record shipped']])if(release.state===from)controls.append(boardButton(label,{action:'release_change',id:release.id,revision:release.revision,fields:{state}}));
+      if(!['shipped','dropped'].includes(release.state))controls.append(boardButton('Drop release',{action:'release_change',id:release.id,revision:release.revision,fields:{state:'dropped'}}));
+      row.append(controls);target.append(row);
+    }
+  });
+}
+
+function peerMark(peer, reviewer = false) {
+  const key = Object.hasOwn(peerPalette, peer || '') ? peer : 'other';
+  const mark = el('span', undefined, 'peer-mark peer-' + key), color = el('span', undefined, 'peer-color-dot' + (reviewer ? ' reviewer' : ''));
+  color.setAttribute('aria-hidden', 'true'); mark.append(color, el('span', (reviewer ? 'reviewer: ' : 'owner: ') + (peer || 'unassigned'))); return mark;
+}
+function boardContext() {
+  const current=context(), snapshot=boardViewState?.snapshot || {};
+  return {...current,origin:location.origin,projectId:typeof snapshot.projectId==='string' ? snapshot.projectId : current.projectId,instanceId:typeof snapshot.instanceId==='string' ? snapshot.instanceId : current.instanceId};
+}
+function sameBoardContext(expected) {
+  const current=boardContext(); return !stopped && canMutate() && Boolean(current.projectId && current.instanceId) && expected.origin===current.origin && expected.projectId===current.projectId && expected.instanceId===current.instanceId && expected.generation===current.generation;
+}
+function boardButton(text, payload) {
+  const expected=boardContext(), node=el('button',text); node.type='button';node.dataset.mutation='project';node.disabled=managerMode && !snapshotValid;
+  node.addEventListener('click',()=>{if(!sameBoardContext(expected))return notice('The project changed. Use its current board.',true);void action(payload,node)});return node;
+}
+function draggedCard(event) {
+  if (!canMutate() || !boardViewState) return null;
+  try {
+    const raw = event.dataTransfer?.getData('application/x-agent-hub-task');
+    if (!raw || raw.length > 1024) return null;
+    const data = JSON.parse(raw), current = boardContext();
+    if (data.origin !== current.origin || data.projectId !== current.projectId || data.instanceId !== current.instanceId || data.generation !== current.generation || !Number.isSafeInteger(data.id)) return null;
+    return boardViewState.cards.get(data.id) || null;
+  } catch { return null; }
+}
+function dropTarget(node, accepted, payload) {
+  const expected=boardContext();
+  node.addEventListener('dragover', event => { if (sameBoardContext(expected)) { event.preventDefault(); node.classList.add('board-drop-active'); } });
+  node.addEventListener('dragleave', () => node.classList.remove('board-drop-active'));
+  node.addEventListener('drop', event => {
+    event.preventDefault(); node.classList.remove('board-drop-active');
+    if(!sameBoardContext(expected))return notice('The project changed. Use its current board.',true);
+    const card = draggedCard(event);
+    if (!card || !accepted(card)) return notice('This task cannot move here. Use its available buttons.', true);
+    void action({...payload, id:card.id});
+  });
+}
+function taskCard(task, card, stage, ids) {
+  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));
+
+  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); }
+  row.append(head, peerMark(task.owner)); if (task.reviewer) row.append(peerMark(task.reviewer, true));
+  row.append(el('p', task.profileClass ? task.profileClass + ' (base ' + task.class + ')' : task.class, 'meta'));
+  if(task.role){const guidance='Task guidance: '+task.role+' (grants no authority)';row.append(el('p',guidance,'meta'));row.setAttribute('aria-label',row.getAttribute('aria-label')+', '+guidance);}
+  if(task.release!=null){const release=boardViewState?.snapshot.releases?.find(release=>release.id===task.release),label='Release #'+task.release+' '+(release?.name || '(label unavailable)');row.append(el('p',label,'meta'));row.setAttribute('aria-label',row.getAttribute('aria-label')+', '+label);}
+  if (stage) row.append(renderTaskStage(stage));
+  if (card.waiting.length) row.append(el('p', 'Waiting: ' + card.waiting.join('; '), 'meta'));
+  if (task.reworkRound) row.append(el('p', 'Rework round ' + task.reworkRound, 'meta'));
+  if (task.checking) row.append(el('p', 'Check running', 'meta'));
+  if (task.lifecycle) row.append(el('p', 'SDLC ' + task.lifecycle.mode + (task.lifecycle.workflow ? ' (' + task.lifecycle.workflow + ')' : '') + ' / ' + task.lifecycle.stage + ': ' + task.lifecycle.next + ' / next: ' + task.lifecycle.actor, 'meta'));
+  if (task.lifecycle?.definition) row.append(el('p', 'Stage base: ' + task.lifecycle.definition.base + ' / entry: ' + (task.lifecycle.entry?.length ? task.lifecycle.entry.join('; ') : 'ready') + ' / exit: ' + (task.lifecycle.exit?.length ? task.lifecycle.exit.join('; ') : 'ready'), 'meta'));
+  if (task.detail) row.append(el('p', task.detail, 'body'));
+  if(task.external?.provider==='github'){const source=el('a','GitHub #'+task.external.issue);source.href=task.external.url;source.rel='noreferrer';source.target='_blank';row.append(source);}
+  if(task.pinned)row.append(el('p','Pinned','meta'));
+  if(task.plannedStart != null || task.due != null)row.append(el('p','Planned '+dateText(task.plannedStart)+' / due '+dateText(task.due),'meta'));
+  if(task.due != null && task.due<Date.now() && task.state!=='approved')row.append(badge('Overdue','warn'));
+  if(task.actualDates)row.append(el('p','Actual start '+dateText(task.actualDates.startedAt)+' / review '+dateText(task.actualDates.reviewAt)+' / done '+dateText(task.actualDates.doneAt),'meta'));
+
+  const controls = el('div', undefined, 'actions');
+  if (card.pull && boardViewState?.snapshot.boardCapabilities?.backlog===true) controls.append(boardButton('Pull into To Do', {action:'backlog_pull',id:task.id}));
+  if (card.pull && boardViewState?.snapshot.planningCapabilities?.wipPull===true) controls.append(boardButton('Pull within WIP', {action:'planner_pull',id:task.id,revision:task.planningRevision ?? 0,reason:'person requested a WIP-constrained pull'}));
+  if (card.returnable && boardViewState?.snapshot.boardCapabilities?.backlog===true) controls.append(boardButton('Return to Backlog', {action:'backlog_return',id:task.id}));
+  if (card.assignable && ids.length) {
+    const expected=boardContext(), select = el('select'); select.setAttribute('aria-label', 'Assign task ' + task.id); peerOptions(select, ids, 'Select peer'); if (ids.includes(task.owner)) select.value = task.owner;
+    const assign = el('button', 'Assign'); assign.type='button'; assign.dataset.mutation='project'; assign.disabled=managerMode && !snapshotValid;
+    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);
+  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 => {
+      if (!canMutate() || !event.dataTransfer) return event.preventDefault();
+      event.dataTransfer.effectAllowed='move'; event.dataTransfer.setData('application/x-agent-hub-task',JSON.stringify({...boardContext(),id:task.id}));
+    });
+  }
+  return row;
+}
+function renderBoard(snapshot, peers, ids) {
+  if (!Array.isArray(snapshot.tasks)) { boardViewState=null; 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]));
+  const cards = new Map(model.columns.flatMap(column=>[...column.ready,...column.waiting]).map(card=>[card.id,card]));
+  boardViewState={snapshot,peers,ids,cards};
+  renderPlanning(snapshot);
+  const staged=$('backlog-proposal');staged.disabled=snapshot.boardCapabilities?.backlog!==true || !sameBoardContext(boardContext());
+  if(snapshot.boardCapabilities?.backlog!==true)staged.checked=false;
+  const peerFilter=$('task-peer-filter'), previous=peerFilter.value;
+  peerOptions(peerFilter,ids,'All agents'); if (ids.includes(previous)) peerFilter.value=previous;
+  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';
+  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');
+      row.append(peerMark(id),el('p',String(peers[id].state || 'unknown'),'meta'));
+      const wip=data && Number.isSafeInteger(data.wip) && data.wip>=0 ? data.wip : 'unknown';
+      row.append(el('p','WIP '+wip+(Number.isSafeInteger(data?.wipLimit) ? '/'+data.wipLimit : '')+' / permission '+(data?.permissionMode || 'unknown'),'meta'));
+      if (Array.isArray(data?.activeTasks) && data.activeTasks.length) row.append(el('p','Active tasks: '+data.activeTasks.map(id=>'#'+id).join(', '),'meta'));
+      const filter=el('button','View '+id);filter.type='button';filter.addEventListener('click',()=>{if(!boardViewState)return;peerFilter.value=id;renderBoard(boardViewState.snapshot,boardViewState.peers,boardViewState.ids)});row.append(filter);
+      if (eligible.includes(id)) dropTarget(row,card=>card.assignable,{action:'assign',peer:id});
+      target.append(row);
+    }
+    if (!ids.length) empty(target,'No peer status available.');
+  });
+  update('tasks',[snapshot.tasks,peers,snapshot.boardCapabilities,taskFilter,ownerFilter,releaseFilter,lanes,showAllDone],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];
+    if (!owners.length) owners.push(null);
+    for (const [laneIndex, owner] of owners.entries()) {
+      const lane=el('div',undefined,'board-lane');
+      if(owner!==null) {
+        const heading=el('h3',lanes==='releases' ? (snapshot.releases?.some(release=>release.id===owner) ? '#'+owner+' '+snapshot.releases.find(release=>release.id===owner).name : 'No release') : owner || 'Unassigned');
+        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 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 (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;
+        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));
+        }
+        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)}
+        grid.append(box);
+      }
+      lane.append(grid);target.append(lane);
+    }
+    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'));
+  });
+}
+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;
+  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 render(snapshot) {
-  const peers = snapshot.status.peers || {}, ids = Object.keys(peers);
+  renderPetAttention(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';
-  update('peers', peers, (target) => {
-    if (!ids.length) return empty(target, 'No peers connected. Start an agent from your terminal.');
+  syncStarts(snapshot);
+  update('peers', [peers, starts, starts.map(start => { const pending = pendingStarts.get(startKey(start.peer)); return pending ? [pending.phase, pending.retryAt || null] : null; })], (target) => {
+    peerRows.clear();
+    if (!ids.length) { empty(target, 'No peers connected. Start one below, or from your terminal.'); return renderStarts(target, starts); }
     for (const [id, peer] of Object.entries(peers)) {
       const row = el('div', undefined, 'row'), head = el('div', undefined, 'row-head'), name = el('div', undefined, 'peername');
       name.append(dot(peerDot[peer.state] || ''), el('span', id, 'label'));
-      head.append(name, badge(peer.state, peerDot[peer.state] || ''));
+      head.append(name, badge(peer.rostered === false ? peer.state + ' off roster' : peer.state, peerDot[peer.state] || ''));
       row.append(head, el('p', peer.queued + ' queued' + (peer.queuedImportant ? ' (' + peer.queuedImportant + ' important)' : ''), 'meta'));
+      if (peer.flowRoles) row.append(el('p', 'Flow roles: ' + (peer.flowRoles.join(', ') || 'none'), 'meta'));
+      if (peer.catalogRoles) { row.append(el('p', 'Catalog guidance: ' + (Array.isArray(peer.catalogRoles.value) ? peer.catalogRoles.value.join(', ') || 'none' : 'unconfirmed'), 'meta')); if (peer.catalogRoles.pending !== undefined) row.append(el('p', 'Pending at next start: ' + (peer.catalogRoles.pending.join(', ') || 'none'), 'meta')); }
       if (peer.needsReview) row.append(el('p', peer.needsReview + ' need review: use ahub queue list', 'meta'));
       if (peer.oldestQueuedAt !== undefined) row.append(el('p', 'Oldest pending: ' + Math.max(0, Math.floor((Date.now() - peer.oldestQueuedAt) / 1000)) + 's', 'meta'));
       if (peer.attached === false) row.append(el('p', 'Disconnected recipient; work is retained.', 'meta'));
       if (peer.toolsOnly) row.append(el('p', peer.toolsOnly, 'meta'));
+      if (peer.permissionNote) row.append(el('p', peer.permissionNote, 'meta'));
+      if (peer.pullOnly && id === 'kimi') row.append(el('p', 'Last hub_inbox read: ' + (typeof peer.lastInboxAt === 'number' ? Math.max(0, Math.floor((Date.now() - peer.lastInboxAt) / 1000)) + 's ago' : 'never'), 'meta'));
       if (peer.paused) row.append(el('p', peer.paused, 'meta'));
       if (peer.requestedModel) row.append(el('p', 'Requested: ' + peer.requestedModel, 'meta'));
       for (const backend of peer.backends || []) {
         if (backend.requestedModel) row.append(el('p', backend.kind.toUpperCase() + ': ' + (backend.actualModel || 'model not reported') + ' (' + backend.state + ')', 'meta'));
       }
       const paused = peer.state === 'paused' || peer.paused;
+      row.tabIndex = 0; peerRows.set(id, row);
+      const trackDesk = (on) => { const desk = officeDesks.get(id); if (desk) desk.classList.toggle('office-spotlight', on); };
+      row.addEventListener('mouseenter', () => trackDesk(true)); row.addEventListener('mouseleave', () => trackDesk(false));
+      row.addEventListener('focus', () => trackDesk(true)); row.addEventListener('blur', () => trackDesk(false));
       row.append(button(paused ? 'Resume' : 'Pause', {action:paused ? 'resume' : 'pause', peer:id})); target.append(row);
     }
+    renderStarts(target, starts);
   });
+  renderOffice(snapshot);
   const assignable = ids.filter((id) => peers[id].state !== 'offline' && peers[id].attached !== false);
   const peerSignature = JSON.stringify([ids, assignable]);
   if (signatures.get('peer-options') !== peerSignature) { signatures.set('peer-options', peerSignature); peerOptions($('owner'), assignable, 'Automatic'); peerOptions($('recipient'), ids, 'All peers'); if (draftChoicesPending) { restoreDraft(true); draftChoicesPending = false; } }
-  const progress = taskProgress(snapshot.tasks);
-  renderTaskProgress(progress);
-  const progressStages = new Map(progress.stages.map(stage => [stage.id, stage]));
-  $('task-count').textContent = snapshot.tasks.length + ' tasks';
-  const taskFilter = $('task-filter').value;
-  const visibleTasks = taskFilter ? snapshot.tasks.filter((task) => task.state === taskFilter) : snapshot.tasks;
-  update('tasks', [visibleTasks, ids, taskFilter, progress], (target) => {
-    if (!snapshot.tasks.length) return empty(target, 'No public tasks yet. Propose a task below to get started.');
-    if (!visibleTasks.length) return empty(target, 'No tasks in this state.');
-    for (const task of visibleTasks) {
-      const row = el('div', undefined, 'row'), head = el('div', undefined, 'row-head');
-      head.append(el('span', '#' + task.id + ' ' + task.title, 'label'), badge(task.state.replaceAll('_', ' '), taskBadge[task.state] || ''));
-      const stage = progressStages.get(task.id);
-      row.append(head, renderTaskStage(stage), el('p', task.class + ' / ' + (task.owner || 'unassigned') + (task.reviewer ? ' / review: ' + task.reviewer : ''), 'meta'));
-      if (task.detail) row.append(el('p', task.detail, 'body'));
-      if (task.state !== 'approved' && ids.length) {
-        const actions = el('div', undefined, 'actions'), select = el('select'); select.setAttribute('aria-label', 'Assign task ' + task.id); peerOptions(select, ids, 'Select peer'); if (ids.includes(task.owner)) select.value = task.owner;
-        const assign = el('button', 'Assign'); assign.type = 'button'; assign.dataset.mutation = 'project'; assign.disabled = managerMode && !snapshotValid; assign.addEventListener('click', () => { if (select.value) void action({action:'assign', id:task.id, peer:select.value}, assign); else notice('Select a peer before assigning this task.', true); });
-        actions.append(select, assign); row.append(actions);
-      }
-      target.append(row);
-    }
-  });
+  renderBoard(snapshot, peers, ids);
   renderApprovals(snapshot.permissions);
   update('budget', snapshot.budget, (target) => {
     if (!Object.keys(snapshot.budget).length) return empty(target, 'No usage readings yet. Usage appears when a peer reports it.');
@@ -267,6 +725,8 @@ function render(snapshot) {
     }
   });
   renderBench(snapshot.bench);
+  renderMemory(snapshot.memory);
+  renderSettings(snapshot.settings, snapshot.roster);
   const stream = $('stream');
   if (!eventCount) { stream.replaceChildren(); empty(stream, 'No activity yet.'); }
   for (const entry of snapshot.events || []) {
@@ -291,7 +751,7 @@ async function poll() {
   const captured = context();
   if (managerMode && (!captured.projectId || !captured.instanceId)) { if (!stopped) timer = setTimeout(poll, 1000); return; }
   try {
-    const input = {after:cursor}; if (managerMode) { input.projectId = captured.projectId; input.instanceId = captured.instanceId; }
+    const input = {after:cursor, memory:memoryInput()}; if (managerMode) { input.projectId = captured.projectId; input.instanceId = captured.instanceId; }
     const result = await post('/snapshot', input);
     if (!managerMode || (result.projectId === captured.projectId && result.instanceId === captured.instanceId && captured.generation === viewGeneration)) {
       snapshotValid = true; lastSnapshot = result; render(result); $('connection').textContent = 'Live / updated ' + new Date().toLocaleTimeString();
@@ -300,6 +760,343 @@ async function poll() {
   catch (error) { if (!stopped) $('connection').textContent = 'Disconnected / retrying: ' + error.message; }
   if (!stopped) timer = setTimeout(poll, 1000);
 }
+// office-scene-begin (issue 264): the office, drawn Flat or Isometric from the shared officeModel as inline
+// SVG, re-rendered only when its signature changed; no timer, no frame loop, no request and no action here.
+// Motion is CSS only: transform/opacity transitions for card moves, keyframe fades for arcs, alerts and the
+// 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.
+let officeProjection = 'flat';
+let officeLastProjection = '';
+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 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 });
+  return officePolygon([[0, 0], officeIsoLocal(w, 0), officeIsoLocal(w, h), officeIsoLocal(0, h)], cls);
+}
+function officeViewBox(w, h) {
+  if (officeProjection !== 'iso') return '0 0 ' + w + ' ' + h;
+  const corners = [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);
+}
+// A raised hand as outline shapes (palm and fingers), coloured by the desk's condition class.
+function officeHand(x, y) {
+  const g = officeNode('g', { class: 'office-handshape' });
+  g.append(officeNode('rect', { x: x + 0.05, y: y + 0.8, width: 1.5, height: 1.2, rx: 0.55 }));
+  for (let i = 0; i < 3; i++) g.append(officeNode('rect', { x: x + 0.24 + i * 0.42, y, width: 0.28, height: 1.05, rx: 0.14 }));
+  return g;
+}
+// The condition glyph as clean outline shapes; the label text next to it carries the state in words.
+function officeGlyphNode(desk, cx, cy) {
+  if (desk.condition === 'waiting') return officeHand(cx - 0.8, cy - 1.05);
+  const g = officeNode('g', { class: 'office-glyph-shape' });
+  if (desk.condition === 'busy' || desk.condition === 'idle') g.append(officeNode('circle', { cx, cy, r: 0.8 }));
+  else if (desk.condition === 'paused') g.append(officeNode('rect', { x: cx - 0.65, y: cy - 0.75, width: 0.45, height: 1.5, rx: 0.15 }), officeNode('rect', { x: cx + 0.2, y: cy - 0.75, width: 0.45, height: 1.5, rx: 0.15 }));
+  else if (desk.condition === 'offline') g.append(officeNode('line', { x1: cx - 0.55, y1: cy - 0.55, x2: cx + 0.55, y2: cy + 0.55 }), officeNode('line', { x1: cx - 0.55, y1: cy + 0.55, x2: cx + 0.55, y2: cy - 0.55 }));
+  else g.append(officeNode('text', { x: cx - 0.4, y: cy + 0.55, class: 'office-glyph' }, desk.glyph));
+  return g;
+}
+// A person: head over shoulders, upright in both projections. Isometric stands behind the desk.
+function officeAvatar() {
+  if (officeProjection === 'iso') return [
+    officeNode('circle', { cx: 1.5, cy: -3.7, r: 1.05, class: 'office-avatar' }),
+    officeNode('rect', { x: 0.55, y: -2.85, width: 1.9, height: 3.05, rx: 0.9, class: 'office-avatar' })];
+  return [
+    officeNode('circle', { cx: 2.2, cy: 3.1, r: 0.78, class: 'office-avatar' }),
+    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'));
+  }
+  return nodes;
+}
+function officeClip(text, max) { text = String(text); return text.length > max ? text.slice(0, max - 3) + '...' : text; }
+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 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.
+function officeFade(node, until, now) {
+  node.dataset.officeUntil = String(until);
+  const remaining = Math.max(0, until - now);
+  if (remaining <= 0) return false;
+  if (officeReducedMotion()) return true;
+  const duration = Math.min(1000, remaining);
+  node.setAttribute('class', ((node.getAttribute('class') || '') + ' office-fadeout').trim());
+  if (duration !== 1000) node.style.animationDuration = duration + 'ms';
+  node.style.animationDelay = (remaining - duration) + 'ms';
+  return true;
+}
+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' }, '⟳'));
+  node.replaceChildren(...children);
+}
+function officeDeskPaint(node, desk) {
+  node.setAttribute('class', 'office-desk office-' + desk.condition + (desk.dimmed ? ' office-dimmed' : ''));
+  node.setAttribute('aria-label', desk.name);
+  officePlace(node, desk.x, desk.y);
+  const iso = officeProjection === 'iso';
+  const children = [];
+  if (iso) {
+    children.push(...officeAvatar());
+    // The desk is a light extrusion: the top tile plus two thin front legs.
+    const B = officeIsoLocal(desk.w, 0), C = officeIsoLocal(desk.w, desk.h), D = officeIsoLocal(0, desk.h);
+    for (const [from, to] of [[D, C], [B, C]]) {
+      const at = (t) => [from[0] + (to[0] - from[0]) * t, from[1] + (to[1] - from[1]) * t];
+      const a = at(0.78), b = at(0.92);
+      children.push(officePolygon([a, b, [b[0], b[1] + 2.4], [a[0], a[1] + 2.4]], 'office-desk-leg'));
+    }
+  }
+  children.push(officeTile(desk.w, desk.h, 'office-desk-surface'));
+  if (iso) {
+    // The name plate is a small parallelogram on the desk's front edge; the name text stays upright.
+    const D = officeIsoLocal(0, desk.h), C = officeIsoLocal(desk.w, desk.h), off = officeIsoLocal(0, 1);
+    const c0 = [(D[0] + C[0]) / 2 + off[0], (D[1] + C[1]) / 2 + off[1]];
+    children.push(officePolygon([[-2.4, -0.75], [2.4, -0.75], [2.4, 0.75], [-2.4, 0.75]].map(([gx, gy]) => { const p = officeIsoLocal(gx, gy); return [c0[0] + p[0], c0[1] + p[1]]; }), 'office-nameplate'));
+    children.push(officeNode('text', { x: c0[0], y: c0[1] + 2.5, 'text-anchor': 'middle', class: 'office-name' }, desk.id));
+  } else {
+    children.push(officeNode('text', { x: 1, y: 2, class: 'office-name' }, desk.id));
+    children.push(...officeAvatar());
+  }
+  if (desk.bubble) {
+    const bx = iso ? 3.6 : 0.6; // clear of the standing avatar in iso
+    children.push(officeNode('rect', { x: bx, y: -2.3, width: desk.w - 1.2, height: 1.9, rx: 0.9, class: 'office-bubble' }));
+    children.push(officeNode('text', { x: bx + (desk.w - 1.2) / 2, y: -0.95, 'text-anchor': 'middle', class: 'office-bubble-text' }, officeClip(desk.bubble, 16)));
+  }
+  if (desk.mode) children.push(officeNode('text', { x: desk.w - 1, y: 2, 'text-anchor': 'end', class: 'office-mode' }, desk.mode));
+  children.push(officeGlyphNode(desk, iso ? 5.2 : 4.3, 3.65));
+  children.push(officeNode('text', { x: iso ? 6.3 : 5.3, y: 4, class: 'office-state' }, desk.label));
+  if (desk.approvals > 0) { children.push(officeHand(desk.w - 2.7, 2.5)); children.push(officeNode('text', { x: desk.w - 1, y: 4, 'text-anchor': 'end', class: 'office-hand' }, String(desk.approvals))); }
+  let line = 5.35;
+  if (desk.breakNote) { children.push(officeNode('text', { x: 1, y: line, class: 'office-meta' }, officeClip('Break: ' + desk.breakNote + (desk.breakResetsAt ? ' / resets ' + rel(desk.breakResetsAt) : ''), 38))); line += 1.05; }
+  if (desk.finishing) { children.push(officeNode('text', { x: 1, y: line, class: 'office-meta' }, 'finishing a turn')); line += 1.05; }
+  if (!desk.attached) { children.push(officeNode('text', { x: 1, y: line, class: 'office-meta' }, 'disconnected; work retained')); line += 1.05; }
+  const tray = [];
+  if (desk.tray.queued) tray.push(desk.tray.queued + ' queued');
+  if (desk.tray.important) tray.push(desk.tray.important + ' important');
+  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);
+}
+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));
+  node.replaceChildren(...children);
+  if (room.overflow > 0 && room.filterState) {
+    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'));
+    const open = () => officeFilter(room.filterState);
+    more.addEventListener('click', open);
+    more.addEventListener('keydown', (event) => officeKeys(event, open));
+    node.append(more);
+  }
+}
+let officeScene = null;
+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; }
+  officeScene = { svg, layers, els: new Map(), leaving: new Map(), settled: true };
+  target.replaceChildren(svg);
+  return officeScene;
+}
+function officeReducedMotion() { return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true; }
+function officePrune(scene, now) {
+  if(!scene)return;
+  for(const [node,until] of scene.leaving)if(officeReducedMotion() || until<=now){node.remove();scene.leaving.delete(node)}
+  for(const [key,entry] of scene.els){
+    if(officeReducedMotion())entry.node.classList.remove('office-appear');
+    if(entry.node.dataset.officeUntil && Number(entry.node.dataset.officeUntil)<=now){entry.node.remove();scene.els.delete(key)}
+  }
+}
+function officeLeave(scene, key) {
+  const entry = scene.els.get(key);
+  if (!entry) return;
+  scene.els.delete(key);
+  if(officeReducedMotion() || scene.settled){entry.node.remove();return;}
+  scene.leaving.set(entry.node,Date.now()+400);
+  entry.node.classList.add('office-leaving');
+  entry.node.addEventListener('animationend', () => {entry.node.remove();scene.leaving.delete(entry.node)});
+}
+function drawOffice(target, model) {
+  const scene = officeEnsure(target), els = scene.els, now = Date.now();
+  scene.svg.setAttribute('viewBox', officeViewBox(model.width, model.height));
+  const switched = officeLastProjection !== officeProjection; // a view switch jumps, never animates
+  officeLastProjection = officeProjection;
+  scene.settled = model.settle || switched;
+  officePrune(scene, now);
+  scene.svg.setAttribute('class', 'office-scene' + (model.settle || switched ? ' office-settle' : ''));
+  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
+    const entry = els.get(key);
+    if (entry && entry.sig === sig) return { node: entry.node, fresh: false };
+    const node = entry ? entry.node : officeNode('g', {});
+    paint(node);
+    if (entry) entry.sig = sig;
+    else {
+      if (appear !== false && !scene.settled && !officeReducedMotion()) { node.classList.add('office-appear'); node.addEventListener('animationend', () => node.classList.remove('office-appear')); }
+      layer.append(node);
+      els.set(key, { node, sig });
+    }
+    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);
+  }
+  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));
+    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));
+    }
+  }
+  const cards = [];
+  for (const desk of model.desks) cards.push(...desk.cards);
+  for (const room of model.rooms) cards.push(...room.cards);
+  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));
+    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
+  }
+  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);
+  }
+  const deskById = new Map(model.desks.map((desk) => [desk.id, desk]));
+  // Warning lines between desks (phase 3): overlap, conflict and cohort links, ids only, state-driven (no fade).
+  for (const link of model.links) {
+    const offset = link.kind === 'overlap' ? -1.5 : link.kind === 'cohort' ? 1.5 : 0;
+    const points = [...new Set(link.peers)].map((id) => deskById.get(id)).filter(Boolean).map((d) => {const p=officeProject(d.x + d.w / 2,d.y + d.h / 2);return [p[0],p[1]+offset]});
+    if (points.length < 2) continue;
+    const segments = [];
+    for (let i = 0; i + 1 < points.length; i++) segments.push([points[i], points[i + 1]]);
+    const label = link.kind + ' ' + link.tasks.map((id) => '#' + id).join(' ');
+    keep('link:' + link.kind + ':' + link.tasks.join(','), JSON.stringify([link.kind, link.tasks, link.peers, points]), scene.layers.links,
+      (n) => {
+        n.setAttribute('class', 'office-link office-link-' + link.kind);
+        n.setAttribute('aria-hidden', 'true');
+        n.replaceChildren(...segments.map(([a, b]) => officeNode('line', { x1: a[0], y1: a[1], x2: b[0], y2: b[1], class: 'office-link-line' })),
+          officeNode('text', { x: (segments[0][0][0] + segments[0][1][0]) / 2 + 1, y: (segments[0][0][1] + segments[0][1][1]) / 2 - 1, class: 'office-link-label' }, officeClip(label, 28)));
+      }, false);
+  }
+  for (const arc of model.arcs) {
+    if(arc.until<=now)continue;
+    const from = deskById.get(arc.from);
+    const label = arc.kind + (arc.task ? ' #' + arc.task : '');
+    for (const target of arc.to.length ? arc.to : model.desks.map((desk) => desk.id)) {
+      const to = deskById.get(target);
+      if (!to) continue;
+      const p1 = officeProject(from ? from.x + from.w / 2 : 1, from ? from.y : 1), p2 = officeProject(to.x + to.w / 2, to.y);
+      const mx = (p1[0] + p2[0]) / 2, my = Math.min(p1[1], p2[1]) - 4;
+      const angle = Math.atan2(p2[1] - my, p2[0] - mx);
+      const tip = (a) => [officeRound(p2[0] - 1.5 * Math.cos(a)), officeRound(p2[1] - 1.5 * Math.sin(a))];
+      const cls = 'office-arc' + (arc.priority === 'important' ? ' office-arc-important' : '') + (arc.dropped ? ' office-arc-dropped' : '');
+      const { node, fresh } = keep('arc:' + arc.seq + ':' + target, JSON.stringify([arc.seq, target, arc.kind, arc.task, arc.priority, arc.dropped, p1, p2]), scene.layers.arcs,
+        (n) => { n.setAttribute('class', cls); n.setAttribute('aria-hidden', 'true'); n.replaceChildren(
+          officeNode('path', { d: 'M ' + officeRound(p1[0]) + ' ' + officeRound(p1[1]) + ' Q ' + officeRound(mx) + ' ' + officeRound(my) + ' ' + officeRound(p2[0]) + ' ' + officeRound(p2[1]), class: 'office-arc-path' }),
+          officePolygon([[officeRound(p2[0]), officeRound(p2[1])], tip(angle - 0.45), tip(angle + 0.45)], 'office-arc-head'),
+          officeNode('text', { x: mx, y: my - 0.8, 'text-anchor': 'middle', class: 'office-arc-label' }, label)); }, false);
+      if (fresh) officeFade(node, arc.until, now);
+    }
+  }
+  const latestAlert = new Map();
+  for (const alert of model.alerts) if (alert.until > now) latestAlert.set(alert.peer, alert);
+  for (const [peer, alert] of latestAlert) {
+    const desk = deskById.get(peer);
+    if (!desk) continue;
+    const { node, fresh } = keep('alert:' + peer, String(alert.seq), scene.layers.marks,
+      (n) => { officePlace(n, desk.x, desk.y); n.setAttribute('class', 'office-alertmark'); n.setAttribute('aria-hidden', 'true'); n.replaceChildren(officeNode('text', { x: desk.w - 1, y: 5.1, 'text-anchor': 'end', class: 'office-alert' }, '! ' + alert.kind)); }, false);
+    if (fresh) officeFade(node, alert.until, now);
+  }
+  for (const desk of model.desks) {
+    const latch = model.latched[desk.id];
+    if (desk.condition !== 'idle' || !latch || latch.until <= now) continue;
+    const { node, fresh } = keep('latch:' + desk.id, String(latch.seq), scene.layers.marks,
+      (n) => { officePlace(n, desk.x, desk.y); n.setAttribute('class', 'office-latchmark'); n.setAttribute('aria-hidden', 'true'); n.replaceChildren(officeNode('text', { x: 5.2, y: 3.9, class: 'office-latch' }, '● busy')); }, false);
+    if (fresh) officeFade(node, latch.until, now);
+  }
+  for (const key of [...els.keys()]) if (!seen.has(key)) officeLeave(scene, key);
+  officeDesks.clear(); officeCards.clear();
+  for (const [key, entry] of els) {
+    if (key.startsWith('desk:')) officeDesks.set(key.slice(5), entry.node);
+    else if (key.startsWith('card:')) officeCards.set(Number(key.slice(5)), entry.node);
+  }
+}
+function renderOffice(snapshot) {
+  const view = officeView.get(), section = $('office-section');
+  officeProjection = view === 'isometric' ? 'iso' : 'flat';
+  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;
+  }
+  const cols = (section.clientWidth || 0) >= 1000 ? 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]);
+  officePrune(officeScene,Date.now());
+  if (signatures.get('office') === signature) return;
+  signatures.set('office', signature);
+  drawOffice($('office'), model);
+}
+// office-scene-end
 const STREAM_KINDS = ['chat', 'task', 'review', 'status', 'budget', 'presence', 'state'];
 let streamFilter = '';
 function applyStreamFilter(node) { node.hidden = streamFilter !== '' && node.dataset.kind !== streamFilter; }
@@ -344,6 +1141,132 @@ function renderBench(bench) {
     }
   });
 }
+// #258: the hub's memory, read-only. A tier at a time, filtered; selecting an entry or a node shows its neighbourhood
+// (inline SVG, a small force layout computed here) with the same edges as a list, and its detail.
+const memoryQuery = {tier:'long', q:'', kind:'', peer:'', machine:'', since:'', node:'', hops:1};
+let memoryGeneration = -1;
+function memoryInput() {
+  if (memoryGeneration !== viewGeneration) { // another project: its own nodes, peers and machines
+    memoryGeneration = viewGeneration; memoryQuery.node = ''; memoryQuery.peer = ''; memoryQuery.machine = '';
+    for (const id of ['memory-peer', 'memory-machine']) $(id).value = '';
+  }
+  const out = {tier:memoryQuery.tier, hops:memoryQuery.hops};
+  for (const key of ['q', 'kind', 'peer', 'machine', 'node']) if (memoryQuery[key]) out[key] = memoryQuery[key];
+  // A whole timestamp, floored to the hour so the query stays the same between polls.
+  if (memoryQuery.since) out.since = new Date(Math.floor((Date.now() - Number(memoryQuery.since) * 86400000) / 3600000) * 3600000).toISOString();
+  return out;
+}
+// The next poll (at most a second away) carries the changed query; polling is never started twice.
+function rerenderMemory() { for (const chip of $('memory-tiers').children) chip.setAttribute('aria-pressed', String(chip.dataset.tier === memoryQuery.tier)); }
+function memoryOptions(id, values, all, key) {
+  const select = $(id), keep = select.value;
+  const want = [''].concat(values);
+  if ([...select.options].map((o) => o.value).join('\0') === want.join('\0')) return;
+  select.replaceChildren(...want.map((v) => { const o = el('option', v || all); o.value = v; return o; }));
+  select.value = want.includes(keep) ? keep : '';
+  memoryQuery[key] = select.value; // a filter whose value is gone reads as none, on the page and in the next query
+}
+function layout(graph) {
+  // Deterministic: start on a circle in node order, then a fixed number of spring steps; no animation loop.
+  const W = 640, H = 320, n = graph.nodes.length, pos = new Map();
+  graph.nodes.forEach((node, i) => pos.set(node.id, {x: W / 2 + Math.cos(2 * Math.PI * i / Math.max(n, 1)) * W * 0.35, y: H / 2 + Math.sin(2 * Math.PI * i / Math.max(n, 1)) * H * 0.35}));
+  for (let step = 0; step < 120; step++) {
+    const force = new Map(graph.nodes.map((node) => [node.id, {x: 0, y: 0}]));
+    for (const a of graph.nodes) for (const b of graph.nodes) {
+      if (a.id >= b.id) continue;
+      const p = pos.get(a.id), q = pos.get(b.id), dx = p.x - q.x || 0.01, dy = p.y - q.y || 0.01, d2 = Math.max(dx * dx + dy * dy, 25), f = 4000 / d2;
+      force.get(a.id).x += f * dx / Math.sqrt(d2); force.get(a.id).y += f * dy / Math.sqrt(d2); force.get(b.id).x -= f * dx / Math.sqrt(d2); force.get(b.id).y -= f * dy / Math.sqrt(d2);
+    }
+    for (const e of graph.edges) {
+      const p = pos.get(e.from), q = pos.get(e.to); if (!p || !q) continue;
+      const dx = q.x - p.x, dy = q.y - p.y, d = Math.sqrt(dx * dx + dy * dy) || 1, f = (d - 90) * 0.05;
+      force.get(e.from).x += f * dx / d; force.get(e.from).y += f * dy / d; force.get(e.to).x -= f * dx / d; force.get(e.to).y -= f * dy / d;
+    }
+    for (const node of graph.nodes) { const p = pos.get(node.id), f = force.get(node.id); p.x = Math.min(W - 20, Math.max(20, p.x + Math.max(-10, Math.min(10, f.x)))); p.y = Math.min(H - 20, Math.max(20, p.y + Math.max(-10, Math.min(10, f.y)))); }
+  }
+  return pos;
+}
+function selectMemoryNode(node) { memoryQuery.node = memoryQuery.node === node ? '' : node; rerenderMemory(); }
+function renderMemory(memory) {
+  const tiers = $('memory-tiers');
+  if (!tiers.children.length) for (const [tier, label] of [['short', 'Short-term'], ['long', 'Long-term'], ['goals', 'Long-term tasks']]) {
+    const chip = el('button', label, 'chip'); chip.type = 'button'; chip.dataset.tier = tier;
+    chip.addEventListener('click', () => { memoryQuery.tier = tier; memoryQuery.node = ''; rerenderMemory(); });
+    tiers.append(chip);
+  }
+  for (const chip of tiers.children) chip.setAttribute('aria-pressed', String(chip.dataset.tier === memoryQuery.tier));
+  if (!memory) { $('memory-count').textContent = ''; update('memory-list', null, (target) => empty(target, 'Hub memory is off for this project, or nothing is stored yet.')); update('memory-graph', null, () => {}); update('memory-detail', null, () => {}); return; }
+  $('memory-count').textContent = memory.counts.long + ' long-term / ' + memory.counts.short + ' short-term / ' + (memory.counts.goals || 0) + ' open tasks';
+  if (memory.goals) {
+    // Long-term tasks: state, who holds the lease and until when (a conflict when two machines claimed it), linked board tasks.
+    const who = (m) => m === memory.machine ? 'this machine' : 'machine ' + m.slice(0, 8);
+    update('memory-list', {goals: memory.goals, node: memoryQuery.node}, (target) => {
+      if (!memory.goals.length) return empty(target, 'No long-term tasks. A person creates one with ahub goal new <title>.');
+      for (const g of memory.goals) {
+        const row = el('button', undefined, 'memory-row'); row.type = 'button'; row.setAttribute('aria-pressed', String(memoryQuery.node === 'goal:' + g.id));
+        const head = el('div', undefined, 'row-head');
+        head.append(el('span', g.title, 'label'), badge(g.state, g.state === 'done' ? 'ok' : g.state === 'blocked' ? 'err' : g.state === 'active' ? 'info' : ''));
+        const lease = g.lease.holder ? 'held by ' + who(g.lease.holder) + ' until ' + time(g.lease.until) + (g.lease.conflict.length ? ' / conflict: ' + g.lease.conflict.map(who).join(', ') : '') : g.lease.expired ? 'free (lease of ' + who(g.lease.lastHolder) + ' ended ' + time(g.lease.until) + ')' : 'free';
+        row.append(head, el('div', g.id.slice(0, 8) + ' / ' + lease + ' / ' + g.links.length + ' board task' + (g.links.length === 1 ? '' : 's') + (g.milestones.length ? ' / milestones: ' + g.milestones.join('; ') : ''), 'meta'));
+        if (g.lease.conflict.length) row.append(badge('lease conflict', 'warn'));
+        row.addEventListener('click', () => selectMemoryNode('goal:' + g.id));
+        target.append(row);
+      }
+    });
+  }
+  memoryOptions('memory-peer', memory.peers, 'All peers', 'peer');
+  memoryOptions('memory-machine', memory.machines, 'All machines', 'machine');
+  if (!memory.goals) update('memory-list', {entries: memory.entries, node: memoryQuery.node}, (target) => {
+    if (!memory.entries.length) return empty(target, 'No ' + memory.tier + '-term entries match.');
+    for (const entry of memory.entries) {
+      const row = el('button', undefined, 'memory-row'); row.type = 'button'; row.setAttribute('aria-pressed', String(memoryQuery.node === 'mem:' + entry.id));
+      const head = el('div', undefined, 'row-head');
+      head.append(el('span', (entry.title ? entry.title + ': ' : '') + entry.text.split('\n')[0].slice(0, 140), 'label'), badge(entry.kind, entry.kind === 'fail' ? 'err' : entry.kind === 'decision' ? 'ok' : entry.kind === 'contract' ? 'warn' : ''));
+      row.append(head, el('div', entry.id.slice(0, 8) + ' / ' + entry.peer + ' / ' + time(entry.at) + (entry.scope === 'shared' ? ' / shared' : '') + (entry.supersededBy ? ' / superseded' : '') + (entry.machine !== memory.machine ? ' / from machine ' + entry.machine.slice(0, 6) : ''), 'meta'));
+      row.addEventListener('click', () => selectMemoryNode('mem:' + entry.id));
+      target.append(row);
+    }
+  });
+  update('memory-graph', memory.graph || null, (target) => {
+    const graph = memory.graph;
+    if (!graph || !graph.nodes.length) return;
+    const NS = 'http://www.w3.org/2000/svg', svg = document.createElementNS(NS, 'svg'), pos = layout(graph);
+    svg.setAttribute('viewBox', '0 0 640 320'); svg.setAttribute('role', 'img'); svg.setAttribute('aria-label', 'Neighbourhood of ' + memory.node + ': ' + graph.nodes.length + ' nodes, ' + graph.edges.length + ' edges; the list below has the same edges');
+    for (const e of graph.edges) {
+      const p = pos.get(e.from), q = pos.get(e.to); if (!p || !q) continue;
+      const line = document.createElementNS(NS, 'line'); line.setAttribute('x1', p.x); line.setAttribute('y1', p.y); line.setAttribute('x2', q.x); line.setAttribute('y2', q.y); line.setAttribute('class', 'medge ' + e.rel);
+      svg.append(line);
+    }
+    for (const node of graph.nodes) {
+      const p = pos.get(node.id), g = document.createElementNS(NS, 'g'), c = document.createElementNS(NS, 'circle'), t = document.createElementNS(NS, 'text');
+      g.setAttribute('class', 'mnode ' + node.type + (node.kind ? ' ' + node.kind : '') + (node.id === memory.node ? ' selected' : '')); g.setAttribute('tabindex', '0'); g.setAttribute('role', 'button'); g.setAttribute('aria-label', node.type + ' ' + node.label);
+      c.setAttribute('cx', p.x); c.setAttribute('cy', p.y); c.setAttribute('r', node.type === 'memory' ? 9 : 6);
+      t.setAttribute('x', p.x + 11); t.setAttribute('y', p.y + 4); t.textContent = node.label.slice(0, 28);
+      g.append(c, t);
+      g.addEventListener('click', () => selectMemoryNode(node.id));
+      g.addEventListener('keydown', (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); selectMemoryNode(node.id); } });
+      svg.append(g);
+    }
+    const list = el('ul', undefined, 'memory-edges');
+    for (const e of graph.edges) list.append(el('li', e.from + ' ' + e.rel + ' ' + e.to));
+    target.append(svg, list);
+  });
+  update('memory-detail', memory.detail || null, (target) => {
+    const d = memory.detail; if (!d) return;
+    const box = el('div', undefined, 'row');
+    box.append(el('div', d.kind + ', ' + d.tier + '-term' + (d.expiresAt ? ' until ' + time(d.expiresAt) : '') + ', ' + d.scope, 'label'));
+    box.append(el('div', 'by ' + d.peer + ' on machine ' + d.machine + ', ' + time(d.at) + ', project ' + d.project + (d.task ? ', task ' + d.task : '') + (d.machine === memory.machine ? ' (this machine)' : ' (synced)'), 'meta'));
+    if (d.supersededBy) box.append(el('div', 'superseded by ' + d.supersededBy.slice(0, 8), 'meta'));
+    if (d.promotedFrom) box.append(el('div', 'promoted from ' + d.promotedFrom.slice(0, 8), 'meta'));
+    if (d.about.length) box.append(el('div', 'about: ' + d.about.join(', '), 'meta'));
+    box.append(el('div', (d.title ? d.title + '\n' : '') + d.text, 'body'));
+    target.append(box);
+  });
+}
+for (const [id, key] of [['memory-kind', 'kind'], ['memory-peer', 'peer'], ['memory-machine', 'machine'], ['memory-since', 'since']]) $(id).addEventListener('change', () => { memoryQuery[key] = $(id).value; rerenderMemory(); });
+$('memory-hops').addEventListener('change', () => { memoryQuery.hops = Number($('memory-hops').value); rerenderMemory(); });
+let memorySearch;
+$('memory-q').addEventListener('input', () => { clearTimeout(memorySearch); memorySearch = setTimeout(() => { memoryQuery.q = $('memory-q').value.trim(); rerenderMemory(); }, 300); });
 function renderStreamChips() {
   const group = $('stream-filters');
   if (group.children.length) return;
@@ -359,9 +1282,29 @@ function renderStreamChips() {
     group.append(chip);
   }
 }
+$('planning-task').addEventListener('change',loadPlanning);$('planning-reload').addEventListener('click',loadPlanning);$('release-edit').addEventListener('change',loadReleasePlanning);$('release-reload').addEventListener('click',loadReleasePlanning);
+$('planning').addEventListener('submit',async event=>{event.preventDefault();if(!planningEdit || !sameBoardContext(planningEdit.context) || boardViewState?.snapshot.planningCapabilities?.enabled!==true)return notice('Select a task from its current board.',true);
+  const fields={priority:$('planning-priority').value===''?null:Number($('planning-priority').value),rank:$('planning-rank').value===''?null:Number($('planning-rank').value),release:$('planning-release').value===''?null:Number($('planning-release').value),plannedStart:plannedDateInput('planning-start'),due:plannedDateInput('planning-due'),pinned:$('planning-pinned').checked};
+  await action({action:'planning',id:planningEdit.id,revision:planningEdit.revision,fields,reason:$('planning-reason').value},event.submitter);
+});
+$('split-backlog').addEventListener('submit',async event=>{event.preventDefault();if(!planningEdit || !sameBoardContext(planningEdit.context) || boardViewState?.snapshot.planningCapabilities?.split!==true)return notice('Select a current backlog task to split.',true);const titles=$('split-titles').value.split('\n').map(title=>title.trim()).filter(Boolean),parts=titles.map((title,index)=>({title,...($('split-sequential').checked && index>0 ? {afterParts:[index-1]} : {})}));await action({action:'backlog_split',id:planningEdit.id,revision:planningEdit.revision,parts,reason:$('split-reason').value},event.submitter)});
+$('planning-undo').addEventListener('click',async()=>{if(planningEdit && sameBoardContext(planningEdit.context))await action({action:'planning_undo',id:planningEdit.id,revision:planningEdit.revision},$('planning-undo'))});
+$('release-new').addEventListener('submit',async event=>{event.preventDefault();if(!sameBoardContext(boardContext()) || boardViewState?.snapshot.planningCapabilities?.enabled!==true)return notice('Release planning is unavailable.',true);await action({action:'release_new',name:$('release-name').value,goal:$('release-goal').value,order:Number($('release-order').value)},event.submitter)});
+$('release-plan').addEventListener('submit',async event=>{event.preventDefault();if(!releaseEdit || !sameBoardContext(releaseEdit.context))return notice('Select a current release.',true);await action({action:'release_change',id:releaseEdit.id,revision:releaseEdit.revision,fields:{plannedStart:plannedDateInput('release-start'),cut:plannedDateInput('release-cut'),ship:plannedDateInput('release-ship')}},event.submitter)});
+$('task-release-filter').addEventListener('change',()=>{if(boardViewState)renderBoard(boardViewState.snapshot,boardViewState.peers,boardViewState.ids)});
+$('task-peer-filter').addEventListener('change',()=>{if(boardViewState)renderBoard(boardViewState.snapshot,boardViewState.peers,boardViewState.ids)});
+$('task-lanes').addEventListener('change',()=>{if(boardViewState)renderBoard(boardViewState.snapshot,boardViewState.peers,boardViewState.ids)});
+for (const [id, operation] of [['delivery-queue','sdlc_queue'],['delivery-release','sdlc_release']]) $(id).addEventListener('click', async () => {
+  const repo = $('delivery-repo').value.trim();
+  const liveIssues = $('delivery-live').value.trim() ? $('delivery-live').value.split(/[, ]+/).filter(Boolean).map(Number) : [];
+  if (!/^[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+$/.test(repo) || liveIssues.length > 32 || liveIssues.some(id => !Number.isSafeInteger(id) || id <= 0)) { notice('Enter owner/repository and valid issue numbers.', true); return; }
+  const report = await action({action:operation,repo,liveIssues}, $(id));
+  if (report) $('delivery-report').textContent = JSON.stringify(report, null, 2);
+});
 $('task-filter').addEventListener('change', () => { if (!stopped && snapshotValid && lastSnapshot) render(lastSnapshot); });
+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 (await action(payload, event.submitter) && generation === viewGeneration) { $('title').value = ''; $('detail').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 = ''; } });
 (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>