@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/commitments/CommitmentList.tsx

@@ -0,0 +1,194 @@
+import { type ReactNode, useState } from "react";
+import { Check, Pencil, Trash2, X } from "lucide-react";
+import { Commitments, type CommitmentEntry } from "../../lib/api/commitments";
+import { RowMenu } from "../RowMenu";
+import { ConfirmDialog } from "../common/ConfirmDialog";
+import { SelectCheckbox } from "../common/SelectCheckbox";
+import { DropdownMenuItem, DropdownMenuSeparator } from "../ui/dropdown-menu";
+import { useToast } from "../Toast";
+import { CommitmentIcon, commitmentFace, commitmentTint, isOverdue } from "./commitmentState";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
+
+/**
+ * Left column: the promises, one compact row each — same shape as the task and
+ * routine lists, because these three screens sit next to each other in the rail
+ * and switching between them should not move anything.
+ *
+ * The counterparty is the row's title. "Who is waiting" is the whole reason
+ * this is not a task.
+ */
+export function CommitmentList({
+  commitments,
+  pid,
+  selectedId,
+  onSelect,
+  onEdit,
+  onChanged,
+  footer,
+  className,
+  checkedIds,
+  onToggleCheck,
+}: {
+  commitments: CommitmentEntry[];
+  pid: (c: CommitmentEntry) => string;
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onEdit: (c: CommitmentEntry) => void;
+  onChanged: () => void;
+  footer?: ReactNode;
+  /** Frame (width / borders) — the screen owns how the two panes sit. */
+  className?: string;
+  /** Multi-select: ids ticked for a bulk action (the screen owns the set). */
+  checkedIds?: Set<string>;
+  onToggleCheck?: (c: CommitmentEntry) => void;
+}) {
+  const toast = useToast();
+  // Row-menu verbs confirm through a dialog too — same rule as the detail pane.
+  const [confirm, setConfirm] = useState<{ kind: "kept" | "missed" | "dropped"; c: CommitmentEntry } | null>(null);
+  const selecting = !!onToggleCheck && (checkedIds?.size ?? 0) > 0;
+
+  const act = async (fn: () => Promise<unknown>, label: string) => {
+    try {
+      await fn();
+      toast.success(label);
+      onChanged();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t("common.error_generic"));
+    }
+  };
+
+  return (
+    <aside className={cn("flex min-h-0 flex-col", className)}>
+      <div className="shrink-0 px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-muted-fg">
+        {t("project.commitments.list_title")}
+      </div>
+      <ul className="min-h-0 flex-1 space-y-1 overflow-y-auto p-2 pt-0" data-testid="commitments-list">
+        {commitments.map((c) => {
+          const face = commitmentFace(c);
+          const active = c.id === selectedId;
+          const cPid = pid(c);
+          const due = c.due ? String(c.due).slice(0, 10) : null;
+          const project = (c as { project_name?: string }).project_name;
+          const checked = checkedIds?.has(c.id) ?? false;
+          return (
+            <li
+              key={`${cPid}-${c.id}`}
+              data-testid={`commitment-${c.id}`}
+              className={cn(
+                "group flex items-start gap-1 rounded-lg border transition-colors",
+                active
+                  ? "border-primary/50 bg-primary/10"
+                  : "border-transparent hover:border-border hover:bg-accent/40",
+              )}
+            >
+              {onToggleCheck && (
+                <div className={cn(
+                  "shrink-0 self-stretch pl-2 pt-2.5 transition-opacity",
+                  selecting || checked ? "opacity-100" : "opacity-0 focus-within:opacity-100 group-hover:opacity-100",
+                )}>
+                  <SelectCheckbox
+                    checked={checked}
+                    onToggle={() => onToggleCheck(c)}
+                    label={t("project.commitments.select_row", { who: c.counterparty })}
+                    testId={`commitment-check-${c.id}`}
+                  />
+                </div>
+              )}
+              <button
+                type="button"
+                onClick={() => onSelect(c.id)}
+                aria-current={active}
+                className={cn("min-w-0 flex-1 py-2 pr-2.5 text-left", onToggleCheck ? "pl-1.5" : "pl-2.5")}
+              >
+                <div className="flex items-center gap-2">
+                  <span className={cn("flex size-6 shrink-0 items-center justify-center rounded-md", commitmentTint(face))}>
+                    <CommitmentIcon face={face} className="size-3.5" />
+                  </span>
+                  <span className="min-w-0 flex-1 truncate text-sm font-medium">{c.counterparty}</span>
+                </div>
+                <div className="mt-1 flex items-center justify-between gap-2 pl-8 text-[10px] text-muted-fg">
+                  <span className="truncate">{project ? `${project.split("/").pop()} · ` : ""}{c.body}</span>
+                  {due && (
+                    <span className={cn("shrink-0", isOverdue(c) && cn("font-medium", toneText.red))}>⏱ {due}</span>
+                  )}
+                </div>
+              </button>
+
+              <div className="pr-1 pt-2">
+                <RowMenu label={t("project.commitments.row_actions")} testId={`commitment-menu-${c.id}`}>
+                  <DropdownMenuItem onClick={() => onEdit(c)} data-testid={`commitment-edit-${c.id}`}>
+                    <Pencil size={15} className="text-muted-fg" />
+                    {t("common.edit")}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  {c.state === "open" ? (
+                    <>
+                      <DropdownMenuItem
+                        data-testid={`commitment-kept-${c.id}`}
+                        onClick={() => setConfirm({ kind: "kept", c })}
+                      >
+                        <Check size={15} className={toneText.emerald} />
+                        {t("project.commitments.mark_kept")}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        data-testid={`commitment-missed-${c.id}`}
+                        onClick={() => setConfirm({ kind: "missed", c })}
+                      >
+                        <X size={15} className={toneText.red} />
+                        {t("project.commitments.mark_missed")}
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                    </>
+                  ) : null}
+                  {/* Filed by mistake — deliberately not the same verb as
+                      "missed", which says you failed a person who was waiting. */}
+                  <DropdownMenuItem
+                    variant="destructive"
+                    data-testid={`commitment-drop-${c.id}`}
+                    onClick={() => setConfirm({ kind: "dropped", c })}
+                  >
+                    <Trash2 size={15} />
+                    {t("project.commitments.mark_dropped")}
+                  </DropdownMenuItem>
+                </RowMenu>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+      {footer ? <div className="shrink-0 border-t border-border px-3 py-2">{footer}</div> : null}
+
+      <ConfirmDialog
+        open={confirm?.kind === "kept"}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => { if (confirm) return act(() => Commitments.kept(pid(confirm.c), confirm.c.id), t("project.commitments.mark_kept")); }}
+        destructive={false}
+        title={t("project.commitments.confirm_kept_title")}
+        description={confirm ? t("project.commitments.confirm_kept_desc", { who: confirm.c.counterparty }) : ""}
+        confirmLabel={t("project.commitments.mark_kept")}
+        testId="commitment-row-kept-confirm"
+      />
+      <ConfirmDialog
+        open={confirm?.kind === "missed"}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => { if (confirm) return act(() => Commitments.missed(pid(confirm.c), confirm.c.id), t("project.commitments.mark_missed")); }}
+        destructive={false}
+        title={t("project.commitments.confirm_missed_title")}
+        description={confirm ? t("project.commitments.confirm_missed_desc", { who: confirm.c.counterparty }) : ""}
+        confirmLabel={t("project.commitments.mark_missed")}
+        testId="commitment-row-missed-confirm"
+      />
+      <ConfirmDialog
+        open={confirm?.kind === "dropped"}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => { if (confirm) return act(() => Commitments.drop(pid(confirm.c), confirm.c.id), t("project.commitments.dropped_toast")); }}
+        title={t("project.commitments.confirm_dropped_title")}
+        description={confirm ? t("project.commitments.confirm_dropped_desc", { who: confirm.c.counterparty }) : ""}
+        confirmLabel={t("project.commitments.mark_dropped")}
+        testId="commitment-row-drop-confirm"
+      />
+    </aside>
+  );
+}

package/src/interfaces/web/src/components/commitments/commitmentState.tsx

@@ -0,0 +1,46 @@
+import { CheckCircle2, CircleDot, CircleSlash, XCircle, AlertCircle } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { toneText, toneTint } from "../../lib/tone";
+import type { CommitmentEntry, CommitmentState } from "../../lib/api/commitments";
+
+// How each commitment state looks, in one place — the same reasoning as
+// tasks/taskStatus.tsx. "overdue" is not a stored state but it is the one the
+// eye has to catch first, so it renders as its own face.
+type Face = { color: string; tint: string; Icon: typeof CircleDot };
+
+const FACE: Record<CommitmentState | "overdue", Face> = {
+  open:     { color: toneText.amber,          tint: toneTint.amber,      Icon: CircleDot },
+  overdue:  { color: toneText.red,            tint: toneTint.red,        Icon: AlertCircle },
+  kept:     { color: toneText.emerald,        tint: toneTint.emerald,    Icon: CheckCircle2 },
+  missed:   { color: toneText.red,            tint: toneTint.red,        Icon: XCircle },
+  dropped:  { color: "text-muted-foreground", tint: "bg-muted",          Icon: CircleSlash },
+};
+
+/** Background+foreground for the little square that carries the icon in lists. */
+export function commitmentTint(face: CommitmentState | "overdue"): string {
+  return FACE[face].tint;
+}
+
+/** Past its date and still owed. */
+export function isOverdue(c: Pick<CommitmentEntry, "state" | "due">): boolean {
+  return c.state === "open" && !!c.due && String(c.due) < new Date().toISOString();
+}
+
+export function commitmentFace(c: Pick<CommitmentEntry, "state" | "due">): CommitmentState | "overdue" {
+  return isOverdue(c) ? "overdue" : c.state;
+}
+
+export function CommitmentIcon({ face, className }: { face: CommitmentState | "overdue"; className?: string }) {
+  const f = FACE[face];
+  return <f.Icon className={cn("size-4", f.color, className)} />;
+}
+
+export function CommitmentBadge({ face }: { face: CommitmentState | "overdue" }) {
+  return (
+    <span className={cn("inline-flex items-center gap-1 rounded-md border border-current/30 px-1.5 py-0.5 text-[10px] font-medium", FACE[face].color)}>
+      <CommitmentIcon face={face} className="size-3" />
+      {t(`project.commitments.face.${face}` as never)}
+    </span>
+  );
+}

package/src/interfaces/web/src/components/common/BulkActionBar.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { Button } from "../ui";
+
+export type BulkAction = {
+  key: string;
+  label: string;
+  icon: ReactNode;
+  variant?: "primary" | "secondary" | "destructive" | "ghost";
+  onClick: () => void;
+  testId?: string;
+};
+
+/**
+ * Floating bar that rises from the bottom while a multi-select is running.
+ * Shared by every list screen — it only renders the count, the verbs it is
+ * handed, and a way out. It never mutates on its own: each verb opens a confirm
+ * dialog upstream.
+ */
+export function BulkActionBar({
+  count,
+  countLabel,
+  actions,
+  onClear,
+  clearLabel,
+  testId = "bulk-bar",
+}: {
+  count: number;
+  /** Already-interpolated "N selected" — the caller owns the noun's gender. */
+  countLabel: string;
+  actions: BulkAction[];
+  onClear: () => void;
+  clearLabel: string;
+  testId?: string;
+}) {
+  if (count === 0) return null;
+  return (
+    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-40 flex justify-center px-4">
+      <div
+        role="toolbar"
+        aria-label={countLabel}
+        data-testid={testId}
+        className="pointer-events-auto flex items-center gap-2 rounded-full border border-border bg-popover/95 py-2 pl-4 pr-2 shadow-lg backdrop-blur"
+      >
+        <span className="text-sm font-medium tabular-nums" data-testid={`${testId}-count`}>
+          {countLabel}
+        </span>
+        <span className="mx-1 h-5 w-px bg-border" />
+        {actions.map((a) => (
+          <Button key={a.key} size="sm" variant={a.variant ?? "secondary"} data-testid={a.testId} onClick={a.onClick}>
+            {a.icon} {a.label}
+          </Button>
+        ))}
+        <Button size="sm" variant="ghost" aria-label={clearLabel} data-testid={`${testId}-clear`} onClick={onClear}>
+          <X size={14} />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/common/ConfirmDialog.tsx

@@ -12,6 +12,7 @@ export function ConfirmDialog({
   description,
   confirmLabel,
   destructive = true,
+  testId,
 }: {
   open: boolean;
   onClose: () => void;
@@ -20,6 +21,8 @@ export function ConfirmDialog({
   description?: string;
   confirmLabel?: string;
   destructive?: boolean;
+  /** Put on the confirm button — the one a spec has to click. */
+  testId?: string;
 }) {
   const [busy, setBusy] = useState(false);
   const run = async () => {
@@ -39,7 +42,7 @@ export function ConfirmDialog({
       footer={
         <>
           <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
-          <Button variant={destructive ? "destructive" : "primary"} onClick={() => void run()} loading={busy}>
+          <Button variant={destructive ? "destructive" : "primary"} onClick={() => void run()} loading={busy} data-testid={testId}>
             {confirmLabel ?? t("common.confirm")}
           </Button>
         </>

package/src/interfaces/web/src/components/common/SelectCheckbox.tsx

@@ -0,0 +1,40 @@
+import { Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+/**
+ * The square multi-select toggle shared by every list screen (tasks,
+ * commitments, routines). One component so the look — and the dark-mode border,
+ * which is deliberately a notch lighter than a plain divider so an empty box is
+ * still findable — stays identical everywhere.
+ */
+export function SelectCheckbox({
+  checked,
+  onToggle,
+  label,
+  testId,
+}: {
+  checked: boolean;
+  onToggle: () => void;
+  /** aria-label — the row is not the checkbox, so it needs its own name. */
+  label: string;
+  testId?: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      aria-label={label}
+      data-testid={testId}
+      onClick={onToggle}
+      className={cn(
+        "flex size-4 items-center justify-center rounded border transition-colors",
+        checked
+          ? "border-primary bg-primary text-primary-foreground"
+          : "border-border hover:border-primary dark:border-muted-fg/50",
+      )}
+    >
+      {checked && <Check size={12} strokeWidth={3} />}
+    </button>
+  );
+}

package/src/interfaces/web/src/components/common/TabNav.tsx

@@ -74,7 +74,7 @@ export function TabNav({ sections, active, onChange, collapsed = false }: TabNav
       {sections.map((section, si) => (
         <div key={si} className={cn("w-full", si > 0 && "mt-2")}>
           {!collapsed && section.title && (
-            <p className="mb-1 px-2 text-[9px] font-semibold uppercase tracking-wider text-muted-fg/70">
+            <p className="mb-1 px-2 text-[9px] font-semibold uppercase tracking-wider text-muted-fg">
               {section.title}
             </p>
           )}

package/src/interfaces/web/src/components/cron/CronPicker.tsx

@@ -136,7 +136,7 @@ export function CronPicker({
                             // though none is individually ticked — show that
                             // rather than seven blank boxes.
                             ? "border-border bg-muted/40 text-muted-fg"
-                            : "border-border text-muted-fg/60 hover:bg-muted/40",
+                            : "border-border text-muted-fg hover:bg-muted/40",
                       )}
                     >
                       {t(`cron.day_short.${key}`)}

package/src/interfaces/web/src/components/files/FileBrowser.tsx

@@ -114,7 +114,7 @@ export function FileBrowser({
             <FileTree nodes={nodes} selectedPath={selected} onSelect={onSelect} onDelete={onDelete} />
           )}
           {tree.data?.truncated && (
-            <p className="px-2 py-1 text-[10px] text-muted-foreground/60">{t("files.truncated")}</p>
+            <p className="px-2 py-1 text-[10px] text-muted-foreground">{t("files.truncated")}</p>
           )}
         </div>
       </div>

package/src/interfaces/web/src/components/files/FileTree.tsx

@@ -4,13 +4,14 @@ import {
   FileText, FileCode, Image as ImageIcon, File, Trash2,
 } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { toneText } from "../../lib/tone";
 import type { FileNode, FileKind } from "../../types/daemon";
 
 function kindIcon(kind?: FileKind) {
   switch (kind) {
-    case "markdown": return { Icon: FileText, color: "text-sky-500" };
-    case "text": return { Icon: FileCode, color: "text-amber-500" };
-    case "image": return { Icon: ImageIcon, color: "text-pink-500" };
+    case "markdown": return { Icon: FileText, color: toneText.sky };
+    case "text": return { Icon: FileCode, color: toneText.amber };
+    case "image": return { Icon: ImageIcon, color: toneText.pink };
     default: return { Icon: File, color: "text-muted-foreground" };
   }
 }
@@ -110,7 +111,8 @@ export function FileTree({
   const toggle = (p: string) =>
     setExpanded((prev) => {
       const next = new Set(prev);
-      next.has(p) ? next.delete(p) : next.add(p);
+      if (next.has(p)) next.delete(p);
+      else next.add(p);
       return next;
     });
 

package/src/interfaces/web/src/components/files/FileViewer.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
-import { Save, RotateCcw, Pencil, Eye, Columns2, FileQuestion, Download } from "lucide-react";
+import { Save, RotateCcw, Pencil, Columns2, FileQuestion, Download } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Spinner } from "../ui";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 import type { FileContent } from "../../types/daemon";
 import { MarkdownPreview } from "./MarkdownPreview";
 import { MarkdownEditor } from "./MarkdownEditor";
@@ -32,7 +33,7 @@ function CodeView({ content }: { content: string }) {
         <tbody>
           {content.split("\n").map((line, i) => (
             <tr key={i} className="hover:bg-accent/20">
-              <td className="w-12 select-none border-r border-border/30 px-3 text-right align-top text-[10px] text-muted-foreground/40" aria-hidden="true">
+              <td className="w-12 select-none border-r border-border/30 px-3 text-right align-top text-[10px] text-muted-foreground" aria-hidden="true">
                 {i + 1}
               </td>
               <td className="whitespace-pre px-4 align-top text-foreground/90">{line || " "}</td>
@@ -67,12 +68,15 @@ export function FileViewer({
     setShowPreview(true);
   }, [file?.path, file?.content]);
 
+  // The testid rides every branch: an empty viewer is still the viewer, and
+  // "did the browser render?" is exactly the question asked before a file is
+  // picked.
   if (loading) {
-    return <div className="flex flex-1 items-center justify-center"><Spinner size={16} /></div>;
+    return <div className="flex flex-1 items-center justify-center" data-testid="file-viewer"><Spinner size={16} /></div>;
   }
   if (!file) {
     return (
-      <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+      <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground" data-testid="file-viewer">
         {t("files.select_prompt")}
       </div>
     );
@@ -99,7 +103,7 @@ export function FileViewer({
       <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
         <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-muted-foreground">
           {file.path}
-          {dirty && <span className="ml-1 text-amber-400">•</span>}
+          {dirty && <span className={`ml-1 ${toneText.amber}`}>•</span>}
         </span>
 
         {isMarkdown && editing && (

package/src/interfaces/web/src/components/files/MarkdownPreview.tsx

@@ -1,5 +1,6 @@
 import { Fragment, type ReactNode } from "react";
 import { cn } from "../../lib/cn";
+import { toneText, toneTextHover } from "../../lib/tone";
 
 // A small, dependency-free markdown renderer. We deliberately avoid
 // react-markdown/marked (no installers per project rules) and never use
@@ -8,11 +9,24 @@ import { cn } from "../../lib/cn";
 // headings, fenced/inline code, bold/italic/links, blockquotes, hr, and
 // ordered/unordered lists. Anything else renders as plain paragraphs.
 
-// ── Inline: bold, italic, code, links ──────────────────────────────────────
-function renderInline(text: string, keyBase: string): ReactNode[] {
+// A group @mention, styled as a soft neutral chip (not a loud colour) so it
+// reads as a handle in any theme. Exported so a literal (non-markdown) bubble —
+// the user's own — can highlight mentions the same way.
+export function MentionChip({ handle }: { handle: string }) {
+  return (
+    <span className="rounded bg-foreground/[0.07] px-1 font-medium text-foreground/90 dark:bg-foreground/10">
+      {handle}
+    </span>
+  );
+}
+
+// ── Inline: bold, italic, code, links, (optional) @mentions ─────────────────
+function renderInline(text: string, keyBase: string, mentions = false): ReactNode[] {
   const out: ReactNode[] = [];
   // One regex, alternation ordered so `**` beats `*`. Groups capture the inner.
-  const re = /(\*\*([^*]+)\*\*)|(\*([^*]+)\*)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)]+)\))/g;
+  // The trailing @mention group is only STYLED when `mentions` is on; otherwise
+  // it renders as the literal text, so ordinary markdown is unchanged.
+  const re = /(\*\*([^*]+)\*\*)|(\*([^*]+)\*)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)]+)\))|((?<![\w])@[\p{L}\p{N}_-]+)/gu;
   let last = 0;
   let m: RegExpExecArray | null;
   let i = 0;
@@ -24,10 +38,14 @@ function renderInline(text: string, keyBase: string): ReactNode[] {
       out.push(<code key={`${keyBase}-c${i}`} className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]">{m[6]}</code>);
     else if (m[8] !== undefined)
       out.push(
-        <a key={`${keyBase}-l${i}`} href={m[9]} target="_blank" rel="noreferrer" className="text-sky-500 underline underline-offset-2 hover:text-sky-400">
+        <a key={`${keyBase}-l${i}`} href={m[9]} target="_blank" rel="noreferrer" className={`underline underline-offset-2 ${toneText.sky} ${toneTextHover.sky}`}>
           {m[8]}
         </a>,
       );
+    else if (m[10] !== undefined)
+      out.push(mentions
+        ? <MentionChip key={`${keyBase}-m${i}`} handle={m[10]} />
+        : <Fragment key={`${keyBase}-m${i}`}>{m[10]}</Fragment>);
     last = re.lastIndex;
     i += 1;
   }
@@ -35,8 +53,26 @@ function renderInline(text: string, keyBase: string): ReactNode[] {
   return out;
 }
 
+// Highlight @mentions in a literal (non-markdown) string — the user's own
+// bubble, which stays verbatim so we don't run it through the markdown parser.
+export function renderMentions(text: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  const re = /(?<![\w])@[\p{L}\p{N}_-]+/gu;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  let i = 0;
+  while ((m = re.exec(text))) {
+    if (m.index > last) out.push(<Fragment key={`u-t${i}`}>{text.slice(last, m.index)}</Fragment>);
+    out.push(<MentionChip key={`u-m${i}`} handle={m[0]} />);
+    last = re.lastIndex;
+    i += 1;
+  }
+  if (last < text.length) out.push(<Fragment key="u-tend">{text.slice(last)}</Fragment>);
+  return out;
+}
+
 // ── Block-level ─────────────────────────────────────────────────────────────
-export function MarkdownPreview({ content, className }: { content: string; className?: string }) {
+export function MarkdownPreview({ content, className, mentions = false }: { content: string; className?: string; mentions?: boolean }) {
   const lines = content.replace(/\r\n/g, "\n").split("\n");
   const blocks: ReactNode[] = [];
   let i = 0;
@@ -47,7 +83,7 @@ export function MarkdownPreview({ content, className }: { content: string; class
     blocks.push(
       <Tag key={`k${key++}`} className={cn("my-2 space-y-1 pl-5", ordered ? "list-decimal" : "list-disc")}>
         {items.map((it, idx) => (
-          <li key={idx}>{renderInline(it, `li${key}-${idx}`)}</li>
+          <li key={idx}>{renderInline(it, `li${key}-${idx}`, mentions)}</li>
         ))}
       </Tag>,
     );
@@ -80,7 +116,7 @@ export function MarkdownPreview({ content, className }: { content: string; class
       const sizes = ["text-2xl", "text-xl", "text-lg", "text-base", "text-sm", "text-sm"];
       blocks.push(
         <div key={`k${key++}`} className={cn("mt-3 mb-1 font-semibold text-foreground", sizes[level - 1])}>
-          {renderInline(h[2], `h${key}`)}
+          {renderInline(h[2], `h${key}`, mentions)}
         </div>,
       );
       i += 1;
@@ -100,7 +136,7 @@ export function MarkdownPreview({ content, className }: { content: string; class
       while (i < lines.length && /^>\s?/.test(lines[i])) buf.push(lines[i++].replace(/^>\s?/, ""));
       blocks.push(
         <blockquote key={`k${key++}`} className="my-2 border-l-2 border-border pl-3 text-muted-foreground">
-          {renderInline(buf.join(" "), `q${key}`)}
+          {renderInline(buf.join(" "), `q${key}`, mentions)}
         </blockquote>,
       );
       continue;
@@ -137,7 +173,7 @@ export function MarkdownPreview({ content, className }: { content: string; class
     }
     blocks.push(
       <p key={`k${key++}`} className="my-2 leading-relaxed">
-        {renderInline(para.join(" "), `p${key}`)}
+        {renderInline(para.join(" "), `p${key}`, mentions)}
       </p>,
     );
   }