@startsimpli/ui 0.4.143 → 0.4.145

package/src/components/track-changes/ChangesRail.tsx

@@ -0,0 +1,697 @@
+'use client';
+
+/**
+ * ChangesRail — every open suggestion and comment thread on a field, in
+ * document order, with accept / reject / withdraw and reply / resolve / reopen
+ * (bd startsim-whwxd.3; design startsim-xyn25 section d).
+ *
+ * HUMAN-ONLY (Quinn, 2026-10-07). There is no machine-proposal control: the
+ * server refuses suggestions and comments from machine actors.
+ *
+ * WHO SEES WHAT. Accept and reject render only for someone who may edit the
+ * field (`canAccept`): anyone who can edit may accept (Q4). Everyone who can
+ * read may suggest, comment, reply and resolve (Q5). An author may withdraw
+ * their own suggestion.
+ *
+ * KEYBOARD. Every item is focusable and named in words (author, and whether a
+ * person or a machine wrote it, or that it was not recorded). Up/Down move
+ * between items; Enter shows the item in the text; A accepts and R rejects
+ * the focused suggestion. "Next change" walks the marks in the text itself.
+ *
+ * MENTIONS. `@` in a comment offers colleagues; a mention is shown in the app
+ * and nothing is emailed or sent to anyone (Quinn, Q7).
+ *
+ * Presentational: every write is a callback, so the host decides the
+ * precondition (the version an accept asserts) and folds the result.
+ */
+import { useId, useLayoutEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+
+import { ActorIdentity, actorKindTitle } from '../ActorIdentity';
+import { describeChange, describeSuggestion, describeThread, quoted, who } from './describe';
+import type { CommentThread, RosterMember, SelectionAnchor, Suggestion, TrackActor, TrackComment } from './types';
+
+export interface ChangesRailProps {
+  /** e.g. "Blog". Used in headings and accessible names. */
+  fieldLabel: string;
+  suggestions: Suggestion[];
+  threads: CommentThread[];
+  currentActorSub: string | null;
+  /** May accept and reject: the field's edit right. */
+  canAccept: boolean;
+  /** May comment, reply and resolve. Default true (view-only included). */
+  canComment?: boolean;
+  activeId?: string | null;
+  /** Show an item in the text (select its mark). */
+  onFocusItem?: (id: string) => void;
+  onNextChange?: () => void;
+  onPrevChange?: () => void;
+
+  onAccept?: (ids: string[]) => Promise<unknown>;
+  onReject?: (ids: string[]) => Promise<unknown>;
+  onWithdraw?: (id: string) => Promise<unknown>;
+  /** A new thread: on `selection` when one is given, else on the field. */
+  onComment?: (body: string, mentions: string[], selection: SelectionAnchor | null) => Promise<unknown>;
+  onReply?: (threadId: string, body: string, mentions: string[]) => Promise<unknown>;
+  onResolve?: (threadId: string) => Promise<unknown>;
+  onReopen?: (threadId: string) => Promise<unknown>;
+
+  /** The text selected in the editor or the Read view, for a span comment. */
+  selection?: SelectionAnchor | null;
+  /** Colleagues for @mentions (see useTrackChanges `mentionable`). */
+  mentionable?: RosterMember[];
+  /** Why the colleague list could not be read, if it could not. */
+  mentionNotice?: string | null;
+  className?: string;
+}
+
+function kindWords(a: TrackActor | null | undefined): string {
+  if (!a || a.kind === 'unknown') return 'Whether a person or a machine wrote it was not recorded.';
+  return a.kind === 'machine' ? 'Written by a machine.' : 'Written by a person.';
+}
+
+function Author({ actor }: { actor: TrackActor }) {
+  return (
+    <ActorIdentity
+      actor={{ id: actor.sub, name: actor.label || actor.sub || 'Unknown' }}
+      kind={actor.kind}
+      kindSource={actor.kindSource}
+      showInitials={false}
+    />
+  );
+}
+
+const btn =
+  'rounded border border-border px-2 py-0.5 text-xs font-medium transition-colors hover:bg-muted ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
+const primaryBtn =
+  'rounded bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90 ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
+
+type Item = { kind: 'suggestion'; s: Suggestion; at: number } | { kind: 'thread'; t: CommentThread; at: number };
+
+export function ChangesRail(props: ChangesRailProps) {
+  const {
+    fieldLabel,
+    suggestions,
+    threads,
+    currentActorSub,
+    canAccept,
+    canComment = true,
+    activeId,
+    onFocusItem,
+    onNextChange,
+    onPrevChange,
+    onAccept,
+    onReject,
+    onWithdraw,
+    onComment,
+    selection = null,
+    mentionable = [],
+    mentionNotice,
+    className,
+  } = props;
+
+  const [busy, setBusy] = useState<string | null>(null);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const listRef = useRef<HTMLOListElement>(null);
+
+  const open = useMemo(() => {
+    const items: Item[] = [];
+    for (const s of suggestions) {
+      if (s.status === 'open' && s.anchorState !== 'orphaned') items.push({ kind: 'suggestion', s, at: s.from });
+    }
+    for (const t of threads) {
+      if (!t.resolved && t.anchorState !== 'orphaned') items.push({ kind: 'thread', t, at: t.from ?? -1 });
+    }
+    return items.sort((a, b) => a.at - b.at);
+  }, [suggestions, threads]);
+  const orphanedSuggestions = suggestions.filter((s) => s.status === 'open' && s.anchorState === 'orphaned');
+  const orphanedThreads = threads.filter((t) => !t.resolved && t.anchorState === 'orphaned');
+  const resolved = threads.filter((t) => t.resolved);
+  const openSuggestionIds = open.flatMap((i) => (i.kind === 'suggestion' ? [i.s.id] : []));
+
+  /** Resolves true when the write landed, false when it failed (and says why). */
+  async function run(key: string, fn: () => Promise<unknown>): Promise<boolean> {
+    setBusy(key);
+    setErrors((e) => {
+      const { [key]: _drop, ...rest } = e;
+      return rest;
+    });
+    try {
+      await fn();
+      return true;
+    } catch (err) {
+      setErrors((e) => ({ ...e, [key]: err instanceof Error ? err.message : 'That did not work.' }));
+      return false;
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  function moveFocus(from: HTMLElement, delta: 1 | -1) {
+    const items = Array.from(listRef.current?.querySelectorAll<HTMLElement>('[data-rail-item]') ?? []);
+    const i = items.indexOf(from);
+    items[Math.max(0, Math.min(items.length - 1, i + delta))]?.focus();
+  }
+
+  function onItemKey(e: KeyboardEvent<HTMLElement>, item: Item) {
+    if (e.target !== e.currentTarget) return; // a button or a reply box inside
+    const id = item.kind === 'suggestion' ? item.s.id : item.t.id;
+    if (e.key === 'ArrowDown') moveFocus(e.currentTarget, 1);
+    else if (e.key === 'ArrowUp') moveFocus(e.currentTarget, -1);
+    else if (e.key === 'Enter') onFocusItem?.(id);
+    else if (item.kind === 'suggestion' && canAccept && (e.key === 'a' || e.key === 'A') && onAccept)
+      void run(id, () => onAccept([id]));
+    else if (item.kind === 'suggestion' && canAccept && (e.key === 'r' || e.key === 'R') && onReject)
+      void run(id, () => onReject([id]));
+    else return;
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  const nSugg = openSuggestionIds.length;
+  const nThreads = open.length - nSugg;
+
+  return (
+    <section
+      aria-label={`Suggestions and comments on ${fieldLabel}`}
+      data-testid="changes-rail"
+      className={['@container flex flex-col gap-3 text-sm', className].filter(Boolean).join(' ')}
+    >
+      <header className="flex flex-col gap-2 @xs:flex-row @xs:flex-wrap @xs:items-center @xs:justify-between">
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          {nSugg} {nSugg === 1 ? 'suggestion' : 'suggestions'} · {nThreads} {nThreads === 1 ? 'comment' : 'comments'}
+        </h3>
+        <div className="flex flex-wrap gap-1">
+          {onPrevChange && (
+            <button type="button" className={btn} onClick={onPrevChange} title="Shift+F8 in the text">
+              Previous
+            </button>
+          )}
+          {onNextChange && (
+            <button type="button" className={btn} onClick={onNextChange} title="F8 in the text">
+              Next change
+            </button>
+          )}
+          {canAccept && nSugg > 1 && onAccept && (
+            <button
+              type="button"
+              className={btn}
+              disabled={busy !== null}
+              onClick={() => void run('all', () => onAccept(openSuggestionIds))}
+            >
+              Accept all
+            </button>
+          )}
+          {canAccept && nSugg > 1 && onReject && (
+            <button
+              type="button"
+              className={btn}
+              disabled={busy !== null}
+              onClick={() => void run('all', () => onReject(openSuggestionIds))}
+            >
+              Reject all
+            </button>
+          )}
+        </div>
+      </header>
+      {errors.all && (
+        <p role="alert" className="text-xs text-destructive">
+          {errors.all}
+        </p>
+      )}
+
+      {open.length === 0 ? (
+        <p className="text-xs text-muted-foreground">No open suggestions or comments on {fieldLabel}.</p>
+      ) : (
+        <ol ref={listRef} className="flex flex-col gap-2" aria-label="Open suggestions and comments, in document order">
+          {open.map((item) => {
+            const id = item.kind === 'suggestion' ? item.s.id : item.t.id;
+            const active = activeId === id;
+            const label =
+              item.kind === 'suggestion'
+                ? `${describeSuggestion(item.s)}. ${kindWords(item.s.author)}`
+                : `${describeThread(item.t)}. ${kindWords(item.t.comments[0]?.author)}`;
+            return (
+              <li
+                key={id}
+                data-rail-item=""
+                data-item-id={id}
+                tabIndex={0}
+                aria-label={label}
+                aria-current={active ? 'true' : undefined}
+                onKeyDown={(e) => onItemKey(e, item)}
+                onFocus={(e) => {
+                  if (e.target === e.currentTarget) onFocusItem?.(id);
+                }}
+                className={[
+                  'rounded-md border p-2 outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  active ? 'border-primary bg-primary/5' : 'border-border bg-card',
+                ].join(' ')}
+              >
+                {item.kind === 'suggestion' ? (
+                  <SuggestionCard
+                    s={item.s}
+                    own={!!currentActorSub && item.s.author.sub === currentActorSub}
+                    canAccept={canAccept}
+                    busy={busy !== null}
+                    error={errors[id]}
+                    onAccept={onAccept && (() => run(id, () => onAccept([id])))}
+                    onReject={onReject && (() => run(id, () => onReject([id])))}
+                    onWithdraw={onWithdraw && (() => run(id, () => onWithdraw(id)))}
+                  />
+                ) : (
+                  <ThreadCard
+                    t={item.t}
+                    canComment={canComment}
+                    busy={busy !== null}
+                    error={errors[id]}
+                    mentionable={mentionable}
+                    run={(fn) => run(id, fn)}
+                    onReply={props.onReply}
+                  onResolve={props.onResolve}
+                  onReopen={props.onReopen}
+                  />
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      )}
+
+      {canComment && onComment && (
+        <NewComment
+          fieldLabel={fieldLabel}
+          selection={selection}
+          mentionable={mentionable}
+          mentionNotice={mentionNotice}
+          busy={busy !== null}
+          error={errors.new}
+          onSubmit={(body, mentions) => run('new', () => onComment(body, mentions, selection))}
+        />
+      )}
+
+      {(orphanedSuggestions.length > 0 || orphanedThreads.length > 0) && (
+        <details className="rounded-md border border-dashed border-border p-2">
+          <summary className="cursor-pointer text-xs font-medium text-muted-foreground">
+            Orphaned ({orphanedSuggestions.length + orphanedThreads.length}): the text they were made on is gone
+          </summary>
+          <ul className="mt-2 flex flex-col gap-2">
+            {orphanedSuggestions.map((s) => (
+              <li key={s.id} className="text-xs">
+                <Author actor={s.author} /> suggested: {describeChange(s.quote, s.replacement)}
+                {currentActorSub && s.author.sub === currentActorSub && onWithdraw && (
+                  <button type="button" className={`${btn} ml-2`} onClick={() => void run(s.id, () => onWithdraw(s.id))}>
+                    Withdraw
+                  </button>
+                )}
+                {errors[s.id] && <span className="block text-destructive">{errors[s.id]}</span>}
+              </li>
+            ))}
+            {orphanedThreads.map((t) => (
+              <li key={t.id} className="text-xs">
+                <ThreadCard
+                  t={t}
+                  canComment={canComment}
+                  busy={busy !== null}
+                  error={errors[t.id]}
+                  mentionable={mentionable}
+                  run={(fn) => run(t.id, fn)}
+                  onReply={props.onReply}
+                  onResolve={props.onResolve}
+                  onReopen={props.onReopen}
+                />
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
+
+      {resolved.length > 0 && (
+        <details className="rounded-md border border-border p-2">
+          <summary className="cursor-pointer text-xs font-medium text-muted-foreground">Resolved ({resolved.length})</summary>
+          <ul className="mt-2 flex flex-col gap-2">
+            {resolved.map((t) => (
+              <li key={t.id} className="text-xs" aria-label={`Resolved: ${describeThread(t)}`}>
+                <ThreadCard
+                  t={t}
+                  canComment={canComment}
+                  busy={busy !== null}
+                  error={errors[t.id]}
+                  mentionable={mentionable}
+                  run={(fn) => run(t.id, fn)}
+                  onReply={props.onReply}
+                  onResolve={props.onResolve}
+                  onReopen={props.onReopen}
+                />
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
+    </section>
+  );
+}
+
+function SuggestionCard({
+  s,
+  own,
+  canAccept,
+  busy,
+  error,
+  onAccept,
+  onReject,
+  onWithdraw,
+}: {
+  s: Suggestion;
+  own: boolean;
+  canAccept: boolean;
+  busy: boolean;
+  error?: string;
+  onAccept?: () => void;
+  onReject?: () => void;
+  onWithdraw?: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5" data-testid="rail-suggestion">
+      <div className="flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+        <Author actor={s.author} />
+        <span>suggests</span>
+        {s.anchorState === 'reanchored' && <span>(the text around it changed)</span>}
+      </div>
+      <p className="break-words text-xs">
+        {s.quote && <del className="bg-red-500/10 text-red-700 dark:text-red-300">{s.quote}</del>}
+        {s.quote && s.replacement && ' → '}
+        {s.replacement && <ins className="bg-green-600/10 text-green-700 no-underline dark:text-green-300">{s.replacement}</ins>}
+      </p>
+      <div className="flex flex-wrap gap-1">
+        {canAccept && onAccept && (
+          <button type="button" className={primaryBtn} disabled={busy} onClick={onAccept} aria-keyshortcuts="A">
+            Accept
+          </button>
+        )}
+        {canAccept && onReject && (
+          <button type="button" className={btn} disabled={busy} onClick={onReject} aria-keyshortcuts="R">
+            Reject
+          </button>
+        )}
+        {own && onWithdraw && (
+          <button type="button" className={btn} disabled={busy} onClick={onWithdraw}>
+            Withdraw
+          </button>
+        )}
+      </div>
+      {error && (
+        <p role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function CommentBody({ c, mentionable }: { c: TrackComment; mentionable: RosterMember[] }) {
+  if (c.deleted || c.body == null) return <p className="text-xs italic text-muted-foreground">Comment deleted.</p>;
+  const names = c.mentions.map((sub) => mentionable.find((m) => m.sub === sub)?.label || sub);
+  return (
+    <div className="flex flex-col gap-0.5">
+      <p className="whitespace-pre-wrap break-words text-xs text-foreground">{c.body}</p>
+      {names.length > 0 && (
+        <p className="text-[11px] text-muted-foreground">Mentioned: {names.map((n) => `@${n}`).join(', ')}</p>
+      )}
+    </div>
+  );
+}
+
+function ThreadCard({
+  t,
+  canComment,
+  busy,
+  error,
+  mentionable,
+  run,
+  onReply,
+  onResolve,
+  onReopen,
+}: {
+  t: CommentThread;
+  canComment: boolean;
+  busy: boolean;
+  error?: string;
+  mentionable: RosterMember[];
+  run: (fn: () => Promise<unknown>) => Promise<boolean>;
+} & Pick<ChangesRailProps, 'onReply' | 'onResolve' | 'onReopen'>) {
+  const [replying, setReplying] = useState(false);
+  return (
+    <div className="flex flex-col gap-1.5" data-testid="rail-thread">
+      {t.quote ? (
+        <p className="text-xs text-muted-foreground">
+          On <mark className="bg-yellow-400/30 text-inherit">{quoted(t.quote)}</mark>
+        </p>
+      ) : (
+        <p className="text-xs text-muted-foreground">{t.field ? 'On the whole field' : 'On the whole record'}</p>
+      )}
+      <ol className="flex flex-col gap-1.5">
+        {t.comments.map((c) => (
+          <li key={c.id} className="flex flex-col gap-0.5" title={actorKindTitle(c.author.kind, c.author.kindSource)}>
+            <Author actor={c.author} />
+            <CommentBody c={c} mentionable={mentionable} />
+          </li>
+        ))}
+      </ol>
+      {t.resolved && t.resolution && (
+        <p className="text-[11px] text-muted-foreground">Resolved by {who(t.resolution.by)}</p>
+      )}
+      {canComment && (
+        <div className="flex flex-wrap gap-1">
+          {!t.resolved && onReply && !replying && (
+            <button type="button" className={btn} disabled={busy} onClick={() => setReplying(true)}>
+              Reply
+            </button>
+          )}
+          {!t.resolved && onResolve && (
+            <button type="button" className={btn} disabled={busy} onClick={() => void run(() => onResolve(t.id))}>
+              Resolve
+            </button>
+          )}
+          {t.resolved && onReopen && (
+            <button type="button" className={btn} disabled={busy} onClick={() => void run(() => onReopen(t.id))}>
+              Reopen
+            </button>
+          )}
+        </div>
+      )}
+      {replying && onReply && (
+        <Composer
+          label="Reply"
+          submitLabel="Reply"
+          mentionable={mentionable}
+          busy={busy}
+          autoFocus
+          onCancel={() => setReplying(false)}
+          onSubmit={async (body, mentions) => {
+            const ok = await run(() => onReply(t.id, body, mentions));
+            if (ok) setReplying(false);
+            return ok;
+          }}
+        />
+      )}
+      {error && (
+        <p role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function NewComment({
+  fieldLabel,
+  selection,
+  mentionable,
+  mentionNotice,
+  busy,
+  error,
+  onSubmit,
+}: {
+  fieldLabel: string;
+  selection: SelectionAnchor | null;
+  mentionable: RosterMember[];
+  mentionNotice?: string | null;
+  busy: boolean;
+  error?: string;
+  onSubmit: (body: string, mentions: string[]) => Promise<boolean>;
+}) {
+  const on = selection && selection.to > selection.from ? selection : null;
+  return (
+    <div className="flex flex-col gap-1 rounded-md border border-border p-2" data-testid="new-comment">
+      <p className="text-xs text-muted-foreground">
+        {on ? (
+          <>
+            Comment on <mark className="bg-yellow-400/30 text-inherit">{quoted(on.quote)}</mark>
+          </>
+        ) : (
+          `Comment on ${fieldLabel} (select text first to comment on a passage)`
+        )}
+      </p>
+      <Composer label={`New comment on ${fieldLabel}`} submitLabel="Comment" mentionable={mentionable} busy={busy} onSubmit={onSubmit} />
+      {mentionNotice && <p className="text-[11px] text-muted-foreground">{mentionNotice}</p>}
+      <p className="text-[11px] text-muted-foreground">Type @ to mention a colleague. Mentions show here only; nobody is emailed.</p>
+      {error && (
+        <p role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/** The @query being typed just before the caret, or null. */
+export function mentionQuery(text: string, caret: number): { start: number; query: string } | null {
+  const m = /(^|\s)@([^\s@]*)$/.exec(text.slice(0, caret));
+  if (!m) return null;
+  return { start: caret - m[2].length - 1, query: m[2] };
+}
+
+/** The subs a body still mentions: picked, and their `@label` still present. */
+export function mentionsIn(body: string, picked: RosterMember[]): string[] {
+  const out: string[] = [];
+  for (const m of picked) {
+    const tag = `@${m.label || m.sub}`;
+    if (body.includes(tag) && !out.includes(m.sub)) out.push(m.sub);
+  }
+  return out;
+}
+
+function Composer({
+  label,
+  submitLabel,
+  mentionable,
+  busy,
+  autoFocus,
+  onSubmit,
+  onCancel,
+}: {
+  label: string;
+  submitLabel: string;
+  mentionable: RosterMember[];
+  busy: boolean;
+  autoFocus?: boolean;
+  /** Resolves false when the write failed: the text is kept. */
+  onSubmit: (body: string, mentions: string[]) => Promise<boolean>;
+  onCancel?: () => void;
+}): ReactNode {
+  const [body, setBody] = useState('');
+  const [picked, setPicked] = useState<RosterMember[]>([]);
+  const [q, setQ] = useState<{ start: number; query: string } | null>(null);
+  const [hi, setHi] = useState(0);
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const listId = `mention-${useId()}`;
+  // Where the caret goes after a picked mention. Applied in a LAYOUT effect,
+  // i.e. synchronously after React writes the new value and before the
+  // browser can deliver another keystroke. A requestAnimationFrame here let a
+  // fast typist's next characters land at the end of the text and then jump
+  // (caught on the deployed gate: "...nly).(sandbox o").
+  const caretRef = useRef<number | null>(null);
+  useLayoutEffect(() => {
+    const at = caretRef.current;
+    const el = ref.current;
+    if (at == null || !el) return;
+    caretRef.current = null;
+    el.focus();
+    el.setSelectionRange(at, at);
+  }, [body]);
+
+  const matches = useMemo(() => {
+    if (!q) return [];
+    const needle = q.query.toLowerCase();
+    return mentionable.filter((m) => (m.label || m.sub).toLowerCase().includes(needle)).slice(0, 8);
+  }, [q, mentionable]);
+
+  const choose = (m: RosterMember) => {
+    if (!q) return;
+    const el = ref.current;
+    const caret = el?.selectionStart ?? body.length;
+    const tag = `@${m.label || m.sub} `;
+    const next = body.slice(0, q.start) + tag + body.slice(caret);
+    setBody(next);
+    setPicked((p) => (p.some((x) => x.sub === m.sub) ? p : [...p, m]));
+    setQ(null);
+    caretRef.current = q.start + tag.length;
+  };
+
+  const submit = async () => {
+    const text = body.trim();
+    if (!text) return;
+    if (!(await onSubmit(text, mentionsIn(text, picked)))) return;
+    setBody('');
+    setPicked([]);
+  };
+
+  return (
+    <div className="relative flex flex-col gap-1">
+      <textarea
+        ref={ref}
+        aria-label={label}
+        value={body}
+        rows={2}
+        autoFocus={autoFocus}
+        role="combobox"
+        aria-autocomplete="list"
+        aria-expanded={matches.length > 0}
+        aria-controls={listId}
+        className="w-full resize-y rounded-md border border-input bg-background p-2 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onChange={(e) => {
+          setBody(e.target.value);
+          setQ(mentionQuery(e.target.value, e.target.selectionStart ?? e.target.value.length));
+          setHi(0);
+        }}
+        onKeyDown={(e) => {
+          if (matches.length > 0) {
+            if (e.key === 'ArrowDown') setHi((h) => (h + 1) % matches.length);
+            else if (e.key === 'ArrowUp') setHi((h) => (h - 1 + matches.length) % matches.length);
+            else if (e.key === 'Enter' || e.key === 'Tab') choose(matches[hi]);
+            else if (e.key === 'Escape') setQ(null);
+            else return;
+            e.preventDefault();
+            return;
+          }
+          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            void submit();
+          }
+          if (e.key === 'Escape' && onCancel) onCancel();
+          e.stopPropagation();
+        }}
+      />
+      {matches.length > 0 && (
+        <ul id={listId} role="listbox" aria-label="Colleagues" className="absolute top-full z-10 mt-1 w-full rounded-md border border-border bg-popover p-1 text-xs shadow-md">
+          {matches.map((m, i) => (
+            <li
+              key={m.sub}
+              role="option"
+              aria-selected={i === hi}
+              className={`cursor-pointer rounded px-2 py-1 ${i === hi ? 'bg-muted' : ''}`}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                choose(m);
+              }}
+            >
+              {m.label || m.sub}
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="flex gap-1">
+        <button type="button" className={primaryBtn} disabled={busy || !body.trim()} onClick={() => void submit()}>
+          {submitLabel}
+        </button>
+        {onCancel && (
+          <button type="button" className={btn} onClick={onCancel}>
+            Cancel
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}