@1agh/maude 0.27.0 → 0.28.0

package/plugins/design/dev-server/inspect.ts

@@ -230,7 +230,37 @@ const INSPECTOR_SCRIPT = `
     '.dgn-pin { position: absolute; top: 0; left: 0; z-index: 2147483646; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px 999px 999px 4px; background: #facc15; color: #1c1917; font: 600 11px/22px var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4); transition: filter 120ms; transform-origin: bottom left; will-change: transform; }',
     '.dgn-pin:hover { filter: brightness(1.1); outline: 2px solid rgba(0,0,0,0.3); }',
     '.dgn-pin.resolved { background: #22c55e; color: #052e16; }',
-    '.dgn-pin.focused { box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 0 2px #fff; outline: 2px solid #fff; }'
+    '.dgn-pin.focused { box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 0 2px #fff; outline: 2px solid #fff; }',
+    /* Phase 13 / DDR-029 — canvas activity overlay. Single injection point so the
+       canvas iframe stays self-contained. Scoped with html ... so canvas-page
+       stylesheets can't clobber it. The "editing" motion is a light scan beam
+       (Phase 13.3) sweeping the whole artboard top→bottom — transform-only
+       (compositor), unmounts when the file goes idle (infinite-with-control,
+       flow:motion-rules §5); reduced-motion drops the beam to a static rim. The
+       rim border + glow are static boundary chrome. */
+    'html .dc-activity-rim { position: absolute; pointer-events: none; box-sizing: border-box; border: 2.5px solid var(--mdcc-activity, hsl(210 90% 58%)); border-radius: 5px; z-index: 6; opacity: 1; transition: opacity 200ms ease-out; }',
+    'html .dc-activity-rim[data-fading="true"] { opacity: 0; }',
+    'html .dc-activity-rim::after { content: ""; position: absolute; inset: -1px; border-radius: 6px; box-shadow: 0 0 0 1px var(--mdcc-activity, hsl(210 90% 58%)), 0 0 16px 2px var(--mdcc-activity, hsl(210 90% 58%)); opacity: 0.55; pointer-events: none; will-change: opacity; animation: dc-activity-glow var(--mdcc-activity-scan-ms, 2200ms) ease-in-out infinite; }',
+    'html .dc-activity-badge { position: absolute; top: 4px; right: 4px; z-index: 2; padding: 2px 8px; border-radius: 4px; background: var(--mdcc-activity, hsl(210 90% 58%)); color: #fff; font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.45); }',
+    /* Phase 13.3 — the AGENT BORDER is the primary "editing" indicator: a clear
+       2.5px border in the agent color with a softly pulsing glow (::after,
+       opacity-only, compositor). Clipping lives on the wash (not the rim) so the
+       outward glow is not clipped. The dc-activity-scan wash is ONE full-artboard
+       wave: a single gradient with a SHARP bottom edge (full agent color) fading
+       up to transparent at the top (height = artboard). Its sharp edge enters at
+       the top and the whole wave travels straight down and off past the bottom
+       edge (translateY -100% → 100%), then the next wave enters from the top in a
+       loop. transform-only; linear so it flows at a steady pace. */
+    'html .dc-activity-scan { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; pointer-events: none; z-index: 1; }',
+    'html .dc-activity-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 135%; will-change: transform; background: linear-gradient(to top, color-mix(in oklab, var(--mdcc-activity, hsl(210 90% 58%)) 20%, transparent) 0%, transparent 100%); animation: dc-activity-wave var(--mdcc-activity-scan-ms, 3800ms) linear infinite; }',
+    '@keyframes dc-activity-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }',
+    '@keyframes dc-activity-wave { from { transform: translateY(-100%); } to { transform: translateY(100%); } }',
+    '@media (prefers-reduced-motion: reduce) { html .dc-activity-rim { transition: none; } html .dc-activity-rim::after { animation: none; opacity: 0.55; } html .dc-activity-scan { display: none; } }',
+    /* Phase 13.1 / DDR-077 — "holding last good render" toast, shown when an
+       agent edit produced a broken intermediate (build/render error) and the
+       canvas is held instead of flashing white. Amber = warn, distinct from the
+       blue activity rim. pointer-events:none so it never blocks the canvas. */
+    'html .dc-hmr-holding { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2147483646; pointer-events: none; max-width: 90vw; padding: 6px 12px; border-radius: 6px; background: hsl(38 92% 50% / 0.96); color: #1c1207; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 10px rgba(0,0,0,0.45); }'
   ].join('\\n');
   document.documentElement.appendChild(styleEl);
 

package/plugins/design/dev-server/participants-chrome.tsx

@@ -17,6 +17,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useViewportControllerContext } from './canvas-lib.tsx';
+import { type AgentPresence, useAgentPresence } from './use-agent-presence.tsx';
 import { type ForeignAwareness, useCollab, useForeignAwareness } from './use-collab.tsx';
 
 const CHROME_CSS = `
@@ -110,6 +111,34 @@ const CHROME_CSS = `
 @media (prefers-reduced-motion: reduce) {
   .dc-participant { transition: none; }
 }
+/* Phase 13.2 / DDR-078 — agent presence avatar. Looks like a peer chip + a
+   subtle ✦ marker so an agent reads as distinct from a human collaborator. */
+.dc-participant--agent { box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); }
+.dc-participant-agent-marker {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--maude-chrome-bg-0, #fff);
+  color: var(--maude-chrome-fg-0, #111);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 8px;
+  line-height: 1;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.14);
+  pointer-events: none;
+}
+.dc-participant-popover__sub {
+  font-size: 11px;
+  color: var(--maude-chrome-fg-2, #666);
+  margin-top: -4px;
+  margin-bottom: 6px;
+  white-space: normal;
+  max-width: 200px;
+}
 `.trim();
 
 function ensureChromeStyles(): void {
@@ -192,10 +221,63 @@ function Avatar({ peer, isFollowing, onToggleFollow }: AvatarProps): JSX.Element
   );
 }
 
+// Phase 13.2 / DDR-078 — an agent rendered as a presence peer. No "Follow"
+// (an agent has no viewport to mirror); a ✦ marker + an "AI agent" popover
+// subtitle distinguish it from a human collaborator.
+function AgentAvatar({ agent }: { agent: AgentPresence }): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, [open]);
+
+  return (
+    <div
+      ref={rootRef}
+      className="dc-participant dc-participant--agent"
+      style={{ background: agent.color }}
+      onClick={() => setOpen((v) => !v)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setOpen((v) => !v);
+        }
+      }}
+      // biome-ignore lint/a11y/useSemanticElements: matches the peer Avatar chip pattern.
+      role="button"
+      tabIndex={0}
+      title={`${agent.name} (AI agent)`}
+      aria-label={`${agent.name}, AI agent`}
+      aria-expanded={open}
+    >
+      {initialsFor(agent.name)}
+      <span className="dc-participant-agent-marker" aria-hidden>
+        ✦
+      </span>
+      {open && (
+        // biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation wrapper; no actionable child.
+        // biome-ignore lint/a11y/useSemanticElements: popover wrapper carries no semantic role.
+        <div className="dc-participant-popover" onClick={(e) => e.stopPropagation()}>
+          <div className="dc-participant-popover__name">{agent.name}</div>
+          <div className="dc-participant-popover__sub">AI agent · {agent.author}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ParticipantsChrome(): JSX.Element | null {
   ensureChromeStyles();
   const collab = useCollab();
   const peers = useForeignAwareness();
+  const agent = useAgentPresence();
   const controller = useViewportControllerContext();
 
   const [followTarget, setFollowTarget] = useState<number | null>(null);
@@ -242,7 +324,9 @@ export function ParticipantsChrome(): JSX.Element | null {
     controller.setViewport(v);
   }, [controller, followTarget, peers]);
 
-  if (peers.length === 0) return null;
+  // Render whenever there's a human peer OR an active agent (so an agent shows
+  // even with no human collaborators connected).
+  if (peers.length === 0 && !agent) return null;
 
   return (
     <div className="dc-participants" aria-label="Active collaborators">
@@ -254,6 +338,7 @@ export function ParticipantsChrome(): JSX.Element | null {
           onToggleFollow={onToggleFollow}
         />
       ))}
+      {agent ? <AgentAvatar key={agent.id} agent={agent} /> : null}
     </div>
   );
 }

package/plugins/design/dev-server/server.ts

@@ -16,6 +16,7 @@
 
 import { spawn } from 'node:child_process';
 
+import { createActivity } from './activity.ts';
 import { createApi } from './api.ts';
 import { bootSelfHeal } from './boot-self-heal.ts';
 import { createAiActivity } from './collab/ai-activity.ts';
@@ -77,7 +78,10 @@ await inspect.load();
 collab = createCollab(ctx, api);
 const aiActivity = createAiActivity(ctx);
 const gitLifecycle = createGitLifecycle(ctx, collab.registry);
-const ws = createWs(ctx, api, inspect, collab);
+// Phase 13 / DDR-029 — fs-watch-driven canvas activity overlay. Subscribes to
+// `fs:any` and emits `activity:change`; ws.ts forwards it to canvas iframes.
+const activity = createActivity(ctx);
+const ws = createWs(ctx, api, inspect, collab, activity);
 const http = createHttp(ctx, api, inspect, aiActivity);
 const fsWatch = createFsWatch(ctx);
 
@@ -346,6 +350,11 @@ if (!process.env.NO_OPEN) {
 async function shutdown() {
   console.log('\n  Stopping…');
   fsWatch.stop();
+  try {
+    activity.stop();
+  } catch {
+    /* timer cleanup is best-effort */
+  }
   try {
     if (syncRuntime) await syncRuntime.stop();
   } catch {

package/plugins/design/dev-server/sync/index.ts

@@ -246,16 +246,17 @@ export function createSyncRuntime(
       return;
     }
 
-    // DDR-072 — loud boot banner when the project-level TSX opt-in is on against
-    // a NON-loopback hub. Broadening from hand-picked canvases to "all .tsx"
-    // also broadens the WebRTC/self-nav exfil residual (the sandbox contains
-    // execution but not that lane) to every synced canvas, so this must never be
-    // silent: a sneaky PR that flips `linkedHub.syncTsx` surfaces here on the
-    // next `serve`. Loopback hubs (local dev) skip it — no remote exfil concern.
-    if (linkedHub.syncTsx === true && !isLoopbackHubUrl(linkedHub.url)) {
-      const tsxCount = canvases.filter((c) => c.html.toLowerCase().endsWith('.tsx')).length;
+    // DDR-079 — TSX sync defaults ON, so every linked non-loopback project that
+    // ships .tsx broadcasts the WebRTC/self-nav exfil residual (the sandbox
+    // contains execution but not that lane) to every synced canvas. The default
+    // traded a footgun (silent 0-syncable) for this surface, so the surface must
+    // be LOUD: a banner on every `serve` naming the count + the opt-outs. Fires
+    // unless explicitly opted out (`syncTsx: false`); loopback hubs (local dev)
+    // skip it — no remote exfil concern.
+    const tsxBodyCount = canvases.filter((c) => c.html.toLowerCase().endsWith('.tsx')).length;
+    if (linkedHub.syncTsx !== false && tsxBodyCount > 0 && !isLoopbackHubUrl(linkedHub.url)) {
       console.warn(
-        `[sync] syncTsx=true — ${tsxCount} TSX canvas BODIES will sync to ${linkedHub.url} (project-level opt-in, DDR-072). The sandbox contains execution, but the WebRTC/self-nav exfil residual now applies to ALL synced canvases — only for hubs you operate or fully trust. Set a canvas .meta.json "syncable": false to exclude it.`
+        `[sync] ${tsxBodyCount} TSX canvas BODIES will sync to ${linkedHub.url} (TSX sync is ON by default — DDR-079). The sandbox contains execution, but a WebRTC/self-nav exfil residual applies to every synced canvas — link only hubs you operate or trust. Opt out: linkedHub.syncTsx=false (whole project) or a canvas .meta.json "syncable": false (one canvas).`
       );
     }
 
@@ -612,12 +613,15 @@ export async function scanCanvases(ctx: Context): Promise<CanvasScan> {
   // `.tsx` syncs — the per-canvas opt-in is inert without the sandbox, and
   // decoupling them would re-open the CRITICAL F1 RCE (DDR-060, DDR-054 §F1).
   const splitActive = !!ctx.canvasOrigin;
-  // DDR-072 — project-level TSX opt-in. When `linkedHub.syncTsx` is true, a
-  // `.tsx` with no explicit sidecar verdict defaults to syncable (the per-canvas
-  // sidecar still wins either way — see resolveSyncable). Coupled with the
-  // sandbox via `splitActive` exactly like the per-canvas opt-in, so the flag is
-  // inert without the F1 containment (DDR-060 Lock-2 invariant).
-  const projectSyncTsx = ctx.cfg.linkedHub?.syncTsx === true;
+  // DDR-079 (supersedes DDR-072) — TSX sync defaults ON for a linked project.
+  // Absence of the flag = ON: a freshly-linked peer sees the project's TSX
+  // without a hidden per-project opt-in (the recurring "I linked but my teammate
+  // sees nothing" footgun). `linkedHub.syncTsx: false` is the explicit
+  // project-wide opt-out; a per-canvas `.meta.json "syncable": false` still wins
+  // for one canvas (see resolveSyncable). The Lock-2 sandbox coupling
+  // (`splitActive`) is UNTOUCHED — a `.tsx` still syncs ONLY when the cross-origin
+  // containment is active; decoupling them would re-open the F1 RCE (DDR-060).
+  const projectSyncTsx = ctx.cfg.linkedHub?.syncTsx !== false;
   for (const group of ctx.cfg.canvasGroups) {
     const groupAbs = path.join(ctx.paths.designRoot, group.path);
     if (!existsSync(groupAbs)) continue;
@@ -636,7 +640,7 @@ export async function scanCanvases(ctx: Context): Promise<CanvasScan> {
 }
 
 /**
- * T3 (9.1-B) + DDR-072 — resolve whether a `.tsx` body is syncable.
+ * T3 (9.1-B) + DDR-079 (was DDR-072) — resolve whether a `.tsx` body is syncable.
  *
  * Tri-state precedence:
  *  1. The sibling `<name>.meta.json` `"syncable"` boolean ALWAYS wins when
@@ -644,9 +648,10 @@ export async function scanCanvases(ctx: Context): Promise<CanvasScan> {
  *     sidecar; deliberately NOT in the untrusted `/_api/canvas-meta` PATCH
  *     whitelist (api.ts), so a hostile canvas/hub cannot flip its own body into
  *     or out of the sync set.
- *  2. Otherwise fall back to the project-level `linkedHub.syncTsx` default.
+ *  2. Otherwise fall back to `projectSyncTsx` — which now defaults to TRUE
+ *     (DDR-079); `linkedHub.syncTsx: false` is the explicit project-wide opt-out.
  *
- * Missing sidecar / parse error → no explicit verdict → the project default.
+ * Missing sidecar / parse error → no explicit verdict → the project default (on).
  */
 function resolveSyncable(bodyAbs: string, projectSyncTsx: boolean): boolean {
   const metaAbs = bodyAbs.replace(/\.(tsx|html)$/i, '.meta.json');
@@ -752,7 +757,7 @@ export function buildNoSyncablePayload(
 ): NoSyncablePayload {
   const reason =
     tsxCount > 0
-      ? `${tsxCount} TSX canvas(es) found but none are syncable — a TSX body syncs when the canvas opts in (.meta.json "syncable": true) OR the project opts in all of them (.design/config.json linkedHub.syncTsx: true, DDR-072). The canvas sandbox is on by default; MAUDE_CANVAS_ORIGIN_SPLIT=0 disables it (and TSX sync with it). See DDR-060.`
+      ? `${tsxCount} TSX canvas(es) found but none are syncable. TSX sync is ON by default (DDR-079), so this means it was opted OUT — either project-wide (.design/config.json linkedHub.syncTsx: false) or per canvas (.meta.json "syncable": false) — OR the cross-origin sandbox is off (MAUDE_CANVAS_ORIGIN_SPLIT=0 disables it, and TSX sync with it — DDR-060). Remove the opt-out / re-enable the sandbox to sync.`
       : `no canvases found under ${designRoot}.`;
   return {
     linked: true,

package/plugins/design/dev-server/test/activity.test.ts

@@ -0,0 +1,195 @@
+// activity — Phase 13. fs:any → per-file active|idle tracker + region diff.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  ACTIVITY_IDLE_MS,
+  type ActivityChange,
+  createActivity,
+  diffArtboardIds,
+  isCanvasFile,
+} from '../activity.ts';
+import { type Context, createBus } from '../context.ts';
+
+function mkCtx(): Context {
+  const bus = createBus();
+  return {
+    cfg: {} as Context['cfg'],
+    projectLabel: '',
+    // No designRoot → refineArtboards() short-circuits; transition tests stay
+    // fs-free. The diff is exercised directly via diffArtboardIds() below.
+    paths: {} as Context['paths'],
+    bus,
+  };
+}
+
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+describe('activity / isCanvasFile', () => {
+  test('accepts .tsx + .html canvases under ui/', () => {
+    expect(isCanvasFile('ui/Smoke TSX.tsx')).toBe(true);
+    expect(isCanvasFile('ui/legacy.html')).toBe(true);
+    expect(isCanvasFile('ui/components/Card.tsx')).toBe(true);
+  });
+
+  test('rejects non-canvas extensions', () => {
+    expect(isCanvasFile('ui/Smoke.css')).toBe(false);
+    expect(isCanvasFile('_locator.json')).toBe(false);
+    expect(isCanvasFile('ui/shot.png')).toBe(false);
+  });
+
+  test('rejects _-prefixed files + dirs (runtime artifacts, history, draw, smoke)', () => {
+    expect(isCanvasFile('_active.json')).toBe(false);
+    expect(isCanvasFile('_history/ui/Smoke TSX/0001.tsx')).toBe(false);
+    expect(isCanvasFile('_draw/logo.proof.tsx')).toBe(false);
+    expect(isCanvasFile('_history/snap.html')).toBe(false);
+  });
+
+  test('rejects SKIP_DIRS segments', () => {
+    expect(isCanvasFile('node_modules/react/index.tsx')).toBe(false);
+    expect(isCanvasFile('dist/runtime/x.tsx')).toBe(false);
+    expect(isCanvasFile('ui/build/out.tsx')).toBe(false);
+  });
+
+  test('rejects DS preview specimens (false-positive guard)', () => {
+    expect(isCanvasFile('system/aurora/preview/motion.html')).toBe(false);
+    expect(isCanvasFile('system/aurora/preview/motion.tsx')).toBe(false);
+    // but a real canvas elsewhere under system/ is fine
+    expect(isCanvasFile('system/aurora/showcase.tsx')).toBe(true);
+  });
+
+  test('normalizes back-slash + leading slash', () => {
+    expect(isCanvasFile('\\ui\\Smoke.tsx')).toBe(true);
+    expect(isCanvasFile('/ui/Smoke.tsx')).toBe(true);
+    expect(isCanvasFile('')).toBe(false);
+  });
+});
+
+describe('activity / transitions', () => {
+  test('idle → active on first canvas fs:any event', () => {
+    const ctx = mkCtx();
+    const seen: ActivityChange[] = [];
+    ctx.bus.on('activity:change', (c) => seen.push(c));
+    const act = createActivity(ctx, { idleMs: 40, diff: false });
+
+    ctx.bus.emit('fs:any', 'ui/Smoke.tsx');
+    expect(act.state['ui/Smoke.tsx']?.status).toBe('active');
+    expect(seen).toHaveLength(1);
+    expect(seen[0]).toMatchObject({ file: 'ui/Smoke.tsx', status: 'active', artboard_ids: null });
+    act.stop();
+  });
+
+  test('non-canvas fs:any events are ignored', () => {
+    const ctx = mkCtx();
+    const seen: ActivityChange[] = [];
+    ctx.bus.on('activity:change', (c) => seen.push(c));
+    const act = createActivity(ctx, { idleMs: 40, diff: false });
+
+    ctx.bus.emit('fs:any', 'ui/Smoke.css');
+    ctx.bus.emit('fs:any', '_active.json');
+    ctx.bus.emit('fs:any', 'system/x/preview/motion.tsx');
+    expect(seen).toHaveLength(0);
+    expect(act.state['ui/Smoke.css']).toBeUndefined();
+    act.stop();
+  });
+
+  test('active → active: rapid events keep the file active past one idle window', async () => {
+    const ctx = mkCtx();
+    const act = createActivity(ctx, { idleMs: 60, diff: false });
+
+    ctx.bus.emit('fs:any', 'ui/Smoke.tsx');
+    await sleep(40);
+    ctx.bus.emit('fs:any', 'ui/Smoke.tsx'); // refresh before the 60 ms idle fires
+    await sleep(40); // 80 ms since first event, but only 40 ms since the refresh
+    expect(act.state['ui/Smoke.tsx']?.status).toBe('active');
+    act.stop();
+  });
+
+  test('active → idle after idleMs of silence, and emits the idle change', async () => {
+    const ctx = mkCtx();
+    const seen: ActivityChange[] = [];
+    ctx.bus.on('activity:change', (c) => seen.push(c));
+    const act = createActivity(ctx, { idleMs: 40, diff: false });
+
+    ctx.bus.emit('fs:any', 'ui/Smoke.tsx');
+    await sleep(80);
+    expect(act.state['ui/Smoke.tsx']?.status).toBe('idle');
+    const last = seen[seen.length - 1];
+    expect(last).toMatchObject({ file: 'ui/Smoke.tsx', status: 'idle' });
+    act.stop();
+  });
+
+  test('mark() test seam marks active without the bus', () => {
+    const ctx = mkCtx();
+    const seen: ActivityChange[] = [];
+    ctx.bus.on('activity:change', (c) => seen.push(c));
+    const act = createActivity(ctx, { idleMs: 40, diff: false });
+
+    act.mark('ui/Manual.tsx');
+    expect(act.state['ui/Manual.tsx']?.status).toBe('active');
+    expect(seen[0]?.file).toBe('ui/Manual.tsx');
+    act.stop();
+  });
+
+  test('stop() halts the idle timer (no idle emit after stop)', async () => {
+    const ctx = mkCtx();
+    const seen: ActivityChange[] = [];
+    ctx.bus.on('activity:change', (c) => seen.push(c));
+    const act = createActivity(ctx, { idleMs: 40, diff: false });
+
+    ctx.bus.emit('fs:any', 'ui/Smoke.tsx');
+    act.stop();
+    await sleep(80);
+    expect(seen.filter((c) => c.status === 'idle')).toHaveLength(0);
+    // stop() also detaches the bus subscription.
+    ctx.bus.emit('fs:any', 'ui/Other.tsx');
+    expect(act.state['ui/Other.tsx']).toBeUndefined();
+  });
+});
+
+describe('activity / diffArtboardIds (Task 7)', () => {
+  const wrap = (primaryBody: string, secondaryBody: string) =>
+    `import { DesignCanvas, DCArtboard } from '@maude/canvas-lib';
+export default function C() {
+  return (
+    <DesignCanvas>
+      <DCArtboard id="primary" label="Primary" width={400} height={300}>${primaryBody}</DCArtboard>
+      <DCArtboard id="secondary" label="Secondary" width={400} height={300}>${secondaryBody}</DCArtboard>
+    </DesignCanvas>
+  );
+}`;
+
+  test('change confined to one artboard → that id only', () => {
+    const prev = wrap('<p>A</p>', '<p>B</p>');
+    const next = wrap('<p>A</p>', '<p>B changed</p>');
+    expect(diffArtboardIds(prev, next)).toEqual(['secondary']);
+  });
+
+  test('change in both artboards → both ids', () => {
+    const prev = wrap('<p>A</p>', '<p>B</p>');
+    const next = wrap('<p>A2</p>', '<p>B2</p>');
+    expect(diffArtboardIds(prev, next)?.sort()).toEqual(['primary', 'secondary']);
+  });
+
+  test('identical content → null (no region changed)', () => {
+    const src = wrap('<p>A</p>', '<p>B</p>');
+    expect(diffArtboardIds(src, src)).toBeNull();
+  });
+
+  test('change outside any artboard body → null (file-level fallback)', () => {
+    const prev = wrap('<p>A</p>', '<p>B</p>');
+    // Added an import line outside any DCArtboard → skeleton differs.
+    const next = `import x from 'y';\n${wrap('<p>A</p>', '<p>B</p>')}`;
+    expect(diffArtboardIds(prev, next)).toBeNull();
+  });
+
+  test('no DCArtboard markers → null (ambiguous)', () => {
+    expect(diffArtboardIds('<div>old</div>', '<div>new</div>')).toBeNull();
+  });
+
+  test('artboard added/removed → null (shell differs)', () => {
+    const prev = wrap('<p>A</p>', '<p>B</p>');
+    const next = `${wrap('<p>A</p>', '<p>B</p>')}\n// trailing <DCArtboard id="third" label="T" width={1} height={1}>x</DCArtboard>`;
+    expect(diffArtboardIds(prev, next)).toBeNull();
+  });
+});

package/plugins/design/dev-server/test/artboard-activity-overlay.test.tsx

@@ -0,0 +1,56 @@
+// artboard-activity-overlay — Phase 13. Presentational overlay contract.
+//
+// The positioned overlay only renders inside a laid-out DesignCanvas (rect
+// resolves after layout effects, which renderToStaticMarkup doesn't run), so we
+// assert the leaf component directly: the rim box, the badge text, and the
+// active→fading toggle. The gating decision (present + artboard scope) is
+// covered in use-canvas-activity.test.tsx.
+
+import { describe, expect, test } from 'bun:test';
+
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { ArtboardActivityOverlay } from '../artboard-activity-overlay.tsx';
+
+const RECT = { x: 10, y: 20, w: 300, h: 200 };
+
+describe('artboard-activity-overlay', () => {
+  test('renders the rim + badge with the editing label', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardActivityOverlay rect={RECT} label="Smoke TSX.tsx" active />
+    );
+    expect(html).toContain('dc-activity-rim');
+    expect(html).toContain('dc-activity-badge');
+    expect(html).toContain('dc-activity-scan'); // Phase 13.3 full-artboard scan beam
+    expect(html).toContain('editing —');
+    expect(html).toContain('Smoke TSX.tsx');
+    expect(html).toContain('aria-hidden');
+  });
+
+  test('agent color overrides the activity CSS var', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardActivityOverlay rect={RECT} label="Nimble Ferret" active color="#ff9800" />
+    );
+    expect(html).toMatch(/--mdcc-activity:\s*#ff9800/);
+  });
+
+  test('active overlay is NOT marked fading', () => {
+    const html = renderToStaticMarkup(<ArtboardActivityOverlay rect={RECT} label="x" active />);
+    expect(html).not.toContain('data-fading');
+  });
+
+  test('idle overlay carries data-fading for the cross-fade out', () => {
+    const html = renderToStaticMarkup(
+      <ArtboardActivityOverlay rect={RECT} label="x" active={false} />
+    );
+    expect(html).toContain('data-fading="true"');
+  });
+
+  test('positions at the artboard world rect', () => {
+    const html = renderToStaticMarkup(<ArtboardActivityOverlay rect={RECT} label="x" active />);
+    expect(html).toMatch(/left:\s*10px/);
+    expect(html).toMatch(/top:\s*20px/);
+    expect(html).toMatch(/width:\s*300px/);
+    expect(html).toMatch(/height:\s*200px/);
+  });
+});

package/plugins/design/dev-server/test/canvas-hmr-runtime.test.tsx

@@ -0,0 +1,114 @@
+// canvas-hmr-runtime — Phase 13.1 / DDR-077. The resettable error boundary that
+// keeps the last good render (no white flash) when an agent edit produces a
+// broken intermediate, and recovers when a good build lands.
+//
+// Error boundaries don't run under renderToStaticMarkup (SSR rethrows), so this
+// needs a live DOM. We register happy-dom for THIS file only (like
+// annotations-roundtrip.test.ts) and drive a real createRoot.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+  (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { act, createElement } from 'react';
+import { type Root, createRoot } from 'react-dom/client';
+
+import { CanvasErrorBoundary } from '../canvas-comment-mount.tsx';
+
+function Good({ tag }: { tag: string }) {
+  return createElement('div', { 'data-good': tag }, `good:${tag}`);
+}
+function Boom(): never {
+  throw new Error('render exploded (missing import)');
+}
+
+function mount(el: HTMLElement) {
+  let root!: Root;
+  act(() => {
+    root = createRoot(el);
+  });
+  return root;
+}
+
+describe('CanvasErrorBoundary', () => {
+  test('renders children when they do not throw', () => {
+    const host = document.createElement('div');
+    const root = mount(host);
+    act(() => {
+      root.render(
+        createElement(
+          CanvasErrorBoundary,
+          {
+            attempt: 0,
+            onError: () => {},
+            fallback: () => createElement(Good, { tag: 'fallback' }),
+          },
+          createElement(Good, { tag: 'live' })
+        )
+      );
+    });
+    expect(host.querySelector('[data-good="live"]')).not.toBeNull();
+    expect(host.querySelector('[data-good="fallback"]')).toBeNull();
+    act(() => root.unmount());
+  });
+
+  test('a throwing child → renders fallback (NOT blank) and fires onError once', () => {
+    const host = document.createElement('div');
+    const root = mount(host);
+    let errors = 0;
+    act(() => {
+      root.render(
+        createElement(
+          CanvasErrorBoundary,
+          {
+            attempt: 0,
+            onError: () => {
+              errors++;
+            },
+            fallback: () => createElement(Good, { tag: 'lastgood' }),
+          },
+          createElement(Boom)
+        )
+      );
+    });
+    // The boundary held a render (the fallback) — the host is NOT empty.
+    expect(host.querySelector('[data-good="lastgood"]')).not.toBeNull();
+    expect(host.textContent).toContain('good:lastgood');
+    expect(errors).toBe(1);
+    act(() => root.unmount());
+  });
+
+  test('a new attempt with a good child recovers (swaps fallback → live)', () => {
+    const host = document.createElement('div');
+    const root = mount(host);
+    const render = (attempt: number, child: ReturnType<typeof createElement>) =>
+      act(() => {
+        root.render(
+          createElement(
+            CanvasErrorBoundary,
+            {
+              attempt,
+              onError: () => {},
+              fallback: () => createElement(Good, { tag: 'lastgood' }),
+            },
+            child
+          )
+        );
+      });
+
+    render(0, createElement(Boom)); // broken build → fallback
+    expect(host.querySelector('[data-good="lastgood"]')).not.toBeNull();
+
+    render(1, createElement(Good, { tag: 'fixed' })); // good build lands
+    expect(host.querySelector('[data-good="fixed"]')).not.toBeNull();
+    expect(host.querySelector('[data-good="lastgood"]')).toBeNull();
+    act(() => root.unmount());
+  });
+});