@1agh/maude 0.26.0 → 0.28.0

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());
+  });
+});

package/plugins/design/dev-server/test/sync-agent.test.ts

@@ -202,6 +202,34 @@ describe('CanvasSyncAgent — cold start reconciliation', () => {
     expect(htmlFromDoc(docB)).toBe('<button>hub-v2</button>');
   });
 
+  test('empty hub doc does NOT clobber a non-empty local body — seeds local up instead (data-loss guard)', async () => {
+    // Local holds the real canvas body; the hub is fresh — no state for this
+    // slug yet (docB starts empty → docHtml === ''). The old behaviour wrote
+    // the empty doc over disk and emptied the file; the guard must keep local.
+    writeFileSync(paths().html, '<button>real-canvas</button>');
+
+    let conflicts = 0;
+    agent = createCanvasSyncAgent({
+      slug: 'screen',
+      doc: docB,
+      paths: paths(),
+      echoGuard: createEchoGuard(),
+      flushMs: 0,
+      onConflict: () => {
+        conflicts++;
+      },
+    });
+    agent.start();
+    await agent.reconcile();
+
+    // The local body MUST survive — an empty hub must never empty a real canvas.
+    expect(readFileSync(paths().html, 'utf8')).toBe('<button>real-canvas</button>');
+    // …and it is seeded UP to the hub instead of being discarded (local→doc).
+    expect(htmlFromDoc(docA)).toBe('<button>real-canvas</button>');
+    // An empty-hub seed is not a "hub overwrote your local" conflict.
+    expect(conflicts).toBe(0);
+  });
+
   test('identical disk + doc states: no disk write', async () => {
     writeFileSync(paths().html, '<button>same</button>');
     applyHtmlToDoc(docA, '<button>same</button>');

package/plugins/design/dev-server/test/sync-runtime.test.ts

@@ -783,11 +783,11 @@ describe('scanCanvases', () => {
   });
 });
 
-// DDR-072 — project-level TSX opt-in (linkedHub.syncTsx). A .tsx with no
-// explicit sidecar verdict defaults to syncable when the project flag is on;
-// the per-canvas sidecar still wins; the sandbox coupling is preserved.
-describe('scanCanvases — project-level syncTsx (DDR-072)', () => {
-  test('syncTsx:true + sandbox ON admits a .tsx WITHOUT a per-canvas opt-in', async () => {
+// DDR-079 (was DDR-072) — TSX sync defaults ON. A .tsx with no explicit sidecar
+// verdict syncs by default; `syncTsx: false` opts the project out; the per-canvas
+// sidecar still wins; the Lock-2 sandbox coupling is preserved.
+describe('scanCanvases — project-level syncTsx default-on (DDR-079)', () => {
+  test('explicit syncTsx:true + sandbox ON admits a .tsx WITHOUT a per-canvas opt-in', async () => {
     const ctx = makeCtx(
       { url: 'https://h.example.com', linkedAt: 1, syncTsx: true },
       'http://localhost:9'
@@ -826,13 +826,41 @@ describe('scanCanvases — project-level syncTsx (DDR-072)', () => {
     expect(slugs).not.toContain('ui-secret'); // explicit opt-out wins
   });
 
-  test('without the flag (syncTsx absent) a .tsx still needs the per-canvas opt-in', async () => {
+  test('DDR-079: without the flag (syncTsx absent) a .tsx is admitted BY DEFAULT', async () => {
     const ctx = makeCtx({ url: 'https://h.example.com', linkedAt: 1 }, 'http://localhost:9');
     writeFileSync(join(ctx.paths.designRoot, 'ui', 'plain.tsx'), 'export default () => null;');
     const scan = await scanCanvases(ctx);
+    expect(scan.canvases.map((c) => c.slug)).toContain('ui-plain'); // default ON
+    expect(scan.tsxCount).toBe(0);
+  });
+
+  test('DDR-079: syncTsx:false opts the whole project OUT (.tsx not admitted)', async () => {
+    const ctx = makeCtx(
+      { url: 'https://h.example.com', linkedAt: 1, syncTsx: false },
+      'http://localhost:9'
+    );
+    writeFileSync(join(ctx.paths.designRoot, 'ui', 'plain.tsx'), 'export default () => null;');
+    const scan = await scanCanvases(ctx);
     expect(scan.canvases.map((c) => c.slug)).not.toContain('ui-plain');
     expect(scan.tsxCount).toBe(1);
   });
+
+  test('DDR-079: per-canvas "syncable": true still admits one .tsx even when project opted out', async () => {
+    const ctx = makeCtx(
+      { url: 'https://h.example.com', linkedAt: 1, syncTsx: false },
+      'http://localhost:9'
+    );
+    writeFileSync(join(ctx.paths.designRoot, 'ui', 'keep.tsx'), 'export default () => null;');
+    writeFileSync(
+      join(ctx.paths.designRoot, 'ui', 'keep.meta.json'),
+      JSON.stringify({ syncable: true, title: 'Keep' })
+    );
+    writeFileSync(join(ctx.paths.designRoot, 'ui', 'drop.tsx'), 'export default () => null;');
+    const scan = await scanCanvases(ctx);
+    const slugs = scan.canvases.map((c) => c.slug);
+    expect(slugs).toContain('ui-keep'); // sidecar opt-in wins over project opt-out
+    expect(slugs).not.toContain('ui-drop'); // project opted out
+  });
 });
 
 describe('buildNoSyncablePayload', () => {

package/plugins/design/dev-server/test/use-agent-presence.test.tsx

@@ -0,0 +1,114 @@
+// use-agent-presence — Phase 13.2. Funny-name/color derivation + provider gating.
+// Live wiring (postMessage / WS subscription) is skipped via the `initialAgent`
+// seed, so this stays SSR-renderable (renderToStaticMarkup capture pattern).
+
+import { describe, expect, test } from 'bun:test';
+
+import type { ReactNode } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import {
+  type AgentPresence,
+  AgentPresenceProvider,
+  agentFunnyName,
+  deriveAgent,
+  useAgentPresence,
+} from '../use-agent-presence.tsx';
+
+describe('use-agent-presence / agentFunnyName', () => {
+  test('deterministic — same seed → same name', () => {
+    expect(agentFunnyName('Claude:1700000000000')).toBe(agentFunnyName('Claude:1700000000000'));
+  });
+
+  test('shape is "Adjective Animal"', () => {
+    expect(agentFunnyName('seed-x')).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+$/);
+  });
+
+  test('different seeds usually differ (no constant collapse)', () => {
+    const names = new Set(
+      Array.from({ length: 24 }, (_, i) => agentFunnyName(`Claude:${1700000000000 + i * 7919}`))
+    );
+    // Not all 24 identical — the generator actually spreads.
+    expect(names.size).toBeGreaterThan(5);
+  });
+
+  test('empty seed is handled (no throw, stable)', () => {
+    expect(agentFunnyName('')).toBe(agentFunnyName(''));
+  });
+});
+
+describe('use-agent-presence / deriveAgent', () => {
+  const entry = {
+    file: 'ui/Foo.tsx',
+    author: 'Claude (acting for Ada)',
+    startedAt: 1700000000000,
+    lastHeartbeat: 1700000000000,
+  };
+
+  test('id = author:startedAt; name = funny; color present; author preserved', () => {
+    const a = deriveAgent(entry);
+    expect(a.id).toBe('Claude (acting for Ada):1700000000000');
+    expect(a.name).toBe(agentFunnyName(a.id));
+    expect(a.author).toBe('Claude (acting for Ada)');
+    expect(a.startedAt).toBe(1700000000000);
+    expect(typeof a.color).toBe('string');
+    expect(a.color.length).toBeGreaterThan(0);
+  });
+
+  test('same entry → identical derived agent (stable across heartbeats)', () => {
+    expect(deriveAgent(entry)).toEqual(deriveAgent({ ...entry, lastHeartbeat: 9999999999999 }));
+  });
+});
+
+describe('use-agent-presence / provider gating', () => {
+  function Wrap({
+    initialAgent,
+    children,
+  }: { initialAgent: AgentPresence | null; children: ReactNode }) {
+    return <AgentPresenceProvider initialAgent={initialAgent}>{children}</AgentPresenceProvider>;
+  }
+
+  test('seeded agent flows through the hook', () => {
+    const seeded = deriveAgent({
+      file: 'ui/Foo.tsx',
+      author: 'Claude',
+      startedAt: 42,
+      lastHeartbeat: 42,
+    });
+    let got: AgentPresence | null = null;
+    function Probe() {
+      got = useAgentPresence();
+      return null;
+    }
+    renderToStaticMarkup(
+      <Wrap initialAgent={seeded}>
+        <Probe />
+      </Wrap>
+    );
+    expect(got).toEqual(seeded);
+  });
+
+  test('null seed → no agent', () => {
+    let got: AgentPresence | null = { id: 'x' } as AgentPresence;
+    function Probe() {
+      got = useAgentPresence();
+      return null;
+    }
+    renderToStaticMarkup(
+      <Wrap initialAgent={null}>
+        <Probe />
+      </Wrap>
+    );
+    expect(got).toBeNull();
+  });
+
+  test('outside the provider the hook is inert (null)', () => {
+    let got: AgentPresence | null = { id: 'x' } as AgentPresence;
+    function Probe() {
+      got = useAgentPresence();
+      return null;
+    }
+    renderToStaticMarkup(<Probe />);
+    expect(got).toBeNull();
+  });
+});

package/plugins/design/dev-server/test/use-canvas-activity.test.tsx

@@ -0,0 +1,206 @@
+// use-canvas-activity — Phase 13. Pure reducer/key helpers + provider gating.
+//
+// bun:test runs without a live DOM renderer, so dynamic event-driven state
+// (the `maude:activity` listener + fade timers) lives in the provider's
+// useEffect and can't be driven here. We unit-test the pure core
+// (applyActivityChange / activityKey / matchesArtboard) directly, and verify
+// the provider → hook derivation via the SSR-capture pattern with `initialState`
+// (which is also the WS-snapshot seed path).
+
+import { describe, expect, test } from 'bun:test';
+
+import type { ReactNode } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import {
+  type ActivityMessage,
+  type CanvasActivity,
+  CanvasActivityProvider,
+  activityKey,
+  applyActivityChange,
+  matchesArtboard,
+  useCanvasActivity,
+} from '../use-canvas-activity.tsx';
+
+describe('use-canvas-activity / activityKey', () => {
+  test('canonical design-root-relative path is unchanged', () => {
+    expect(activityKey('ui/Foo.tsx')).toBe('ui/Foo.tsx');
+  });
+
+  test('strips a known designRel prefix', () => {
+    expect(activityKey('.design/ui/Foo.tsx', '.design')).toBe('ui/Foo.tsx');
+    expect(activityKey('.design/ui/Foo.tsx', './.design')).toBe('ui/Foo.tsx');
+  });
+
+  test('normalizes back-slash + leading slash', () => {
+    expect(activityKey('\\ui\\Foo.tsx')).toBe('ui/Foo.tsx');
+    expect(activityKey('/ui/Foo.tsx')).toBe('ui/Foo.tsx');
+  });
+
+  test('leaves the path alone when designRel does not match', () => {
+    expect(activityKey('ui/Foo.tsx', '.design')).toBe('ui/Foo.tsx');
+  });
+});
+
+describe('use-canvas-activity / applyActivityChange', () => {
+  const base: ActivityMessage = { file: 'ui/Foo.tsx', status: 'active', ts: 't1' };
+
+  test('adds an active entry', () => {
+    const next = applyActivityChange({}, base);
+    expect(next['ui/Foo.tsx']).toEqual({ status: 'active', artboardIds: null, ts: 't1' });
+  });
+
+  test('idle overwrites the same key', () => {
+    const a = applyActivityChange({}, base);
+    const b = applyActivityChange(a, { file: 'ui/Foo.tsx', status: 'idle', ts: 't2' });
+    expect(b['ui/Foo.tsx']?.status).toBe('idle');
+  });
+
+  test('carries artboard_ids → artboardIds', () => {
+    const next = applyActivityChange({}, { ...base, artboard_ids: ['secondary'] });
+    expect(next['ui/Foo.tsx']?.artboardIds).toEqual(['secondary']);
+  });
+
+  test('different files coexist; immutable update', () => {
+    const a = applyActivityChange({}, base);
+    const b = applyActivityChange(a, { file: 'ui/Bar.tsx', status: 'active', ts: 't3' });
+    expect(Object.keys(b).sort()).toEqual(['ui/Bar.tsx', 'ui/Foo.tsx']);
+    expect(b).not.toBe(a);
+  });
+
+  test('ignores a malformed message (no file)', () => {
+    const a = applyActivityChange({}, base);
+    const b = applyActivityChange(a, { file: '', status: 'active', ts: 'x' });
+    expect(b).toBe(a);
+  });
+});
+
+describe('use-canvas-activity / matchesArtboard', () => {
+  test('null scope matches every artboard', () => {
+    expect(matchesArtboard(null, 'primary')).toBe(true);
+  });
+  test('scoped list matches only listed ids', () => {
+    expect(matchesArtboard(['secondary'], 'secondary')).toBe(true);
+    expect(matchesArtboard(['secondary'], 'primary')).toBe(false);
+  });
+});
+
+describe('use-canvas-activity / provider → hook derivation', () => {
+  function capture(node: (v: CanvasActivity) => void, props: Parameters<typeof Wrap>[0]) {
+    function Probe() {
+      node(useCanvasActivity());
+      return null;
+    }
+    renderToStaticMarkup(<Wrap {...props}>{<Probe />}</Wrap>);
+  }
+  function Wrap(props: {
+    file?: string;
+    designRel?: string;
+    initialState?: Record<
+      string,
+      { status: 'active' | 'idle'; artboardIds: string[] | null; ts: string }
+    >;
+    children: ReactNode;
+  }) {
+    return (
+      <CanvasActivityProvider
+        file={props.file}
+        designRel={props.designRel}
+        initialState={props.initialState}
+      >
+        {props.children}
+      </CanvasActivityProvider>
+    );
+  }
+
+  test('active entry for the current canvas → present + active', () => {
+    let v: CanvasActivity | null = null;
+    capture(
+      (x) => {
+        v = x;
+      },
+      {
+        file: 'ui/Test.tsx',
+        initialState: { 'ui/Test.tsx': { status: 'active', artboardIds: null, ts: 't' } },
+        children: null,
+      }
+    );
+    expect(v).toMatchObject({
+      present: true,
+      active: true,
+      artboardIds: null,
+      fileLabel: 'Test.tsx',
+    });
+  });
+
+  test('idle entry → present but not active (fading out)', () => {
+    let v: CanvasActivity | null = null;
+    capture(
+      (x) => {
+        v = x;
+      },
+      {
+        file: 'ui/Test.tsx',
+        initialState: { 'ui/Test.tsx': { status: 'idle', artboardIds: null, ts: 't' } },
+        children: null,
+      }
+    );
+    expect(v).toMatchObject({ present: true, active: false });
+  });
+
+  test('no entry for this canvas → inert', () => {
+    let v: CanvasActivity | null = null;
+    capture(
+      (x) => {
+        v = x;
+      },
+      {
+        file: 'ui/Test.tsx',
+        initialState: { 'ui/Other.tsx': { status: 'active', artboardIds: null, ts: 't' } },
+        children: null,
+      }
+    );
+    expect(v).toMatchObject({ present: false, active: false });
+  });
+
+  test('scoped artboardIds flow through', () => {
+    let v: CanvasActivity | null = null;
+    capture(
+      (x) => {
+        v = x;
+      },
+      {
+        file: 'ui/Test.tsx',
+        initialState: { 'ui/Test.tsx': { status: 'active', artboardIds: ['secondary'], ts: 't' } },
+        children: null,
+      }
+    );
+    expect(v?.artboardIds).toEqual(['secondary']);
+  });
+
+  test('designRel-prefixed current file is normalized to match server keys', () => {
+    let v: CanvasActivity | null = null;
+    capture(
+      (x) => {
+        v = x;
+      },
+      {
+        file: '.design/ui/Test.tsx',
+        designRel: '.design',
+        initialState: { 'ui/Test.tsx': { status: 'active', artboardIds: null, ts: 't' } },
+        children: null,
+      }
+    );
+    expect(v).toMatchObject({ present: true, active: true });
+  });
+
+  test('outside a provider the hook is inert (no overlay)', () => {
+    let v: CanvasActivity | null = null;
+    function Probe() {
+      v = useCanvasActivity();
+      return null;
+    }
+    renderToStaticMarkup(<Probe />);
+    expect(v).toMatchObject({ present: false, active: false });
+  });
+});