pmx-canvas 0.6.4 → 0.7.0

package/src/client/nodes/MarkdownNode.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { expandNode, updateNodeData } from '../state/canvas-store';
 import { fetchFile, renderMarkdown, saveFile, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
+import { activeBoard, setBoardReadme } from '../state/boards-store';
 import { MdFormatBar } from './MdFormatBar';
 import { handleFormatShortcut, handleTab } from './md-format';
 import { InlineMarkdownEditor } from './InlineMarkdownEditor';
@@ -82,6 +83,7 @@ export function toggleTaskMarker(markdown: string, index: number): string {
 }
 
 export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
+  const board = activeBoard();
   const path = node.data.path as string;
   const [content, setContent] = useState('');
   const [rendered, setRendered] = useState('');
@@ -362,26 +364,52 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
   // ── Card preview ──────────────────────────────────────────────
 
   return (
-    <div style={{ height: '100%', position: 'relative' }}>
-      {reviewBanner}
-      <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>
+    <div class="md-card-preview">
+      <div class="md-card-content">
+        {reviewBanner}
+        <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>
+        )}
+      </div>
+      {node.data.source && typeof node.data.source === 'object' && 'attachmentId' in node.data.source && (
+        <div class="md-import-source">
+          Source material ·{' '}
+          <a
+            href={`/api/canvas/attachments/${encodeURIComponent(String(node.data.source.attachmentId))}/bytes`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {String((node.data.source as Record<string, unknown>).filename ?? 'Original')}
+          </a>
+          {' · '}
+          {String((node.data.source as Record<string, unknown>).reference ?? 'Location not supplied')}
+        </div>
       )}
-      {/* 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 class="md-card-actions">
+        {board && (
+          <button
+            type="button"
+            class="md-readme-btn"
+            aria-pressed={board.readmeNodeId === node.id}
+            onClick={() => void setBoardReadme(board.id, board.readmeNodeId === node.id ? null : node.id)}
+          >
+            {board.readmeNodeId === node.id ? 'README' : 'Set as README'}
+          </button>
+        )}
+        <button type="button" class="md-card-edit" onClick={() => expandNode(node.id)}>
+          Edit
+        </button>
+      </div>
     </div>
   );
 }

package/src/client/nodes/McpAppNode.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef } from 'preact/hooks';
+import type { RefObject } from 'preact';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { canvasThemeScheme } from '../../shared/themes.js';
 import type { CanvasNodeState } from '../types';
@@ -54,6 +55,106 @@ export function isSameOriginFrameDocumentUrl(url: string, origin = window.locati
   }
 }
 
+type ViewerFrameSource = { src?: string; srcdoc?: string };
+
+/**
+ * Keep the last painted viewer in front while its replacement navigates. Viewer
+ * specs are immutable documents, so updates normally change `?v=` and reload the
+ * iframe; putting the new document in a hidden sibling avoids exposing Chromium's
+ * white navigation paint. Two animation frames after load gives the new document
+ * a composited paint before the old one is removed.
+ */
+export function RefreshingViewerFrame({
+  source,
+  iframeRef,
+  onLoad,
+  title,
+  className = 'mcp-app-frame',
+  sandbox = 'allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox',
+  allow = 'clipboard-read; clipboard-write',
+  tabIndex,
+}: {
+  source: ViewerFrameSource;
+  iframeRef: RefObject<HTMLIFrameElement>;
+  onLoad: () => void;
+  title: string;
+  className?: string;
+  sandbox?: string;
+  allow?: string;
+  tabIndex?: number;
+}) {
+  const sourceKey = source.src ?? source.srcdoc ?? '';
+  const [painted, setPainted] = useState({ key: sourceKey, source });
+  const [pending, setPending] = useState<{ key: string; source: ViewerFrameSource } | null>(null);
+  const promotionRef = useRef(0);
+
+  useEffect(() => {
+    promotionRef.current += 1;
+    if (!sourceKey || sourceKey === painted.key) {
+      setPending(null);
+      return;
+    }
+    if (!painted.key) {
+      setPainted({ key: sourceKey, source });
+      return;
+    }
+    setPending({ key: sourceKey, source });
+  }, [sourceKey, painted.key]);
+
+  useEffect(
+    () => () => {
+      promotionRef.current += 1;
+    },
+    [],
+  );
+
+  const frame = (entry: { key: string; source: ViewerFrameSource }, isPending: boolean) => (
+    <iframe
+      key={entry.key}
+      ref={isPending ? undefined : iframeRef}
+      {...entry.source}
+      class={className}
+      sandbox={sandbox}
+      allow={allow}
+      tabIndex={tabIndex}
+      loading={iframeMode.value === 'srcdoc' ? undefined : 'lazy'}
+      onLoad={(event) => {
+        if (!isPending) {
+          onLoad();
+          return;
+        }
+        const token = ++promotionRef.current;
+        const loadedFrame = event.currentTarget;
+        requestAnimationFrame(() =>
+          requestAnimationFrame(() => {
+            if (promotionRef.current !== token) return;
+            iframeRef.current = loadedFrame;
+            setPainted(entry);
+            setPending(null);
+            onLoad();
+          }),
+        );
+      }}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        visibility: isPending ? 'hidden' : 'visible',
+        background: 'var(--c-panel-soft)',
+      }}
+      title={title}
+    />
+  );
+
+  return (
+    <div class="mcp-app-frame-stack">
+      {frame(painted, false)}
+      {pending && frame(pending, true)}
+    </div>
+  );
+}
+
 export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   if (node.data.mode === 'ext-app') {
     return <ExtAppFrame node={node} expanded={expanded} />;
@@ -180,19 +281,10 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
       {/* Plain iframe-backed viewers stay on an opaque origin. Hosted ext-apps use
           the explicit postMessage bridge instead, which is the only path that needs
           app/host RPC and broader capabilities. */}
-      <iframe
-        ref={iframeRef}
-        {...surfaceFrame}
-        class="mcp-app-frame"
-        sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
-        allow="clipboard-read; clipboard-write"
-        // Lazy loading only helps src mode (defers the HTTP request for
-        // off-screen nodes). In srcdoc mode the content is already inline —
-        // lazy would just delay PAINTING until the node scrolls near the
-        // viewport, which reads as "blank until opened" (Amp portal report).
-        loading={iframeMode.value === 'srcdoc' ? undefined : 'lazy'}
+      <RefreshingViewerFrame
+        source={surfaceFrame}
+        iframeRef={iframeRef}
         onLoad={pushAxState}
-        style={{ flex: 1, minHeight: 0, width: '100%' }}
         title={`MCP App: ${sourceServer}`}
       />
     </div>

package/src/client/nodes/MermaidNode.tsx

@@ -21,7 +21,8 @@ export function MermaidNode({ node, expanded = false }: { node: CanvasNodeState;
   // Per-mount nonce for the content-height reporter (node grows to fit content).
   const frameToken = useMemo(() => `frame-${crypto.randomUUID()}`, []);
   const source = typeof node.data.content === 'string' ? node.data.content : '';
-  const v = useMemo(() => surfaceContentHash(source), [source]);
+  const fit = node.data.fit === 'none' ? 'none' : 'contain';
+  const v = useMemo(() => surfaceContentHash(`${fit}:${source}`), [source, fit]);
 
   // `theme` is intentionally excluded from the deps: live theme changes are
   // pushed via postMessage below (no reload), while `v` reloads the frame when
@@ -70,7 +71,7 @@ export function MermaidNode({ node, expanded = false }: { node: CanvasNodeState;
       style={{
         width: '100%',
         height: '100%',
-        minHeight: expanded ? '70vh' : '300px',
+        minHeight: expanded ? '70vh' : '0',
         border: 'none',
         background: 'var(--c-bg)',
         borderRadius: '6px',

package/src/client/nodes/ax-node-actions.ts

@@ -19,11 +19,8 @@ export async function runNodeAxInteraction(
     sourceSurface: 'native-node',
     ...(payload ? { payload } : {}),
   });
-  if (res.ok) {
-    showToast('context', successTitle, '', [node.id]);
-  } else {
-    showToast('remove', 'AX action failed', res.error ?? res.code ?? 'Unknown error', [node.id]);
-  }
+  // A refusal is toasted by the bridge with the server's reason.
+  if (res.ok) showToast('context', successTitle, '', [node.id]);
 }
 
 /** Shared style for the small inline AX action button on native nodes. */

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

@@ -50,8 +50,8 @@ export function useAxSurfaceBridge(options: {
           ? { payload: interaction.payload as Record<string, unknown> }
           : {}),
       }).then((res) => {
+        // A refusal is toasted by the bridge with the server's reason.
         if (res.ok) showToast('context', 'AX interaction', interactionType, [nodeId]);
-        else showToast('remove', 'AX interaction rejected', res.error ?? res.code ?? '', [nodeId]);
         iframeRef.current?.contentWindow?.postMessage(
           {
             source: AX_SURFACE_ACK_SOURCE,

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

@@ -0,0 +1,167 @@
+import { signal } from '@preact/signals';
+import { requestJson } from './intent-bridge';
+
+/**
+ * Many boards (plan 012): the workspace's boards and which one is open. The
+ * server is the authority; this mirrors GET /api/canvas/boards and the
+ * `boards-changed` SSE frame. `activeBoardId === null` is Home.
+ */
+export interface BoardSummary {
+  id: string;
+  name: string;
+  category: string | null;
+  createdAt: string;
+  lastOpenedAt: string | null;
+  nodeCount: number;
+  readmeNodeId?: string | null;
+  summary?: string | null;
+  pinnedTitles?: Array<{ nodeId: string; title: string }>;
+  links?: Array<{ nodeId: string; boardId: string; title: string | null; missing: boolean }>;
+  backlinks?: Array<{ boardId: string; title: string; nodeId: string }>;
+}
+
+interface BoardsPayload {
+  activeBoardId: string | null;
+  boards: BoardSummary[];
+}
+
+export const boardList = signal<BoardSummary[]>([]);
+export const activeBoardId = signal<string | null>(null);
+/** False until the first list arrives — Home must not flash before the server answers. */
+export const boardsLoaded = signal(false);
+
+let onBoardSwitched: (() => void) | null = null;
+let boardsRevision = 0;
+let openRequestSequence = 0;
+let openRequestQueue: Promise<void> = Promise.resolve();
+
+/** The SSE bridge resyncs the canvas when the open board changes under it. */
+export function setBoardSwitchHandler(handler: (() => void) | null): void {
+  onBoardSwitched = handler;
+}
+
+export function applyBoards(data: { activeBoardId?: unknown; boards?: unknown; reloaded?: unknown } | null): void {
+  if (!data || !Array.isArray(data.boards)) return;
+  boardsRevision += 1;
+  const nextActive = typeof data.activeBoardId === 'string' ? data.activeBoardId : null;
+  // `reloaded`: the library was restored, so even the same board id holds new content.
+  const switched = boardsLoaded.value && (nextActive !== activeBoardId.value || data.reloaded === true);
+  boardList.value = data.boards as BoardSummary[];
+  activeBoardId.value = nextActive;
+  boardsLoaded.value = true;
+  if (switched) onBoardSwitched?.();
+}
+
+export async function loadBoards(): Promise<void> {
+  const revision = boardsRevision;
+  const payload = await requestJson<BoardsPayload | null>('loadBoards', '/api/canvas/boards', null);
+  if (revision === boardsRevision) applyBoards(payload);
+}
+
+async function post(
+  action: string,
+  url: string,
+  method: string,
+  body?: unknown,
+  revision = boardsRevision,
+): Promise<BoardsPayload | null> {
+  const payload = await requestJson<BoardsPayload | null>(action, url, null, {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    ...(body === undefined ? {} : { body: JSON.stringify(body) }),
+  });
+  return revision === boardsRevision ? payload : null;
+}
+
+/** Open a board, or Home with null. */
+export async function openBoard(id: string | null): Promise<void> {
+  const sequence = ++openRequestSequence;
+  const revision = boardsRevision;
+  let payload: BoardsPayload | null = null;
+  const request = openRequestQueue.then(async () => {
+    payload = await post('openBoard', '/api/canvas/boards/open', 'POST', { id }, revision);
+  });
+  openRequestQueue = request.catch(() => undefined);
+  await request;
+  // post drops replies superseded by SSE; also ignore an older open request.
+  if (sequence === openRequestSequence) applyBoards(payload);
+}
+
+export async function createAndOpenBoard(name: string): Promise<void> {
+  const sequence = ++openRequestSequence;
+  const created = await requestJson<{ board?: BoardSummary } | null>('createBoard', '/api/canvas/boards', null, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  });
+  if (created?.board && sequence === openRequestSequence) await openBoard(created.board.id);
+}
+
+export interface BoardCopyCard {
+  id: string;
+  type: string;
+  title: string | null;
+  reusable: boolean;
+}
+
+export interface BoardCopyPreview {
+  sourceBoardId: string;
+  readmeNodeId: string | null;
+  cards: BoardCopyCard[];
+  edges: Array<{ id: string; from: string; to: string; type: string }>;
+}
+
+export async function previewBoardCopy(sourceBoardId: string): Promise<BoardCopyPreview | null> {
+  return requestJson<BoardCopyPreview | null>('previewBoardCopy', '/api/canvas/boards/from', null, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ sourceBoardId, name: 'Preview', preview: true }),
+  });
+}
+
+export async function createBoardFrom(opts: {
+  sourceBoardId: string;
+  name: string;
+  category?: string;
+  nodeIds: string[];
+  includeReadme: boolean;
+  includeStructure: boolean;
+}): Promise<BoardSummary | null> {
+  const result = await requestJson<{ board?: BoardSummary } | null>(
+    'createBoardFrom',
+    '/api/canvas/boards/from',
+    null,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(opts),
+    },
+  );
+  await loadBoards();
+  return result?.board ?? null;
+}
+
+/** Rename and/or re-file a board; `category: null` removes it from its category. */
+export async function updateBoard(id: string, patch: { name?: string; category?: string | null }): Promise<void> {
+  const payload = await post('updateBoard', `/api/canvas/boards/${encodeURIComponent(id)}`, 'PATCH', {
+    ...patch,
+    ...(patch.category === null ? { category: '' } : {}),
+  });
+  applyBoards(payload);
+}
+
+export async function setBoardReadme(id: string, readmeNodeId: string | null): Promise<void> {
+  const payload = await post('setBoardReadme', `/api/canvas/boards/${encodeURIComponent(id)}`, 'PATCH', {
+    readmeNodeId,
+  });
+  applyBoards(payload);
+}
+
+export async function deleteBoard(id: string): Promise<void> {
+  const payload = await post('deleteBoard', `/api/canvas/boards/${encodeURIComponent(id)}`, 'DELETE');
+  applyBoards(payload);
+}
+
+export function activeBoard(): BoardSummary | null {
+  return boardList.value.find((board) => board.id === activeBoardId.value) ?? null;
+}

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

@@ -144,6 +144,28 @@ export function clearSelection(): void {
   selectedNodeIds.value = new Set();
 }
 
+/** Clear transient UI state that must never follow a node id onto another board. */
+export function resetCanvasInteractionState(): void {
+  if (expandedCloseTimer !== null) {
+    clearTimeout(expandedCloseTimer);
+    expandedCloseTimer = null;
+  }
+  batch(() => {
+    activeNodeId.value = null;
+    expandedNodeId.value = null;
+    pendingExpandedNodeCloseId.value = null;
+    pendingCloseInitialCheckpointAt = undefined;
+    selectedNodeIds.value = new Set();
+    selectedEdgeId.value = null;
+    pendingConnection.value = null;
+    draggingEdge.value = null;
+    searchHighlightIds.value = null;
+    dragDropTarget.value = null;
+    contextPinnedNodeIds.value = new Set();
+  });
+  dropSuppressedForDrag = false;
+}
+
 // ── Groups v2 (rail-chrome-v2 phase 7, item 20) ──────────────────────
 
 /**

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

@@ -1,4 +1,5 @@
 import { canvasArea } from '../canvas/canvas-area';
+import { showToast } from './attention-bridge';
 import type { AgentPresenceSnapshot } from '../../shared/agent-presence.js';
 function logRequestError(action: string, error: unknown): void {
   console.error(`[intent-bridge] ${action} failed`, error);
@@ -31,14 +32,38 @@ function withWorkbenchMarker(init?: RequestInit): RequestInit {
     headers['x-pmx-source'] = tabAgentKey;
   } else {
     headers['X-PMX-Workbench'] = '1';
+    const token = (window as Window & { __PMX_WORKBENCH_TOKEN?: unknown }).__PMX_WORKBENCH_TOKEN;
+    if (typeof token === 'string') headers['X-PMX-Workbench-Token'] = token;
   }
   return { ...init, headers };
 }
 
+/**
+ * A write the server refused (fence, edit lock, validation) must not fail
+ * silently: the human sees the server's reason. Reads stay quiet.
+ */
+function reportRefusedWrite(res: Response, init: RequestInit | undefined, body: unknown): void {
+  if (res.ok || (init?.method ?? 'GET').toUpperCase() === 'GET') return;
+  const error =
+    body !== null && typeof body === 'object' && 'error' in body && typeof body.error === 'string' ? body.error : '';
+  showToast('remove', 'Change refused', error || `The server answered ${res.status}.`);
+}
+
+async function readJsonBody(res: Response): Promise<unknown> {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
 export async function requestJson<T>(action: string, url: string, fallback: T, init?: RequestInit): Promise<T> {
   try {
     const res = await fetch(url, withWorkbenchMarker(init));
-    return (await res.json()) as T;
+    const body = await readJsonBody(res);
+    reportRefusedWrite(res, init, body);
+    if (body === null) throw new Error(`${res.status} response had no JSON body`);
+    return body as T;
   } catch (error) {
     logRequestError(action, error);
     return fallback;
@@ -48,6 +73,7 @@ export async function requestJson<T>(action: string, url: string, fallback: T, i
 export async function requestOk(action: string, url: string, init?: RequestInit): Promise<{ ok: boolean }> {
   try {
     const res = await fetch(url, withWorkbenchMarker(init));
+    if (!res.ok) reportRefusedWrite(res, init, await readJsonBody(res));
     return { ok: res.ok };
   } catch (error) {
     logRequestError(action, error);
@@ -57,7 +83,8 @@ export async function requestOk(action: string, url: string, init?: RequestInit)
 
 export async function requestBestEffort(action: string, url: string, init?: RequestInit): Promise<void> {
   try {
-    await fetch(url, withWorkbenchMarker(init));
+    const res = await fetch(url, withWorkbenchMarker(init));
+    if (!res.ok) reportRefusedWrite(res, init, await readJsonBody(res));
   } catch (error) {
     logRequestError(action, error);
   }
@@ -262,6 +289,7 @@ export async function createNodeFromClient(opts: {
   y?: number;
   width?: number;
   height?: number;
+  boardId?: string;
 }): Promise<{ ok: boolean; id?: string }> {
   return requestJson(
     'createNodeFromClient',

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

@@ -83,9 +83,13 @@ function setPhase(id: string, phase: IntentPhase, ms: number, settledNodeId?: st
   next.set(id, { ...current, phase, ...(settledNodeId ? { settledNodeId } : {}) });
   writeIntents(next);
   clearExitTimer(id);
+  // The layer removes ghosts on animationend, after the browser actually paints
+  // the morph. A wall-clock deadline equal to the CSS duration can delete a
+  // ghost before its delayed first paint or transition completes on a busy tab.
+  // Retain a backstop for hidden tabs or disabled animations.
   exitTimers.set(
     id,
-    setTimeout(() => removeIntent(id), ms),
+    setTimeout(() => removeIntent(id), ms + 1500),
   );
 }
 

package/src/client/state/node-factory.ts

@@ -27,6 +27,7 @@ export const DEFAULT_POSITIONS: Record<CanvasNodeState['type'], { x: number; y:
   webpage: { x: 380, y: 80, w: 520, h: 420 },
   'json-render': { x: 380, y: 720, w: 840, h: 620 },
   graph: { x: 380, y: 720, w: 760, h: 520 },
+  board: { x: 380, y: 80, w: 360, h: 160 },
   ledger: { x: 1130, y: 520, w: 320, h: 280 },
   trace: { x: 40, y: 900, w: 200, h: 56 },
   file: { x: 380, y: 80, w: 720, h: 600 },

package/src/client/state/presentation.ts

@@ -0,0 +1,7 @@
+import { signal } from '@preact/signals';
+
+export const presenting = signal(false);
+export const recordingCamera = signal(false);
+export function ownsCamera(): boolean {
+  return presenting.value || recordingCamera.value;
+}

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

@@ -26,6 +26,8 @@ export interface ApprovalGateView {
   createdAt: string;
   /** Unattended-approval TTL: when a pending gate auto-holds. */
   expiresAt: string | null;
+  resolvedBy?: { actor: 'human' | 'agent' | 'system' | 'unknown'; source: string; agentId?: string } | null;
+  selfAnswer?: boolean;
 }
 export interface AxEventView {
   id: string;
@@ -106,6 +108,9 @@ export async function setScopeFence(nodeIds: string[] | null): Promise<boolean>
 
 /** Auto-held gates: the policy said no on the human's behalf; they can be reopened. */
 export const heldGates = computed(() => sessionGates.value.filter((gate) => gate.status === 'held'));
+export const resolvedGates = computed(() =>
+  sessionGates.value.filter((gate) => gate.status === 'approved' || gate.status === 'rejected'),
+);
 
 export interface AxTimelineView {
   events: AxEventView[];
@@ -386,6 +391,9 @@ export function applySessionReceipt(data: Record<string, unknown>): void {
   const counts = data.counts as Partial<SessionReceipt['counts']> | undefined;
   const snapshot = data.snapshot as SessionReceipt['snapshot'] | undefined;
   if (typeof data.label !== 'string' || typeof data.endedAt !== 'string') return;
+  // Keep history/timeline intact, but only interrupt for a changed top-level
+  // session. Quiet endings must not replace an existing useful receipt.
+  if (data.unchanged === true || typeof data.parentAgentId === 'string') return;
   sessionReceipt.value = {
     label: data.label,
     endedAt: data.endedAt,