pmx-canvas 0.11.0 → 0.12.1

package/src/client/canvas/TopBar.tsx

@@ -38,6 +38,10 @@ import {
 } from '../state/session-store';
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
 import { agentSessionsEnabled } from '../state/workspace-settings';
+import { humanName, setHumanName } from '../state/human-store';
+import { tabAgentKey } from '../state/intent-bridge';
+import { HUMAN_NAME_MAX_LENGTH } from '../../shared/human-presence.js';
+import { askText } from './TextPrompt';
 
 const PRESENT_DESCRIPTION = (
   <span style={{ whiteSpace: 'pre-line' }}>
@@ -536,6 +540,32 @@ export function TopBar() {
             <TopBarMore boardOpen={!!activeBoardId.value} onFit={handleFit} />
           </>
         )}
+        {!isHostedWorkbench() && !tabAgentKey && (
+          <span class="human-name-control">
+            <BarHint label="Your name" body={`Shown on your cursor: ${humanName.value}`} align="end">
+              <button
+                type="button"
+                class="top-bar-btn human-name-button"
+                aria-label={`Your name: ${humanName.value}`}
+                aria-haspopup="dialog"
+                onClick={async (event) => {
+                  const button = event.currentTarget;
+                  const name = await askText('Your name on this canvas', 'e.g. Alex', {
+                    initial: humanName.value,
+                    confirm: 'Save name',
+                    maxLength: HUMAN_NAME_MAX_LENGTH,
+                    description:
+                      'Shown on your cursor. Self-reported, not a verified identity or an access grant. Saved in this browser.',
+                  });
+                  if (name !== null) setHumanName(name);
+                  button.focus({ preventScroll: true });
+                }}
+              >
+                {writerInitial(humanName.value)}
+              </button>
+            </BarHint>
+          </span>
+        )}
       </div>
     </div>
   );

package/src/client/canvas/canvas-area.ts

@@ -60,7 +60,7 @@ export function canvasFitInsets(): CanvasFitInsets {
   try {
     const area = canvasArea();
     const areaBottom = area.top + area.height;
-    for (const selector of ['.lifecycle-filters', '.relation-legend']) {
+    for (const selector of ['.lifecycle-filters', '.relation-legend', '.group-breadcrumbs']) {
       const el = document.querySelector(selector);
       if (!(el instanceof HTMLElement) || !el.isConnected) continue;
       const rect = el.getBoundingClientRect();

package/src/client/nodes/ExtAppFrame.tsx

@@ -11,6 +11,8 @@ import {
   AX_SURFACE_ACK_SOURCE,
   AX_SURFACE_EMIT_SOURCE,
   HTML_SURFACE_PUSH_SOURCE,
+  MCP_SURFACE_METHOD,
+  surfaceNotification,
 } from '../../shared/ax-surface-protocol.js';
 import { extAppToolResultsMatch } from '../../shared/ext-app-tool-result.js';
 import { DEFAULT_EXT_APP_SANDBOX } from '../../shared/surface.js';
@@ -57,17 +59,24 @@ export function buildExtAppAxBridgeScript(axToken: string, nodeId: string): stri
 (function () {
   const PMX_AX_TOKEN = ${JSON.stringify(axToken)};
   const PMX_AX_NODE_ID = ${JSON.stringify(nodeId)};
-  window.addEventListener('message', function (event) {
+  const notify = function (params) {
+    parent.postMessage({ jsonrpc: '2.0', method: '${MCP_SURFACE_METHOD}', params: params }, '*');
+  };
+  const read = function (event) {
     const m = event.data;
+    return event.source === parent && m && m.jsonrpc === '2.0' && m.method === '${MCP_SURFACE_METHOD}' && !('id' in m) ? m.params : null;
+  };
+  window.addEventListener('message', function (event) {
+    const m = read(event);
     if (event.source !== parent || !m || m.source !== 'pmx-viewer-theme' || m.token !== PMX_AX_TOKEN) return;
     for (const [name, value] of Object.entries(m.variables)) document.documentElement.style.setProperty(name, value);
   });
   window.addEventListener('message', function (event) {
-    const m = event.data;
+    const m = read(event);
     if (event.source !== parent || !m || m.source !== '${HTML_SURFACE_PUSH_SOURCE}' || m.token !== PMX_AX_TOKEN || m.type !== 'check-ready') return;
-    parent.postMessage({ source: '${HTML_SURFACE_PUSH_SOURCE}', type: 'mounted', token: PMX_AX_TOKEN }, '*');
+    notify({ source: '${HTML_SURFACE_PUSH_SOURCE}', type: 'mounted', token: PMX_AX_TOKEN });
     requestAnimationFrame(function () { requestAnimationFrame(function () {
-      parent.postMessage({ source: '${HTML_SURFACE_PUSH_SOURCE}', type: 'ready', token: PMX_AX_TOKEN }, '*');
+      notify({ source: '${HTML_SURFACE_PUSH_SOURCE}', type: 'ready', token: PMX_AX_TOKEN });
     }); });
   });
   window.PMX_AX = window.PMX_AX || {};
@@ -83,18 +92,18 @@ export function buildExtAppAxBridgeScript(axToken: string, nodeId: string): stri
         resolve({ ok: false, status: 504, code: 'ax-ack-timeout', error: 'ax-ack-timeout' });
       }, 10000);
       pending.set(correlationId, function (result) { clearTimeout(timer); resolve(result); });
-      window.parent.postMessage({
+      notify({
         source: '${AX_SURFACE_EMIT_SOURCE}', token: PMX_AX_TOKEN, nodeId: PMX_AX_NODE_ID,
         correlationId: correlationId,
         interaction: { type: String(type), payload: payload && typeof payload === 'object' ? payload : {} },
-      }, '*');
+      });
     });
   };
   window.PMX_AX.on = function (eventType, cb) {
     if (eventType === 'ack' && typeof cb === 'function') ackListeners.push(cb);
   };
   window.addEventListener('message', function (event) {
-    const m = event.data;
+    const m = read(event);
     if (event.source !== window.parent || !m || m.source !== '${AX_SURFACE_ACK_SOURCE}' || m.token !== PMX_AX_TOKEN) return;
     const result = m.result || { ok: false };
     const resolver = m.correlationId ? pending.get(m.correlationId) : undefined;
@@ -194,7 +203,14 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     buildExtAppSurfaceBaseStyles() + buildExtAppAxBridgeScript(axToken, node.id),
   );
   const frameDocument = useIframeDocument(documentHtml, DEFAULT_EXT_APP_SANDBOX);
-  useAxSurfaceBridge({ enabled: axEnabled, token: axToken, nodeId: node.id, sourceSurface: 'mcp-app', iframeRef });
+  useAxSurfaceBridge({
+    enabled: axEnabled,
+    token: axToken,
+    nodeId: node.id,
+    sourceSurface: 'mcp-app',
+    iframeRef,
+    jsonRpc: true,
+  });
 
   const sessionMessage =
     node.data.sessionStatus === 'error'
@@ -265,7 +281,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     const sendContext = () => {
       if (disposed) return;
       iframe.contentWindow?.postMessage(
-        { source: 'pmx-viewer-theme', token: axToken, variables: canvasVariables() },
+        surfaceNotification({ source: 'pmx-viewer-theme', token: axToken, variables: canvasVariables() }),
         '*',
       );
       if (!initialized) return;
@@ -409,7 +425,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
           const connection = connections.current.get(frame);
           if (!connection || !(await connection.loaded()) || signal.aborted) return false;
           connection.theme();
-          return waitForViewerPaint(frame, axToken, signal);
+          return waitForViewerPaint(frame, axToken, signal, true);
         }}
         onOpen={expanded ? undefined : () => expandNode(node.id)}
         sandbox={DEFAULT_EXT_APP_SANDBOX}

package/src/client/nodes/MarkdownNode.tsx

@@ -276,10 +276,8 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       if (!renderingDraft && !draft.dirty.value) {
         latestMdRef.current = raw;
         setContent(raw);
-        updateNodeData(node.id, { content: raw, rendered: html });
-      } else if (nodes.value.get(node.id)?.data.content === raw) {
-        // A pending save may already contain this text; cache only its HTML.
-        updateNodeData(node.id, { rendered: html });
+        // The HTML cache is local. Publishing each preview redraws the whole board.
+        if (nodes.value.get(node.id)?.data.content !== raw) updateNodeData(node.id, { content: raw });
       }
     })();
     return () => {
@@ -303,10 +301,10 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
 
   const persistContent = useCallback(
     async (newContent: string) => {
-      // Human wins over already-observed work, not work arriving while this
-      // particular attempt waits in the queue or for its rendered preview.
+      // A peer update cannot grant an older draft permission to overwrite it.
+      // Only our own successful saves advance the draft's revision.
       const incarnation = boardIncarnation;
-      const attempt = { revision: nodes.value.get(node.id)?.contentRevision ?? 0 };
+      const attempt = { revision: editBase.current.revision };
       draft.nativeSaveAttempts.add(attempt);
       draft.pending.value++;
       // Order the complete save, including disk writes and rendering. A later
@@ -376,6 +374,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
         if (result.ok && result.contentRevision !== undefined) {
           // Advance only through a successful predecessor in this board/card's
           // queue. An external revision or a refused save grants no retry.
+          editBase.current.revision = result.contentRevision;
           for (const queued of draft.nativeSaveAttempts) {
             if (queued.revision === expectedContentRevision) queued.revision = result.contentRevision;
           }

package/src/client/nodes/PromptNode.tsx

@@ -1,10 +1,17 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { IconClose } from '../icons';
+import { activeBoardId } from '../state/boards-store';
 import { updateNodeData } from '../state/canvas-store';
 import { fetchSlashCommands, renderMarkdown, submitCanvasPrompt, submitThreadReply } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
 import { sanitizeMarkdownHtml } from './markdown-sanitize';
 
+// Multiple inline/focus renderers may own inputs for the same qualified card.
+const unsentInputs = new Set<{ boardId: string | null; nodeId: string; draft: string; reply: string }>();
+export function hasUnsavedPrompt(boardId: string, nodeId: string): boolean {
+  return [...unsentInputs].some((input) => input.boardId === boardId && input.nodeId === nodeId);
+}
+
 // Cached slash commands — fetched once on first use.
 let cachedCommands: Array<{ name: string; description: string }> | null = null;
 async function getCommands() {
@@ -117,8 +124,30 @@ export function PromptNode({ node, expanded = false }: { node: CanvasNodeState;
   const isStreaming = threadStatus === 'streaming';
   const isAnswered = threadStatus === 'answered';
 
-  const [draft, setDraft] = useState('');
-  const [replyDraft, setReplyDraft] = useState('');
+  const [draft, updateDraft] = useState('');
+  const [replyDraft, updateReplyDraft] = useState('');
+  const boardId = activeBoardId.value;
+  const input = useMemo(() => ({ boardId, nodeId: node.id, draft: '', reply: '' }), [boardId, node.id]);
+  const remember = () => {
+    if (input.draft || input.reply) unsentInputs.add(input);
+    else unsentInputs.delete(input);
+  };
+  const setDraft = (text: string) => {
+    input.draft = text;
+    remember();
+    updateDraft(text);
+  };
+  const setReplyDraft = (text: string) => {
+    input.reply = text;
+    remember();
+    updateReplyDraft(text);
+  };
+  useEffect(
+    () => () => {
+      unsentInputs.delete(input);
+    },
+    [input],
+  );
   const [error, setError] = useState<string | null>(null);
   const [renderedTurns, setRenderedTurns] = useState<Map<number, string>>(new Map());
   const textareaRef = useRef<HTMLTextAreaElement>(null);

package/src/client/nodes/StatusNode.tsx

@@ -1,5 +1,7 @@
 import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
+import { isWorkCardState } from '../../shared/ax-kinds.js';
+import { WorkCard } from './WorkCard';
 
 export function getStatusDisplayPhase(node: CanvasNodeState): string {
   const phase = typeof node.data.phase === 'string' && node.data.phase.trim().length > 0 ? node.data.phase.trim() : '';
@@ -13,6 +15,16 @@ export function getStatusDisplayPhase(node: CanvasNodeState): string {
 }
 
 export function StatusNode({ node }: { node: CanvasNodeState }) {
+  if (typeof node.data.workItemId === 'string' && node.data.liveWorkAvailable === false) {
+    return (
+      <div class="work-card">
+        <div class="work-card-error">⚠ Task unavailable</div>
+        <div>The linked task is no longer on this board.</div>
+        <div class="work-card-live">Read-only · removing this card does not cancel work.</div>
+      </div>
+    );
+  }
+  if (isWorkCardState(node.data.workState)) return <WorkCard node={node} state={node.data.workState} />;
   const phase = getStatusDisplayPhase(node);
   const detail = (node.data.detail as string) || '';
   const message = (node.data.message as string) || '';

package/src/client/nodes/StatusSummary.tsx

@@ -1,8 +1,19 @@
 import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
 import { getStatusDisplayPhase } from './StatusNode';
+import { isWorkCardState, WORK_CARD_STATES } from '../../shared/ax-kinds.js';
 
 export function StatusSummary({ node }: { node: CanvasNodeState }) {
+  if (typeof node.data.workItemId === 'string' && node.data.liveWorkAvailable === false)
+    return <span class="work-card-error">⚠ Task unavailable</span>;
+  if (isWorkCardState(node.data.workState)) {
+    const state = WORK_CARD_STATES[node.data.workState];
+    return (
+      <span class={`work-card-state work-card-${node.data.workState}`}>
+        <span aria-hidden="true">{state.glyph}</span> {state.label}
+      </span>
+    );
+  }
   const phase = getStatusDisplayPhase(node);
   const activeTool = node.data.activeTool as string | null;
   const subagent = node.data.subagent as { state: string; name: string } | undefined;

package/src/client/nodes/ViewerFrame.tsx

@@ -1,6 +1,10 @@
 import type { JSX, RefObject } from 'preact';
 import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
-import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
+import {
+  HTML_SURFACE_PUSH_SOURCE,
+  readSurfaceNotification,
+  surfaceNotification,
+} from '../../shared/ax-surface-protocol.js';
 
 export const VIEWER_LOAD_DEADLINE_MS = 10_000;
 export type ViewerSource = { src?: string; srcdoc?: string; error?: boolean; retry?: () => void };
@@ -12,7 +16,12 @@ type Entry = { key: string; source: ViewerSource; attempt: number; load?: LoadDo
 type MountFrame = (frame: HTMLIFrameElement, fail: () => void) => () => void;
 
 /** The document acknowledges mounting before its frame-gated paint signal. */
-export function waitForViewerPaint(frame: HTMLIFrameElement, token: string, signal: AbortSignal): Promise<boolean> {
+export function waitForViewerPaint(
+  frame: HTMLIFrameElement,
+  token: string,
+  signal: AbortSignal,
+  jsonRpc = false,
+): Promise<boolean> {
   if (signal.aborted) return Promise.resolve(false);
   return new Promise((resolve) => {
     const finish = (ready: boolean) => {
@@ -23,21 +32,23 @@ export function waitForViewerPaint(frame: HTMLIFrameElement, token: string, sign
     };
     const cancel = () => finish(false);
     const receive = (event: MessageEvent) => {
-      if (
-        event.source !== frame.contentWindow ||
-        event.data?.source !== HTML_SURFACE_PUSH_SOURCE ||
-        event.data?.token !== token
-      )
+      const data = (jsonRpc ? readSurfaceNotification(event.data) : event.data) as {
+        source?: string;
+        token?: string;
+        type?: string;
+      } | null;
+      if (event.source !== frame.contentWindow || data?.source !== HTML_SURFACE_PUSH_SOURCE || data?.token !== token)
         return;
-      if (event.data.type === 'mounted') {
+      if (data.type === 'mounted') {
         clearTimeout(timer);
       }
-      if (event.data.type === 'ready') finish(true);
+      if (data.type === 'ready') finish(true);
     };
     const timer = setTimeout(cancel, VIEWER_LOAD_DEADLINE_MS);
     window.addEventListener('message', receive);
     signal.addEventListener('abort', cancel, { once: true });
-    frame.contentWindow?.postMessage({ source: HTML_SURFACE_PUSH_SOURCE, type: 'check-ready', token }, '*');
+    const message = { source: HTML_SURFACE_PUSH_SOURCE, type: 'check-ready', token };
+    frame.contentWindow?.postMessage(jsonRpc ? surfaceNotification(message) : message, '*');
   });
 }
 

package/src/client/nodes/WorkCard.tsx

@@ -0,0 +1,175 @@
+import { signal, type Signal } from '@preact/signals';
+import { useMemo } from 'preact/hooks';
+import { WORK_CARD_STATES, type AxWorkItemStatus } from '../../shared/ax-kinds.js';
+import { activeBoardId } from '../state/boards-store';
+import { updateNodeFromClient } from '../state/intent-bridge';
+import type { CanvasNodeState } from '../types';
+
+type WorkDraft = {
+  title: string;
+  state: AxWorkItemStatus;
+  detail: string;
+  progress: string;
+  boardId: string | null;
+  revision: number;
+  saving: boolean;
+  error: string;
+};
+// Like Markdown drafts, these belong to the qualified card, not its inline/focus renderer.
+const drafts = new Map<string, Signal<WorkDraft | null>>();
+
+export function hasUnsavedWorkCard(boardId: string, nodeId: string): boolean {
+  return !!drafts.get(JSON.stringify([boardId, nodeId]))?.value;
+}
+
+export function WorkCard({ node, state }: { node: CanvasNodeState; state: AxWorkItemStatus }) {
+  const key = JSON.stringify([activeBoardId.value, node.id]);
+  const editing = useMemo(() => drafts.get(key) ?? signal<WorkDraft | null>(null), [key]);
+  const draft = editing.value;
+  const saving = draft?.saving ?? false;
+  const error = draft?.error ?? '';
+  const setDraft = (next: WorkDraft | null) => {
+    if (next) drafts.set(key, editing);
+    else drafts.delete(key);
+    editing.value = next;
+  };
+  const detail = typeof node.data.detail === 'string' ? node.data.detail : '';
+  const progress = typeof node.data.progress === 'number' ? node.data.progress : null;
+
+  const edit = () => {
+    setDraft({
+      title: typeof node.data.title === 'string' ? node.data.title : '',
+      state,
+      detail,
+      progress: progress === null ? '' : String(progress),
+      boardId: activeBoardId.value,
+      revision: node.contentRevision ?? 0,
+      saving: false,
+      error: '',
+    });
+  };
+  const save = async () => {
+    if (!draft || saving) return;
+    setDraft({ ...draft, saving: true, error: '' });
+    const result = await updateNodeFromClient(node.id, {
+      title: draft.title.trim(),
+      data: {
+        workState: draft.state,
+        detail: draft.detail,
+        progress: draft.progress === '' ? null : Number(draft.progress),
+      },
+      expectedBoardId: draft.boardId,
+      expectedContentRevision: draft.revision,
+    });
+    if (result.ok) setDraft(null);
+    else
+      setDraft({
+        ...draft,
+        saving: false,
+        error: 'Could not save. Your draft is still here. Check the connection or whether the card changed.',
+      });
+  };
+
+  if (draft) {
+    return (
+      <form
+        class="work-card-editor"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void save();
+        }}
+        onKeyDown={(event) => {
+          event.stopPropagation();
+          if (event.key === 'Escape' && !saving) {
+            event.preventDefault();
+            setDraft(null);
+          }
+        }}
+      >
+        <fieldset disabled={saving}>
+          <label>
+            Title
+            <input required value={draft.title} onInput={(e) => setDraft({ ...draft, title: e.currentTarget.value })} />
+          </label>
+          <label>
+            Work state
+            <select
+              value={draft.state}
+              onChange={(e) => setDraft({ ...draft, state: e.currentTarget.value as AxWorkItemStatus })}
+            >
+              {Object.entries(WORK_CARD_STATES).map(([value, item]) => (
+                <option key={value} value={value}>
+                  {item.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            Detail
+            <textarea value={draft.detail} onInput={(e) => setDraft({ ...draft, detail: e.currentTarget.value })} />
+          </label>
+          <label>
+            Progress (%) · optional
+            <input
+              type="number"
+              min="0"
+              max="100"
+              step="any"
+              value={draft.progress}
+              onInput={(e) => setDraft({ ...draft, progress: e.currentTarget.value })}
+            />
+          </label>
+          {error && (
+            <div class="work-card-error" role="alert">
+              {error}
+            </div>
+          )}
+          <footer>
+            <button type="button" onClick={() => setDraft(null)}>
+              Cancel
+            </button>
+            <button class="work-card-save" type="submit">
+              {saving ? 'Saving…' : 'Save'}
+            </button>
+          </footer>
+        </fieldset>
+      </form>
+    );
+  }
+
+  return (
+    <div class={`work-card work-card-${state}`}>
+      {typeof node.data.workItemId === 'string' && (
+        <div class="work-card-live">
+          ↗ Live task{node.data.liveWorkSource ? ` · ${node.data.liveWorkSource}` : ''} · Read-only
+        </div>
+      )}
+      <div class="work-card-state">
+        <span aria-hidden="true">{WORK_CARD_STATES[state].glyph}</span> {WORK_CARD_STATES[state].label}
+      </div>
+      {detail && <div class="work-card-detail">{detail}</div>}
+      {progress !== null && (
+        <div class="work-card-progress">
+          <span>{progress}% complete</span>
+          <div
+            class="status-progress"
+            role="progressbar"
+            aria-label="Progress"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={progress}
+          >
+            <div style={{ width: `${progress}%`, background: 'currentColor' }} />
+          </div>
+        </div>
+      )}
+      {typeof node.data.workItemId !== 'string' && (
+        <footer>
+          <button type="button" onClick={edit}>
+            Edit
+          </button>
+        </footer>
+      )}
+    </div>
+  );
+}

package/src/client/nodes/use-ax-surface-bridge.ts

@@ -1,6 +1,11 @@
 import type { RefObject } from 'preact';
 import { useLayoutEffect } from 'preact/hooks';
-import { AX_SURFACE_ACK_SOURCE, AX_SURFACE_EMIT_SOURCE } from '../../shared/ax-surface-protocol.js';
+import {
+  AX_SURFACE_ACK_SOURCE,
+  AX_SURFACE_EMIT_SOURCE,
+  readSurfaceNotification,
+  surfaceNotification,
+} from '../../shared/ax-surface-protocol.js';
 import { showToast } from '../state/attention-bridge';
 import { submitAxInteractionFromClient } from '../state/intent-bridge';
 
@@ -23,8 +28,9 @@ export function useAxSurfaceBridge(options: {
   nodeId: string;
   sourceSurface: AxSurfaceBridgeSurface;
   iframeRef: RefObject<HTMLIFrameElement>;
+  jsonRpc?: boolean;
 }): void {
-  const { enabled, token, nodeId, sourceSurface, iframeRef } = options;
+  const { enabled, token, nodeId, sourceSurface, iframeRef, jsonRpc = false } = options;
   // Register before paint: a fast iframe can accept input before passive effects
   // run, and its first emit must not be lost in that gap.
   useLayoutEffect(() => {
@@ -33,7 +39,7 @@ export function useAxSurfaceBridge(options: {
       // Bind to THIS node's own iframe; the nonce + nodeId are a second gate,
       // not the only one.
       if (event.source !== iframeRef.current?.contentWindow) return;
-      const data = event.data as {
+      const data = (jsonRpc ? readSurfaceNotification(event.data) : event.data) as {
         source?: string;
         token?: string;
         nodeId?: string;
@@ -54,20 +60,18 @@ export function useAxSurfaceBridge(options: {
       }).then((res) => {
         // A refusal is toasted by the bridge with the server's reason.
         if (res.ok) showToast('context', 'AX interaction', interactionType, [nodeId]);
-        iframeRef.current?.contentWindow?.postMessage(
-          {
-            source: AX_SURFACE_ACK_SOURCE,
-            token,
-            ...(data.correlationId ? { correlationId: data.correlationId } : {}),
-            interaction: { type: interactionType },
-            result: res,
-          },
-          '*',
-        );
+        const message = {
+          source: AX_SURFACE_ACK_SOURCE,
+          token,
+          ...(data.correlationId ? { correlationId: data.correlationId } : {}),
+          interaction: { type: interactionType },
+          result: res,
+        };
+        iframeRef.current?.contentWindow?.postMessage(jsonRpc ? surfaceNotification(message) : message, '*');
       });
     }
     window.addEventListener('message', onAxMessage);
     return () => window.removeEventListener('message', onAxMessage);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled, token, nodeId, sourceSurface]);
+  }, [enabled, token, nodeId, sourceSurface, jsonRpc]);
 }

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

@@ -9,6 +9,7 @@ import {
   type SseMessage,
 } from '../../shared/semantic-attention.js';
 import {
+  attentionHistoryOpen,
   pushAttentionHistory,
   resetAttentionState,
   setAttentionPulse,
@@ -291,6 +292,10 @@ function entryFromEvent(event: SemanticWatchEvent): AttentionEntry | null {
 }
 
 function flushToastQueue(): void {
+  if (attentionHistoryOpen.value) {
+    toastQueue = [];
+    return;
+  }
   if (toastTimer !== null) return;
   const next = toastQueue.shift() ?? null;
   if (!next) {

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

@@ -26,6 +26,7 @@ export function resetAttentionState(): void {
 }
 
 export function openAttentionHistory(): void {
+  attentionToast.value = null;
   attentionHistoryOpen.value = true;
   attentionHistoryUnread.value = 0;
 }