@1agh/maude 0.27.0 → 0.28.1

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,
+  activityKey,
+  applyActivityChange,
+  type CanvasActivity,
+  CanvasActivityProvider,
+  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/test/use-selection-set.test.tsx

@@ -3,9 +3,9 @@
 import { describe, expect, test } from 'bun:test';
 
 import {
-  type Selection,
   denormalizeSelectedWrite,
   normalizeSelectedRead,
+  type Selection,
 } from '../use-selection-set.tsx';
 
 const mkSel = (over: Partial<Selection> = {}): Selection => ({

package/plugins/design/dev-server/test/use-snap-guides.test.ts

@@ -2,7 +2,7 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import { type Rect, type SnapOptions, computeSnap } from '../use-snap-guides.tsx';
+import { computeSnap, type Rect, type SnapOptions } from '../use-snap-guides.tsx';
 
 const DEFAULTS: SnapOptions = { gridSize: 40, tolerance: 8, disabled: false };
 

package/plugins/design/dev-server/test/use-undo-stack.test.tsx

@@ -8,10 +8,10 @@ import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
 import { renderToStaticMarkup } from 'react-dom/server';
 
 import {
-  type CommandRecord,
-  type CommandSinks,
   _clearBuilderRegistry,
   _clearStackStore,
+  type CommandRecord,
+  type CommandSinks,
   registerCommand,
 } from '../undo-stack.ts';
 import {

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 { createContext, type ReactNode, 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);
+}

package/plugins/design/dev-server/use-annotation-resize.tsx

@@ -297,11 +297,7 @@ function handlePositions(s: Stroke): Array<{ corner: Corner; x: number; y: numbe
   ];
 }
 
-export function AnnotationResizeOverlay({
-  store,
-}: {
-  store: StrokesStoreValue | null;
-}): ReactNode {
+export function AnnotationResizeOverlay({ store }: { store: StrokesStoreValue | null }): ReactNode {
   ensureResizeStyles();
   const annotSel = useAnnotationSelection();
   const controller = useViewportControllerContext();

package/plugins/design/dev-server/use-annotation-selection.tsx

@@ -10,7 +10,7 @@
  * selection resets (the strokes themselves persist via `.annotations.svg`).
  */
 
-import { type ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from 'react';
 
 export interface AnnotationSelectionValue {
   selectedIds: string[];
@@ -34,11 +34,7 @@ function dedupe(ids: string[]): string[] {
   return out;
 }
 
-export function AnnotationSelectionProvider({
-  children,
-}: {
-  children: ReactNode;
-}) {
+export function AnnotationSelectionProvider({ children }: { children: ReactNode }) {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
   const replace = useCallback((id: string | string[]) => {

package/plugins/design/dev-server/use-annotations-visibility.tsx

@@ -8,7 +8,7 @@
  *             siblings under CanvasRouter all consume the same value.
  */
 
-import { type ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from 'react';
 
 export interface AnnotationsVisibilityValue {
   visible: boolean;

package/plugins/design/dev-server/use-artboard-drag.tsx

@@ -38,7 +38,7 @@ import {
 
 import { DRAG_THRESHOLD_PX as INPUT_DRAG_THRESHOLD_PX } from './input-router.tsx';
 import type { Selection } from './use-selection-set.tsx';
-import { type Rect, type SnapResult, computeSnap } from './use-snap-guides.tsx';
+import { computeSnap, type Rect, type SnapResult } from './use-snap-guides.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Constants