pmx-canvas 0.4.8 → 0.5.1

package/src/client/icons.tsx

@@ -34,20 +34,6 @@ export function IconFitAll(p: IconProps): JSX.Element {
   );
 }
 
-/** Framed crosshair — reset view 1:1 */
-export function IconResetView(p: IconProps): JSX.Element {
-  return (
-    <Icon {...p}>
-      <rect x="2" y="2" width="12" height="12" rx="2" />
-      <line x1="8" y1="4.5" x2="8" y2="6.5" />
-      <line x1="8" y1="9.5" x2="8" y2="11.5" />
-      <line x1="4.5" y1="8" x2="6.5" y2="8" />
-      <line x1="9.5" y1="8" x2="11.5" y2="8" />
-      <circle cx="8" cy="8" r="1" fill="currentColor" stroke="none" />
-    </Icon>
-  );
-}
-
 /** Magnifier with + */
 export function IconZoomIn(p: IconProps): JSX.Element {
   return (
@@ -214,12 +200,11 @@ export function IconShortcuts(p: IconProps): JSX.Element {
   );
 }
 
-/** Half-lit circle — theme toggle (generic). */
-export function IconTheme(p: IconProps): JSX.Element {
+/** Speech bubble — steer the agent (command bar composer). */
+export function IconSteer(p: IconProps): JSX.Element {
   return (
     <Icon {...p}>
-      <circle cx="8" cy="8" r="6" />
-      <path d="M8 2 A 6 6 0 0 1 8 14 Z" fill="currentColor" stroke="none" />
+      <path d="M2 13 L2 4 A2 2 0 0 1 4 2 L12 2 A2 2 0 0 1 14 4 L14 9 A2 2 0 0 1 12 11 L5 11 Z" />
     </Icon>
   );
 }
@@ -277,6 +262,60 @@ export function IconLogo({ size = 22, class: className }: IconProps): JSX.Elemen
 /* ── Node-type icons · Focus Field family ─────────────────── */
 
 /** Framed document with lines — markdown */
+export function IconCursorTool({ size = 15 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M3 2l10 5.5-4.2 1.3L7.5 13z" />
+    </svg>
+  );
+}
+
+export function IconHandTool({ size = 15 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 7.5V3.8a1 1 0 0 1 2 0V7m0-3.9a1 1 0 0 1 2 0V7m0-2.7a1 1 0 0 1 2 0V7.4m0-.9a1 1 0 0 1 2 0v3.2A4.3 4.3 0 0 1 8.7 14H8a4.3 4.3 0 0 1-3.6-2L2.7 9.3a1 1 0 0 1 1.6-1.2L5 9.2" />
+    </svg>
+  );
+}
+
+export function IconNodeHtml({ size = 15 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M6 4.5L2.5 8 6 11.5M10 4.5L13.5 8 10 11.5" />
+    </svg>
+  );
+}
+
 export function IconNodeMarkdown(p: IconProps): JSX.Element {
   return (
     <Icon {...p}>

package/src/client/nodes/ExtAppFrame.tsx

@@ -30,6 +30,8 @@ type McpUiTheme = 'light' | 'dark';
 type ExtAppBridgeNotifications = Pick<AppBridge, 'sendToolInput' | 'sendToolResult'>;
 type DisplayMode = 'inline' | 'fullscreen' | 'pip';
 type ExtAppFrameStatus = 'loading' | 'ready' | 'done';
+/** Paint probe outcome: only a content-carrying tick counts as painted. */
+export type PaintProbeVerdict = 'content-verified' | 'tick-no-content' | 'timeout';
 
 interface ExtAppHostDimensionsTarget {
   clientWidth?: number;
@@ -285,10 +287,28 @@ export function buildExtAppBootBeaconScript(frameToken: string, nodeId: string):
   // rendering pipeline is actually running — a frame whose layer WebKit never
   // composites stays silent, and that silence drives the parent's recovery
   // ladder. One unsolicited tick at boot, then on-demand answers to probes.
+  // Content oracle (Finding N, 0.5.0 reopen): a double rAF fires even while
+  // WKWebKit composites nothing — the tick alone was a false green. The tick
+  // now carries a verdict: does this document actually CONTAIN rendered
+  // content (a laid-out canvas/svg, or real text)? The parent only accepts
+  // paint-ok when it does.
+  function contentReady() {
+    try {
+      var els = document.querySelectorAll('canvas, svg');
+      for (var i = 0; i < els.length; i++) {
+        var r = els[i].getBoundingClientRect();
+        if (r.width > 8 && r.height > 8) return true;
+      }
+      var body = document.body;
+      return !!(body && body.innerText && body.innerText.trim().length > 0);
+    } catch (e) {
+      return false;
+    }
+  }
   function sendPaintTick() {
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
-        window.parent.postMessage({ source: '${EXT_APP_BOOT_BEACON_SOURCE}', token: TOKEN, nodeId: NODE_ID, kind: 'paint-tick' }, '*');
+        window.parent.postMessage({ source: '${EXT_APP_BOOT_BEACON_SOURCE}', token: TOKEN, nodeId: NODE_ID, kind: 'paint-tick', content: contentReady() }, '*');
       });
     });
   }
@@ -367,8 +387,9 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   const bridgeReadyRef = useRef(false);
   const themeUnsubRef = useRef<(() => void) | null>(null);
   const webkitRemountAttemptsRef = useRef(0);
-  // Paint oracle (Finding N): resolvers waiting for the frame's next paint-tick.
-  const paintTickWaitersRef = useRef<Array<() => void>>([]);
+  // Paint oracle (Finding N): resolvers waiting for the frame's next paint-tick,
+  // each handed the tick's content verdict.
+  const paintTickWaitersRef = useRef<Array<(content: boolean) => void>>([]);
   // Genuine boot signal: set ONLY when the app completes the ui/initialize
   // handshake (bridge.oninitialized) — NOT by the 1200ms bootstrap fallback,
   // which flips status via notifications that resolve even into a dead iframe.
@@ -450,7 +471,8 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         return;
       appScriptsRanRef.current = true;
       if (data.kind === 'paint-tick') {
-        for (const waiter of paintTickWaitersRef.current.splice(0)) waiter();
+        const content = (data as { content?: unknown }).content === true;
+        for (const waiter of paintTickWaitersRef.current.splice(0)) waiter(content);
       }
     }
     window.addEventListener('message', onBootBeacon);
@@ -503,7 +525,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     enqueueWebkitRemount({
       remount: () => {
         remountQueuedRef.current = false;
-        if (unmountedRef.current || expandedNodeId.value === nodeId) {
+        if (unmountedRef.current || (!expanded && expandedNodeId.value === nodeId)) {
           extAppRecoveryLog(nodeId, 'remount-skipped');
           // The ladder left paintPending set on the promise that this remount
           // would re-enter it via the new frame's settle path. A skip means
@@ -555,28 +577,42 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   // again → serialized remount (bounded by the shared attempt cap) → explicit
   // Retry affordance. Never silent eternal black. WebKit inline frames only.
   const PAINT_TICK_TIMEOUT_MS = 1500;
-  const probePaint = (): Promise<boolean> =>
+  const probePaint = (): Promise<PaintProbeVerdict> =>
     new Promise((resolve) => {
       const contentWindow = iframeRef.current?.contentWindow;
       if (!contentWindow || unmountedRef.current) {
-        resolve(false);
+        resolve('timeout');
         return;
       }
       let settled = false;
       const timer = window.setTimeout(() => {
         if (settled) return;
         settled = true;
-        resolve(false);
+        resolve('timeout');
       }, PAINT_TICK_TIMEOUT_MS);
-      paintTickWaitersRef.current.push(() => {
+      paintTickWaitersRef.current.push((content) => {
         if (settled) return;
         settled = true;
         window.clearTimeout(timer);
-        resolve(true);
+        // A tick without content is NOT paint-ok: the rAF pipeline runs while
+        // the document is empty cream / never composited (Finding N reopen).
+        resolve(content ? 'content-verified' : 'tick-no-content');
       });
       contentWindow.postMessage({ source: EXT_APP_PAINT_PROBE_SOURCE, token: axToken }, '*');
     });
 
+  // Bounded wait for the frame's content oracle to turn green — the mount
+  // queue's release gate (guidance: never green-light the NEXT app while the
+  // previous document is still contentless; D-then-E was the repro).
+  const awaitContentVerified = async (maxMs: number): Promise<boolean> => {
+    const deadline = Date.now() + maxMs;
+    while (Date.now() < deadline && !unmountedRef.current) {
+      if ((await probePaint()) === 'content-verified') return true;
+      await new Promise((resolve) => window.setTimeout(resolve, 400));
+    }
+    return false;
+  };
+
   // Force a real layer reallocation: grow the iframe's box meaningfully for two
   // frames, then restore. Invisible under the paint-pending overlay.
   const runSoftExpandCycle = (): Promise<void> =>
@@ -638,29 +674,44 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   // 0.4.7). Say so in the trail instead of recording an unqualified success.
   const paintOkLabel = (suffix = ''): string =>
     typeof document !== 'undefined' && document.visibilityState === 'hidden'
-      ? `paint-ok${suffix} (unverified: host hidden)`
-      : `paint-ok${suffix}`;
+      ? `paint-ok (content-verified)${suffix} (host hidden)`
+      : `paint-ok (content-verified)${suffix}`;
 
   const runPaintLadder = async (): Promise<void> => {
-    if (expanded) return;
+    // Runs for the EXPANDED instance too (Finding N reopen: expanded C was a
+    // black frame with no recovery — the ladder used to early-return here).
     if (typeof navigator === 'undefined' || typeof window === 'undefined') return;
     if (!isWebKitOnlyHost(navigator.userAgent)) return;
     setPaintPending(true);
-    if (await probePaint()) {
+    let verdict = await probePaint();
+    if (verdict === 'content-verified') {
       extAppRecoveryLog(nodeId, paintOkLabel());
       setPaintPending(false);
       maybeAssumeVisibleRearm();
       return;
     }
-    extAppRecoveryLog(nodeId, 'paint-fail');
+    extAppRecoveryLog(
+      nodeId,
+      verdict === 'tick-no-content' ? 'paint-fail (tick without content)' : 'paint-fail (no tick)',
+    );
     await runSoftExpandCycle();
-    if (await probePaint()) {
+    verdict = await probePaint();
+    if (verdict === 'content-verified') {
       extAppRecoveryLog(nodeId, paintOkLabel(' (after soft-expand)'));
       setPaintPending(false);
       maybeAssumeVisibleRearm();
       return;
     }
     if (unmountedRef.current) return;
+    // A contentless-but-alive app may still be DRAWING its scene: give the
+    // oracle a bounded settle before burning a remount attempt on it.
+    if (verdict === 'tick-no-content' && (await awaitContentVerified(3_000))) {
+      extAppRecoveryLog(nodeId, paintOkLabel(' (after content wait)'));
+      setPaintPending(false);
+      maybeAssumeVisibleRearm();
+      return;
+    }
+    if (unmountedRef.current) return;
     // The remounted frame re-enters this ladder from its own settle path.
     if (!scheduleWebkitRemount('paint-fail')) {
       extAppRecoveryLog(nodeId, 'recovery-exhausted');
@@ -709,7 +760,8 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   // serialized queue (bounded by the shared attempt cap).
   const WEBKIT_BOOT_WATCHDOG_MS = 6000;
   useEffect(() => {
-    if (expanded) return;
+    // Covers the expanded instance too — its fresh iframe was black with no
+    // recovery at all (Finding N reopen, expanded C).
     if (typeof navigator === 'undefined' || typeof window === 'undefined') return;
     if (!isWebKitOnlyHost(navigator.userAgent)) return;
     if (!iframeDocument.ready || !mountGranted) return;
@@ -725,7 +777,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     () => () => {
       unmountedRef.current = true;
       for (const waiter of bootWaitersRef.current.splice(0)) waiter();
-      for (const waiter of paintTickWaitersRef.current.splice(0)) waiter();
+      for (const waiter of paintTickWaitersRef.current.splice(0)) waiter(false);
     },
     [],
   );
@@ -1035,8 +1087,22 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
             // its own settle pause covering the draw) only from this genuine path;
             // the bootstrap fallback never releases it (a dead iframe must run the
             // queue's bounded timeout instead of green-lighting the next remount).
-            extAppRecoveryLog(nodeId, 'settled');
-            for (const waiter of bootWaitersRef.current.splice(0)) waiter();
+            // Release the mount queue only once this document's CONTENT
+            // oracle is green (bounded): a settled-but-empty app must not
+            // green-light the next mount slot (D-then-E repro, Finding N
+            // reopen). WebKit only — elsewhere the oracle race doesn't exist.
+            const releaseQueue = () => {
+              for (const waiter of bootWaitersRef.current.splice(0)) waiter();
+            };
+            if (typeof navigator !== 'undefined' && isWebKitOnlyHost(navigator.userAgent)) {
+              void awaitContentVerified(4_000).then((verified) => {
+                extAppRecoveryLog(nodeId, verified ? 'settled (content-verified)' : 'settled (content-timeout)');
+                releaseQueue();
+              });
+            } else {
+              extAppRecoveryLog(nodeId, 'settled');
+              releaseQueue();
+            }
             nudgeHostContextAfterLayout();
             schedulePaintLadder();
           })

package/src/client/nodes/GroupNode.tsx

@@ -1,37 +1,18 @@
-import type { CanvasNodeState } from '../types';
 import { nodes } from '../state/canvas-store';
+import type { CanvasNodeState } from '../types';
 
 interface GroupNodeProps {
   node: CanvasNodeState;
 }
 
+/**
+ * Group frame body (rail-chrome-v2 groups v2): the children live in the world
+ * layer and the name/count/actions sit on the frame edge, so the body is just
+ * the wash — plus a hint while the group is empty.
+ */
 export function GroupNode({ node }: GroupNodeProps) {
   const childIds = (node.data.children as string[]) ?? [];
-  const allNodes = nodes.value;
-
-  // Count how many children actually exist
-  const liveChildren = childIds.filter((id) => allNodes.has(id));
-  const childCount = liveChildren.length;
-
-  // Build a type summary for the collapsed view
-  const typeCounts: Record<string, number> = {};
-  for (const id of liveChildren) {
-    const child = allNodes.get(id);
-    if (child) typeCounts[child.type] = (typeCounts[child.type] ?? 0) + 1;
-  }
-  const typeSummary = Object.entries(typeCounts)
-    .map(([type, count]) => `${count} ${type}`)
-    .join(', ');
-
-  return (
-    <div class="group-node-body">
-      <div class="group-summary">
-        <span class="group-child-count">
-          {childCount} node{childCount !== 1 ? 's' : ''}
-        </span>
-        {typeSummary && <span class="group-type-summary">{typeSummary}</span>}
-      </div>
-      {childCount === 0 && <div class="group-empty-hint">Drag nodes here or use the selection bar to group nodes</div>}
-    </div>
-  );
+  const liveChildren = childIds.filter((id) => nodes.value.has(id));
+  if (liveChildren.length > 0) return null;
+  return <div class="group-empty-hint">Drop nodes here — release while the frame lights up to add them</div>;
 }

package/src/client/nodes/InlineFormatBar.tsx

@@ -1,5 +1,6 @@
 import type { RefObject } from 'preact';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { modChord } from '../utils/platform';
 import { promptAndInsertLink, wrapSelectionInCode } from './inline-editor-commands';
 
 const GAP = 8;
@@ -15,8 +16,8 @@ type Action =
   | { kind: 'link'; icon: string; title: string; dividerBefore?: boolean };
 
 const ACTIONS: Action[] = [
-  { kind: 'exec', command: 'bold', icon: 'B', title: 'Bold (⌘B)' },
-  { kind: 'exec', command: 'italic', icon: 'I', title: 'Italic (⌘I)' },
+  { kind: 'exec', command: 'bold', icon: 'B', title: `Bold (${modChord('B')})` },
+  { kind: 'exec', command: 'italic', icon: 'I', title: `Italic (${modChord('I')})` },
   { kind: 'exec', command: 'strikeThrough', icon: 'S', title: 'Strikethrough' },
   { kind: 'code', icon: '{ }', title: 'Inline code', dividerBefore: true },
   { kind: 'block', tag: 'H1', icon: 'H1', title: 'Heading 1', dividerBefore: true },
@@ -26,7 +27,7 @@ const ACTIONS: Action[] = [
   { kind: 'block', tag: 'BLOCKQUOTE', icon: '❝', title: 'Quote', dividerBefore: true },
   { kind: 'exec', command: 'insertUnorderedList', icon: '•', title: 'Bullet list' },
   { kind: 'exec', command: 'insertOrderedList', icon: '1.', title: 'Numbered list' },
-  { kind: 'link', icon: '🔗', title: 'Link (⌘K)', dividerBefore: true },
+  { kind: 'link', icon: '🔗', title: `Link (${modChord('K')})`, dividerBefore: true },
 ];
 
 function runAction(action: Action): void {

package/src/client/nodes/InlineMarkdownEditor.tsx

@@ -46,6 +46,11 @@ export function InlineMarkdownEditor({
     const el = rootRef.current;
     if (!el) return;
     el.innerHTML = initialHtmlRef.current;
+    // GFM task checkboxes are live in the editor too: marked emits them
+    // `disabled`, which also swallows clicks in the expanded view.
+    for (const box of el.querySelectorAll('input[type="checkbox"][disabled]')) {
+      box.removeAttribute('disabled');
+    }
   }, []);
 
   const serialize = useCallback((): string => {
@@ -59,6 +64,10 @@ export function InlineMarkdownEditor({
   }, [onChange, serialize]);
 
   const handleSave = useCallback(() => {
+    // A blur fired by unmounting (Esc closes the overlay while the editor is
+    // focused) reads back an empty tree — saving that would WIPE the document.
+    const el = rootRef.current;
+    if (!el || !el.isConnected || el.innerHTML === '') return;
     onSave?.(serialize());
   }, [onSave, serialize]);
 
@@ -91,6 +100,23 @@ export function InlineMarkdownEditor({
     [handleInput, handleSave],
   );
 
+  // A checkbox click inside contenteditable toggles the DOM property but
+  // fires no `input` event — serialize explicitly (turndown's GFM rule reads
+  // `node.checked`) so the tick persists like any other edit.
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target instanceof HTMLInputElement && target.type === 'checkbox') {
+        // Serialization parses innerHTML — a string, which carries ATTRIBUTES
+        // only. Mirror the clicked property onto the attribute or the tick
+        // vanishes on the next round-trip.
+        target.toggleAttribute('checked', target.checked);
+        handleInput();
+      }
+    },
+    [handleInput],
+  );
+
   // Arbitrary rich HTML (Word, the web) would force turndown to sanitize a
   // far wider surface and tends to lose fidelity — plain text is safer.
   const handlePaste = useCallback(
@@ -114,6 +140,7 @@ export function InlineMarkdownEditor({
         onInput={handleInput}
         onKeyDown={handleKeyDown}
         onPaste={handlePaste}
+        onClick={handleClick}
         onBlur={handleSave}
       />
       <InlineFormatBar hostRef={rootRef} onChange={handleInput} />

package/src/client/nodes/MarkdownNode.tsx

@@ -11,12 +11,23 @@ function RenderedMarkdown({
   html,
   className,
   style,
+  onTaskToggle,
 }: {
   html: string;
   className?: string;
   style?: string | JSX.CSSProperties;
+  /** Enables the GFM task checkboxes and reports which one was clicked (document order). */
+  onTaskToggle?: (index: number) => void;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
+  // The handler lives in a ref so the DOM effect depends on `html` ALONE. With
+  // the inline prop in the deps, every unrelated re-render (bring-to-front on
+  // pointerdown, presence frames) replaced the children — and a HUMAN press is
+  // ~100ms, so the checkbox under the finger was swapped mid-press and the
+  // click never fired. Synthetic test clicks are fast enough to win the race,
+  // which is exactly why this shipped "verified".
+  const onTaskToggleRef = useRef(onTaskToggle);
+  onTaskToggleRef.current = onTaskToggle;
 
   useEffect(() => {
     const container = containerRef.current;
@@ -26,9 +37,48 @@ function RenderedMarkdown({
     const template = document.createElement('template');
     template.innerHTML = html;
     container.append(template.content.cloneNode(true));
+    if (onTaskToggleRef.current) {
+      for (const box of container.querySelectorAll('input[type="checkbox"][disabled]')) {
+        box.removeAttribute('disabled');
+      }
+    }
   }, [html]);
 
-  return <div ref={containerRef} class={className} style={style} />;
+  const handleClick = onTaskToggle
+    ? (e: MouseEvent) => {
+        const onToggle = onTaskToggleRef.current;
+        const container = containerRef.current;
+        if (!container || !onToggle) return;
+        const target = e.target as HTMLElement;
+        // The box itself, or anywhere in the row's checkbox gutter — a 15px
+        // input alone is a miserable target at zoom and in embedded panes
+        // that forward clicks imprecisely.
+        let box: HTMLInputElement | null = null;
+        if (target instanceof HTMLInputElement && target.type === 'checkbox') {
+          box = target;
+        } else {
+          const row = target.closest('li');
+          const rowBox = row?.querySelector<HTMLInputElement>(':scope > input[type="checkbox"]');
+          if (rowBox && e.clientX <= rowBox.getBoundingClientRect().right + 6) box = rowBox;
+        }
+        if (!box) return;
+        e.stopPropagation();
+        const index = [...container.querySelectorAll('input[type="checkbox"]')].indexOf(box);
+        if (index >= 0) onToggle(index);
+      }
+    : undefined;
+
+  return <div ref={containerRef} class={className} style={style} onClick={handleClick} />;
+}
+
+/** Flip the index-th GFM task marker in the source (document order matches the rendered boxes). */
+export function toggleTaskMarker(markdown: string, index: number): string {
+  let seen = -1;
+  return markdown.replace(/^(\s*(?:[-*+]|\d+[.)])\s+\[)([ xX])(\])/gm, (match, pre, state, post) => {
+    seen += 1;
+    if (seen !== index) return match;
+    return `${pre}${state === ' ' ? 'x' : ' '}${post}`;
+  });
 }
 
 export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
@@ -317,34 +367,19 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       <RenderedMarkdown
         html={rendered}
         style={{ padding: rendered ? '0' : '12px', color: rendered ? undefined : 'var(--c-dim)' }}
+        // Task checkboxes are live on the card itself — no need to expand to tick one.
+        onTaskToggle={(index) => {
+          const next = toggleTaskMarker(content, index);
+          if (next !== content) handleInlineSave(next);
+        }}
       />
       {!loaded && <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Loading…</div>}
       {loaded && !rendered && (
         <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Empty node</div>
       )}
-      <button
-        type="button"
-        onClick={() => expandNode(node.id)}
-        style={{
-          position: 'absolute',
-          top: '4px',
-          right: '4px',
-          padding: '3px 8px',
-          fontSize: '10px',
-          background: 'var(--c-panel-overlay)',
-          border: '1px solid var(--c-line)',
-          borderRadius: '4px',
-          color: 'var(--c-text-soft)',
-          cursor: 'pointer',
-          opacity: 0.7,
-        }}
-        onMouseEnter={(e) => {
-          (e.target as HTMLElement).style.opacity = '1';
-        }}
-        onMouseLeave={(e) => {
-          (e.target as HTMLElement).style.opacity = '0.7';
-        }}
-      >
+      {/* Hover-revealed, solid-backed chip — always-on it sat on the first
+          line of content (double-click edits inline; this is discovery). */}
+      <button type="button" class="md-edit-btn" onClick={() => expandNode(node.id)}>
         Edit
       </button>
     </div>

package/src/client/nodes/MdFormatBar.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { isMac } from '../utils/platform';
+import { modChord } from '../utils/platform';
 import { type FormatAction, FORMAT_ACTIONS, getSelectionRect } from './md-format';
 
 const PRIMARY_ACTIONS = FORMAT_ACTIONS.filter((a) => a.shortcut);
@@ -75,8 +75,6 @@ export function MdFormatBar({ textareaRef }: { textareaRef: { current: HTMLTextA
 
   if (!visible) return null;
 
-  const modLabel = isMac ? '⌘' : 'Ctrl';
-
   return (
     <div
       ref={barRef}
@@ -89,7 +87,7 @@ export function MdFormatBar({ textareaRef }: { textareaRef: { current: HTMLTextA
           key={a.key}
           type="button"
           class={`md-format-btn md-format-btn-${a.key}`}
-          title={`${a.label} (${modLabel}+${a.shortcut!.toUpperCase()})`}
+          title={`${a.label} (${modChord(a.shortcut!.toUpperCase())})`}
           onClick={() => runAction(a)}
         >
           {a.icon}

package/src/client/nodes/inline-editor-commands.ts

@@ -1,16 +1,27 @@
 /** Shared contentEditable command helpers used by both the inline editor
  *  and its floating toolbar. Kept in a module that neither component
  *  depends on transitively so we don't get a circular import. */
+import { askText } from '../canvas/TextPrompt';
 
 /** Prompt for a URL and insert it as a link on the current selection.
  *  Rejects `javascript:` and `data:` schemes so a link can't execute script
- *  when clicked. */
+ *  when clicked. Uses the in-canvas prompt (`window.prompt` is a silent no-op
+ *  in embedded panes); the selection is saved before the dialog takes focus
+ *  and restored before inserting. */
 export function promptAndInsertLink(): void {
-  const url = window.prompt('Link URL:');
-  if (!url) return;
-  const trimmed = url.trim().toLowerCase();
-  if (trimmed.startsWith('javascript:') || trimmed.startsWith('data:')) return;
-  document.execCommand('createLink', false, url);
+  const selection = window.getSelection();
+  const saved = selection && selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
+  void askText('Link URL', 'https://example.com').then((url) => {
+    if (!url) return;
+    const trimmed = url.trim().toLowerCase();
+    if (trimmed.startsWith('javascript:') || trimmed.startsWith('data:')) return;
+    if (saved) {
+      const restore = window.getSelection();
+      restore?.removeAllRanges();
+      restore?.addRange(saved);
+    }
+    document.execCommand('createLink', false, url);
+  });
 }
 
 /** Wrap the current non-empty selection in an inline `<code>` element and

package/src/client/nodes/use-surface-frame.ts

@@ -27,7 +27,9 @@ export function useSurfaceFrame(url: string): { src?: string; srcdoc?: string }
   useEffect(() => {
     if (!wantsSrcdoc) return;
     let cancelled = false;
-    void fetch(url, { credentials: 'same-origin' })
+    // Ask the server to inline bundle assets (the mermaid renderer): hosts
+    // that force srcdoc mode block sub-frame subresource requests too.
+    void fetch(`${url}${url.includes('?') ? '&' : '?'}inline-assets=1`, { credentials: 'same-origin' })
       .then((res) => (res.ok ? res.text() : Promise.reject(new Error(`HTTP ${res.status}`))))
       .then((html) => {
         if (!cancelled) setDoc({ url, html });

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

@@ -266,6 +266,9 @@ function flushToastQueue(): void {
 
 function enqueueToast(entry: AttentionEntry): void {
   toastQueue.push(entry);
+  // A burst of writes must not replay as a minute of stale toasts — keep the
+  // newest few; the history drawer still has every entry.
+  if (toastQueue.length > 3) toastQueue.splice(0, toastQueue.length - 3);
   flushToastQueue();
 }