@1agh/maude 0.37.0 → 0.38.0

package/apps/studio/test/reorder-api.test.ts

@@ -0,0 +1,210 @@
+// POST /_api/reorder round-trip (DDR-138, phase-12.1). Boots a real server,
+// serves a canvas (which injects data-cd-id + writes _locator.json), then drives
+// a node-move reorder through the HTTP layer and asserts: the source reorders on
+// disk, the response carries the recomputed movedId, a pre-reorder history
+// snapshot is written (so /design:rollback can undo it), and a cross-origin POST
+// is CSRF-rejected. Route unreachability from the canvas origin is proven
+// separately in canvas-origin-gate.test.ts.
+
+import { describe, expect, test } from 'bun:test';
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+const CANVAS_SRC = `export default function List() {
+  return (
+    <section>
+      <div>A</div>
+      <div>B</div>
+      <div>C</div>
+    </section>
+  );
+}
+`;
+
+/** After a GET of the canvas, read _locator.json and return the div ids ordered
+ *  by source line (== authored order A, B, C). */
+async function divIdsByLine(main: string, designRoot: string): Promise<string[]> {
+  // Serving the canvas triggers pass-1 id injection + _locator.json write.
+  const r = await fetch(`${main}/.design/ui/List.tsx`, { signal: AbortSignal.timeout(2000) });
+  expect(r.status).toBe(200);
+  const locator = JSON.parse(readFileSync(join(designRoot, '_locator.json'), 'utf8'));
+  const map = locator['ui/List'] as Record<string, { line: number; jsxPath: string[] }>;
+  return Object.entries(map)
+    .filter(([, e]) => e.jsxPath[e.jsxPath.length - 1] === 'div')
+    .sort((a, b) => a[1].line - b[1].line)
+    .map(([id]) => id);
+}
+
+/** The visible letter order (A/B/C) in the on-disk source — reflects sibling order. */
+function letterOrder(src: string): string[] {
+  return [...src.matchAll(/>([ABC])</g)].map((m) => m[1] as string);
+}
+
+describe('POST /_api/reorder — HTTP round-trip', () => {
+  test('moves a sibling on disk, returns movedId, snapshots pre-reorder, CSRF-guards', async () => {
+    const { root, designRoot } = makeSandbox();
+    mkdirSync(join(designRoot, 'ui'), { recursive: true });
+    const canvasPath = join(designRoot, 'ui', 'List.tsx');
+    writeFileSync(canvasPath, CANVAS_SRC);
+
+    const port = nextPort();
+    const main = `http://localhost:${port}`;
+    const proc = await bootServer(root, port);
+    try {
+      const [aId, , cId] = await divIdsByLine(main, designRoot);
+
+      // Move A after C → order becomes B, C, A.
+      const res = await fetch(`${main}/_api/reorder`, {
+        method: 'POST',
+        // No Origin header → same-origin/programmatic; sameOriginWrite allows it.
+        body: JSON.stringify({ canvas: 'ui/List', id: aId, refId: cId, position: 'after' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(res.status).toBe(200);
+      const json = (await res.json()) as {
+        ok: boolean;
+        movedId: string | null;
+        semanticId: string | null;
+      };
+      expect(json.ok).toBe(true);
+      expect(json.movedId).toMatch(/^[0-9a-f]{8}$/);
+
+      // Source reordered on disk.
+      expect(letterOrder(readFileSync(canvasPath, 'utf8'))).toEqual(['B', 'C', 'A']);
+
+      // A pre-reorder snapshot landed under _history/ui-list/ (rollback path).
+      const histDir = join(designRoot, '_history', 'ui-list');
+      expect(existsSync(histDir)).toBe(true);
+      const metas = readdirSync(histDir)
+        .filter((f) => f.endsWith('.json'))
+        .map((f) => JSON.parse(readFileSync(join(histDir, f), 'utf8')) as { reason: string });
+      expect(metas.some((m) => m.reason === 'pre-reorder')).toBe(true);
+
+      // Cross-origin POST is CSRF-rejected (403), leaving the file untouched.
+      const forged = await fetch(`${main}/_api/reorder`, {
+        method: 'POST',
+        headers: { origin: 'http://evil.example' },
+        body: JSON.stringify({ canvas: 'ui/List', id: cId, refId: aId, position: 'before' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(forged.status).toBe(403);
+      expect(letterOrder(readFileSync(canvasPath, 'utf8'))).toEqual(['B', 'C', 'A']);
+
+      // A self-move is a 422 refusal (guardrail), not a 500.
+      const bad = await fetch(`${main}/_api/reorder`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/List', id: aId, refId: aId, position: 'after' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(bad.status).toBe(422);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});
+
+describe('POST /_api/reorder-revert — Cmd+Z round-trip', () => {
+  test('undo restores the pre-reorder source, redo re-applies, stale content 409s', async () => {
+    const { root, designRoot } = makeSandbox();
+    mkdirSync(join(designRoot, 'ui'), { recursive: true });
+    const canvasPath = join(designRoot, 'ui', 'List.tsx');
+    writeFileSync(canvasPath, CANVAS_SRC);
+
+    const port = nextPort();
+    const main = `http://localhost:${port}`;
+    const proc = await bootServer(root, port);
+    try {
+      const [aId, , cId] = await divIdsByLine(main, designRoot);
+
+      // Reorder A after C → B, C, A; the response carries the revert-log seq.
+      const res = await fetch(`${main}/_api/reorder`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/List', id: aId, refId: cId, position: 'after' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      const json = (await res.json()) as { ok: boolean; seq: number };
+      expect(json.ok).toBe(true);
+      expect(typeof json.seq).toBe('number');
+      expect(letterOrder(readFileSync(canvasPath, 'utf8'))).toEqual(['B', 'C', 'A']);
+
+      // Undo → back to A, B, C.
+      const undo = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/List', seq: json.seq, dir: 'undo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(undo.status).toBe(200);
+      expect(letterOrder(readFileSync(canvasPath, 'utf8'))).toEqual(['A', 'B', 'C']);
+
+      // Redo → B, C, A again.
+      const redo = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/List', seq: json.seq, dir: 'redo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(redo.status).toBe(200);
+      expect(letterOrder(readFileSync(canvasPath, 'utf8'))).toEqual(['B', 'C', 'A']);
+
+      // External edit → undo refuses with 409 and leaves the file alone.
+      const edited = readFileSync(canvasPath, 'utf8').replace('>B<', '>B!<');
+      writeFileSync(canvasPath, edited);
+      const stale = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/List', seq: json.seq, dir: 'undo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(stale.status).toBe(409);
+      expect(readFileSync(canvasPath, 'utf8')).toBe(edited);
+
+      // Unknown seq → 404; forged cross-origin POST → 403.
+      const missing = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/List', seq: 99999, dir: 'undo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(missing.status).toBe(404);
+      const forged = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        headers: { origin: 'http://evil.example' },
+        body: JSON.stringify({ canvas: 'ui/List', seq: json.seq, dir: 'undo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(forged.status).toBe(403);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});
+
+// Adversarial F3 (DDR-139): a REJECTED reorder must NOT deposit a _history
+// snapshot — the pre-move snapshot + revert-log are written only on a confirmed
+// write, so a stream of failing requests can't disk-fill _history.
+describe('POST /_api/reorder — a rejected move writes no snapshot', () => {
+  test('an unknown-refId reorder 422s and leaves _history empty', async () => {
+    const { root, designRoot } = makeSandbox();
+    mkdirSync(join(designRoot, 'ui'), { recursive: true });
+    writeFileSync(join(designRoot, 'ui', 'List.tsx'), CANVAS_SRC);
+    const port = nextPort();
+    const main = `http://localhost:${port}`;
+    const proc = await bootServer(root, port);
+    try {
+      const [aId] = await divIdsByLine(main, designRoot);
+      const bad = await fetch(`${main}/_api/reorder`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/List', id: aId, refId: 'deadbeef', position: 'after' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(bad.status).toBe(422); // refId not found → moveElement throws
+      // No pre-reorder snapshot was written (the move never landed).
+      const histDir = join(designRoot, '_history', 'ui-list');
+      const snaps = existsSync(histDir)
+        ? readdirSync(histDir).filter((f) => f.endsWith('.json'))
+        : [];
+      expect(snaps.length).toBe(0);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});

package/apps/studio/test/slash-commands.test.ts

@@ -0,0 +1,117 @@
+// Unit tests for the pure command model behind the ACP composer autocomplete +
+// inline pill (client/panels/slash-commands.js). No DOM — importable directly.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  buildCommandModel,
+  filterCommands,
+  groupOf,
+  matchLeadingCommand,
+  normalizeName,
+  STATIC_COMMANDS,
+} from '../client/panels/slash-commands.js';
+
+describe('normalizeName', () => {
+  test('strips a leading slash, lowercases, trims', () => {
+    expect(normalizeName('/design:Edit')).toBe('design:edit');
+    expect(normalizeName('  FLOW:Plan  ')).toBe('flow:plan');
+    expect(normalizeName('design:edit')).toBe('design:edit');
+  });
+  test('is empty-safe', () => {
+    expect(normalizeName('')).toBe('');
+    expect(normalizeName(null as unknown as string)).toBe('');
+    expect(normalizeName(undefined as unknown as string)).toBe('');
+  });
+});
+
+describe('groupOf', () => {
+  test('extracts the plugin prefix', () => {
+    expect(groupOf('design:edit')).toBe('design');
+    expect(groupOf('flow:bug-fix')).toBe('flow');
+    expect(groupOf('bare')).toBe('other');
+  });
+});
+
+describe('matchLeadingCommand', () => {
+  test('typing mode: leading slash token with no space', () => {
+    expect(matchLeadingCommand('/')).toEqual({ token: '', full: null, typing: true });
+    expect(matchLeadingCommand('/desi')).toEqual({ token: 'desi', full: null, typing: true });
+    expect(matchLeadingCommand('/design:edit')).toEqual({
+      token: 'design:edit',
+      full: null,
+      typing: true,
+    });
+    // Leading whitespace is tolerated (trimmed).
+    expect(matchLeadingCommand('  /design')).toEqual({
+      token: 'design',
+      full: null,
+      typing: true,
+    });
+  });
+  test('highlight mode: command followed by a space', () => {
+    expect(matchLeadingCommand('/design:edit make it bolder')).toEqual({
+      token: 'design:edit',
+      full: '/design:edit',
+      typing: false,
+    });
+    expect(matchLeadingCommand('/flow:quick ')).toEqual({
+      token: 'flow:quick',
+      full: '/flow:quick',
+      typing: false,
+    });
+  });
+  test('non-command text returns null', () => {
+    expect(matchLeadingCommand('make the button bigger')).toBeNull();
+    expect(matchLeadingCommand('email me at a/b')).toBeNull(); // mid-string slash is not a command
+    expect(matchLeadingCommand('')).toBeNull();
+  });
+});
+
+describe('buildCommandModel', () => {
+  test('cold (no live list) → static keys are the optimistic exists-set', () => {
+    const { all, existsSet } = buildCommandModel(STATIC_COMMANDS, []);
+    expect(all.length).toBe(STATIC_COMMANDS.length);
+    expect(existsSet.has('design:edit')).toBe(true);
+    expect(existsSet.has('design:new')).toBe(true);
+    // every static command is present + flagged not-live
+    expect(all.every((c) => c.live === false)).toBe(true);
+  });
+
+  test('warm (live list) → live names are the strict authority, and demote unknowns', () => {
+    const live = [
+      { name: 'design:edit', description: 'live desc' },
+      { name: '/design:new', description: '' }, // slash + separator variance tolerated
+      { name: 'user:custom', description: 'a user command' },
+    ];
+    const { all, existsSet } = buildCommandModel(STATIC_COMMANDS, live);
+    // exists-set is strictly the live set
+    expect(existsSet.has('design:edit')).toBe(true);
+    expect(existsSet.has('design:new')).toBe(true);
+    expect(existsSet.has('user:custom')).toBe(true);
+    // a shipped static command NOT in the live set is no longer "exists"
+    expect(existsSet.has('design:critic')).toBe(false);
+    // live-only command is added to the union
+    expect(all.find((c) => c.name === 'user:custom')?.live).toBe(true);
+    // static command present in live is marked live
+    expect(all.find((c) => c.name === 'design:edit')?.live).toBe(true);
+  });
+});
+
+describe('filterCommands', () => {
+  test('empty token returns the capped list', () => {
+    const { all } = buildCommandModel(STATIC_COMMANDS, []);
+    expect(filterCommands(all, '', 5).length).toBe(5);
+  });
+  test('prefix matches rank before substring matches', () => {
+    const { all } = buildCommandModel(STATIC_COMMANDS, []);
+    const res = filterCommands(all, 'design:', 20);
+    expect(res.length).toBeGreaterThan(0);
+    expect(res.every((c) => c.name.startsWith('design:'))).toBe(true);
+  });
+  test('matches on description substring too', () => {
+    const { all } = buildCommandModel(STATIC_COMMANDS, []);
+    const res = filterCommands(all, 'critic', 20);
+    expect(res.some((c) => c.name === 'design:critic')).toBe(true);
+  });
+});

package/apps/studio/undo-stack.ts

@@ -81,6 +81,12 @@ export interface CommandSinks {
    * snapshot). See `commands/edit-source-command.ts`.
    */
   editSourceApplyFn?: unknown;
+  /**
+   * Wired by `CanvasShell`. Reverts/re-applies a Phase 12.1 element reorder by
+   * posting `dgn:'reorder-revert'` to the parent shell, which owns the
+   * main-origin-only `/_api/reorder-revert` write. See `commands/reorder-command.ts`.
+   */
+  reorderRevertFn?: unknown;
 }
 
 export type CommandBuilder<P = unknown> = (

package/apps/studio/whats-new.json

@@ -1,6 +1,42 @@
 {
   "$schema": "./whats-new.schema.json",
   "entries": [
+    {
+      "id": "acp-context-hardening",
+      "version": "0.38.0",
+      "date": "2026-07-03",
+      "kind": "feature",
+      "title": "The Assistant keeps your canvas in view",
+      "summary": "Selection now sticks per canvas: pick an element, switch to another canvas and back, and it's still selected — no more losing your place. Every message you send to the Assistant carries the canvas and element you had chosen, frozen at send time and shown as a chip above the box, so switching canvases while Claude works never leaves it guessing what you meant. And a fresh chat already knows it's running inside the Maude studio, so you can just say \"make this bigger\" and go.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "acp-composer-paste-and-send",
+      "version": "0.38.0",
+      "date": "2026-07-03",
+      "kind": "feature",
+      "title": "Paste, copy, and send in the Assistant",
+      "summary": "Copy and paste now work in the desktop app, and Enter sends your message (Shift+Enter for a new line). Paste a file path, a link, or an image straight from your clipboard and it becomes a tidy chip — with a line underneath showing exactly what each chip will send, so nothing hidden reaches Claude. A pasted screenshot is saved with the chat and Claude reads it on send.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "slash-command-autocomplete",
+      "version": "0.38.0",
+      "date": "2026-07-03",
+      "kind": "feature",
+      "title": "Slash-command autocomplete in the Assistant",
+      "summary": "In the Assistant chat, type \"/\" to see the design and flow commands your Claude actually has — filter as you type, pick with the keyboard or a click (it prefills, never sends). A command that exists lights up as a pill right inside the box, so you don't have to remember the exact names.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "drag-to-reorder",
+      "version": "0.38.0",
+      "date": "2026-07-03",
+      "kind": "feature",
+      "title": "Drag to reorder elements",
+      "summary": "Rearrange a canvas by hand. Drag the element itself on the canvas — drop on the top/left half to go above, the bottom/right half to go below, or the middle of a box to drop inside it — and the layout reflows LIVE while you hold, Figma-style, with the neighbours gliding into place; Esc puts it back. Or drag in the Layers panel, which now mirrors the canvas both ways as you move. Even instances of the same reusable component (a board's columns, repeated cards) reorder now. Every reorder rewrites your .tsx source and undoes with ⌘Z / redoes with ⌘⇧Z. Keyboard: with the panel focused, ↑/↓ walk the selection, Alt+↑/↓ move within the parent, Alt+Shift+↑/↓ move across.",
+      "surface": "design-ui"
+    },
     {
       "id": "new-project-menu-and-local",
       "version": "0.37.0",
@@ -386,6 +422,15 @@
       "title": "Self-hostable hub + live file sync",
       "summary": "Run your own Maude hub and co-edit canvases with bidirectional file sync, offline-aware status, and conflict handling.",
       "surface": "design-ui"
+    },
+    {
+      "id": "zero-install-desktop-design",
+      "version": "0.38.0",
+      "date": "2026-07-03",
+      "kind": "feature",
+      "title": "Design just works in the desktop chat",
+      "summary": "With only Claude Code installed, /design:* commands auto-load in the chat (nothing to install), and design critics can now see your artboards — a screenshot engine is bundled and provisions its browser on first use.",
+      "surface": "design-ui"
     }
   ]
 }

package/apps/studio/ws.ts

@@ -81,6 +81,43 @@ export function isLoopbackHost(host: string | null): boolean {
   return h === '127.0.0.1' || h === '::1' || h === 'localhost';
 }
 
+/** Port component of a `host[:port]` / `[::1]:port` string ('' if default-port). */
+function hostPort(host: string): string {
+  const h = host.trim();
+  if (h.startsWith('[')) {
+    const close = h.indexOf(']');
+    return close !== -1 ? h.slice(close + 1).replace(/^:/, '') : '';
+  }
+  const colon = h.lastIndexOf(':');
+  return colon !== -1 ? h.slice(colon + 1) : '';
+}
+
+/**
+ * CSWSH gate for the privileged ACP WebSocket. Loopback-Host is NOT enough: a
+ * WS handshake bypasses the same-origin policy, so a cross-origin drive-by page
+ * (`http://evil.com`, or the user's own `http://localhost:3000` dev server) can
+ * open `ws://localhost:<port>/_ws/acp` — and the bridge spawns the user's
+ * `claude` + drives file edits. A browser ALWAYS sends `Origin` on a cross-doc
+ * WS connect; a non-browser client (CLI / tests) omits it. Allow when Origin is
+ * absent, or when it is a loopback host on the SAME port as the request — which
+ * is exactly what the native panel and a same-origin `maude design serve` tab
+ * send (both navigate to `http://localhost:<serverport>`). Reject everything
+ * else. Mirrors the `sameOriginWrite` (http.ts) discipline for the WS upgrade.
+ */
+export function isSameOriginWs(req: Request): boolean {
+  const origin = req.headers.get('origin');
+  if (!origin) return true; // non-browser (CLI / tests) — browsers send Origin on WS
+  let originHost: string;
+  try {
+    originHost = new URL(origin).host; // host[:port]; `Origin: null` → throws → reject
+  } catch {
+    return false;
+  }
+  const reqHost = req.headers.get('host');
+  if (!isLoopbackHost(originHost) || !isLoopbackHost(reqHost)) return false;
+  return hostPort(originHost) === hostPort(reqHost ?? '');
+}
+
 export interface Ws {
   handler: WebSocketHandler<WsData>;
   broadcast(payload: unknown): void;

package/cli/commands/design.mjs

@@ -44,6 +44,7 @@ const BIN_VERBS = new Set([
   'read-annotations',
   'annotate',
   'chat-open',
+  'ensure-browser',
 ]);
 
 // Bin verbs that boot the dev-server (directly, or by shelling into server-up.sh).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1agh/maude",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "Marketplace of Claude Code plugins by Michal Dovrtěl: `design` (canvas-first design iteration) + `flow` (generic agentic workflow loop with .ai second brain). Ships the `maude` CLI (with `mdcc` legacy alias) to scaffold workspace, run the design dev server, and manage configs.",
   "type": "module",
   "engines": {
@@ -50,13 +50,13 @@
     "test:e2e:desktop:onboarding": "pnpm --filter @maude/desktop-e2e e2e:onboarding"
   },
   "optionalDependencies": {
-    "@1agh/maude-darwin-arm64": "0.37.0",
-    "@1agh/maude-darwin-x64": "0.37.0",
-    "@1agh/maude-linux-arm64": "0.37.0",
-    "@1agh/maude-linux-arm64-musl": "0.37.0",
-    "@1agh/maude-linux-x64": "0.37.0",
-    "@1agh/maude-linux-x64-musl": "0.37.0",
-    "@1agh/maude-win32-x64": "0.37.0"
+    "@1agh/maude-darwin-arm64": "0.38.0",
+    "@1agh/maude-darwin-x64": "0.38.0",
+    "@1agh/maude-linux-arm64": "0.38.0",
+    "@1agh/maude-linux-arm64-musl": "0.38.0",
+    "@1agh/maude-linux-x64": "0.38.0",
+    "@1agh/maude-linux-x64-musl": "0.38.0",
+    "@1agh/maude-win32-x64": "0.38.0"
   },
   "files": [
     "cli",

package/plugins/design/dependencies.json

@@ -65,10 +65,10 @@
         "expectExit": 0
       },
       "install": {
-        "preferred": "npm i -g @anthropic-ai/agent-browser"
+        "preferred": "npm i -g agent-browser"
       },
       "autoInstall": true,
-      "fallbackBehavior": "Screenshot helpers fall back to `npx playwright` (slower, less reliable). /design:smoke and several critics need agent-browser for full coverage.",
+      "fallbackBehavior": "Screenshot helpers fall back to `npx playwright` (slower, less reliable). /design:smoke and several critics need agent-browser for full coverage. On the Maude DESKTOP app it is BUNDLED (externalBin, DDR-144) and its Chromium engine is provisioned as chrome-headless-shell by `maude design ensure-browser` — screenshots work zero-install there; this soft/manual note applies to the web `maude design serve` + CLI paths.",
       "usedBy": [
         "commands/screenshot.md",
         "commands/new.md",
@@ -80,7 +80,7 @@
         "agents/graphic-design-critic.md",
         "agents/a11y-critic.md"
       ],
-      "docsUrl": "https://github.com/anthropics/agent-browser"
+      "docsUrl": "https://github.com/vercel-labs/agent-browser"
     },
     {
       "id": "playwright",