pmx-canvas 0.10.0 → 0.12.0

package/src/client/theme/surface-theme.css

@@ -21,12 +21,12 @@
   /* ── Core palette (dark · ink + cyan) ────────────────────── */
   --c-bg: #081524;
   --c-panel: #0f1d31;
-  --c-panel-soft: #0a1729;
+  --c-panel-soft: #13243b;
   --c-line: #1b2c44;
   --c-text: #e6eef7;
-  --c-text-soft: #c7d3ea;
+  --c-text-soft: #b9c6d6;
   --c-muted: #8ea3bd;
-  --c-dim: #5c6b80;
+  --c-dim: #6b7d94;
   --c-accent: #4BBCFF;
   --c-ok: #2fd07f;
   --c-warn: #f4c542;
@@ -46,13 +46,13 @@
   /* Common aliases authored HTML might use. */
   --color-bg: #081524;
   --color-panel: #0f1d31;
-  --color-surface: #0a1729;
+  --color-surface: #13243b;
   --color-border: #1b2c44;
   --color-text: #e6eef7;
   --color-text-primary: #e6eef7;
-  --color-text-secondary: #c7d3ea;
+  --color-text-secondary: #b9c6d6;
   --color-text-muted: #8ea3bd;
-  --color-text-dim: #5c6b80;
+  --color-text-dim: #6b7d94;
   --color-accent: #4BBCFF;
   --color-success: #2fd07f;
   --color-warning: #f4c542;

package/src/client/types.ts

@@ -115,6 +115,7 @@ export const TYPE_LABELS: Record<CanvasNodeState['type'], string> = {
 /** Node types that support the full-viewport expand/focus overlay. */
 export const EXPANDABLE_TYPES = new Set<CanvasNodeState['type']>([
   'markdown',
+  'status',
   'mcp-app',
   'webpage',
   'json-render',

package/src/json-render/charts/tufte-components.tsx

@@ -336,6 +336,18 @@ interface SlopegraphProps {
   height?: number | null;
 }
 
+/** Separate close labels without moving the data points they describe. */
+function slopeLabelPositions(values: number[], top: number, bottom: number): number[] {
+  const order = values.map((y, index) => ({ y, index })).sort((a, b) => a.y - b.y);
+  const gap = Math.min(14, (bottom - top) / Math.max(1, order.length - 1));
+  for (let i = 1; i < order.length; i++) order[i].y = Math.max(order[i].y, order[i - 1].y + gap);
+  if (order.length) order[order.length - 1].y = Math.min(order[order.length - 1].y, bottom);
+  for (let i = order.length - 2; i >= 0; i--) order[i].y = Math.min(order[i].y, order[i + 1].y - gap);
+  const result = [...values];
+  for (const { y, index } of order) result[index] = y;
+  return result;
+}
+
 function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>) {
   const stroke = props.color ?? ACCENT;
   const rows = (props.data ?? []).map((row) => ({
@@ -359,6 +371,16 @@ function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>) {
   // fills without pushing a scrollbar onto the iframe document.
   const plotH = chartPlotHeight(height, Boolean(props.title));
   const scaleY = (v: number) => topPad + (1 - (v - min) / (max - min)) * (plotH - topPad - botPad);
+  const beforeLabels = slopeLabelPositions(
+    rows.map((row) => scaleY(row.before)),
+    topPad,
+    plotH - botPad,
+  );
+  const afterLabels = slopeLabelPositions(
+    rows.map((row) => scaleY(row.after)),
+    topPad,
+    plotH - botPad,
+  );
 
   return (
     <div ref={frameRef} className="pmx-chart pmx-chart--slopegraph" style={{ height }}>
@@ -390,10 +412,30 @@ function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>) {
               <line x1={leftX} y1={y1} x2={rightX} y2={y2} stroke={lineColor} strokeWidth={1.5} />
               <circle cx={leftX} cy={y1} r={2.5} fill={lineColor} />
               <circle cx={rightX} cy={y2} r={2.5} fill={lineColor} />
-              <text x={leftX - 8} y={y1} textAnchor="end" dominantBaseline="central" fontSize={11} fill={INK}>
+              {beforeLabels[i] !== y1 && (
+                <line x1={leftX} y1={y1} x2={leftX - 5} y2={beforeLabels[i]} stroke={lineColor} />
+              )}
+              {afterLabels[i] !== y2 && (
+                <line x1={rightX} y1={y2} x2={rightX + 5} y2={afterLabels[i]} stroke={lineColor} />
+              )}
+              <text
+                x={leftX - 8}
+                y={beforeLabels[i]}
+                textAnchor="end"
+                dominantBaseline="central"
+                fontSize={11}
+                fill={INK}
+              >
                 {`${row.label}  ${row.before}`}
               </text>
-              <text x={rightX + 8} y={y2} textAnchor="start" dominantBaseline="central" fontSize={11} fill={INK}>
+              <text
+                x={rightX + 8}
+                y={afterLabels[i]}
+                textAnchor="start"
+                dominantBaseline="central"
+                fontSize={11}
+                fill={INK}
+              >
                 {`${row.after}  ${row.label}`}
               </text>
             </g>

package/src/json-render/renderer/index.css

@@ -3,7 +3,7 @@
 
 @source "../../../../node_modules/@json-render/shadcn/dist/index.js";
 
-@custom-variant dark (&:is([data-theme="dark"] *));
+@custom-variant dark (&:is(.dark *));
 
 @theme {
   --font-sans: "IBM Plex Sans", system-ui, sans-serif;
@@ -99,6 +99,66 @@
   --chart-6: #ffffff;
 }
 
+/* Named themes share the canvas surface, including nested cards and charts.
+   Explicit dark/light remain available for authored design experiments. */
+:root[data-canvas-theme] {
+  --radius: 6px;
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 13px;
+  --text-lg: 15px;
+  --text-xl: 20px;
+  --background: var(--c-panel);
+  --foreground: var(--c-text);
+  --card: var(--c-panel-soft);
+  --card-foreground: var(--c-text);
+  --popover: var(--c-panel);
+  --popover-foreground: var(--c-text);
+  --primary: var(--c-accent);
+  --primary-foreground: var(--c-on-accent, var(--c-on-pin));
+  --secondary: var(--c-panel-soft);
+  --secondary-foreground: var(--c-text);
+  --muted: var(--c-panel-soft);
+  --muted-foreground: var(--c-muted);
+  --accent: var(--c-panel-soft);
+  --accent-foreground: var(--c-text);
+  --destructive: var(--c-danger);
+  --border: var(--c-line);
+  --input: var(--c-line);
+  --ring: var(--c-accent);
+  --chart-1: var(--c-accent);
+  --chart-2: var(--c-rel-supports);
+  --chart-3: var(--c-rel-contradicts);
+  --chart-4: var(--c-rel-cites);
+  --chart-5: var(--c-rel-informs);
+  --chart-6: var(--c-muted);
+  font-size: 16px;
+}
+
+/* surface-theme's unlayered body rule otherwise wins over Tailwind's base layer. */
+body {
+  background: var(--background);
+  color: var(--foreground);
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: 13px;
+}
+
+.pmx-viewer-root { width: 100%; min-width: 0; }
+[data-embedded] .pmx-viewer-root:not(:has(> [data-slot="card"])) { padding: 12px 14px; }
+[data-embedded] .pmx-viewer-root > [data-slot="card"] {
+  width: 100%;
+  max-width: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  padding: 12px 14px;
+}
+[data-embedded][data-duplicate-title] .pmx-viewer-root > [data-slot="card"] > [data-slot="card-header"] > [data-slot="card-title"] { display: none; }
+[data-embedded][data-duplicate-title] .pmx-viewer-root > [data-slot="card"] > [data-slot="card-header"]:not(:has([data-slot="card-description"])) { display: none; }
+[data-embedded] .pmx-viewer-root > [data-slot="card"] > [data-slot="card-content"] { padding: 0; }
+
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -159,7 +219,7 @@ button {
   border: 1px solid transparent;
   border-radius: 9999px;
   padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
+  font-size: max(11px, 0.75rem);
   font-weight: 500;
   line-height: 1.25rem;
 }

package/src/json-render/renderer/index.tsx

@@ -23,6 +23,7 @@ import { extraChartComponents } from '../charts/extra-components';
 import { tufteChartComponents } from '../charts/tufte-components';
 import { pmxCanvasDirectives } from '../directives';
 import { JsonRenderDevtools } from '@json-render/devtools-react';
+import { canvasThemeScheme, isCanvasTheme } from '../../shared/themes.js';
 
 type BadgeVariant =
   | 'default'
@@ -167,10 +168,12 @@ function syncPreferredTheme(): void {
 }
 
 function applyTheme(theme: unknown): void {
-  if (theme !== 'dark' && theme !== 'light' && theme !== 'high-contrast') return;
+  if (theme !== 'dark' && theme !== 'light' && !isCanvasTheme(theme)) return;
   document.documentElement.setAttribute('data-theme', theme);
-  document.documentElement.classList.toggle('dark', theme === 'dark' || theme === 'high-contrast');
-  document.documentElement.style.colorScheme = theme === 'light' ? 'light' : 'dark';
+  document.documentElement.toggleAttribute('data-canvas-theme', isCanvasTheme(theme));
+  const scheme = theme === 'light' ? 'light' : canvasThemeScheme(theme);
+  document.documentElement.classList.toggle('dark', scheme === 'dark');
+  document.documentElement.style.colorScheme = scheme;
 }
 
 function App({ store }: { store: StateStore }) {
@@ -235,11 +238,15 @@ function App({ store }: { store: StateStore }) {
         padding: 0,
         boxSizing: 'border-box' as const,
       }
-    : { minHeight: '100vh', padding: 16, boxSizing: 'border-box' as const };
+    : { minHeight: '100vh', padding: 0, boxSizing: 'border-box' as const };
   return (
-    <div style={containerStyle}>
+    <div
+      style={containerStyle}
+      data-embedded={!isSite ? '' : undefined}
+      data-duplicate-title={spec.elements[spec.root]?.props?.title === document.title ? '' : undefined}
+    >
       <JSONUIProvider registry={registry} store={store} directives={pmxCanvasDirectives} handlers={buildAxHandlers()}>
-        <div style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
+        <div className="pmx-viewer-root" style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
           <Renderer spec={spec} registry={registry} loading={false} />
         </div>
         {window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ ? <JsonRenderDevtools position="right" /> : null}
@@ -282,8 +289,25 @@ if (root) {
   // Standalone viewers have no state token and render immediately.
   window.addEventListener('message', (event: MessageEvent) => {
     if (event.source !== window.parent) return;
-    const m = event.data as { source?: string; type?: string; token?: string; state?: unknown } | null;
+    const m = event.data as {
+      source?: string;
+      type?: string;
+      token?: string;
+      state?: unknown;
+      theme?: unknown;
+      title?: unknown;
+    } | null;
     if (!m) return;
+    if (m.source === HTML_SURFACE_PUSH_SOURCE && m.type === 'theme-update' && stateToken && m.token === stateToken) {
+      applyTheme(m.theme);
+      if (typeof m.title === 'string') {
+        document.title = m.title;
+        const spec = window.__PMX_CANVAS_JSON_RENDER_SPEC__;
+        document
+          .querySelector('[data-embedded]')
+          ?.toggleAttribute('data-duplicate-title', spec?.elements[spec.root]?.props?.title === m.title);
+      }
+    }
     if (m.source === JSON_VIEWER_STATE_SOURCE && m.type === 'restore' && stateToken && m.token === stateToken) {
       if (m.state === null || (typeof m.state === 'object' && !Array.isArray(m.state)))
         mount(m.state as Record<string, unknown> | null);

package/src/json-render/server.ts

@@ -6,6 +6,7 @@ import { applySpecPatch, parseSpecStreamLine, type Spec, type SpecStreamLine } f
 import { allComponentDefinitions, catalog, validateShadcnElementProps, type JsonRenderIssue } from './catalog.js';
 import { findUnknownDirectiveKey, isDynamicPropValue } from './directives.js';
 import { contentHeightReporterTag } from '../shared/content-height-reporter.js';
+import type { CanvasThemeName } from '../shared/themes.js';
 
 export interface JsonRenderSpec {
   root: string;
@@ -1030,7 +1031,7 @@ export async function readJsonRenderBundle(): Promise<{ js: string; css: string
 export async function buildJsonRenderViewerHtml(options: {
   title: string;
   spec: JsonRenderSpec;
-  theme?: 'dark' | 'light' | 'high-contrast';
+  theme?: CanvasThemeName | 'dark' | 'light';
   display?: 'expanded' | 'site';
   devtools?: boolean;
   nodeId?: string;
@@ -1076,7 +1077,7 @@ export async function buildJsonRenderViewerHtml(options: {
     const heightReporter = options.frameToken ? contentHeightReporterTag(options.frameToken) : '';
     return buildAppHtml({
       title: options.title,
-      css: cssBundle,
+      css: `${readFileSync(join(import.meta.dir, '../client/theme/surface-theme.css'), 'utf-8')}\n${cssBundle}`,
       js: escapeInlineScriptSource(boot),
       head: `<meta name="color-scheme" content="light dark" />${heightReporter}`,
     });

package/src/mcp/server.ts

@@ -200,6 +200,8 @@ export function createMcpServer(): McpServer {
       annotations: { readOnlyHint: false, destructiveHint: true, idempotentHint: false, openWorldHint: false },
       outputSchema: interactionResult,
       inputSchema: {
+        targetBoardId: z.string().optional(),
+        agentId: z.string().optional(),
         type: z
           .enum(AX_INTERACTION_TYPES)
           .describe('Interaction type, e.g. ax.work.create, ax.evidence.add, ax.focus.set.'),
@@ -213,13 +215,15 @@ export function createMcpServer(): McpServer {
         source: z.enum(AX_SOURCES).optional().describe('Optional host/source label. Defaults to mcp.'),
       },
     },
-    async ({ type, sourceNodeId, payload, sourceSurface, correlationId, source }, extra) => {
+    async ({ type, sourceNodeId, payload, sourceSurface, correlationId, source, targetBoardId, agentId }, extra) => {
       try {
         const c = await ensureCanvas();
         extra.signal.throwIfAborted();
         const result = await c.invoker().invoke(
           'ax.interaction.submit',
           {
+            targetBoardId,
+            agentId,
             type,
             sourceNodeId,
             ...(payload ? { payload } : {}),
@@ -269,6 +273,8 @@ export function createMcpServer(): McpServer {
       annotations: { readOnlyHint: false, destructiveHint: false, idempotentHint: false, openWorldHint: false },
       outputSchema: activityResult,
       inputSchema: {
+        targetBoardId: z.string().optional(),
+        agentId: z.string().optional(),
         kind: z.enum([
           'tool-start',
           'tool-result',
@@ -327,13 +333,15 @@ export function createMcpServer(): McpServer {
         source: z.enum(AX_SOURCES).optional(),
       },
     },
-    async ({ kind, title, summary, outcome, ref, nodeIds, data, reactions, source }, extra) => {
+    async ({ kind, title, summary, outcome, ref, nodeIds, data, reactions, source, targetBoardId, agentId }, extra) => {
       try {
         const c = await ensureCanvas();
         extra.signal.throwIfAborted();
         const result = await c.invoker().invoke(
           'ax.activity.ingest',
           {
+            targetBoardId,
+            agentId,
             kind,
             title,
             ...(summary !== undefined ? { summary } : {}),
@@ -389,6 +397,7 @@ export function createMcpServer(): McpServer {
       annotations: { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false },
       outputSchema: screenshotResult,
       inputSchema: {
+        targetBoardId: z.string().optional().describe('Not supported: screenshots inspect the shared WebView.'),
         format: z
           .enum(['png', 'jpeg', 'webp'])
           .optional()
@@ -396,8 +405,9 @@ export function createMcpServer(): McpServer {
         quality: z.number().optional().describe('Optional quality for lossy formats'),
       },
     },
-    async ({ format, quality }, extra) => {
+    async ({ format, quality, targetBoardId }, extra) => {
       try {
+        if (targetBoardId !== undefined) throw new Error('Screenshots inspect the shared WebView, not a scoped board.');
         const c = await ensureCanvas();
         extra.signal.throwIfAborted();
         const bytes = await c.screenshotAutomationWebView(

package/src/server/agent-presence.ts

@@ -203,6 +203,8 @@ export const PRESENCE_SET_SHAPE = {
 const presenceSetSchema = z.object(PRESENCE_SET_SHAPE);
 
 interface StoredPresence extends AgentPresence {
+  spatialBoardId: string | null;
+  sessionBoardId: string | null;
   lastSeenMs: number;
   /** Last explicit phase report; cursor/focus heartbeats must not keep a stale phase alive. */
   phaseSetMs: number;
@@ -296,7 +298,7 @@ type SessionEndListener = (
 export class AgentPresenceRegistry {
   private readonly presences = new Map<string, StoredPresence>();
   /** Newest first; bounded. Survives a writer fading — the feed is history, the writer list is presence. */
-  private activity: AgentActivityEntry[] = [];
+  private activity: Array<AgentActivityEntry & { boardId: string | null }> = [];
   private activitySeq = 0;
   private emit: PresenceEmitter = () => {};
   /** Single slots (like the emitter): server.ts owns the pre-session snapshot + receipt. */
@@ -435,6 +437,8 @@ export class AgentPresenceRegistry {
     }
     const existing = this.presences.get(key);
     const stored: StoredPresence = existing ?? {
+      spatialBoardId: canvasState.activeBoardId,
+      sessionBoardId: canvasState.activeBoardId,
       sessionId: key,
       source: input.source,
       agentId: input.agentId?.trim() || null,
@@ -458,6 +462,9 @@ export class AgentPresenceRegistry {
       touchesCache: null,
     };
     const wasAttached = stored.attached;
+    if (input.op || input.cursor !== undefined || input.focusNodeId !== undefined)
+      stored.spatialBoardId = canvasState.activeBoardId;
+    if (stored.attached && stored.sessionBoardId === null) stored.sessionBoardId = canvasState.activeBoardId;
     stored.lastSeenMs = now;
     stored.lastSeenAt = new Date(now).toISOString();
     if (input.label) stored.label = input.label;
@@ -466,6 +473,7 @@ export class AgentPresenceRegistry {
       if (input.activity?.summary) {
         this.activitySeq += 1;
         this.activity.unshift({
+          boardId: canvasState.activeBoardId,
           id: `act-${this.activitySeq}`,
           at: stored.lastSeenAt,
           sessionId: key,
@@ -480,6 +488,7 @@ export class AgentPresenceRegistry {
     }
     if (input.attached !== undefined) stored.attached = input.attached;
     if (!wasAttached && input.attached === true) {
+      stored.sessionBoardId = canvasState.activeBoardId;
       // *Start agent session* with one agent-less writer already on the board
       // adopts that writer — the human is claiming the agent they can see.
       if (stored.source === 'browser') {
@@ -539,13 +548,7 @@ export class AgentPresenceRegistry {
       captureBaseline(stored.startBoards, stored.startedAt);
     }
     if (input.attached === false) {
-      if (wasAttached)
-        this.onSessionEnd(
-          this.publicView(stored, now),
-          stored.startSnapshotId,
-          input.endedBy ?? 'agent',
-          stored.startedAt,
-        );
+      if (wasAttached) this.endSession(stored, input.endedBy ?? 'agent', now);
       // An explicit detach always removes the presence. In particular, a
       // worker that reports attached:false must not be refreshed into another
       // full activity TTL as an external writer.
@@ -690,13 +693,21 @@ export class AgentPresenceRegistry {
   }
 
   /** Remove a writer (session-end). */
+  private endSession(stored: StoredPresence, endedBy: 'human' | 'agent' | 'idle-timeout', now: number): void {
+    const id = stored.sessionBoardId;
+    if (id && !canvasState.listBoards().some((board) => board.id === id)) return;
+    const finish = () =>
+      this.onSessionEnd(this.publicView(stored, now), stored.startSnapshotId, endedBy, stored.startedAt);
+    if (id) canvasState.withBoard(id, finish);
+    else canvasState.withVisibleBoard(finish);
+  }
+
   detach(sessionId: string): boolean {
     const stored = this.presences.get(sessionId);
     const removed = this.presences.delete(sessionId);
     if (removed) {
       this.dropAliasesTo(sessionId);
-      if (stored?.attached)
-        this.onSessionEnd(this.publicView(stored, Date.now()), stored.startSnapshotId, 'agent', stored.startedAt);
+      if (stored?.attached) this.endSession(stored, 'agent', Date.now());
       this.scheduleEmit();
     }
     this.maybeStopSweeper();
@@ -709,7 +720,10 @@ export class AgentPresenceRegistry {
     return {
       presences,
       sessionActive: isSessionActive(presences),
-      activity: this.activity.map((entry) => ({ ...entry })),
+      activity: this.activity.map(({ boardId, ...entry }) => ({
+        ...entry,
+        nodeId: boardId === canvasState.activeBoardId ? entry.nodeId : null,
+      })),
     };
   }
 
@@ -744,6 +758,8 @@ export class AgentPresenceRegistry {
       startBoards: _startBoards,
       touchesCache: _touchesCache,
       lastActivityNodeId,
+      spatialBoardId,
+      sessionBoardId: _sessionBoardId,
       ...presence
     } = stored;
     if (withTouches) {
@@ -764,11 +780,15 @@ export class AgentPresenceRegistry {
     // Park-at fallback (joint-gaps #3): an attached-but-focusless writer is
     // invisible everywhere — fall back to the last node its activity touched.
     if (!presence.focusNodeId && lastActivityNodeId) presence.focusNodeId = lastActivityNodeId;
+    if (spatialBoardId !== canvasState.activeBoardId) {
+      presence.focusNodeId = null;
+      presence.cursor = null;
+    }
     // An attached session blocked on a human decision reads as waiting — the
     // gate itself lives in the AX state, this is only the presence view of it.
     // It overrides tooling too: the gate REQUEST is itself a write, and the
     // human's decision is the state that matters while it is pending.
-    if (presence.attached && this.hasPendingGate()) {
+    if (presence.attached && spatialBoardId === canvasState.activeBoardId && this.hasPendingGate()) {
       phase = 'waiting-approval';
       detail = null;
     }
@@ -824,13 +844,7 @@ export class AgentPresenceRegistry {
       if (presence.lastSeenMs + ttl <= now) {
         this.presences.delete(key);
         this.dropAliasesTo(key);
-        if (presence.attached)
-          this.onSessionEnd(
-            this.publicView(presence, now),
-            presence.startSnapshotId,
-            'idle-timeout',
-            presence.startedAt,
-          );
+        if (presence.attached) this.endSession(presence, 'idle-timeout', now);
         changed = true;
         continue;
       }
@@ -866,14 +880,16 @@ export class AgentPresenceRegistry {
     if (this.emitTimer) return;
     this.emitTimer = setTimeout(() => {
       this.emitTimer = null;
-      this.emit('agent-presence', this.snapshot() as unknown as Record<string, unknown>);
+      canvasState.withVisibleBoard(() =>
+        this.emit('agent-presence', this.snapshot() as unknown as Record<string, unknown>),
+      );
     }, 50);
     (this.emitTimer as { unref?: () => void }).unref?.();
   }
 
   private ensureSweeper(): void {
     if (this.sweepTimer || this.presences.size === 0) return;
-    this.sweepTimer = setInterval(() => this.sweep(), 1000);
+    this.sweepTimer = setInterval(() => canvasState.withVisibleBoard(() => this.sweep()), 1000);
     (this.sweepTimer as { unref?: () => void }).unref?.();
   }
 
@@ -894,10 +910,14 @@ export const agentPresence = new AgentPresenceRegistry();
 // the operation registry are covered too.
 // The live lens also follows card content (a person's edit takes a card out of
 // the agent's session) and the open board — but not moves, so a drag stays quiet.
-let lastBoardId = canvasState.activeBoardId;
+let lastBoardId = canvasState.visibleBoardId;
 let lastRevision = canvasState.getContentRevision().revision;
 canvasState.onChange((type) => {
-  const boardId = canvasState.activeBoardId;
+  if (canvasState.isBackgroundBoard) {
+    agentPresence.refresh();
+    return;
+  }
+  const boardId = canvasState.visibleBoardId;
   const revision = canvasState.getContentRevision().revision;
   if (boardId !== lastBoardId) agentPresence.boardOpened();
   else if (type === 'ax' || type === 'pins' || revision !== lastRevision) agentPresence.refresh();

package/src/server/ax-flow-loop.ts

@@ -111,4 +111,10 @@ export function advanceAxFlowLoops(): void {
 canvasState.setWorkItemsChangedListener(() => {
   refreshWorkboardNodes();
   advanceAxFlowLoops();
+  // Task title/detail changes also repaint explicitly presented live cards.
+  if (
+    canvasState.getLayout().nodes.some((node) => node.type === 'status' && typeof node.data.workItemId === 'string')
+  ) {
+    emitCanvasLayoutUpdate();
+  }
 });

package/src/server/ax-gate-ttl.ts

@@ -11,6 +11,7 @@
  */
 import { formatCountdown } from '../shared/approval-gates.js';
 import { canvasState } from './canvas-state.js';
+import { withCurrentActor } from './attribution.js';
 
 type GateEmitter = (event: string, payload: Record<string, unknown>) => void;
 
@@ -50,7 +51,13 @@ export function sweepExpiredGates(now = Date.now()): string[] {
 export function startGateTtlSweeper(emitter: GateEmitter): void {
   emit = emitter;
   if (sweepTimer) return;
-  sweepTimer = setInterval(() => sweepExpiredGates(), 1000);
+  sweepTimer = setInterval(
+    () =>
+      withCurrentActor({ actor: 'system', source: 'system' }, () => {
+        canvasState.forEachLiveBoard(() => sweepExpiredGates());
+      }),
+    1000,
+  );
   (sweepTimer as { unref?: () => void }).unref?.();
 }
 

package/src/server/ax-interaction.ts

@@ -379,6 +379,7 @@ const PAYLOAD_SCHEMAS: Record<string, z.ZodType> = {
  * Injected so this module stays free of a runtime canvas-state import.
  */
 export interface AxInteractionManager {
+  readonly boardIdentity: object;
   getNode(id: string): CanvasNodeState | undefined;
   /** Canvas read for `ax.flow.materialize` (placement obstacles + stale flow sweep). */
   getLayout(): CanvasLayout;
@@ -722,22 +723,27 @@ function materializeFlow(
  */
 // ── ax.work.create idempotency window ─────────────
 const WORK_CREATE_DEDUPE_MS = 2_500;
-const recentWorkCreates = new Map<string, { item: PmxAxWorkItem; at: number }>();
+const recentWorkCreates = new WeakMap<object, Map<string, { item: PmxAxWorkItem; at: number }>>();
 
-function recentWorkCreate(sourceNodeId: string, title: string): PmxAxWorkItem | null {
+function recentWorkCreate(owner: object, sourceNodeId: string, title: string): PmxAxWorkItem | null {
   const key = `${sourceNodeId}\u0000${title}`;
-  const hit = recentWorkCreates.get(key);
+  const hit = recentWorkCreates.get(owner)?.get(key);
   if (hit && Date.now() - hit.at <= WORK_CREATE_DEDUPE_MS) return hit.item;
   return null;
 }
 
-function rememberWorkCreate(sourceNodeId: string, title: string, item: PmxAxWorkItem): void {
+function rememberWorkCreate(owner: object, sourceNodeId: string, title: string, item: PmxAxWorkItem): void {
   const key = `${sourceNodeId}\u0000${title}`;
-  recentWorkCreates.set(key, { item, at: Date.now() });
-  if (recentWorkCreates.size > 64) {
+  let entries = recentWorkCreates.get(owner);
+  if (!entries) {
+    entries = new Map();
+    recentWorkCreates.set(owner, entries);
+  }
+  entries.set(key, { item, at: Date.now() });
+  if (entries.size > 64) {
     const now = Date.now();
-    for (const [k, v] of recentWorkCreates) {
-      if (now - v.at > WORK_CREATE_DEDUPE_MS) recentWorkCreates.delete(k);
+    for (const [k, v] of entries) {
+      if (now - v.at > WORK_CREATE_DEDUPE_MS) entries.delete(k);
     }
   }
 }
@@ -851,7 +857,7 @@ export function applyAxInteraction(
       // booked two identical work items ~1s apart): the SAME node creating a
       // work item with the SAME title inside the window gets the first item
       // back instead of a duplicate.
-      const dupe = recentWorkCreate(sourceNodeId, p.title);
+      const dupe = recentWorkCreate(manager.boardIdentity, sourceNodeId, p.title);
       if (dupe) return accept(type, sourceNodeId, dupe, 'ax-state-changed', { workItem: dupe });
       const workItem = manager.addWorkItem(
         {
@@ -862,7 +868,7 @@ export function applyAxInteraction(
         },
         opts,
       );
-      rememberWorkCreate(sourceNodeId, p.title, workItem);
+      rememberWorkCreate(manager.boardIdentity, sourceNodeId, p.title, workItem);
       return withLayoutBroadcast(accept(type, sourceNodeId, workItem, 'ax-state-changed', { workItem }), manager, [
         workItem,
       ]);