@1agh/maude 0.15.0 → 0.16.0

package/plugins/design/dev-server/client/app.jsx

@@ -1208,64 +1208,21 @@ function Gallery({ title, items, onOpen, kind }) {
 
 // ---------- Comment composer / viewer ----------
 
-function CommentBar({ activePath, selected, comments, focusedId, draft, setDraft, onSubmit, onCancel, onResolve, onReopen, onDelete, onFocusPin }) {
+function CommentBar({ activePath, comments }) {
+  // Phase 6 — the shell-side composer + chip strip + focused-row chrome were
+  // removed. The iframe overlay (comments-overlay.tsx) owns composer + pin
+  // bubbles + thread popover. BottomBar shrinks to a live open-count summary
+  // so the shell still surfaces total review activity at a glance.
   if (!activePath) return null;
-  const focused = focusedId ? comments.find(c => c.id === focusedId) : null;
   const openComments = (comments || []).filter(c => c.status !== 'resolved');
+  if (openComments.length === 0) return null;
   return (
     <div className="comment-bar">
-      {draft && draft.file === activePath && (
-        <div className="composer">
-          <div className="composer-head">
-            <span className="cb-label">Comment on</span>
-            <code className="composer-selector" title={(draft.dom_path || []).join(' > ')}>{draft.selector || '(canvas)'}</code>
-          </div>
-          <textarea
-            autoFocus
-            className="composer-textarea"
-            value={draft.text}
-            placeholder="What should change here? (⌘↵ save · Esc cancel)"
-            onChange={e => setDraft({ ...draft, text: e.target.value })}
-            onKeyDown={e => {
-              if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); onSubmit(); }
-              else if (e.key === 'Escape') { e.preventDefault(); onCancel(); }
-            }}
-            rows={4}
-          />
-          <div className="composer-actions">
-            <button className="cb-secondary" onClick={onCancel}>Cancel</button>
-            <button className="cb-primary" disabled={!draft.text.trim()} onClick={onSubmit}>Save · ⌘↵</button>
-          </div>
-        </div>
-      )}
-
-      {focused && (
-        <div className="cb-row focused">
-          <span className="cb-pinno">#{(comments || []).filter(c => c.selector).findIndex(c => c.id === focused.id) + 1}</span>
-          <span className="cb-text">{focused.text}</span>
-          <span className="cb-target" title={focused.dom_path ? focused.dom_path.join(' > ') : ''}>
-            <code>{focused.selector || '—'}</code>
-          </span>
-          {focused.status === 'resolved'
-            ? <button className="cb-secondary" onClick={() => onReopen(focused.id)}>Reopen</button>
-            : <button className="cb-primary" onClick={() => onResolve(focused.id)}>✓ Resolve</button>}
-          <button className="cb-secondary" onClick={() => onDelete(focused.id)}>Delete</button>
-        </div>
-      )}
-
-      {!draft && !focused && openComments.length > 0 && (
-        <div className="cb-row strip">
-          <span className="cb-label">{openComments.length} open comment{openComments.length === 1 ? '' : 's'}</span>
-          <div className="cb-pin-strip">
-            {openComments.slice(0, 12).map((c, i) => (
-              <button key={c.id} className="cb-pin-chip" title={c.text} onClick={() => onFocusPin(c.id)}>
-                {i + 1}
-              </button>
-            ))}
-            {openComments.length > 12 && <span className="cb-more">+{openComments.length - 12}</span>}
-          </div>
-        </div>
-      )}
+      <div className="cb-row strip">
+        <span className="cb-label">
+          {openComments.length} open comment{openComments.length === 1 ? '' : 's'}
+        </span>
+      </div>
     </div>
   );
 }
@@ -1278,7 +1235,7 @@ function StatusBarSlot({ label, children, className = '' }) {
   );
 }
 
-function StatusBar({ activePath, selected, wsConnected, openCount, theme, onToggleTheme, onClearSelected, onAddComment, hasDraft }) {
+function StatusBar({ activePath, selected, wsConnected, openCount, theme, onToggleTheme, onClearSelected }) {
   const isSystem = activePath === SYSTEM_TAB;
   const text = selected && selected.selector
     ? selected.selector + (selected.text ? ` — "${selected.text.slice(0, 60)}"` : '')
@@ -1297,9 +1254,6 @@ function StatusBar({ activePath, selected, wsConnected, openCount, theme, onTogg
         <StatusBarSlot label="Selected element" className="sb-selected">
           <span className="sb-dot" aria-hidden="true">●</span>
           <span className="sb-sel-text" title={title}>{text}</span>
-          {!hasDraft && (
-            <button type="button" className="sb-add-comment" onClick={onAddComment} title="Add comment on selected element (⌘⇧+click in canvas)">+ comment</button>
-          )}
           <button type="button" className="sb-clear-sel" onClick={onClearSelected} title="Clear (Esc inside iframe)" aria-label="Clear selection">×</button>
         </StatusBarSlot>
       )}
@@ -1454,7 +1408,8 @@ function App() {
     return () => { cancelled = true; };
   }, []);
   const [commentsByFile, setCommentsByFile] = useState({});      // { file: [Comment] }
-  const [draft, setDraft] = useState(null);                       // { file, selector, dom_path, bounds, tag, classes, html, text }
+  // Phase 6 — the in-iframe composer owns drafting; the shell no longer holds
+  // a `draft` state. Mutations route through postMessage → WS instead.
   const [focusedCommentId, setFocusedCommentId] = useState(null);
   const [commentsPanelOpen, setCommentsPanelOpen] = useState(false);
   const [commentsFilter, setCommentsFilter] = useState('open');   // 'all' | 'open' | 'resolved'
@@ -1609,7 +1564,6 @@ function App() {
     });
     setActivePath(path);
     setFocusedCommentId(null);
-    setDraft(null);
   }, []);
 
   const openSystem = useCallback(() => {
@@ -1672,30 +1626,6 @@ function App() {
     try { el.contentWindow.postMessage({ dgn: 'comments-set', comments: list }, '*'); } catch {}
   }, [activePath, commentsByFile]);
 
-  // ----- Comment composer helpers -----
-  // Declared BEFORE the inbound-message useEffect that references them — under
-  // ES build (no var-style hoisting) these are real TDZ violations otherwise.
-  const startDraftFor = useCallback((sel) => {
-    const file = (sel && sel.file) || activePath;
-    if (!file || file === SYSTEM_TAB) return;
-    setDraft({
-      file,
-      selector: sel?.selector || '',
-      dom_path: sel?.dom_path || [],
-      tag: sel?.tag || '',
-      classes: sel?.classes || '',
-      bounds: sel?.bounds || null,
-      html: sel?.html || '',
-      text: '',
-    });
-    setFocusedCommentId(null);
-  }, [activePath]);
-
-  const startDraftFromSelection = useCallback(() => {
-    if (!selected || !selected.selector) return;
-    startDraftFor(selected);
-  }, [selected, startDraftFor]);
-
   // ----- Inbound messages from iframes -----
   useEffect(() => {
     function onMessage(e) {
@@ -1728,13 +1658,40 @@ function App() {
         wsSend({ type: 'clear-select' });
         setSelected(null);
       } else if (m.dgn === 'comment-compose' && m.selection) {
-        // Canvas C-tool / right-click "Add comment" converge here. The shell
-        // opens a composer for the target.
-        startDraftFor(m.selection);
-      } else if (m.dgn === 'comment-shortcut') {
-        // Carry-over for any legacy `.html` mock or external embed that
-        // still posts this. Canvas-shell uses `comment-compose` directly.
-        startDraftFromSelection();
+        // Phase 6 — the iframe overlay owns the composer surface now. The
+        // shell just mirrors `selected` so the StatusBar / sidebar still
+        // reflect the target, and skips the legacy `startDraftFor` path that
+        // opened the shell-side composer. Legacy `.html` mocks (no
+        // canvas-shell mount) fall through to the same path; they lose the
+        // shell composer in this phase. Acceptable per Phase 6 scope.
+        setSelected(m.selection);
+      } else if (m.dgn === 'comment-submit' && m.payload && typeof m.payload.text === 'string') {
+        // Phase 6 — iframe overlay finished composing. Relay through the
+        // existing WS `comments-add` channel; server-side persistence +
+        // broadcast back are identical to the legacy shell-composer flow.
+        const p = m.payload;
+        const txt = String(p.text).trim();
+        if (txt) {
+          wsSend({
+            type: 'comments-add',
+            payload: {
+              file: p.file,
+              selector: p.selector,
+              dom_path: p.dom_path,
+              tag: p.tag,
+              classes: p.classes,
+              bounds: p.bounds,
+              html_excerpt: p.html_excerpt,
+              text: txt,
+            },
+          });
+        }
+      } else if (m.dgn === 'comment-patch' && m.id && m.patch && typeof m.patch === 'object') {
+        // Phase 6 — thread popover routes resolve / reopen through here.
+        wsSend({ type: 'comments-patch', id: m.id, patch: m.patch });
+      } else if (m.dgn === 'comment-delete' && m.id) {
+        wsSend({ type: 'comments-delete', id: m.id });
+        setFocusedCommentId(prev => (prev === m.id ? null : prev));
       } else if (m.dgn === 'comment-click' && m.id) {
         setFocusedCommentId(m.id);
       } else if (m.dgn === 'loaded' && m.file) {
@@ -1751,7 +1708,7 @@ function App() {
     }
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [commentsByFile, focusedCommentId, startDraftFromSelection, startDraftFor]);
+  }, [commentsByFile, focusedCommentId]);
 
   // Tell the active canvas iframe to drop any persistent selection (canvas
   // SelectionSet) — used when the comment composer closes via submit /
@@ -1765,27 +1722,6 @@ function App() {
     }
   }, [activePath]);
 
-  const submitDraft = useCallback(() => {
-    if (!draft || !draft.text.trim()) return;
-    wsSend({ type: 'comments-add', payload: {
-      file: draft.file,
-      selector: draft.selector,
-      dom_path: draft.dom_path,
-      tag: draft.tag,
-      classes: draft.classes,
-      bounds: draft.bounds,
-      html_excerpt: draft.html,
-      text: draft.text.trim(),
-    }});
-    setDraft(null);
-    clearActiveCanvasSelection();
-  }, [draft, clearActiveCanvasSelection]);
-
-  const cancelDraft = useCallback(() => {
-    setDraft(null);
-    clearActiveCanvasSelection();
-  }, [clearActiveCanvasSelection]);
-
   const resolveComment = useCallback((id) => {
     wsSend({ type: 'comments-patch', id, patch: { status: 'resolved' } });
   }, []);
@@ -1797,16 +1733,6 @@ function App() {
     setFocusedCommentId(prev => (prev === id ? null : prev));
   }, []);
 
-  const focusPinFromBar = useCallback((id) => {
-    setFocusedCommentId(id);
-    if (activePath && activePath !== SYSTEM_TAB) {
-      const el = iframesRef.current.get(activePath);
-      if (el && el.contentWindow) {
-        try { el.contentWindow.postMessage({ dgn: 'comment-focus', id }, '*'); } catch {}
-      }
-    }
-  }, [activePath]);
-
   // Jump from right-sidebar list to a comment: open file tab if needed, focus pin.
   // The iframe may be freshly mounted; the loaded handler also re-sends focus if focusedCommentId matches.
   const jumpToComment = useCallback((file, id) => {
@@ -1918,15 +1844,15 @@ function App() {
         setHelpOpen(true);
         return;
       }
-      // Esc — close composer (in addition to its own textarea handler) or clear focused pin
+      // Esc — clear focused pin. The in-place composer (Phase 6) and thread
+      // popover handle their own Esc inside the iframe.
       if (e.key === 'Escape') {
-        if (draft) { setDraft(null); clearActiveCanvasSelection(); return; }
         if (focusedCommentId) { setFocusedCommentId(null); return; }
       }
     }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [reloadActive, selected, activePath, startDraftFromSelection, draft, focusedCommentId, sidebarOpen, openSystem, closeTab, clearActiveCanvasSelection]);
+  }, [reloadActive, selected, activePath, focusedCommentId, sidebarOpen, openSystem, closeTab, clearActiveCanvasSelection]);
 
   const registerIframe = useCallback((path, el) => {
     if (el) iframesRef.current.set(path, el);
@@ -1979,20 +1905,7 @@ function App() {
           cfg={cfg}
         />
         {activePath && activePath !== SYSTEM_TAB && (
-          <CommentBar
-            activePath={activePath}
-            selected={selected}
-            comments={activeFileComments}
-            focusedId={focusedCommentId}
-            draft={draft && draft.file === activePath ? draft : null}
-            setDraft={setDraft}
-            onSubmit={submitDraft}
-            onCancel={cancelDraft}
-            onResolve={resolveComment}
-            onReopen={reopenComment}
-            onDelete={deleteComment}
-            onFocusPin={focusPinFromBar}
-          />
+          <CommentBar activePath={activePath} comments={activeFileComments} />
         )}
         <StatusBar
           activePath={activePath}
@@ -2002,8 +1915,6 @@ function App() {
           theme={theme}
           onToggleTheme={toggleTheme}
           onClearSelected={clearSelected}
-          onAddComment={startDraftFromSelection}
-          hasDraft={!!(draft && draft.file === activePath)}
         />
       </div>
       {commentsPanelOpen && (

package/plugins/design/dev-server/client/comments-overlay.css

@@ -0,0 +1,381 @@
+/* Phase 6 — in-place comments overlay
+ *
+ * Lives inside the canvas iframe; portaled into `.dc-world` so CSS zoom on the
+ * world plane scales the entire layer (pins + composer + thread popover)
+ * uniformly with the artboards.
+ *
+ * DS-token only. No raw hex literals, no glow shadows, no rounded > 4px, no
+ * gradients. The design-system-guard subagent enforces this on PR — keep edits
+ * inside the token vocabulary.
+ */
+
+.cm-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  /* Pins / composer / thread sit ABOVE the SelectionHalos chrome (z-index 5
+   * in canvas-shell HALO_CSS). Rendered as a sibling of `.dc-canvas` (NOT
+   * portaled into `.dc-world`) so we share the root stacking context with
+   * the halos — z-index here directly competes with theirs. Bonus: pins stay
+   * fixed 24px regardless of canvas zoom, FigJam-style. */
+  z-index: 10;
+}
+
+/* ─── Pin badge ───────────────────────────────────────────────────────────── */
+.cm-pin {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  background: var(--accent, #d63b1f);
+  color: var(--accent-fg, #faf6ef);
+  border: 1px solid var(--border-strong, #2a2520);
+  border-radius: 0;
+  font: 600 var(--type-xs, 11px) / 1 var(--font-mono, ui-monospace, monospace);
+  letter-spacing: var(--tracking-sku, 0.04em);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+  will-change: transform;
+}
+
+.cm-pin:hover,
+.cm-pin[aria-expanded='true'] {
+  background: var(--accent-hover, color-mix(in oklab, var(--accent, #d63b1f) 90%, white));
+}
+
+.cm-pin:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+.cm-pin[data-resolved='true'] {
+  background: var(--bg-3, #1c1916);
+  color: var(--fg-2, #6e6660);
+  opacity: 0.6;
+}
+
+.cm-pin[data-focused='true'] {
+  /* Subtle ring — DS hard-edges discipline: no glow, just a hairline outline. */
+  outline: 1px solid var(--fg-0, #2a2520);
+  outline-offset: 1px;
+}
+
+/* ─── Composer card ───────────────────────────────────────────────────────── */
+.cm-composer {
+  position: absolute;
+  width: 300px;
+  background: var(--bg-1, #faf6ef);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: var(--radius-sm, 2px);
+  padding: var(--space-4, 12px);
+  box-shadow: none;
+  font: var(--type-sm, 13px) / var(--lh-sm, 1.45) var(--font-mono, ui-monospace, monospace);
+  color: var(--fg-0, #2a2520);
+  pointer-events: auto;
+  z-index: 4;
+}
+
+.cm-composer__head {
+  font-size: var(--type-xs, 11px);
+  color: var(--fg-2, #6e6660);
+  letter-spacing: var(--tracking-eyebrow, 0.08em);
+  text-transform: uppercase;
+  margin: 0 0 var(--space-2, 4px) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 4px);
+}
+
+.cm-composer__selector {
+  color: var(--fg-1, #4a4540);
+  background: var(--mono-cell-bg, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--accent, #d63b1f) 6%));
+  padding: 0 var(--space-2, 4px);
+  border: 1px solid var(--mono-rule, var(--border-subtle, #c8bfb4));
+  font-size: var(--type-xs, 11px);
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.cm-composer__textarea {
+  width: 100%;
+  min-height: 72px;
+  resize: vertical;
+  background: var(--bg-0, #ffffff);
+  color: var(--fg-0, #2a2520);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  padding: var(--space-3, 8px);
+  font: inherit;
+  box-sizing: border-box;
+}
+
+.cm-composer__textarea:focus-visible {
+  outline: none;
+  border-color: var(--accent, #d63b1f);
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+.cm-composer__actions {
+  display: flex;
+  gap: var(--space-2, 4px);
+  justify-content: flex-end;
+  margin-top: var(--space-3, 8px);
+}
+
+.cm-btn {
+  font: 500 var(--type-xs, 11px) / 1.4 var(--font-mono, ui-monospace, monospace);
+  letter-spacing: var(--tracking-eyebrow, 0.08em);
+  text-transform: uppercase;
+  padding: var(--space-2, 4px) var(--space-3, 8px);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  cursor: pointer;
+  background: transparent;
+  color: var(--fg-0, #2a2520);
+  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+}
+
+.cm-btn:hover {
+  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
+}
+
+.cm-btn--primary {
+  background: var(--accent, #d63b1f);
+  color: var(--accent-fg, #faf6ef);
+  border-color: var(--accent, #d63b1f);
+}
+
+.cm-btn--primary:hover {
+  background: var(--accent-hover, color-mix(in oklab, var(--accent, #d63b1f) 90%, white));
+}
+
+.cm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cm-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+/* ─── Thread popover ──────────────────────────────────────────────────────── */
+.cm-thread {
+  position: absolute;
+  width: 340px;
+  max-height: 60vh;
+  overflow: auto;
+  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: var(--radius-sm, 2px);
+  padding: var(--space-4, 12px);
+  box-shadow: none;
+  font: var(--type-sm, 13px) / var(--lh-sm, 1.45) var(--font-mono, ui-monospace, monospace);
+  color: var(--fg-0, #2a2520);
+  pointer-events: auto;
+  z-index: 5;
+}
+
+.cm-thread__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 4px);
+  padding-bottom: var(--space-3, 8px);
+  border-bottom: var(--rule-thin, 1px solid #2a2520);
+}
+
+.cm-thread__head-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-2, 4px);
+}
+
+.cm-thread__close {
+  background: transparent;
+  color: var(--fg-2, #6e6660);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  padding: 0 var(--space-2, 4px);
+  font: 600 var(--type-xs, 11px) / 1.2 var(--font-mono, ui-monospace, monospace);
+  cursor: pointer;
+  align-self: flex-start;
+  margin-left: var(--space-2, 4px);
+  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+}
+
+.cm-thread__close:hover {
+  background: var(--bg-3, #1c1916);
+  color: var(--fg-0, #2a2520);
+}
+
+.cm-thread__close:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+.cm-thread__author {
+  color: var(--fg-0, #2a2520);
+  font-weight: 600;
+}
+
+.cm-thread__time {
+  color: var(--fg-2, #6e6660);
+  font-size: var(--type-xs, 11px);
+}
+
+.cm-thread__selector {
+  display: inline-block;
+  color: var(--fg-2, #6e6660);
+  font-size: var(--type-xs, 11px);
+  border: 1px solid var(--mono-rule, var(--border-subtle, #c8bfb4));
+  padding: 0 var(--space-2, 4px);
+  background: var(--mono-cell-bg, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--accent, #d63b1f) 6%));
+  align-self: flex-start;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-thread__body {
+  padding: var(--space-3, 8px) 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.cm-thread__body strong,
+.cm-thread__reply-body strong {
+  /* @mention tokens — bold, accent color. Inserted by `renderBodyWithMentions`. */
+  color: var(--accent, #d63b1f);
+  font-weight: 600;
+}
+
+.cm-thread__reply {
+  padding: var(--space-3, 8px) 0;
+  border-top: 1px solid var(--border-subtle, #c8bfb4);
+}
+
+.cm-thread__reply-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2, 4px);
+  margin-bottom: var(--space-2, 4px);
+}
+
+.cm-thread__reply-author {
+  color: var(--fg-1, #4a4540);
+  font-weight: 600;
+}
+
+.cm-thread__reply-time {
+  color: var(--fg-3, var(--fg-2, #6e6660));
+  font-size: var(--type-xs, 11px);
+}
+
+.cm-thread__reply-body {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.cm-thread__reply-form {
+  padding-top: var(--space-3, 8px);
+  border-top: var(--rule-thin, 1px solid #2a2520);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 4px);
+}
+
+.cm-thread__reply-textarea {
+  width: 100%;
+  min-height: 56px;
+  resize: vertical;
+  background: var(--bg-0, #ffffff);
+  color: var(--fg-0, #2a2520);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  padding: var(--space-3, 8px);
+  font: inherit;
+  box-sizing: border-box;
+}
+
+.cm-thread__reply-textarea:focus-visible {
+  outline: none;
+  border-color: var(--accent, #d63b1f);
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+.cm-thread__reply-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2, 4px);
+}
+
+.cm-thread__actions {
+  display: flex;
+  gap: var(--space-2, 4px);
+  padding-top: var(--space-3, 8px);
+  margin-top: var(--space-3, 8px);
+  border-top: var(--rule-thin, 1px solid #2a2520);
+}
+
+.cm-thread__actions .cm-btn--danger {
+  margin-left: auto;
+  color: var(--status-error, #c0392b);
+  border-color: var(--status-error, #c0392b);
+}
+
+.cm-thread__actions .cm-btn--danger:hover {
+  background: color-mix(in oklab, var(--status-error, #c0392b) 12%, transparent);
+}
+
+/* ─── @mention autocomplete ──────────────────────────────────────────────── */
+.cm-mention-popup {
+  position: absolute;
+  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  font: var(--type-xs, 11px) / var(--lh-xs, 1.3) var(--font-mono, ui-monospace, monospace);
+  color: var(--fg-0, #2a2520);
+  max-height: 180px;
+  min-width: 160px;
+  overflow: auto;
+  box-shadow: none;
+  pointer-events: auto;
+  z-index: 6;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.cm-mention-popup__item {
+  padding: var(--space-2, 4px) var(--space-3, 8px);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3, 8px);
+}
+
+.cm-mention-popup__item[aria-selected='true'] {
+  background: var(--accent, #d63b1f);
+  color: var(--accent-fg, #faf6ef);
+}
+
+.cm-mention-popup__name {
+  font-weight: 600;
+}
+
+.cm-mention-popup__email {
+  color: var(--fg-2, #6e6660);
+  font-size: var(--type-xs, 11px);
+}
+
+.cm-mention-popup__item[aria-selected='true'] .cm-mention-popup__email {
+  color: var(--accent-fg, #faf6ef);
+  opacity: 0.85;
+}