@1agh/maude 0.29.0 → 0.31.0

package/apps/studio/test/canvas-edit.test.ts

@@ -5,7 +5,13 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import { applyEdit, CanvasEditError, editAttribute } from '../canvas-edit.ts';
+import {
+  applyEdit,
+  applyRemove,
+  applyTextEdit,
+  CanvasEditError,
+  editAttribute,
+} from '../canvas-edit.ts';
 import { transpileCanvasSource } from '../canvas-pipeline.ts';
 
 const CANVAS = '/abs/Canvas.tsx';
@@ -52,6 +58,42 @@ describe('canvas-edit / applyEdit', () => {
     expect(out.source).toBe(`function Demo() { return <button aria-label="new">x</button>; }`);
   });
 
+  test('JSX-attribute-escapes a " in a replaced literal value (no JSON \\" corruption)', () => {
+    // Regression: the replace branch used to emit JSON.stringify(value) → `\"`,
+    // which is invalid JS-escaping inside a JSX attribute and corrupts the source.
+    // It must land as the HTML entity &quot; instead. See DDR-105.
+    const src = `function Demo() { return <button aria-label="old">x</button>; }`;
+    const ids = idsOf(src);
+    const id = ids.button as string;
+    const out = applyEdit(CANVAS, src, id, 'aria-label', 'say "hi" <b>');
+    expect(out.source).toBe(
+      `function Demo() { return <button aria-label="say &quot;hi&quot; &lt;b&gt;">x</button>; }`
+    );
+    // Never the JS-escaped form that broke things.
+    expect(out.source).not.toContain('\\"');
+  });
+
+  test('JSX-attribute-escapes a " in a newly inserted attribute value', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'title', 'a "quoted" title');
+    expect(out.source).toBe(
+      `function Demo() { return <div title="a &quot;quoted&quot; title">x</div>; }`
+    );
+  });
+
+  test('replaces an expression-container attr value with a JSX-escaped literal', () => {
+    // <Tag name={expr} /> → <Tag name="value" />, entity-escaped (not JSON-escaped).
+    const src = `function Demo() { return <button aria-label={lbl}>x</button>; }`;
+    const ids = idsOf(src);
+    const id = ids.button as string;
+    const out = applyEdit(CANVAS, src, id, 'aria-label', 'with "quote"');
+    expect(out.source).toBe(
+      `function Demo() { return <button aria-label="with &quot;quote&quot;">x</button>; }`
+    );
+  });
+
   test('swaps a single style.<prop> value inside style={{...}}', () => {
     const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
     const ids = idsOf(src);
@@ -119,6 +161,62 @@ describe('canvas-edit / applyEdit', () => {
   });
 });
 
+describe('canvas-edit / applyRemove (reset)', () => {
+  test('removes one style key, leaving the siblings + object intact', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.margin');
+    expect(out.source).toBe('function Demo() { return <div style={{ padding: 8 }}>x</div>; }');
+  });
+
+  test('removes the leading style key (consumes the trailing comma)', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.padding');
+    expect(out.source).toBe('function Demo() { return <div style={{ margin: 4 }}>x</div>; }');
+  });
+
+  test('removing the only style key drops the whole style attribute', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.padding');
+    expect(out.source).toBe('function Demo() { return <div>x</div>; }');
+  });
+
+  test('accepts a kebab style prop name (border-radius → borderRadius)', () => {
+    const src = 'function Demo() { return <div style={{ borderRadius: 8, padding: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.border-radius');
+    expect(out.source).toBe('function Demo() { return <div style={{ padding: 4 }}>x</div>; }');
+  });
+
+  test('removes a plain attribute (custom data-*)', () => {
+    const src = 'function Demo() { return <button data-state="active">x</button>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.button as string, 'data-state');
+    expect(out.source).toBe('function Demo() { return <button>x</button>; }');
+  });
+
+  test('is a no-op (delta 0) when the key / attribute is absent', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8 }}>x</div>; }';
+    const ids = idsOf(src);
+    const a = applyRemove(CANVAS, src, ids.div as string, 'style.margin');
+    expect(a.source).toBe(src);
+    expect(a.delta).toBe(0);
+    const b = applyRemove(CANVAS, src, ids.div as string, 'data-nope');
+    expect(b.source).toBe(src);
+    expect(b.delta).toBe(0);
+  });
+
+  test('refuses to remove data-cd-id (pipeline-owned)', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    expect(() => applyRemove(CANVAS, src, ids.div as string, 'data-cd-id')).toThrow(
+      CanvasEditError
+    );
+  });
+});
+
 describe('canvas-edit / editAttribute (fs)', () => {
   test('writes the edit atomically + is a no-op when source unchanged', async () => {
     const tmp = `/tmp/canvas-edit-${Math.random().toString(36).slice(2)}.tsx`;
@@ -137,3 +235,85 @@ describe('canvas-edit / editAttribute (fs)', () => {
     expect(r2.delta).toBe(0);
   });
 });
+
+// Phase 12 (DDR-103) — inline text-content edit. Leaf-text only; JSX-escaped.
+describe('canvas-edit / applyTextEdit', () => {
+  test('overwrites a leaf text node', () => {
+    const src = `function Demo() { return <button>Save</button>; }`;
+    const id = idsOf(src).button as string;
+    const out = applyTextEdit(CANVAS, src, id, 'Uložit');
+    expect(out.source).toBe(`function Demo() { return <button>Uložit</button>; }`);
+  });
+
+  test('preserves surrounding whitespace / indentation', () => {
+    const src = [
+      'function Demo() {',
+      '  return (',
+      '    <button>',
+      '      Save',
+      '    </button>',
+      '  );',
+      '}',
+    ].join('\n');
+    const id = idsOf(src).button as string;
+    const out = applyTextEdit(CANVAS, src, id, 'Go');
+    expect(out.source).toContain('    <button>\n      Go\n    </button>');
+  });
+
+  test('JSX-escapes <, >, {, }, & so text can never become markup or an expression', () => {
+    const src = `function Demo() { return <code>x</code>; }`;
+    const id = idsOf(src).code as string;
+    const out = applyTextEdit(CANVAS, src, id, 'a < b && c > {d}');
+    expect(out.source).toContain('a &lt; b &amp;&amp; c &gt; &#123;d&#125;');
+    expect(out.source).not.toContain('{d}');
+  });
+
+  test('refuses an element with mixed (element) children', () => {
+    const src = `function Demo() { return <div>hi <b>there</b></div>; }`;
+    const id = idsOf(src).div as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('refuses an element whose only child is a JSX expression', () => {
+    const src = 'function Demo() { const t = "x"; return <h1>{t}</h1>; }';
+    const id = idsOf(src).h1 as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('refuses a self-closing / empty element (no text to edit)', () => {
+    const src = `function Demo() { return <div className="x" />; }`;
+    const id = idsOf(src).div as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('throws on a missing id', () => {
+    const src = `function Demo() { return <button>Save</button>; }`;
+    expect(() => applyTextEdit(CANVAS, src, 'deadbeef', 'x')).toThrow(CanvasEditError);
+  });
+});
+
+// Phase 12 (DDR-103) — the `style.<prop>` write path the CSS knobs ride
+// (api.editCss maps property → camelCase + always quotes the value).
+describe('canvas-edit / applyEdit style.<prop> (CSS-knob path)', () => {
+  test('inserts an inline style object when none exists', () => {
+    const src = `function Demo() { return <div>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.borderRadius', '"8px"');
+    expect(out.source).toContain('style={{ borderRadius: "8px" }}');
+  });
+
+  test('overwrites an existing style key, leaving siblings intact', () => {
+    const src = `function Demo() { return <div style={{ padding: 4, color: "red" }}>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.color', '"blue"');
+    expect(out.source).toContain('color: "blue"');
+    expect(out.source).toContain('padding: 4');
+  });
+
+  test('accepts a token-valued (var(--…)) string for on-system edits', () => {
+    const src = `function Demo() { return <div>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.padding', '"var(--space-3)"');
+    expect(out.source).toContain('style={{ padding: "var(--space-3)" }}');
+  });
+});

package/apps/studio/test/canvas-list-watch.test.ts

@@ -0,0 +1,322 @@
+// canvas-list-watch — external-canvas list watcher. Emits `canvas-list-update`
+// when a canvas file appears/disappears on disk from OUTSIDE the dev-server
+// (the ACP agent's `/design:new`, agent Write, git checkout), so the browser
+// file tree refreshes without a reload.
+// RCA: .ai/logs/rca/issue-acp-new-canvas-not-in-filetree.md
+
+import { describe, expect, test } from 'bun:test';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import {
+  CANVAS_LIST_DEBOUNCE_MS,
+  createCanvasListWatch,
+  isCanvasCandidate,
+} from '../canvas-list-watch.ts';
+import { type Context, createBus } from '../context.ts';
+import { createFsWatch } from '../fs-watch.ts';
+
+const GROUPS = [
+  { label: 'System', path: 'system' },
+  { label: 'UI', path: 'ui' },
+];
+
+function sandbox(): { root: string; designRoot: string } {
+  const root = mkdtempSync(join(tmpdir(), 'clw-test-'));
+  const designRoot = join(root, '.design');
+  mkdirSync(join(designRoot, 'ui'), { recursive: true });
+  return { root, designRoot };
+}
+
+function mkCtx(designRoot: string): Context {
+  return {
+    cfg: { canvasGroups: GROUPS } as Context['cfg'],
+    projectLabel: '',
+    paths: { designRoot, designRel: '.design' } as Context['paths'],
+    bus: createBus(),
+  };
+}
+
+const TSX = 'export default function C(){return null}';
+
+interface Update {
+  action?: string;
+  rel?: string;
+  slug?: string;
+}
+
+function collect(ctx: Context): Update[] {
+  const got: Update[] = [];
+  ctx.bus.on('canvas-list-update', (p) => got.push(p as Update));
+  return got;
+}
+
+describe('canvas-list-watch / isCanvasCandidate (pure gate)', () => {
+  const groups = ['system', 'ui'];
+  test('accepts openable canvases under a configured group', () => {
+    expect(isCanvasCandidate('ui/Pricing.tsx', groups)).toBe(true);
+    expect(isCanvasCandidate('ui/project/Pricing.tsx', groups)).toBe(true);
+    expect(isCanvasCandidate('ui/Smoke.html', groups)).toBe(true);
+    // DS preview specimens DO show in the tree, so they must trigger a refresh.
+    expect(isCanvasCandidate('system/project/preview/colors.tsx', groups)).toBe(true);
+  });
+
+  test('rejects non-canvas extensions (sidecars, tokens, docs)', () => {
+    expect(isCanvasCandidate('ui/Pricing.meta.json', groups)).toBe(false);
+    expect(isCanvasCandidate('ui/Pricing.css', groups)).toBe(false);
+    expect(isCanvasCandidate('system/project/README.md', groups)).toBe(false);
+  });
+
+  test('rejects runtime-state (`_`-prefixed segment) + SKIP_DIRS', () => {
+    expect(isCanvasCandidate('_history/ui-x/00-screen.tsx', groups)).toBe(false);
+    expect(isCanvasCandidate('ui/_draft.tsx', groups)).toBe(false);
+    expect(isCanvasCandidate('_active.json', groups)).toBe(false);
+    expect(isCanvasCandidate('node_modules/pkg/index.tsx', groups)).toBe(false);
+  });
+
+  test('rejects canvases outside any configured group', () => {
+    expect(isCanvasCandidate('docs/Thing.tsx', groups)).toBe(false);
+    expect(isCanvasCandidate('Thing.tsx', groups)).toBe(false);
+  });
+
+  test('non-string / empty input is rejected, not thrown', () => {
+    expect(isCanvasCandidate('', groups)).toBe(false);
+    expect(isCanvasCandidate(undefined as unknown as string, groups)).toBe(false);
+  });
+});
+
+describe('canvas-list-watch / diff + emit', () => {
+  test('seeding existing canvases emits nothing', async () => {
+    const { root, designRoot } = sandbox();
+    writeFileSync(join(designRoot, 'ui', 'Existing.tsx'), TSX);
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      expect(got).toHaveLength(0);
+      expect(w.known.has('.design/ui/Existing.tsx')).toBe(true);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+
+  test('a canvas written straight to disk emits action:added (the bug)', async () => {
+    const { root, designRoot } = sandbox();
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      // Simulate `/design:new` writing the canvas (and its sidecar) directly —
+      // NO API call, so api.ts never emits.
+      writeFileSync(join(designRoot, 'ui', 'Pricing.tsx'), TSX);
+      writeFileSync(join(designRoot, 'ui', 'Pricing.meta.json'), '{}');
+      await w.refresh();
+      expect(got).toHaveLength(1);
+      expect(got[0]?.action).toBe('added');
+      expect(got[0]?.slug).toBe('ui-pricing');
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+
+  test('deleting a canvas on disk emits action:removed', async () => {
+    const { root, designRoot } = sandbox();
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      const abs = join(designRoot, 'ui', 'Gone.tsx');
+      writeFileSync(abs, TSX);
+      await w.refresh();
+      got.length = 0; // drop the 'added'
+      rmSync(abs);
+      await w.refresh();
+      expect(got).toHaveLength(1);
+      expect(got[0]?.action).toBe('removed');
+      expect(got[0]?.slug).toBe('ui-gone');
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+
+  test('editing an existing canvas body emits nothing (no tree thrash)', async () => {
+    const { root, designRoot } = sandbox();
+    const abs = join(designRoot, 'ui', 'Edited.tsx');
+    writeFileSync(abs, TSX);
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      writeFileSync(abs, `${TSX}\n// edited`);
+      writeFileSync(join(designRoot, 'ui', 'Edited.meta.json'), '{"x":1}');
+      await w.refresh();
+      expect(got).toHaveLength(0);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+
+  test('runtime-state + sidecar writes never emit', async () => {
+    const { root, designRoot } = sandbox();
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      writeFileSync(join(designRoot, '_active.json'), '{}');
+      mkdirSync(join(designRoot, '_canvas-state'), { recursive: true });
+      writeFileSync(join(designRoot, '_canvas-state', 'ui-x.view.json'), '{}');
+      writeFileSync(join(designRoot, 'config.json'), '{}');
+      await w.refresh();
+      expect(got).toHaveLength(0);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+});
+
+describe('canvas-list-watch / live fs:any path', () => {
+  test('a candidate fs:any event schedules a debounced refresh that emits', async () => {
+    const { root, designRoot } = sandbox();
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 20 });
+    await w.ready;
+    try {
+      writeFileSync(join(designRoot, 'ui', 'Live.tsx'), TSX);
+      // The fs-watch would emit this; assert the subscriber wires through.
+      ctx.bus.emit('fs:any', 'ui/Live.tsx');
+      await new Promise((r) => setTimeout(r, 20 + 80));
+      await w.refresh(); // flush the chain
+      const added = got.find((m) => m.action === 'added' && m.slug === 'ui-live');
+      expect(added).toBeTruthy();
+      // Exactly one 'added' — the timer + the explicit flush must not double-emit.
+      expect(got.filter((m) => m.action === 'added' && m.slug === 'ui-live')).toHaveLength(1);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+
+  test('a non-candidate fs:any event does not schedule a refresh', async () => {
+    const { root, designRoot } = sandbox();
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 20 });
+    await w.ready;
+    try {
+      // Create a canvas but only announce a NON-candidate path. The gate must
+      // skip the recompute, so the new canvas stays unseen until a real event.
+      writeFileSync(join(designRoot, 'ui', 'Sneaky.tsx'), TSX);
+      ctx.bus.emit('fs:any', 'ui/Sneaky.meta.json');
+      ctx.bus.emit('fs:any', '_active.json');
+      await new Promise((r) => setTimeout(r, 20 + 80));
+      expect(got).toHaveLength(0);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+
+  test('stop() unsubscribes — later events are ignored', async () => {
+    const { root, designRoot } = sandbox();
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    w.stop();
+    try {
+      writeFileSync(join(designRoot, 'ui', 'After.tsx'), TSX);
+      ctx.bus.emit('fs:any', 'ui/After.tsx');
+      await new Promise((r) => setTimeout(r, CANVAS_LIST_DEBOUNCE_MS + 40));
+      expect(got).toHaveLength(0);
+    } finally {
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+});
+
+describe('canvas-list-watch / serialization + multi-remove', () => {
+  test('overlapping refresh() calls serialize — a create between them emits exactly once', async () => {
+    const { root, designRoot } = sandbox();
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      writeFileSync(join(designRoot, 'ui', 'Pair.tsx'), TSX);
+      // Fire two refreshes WITHOUT awaiting the first. The promise-chain must
+      // serialize them: the first diffs the create against the pre-create set
+      // and updates `known`; the second sees no change. Without the chain both
+      // would snapshot concurrently against the stale `known` and emit twice.
+      const a = w.refresh();
+      const b = w.refresh();
+      await Promise.all([a, b]);
+      expect(got.filter((m) => m.action === 'added' && m.slug === 'ui-pair')).toHaveLength(1);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+
+  test('removing a whole group subdir emits one removed per canvas (git-checkout shape)', async () => {
+    const { root, designRoot } = sandbox();
+    mkdirSync(join(designRoot, 'ui', 'project'), { recursive: true });
+    writeFileSync(join(designRoot, 'ui', 'project', 'A.tsx'), TSX);
+    writeFileSync(join(designRoot, 'ui', 'project', 'B.tsx'), TSX);
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      rmSync(join(designRoot, 'ui', 'project'), { recursive: true, force: true });
+      await w.refresh();
+      const removed = got.filter((m) => m.action === 'removed').map((m) => m.slug);
+      expect(removed.sort()).toEqual(['ui-project-a', 'ui-project-b']);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+});
+
+describe('canvas-list-watch / real fs-watch end-to-end', () => {
+  test('a raw disk write through createFsWatch emits added (the actual bug path)', async () => {
+    const { root, designRoot } = sandbox();
+    const ctx = mkCtx(designRoot);
+    const got = collect(ctx);
+    const fsWatch = createFsWatch(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 30 });
+    await w.ready;
+    fsWatch.start();
+    try {
+      // Let the OS watcher arm, then write straight to disk — NO manual bus
+      // emit. This exercises the genuine ACP-agent path: disk write →
+      // fs.watch → fs:any → gate → debounce → snapshot diff → canvas-list-update.
+      await new Promise((r) => setTimeout(r, 60));
+      writeFileSync(join(designRoot, 'ui', 'Real.tsx'), TSX);
+      const deadline = Date.now() + 3000;
+      while (
+        Date.now() < deadline &&
+        !got.some((m) => m.action === 'added' && m.slug === 'ui-real')
+      ) {
+        await new Promise((r) => setTimeout(r, 50));
+      }
+      expect(got.some((m) => m.action === 'added' && m.slug === 'ui-real')).toBe(true);
+    } finally {
+      fsWatch.stop();
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  }, 10_000);
+});