pmx-canvas 0.7.0 → 0.7.2

package/src/client/nodes/PromptNode.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { IconClose } from '../icons';
 import { updateNodeData } from '../state/canvas-store';
 import { fetchSlashCommands, renderMarkdown, submitCanvasPrompt, submitThreadReply } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
@@ -98,6 +99,7 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
       <button
         type="button"
         onClick={onDismiss}
+        aria-label="Dismiss error"
         style={{
           background: 'none',
           border: 'none',
@@ -107,7 +109,7 @@ function ErrorBanner({ message, onDismiss }: { message: string | null; onDismiss
           padding: '0 2px',
         }}
       >
-        {'\u00d7'}
+        <IconClose size={14} />
       </button>
     </div>
   );

package/src/client/state/attention-bridge.ts

@@ -274,7 +274,9 @@ function enqueueToast(entry: AttentionEntry): void {
 
 /** Show a transient toast from arbitrary client code (e.g. AX action feedback). */
 export function showToast(tone: AttentionTone, title: string, detail = '', nodeIds: string[] = []): void {
-  enqueueToast(makeEntry(tone, title, detail, nodeIds));
+  const entry = makeEntry(tone, title, detail, nodeIds);
+  pushAttentionHistory(entry);
+  enqueueToast(entry);
 }
 
 function pulseNodes(nodeIds: string[]): void {

package/src/client/state/sse-bridge.ts

@@ -41,7 +41,7 @@ import {
 import { agentActivity, applyPresenceSnapshot, sessionActive } from './presence-store';
 import { applyHumanSnapshot, startHumanPresence } from './human-store';
 import type { HumanPresenceSnapshot } from '../../shared/human-presence.js';
-import { applySessionReceipt, refreshTimeline } from './session-store';
+import { applySessionReceipt, dismissSessionReceipt, refreshTimeline } from './session-store';
 import { initSessionThemeOverride, themeOverrideActive } from './theme-override';
 import { DEFAULT_POSITIONS, makeNodeState } from './node-factory';
 import { invalidateTokenCache } from '../theme/tokens';
@@ -479,6 +479,8 @@ function resyncForBoardSwitch(): void {
   hasInitialServerLayout.value = false;
   resetIntents();
   resetCanvasInteractionState();
+  resetAttentionBridge();
+  dismissSessionReceipt();
   axSurfaceState.value = null;
   void refreshAxSurface();
   const layoutAtRequest = layoutRevision;

package/src/client/theme/global.css

@@ -760,6 +760,11 @@ body,
   border-radius: calc(3px * var(--node-chrome-scale, 1));
 }
 
+.canvas-node .node-controls button svg {
+  width: 1em;
+  height: 1em;
+}
+
 .canvas-node .node-controls button:hover {
   background: var(--c-surface-hover);
   color: var(--c-text);
@@ -1466,6 +1471,10 @@ body,
   animation: presence-pulse 1.4s ease-in-out infinite;
 }
 .session-collapse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   width: 26px;
   height: 26px;
   border: 1px solid transparent;
@@ -1682,8 +1691,9 @@ body,
   }
 }
 .session-section-chevron {
+  display: inline-flex;
+  flex-shrink: 0;
   color: var(--c-muted);
-  font-size: 13px;
   transition: transform 0.15s ease;
 }
 .session-section-chevron.is-open {
@@ -1966,8 +1976,13 @@ body,
   white-space: nowrap;
 }
 .command-bar-chip-unpin {
-  width: 14px;
-  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
   border: none;
   border-radius: 50%;
   background: none;
@@ -4784,7 +4799,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   position: absolute;
   top: 18px;
   right: 18px;
-  max-width: min(260px, calc(100% - 24px));
+  max-width: min(360px, calc(100% - 36px));
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -4792,7 +4807,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
   backdrop-filter: blur(14px);
   border: 1px solid color-mix(in srgb, var(--c-line) 76%, var(--c-warn) 24%);
-  border-radius: 999px;
+  border-radius: 12px;
   box-shadow: 0 8px 22px var(--c-shadow);
   color: var(--c-text);
   font: inherit;
@@ -4831,15 +4846,27 @@ html.is-node-resizing .ext-app-preview-catcher {
   box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent);
 }
 
+.attention-toast-copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+
+.attention-toast-detail {
+  color: var(--c-text-soft);
+  font-size: 12px;
+  line-height: 1.45;
+  max-height: 9em;
+  overflow: auto;
+}
+
 .attention-toast-title {
   font-size: 12px;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: -0.005em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
 }
 
 .attention-history {
@@ -6841,12 +6868,23 @@ html.is-node-dragging .intent-line-layer {
   padding: 4px 12px;
   cursor: pointer;
 }
-.is-presenting > :not(.app-main):not(.presentation-error),
+.is-presenting > :not(.app-main):not(.presentation-error):not(.presentation-navigation),
 .is-presenting .app-main > :not(.canvas-region),
 .is-presenting .canvas-region > :not(.canvas-viewport) {
   display: none !important;
 }
 .is-presenting .canvas-viewport { pointer-events: none; }
+.presentation-navigation {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+}
+.presentation-exit {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  box-shadow: 0 2px 12px var(--c-shadow);
+}
 .presentation-error {
   position: fixed;
   bottom: 16px;
@@ -6873,7 +6911,7 @@ html.is-node-dragging .intent-line-layer {
   align-items: center;
   gap: 6px;
   max-width: 280px;
-  padding: 4px 8px;
+  padding: 6px 8px;
   margin-left: -8px;
   background: none;
   border: 1px solid transparent;
@@ -6891,7 +6929,8 @@ html.is-node-dragging .intent-line-layer {
   white-space: nowrap;
 }
 .board-switcher-caret {
-  font-size: 10px;
+  display: inline-flex;
+  flex-shrink: 0;
   color: var(--c-text-soft);
 }
 .board-switcher-menu {
@@ -7104,10 +7143,17 @@ html.is-node-dragging .intent-line-layer {
 }
 .export-dialog-links {
   display: flex;
+  flex-wrap: wrap;
   gap: 12px;
+  margin-top: 12px;
 }
 .export-dialog-links a {
-  color: var(--c-accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+  word-break: normal;
 }
 
 /* ── Home categories ── */
@@ -7267,9 +7313,42 @@ html.is-node-dragging .intent-line-layer {
 .attachment-node p { margin: 0; color: var(--c-text-soft); line-height: 1.5; }
 .attachment-node a, .md-import-source a { color: var(--c-accent); }
 .attachment-status { font-weight: 600; }
-.attachment-node .home-board-action { border-color: var(--c-line); color: var(--c-text); min-height: 34px; }
-.attachment-node .home-board-action:hover { background: var(--c-panel); border-color: var(--c-accent); }
+.attachment-button,
+.presentation-exit,
+.export-dialog-links a {
+  min-height: 38px;
+  padding: 8px 14px;
+  border: 1px solid var(--c-text-soft);
+  border-radius: 8px;
+  background: var(--c-panel);
+  color: var(--c-text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.attachment-button.is-primary,
+.export-dialog-links a.is-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
+.attachment-button:hover:not(:disabled),
+.presentation-exit:hover,
+.export-dialog-links a:hover { filter: brightness(1.12); }
+.attachment-button:focus-visible,
+.presentation-exit:focus-visible,
+.export-dialog-links a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
+.attachment-button:disabled { opacity: 0.5; cursor: default; }
 .attachment-review { width: 100%; border-top: 1px solid var(--c-line); padding-top: 12px; }
+.attachment-review-actions {
+  position: sticky;
+  bottom: -16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 16px 0;
+  border-top: 1px solid var(--c-line);
+  background: var(--c-panel);
+  z-index: 1;
+}
 .attachment-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); padding: 12px; background: var(--c-bg); border-radius: 8px; }
 .attachment-review h4 { margin-bottom: 6px; }
 .md-import-source { padding: 6px 12px; font-size: 11px; overflow-wrap: anywhere; color: var(--c-text-soft); border-top: 1px solid var(--c-line); }

package/src/mcp/server.ts

@@ -797,8 +797,8 @@ export async function startMcpServer(): Promise<void> {
     'canvas://boards',
     {
       description:
-        'The boards in this workspace with their categories, most recently opened first, and which one the ' +
-        'human has open (activeBoardId; null = Home). Your writes go to the open board; ask the human to open another.',
+        'The boards in this workspace with their categories, most recently opened first, and which one is ' +
+        'open (activeBoardId; null = Home). Writes go to the open board; use canvas_board action "open" to switch the shared workbench.',
       mimeType: 'application/json',
     },
     async () => {

package/src/server/agent-presence.ts

@@ -278,10 +278,10 @@ export class AgentPresenceRegistry {
   private attributedKey(input: PresenceTouch): string {
     const own = presenceKey(input.source, input.agentId);
     // Identified writers keep their key; attaches run the twin-merge in touch().
-    if (input.agentId?.trim() || input.attached === true || this.presences.get(own)?.attached) return own;
+    if (input.agentId?.trim() || this.presences.get(own)?.attached) return own;
     // A channel that attach-merged into a session stays that session's — its
-    // writes AND its detach belong to the merged session, however many other
-    // sessions are attached.
+    // writes, repeat attaches AND its detach belong to the merged session,
+    // however many other sessions are attached.
     const alias = this.aliases.get(own);
     if (alias && this.presences.get(alias)?.attached) return alias;
     if (input.attached !== undefined) return own;
@@ -338,15 +338,21 @@ export class AgentPresenceRegistry {
   touch(input: PresenceTouch, now = Date.now()): AgentPresence {
     let key = this.attributedKey(input);
     const own = presenceKey(input.source, input.agentId);
-    if (input.attached === true && !input.agentId?.trim()) {
-      // One agent, two channels: an attach whose label matches an ALREADY
-      // attached session (Copilot's extension presence + its MCP server both
-      // announcing "GitHub Copilot") is the same agent — merge instead of
-      // showing a second session, and remember the alias so this channel's
-      // later writes and detach land on the merged session too.
+    if (input.attached === true && !input.agentId?.trim() && key === own) {
+      // One agent, two channels: a transport attach belongs to the sole
+      // attached host even when the agent gives its task a different label.
+      // With several hosts, only the existing matching-label rule applies.
+      // Keep explicit agentIds separate, and preserve the host's consumer key
+      // so steering still reaches its poller. Browser placeholders are handled
+      // below, where their baseline and adopted-work rules are preserved.
       const label = input.label ?? input.source;
-      const twin = [...this.presences.values()].find(
-        (presence) => presence.attached && presence.sessionId !== own && !presence.agentId && presence.label === label,
+      const attached = [...this.presences.values()].filter((presence) => presence.attached);
+      const twin = attached.find(
+        (presence) =>
+          presence.sessionId !== own &&
+          !presence.agentId &&
+          (presence.label === label ||
+            (TRANSPORT_SOURCES.includes(input.source) && attached.length === 1 && presence.source !== 'browser')),
       );
       if (twin) {
         this.aliases.set(own, twin.sessionId);

package/src/server/board-export.ts

@@ -11,8 +11,9 @@
  */
 import { existsSync, mkdirSync, readFileSync, realpathSync, statSync, writeFileSync } from 'node:fs';
 import { dirname, isAbsolute, join, relative, resolve, sep } from 'node:path';
-import { Marked, type RendererThis, type Tokens } from 'marked';
+import { Marked, Renderer, type RendererThis, type Tokens } from 'marked';
 import { canvasThemeScheme } from '../shared/themes.js';
+import { delimiterForPath, parseDelimitedText } from '../shared/delimited-text.js';
 import { buildJsonRenderViewerHtml, escapeInlineScriptSource, readJsonRenderBundle } from '../json-render/server.js';
 import type { JsonRenderSpec } from '../json-render/server.js';
 import { getCanvasNodeTitle } from './canvas-serialization.js';
@@ -89,6 +90,9 @@ function createMarkdown(remoteImages: Set<string>, links: Set<string>): Marked {
       html({ text: raw }: Tokens.HTML | Tokens.Tag) {
         return escapeHtml(raw);
       },
+      table(this: RendererThis, token: Tokens.Table) {
+        return tableScroll(Renderer.prototype.table.call(this, token));
+      },
       link(this: RendererThis, { href, tokens }: Tokens.Link) {
         const inner = this.parser.parseInline(tokens);
         if (/^https?:/i.test(href)) links.add(href);
@@ -136,6 +140,24 @@ function pre(value: string, className = ''): string {
   return `<pre class="${className}">${escapeHtml(value)}</pre>`;
 }
 
+function tableScroll(html: string): string {
+  return `<div class="table-scroll" role="region" aria-label="Table" tabindex="0">${html}</div>`;
+}
+
+function fileBody(value: string, name: string): string {
+  const delimiter = delimiterForPath(name);
+  if (delimiter) {
+    const table = parseDelimitedText(value, delimiter);
+    if (table.header.length > 1) {
+      // Match the workbench's bounded table preview without losing the remainder.
+      const preview = table.rows.slice(0, 500);
+      const html = `<table><thead><tr>${table.header.map((cell) => `<th scope="col">${escapeHtml(cell)}</th>`).join('')}</tr></thead><tbody>${preview.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
+      return `${tableScroll(html)}${table.rows.length > preview.length ? `<details><summary>Showing 500 of ${table.rows.length} rows — full text</summary>${pre(value, 'code')}</details>` : ''}`;
+    }
+  }
+  return pre(value, 'code');
+}
+
 function rows(entries: Array<[string, unknown]>): string {
   const cells = entries
     .filter(([, value]) => value !== undefined && value !== null && value !== '')
@@ -258,20 +280,27 @@ async function collect(
         break;
       case 'status':
         card.html = rows([
-          ['Phase', data.phase],
+          ['Phase', text(data.phase).trim() || text(data.content).trim() || text(data.status).trim() || 'idle'],
           ['Message', data.message],
           ['Detail', data.detail],
+          ['Active tool', data.activeTool],
         ]);
         break;
       case 'context': {
         const items = Array.isArray(data.cards) ? (data.cards as Array<Record<string, unknown>>) : [];
-        card.html = `<ul class="list">${items
-          .map((item) => `<li><strong>${escapeHtml(text(item.title))}</strong> ${escapeHtml(text(item.summary))}</li>`)
-          .join('')}</ul>`;
+        card.html = `${rows([
+          ['Tokens', data.currentTokens],
+          ['Token limit', data.tokenLimit],
+          ['Messages', data.messagesLength],
+        ])}${
+          items.length
+            ? `<ul class="list">${items.map((item) => `<li><strong>${escapeHtml(text(item.title) || text(item.label))}</strong><p>${escapeHtml(text(item.summary))}</p></li>`).join('')}</ul>`
+            : `<p class="prose">${escapeHtml(text(data.content) || text(data.rendered).replace(/<[^>]+>/g, ' '))}</p>`
+        }`;
         break;
       }
       case 'ledger':
-        card.html = `${text(data.content) ? pre(text(data.content)) : ''}${rows(
+        card.html = `${text(data.content) ? pre(text(data.content).replaceAll('\\n', '\n')) : ''}${rows(
           Object.entries(data).filter(
             ([key]) => !['title', 'content', '__type', 'strictSize', 'arrangeLocked'].includes(key),
           ),
@@ -279,10 +308,11 @@ async function collect(
         break;
       case 'trace':
         card.html = rows([
-          ['Tool', data.toolName],
-          ['Status', data.status],
+          ['Tool', text(data.toolName) || title],
+          ['Status', text(data.status) || 'running'],
           ['Duration', data.duration],
-          ['Result', data.resultSummary],
+          ['Result', text(data.resultSummary) || text(data.content)],
+          ['Error', data.error],
         ]);
         break;
       case 'diff':
@@ -301,7 +331,7 @@ async function collect(
           .join('\n')}</pre>`;
         break;
       case 'prompt':
-        card.html = pre(text(data.text));
+        card.html = `<div class="prose">${escapeHtml(text(data.text))}</div>`;
         break;
       case 'response':
         card.html = `<div class="md">${await markdown.parse(text(data.content))}</div>`;
@@ -327,9 +357,9 @@ async function collect(
           if (img) manifest.embeddedImages += 1;
         }
         card.html = img
-          ? `<img class="image" src="${escapeHtml(img)}" alt="${escapeHtml(alt)}" referrerpolicy="no-referrer">${
-              text(data.caption) ? `<p class="dim">${escapeHtml(text(data.caption))}</p>` : ''
-            }`
+          ? `<figure class="image-figure"><img class="image" src="${escapeHtml(img)}" alt="${escapeHtml(alt)}" referrerpolicy="no-referrer">${
+              text(data.caption) ? `<figcaption class="dim">${escapeHtml(text(data.caption))}</figcaption>` : ''
+            }</figure>`
           : `<div class="placeholder">Image not available: ${escapeHtml(src)}</div>`;
         break;
       }
@@ -337,14 +367,14 @@ async function collect(
         const path = text(data.path);
         if (!path) {
           // Inline content the board itself holds, not a file on disk.
-          card.html = pre(text(data.fileContent) || text(data.content), 'code');
+          card.html = fileBody(text(data.fileContent) || text(data.content), title);
           break;
         }
         const body = includeFiles ? fileText(node, path) : null;
         manifest.files.push({ nodeId: node.id, path, included: body !== null });
         card.html = `<p class="dim">${escapeHtml(path)}</p>${
           body !== null
-            ? pre(body, 'code')
+            ? fileBody(body, path)
             : '<div class="placeholder">File contents not included in this export.</div>'
         }`;
         break;
@@ -527,7 +557,7 @@ function exportPage(input: {
   </div>
 </header>
 <main id="stage" aria-label="Board"><div id="world"><svg id="edges" aria-hidden="true"></svg></div></main>
-<div id="overlay" hidden><div class="sheet" role="dialog" aria-modal="true"><header><strong id="overlay-title"></strong><button type="button" id="overlay-close" aria-label="Close">×</button></header><div id="overlay-body"></div></div></div>
+<div id="overlay" hidden><div class="sheet" role="dialog" aria-modal="true" aria-labelledby="overlay-title"><header><strong id="overlay-title"></strong><button type="button" id="overlay-close" aria-label="Close">×</button></header><div id="overlay-body"></div></div></div>
 <script type="application/json" id="pmx-board">${scriptJson(input.board)}</script>
 <script type="application/json" id="pmx-assets">${scriptJson(input.assets)}</script>
 <script>${EXPORT_VIEWER_JS}</script>
@@ -540,7 +570,7 @@ const EXPORT_CSS = `
 :root{--bg:#0b1016;--panel:#121a23;--line:#263241;--text:#e8edf2;--soft:#9aa7b4;--accent:#4bbcff;--add:#2ea66f;--del:#e25d6e}
 [data-scheme=light]{--bg:#f4f6f8;--panel:#ffffff;--line:#d5dbe1;--text:#17202a;--soft:#5b6875;--accent:#0a6fc2;--add:#1c7a4f;--del:#b3263a}
 *{box-sizing:border-box}
-html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}
+html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}
 .bar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line);z-index:5}
 .bar .name{display:flex;flex-direction:column;min-width:0}
 .bar .name strong,.bar .name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -548,6 +578,7 @@ html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/
 .tools{display:flex;gap:6px;flex-shrink:0}
 button{font:inherit;color:var(--text);background:none;border:1px solid var(--line);border-radius:7px;padding:4px 10px;cursor:pointer}
 button:hover{border-color:var(--accent)}
+button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
 #stage{position:fixed;top:48px;left:0;right:0;bottom:0;overflow:hidden;cursor:grab;touch-action:none}
 #stage.panning{cursor:grabbing}
 #world{position:absolute;left:0;top:0;transform-origin:0 0}
@@ -556,25 +587,43 @@ button:hover{border-color:var(--accent)}
 #edges text{fill:var(--soft);font-size:12px;text-anchor:middle}
 .card{position:absolute;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.18)}
 .card.group{background:color-mix(in srgb,var(--accent) 5%,transparent);border-style:dashed;box-shadow:none}
-.card-title{flex-shrink:0;padding:7px 10px;font-weight:600;font-size:13px;border-bottom:1px solid var(--line);cursor:zoom-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.card-title{position:relative;flex-shrink:0;width:100%;text-align:left;padding:12px 42px 12px 18px;font-weight:600;font-size:13px;border:0;border-bottom:1px solid var(--line);border-radius:0;cursor:zoom-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--soft) 5%,var(--panel))}
+button.card-title:after{content:'↗';position:absolute;right:16px;color:var(--soft);font-size:16px}
 .card.group .card-title{border-bottom:none;cursor:default;color:var(--soft)}
-.card-body{flex:1;min-height:0;overflow:auto;padding:8px 10px}
-.card iframe,#overlay-body iframe{flex:1;width:100%;height:100%;border:0;background:var(--bg)}
-.md h1,.md h2,.md h3{margin:.4em 0 .3em;line-height:1.2}.md p{margin:.4em 0}.md img{max-width:100%}
-.md code,pre{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
-pre{margin:0;white-space:pre-wrap;word-break:break-word}
-pre.diff .add{color:var(--add)}pre.diff .del{color:var(--del)}pre.diff .hunk{color:var(--accent)}
-a{color:var(--accent)}
+.card-body{flex:1;min-height:0;min-width:0;overflow:auto;padding:20px;overflow-wrap:anywhere;overscroll-behavior:contain;cursor:auto}
+.card-body>:first-child,.md>:first-child{margin-top:0}.card-body>:last-child,.md>:last-child{margin-bottom:0}
+.card iframe,#overlay-body iframe{flex:1;min-height:0;width:100%;height:100%;border:0;background:var(--bg)}
+.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:1.4em 0 .6em;line-height:1.3;font-weight:650;letter-spacing:-.02em}
+.md h1{font-size:26px}.md h2{font-size:21px}.md h3{font-size:18px}.md h4,.md h5,.md h6{font-size:15px}
+.md p{margin:0 0 1em}.md img{max-width:100%;height:auto;border-radius:6px}
+.md ul,.md ol{padding-left:1.6em;margin:0 0 1em}.md li+li{margin-top:.35em}.md li>ul,.md li>ol{margin-top:.4em;margin-bottom:.4em}
+.md input[type=checkbox]{accent-color:var(--accent);margin-right:.5em}
+.md blockquote{margin:1em 0;padding:10px 16px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--soft)}
+.md blockquote>:last-child{margin-bottom:0}.md hr{border:0;border-top:1px solid var(--line);margin:24px 0}
+.md code,pre{font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}
+.md :not(pre)>code{padding:2px 5px;border:1px solid var(--line);border-radius:4px;background:color-mix(in srgb,var(--soft) 8%,var(--panel))}
+pre{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--soft) 5%,var(--panel));white-space:pre;overflow:auto;overflow-wrap:normal;overscroll-behavior:contain}
+.prose{white-space:pre-wrap}.table-scroll{width:100%;max-width:100%;overflow:auto;margin:16px 0;border:1px solid var(--line);border-radius:8px;overscroll-behavior:contain}
+.table-scroll table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;line-height:1.55;font-variant-numeric:tabular-nums}
+.table-scroll th,.table-scroll td{padding:10px 14px;min-width:90px;max-width:36ch;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;overflow-wrap:normal;white-space:pre-wrap}
+.table-scroll th{font-weight:650;background:color-mix(in srgb,var(--soft) 10%,var(--panel))}.table-scroll th:not([align]){text-align:left}
+.table-scroll tr:nth-child(even) td{background:color-mix(in srgb,var(--soft) 4%,var(--panel))}
+.table-scroll tr:last-child td{border-bottom:0}.table-scroll tr>:last-child{border-right:0}
+pre.diff .add{color:var(--add);background:color-mix(in srgb,var(--add) 9%,transparent)}pre.diff .del{color:var(--del);background:color-mix(in srgb,var(--del) 9%,transparent)}pre.diff .hunk{color:var(--accent)}
+a{color:var(--accent);text-underline-offset:3px}
 .dim{color:var(--soft)}
-.kv{border-collapse:collapse;font-size:12px}.kv th{text-align:left;color:var(--soft);padding:2px 10px 2px 0;vertical-align:top}.kv td{padding:2px 0}
-.list{margin:0;padding-left:18px}
-.image{max-width:100%;max-height:100%;object-fit:contain;display:block;margin:auto}
-.placeholder{padding:12px;border:1px dashed var(--line);border-radius:8px;color:var(--soft);font-size:12px}
+.kv{border-collapse:collapse;width:100%;font-size:14px;table-layout:fixed}.kv th{text-align:left;color:var(--soft);width:30%;font-weight:500}.kv th,.kv td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;white-space:pre-wrap}.kv tr:last-child>*{border-bottom:0}
+.list{list-style:none;margin:0;padding:0}.list li{padding:12px 0;border-bottom:1px solid var(--line)}.list li:last-child{border-bottom:0}.list p{margin:6px 0 0;color:var(--soft)}
+.image-figure{margin:0;height:100%;display:flex;flex-direction:column;gap:12px}.image{flex:1;min-height:0;max-width:100%;width:100%;object-fit:contain;display:block}.image-figure figcaption{flex-shrink:0;font-size:13px;text-align:center}
+.placeholder{padding:16px;border:1px dashed var(--line);border-radius:8px;color:var(--soft);font-size:14px;line-height:1.6}
+details{margin-top:16px}summary{cursor:pointer;color:var(--soft);margin-bottom:12px}
 #overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:24px;z-index:10}
 #overlay[hidden]{display:none}
 #overlay .sheet{width:min(1100px,100%);height:min(90vh,100%);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
 #overlay .sheet>header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
-#overlay-body{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column}
+#overlay-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
+#overlay-body .card-body{padding:28px 32px}#overlay-body .md{max-width:960px;margin:0 auto}
+@media(max-width:600px){#overlay{padding:8px}#overlay .sheet{height:100%}#overlay-body .card-body{padding:18px}.bar{padding:0 10px}.bar .name span{display:none}}
 `;
 
 const EXPORT_VIEWER_JS = `(() => {
@@ -606,12 +655,15 @@ for (const card of ordered) {
   const el = document.createElement('section');
   el.className = 'card' + (card.group ? ' group' : '');
   el.dataset.nodeId = card.id;
+  el.dataset.nodeType = card.kind;
   Object.assign(el.style, { left: card.x + 'px', top: card.y + 'px', width: card.w + 'px', height: card.h + 'px' });
-  const title = document.createElement('div');
+  const title = document.createElement(card.group ? 'div' : 'button');
   title.className = 'card-title';
   title.textContent = card.title;
   el.appendChild(title);
   if (!card.group) {
+    title.type = 'button';
+    title.setAttribute('aria-label', 'Expand ' + card.title);
     el.appendChild(body(card));
     title.addEventListener('click', () => expand(card));
   }
@@ -653,6 +705,7 @@ const zoomAt = (factor, cx, cy) => {
   apply();
 };
 stage.addEventListener('wheel', (e) => {
+  if (e.target.closest('.card-body') && !e.ctrlKey && !e.metaKey) return;
   e.preventDefault();
   const r = stage.getBoundingClientRect();
   zoomAt(Math.exp(-e.deltaY * 0.0015), e.clientX - r.left, e.clientY - r.top);
@@ -673,11 +726,23 @@ stage.addEventListener('pointerup', () => { drag = null; stage.classList.remove(
 document.querySelector('[data-zoom=in]').addEventListener('click', () => zoomAt(1.25, stage.clientWidth / 2, stage.clientHeight / 2));
 document.querySelector('[data-zoom=out]').addEventListener('click', () => zoomAt(0.8, stage.clientWidth / 2, stage.clientHeight / 2));
 document.querySelector('[data-zoom=fit]').addEventListener('click', fit);
-const close = () => { overlay.hidden = true; document.getElementById('overlay-body').replaceChildren(); };
+let invoker = null;
+const close = () => {
+  if (overlay.hidden) return;
+  overlay.hidden = true;
+  document.getElementById('overlay-body').replaceChildren();
+  stage.inert = false;
+  document.querySelector('.bar').inert = false;
+  invoker?.focus({ preventScroll: true });
+};
 function expand(card) {
+  invoker = document.activeElement;
   document.getElementById('overlay-title').textContent = card.title;
   document.getElementById('overlay-body').replaceChildren(body(card));
   overlay.hidden = false;
+  stage.inert = true;
+  document.querySelector('.bar').inert = true;
+  document.getElementById('overlay-close').focus();
 }
 document.getElementById('overlay-close').addEventListener('click', close);
 overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });

package/src/server/index.ts

@@ -44,6 +44,7 @@ import type { BackupFile, BackupStatus } from './backup.js';
 import type { ExportManifest } from './board-export.js';
 import { onFileNodeChanged } from './file-watcher.js';
 import { findOpenCanvasPosition, computeGroupBounds } from './placement.js';
+import { overlapsAny } from '../shared/placement.js';
 import { searchNodes, buildSpatialContext } from './spatial-analysis.js';
 import { mutationHistory, diffLayouts, formatDiff } from './mutation-history.js';
 import { recomputeCodeGraph, buildCodeGraphSummary, formatCodeGraph } from './code-graph.js';
@@ -741,14 +742,19 @@ export class PmxCanvas extends EventEmitter {
   } {
     if (canvasState.activeBoardId !== input.boardId) throw new Error('The captured target board is not active.');
     assertInsideFence('node.add', createTarget(input));
+    const obstacles = canvasState.getLayout().nodes;
+    const requested = { x: input.x ?? 40, y: input.y ?? 80 };
+    const position = overlapsAny(requested, 440, 360, obstacles, 48)
+      ? findOpenCanvasPosition(obstacles, 440, 360, 48)
+      : requested;
+    assertInsideFence('node.add', createTarget(position));
     const attachment = canvasState.storeAttachment({ ...input, mime: input.mime ?? 'application/octet-stream' });
     if (!attachment) throw new Error('Board not found.');
     const { id: nodeId, node } = addCanvasNode({
       type: 'file',
       title: input.name,
       data: { attachmentId: attachment.id, mime: attachment.mime, size: attachment.size },
-      x: input.x,
-      y: input.y,
+      ...position,
       defaultWidth: 440,
       defaultHeight: 360,
       fileMode: 'auto',
@@ -840,11 +846,7 @@ export class PmxCanvas extends EventEmitter {
 
   /** Open a board, or Home with null. */
   async openBoard(id: string | null): Promise<void> {
-    await executeOperation(
-      'board.open',
-      { id },
-      { source: 'sdk', fromWorkbench: true, humanAuthor: true, suppressAutoGhost: true },
-    );
+    await executeOperation('board.open', { id }, { source: 'sdk', suppressAutoGhost: true });
   }
 
   async deleteBoard(id: string): Promise<void> {

package/src/server/operations/composites.ts

@@ -151,13 +151,14 @@ export const compositeToolDefinitions: CompositeToolDefinition[] = [
   {
     toolName: 'canvas_board',
     description:
-      'Boards in this workspace — the library of the human\'s and your working memory, filed in categories on Home. Your writes always go to the board the human has open (activeBoardId); on Home (no board open) your first write opens their most recent board, or a new one when there are none. Action "list" returns every board (with its category), most recently opened first; "get" reads one (default: the open board); "create" makes a new empty board WITHOUT opening it (optional category); "update" renames a board, files it under a category (category "" removes it), or designates its README via readmeNodeId. As part of normal board authoring, read the board metadata; if readmeNodeId is null, choose or create a concise markdown introduction explaining its purpose and key context, then designate that node with "update". Preserve an existing README unless the human asks to change it; humans can override the designation manually. Only the human opens, switches or deletes boards — if you need another board, ask them in the chat to open it.',
-    actionSummary: 'list | get | create | create-from | update',
+      'Boards in this workspace — the library of the human\'s and your working memory, filed in categories on Home. Your writes always go to the open board (activeBoardId); on Home (no board open) your first write opens the most recent board, or a new one when there are none. Action "list" returns every board (with its category), most recently opened first; "get" reads one (default: the open board); "create" makes a new empty board WITHOUT opening it (optional category); "open" explicitly switches the shared workbench to id (null or omitted opens Home), changing the visible board and subsequent write target. After creating a board, open its returned id and verify activeBoardId before writing; another participant can switch the board later. "update" renames a board, files it under a category (category "" removes it), or designates its README via readmeNodeId. As part of normal board authoring, read the board metadata; if readmeNodeId is null, choose or create a concise markdown introduction explaining its purpose and key context, then designate that node with "update". Preserve an existing README unless the human asks to change it; humans can override the designation manually. Only the human deletes boards.',
+    actionSummary: 'list | get | create | create-from | open | update',
     actions: {
       list: 'board.list',
       get: 'board.get',
       create: 'board.create',
       'create-from': 'board.create-from',
+      open: 'board.open',
       update: 'board.update',
     },
   },