@1agh/maude 0.15.0 → 0.16.0

package/plugins/design/dev-server/dist/styles.css

@@ -1163,7 +1163,7 @@
     overflow: hidden;
   }
 
-  .sb-clear-sel, .sb-add-comment {
+  .sb-clear-sel {
     color: var(--u-fg-2);
     border: 1px solid var(--u-border);
     border-radius: var(--u-r-xs);
@@ -1177,22 +1177,12 @@
     line-height: 1.4;
   }
 
-  .sb-add-comment {
-    color: var(--u-accent);
-    border-color: var(--u-accent);
-  }
-
   .sb-clear-sel:hover {
     color: var(--u-fg-0);
     background: var(--u-bg-2);
     border-color: var(--u-border-strong);
   }
 
-  .sb-add-comment:hover {
-    background: var(--u-accent);
-    color: var(--u-accent-fg);
-  }
-
   .sb-unread .sb-count {
     font-family: var(--u-font-mono);
     color: var(--u-fg-0);
@@ -1866,74 +1856,6 @@
     display: flex;
   }
 
-  .composer {
-    gap: var(--u-s-2);
-    padding: var(--u-s-3);
-    background: var(--u-bg-2);
-    border: 1px solid var(--u-accent-line);
-    border-radius: var(--u-r-md);
-    flex-direction: column;
-    margin: 4px 0;
-    display: flex;
-  }
-
-  .composer-head {
-    align-items: baseline;
-    gap: var(--u-s-2);
-    color: var(--u-fg-3);
-    font-size: 11px;
-    display: flex;
-  }
-
-  .composer-selector {
-    font-family: var(--u-font-mono);
-    color: var(--u-fg-1);
-    background: var(--u-bg-1);
-    border-radius: var(--u-r-sm);
-    border: 1px solid var(--u-border);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-    padding: 2px 8px;
-    font-size: 11px;
-    overflow: hidden;
-  }
-
-  .comment-bar textarea.composer-textarea {
-    background: var(--u-bg-1);
-    border: 1px solid var(--u-border);
-    border-radius: var(--u-r-sm);
-    width: 100%;
-    color: var(--u-fg-0);
-    padding: var(--u-s-3);
-    resize: vertical;
-    outline: none;
-    min-height: 100px;
-    font-family: inherit;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-
-  .comment-bar textarea.composer-textarea:focus {
-    border-color: var(--u-accent-line);
-  }
-
-  .comment-bar textarea.composer-textarea::placeholder {
-    color: var(--u-fg-3);
-  }
-
-  .composer-actions {
-    justify-content: flex-end;
-    gap: 6px;
-    display: flex;
-  }
-
-  .cb-row.composer {
-    flex-wrap: nowrap;
-    align-items: stretch;
-  }
-
   .cb-label {
     color: var(--u-fg-3);
     flex: none;
@@ -1941,150 +1863,11 @@
     font-size: 11px;
   }
 
-  .cb-label code {
-    font-family: var(--u-font-mono);
-    background: var(--u-bg-2);
-    border-radius: var(--u-r-xs);
-    color: var(--u-fg-1);
-    padding: 1px 4px;
-    font-size: 10px;
-  }
-
-  .comment-bar textarea {
-    background: var(--u-bg-2);
-    border: 1px solid var(--u-border);
-    border-radius: var(--u-r-sm);
-    color: var(--u-fg-0);
-    padding: var(--u-s-2);
-    resize: vertical;
-    outline: none;
-    flex: 1;
-    min-height: 40px;
-    font-family: inherit;
-    font-size: 12px;
-  }
-
-  .comment-bar textarea:focus {
-    border-color: var(--u-accent-line);
-  }
-
-  .cb-actions {
-    align-self: flex-end;
-    gap: 4px;
-    display: flex;
-  }
-
-  .cb-primary, .cb-secondary {
-    border: 1px solid var(--u-border);
-    background: var(--u-bg-2);
-    color: var(--u-fg-1);
-    border-radius: var(--u-r-sm);
-    padding: 4px var(--u-s-3);
-    font-family: var(--u-font-mono);
-    cursor: pointer;
-    font-size: 11px;
-  }
-
-  .cb-primary {
-    background: var(--u-accent);
-    color: var(--u-bg-0);
-    border-color: var(--u-accent);
-    font-weight: 600;
-  }
-
-  .cb-primary:hover {
-    background: var(--u-accent-strong);
-    border-color: var(--u-accent-strong);
-  }
-
-  .cb-primary:disabled {
-    opacity: .5;
-    cursor: not-allowed;
-  }
-
-  .cb-secondary:hover {
-    background: var(--u-bg-3);
-    color: var(--u-fg-0);
-  }
-
-  .cb-row.focused {
-    background: var(--u-bg-2);
-    border-radius: var(--u-r-sm);
-    padding: 4px var(--u-s-2);
-  }
-
-  .cb-pinno {
-    font-family: var(--u-font-mono);
-    background: var(--u-accent);
-    color: var(--u-accent-fg);
-    border-radius: var(--u-r-sm);
-    letter-spacing: var(--tracking-sku);
-    flex: none;
-    padding: 1px 6px;
-    font-size: 11px;
-    font-weight: 700;
-  }
-
-  .cb-text {
-    color: var(--u-fg-0);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    font-size: 12px;
-    overflow: hidden;
-  }
-
-  .cb-target code {
-    font-family: var(--u-font-mono);
-    background: var(--u-bg-3);
-    border-radius: var(--u-r-xs);
-    color: var(--u-fg-2);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 240px;
-    padding: 1px 6px;
-    font-size: 10px;
-    display: inline-block;
-    overflow: hidden;
-  }
-
   .cb-row.strip {
     color: var(--u-fg-3);
     font-size: 11px;
   }
 
-  .cb-pin-strip {
-    flex-wrap: wrap;
-    flex: 1;
-    gap: 4px;
-    display: flex;
-  }
-
-  .cb-pin-chip {
-    font-family: var(--u-font-mono);
-    background: var(--u-accent);
-    color: var(--u-accent-fg);
-    border-radius: var(--u-r-sm);
-    cursor: pointer;
-    letter-spacing: var(--tracking-sku);
-    border: 0;
-    padding: 2px 7px;
-    font-size: 10px;
-    font-weight: 600;
-    transition: transform .1s;
-  }
-
-  .cb-pin-chip:hover {
-    transform: scale(1.1);
-  }
-
-  .cb-more {
-    font-family: var(--u-font-mono);
-    color: var(--u-fg-3);
-    align-self: center;
-    font-size: 10px;
-  }
-
   .rsidebar {
     background: var(--u-bg-1);
     border-left: 1px solid var(--u-border);

package/plugins/design/dev-server/http.ts

@@ -254,6 +254,15 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect): Http {
       return new Response('Method not allowed', { status: 405 });
     },
 
+    '/_api/git-committers': async (req: Request) => {
+      // Phase 6 — feed for the @mention autocomplete in composer + reply box.
+      // GET → top-20 committers on HEAD (`git shortlog -sne | head -20`)
+      // already cached server-side for 60 s.
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      const committers = await api.gitCommitters();
+      return Response.json({ committers }, { headers: { 'Cache-Control': 'no-store' } });
+    },
+
     '/_api/annotations': async (req: Request) => {
       // Phase 5 — `<designRoot>/<slug>.annotations.svg` read / overwrite.
       // GET ?file=<repo-relative-canvas-path>           → SVG text (empty if absent)
@@ -325,6 +334,26 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect): Http {
       const url = new URL(req.url);
       const pathname = url.pathname;
 
+      // Phase 6 — POST /_api/comments/<id>/reply. Dynamic path, so it lives in
+      // the fall-through instead of the static `routes` map. `<id>` is the
+      // c_<hex> id of the parent comment; body is `{ body, author? }`. Bodies
+      // share the same 4000-char cap as a top-level comment.
+      const replyMatch = pathname.match(/^\/_api\/comments\/([A-Za-z0-9_]+)\/reply$/);
+      if (replyMatch) {
+        if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+        const id = replyMatch[1] ?? '';
+        const body = await readJson<{ body?: string; author?: string }>(req);
+        if (!body || typeof body.body !== 'string' || !body.body.trim()) {
+          return new Response('body.body required', { status: 400 });
+        }
+        const next = await api.commentsAddReply(id, {
+          body: body.body,
+          author: typeof body.author === 'string' ? body.author : undefined,
+        });
+        if (!next) return new Response('Not found', { status: 404 });
+        return Response.json(next, { headers: { 'Cache-Control': 'no-store' } });
+      }
+
       // Bundled client assets (preferred path — bundle from dist/).
       if (pathname.startsWith('/_client/')) {
         const rel = decodeURIComponent(pathname.slice('/_client/'.length));

package/plugins/design/dev-server/input-router.tsx

@@ -240,6 +240,21 @@ export function isEditableTarget(t: EventTarget | null): boolean {
   return false;
 }
 
+/**
+ * Phase 6 — the comments overlay (pins / composer / thread popover / mention
+ * popup) lives INSIDE the canvas world, which means its DOM nodes are inside
+ * the input-router's capture host. Without an explicit bail-out the router
+ * would `preventDefault + stopImmediatePropagation` every click on a
+ * composer button while comment mode is active, blocking Save / Cancel.
+ *
+ * We treat the overlay nodes like editable form widgets — the router yields,
+ * the React event handler runs.
+ */
+export function isOverlayTarget(t: EventTarget | null): boolean {
+  if (!t || !(t as Element).closest) return false;
+  return !!(t as Element).closest('.cm-composer, .cm-thread, .cm-mention-popup, .cm-pin');
+}
+
 export function useInputRouter(opts: UseInputRouterOptions): void {
   const { hostRef, getActiveTool, isSpaceHeld, callbacks, enabled = true } = opts;
 
@@ -290,6 +305,10 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
     };
 
     const onPointerDown = (e: PointerEvent): void => {
+      // Phase 6 — overlay surfaces (composer / thread / mention popup) own
+      // their own clicks. The router is in capture phase, so we have to
+      // bail HERE before classify can claim the event.
+      if (isOverlayTarget(e.target)) return;
       const action = classify({
         type: 'pointerdown',
         button: e.button,
@@ -321,6 +340,7 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
      * stop their twin mousedown.
      */
     const onMouseDown = (e: MouseEvent): void => {
+      if (isOverlayTarget(e.target)) return;
       const action = classify({
         type: 'pointerdown',
         button: e.button,
@@ -346,6 +366,7 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
      * matching pointerdown (re-classify with the same modifiers).
      */
     const onClick = (e: MouseEvent): void => {
+      if (isOverlayTarget(e.target)) return;
       const tool = getActiveTool();
       const mod = e.metaKey || e.ctrlKey;
       const wouldRoute =

package/plugins/design/dev-server/test/canvas-meta-api.test.ts

@@ -24,16 +24,6 @@ interface MetaShape {
   [k: string]: unknown;
 }
 
-function seedCanvas(designRoot: string, name = 'Phase4.tsx', meta?: MetaShape): string {
-  const ui = join(designRoot, 'ui');
-  mkdirSync(ui, { recursive: true });
-  const tsxPath = join(ui, name);
-  writeFileSync(tsxPath, 'export default function P(){return <main/>}\n');
-  const metaPath = tsxPath.replace(/\.tsx$/, '.meta.json');
-  if (meta) writeFileSync(metaPath, JSON.stringify(meta, null, 2));
-  return tsxPath.replace(`${designRoot.replace(/\.design$/, '')}`, '').replace(/^\/+/, '');
-}
-
 function repoRel(designRoot: string, abs: string): string {
   // designRoot ends in `.design`. repoRoot is its parent.
   const repoRoot = designRoot.replace(/\.design$/, '').replace(/\/+$/, '');

package/plugins/design/dev-server/test/comments-api.test.ts

@@ -0,0 +1,229 @@
+// Phase 6 — comments API extensions: author / thread / mentions schema,
+// POST /_api/comments/<id>/reply, GET /_api/git-committers.
+//
+// Verifies:
+//   - New comments include `author`, `thread`, `mentions`
+//   - parseMentions in `text` lands in `mentions[]`
+//   - POST .../reply appends to thread + folds reply mentions into the union
+//   - Legacy comments (no author/thread/mentions on disk) round-trip with
+//     defaults filled in memory; disk shape stays untouched until next write
+//   - GET /_api/git-committers returns the committer list (≥1 entry in a real
+//     git sandbox; gracefully empty if git fails)
+//   - Reply on unknown id → 404
+
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+async function initGit(root: string) {
+  // Make the sandbox a tiny git repo so `git config user.name` + `git shortlog`
+  // can answer. The boot path doesn't need a real repo, but the gitCommitters /
+  // gitCurrentUser helpers do.
+  //
+  // GIT_CONFIG_GLOBAL=/dev/null + GIT_CONFIG_SYSTEM=/dev/null isolate the
+  // sandbox from the developer's global git config (which may require GPG
+  // signing, set a non-test identity, or otherwise interfere with the
+  // throwaway commit). This is repo isolation, not a sign-bypass on a real
+  // commit — the test never produces an artifact outside its temp dir.
+  const env = {
+    ...process.env,
+    GIT_TERMINAL_PROMPT: '0',
+    GIT_CONFIG_GLOBAL: '/dev/null',
+    GIT_CONFIG_SYSTEM: '/dev/null',
+  };
+  await Bun.spawn(['git', 'init', '-q'], { cwd: root, env }).exited;
+  await Bun.spawn(['git', 'config', 'user.email', 'tester@example.com'], { cwd: root, env }).exited;
+  await Bun.spawn(['git', 'config', 'user.name', 'Test User'], { cwd: root, env }).exited;
+  writeFileSync(join(root, 'README.md'), '# sandbox\n');
+  await Bun.spawn(['git', 'add', '.'], { cwd: root, env }).exited;
+  await Bun.spawn(['git', 'commit', '-q', '-m', 'init'], { cwd: root, env }).exited;
+}
+
+describe('Phase 6 — comments author + thread + mentions', () => {
+  test('commentsAdd populates author + empty thread + parsed mentions', async () => {
+    const { root, designRoot } = makeSandbox();
+    await initGit(root);
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'ui'), { recursive: true });
+      writeFileSync(
+        join(designRoot, 'ui', 'Foo.tsx'),
+        'export default function P(){return <main/>}\n'
+      );
+      const r = await fetch(`http://localhost:${port}/_comments-all`);
+      expect(r.status).toBe(200);
+
+      // POST through the WS path is the normal route, but for unit-coverage we
+      // use the file-system view: write a comment via the http endpoint
+      // doesn't exist (commentsAdd is WS-driven). Instead, hand-author a
+      // single comment via filesystem + read it back to verify the loader
+      // backfill, then exercise reply via /_api/comments/<id>/reply.
+      const slug = 'ui-foo';
+      mkdirSync(join(designRoot, '_comments'), { recursive: true });
+      const legacy = [
+        {
+          id: 'c_legacy0',
+          file: '.design/ui/Foo.tsx',
+          selector: 'main',
+          dom_path: ['main'],
+          tag: 'main',
+          classes: '',
+          bounds: null,
+          html_excerpt: '',
+          text: 'old comment',
+          status: 'open',
+          created: '2026-01-01T00:00:00.000Z',
+          resolved_at: null,
+          // no author / thread / mentions
+        },
+      ];
+      writeFileSync(join(designRoot, '_comments', `${slug}.json`), JSON.stringify(legacy, null, 2));
+
+      const list = await fetch(
+        `http://localhost:${port}/_comments?file=${encodeURIComponent('.design/ui/Foo.tsx')}`
+      ).then((x) => x.json());
+      expect(list.comments).toHaveLength(1);
+      expect(list.comments[0].author).toBe('');
+      expect(list.comments[0].thread).toEqual([]);
+      expect(list.comments[0].mentions).toEqual([]);
+
+      // Disk shape preserved — legacy file not rewritten on read.
+      const onDisk = JSON.parse(
+        readFileSync(join(designRoot, '_comments', `${slug}.json`), 'utf8')
+      );
+      expect(onDisk[0].author).toBeUndefined();
+      expect(onDisk[0].thread).toBeUndefined();
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('POST /_api/comments/<id>/reply appends to thread + folds mentions', async () => {
+    const { root, designRoot } = makeSandbox();
+    await initGit(root);
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'ui'), { recursive: true });
+      writeFileSync(
+        join(designRoot, 'ui', 'Bar.tsx'),
+        'export default function P(){return <main/>}\n'
+      );
+      mkdirSync(join(designRoot, '_comments'), { recursive: true });
+      const seed = [
+        {
+          id: 'c_seed01',
+          file: '.design/ui/Bar.tsx',
+          selector: 'button.cta',
+          dom_path: ['main', 'button.cta'],
+          tag: 'button',
+          classes: 'cta',
+          bounds: { x: 10, y: 20, w: 100, h: 40 },
+          html_excerpt: '<button class="cta">x</button>',
+          text: 'needs more padding @ada',
+          status: 'open',
+          created: '2026-05-20T10:00:00.000Z',
+          resolved_at: null,
+          author: 'Original Author',
+          thread: [],
+          mentions: ['@ada'],
+        },
+      ];
+      writeFileSync(join(designRoot, '_comments', 'ui-bar.json'), JSON.stringify(seed, null, 2));
+
+      const reply = await fetch(`http://localhost:${port}/_api/comments/c_seed01/reply`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ body: 'fixed in next pass @lin', author: 'Replier' }),
+      });
+      expect(reply.status).toBe(200);
+      const updated = await reply.json();
+      expect(updated.thread).toHaveLength(1);
+      expect(updated.thread[0].author).toBe('Replier');
+      expect(updated.thread[0].body).toBe('fixed in next pass @lin');
+      expect(updated.thread[0].id).toMatch(/^r_[0-9a-f]+$/);
+      expect(new Set(updated.mentions)).toEqual(new Set(['@ada', '@lin']));
+
+      // Persisted to disk in the v2 shape.
+      const onDisk = JSON.parse(readFileSync(join(designRoot, '_comments', 'ui-bar.json'), 'utf8'));
+      expect(onDisk[0].thread).toHaveLength(1);
+      expect(onDisk[0].thread[0].body).toBe('fixed in next pass @lin');
+      expect(new Set(onDisk[0].mentions)).toEqual(new Set(['@ada', '@lin']));
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('POST /_api/comments/<id>/reply 404s on unknown id', async () => {
+    const { root } = makeSandbox();
+    await initGit(root);
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/comments/c_ghost/reply`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ body: 'orphan' }),
+      });
+      expect(r.status).toBe(404);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('POST /_api/comments/<id>/reply 400 on empty body', async () => {
+    const { root } = makeSandbox();
+    await initGit(root);
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/comments/c_anyid/reply`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ body: '   ' }),
+      });
+      expect(r.status).toBe(400);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('GET /_api/git-committers returns the committer list', async () => {
+    const { root } = makeSandbox();
+    await initGit(root);
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/git-committers`);
+      expect(r.status).toBe(200);
+      const data = await r.json();
+      expect(Array.isArray(data.committers)).toBe(true);
+      // The sandbox just made one commit, so at least one committer should exist.
+      expect(data.committers.length).toBeGreaterThanOrEqual(1);
+      expect(data.committers[0]).toMatchObject({
+        name: 'Test User',
+        email: 'tester@example.com',
+      });
+      expect(data.committers[0].commits).toBeGreaterThanOrEqual(1);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('GET /_api/git-committers 405 on POST', async () => {
+    const { root } = makeSandbox();
+    await initGit(root);
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/git-committers`, { method: 'POST' });
+      expect(r.status).toBe(405);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});