@1agh/maude 0.27.0 → 0.28.0

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

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

@@ -0,0 +1,244 @@
+/**
+ * @file       use-agent-presence.tsx — Phase 13.2 / DDR-078 agent presence.
+ * @scope      plugins/design/dev-server/use-agent-presence.tsx
+ * @purpose    Turn the Phase 8 `ai-activity` heartbeat into a *presence* peer:
+ *             when an agent (`/design:edit` / `/design:new`) is editing THIS
+ *             canvas, surface it like another connected human — an avatar in the
+ *             participants stack + the activity overlay (DDR-075) tinted with the
+ *             agent's own color + funny name. Pure client-side synthesis: the
+ *             agent is NOT injected into Yjs awareness (no protocol surgery), it
+ *             is a virtual participant derived from `ai-activity`.
+ *
+ * MVP scope (DDR-078): ONE agent per canvas (matches `ai-activity`'s file key).
+ * Multiple agents across the project each show in their own canvas tab; multiple
+ * agents on the SAME file at once would need `ai-activity` multi-author and is
+ * deliberately deferred. No roaming cursor (avatar + overlay only).
+ *
+ * Subscription mirrors `ai-banner.tsx`: parent `dgn:'ai-activity'` postMessage
+ * relay when embedded, own inspector WS when standalone, plus a GET /_api/ai
+ * seed so a tab opened mid-edit shows the agent immediately. Provided ONCE per
+ * canvas (canvas-lib bundle) so every DCArtboard + the chrome read one context —
+ * same cross-bundle rule as the activity context (DDR-077 lesson).
+ */
+
+import { type ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react';
+
+import { colorForName } from './use-collab.tsx';
+
+/** Wire shape of an `ai-activity` entry (matches collab/ai-activity.ts). */
+export interface AiEntry {
+  file: string;
+  author: string;
+  startedAt: number;
+  lastHeartbeat: number;
+}
+
+/** A virtual presence peer derived from an active agent. */
+export interface AgentPresence {
+  /** Stable per-session id (`author:startedAt`) — the funny-name + color seed. */
+  id: string;
+  /** Funny display name, e.g. "Bouncy Otter". */
+  name: string;
+  /** Deterministic peer color (shared palette with human peers). */
+  color: string;
+  /** The real author string the slash command reported ("Claude acting for X"). */
+  author: string;
+  startedAt: number;
+}
+
+// ---------------------------------------------------------------------------
+// Funny-name generator — deterministic from the session seed so an agent keeps
+// the same name + color across heartbeats. ~20×20 = 400 combinations.
+
+const ADJECTIVES = [
+  'Bouncy',
+  'Zippy',
+  'Sleepy',
+  'Sneaky',
+  'Witty',
+  'Plucky',
+  'Mellow',
+  'Snappy',
+  'Cosmic',
+  'Fuzzy',
+  'Jolly',
+  'Nimble',
+  'Breezy',
+  'Quirky',
+  'Dapper',
+  'Wobbly',
+  'Spry',
+  'Peppy',
+  'Groovy',
+  'Sly',
+];
+
+const ANIMALS = [
+  'Otter',
+  'Walrus',
+  'Lynx',
+  'Heron',
+  'Badger',
+  'Falcon',
+  'Mantis',
+  'Newt',
+  'Quokka',
+  'Tapir',
+  'Gecko',
+  'Marten',
+  'Pangolin',
+  'Axolotl',
+  'Ferret',
+  'Puffin',
+  'Capybara',
+  'Narwhal',
+  'Wombat',
+  'Mongoose',
+];
+
+function hash32(s: string): number {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+  return h >>> 0;
+}
+
+/** Deterministic "Adjective Animal" from a seed (e.g. `author:startedAt`). */
+export function agentFunnyName(seed: string): string {
+  const h = hash32(seed || 'agent');
+  const adj = ADJECTIVES[h % ADJECTIVES.length] as string;
+  const animal = ANIMALS[(h >>> 8) % ANIMALS.length] as string;
+  return `${adj} ${animal}`;
+}
+
+/**
+ * Strip control chars + length-cap the author. The /_api/ai/start endpoint
+ * caps it server-side, but the postMessage relay path never round-trips the
+ * server, so we re-bound it here at the trust boundary (DDR-078 security
+ * follow-up) — keeps a spoofed `author` from bloating the badge even if the
+ * origin guard below ever regresses.
+ */
+function sanitizeAuthor(a: unknown): string {
+  // Keep printable chars only (drop C0/C1 controls + DEL), cap length — no
+  // control-char regex needed.
+  let out = '';
+  for (const ch of String(a ?? '')) {
+    const code = ch.codePointAt(0) ?? 0;
+    if (code >= 0x20 && code !== 0x7f) out += ch;
+    if (out.length >= 120) break;
+  }
+  return out;
+}
+
+/** Build the virtual presence peer from an `ai-activity` entry. */
+export function deriveAgent(entry: AiEntry): AgentPresence {
+  const author = sanitizeAuthor(entry.author);
+  const id = `${author}:${entry.startedAt}`;
+  const name = agentFunnyName(id);
+  return { id, name, color: colorForName(name), author, startedAt: entry.startedAt };
+}
+
+// ---------------------------------------------------------------------------
+
+function readMetaFile(explicit?: string): string {
+  if (explicit) return explicit;
+  if (typeof window !== 'undefined') {
+    const w = window as unknown as { __canvas_meta_file__?: string };
+    if (typeof w.__canvas_meta_file__ === 'string') return w.__canvas_meta_file__;
+  }
+  return '';
+}
+
+const AgentPresenceContext = createContext<AgentPresence | null>(null);
+
+export interface AgentPresenceProviderProps {
+  /** Canvas file key (designRel-prefixed, matching the `ai-activity` key). */
+  file?: string;
+  /** Test/seed override — when provided, the live subscription is skipped. */
+  initialAgent?: AgentPresence | null;
+  children: ReactNode;
+}
+
+export function AgentPresenceProvider({
+  file,
+  initialAgent,
+  children,
+}: AgentPresenceProviderProps) {
+  const myFile = readMetaFile(file);
+  const [entry, setEntry] = useState<AiEntry | null>(null);
+
+  useEffect(() => {
+    if (initialAgent !== undefined) return; // seeded (tests) — no live wiring
+    if (!myFile || typeof window === 'undefined') return;
+    let cancelled = false;
+
+    // Seed: a tab opened mid-edit should show the agent without waiting for the
+    // next heartbeat.
+    fetch('/_api/ai', { headers: { 'Cache-Control': 'no-store' } })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((j: { entries?: AiEntry[] } | null) => {
+        if (cancelled || !j?.entries) return;
+        const mine = j.entries.find((e) => e && e.file === myFile);
+        if (mine) setEntry(mine);
+      })
+      .catch(() => {
+        /* network blip — live messages will fill in */
+      });
+
+    // Embedded: parent relays ai-activity via postMessage (ai-banner pattern).
+    const onMessage = (e: MessageEvent) => {
+      // DDR-078 security follow-up: only the trusted embedding parent relays
+      // ai-activity. Reject same-window self-posts (a hostile canvas faking a
+      // "Claude is editing" identity) and any non-parent source. Standalone
+      // (no parent) receives ai-activity via its own WS, never via postMessage.
+      if (e.source !== window.parent || window.parent === window) return;
+      const m = e.data as { dgn?: string; file?: string; entry?: AiEntry | null } | null;
+      if (!m || typeof m !== 'object' || m.dgn !== 'ai-activity') return;
+      if (m.file !== myFile) return;
+      setEntry(m.entry ?? null);
+    };
+    window.addEventListener('message', onMessage);
+
+    // Standalone (no embedding parent): dial the inspector WS ourselves.
+    let ws: WebSocket | null = null;
+    let reconnect: ReturnType<typeof setTimeout> | null = null;
+    function connectStandalone() {
+      const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const sock = new WebSocket(`${proto}//${location.host}/_ws`);
+      ws = sock;
+      sock.addEventListener('message', (ev) => {
+        try {
+          if (typeof ev.data !== 'string') return;
+          const m = JSON.parse(ev.data) as { type?: string; file?: string; entry?: AiEntry | null };
+          if (m.type !== 'ai-activity' || m.file !== myFile) return;
+          setEntry(m.entry ?? null);
+        } catch {
+          /* binary collab frame — ignore */
+        }
+      });
+      sock.addEventListener('close', () => {
+        ws = null;
+        reconnect = setTimeout(connectStandalone, 2000);
+      });
+    }
+    if (window.parent === window) connectStandalone();
+
+    return () => {
+      cancelled = true;
+      window.removeEventListener('message', onMessage);
+      if (reconnect) clearTimeout(reconnect);
+      ws?.close();
+    };
+  }, [myFile, initialAgent]);
+
+  const agent = useMemo<AgentPresence | null>(() => {
+    if (initialAgent !== undefined) return initialAgent;
+    return entry ? deriveAgent(entry) : null;
+  }, [entry, initialAgent]);
+
+  return <AgentPresenceContext.Provider value={agent}>{children}</AgentPresenceContext.Provider>;
+}
+
+/** The agent currently editing this canvas, or null. Inert outside the provider. */
+export function useAgentPresence(): AgentPresence | null {
+  return useContext(AgentPresenceContext);
+}