pmx-canvas 0.7.1 → 0.7.3

package/.github/extensions/pmx-canvas/extension.mjs

@@ -251,7 +251,19 @@ async function resolvePmxServer(ctxOrInput, options = {}) {
 
 async function resolvePanelTarget(ctx, options = {}) {
     const selected = panelTargets.get(ctx?.instanceId);
-    if (!selected) return await resolvePmxServer(ctx, options);
+    if (!selected) {
+        const panel = panelServers.get(ctx?.instanceId);
+        if (!panel) return await resolvePmxServer(ctx, options);
+        // A fallback panel still owns its original target. Action inputs may
+        // contain neither that URL nor its workspace, so never rediscover from them.
+        const resolved = await resolvePmxServer({
+            input: { ...panel.entry.input, ...(options.autoStart === true ? { autoStart: true } : {}) },
+            session: { workingDirectory: panel.entry.workspaceRoot },
+        }, options);
+        panel.entry.pmx = resolved;
+        rememberPanelTarget(ctx, resolved);
+        return resolved;
+    }
 
     const probe = await probeServer(selected.baseUrl, selected.workspaceRoot, {
         timeoutMs: options.timeoutMs ?? 2_000,
@@ -280,15 +292,9 @@ function escapeHtml(value) {
         .replaceAll('"', """);
 }
 
-function renderShell(instanceId, entry) {
-    const status = entry.pmx?.ok ? "Connected" : "Not connected";
-    // theme=light is a client-local session default matching the Copilot app's
-    // light chrome — it never changes the server-global theme other clients
-    // see, and the in-panel theme picker still overrides it.
-    const frameSrc = entry.pmx?.baseUrl ? `${entry.pmx.baseUrl}/workbench?theme=light` : "about:blank";
-    const error = entry.pmx?.error ? `<p class="error">${escapeHtml(entry.pmx.error)}</p>` : "";
+function renderShell(entry) {
     return `<!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -301,70 +307,83 @@ function renderShell(instanceId, entry) {
         font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
       }
       .shell {
-        display: grid;
-        grid-template-rows: auto 1fr;
-        height: 100vh;
+        max-width: 560px;
+        margin: 12vh auto;
+        padding: 24px;
       }
-      header {
+      .actions {
         display: flex;
-        align-items: center;
+        flex-wrap: wrap;
         gap: 12px;
-        padding: 10px 12px;
-        border-bottom: 1px solid var(--border-color-default, #30363d);
-        background: var(--background-color-muted, rgba(22, 27, 34, 0.95));
+        margin-top: 24px;
       }
-      strong { font-weight: var(--font-weight-semibold, 600); }
-      .status {
+      p { line-height: 1.6; overflow-wrap: anywhere; }
+      .workspace {
         color: var(--text-color-muted, #8b949e);
-        font-size: var(--text-body-small, 12px);
+        font-size: 13px;
       }
       .error {
-        margin: 0;
         color: var(--true-color-red, #ff7b72);
-        font-size: var(--text-body-small, 12px);
+        min-height: 24px;
       }
       button {
-        border: 1px solid var(--border-color-default, #30363d);
+        border: 1px solid var(--border-color-default, #6e7681);
         border-radius: 8px;
-        background: var(--background-color-default, #0d1117);
+        background: var(--background-color-muted, #21262d);
         color: inherit;
+        font: inherit;
         cursor: pointer;
-        padding: 6px 10px;
+        min-height: 40px;
+        padding: 8px 16px;
       }
-      button:hover {
+      button:hover, button:focus-visible {
         border-color: var(--color-focus-outline, #2f81f7);
       }
-      iframe {
-        width: 100%;
-        height: 100%;
-        border: 0;
-        background: #0d1117;
-      }
-      .spacer { flex: 1; }
+      button:disabled { opacity: 0.6; cursor: wait; }
     </style>
   </head>
   <body>
-    <div class="shell">
-      <header>
-        <strong>PMX Canvas</strong>
-        <span class="status">${escapeHtml(status)}${entry.pmx?.baseUrl ? ` · ${escapeHtml(entry.pmx.baseUrl)}` : ""}</span>
-        ${error}
-        <span class="spacer"></span>
-        <button type="button" onclick="refreshContext()">Refresh AX</button>
-        <button type="button" onclick="startServer()">Start server</button>
-      </header>
-      <iframe title="PMX Canvas workbench" src="${escapeHtml(frameSrc)}"></iframe>
-    </div>
+    <main class="shell">
+      <h1>Connect to PMX Canvas</h1>
+      <p>The workbench is not connected yet. Home and recent boards will appear when the server is available.</p>
+      <p class="workspace">Workspace: ${escapeHtml(entry.workspaceRoot)}</p>
+      <p class="workspace">Server: ${escapeHtml(candidateBaseUrls(entry.input)[0].baseUrl)}</p>
+      <p id="connection-status" class="error" role="status">${escapeHtml(entry.pmx?.error ?? "Checking connection…")}</p>
+      <div class="actions">
+        <button type="button" onclick="connect(false)">Check connection</button>
+        <button type="button" onclick="connect(true)">Start server</button>
+      </div>
+      <p class="workspace">This page checks for the server automatically. Start server launches a local server for this workspace.</p>
+    </main>
     <script>
-      async function startServer() {
-        await fetch('/start', { method: 'POST' });
-        window.location.reload();
-      }
-      async function refreshContext() {
-        const response = await fetch('/context');
-        const context = await response.json();
-        window.parent.postMessage({ type: 'pmx-canvas-ax-context', instanceId: ${JSON.stringify(instanceId)}, context }, '*');
+      let busy = false;
+      let timer;
+      async function connect(start) {
+        if (busy) return;
+        busy = true;
+        clearTimeout(timer);
+        const buttons = document.querySelectorAll('button');
+        buttons.forEach(button => button.disabled = true);
+        const status = document.getElementById('connection-status');
+        status.textContent = start ? 'Starting server…' : 'Checking connection…';
+        try {
+          const response = await fetch(start ? '/start' : '/status', { method: start ? 'POST' : 'GET', cache: 'no-store' });
+          const target = await response.json();
+          if (response.ok && target.ok && target.baseUrl) {
+            // Load the real workbench at its own origin, including its token,
+            // Home, boards, and relative API paths. The shell is not a proxy.
+            window.location.replace(target.baseUrl + '/workbench?theme=light');
+            return;
+          }
+          status.textContent = target.error || 'No matching PMX Canvas server is running.';
+        } catch (error) {
+          status.textContent = 'Connection check failed. Reopen the canvas if the adapter has stopped.';
+        }
+        busy = false;
+        buttons.forEach(button => button.disabled = false);
+        timer = setTimeout(() => connect(false), 2000);
       }
+      connect(false);
     </script>
   </body>
 </html>`;
@@ -378,7 +397,7 @@ async function readRequestJson(req) {
 }
 
 async function verifiedEntryTarget(entry) {
-    if (!entry.pmx?.baseUrl) return { ok: false, baseUrl: null, error: "PMX Canvas server is unavailable." };
+    if (!entry.pmx?.ok || !entry.pmx.baseUrl) return { ok: false, baseUrl: null, error: "PMX Canvas server is unavailable." };
     const probe = await probeServer(entry.pmx.baseUrl, entry.pmx.health.workspace, {
         timeoutMs: 2_000,
     });
@@ -401,18 +420,17 @@ async function startPanelServer(instanceId, ctx, pmx) {
         try {
             const url = new URL(req.url ?? "/", "http://127.0.0.1");
             if (req.method === "GET" && url.pathname === "/") {
-                res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-                res.end(renderShell(instanceId, entry));
+                res.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" });
+                res.end(renderShell(entry));
                 return;
             }
             if (req.method === "POST" && url.pathname === "/start") {
-                entry.pmx = await resolvePmxServer({ input: entry.input, session: { workingDirectory: entry.workspaceRoot } });
-                jsonResponse(res, 200, entry.pmx);
+                const latest = await resolvePanelTarget({ instanceId }, { autoStart: true });
+                jsonResponse(res, 200, latest);
                 return;
             }
             if (req.method === "GET" && url.pathname === "/status") {
-                const latest = await resolvePmxServer({ input: entry.input, session: { workingDirectory: entry.workspaceRoot } }, { autoStart: false });
-                entry.pmx = latest.ok ? latest : entry.pmx;
+                const latest = await resolvePanelTarget({ instanceId }, { autoStart: false });
                 jsonResponse(res, 200, latest);
                 return;
             }
@@ -545,7 +563,7 @@ async function recordInjectedContext(baseUrl, context, injected) {
 async function getAxStatus(ctx) {
     const resolved = await resolvePanelTarget(ctx, { autoStart: false });
     if (!resolved.ok || !resolved.baseUrl) return { ok: false, server: resolved };
-    const state = await fetchJson(resolved.baseUrl, "/api/canvas/ax", { timeoutMs: 2_000 });
+    const state = await fetchJson(resolved.baseUrl, "/api/canvas/ax?includeContext=false", { timeoutMs: 2_000 });
     return { ok: true, server: resolved, ax: state };
 }
 
@@ -718,7 +736,7 @@ const pmxCanvas = createCanvas({
     actions: [
         {
             name: "status",
-            description: "Return PMX Canvas server and AX state status for this workspace.",
+            description: "Return PMX Canvas server and AX state without serialized node context. Use get_ax_context for full pinned/focused context.",
             handler: async (ctx) => await getAxStatus(ctx),
         },
         {

package/CHANGELOG.md

@@ -3,7 +3,35 @@
 All notable changes to `pmx-canvas` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
-## [Unreleased]
+## [0.7.3] - 2026-10-01
+
+### Fixed
+
+- JSON form values and dynamic lists survive expanding and closing focus mode without silently saving drafts to the server; authored spec updates still reset runtime state.
+- Interactive surfaces register their action bridge before first paint.
+- Bundled skill quick references match live MCP discovery, including board opening and workboards, and distinguish local JSON runtime state from durable data.
+- Amp setup guidance covers workspace trust approval, portal targeting and native steering verification; testing guidance preserves first-failure evidence and distinguishes host coverage gaps.
+- The main toolbar keeps Markdown, Attach files, Webpage and Group; one file picker replaces separate File, Image and HTML buttons, with supported formats explained in its tooltip.
+- Draw, Text note and Eraser are separate toolbar buttons for quick board feedback.
+- Connection handles are easier to grab at any zoom, and saved connections appear without waiting for the next background update.
+- Feedback and agent selectors use themed menus, and Cancel actions have clearer button styling.
+
+## [0.7.2] - 2026-09-30
+
+### Added
+
+- Agents can explicitly open a board before writing through MCP, CLI, HTTP, and SDK; board deletion remains human-only.
+
+### Fixed
+
+- Main-agent transport attaches reuse the attached host session, avoiding duplicate Copilot agents while keeping identified subagents separate.
+- HTML exports have clearer Markdown typography and tables, readable CSV/TSV previews, complete status and context text, and scrollable cards with keyboard-accessible reading views.
+- Original document attachments now avoid existing cards and each other without moving existing content.
+- Backup and restore commands reject unknown flags instead of silently ignoring them.
+- Amp setup instructions distinguish native MCP configuration from the browser portal.
+- Copilot's fallback panel reconnects to the full workbench and keeps adapter actions on the recovered server.
+- Copilot status omits serialized node context; full context remains available through `get_ax_context`.
+- Attachment, board-menu, card, and panel controls use consistently sized SVG icons instead of small font symbols.
 
 ## [0.7.1] - 2026-09-30
 

package/Readme.md

@@ -44,9 +44,11 @@ communication — proximity means relatedness, pinning means *focus here*.
 The database holds many named boards. **Home is the library view, not a board**:
 it lists recent boards and nested category paths (up to eight 60-character
 segments). Empty folders are not independent objects; they exist only while a
-board is filed beneath them. Only a human opens/switches or deletes a board.
-Agents may list, read, create, rename, categorize, search, and create an inactive
-board from selected reusable cards without disturbing the board in view. Home
+board is filed beneath them. Agents can explicitly open/switch boards; deletion
+remains human-only. Creating a board or a copy from reusable cards leaves it
+inactive. Agents open its returned ID before writing; this also switches the
+shared workbench the human sees. Agents may list, read, rename, categorize, and
+search boards without switching. Home
 provides a copy-preview dialog; an open board's command palette offers a
 board-link picker. Neither depends on native browser prompts.
 
@@ -387,9 +389,45 @@ the full workflow and live-test checklist.
 
 ### Use inside AMPCode orbs and the Amp portal
 
-Amp needs no adapter either. Run `pmx-canvas` as an orb service (the orb sets
+The portal and the agent's MCP connection are separate. For native Canvas tools,
+merge this into the workspace's `.amp/settings.json` (not `.mcp.json`):
+
+```json
+{
+  "amp.mcpServers": {
+    "canvas": {
+      "command": "bunx",
+      "args": ["pmx-canvas@0.7.3", "--mcp"],
+      "includeTools": ["canvas_*"],
+      "env": {
+        "PMX_CANVAS_WORKSPACE_ROOT": "/absolute/path/to/project",
+        "PMX_CANVAS_PORT": "14313",
+        "PMX_CANVAS_URL": "",
+        "PMX_CANVAS_AGENT_SOURCE": "amp"
+      }
+    }
+  }
+}
+```
+
+Replace the root and example port with the portal service's actual workspace and local
+listening port, including an orb-assigned port. Configure this inside the orb/runner;
+settings on your laptop are not automatically available there.
+In the PMX product checkout, use `"command": "bun"` and
+`"args": ["run", "src/mcp/server.ts"]` to test the checked-out source instead.
+Run `amp mcp doctor` in that workspace. If it reports `awaiting approval`, the user
+must review the command and run `amp mcp approve canvas` there; the agent must not
+self-approve or bypass workspace trust. Then reload MCP connections and confirm
+`connected`, Canvas tool discovery, and matching `/health.workspace`, version and
+active board before writes. An open portal or standalone MCP handshake does not prove
+native discovery. PMX ships no dedicated Amp lifecycle adapter: an active agent can
+poll steering, but MCP setup alone does not wake an idle thread or activate skills.
+See the bundled [Amp setup and verification guide](skills/pmx-canvas/references/installing-pmx-canvas.md#amp-connect-the-agent-separately-from-the-portal)
+and [Amp MCP configuration](https://ampcode.com/docs/customize/mcp).
+
+For the visible workbench, run `pmx-canvas` as an orb service (the orb sets
 `AMP_ORB` in the environment automatically) and open the workbench through the
-thread's portal URL. The zero-config recipe for the repo the orb runs in:
+thread's portal URL. A consumer-workspace service recipe:
 
 ```yaml
 # .amp/services.yaml — supervised portal service
@@ -403,7 +441,7 @@ services:
 ```bash
 # .agents/setup — install the CLI (pin the exact version: a fresh orb running
 # @latest can silently pick up a newer release than the one you validated)
-npm install -g pmx-canvas@0.7.1
+npm install -g pmx-canvas@0.7.3
 ```
 
 The server binds the portal-assigned `$PORT` automatically (gated on the
@@ -419,9 +457,10 @@ be inlined and stay blocked by the portal embed: cross-origin hosted apps (e.g.
 the hosted Excalidraw MCP app), and PDF file nodes — a PDF node offers an
 "Open PDF" link there instead of a preview.
 Debug overrides: `/workbench?transport=poll|sse` and
-`?iframe-mode=srcdoc|src`. Once the service is up, `pmx-canvas smoke` verifies
-the whole stack (health, versions, MCP handshake, node lifecycle, validation)
-in one command.
+`?iframe-mode=srcdoc|src`. After verifying the workspace, `pmx-canvas smoke --port=<actual-port>`
+checks health, versions, a standalone MCP handshake, node lifecycle and validation.
+Use a disposable board: it performs temporary writes and leaves history. This does
+not verify native Amp discovery or browser rendering.
 
 ### Install the agent skill (recommended)
 

package/dist/canvas/global.css

@@ -572,9 +572,23 @@ body,
   box-shadow: 0 4px 24px var(--c-shadow);
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: visible;
   transition: box-shadow 0.15s ease;
-  contain: layout style paint;
+  contain: layout style;
+}
+
+/* Clip card content, not the connection handles centered on its border. */
+.node-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  contain: paint;
+}
+.group-node > .node-content {
+  display: contents;
 }
 
 .canvas-node:hover {
@@ -610,34 +624,42 @@ body,
 /* ── Connection port handles (drag-to-connect) ───────────── */
 .node-port {
   position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--c-accent);
-  border: 2px solid var(--c-panel);
+  /* The visible dot stays compact; its grab area stays usable at every zoom. */
+  width: calc(32px * var(--node-port-scale, 1));
+  height: calc(32px * var(--node-port-scale, 1));
+  display: grid;
+  place-items: center;
   opacity: 0;
   cursor: crosshair;
   z-index: 10;
-  transition: opacity 0.15s, transform 0.15s;
-  transform: translate(-50%, -50%) scale(0.6);
+  touch-action: none;
+  transition: opacity 0.15s;
   pointer-events: auto;
 }
-.canvas-node:hover .node-port {
+.node-port::after {
+  content: '';
+  width: calc(6px * var(--node-port-scale, 1));
+  height: calc(6px * var(--node-port-scale, 1));
+  border-radius: 50%;
+  background: var(--c-accent);
+  border: calc(2px * var(--node-port-scale, 1)) solid var(--c-panel);
+  box-shadow: 0 0 0 calc(1px * var(--node-port-scale, 1)) var(--c-accent);
+}
+.canvas-node:hover .node-port,
+.canvas-node.selected .node-port,
+.canvas-node:focus-within .node-port {
   opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
 }
-.node-port:hover {
+.node-port:hover::after {
   background: var(--c-accent-hover);
-  transform: translate(-50%, -50%) scale(1.3);
 }
-.node-port-top    { top: 0;   left: 50%; }
-.node-port-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%) scale(0.6); }
-.node-port-left   { left: 0;  top: 50%; }
-.node-port-right  { right: 0; top: 50%; transform: translate(50%, -50%) scale(0.6); }
-.canvas-node:hover .node-port-bottom { transform: translate(-50%, 50%) scale(1); }
-.canvas-node:hover .node-port-right  { transform: translate(50%, -50%) scale(1); }
-.node-port-bottom:hover { transform: translate(-50%, 50%) scale(1.3); }
-.node-port-right:hover  { transform: translate(50%, -50%) scale(1.3); }
+/* Bias vertical grab areas outward so they do not steal title/footer clicks. */
+.node-port-top    { top: 0; left: 50%; transform: translate(-50%, -75%); }
+.node-port-bottom { bottom: 0; left: 50%; transform: translate(-50%, 75%); }
+.node-port-top::after { transform: translateY(calc(8px * var(--node-port-scale, 1))); }
+.node-port-bottom::after { transform: translateY(calc(-8px * var(--node-port-scale, 1))); }
+.node-port-left   { left: 0; top: 50%; transform: translate(-50%, -50%); }
+.node-port-right  { right: 0; top: 50%; transform: translate(50%, -50%); }
 
 .canvas-node .node-titlebar {
   display: flex;
@@ -760,6 +782,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 +1493,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 +1713,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 +1998,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;
@@ -1986,6 +2023,7 @@ body,
   color: var(--c-dim);
 }
 .command-bar-composer {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1997,24 +2035,72 @@ body,
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
 }
 .command-bar-target {
-  appearance: none;
-  -webkit-appearance: none;
   max-width: 148px;
-  padding: 4px 18px 4px 8px;
-  border: 1px solid var(--c-line);
-  border-radius: 7px;
-  background: color-mix(in srgb, var(--c-panel) 80%, transparent)
-    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%237a8699' stroke-width='1.4'/%3E%3C/svg%3E")
-    no-repeat right 6px center;
-  color: var(--c-text-soft);
-  font: 12px/1.3 var(--mono);
-  cursor: pointer;
   flex-shrink: 0;
 }
-.command-bar-target:hover,
-.command-bar-target:focus-visible {
-  border-color: var(--c-accent-25);
+.choice-menu {
+  position: relative;
+  min-width: 0;
+}
+.choice-menu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  min-height: 36px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--c-line) 65%, var(--c-muted));
+  border-radius: 8px;
+  background: var(--c-panel-overlay);
   color: var(--c-text);
+  font: 12px/1.35 var(--font);
+  cursor: pointer;
+}
+.choice-menu-trigger > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.choice-menu-trigger svg { flex-shrink: 0; }
+.choice-menu-trigger:hover,
+.choice-menu-trigger[aria-expanded='true'] { border-color: var(--c-accent); }
+.choice-menu-trigger:focus-visible,
+.choice-menu-options button:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+.toolbar-menu.choice-menu-options {
+  top: calc(100% + 6px);
+  left: 0;
+  right: auto;
+  min-width: 100%;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 64px));
+  max-height: min(280px, 40vh);
+  overflow-y: auto;
+  z-index: 20;
+}
+.toolbar-menu.choice-menu-options.opens-above {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+.command-bar-target.choice-menu {
+  position: static;
+}
+.command-bar-target .choice-menu-options {
+  /* Anchor to the composer, not its inset trigger, to clear the session rail. */
+  min-width: min(200px, 100%);
+  max-width: 100%;
+}
+.choice-menu-options .toolbar-menu-item {
+  min-height: 36px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.choice-menu-options button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .command-bar-icon {
@@ -4483,13 +4569,24 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 .text-prompt-cancel,
 .text-prompt-confirm {
-  padding: 5px 12px;
+  min-height: 36px;
+  padding: 8px 14px;
   border-radius: 7px;
-  border: 1px solid var(--c-line);
-  background: none;
-  color: var(--c-text-soft);
+  border: 1px solid color-mix(in srgb, var(--c-line) 65%, var(--c-muted));
+  background: var(--c-panel-overlay);
+  color: var(--c-text);
   cursor: pointer;
   font-size: 12px;
+  font-weight: 600;
+}
+.text-prompt-cancel:hover {
+  background: var(--c-accent-10);
+  border-color: var(--c-muted);
+}
+.text-prompt-cancel:focus-visible,
+.text-prompt-confirm:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
 }
 .text-prompt-confirm {
   background: var(--c-accent);
@@ -4509,7 +4606,8 @@ html.is-node-resizing .ext-app-preview-catcher {
   overflow-y: auto;
   color: var(--c-text);
 }
-.feedback-dialog label {
+.feedback-dialog label,
+.feedback-field {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -6896,7 +6994,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;
@@ -6914,7 +7012,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 {