@1agh/maude 0.20.0 → 0.22.0

package/plugins/design/dev-server/test/collab-stress.test.ts

@@ -0,0 +1,121 @@
+// Phase 8 Task 8 — multi-tab stress harness.
+//
+// Two in-memory peers attached to one Room, broadcasting cursor-shaped
+// Awareness updates at ~30 Hz for `STRESS_MS` (default 10 s in CI; the plan
+// spec calls for 2 min but a tighter CI default keeps the run under 15 s).
+// Measures:
+//
+//   - RSS growth via process.memoryUsage().rss (before vs after)
+//   - Y.Doc state size growth via Y.encodeStateAsUpdate(doc).byteLength
+//   - Awareness state cleanup — when both peers disconnect, no entries leak
+//
+// Pass thresholds (CI-safe):
+//   - RSS delta < 20 MB (plan spec; conservative because GC is non-deterministic)
+//   - Y.Doc growth < 100 KB (the spec ceiling is 500 KB for a 2-min run; with
+//     awareness ephemeral + no doc.update traffic, growth should be ~0).
+
+import { afterEach, describe, expect, test } from 'bun:test';
+
+import { Awareness } from 'y-protocols/awareness';
+import * as Y from 'yjs';
+
+import { type RoomConn, createRoom } from '../collab/room.ts';
+
+const STRESS_MS = Number(process.env.MAUDE_STRESS_MS ?? 10_000);
+const RSS_GROWTH_LIMIT_MB = 20;
+const YDOC_GROWTH_LIMIT_BYTES = 100_000;
+
+function makeConn(id: string): RoomConn {
+  return {
+    id,
+    send() {
+      /* drain — we don't care about the network bytes; the memory pressure
+         is on the Awareness map + Y.Doc internals, not the WS buffer */
+    },
+  };
+}
+
+describe('multi-tab stress (Phase 8 Task 8)', () => {
+  let cleanupRoom: (() => Promise<void>) | null = null;
+
+  afterEach(async () => {
+    if (cleanupRoom) {
+      await cleanupRoom();
+      cleanupRoom = null;
+    }
+  });
+
+  test(
+    '30 Hz × STRESS_MS × 2 peers — bounded RSS + Y.Doc growth',
+    async () => {
+      const room = createRoom('stress-slug', {
+        async seed() {},
+        async persistJson() {},
+        async persistBinary() {},
+      });
+      cleanupRoom = () => room.destroy();
+
+      const A = makeConn('peer-a');
+      const B = makeConn('peer-b');
+      await room.connect(A);
+      await room.connect(B);
+
+      // Each peer has its own local Awareness instance to model what real
+      // clients do — they don't share a memory address space with the server's
+      // awareness. We pump updates by setting state on the server-side
+      // awareness directly (the server's room.awareness is what the real WS
+      // peers' setLocalState() would land in via applyAwarenessUpdate).
+      const awA = new Awareness(new Y.Doc());
+      const awB = new Awareness(new Y.Doc());
+      awA.setLocalState({ name: 'Alice', color: '#f00', cursor: { x: 0, y: 0 }, __connId: A.id });
+      awB.setLocalState({ name: 'Bob', color: '#0f0', cursor: { x: 0, y: 0 }, __connId: B.id });
+
+      const rssBefore = process.memoryUsage().rss;
+      const docSizeBefore = Y.encodeStateAsUpdate(room.doc).byteLength;
+
+      const start = Date.now();
+      const tickInterval = 33; // ~30 Hz
+      let aX = 0;
+      let bX = 0;
+      let updates = 0;
+      while (Date.now() - start < STRESS_MS) {
+        aX = (aX + 1) % 1000;
+        bX = (bX + 7) % 1000;
+        awA.setLocalState({
+          name: 'Alice',
+          color: '#f00',
+          cursor: { x: aX, y: aX },
+          __connId: A.id,
+        });
+        awB.setLocalState({
+          name: 'Bob',
+          color: '#0f0',
+          cursor: { x: bX, y: bX },
+          __connId: B.id,
+        });
+        updates += 2;
+        await Bun.sleep(tickInterval);
+      }
+
+      const rssAfter = process.memoryUsage().rss;
+      const docSizeAfter = Y.encodeStateAsUpdate(room.doc).byteLength;
+
+      const rssGrowthMb = (rssAfter - rssBefore) / (1024 * 1024);
+      const docGrowth = docSizeAfter - docSizeBefore;
+
+      console.log(
+        `[stress] ${updates} awareness updates over ${STRESS_MS} ms → ` +
+          `RSS Δ=${rssGrowthMb.toFixed(1)} MB, Y.Doc Δ=${docGrowth} bytes`
+      );
+
+      expect(rssGrowthMb).toBeLessThan(RSS_GROWTH_LIMIT_MB);
+      expect(docGrowth).toBeLessThan(YDOC_GROWTH_LIMIT_BYTES);
+
+      // Disconnect both peers; size should go to 0.
+      room.disconnect(A);
+      room.disconnect(B);
+      expect(room.size()).toBe(0);
+    },
+    STRESS_MS + 5_000
+  );
+});

package/plugins/design/dev-server/test/git-lifecycle.test.ts

@@ -0,0 +1,101 @@
+// Unit: Task 7 — `.git/HEAD` watcher. We don't exercise fs.watch directly
+// (flaky across platforms in CI); instead we drive the module's public
+// surface: it gracefully no-ops when no .git/ exists, and the public stop()
+// is idempotent.
+//
+// The flush-before-broadcast invariant is verified separately by the
+// collab-bridge tests and the persistence module's contract — registry
+// already exposes flushAll(). The integration with .git/HEAD writes is
+// exercised manually in the Task 7 acceptance test (Phase 8 plan validate row).
+
+import { existsSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+
+import { createGitLifecycle } from '../collab/git-lifecycle.ts';
+import { createRegistry } from '../collab/registry.ts';
+import type { RoomCallbacks } from '../collab/room.ts';
+import { type Context, createBus } from '../context.ts';
+
+function ctxFor(repoRoot: string): Context {
+  return {
+    cfg: {} as Context['cfg'],
+    projectLabel: 'test',
+    paths: {
+      repoRoot,
+      designRel: '.design',
+      designRoot: path.join(repoRoot, '.design'),
+      serverInfoFile: '',
+      activeFile: '',
+      commentsDir: '',
+      canvasStateDir: '',
+      historyDir: '',
+      tokensUrlRel: '',
+      systemDirRel: '',
+    },
+    bus: createBus(),
+  };
+}
+
+function noopCallbacks(): RoomCallbacks {
+  return { async seed() {}, async persistJson() {}, async persistBinary() {} };
+}
+
+describe('git-lifecycle', () => {
+  let tmp: string;
+
+  beforeEach(() => {
+    tmp = mkdtempSync(path.join(tmpdir(), 'maude-git-lifecycle-'));
+  });
+
+  afterEach(() => {
+    try {
+      rmSync(tmp, { recursive: true, force: true });
+    } catch {
+      /* ignore */
+    }
+  });
+
+  test('no .git/ directory → silent no-op (still returns a stop function)', () => {
+    const ctx = ctxFor(tmp);
+    const registry = createRegistry(noopCallbacks());
+    expect(existsSync(path.join(tmp, '.git'))).toBe(false);
+    const gl = createGitLifecycle(ctx, registry);
+    expect(typeof gl.stop).toBe('function');
+    gl.stop(); // idempotent
+    gl.stop();
+  });
+
+  test('with .git/HEAD present → watcher attaches without throwing', () => {
+    mkdirSync(path.join(tmp, '.git'), { recursive: true });
+    writeFileSync(path.join(tmp, '.git', 'HEAD'), 'ref: refs/heads/main\n');
+    const ctx = ctxFor(tmp);
+    const registry = createRegistry(noopCallbacks());
+    const gl = createGitLifecycle(ctx, registry);
+    expect(typeof gl.stop).toBe('function');
+    gl.stop();
+  });
+
+  test('emits git-lifecycle bus event on HEAD change (manual rewrite)', async () => {
+    mkdirSync(path.join(tmp, '.git'), { recursive: true });
+    writeFileSync(path.join(tmp, '.git', 'HEAD'), 'ref: refs/heads/main\n');
+    const ctx = ctxFor(tmp);
+    const registry = createRegistry(noopCallbacks());
+    const events: unknown[] = [];
+    ctx.bus.on('git-lifecycle', (e) => events.push(e));
+    const gl = createGitLifecycle(ctx, registry);
+
+    // Rewrite HEAD; the watcher fires + 250 ms debounce + flush. Wait > 500 ms
+    // to be safe with fs.watch + flushAll latency on macOS + Linux.
+    writeFileSync(path.join(tmp, '.git', 'HEAD'), 'ref: refs/heads/other\n');
+    await Bun.sleep(700);
+
+    expect(events.length).toBeGreaterThanOrEqual(1);
+    const evt = events[0] as { reason?: string; head?: string };
+    expect(evt.reason).toBe('head-changed');
+    expect(evt.head).toContain('refs/heads/other');
+    gl.stop();
+  });
+});

package/plugins/design/dev-server/test/participants-chrome.test.ts

@@ -0,0 +1,30 @@
+// Unit: pure helpers from participants-chrome.tsx.
+
+import { describe, expect, test } from 'bun:test';
+
+import { initialsFor } from '../participants-chrome.tsx';
+
+describe('initialsFor', () => {
+  test('two-word name → uppercase first letters', () => {
+    expect(initialsFor('Alice Smith')).toBe('AS');
+    expect(initialsFor('michał dovrtěl')).toBe('MD');
+  });
+
+  test('single-word name → first two letters uppercased', () => {
+    expect(initialsFor('alice')).toBe('AL');
+    expect(initialsFor('A')).toBe('A');
+  });
+
+  test('many-word name → first letter of first two words', () => {
+    expect(initialsFor('John Ronald Reuel Tolkien')).toBe('JR');
+  });
+
+  test('empty / whitespace → ?', () => {
+    expect(initialsFor('')).toBe('?');
+    expect(initialsFor('   ')).toBe('?');
+  });
+
+  test('handles extra whitespace', () => {
+    expect(initialsFor('  Alice   Smith  ')).toBe('AS');
+  });
+});

package/plugins/design/dev-server/test/use-collab.test.ts

@@ -0,0 +1,71 @@
+// Unit: pure helpers from use-collab.tsx (color hash + slug derivation).
+// The provider itself + the WS round-trip live in browser-shaped harnesses.
+
+import { describe, expect, test } from 'bun:test';
+
+import { canvasSlugFromPath, colorForName } from '../use-collab.tsx';
+
+describe('colorForName', () => {
+  test('returns a color from the curated palette', () => {
+    const color = colorForName('Alice');
+    expect(color).toMatch(/^#[0-9a-f]{6}$/i);
+  });
+
+  test('deterministic per input', () => {
+    const a = colorForName('Alice');
+    const b = colorForName('Alice');
+    expect(a).toBe(b);
+  });
+
+  test('different names land on different colors (probabilistically)', () => {
+    // Sample many distinct names; expect at least 8 distinct colors among 30
+    // names. With 12-color palette + uniform-ish djb2, this is comfortable.
+    const names = Array.from({ length: 30 }, (_, i) => `peer-${i}`);
+    const colors = new Set(names.map(colorForName));
+    expect(colors.size).toBeGreaterThanOrEqual(8);
+  });
+
+  test('empty string returns a palette color (not crash)', () => {
+    expect(colorForName('')).toMatch(/^#[0-9a-f]{6}$/i);
+  });
+
+  test('unicode names work', () => {
+    expect(colorForName('Michał Dovrtěl')).toMatch(/^#[0-9a-f]{6}$/i);
+    expect(colorForName('佐藤')).toMatch(/^#[0-9a-f]{6}$/i);
+  });
+});
+
+describe('canvasSlugFromPath', () => {
+  test('normalizes a typical canvas path', () => {
+    expect(canvasSlugFromPath('ui/Foo.tsx')).toBe('ui-foo');
+    expect(canvasSlugFromPath('ui/Canvas Viewport.tsx')).toBe('ui-canvas_viewport');
+    expect(canvasSlugFromPath('system/project/preview/colors-accent.tsx')).toBe(
+      'system-project-preview-colors-accent'
+    );
+  });
+
+  test('strips .tsx + .html extensions case-insensitively', () => {
+    expect(canvasSlugFromPath('ui/Foo.TSX')).toBe('ui-foo');
+    expect(canvasSlugFromPath('ui/Foo.html')).toBe('ui-foo');
+  });
+
+  test('returns null for paths that would yield invalid slug chars', () => {
+    // Dots in name (not extension) survive normalization and fail the gate.
+    expect(canvasSlugFromPath('ui/Foo.Bar.tsx')).toBeNull();
+    // Empty input.
+    expect(canvasSlugFromPath('')).toBeNull();
+    expect(canvasSlugFromPath(null)).toBeNull();
+    expect(canvasSlugFromPath(undefined)).toBeNull();
+  });
+
+  test('round-trips against the slug grammar parseCollabSlug accepts', () => {
+    // parseCollabSlug regex = ^[a-z0-9_-]+$
+    const re = /^[a-z0-9_-]+$/;
+    const samples = ['ui/Foo.tsx', 'system/project/preview/x.tsx', 'a/b c.tsx'];
+    for (const s of samples) {
+      const slug = canvasSlugFromPath(s);
+      expect(slug).not.toBeNull();
+      if (slug !== null) expect(re.test(slug)).toBe(true);
+    }
+  });
+});

package/plugins/design/dev-server/tool-palette.tsx

@@ -76,19 +76,19 @@ const PALETTE_CSS = `
   transition: background-color 80ms linear, color 80ms linear;
 }
 .dc-tool-palette button:hover {
-  background: color-mix(in oklab, var(--accent, #d63b1f) 8%, transparent);
+  background: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 8%, transparent);
   color: var(--fg-0, #1a1a1a);
 }
 .dc-tool-palette button:focus-visible {
-  outline: 2px solid var(--accent, #d63b1f);
+  outline: 2px solid var(--maude-hud-accent, #d63b1f);
   outline-offset: -2px;
 }
 /* DDR-046 — Active tool: tinted background + accent underbar + accent text.
    The underbar is rendered via ::after so the visual stays inside the 6 px
    radius without leaking past the button edge. */
 .dc-tool-palette button[aria-pressed="true"] {
-  background: color-mix(in oklab, var(--accent, #d63b1f) 14%, transparent);
-  color: var(--accent, #d63b1f);
+  background: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 14%, transparent);
+  color: var(--maude-hud-accent, #d63b1f);
 }
 .dc-tool-palette button[aria-pressed="true"]::after {
   content: "";
@@ -97,7 +97,7 @@ const PALETTE_CSS = `
   right: 6px;
   bottom: 2px;
   height: 2px;
-  background: var(--accent, #d63b1f);
+  background: var(--maude-hud-accent, #d63b1f);
   border-radius: 1px;
 }
 /* T19 — sticky-tool lock badge. Tiny accent square in the top-right corner
@@ -107,7 +107,7 @@ const PALETTE_CSS = `
 .dc-tool-palette button[data-sticky="true"] {
   /* Keep the tinted active background; add a hairline ring so the lock state
      is readable even when the button is also aria-pressed. */
-  box-shadow: inset 0 0 0 1px var(--accent, #d63b1f);
+  box-shadow: inset 0 0 0 1px var(--maude-hud-accent, #d63b1f);
 }
 .dc-tool-palette button .dc-tp-sticky-badge {
   position: absolute;
@@ -115,7 +115,7 @@ const PALETTE_CSS = `
   right: 3px;
   width: 6px;
   height: 6px;
-  background: var(--accent, #d63b1f);
+  background: var(--maude-hud-accent, #d63b1f);
   border-radius: 1px;
   box-shadow: 0 0 0 1px var(--bg-0, #ffffff);
   opacity: 0;

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

@@ -34,7 +34,7 @@ const RESIZE_CSS = `
   position: fixed;
   width: 8px;
   height: 8px;
-  background: var(--accent, #d63b1f);
+  background: var(--maude-hud-accent, #d63b1f);
   border: 1px solid var(--bg-0, #ffffff);
   border-radius: 1px;
   box-shadow: 0 0 0 0.5px color-mix(in oklab, var(--fg-0, #1c1917) 30%, transparent);