@cueloop/client 0.1.0-alpha.70 → 0.1.0-alpha.72

package/src/components/AnnotationCards.tsx

@@ -1,18 +1,20 @@
 /**
  * The inline comment pieces every annotated surface renders: the composer (a
- * textarea in a card row), the "/" palette and inline completion hint below it,
- * the edge-segmented discussion card, and one comment row. The plan thread view
+ * textarea in a card row), the "/" actions-and-skills palette below it, the
+ * edge-segmented discussion card, and one comment row. The plan thread view
  * and the diff sheet both draw their comments with these, so a discussion looks
  * and behaves the same on prose and on code.
  */
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useLayoutEffect, useRef, useState } from "react";
 import type { BoxRenderable, KeyBinding, TextareaRenderable } from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import { lighten } from "../annotation-palette";
 import { useFrameMeasure } from "../use-frame-measure";
-import type { InlineSlash, SlashItem } from "../slash-palette";
+import { skillReferenceRanges, type SlashItem } from "../slash-palette";
+import { PaletteNamesContext } from "../skills";
+import { referenceStyleFor } from "./syntax-highlight";
 
 /* -------------------------------------------------------------- composer */
 
@@ -52,18 +54,32 @@ export function Composer({
   tokens: Theme;
   onSave: (body: string) => void;
   onReady: () => void;
-  onInput: (text: string) => void;
+  onInput: (text: string, caret: number) => void;
 }): React.ReactNode {
   const editorRef = useRef<TextareaRenderable | null>(null);
   const [rows, setRows] = useState(1);
+  // action and skill names whose "/name" references paint in the accent color
+  const referenceNames = useContext(PaletteNamesContext);
 
-  // once per mount (the composer is keyed by its seed): later re-renders
-  // must NOT reset the caret, or input lands before a just-typed newline
-  useEffect(() => {
+  const paintReferences = (editor: TextareaRenderable): void => {
+    const { styleId } = referenceStyleFor(tokens);
+
+    editor.editBuffer.clearAllHighlights();
+    for (const range of skillReferenceRanges(editor.plainText, referenceNames)) {
+      editor.editBuffer.addHighlightByCharRange({ ...range, styleId });
+    }
+  };
+
+  // synchronously at commit, before the next tty key is read: signalling readiness in a
+  // post-paint effect lets a fast burst race the mount, splitting input between the seed
+  // buffer and this textarea out of order (#365)
+  useLayoutEffect(() => {
     const editor = editorRef.current;
 
     if (!editor) return;
     editor.cursorOffset = seed.length;
+    editor.editBuffer.setSyntaxStyle(referenceStyleFor(tokens).style);
+    paintReferences(editor);
     setRows(composeRowCount(editor.plainText, editor.width));
     onReady();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -83,8 +99,9 @@ export function Composer({
           const editor = editorRef.current;
 
           if (!editor) return;
+          paintReferences(editor);
           setRows(composeRowCount(editor.plainText, editor.width));
-          onInput(editor.plainText);
+          onInput(editor.plainText, editor.cursorOffset);
         }}
         style={{
           height: rows,
@@ -139,40 +156,27 @@ function SlashList({
   );
 }
 
-/** Below the composer: the palette list for a leading "/", else the inline tab-hint, else nothing. */
+/** Below the composer: the actions/skills list while the caret is on a "/word", else nothing. */
 export function ComposerPalette({
   slashActive,
   slashItems,
   slashIndex,
-  inline,
   tokens,
 }: {
   slashActive: boolean;
   slashItems: SlashItem[];
   slashIndex: number;
-  inline: InlineSlash | null;
   tokens: Theme;
 }): React.ReactNode {
-  if (slashActive) {
-    return (
-      <box style={{ flexDirection: "column", marginLeft: 3 }}>
-        <SlashList
-          items={slashItems}
-          selected={Math.min(slashIndex, Math.max(0, slashItems.length - 1))}
-          tokens={tokens}
-        />
-      </box>
-    );
-  }
-  if (inline === null) return null;
+  if (!slashActive) return null;
 
   return (
-    <box style={{ flexDirection: "row", marginLeft: 3 }}>
-      <text>
-        <span fg={tokens.textDim}>{"⇥ "}</span>
-        <span fg={tokens.accent}>{`/${inline.suggestion.name}`}</span>
-        <span fg={tokens.textDim}>{`  ${inline.suggestion.description}`}</span>
-      </text>
+    <box style={{ flexDirection: "column", marginLeft: 3 }}>
+      <SlashList
+        items={slashItems}
+        selected={Math.min(slashIndex, Math.max(0, slashItems.length - 1))}
+        tokens={tokens}
+      />
     </box>
   );
 }

package/src/components/AppShell.tsx

@@ -37,6 +37,8 @@ export interface AppShellProps {
   projectMode: ProjectPanelMode;
   /** The Changes editor grid; rendered only when changesOpen. */
   changesPanel?: React.ReactNode;
+  /** The thread footer, shown beneath the Changes grid while the Thread pane is zoomed away. */
+  changesFooter?: React.ReactNode;
   projectPanel: React.ReactNode;
   /** Hide the Thread pane so Changes fills the middle (zoom); the sidebars stay. */
   zoomHideThread?: boolean;
@@ -90,6 +92,7 @@ export function AppShell({
   onToggleRight,
   projectMode,
   changesPanel,
+  changesFooter,
   projectPanel,
   zoomHideThread,
   footer,
@@ -227,7 +230,8 @@ export function AppShell({
                   borderColor: tokens.border,
                 }}
               >
-                {changesPanel}
+                <box style={{ flexGrow: 1, minHeight: 0 }}>{changesPanel}</box>
+                {zoomHideThread ? changesFooter : null}
               </box>
             ) : null}
             {projectOpen ? (

package/src/components/AppShell.zoom.test.tsx

@@ -80,6 +80,47 @@ describe("zoom icon in the shell", () => {
     }
   }
 
+  test("the footer rides the Changes pane only while the Thread pane is zoomed away", async () => {
+    async function footerVisible(zoomed: boolean): Promise<boolean> {
+      const setup = await testRender(
+        <AppShell
+          sidebarOpen={false}
+          onToggleSidebar={() => {}}
+          onOpenMenu={() => {}}
+          threadsPanel={<text>threads</text>}
+          threadTitle="thread"
+          threadPanel={<text>body</text>}
+          changesOpen
+          projectOpen
+          onToggleChanges={() => {}}
+          onToggleProject={() => {}}
+          onToggleRight={() => {}}
+          projectMode="changes"
+          zoomHideThread={zoomed}
+          projectPanel={<text>project</text>}
+          changesFooter={<text>send message</text>}
+          changesPanel={<text>diff</text>}
+        />,
+        { width: 160, height: 8 },
+      );
+
+      allowEventLoopUpdates();
+      await setup.waitForVisualIdle();
+      const shown = setup.captureCharFrame().includes("send message");
+
+      setup.renderer.destroy();
+
+      return shown;
+    }
+
+    // Act
+    const [zoomed, unzoomed] = await Promise.all([footerVisible(true), footerVisible(false)]);
+
+    // Assert - the Thread pane carries the footer normally, so it must not double up in Changes
+    expect(zoomed).toBe(true);
+    expect(unzoomed).toBe(false);
+  });
+
   test("the icon clears the Project border by its padding in both states", async () => {
     // Act
     const setupColumns = await Promise.all([

package/src/components/ThreadFooter.tsx

@@ -1,6 +1,6 @@
-// The thread's bottom band: a header-like bar shown only under the always-visible
-// thread column. It carries the repo/branch context on the left and a written,
-// clickable "Send message" control on the right.
+// The thread's bottom band: a header-like bar under the thread column, or the
+// Changes column when a zoom drops the thread column. It carries the repo/branch
+// context on the left and a written, clickable "Send message" control on the right.
 
 import React from "react";
 import { DARK, type Theme } from "../theme";

package/src/components/ThreadView.slash.test.tsx

@@ -1,15 +1,17 @@
-/** Inline skill completion in the composer (#25): the trailing "/word" token and its match. */
+/** The "/" palette in the composer: it reopens for each "/word" the caret writes, so skills chain. */
 
 import { describe, expect, test } from "bun:test";
 import React from "react";
+import type { RGBA } from "@opentui/core";
 import { testRender } from "@opentui/react/test-utils";
 import type { QuickAction } from "../config";
 import { settle, typeText } from "../test-support";
+import { DARK } from "../theme";
 import { buildDisplay, marksByDisplay } from "../view-plan";
 import { fixturePlanSession } from "./story-fixtures";
-import { inlineSlashToken, resolveInlineSuggestion, ThreadView } from "./ThreadView";
-import { slashItemsFrom, type SlashItem } from "../slash-palette";
-import { SlashSkillsContext } from "../skills";
+import { ThreadView } from "./ThreadView";
+import { mergeSlashItems, slashItemsFrom, type SlashItem } from "../slash-palette";
+import { PaletteNamesContext, SlashSkillsContext } from "../skills";
 
 const SKILLS: QuickAction[] = [
   { prompt: "typescript magician" },
@@ -19,95 +21,35 @@ const SKILLS: QuickAction[] = [
 
 const PLAN = "# Plan\n\nRefine the store before the rewrite lands.\n";
 
-async function mountComposer() {
-  const display = buildDisplay(PLAN, undefined);
-  const setup = await testRender(
-    <ThreadView
-      session={fixturePlanSession({
-        artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
-      })}
-      display={display}
-      marks={marksByDisplay([], display)}
-      quickActions={SKILLS}
-      observer={false}
-      onAnnotate={() => {}}
-      onReply={() => {}}
-      onUpdateAnnotation={() => {}}
-      onExit={() => {}}
-    />,
-    { width: 72, height: 20 },
-  );
+function colorToHex(color: RGBA): string {
+  const [red, green, blue] = color.toInts();
 
-  await settle(setup);
-  await settle(setup);
-
-  return setup;
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
 }
 
-describe("inlineSlashToken", () => {
-  test("finds the trailing slash token when text precedes it", () => {
-    expect(inlineSlashToken("please run /type")).toBe("/type");
-  });
-
-  test("ignores a draft that is itself a leading slash (that is the palette)", () => {
-    expect(inlineSlashToken("/type")).toBeNull();
-  });
-
-  test("is newline-safe: a token at the start of a later line still resolves", () => {
-    expect(inlineSlashToken("first line\n/impl")).toBe("/impl");
-  });
-
-  test("returns null when the trailing word is not a slash token", () => {
-    expect(inlineSlashToken("just some prose")).toBeNull();
-  });
-
-  test("a bare slash mid-sentence is a valid, empty-query token", () => {
-    expect(inlineSlashToken("run /")).toBe("/");
-  });
-});
-
-describe("resolveInlineSuggestion", () => {
-  test("offers the fuzzy closest skill for the trailing token", () => {
-    const inline = resolveInlineSuggestion(false, "run /type", slashItemsFrom(SKILLS));
-
-    expect(inline?.token).toBe("/type");
-    expect(inline?.suggestion.name).toBe("typescript-magician");
-  });
-
-  test("prefers a prefix match over a subsequence match", () => {
-    const inline = resolveInlineSuggestion(false, "run /impl", slashItemsFrom(SKILLS));
-
-    expect(inline?.suggestion.name).toBe("implement");
-  });
-
-  test("stays silent while the palette owns a leading slash", () => {
-    expect(resolveInlineSuggestion(true, "/type", slashItemsFrom(SKILLS))).toBeNull();
-  });
-
-  test("returns null when nothing matches the token", () => {
-    expect(resolveInlineSuggestion(false, "run /zzzz", slashItemsFrom(SKILLS))).toBeNull();
-  });
-});
-
-async function mountComposerWithSkills(skills: SlashItem[]) {
+/** Render a plan composer, wiring the palette names into context exactly as the app does. */
+async function mountComposerWithSkills(skills: SlashItem[] = [], width = 72) {
   const display = buildDisplay(PLAN, undefined);
+  const names = new Set(mergeSlashItems(slashItemsFrom(SKILLS), skills).map((item) => item.name));
   const setup = await testRender(
     <SlashSkillsContext.Provider value={skills}>
-      <ThreadView
-        session={fixturePlanSession({
-          artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
-        })}
-        display={display}
-        marks={marksByDisplay([], display)}
-        quickActions={SKILLS}
-        observer={false}
-        onAnnotate={() => {}}
-        onReply={() => {}}
-        onUpdateAnnotation={() => {}}
-        onExit={() => {}}
-      />
+      <PaletteNamesContext.Provider value={names}>
+        <ThreadView
+          session={fixturePlanSession({
+            artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+          })}
+          display={display}
+          marks={marksByDisplay([], display)}
+          quickActions={SKILLS}
+          observer={false}
+          onAnnotate={() => {}}
+          onReply={() => {}}
+          onUpdateAnnotation={() => {}}
+          onExit={() => {}}
+        />
+      </PaletteNamesContext.Provider>
     </SlashSkillsContext.Provider>,
-    { width: 72, height: 20 },
+    { width, height: 20 },
   );
 
   await settle(setup);
@@ -116,6 +58,8 @@ async function mountComposerWithSkills(skills: SlashItem[]) {
   return setup;
 }
 
+const mountComposer = () => mountComposerWithSkills();
+
 describe("skills in the palette", () => {
   test("a skill from context lists in the / palette and a pick inserts its /name", async () => {
     const setup = await mountComposerWithSkills([
@@ -132,27 +76,71 @@ describe("skills in the palette", () => {
   });
 });
 
-describe("inline completion in the composer", () => {
-  test("typing an inline slash shows the tab-hint, and tab completes to the full name", async () => {
-    // Arrange - open a composer and type text with a trailing slash token
+describe("the palette reopens per token and chains skills", () => {
+  test("a mid-sentence / opens the list, tab completes it, and a second / opens the list again", async () => {
     const setup = await mountComposer();
 
+    // a trailing "/type" opens the full list under the composer, closest skill first
     await typeText(setup, "run /type");
+    const firstList = setup.captureCharFrame();
+
+    expect(firstList).toContain("/typescript-magician");
+
+    // tab completes only that token, leaving the prose before it
+    setup.mockInput.pressKey("TAB");
+    await settle(setup);
+    const completed = setup.captureCharFrame();
 
-    // Assert - the hint offers the closest skill, marked with the tab glyph
-    const withHint = setup.captureCharFrame();
+    expect(completed).toContain("run /typescript-magician");
 
-    expect(withHint).toContain("⇥");
-    expect(withHint).toContain("/typescript-magician");
+    // a second "/" reopens the palette so another skill chains onto the draft
+    await typeText(setup, "/impl");
+    const secondList = setup.captureCharFrame();
+
+    expect(secondList).toContain("/implement");
 
-    // Act - tab completes the token
     setup.mockInput.pressKey("TAB");
     await settle(setup);
+    expect(setup.captureCharFrame()).toContain("run /typescript-magician /implement");
+  });
 
-    // Assert - the hint is gone and the composer now carries the full skill name
-    const completed = setup.captureCharFrame();
+  test("several skills picked on enter, with prose between, all persist in the draft", async () => {
+    const setup = await mountComposerWithSkills([], 120);
+
+    // pick the first skill, keep typing prose, pick the next, and so on
+    await typeText(setup, "start /type");
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+
+    await typeText(setup, "then run /impl");
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+
+    await typeText(setup, "and finally /write");
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+
+    // every pick landed as its full "/name", and the prose between them survived
+    expect(setup.captureCharFrame()).toContain(
+      "start /typescript-magician then run /implement and finally /write-discoverable-code",
+    );
+  });
+
+  test("a completed reference paints in the accent color", async () => {
+    const setup = await mountComposer();
+
+    await typeText(setup, "please /type");
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+
+    const accentText = setup
+      .captureSpans()
+      .lines.flatMap((line) => line.spans.filter((span) => colorToHex(span.fg) === DARK.accent))
+      .map((span) => span.text)
+      .join("");
 
-    expect(completed).not.toContain("⇥");
-    expect(completed).toContain("typescript-magician");
+    expect(accentText).toContain("/typescript-magician");
+    // the prose around the reference is not accented
+    expect(accentText).not.toContain("please");
   });
 });

package/src/components/ThreadView.tsx

@@ -28,7 +28,6 @@ import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
 import { useComponentTheme } from "./theme-context";
 
 export { lighten } from "../annotation-palette";
-export { inlineSlashToken, resolveInlineSuggestion } from "../slash-palette";
 
 /**
  * How a block's rows are painted: heading weight, muted kinds, the list or

package/src/components/syntax-highlight.ts

@@ -97,6 +97,29 @@ export function syntaxStyleFor(theme: Theme): SyntaxStyle {
   return style;
 }
 
+/** A one-group syntax style plus the styleId that paints a "/skill" reference in the accent color. */
+export interface ReferenceStyle {
+  style: SyntaxStyle;
+  styleId: number;
+}
+
+const referenceStyleCache = new WeakMap<Theme, ReferenceStyle>();
+
+export function referenceStyleFor(theme: Theme): ReferenceStyle {
+  const cached = referenceStyleCache.get(theme);
+
+  if (cached) return cached;
+  const entry: ReferenceStyle = {
+    style: SyntaxStyle.fromStyles({ reference: { fg: theme.accent } }),
+    styleId: 0,
+  };
+
+  entry.styleId = entry.style.getStyleId("reference") ?? 0;
+  referenceStyleCache.set(theme, entry);
+
+  return entry;
+}
+
 /** The foreground for a tree-sitter capture group; undefined when unstyled. */
 export function colorForSyntaxGroup(group: string, theme: Theme): string | undefined {
   const styles = syntaxGroupStyles(theme);

package/src/mark-runs.ts

@@ -111,10 +111,11 @@ export function lineMarkRanges(ranges: MarkRange[], line: VisualLine): MarkRange
     .filter((range) => range.end > range.start);
 }
 
-/** A printable character: single-width input that should reach a composer. */
+/** Printable input that should reach a composer: one key, or a whole pasted run in one event. */
 export function printableSequence(key: KeyEvent): string | null {
-  const printable =
-    key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ";
+  if (!key.sequence || key.ctrl || key.meta) return null;
+  // reject any run carrying a control byte, so escape sequences and \r\t\b never seed a draft
+  for (const character of key.sequence) if (character < " ") return null;
 
-  return printable ? key.sequence : null;
+  return key.sequence.length > 0 ? key.sequence : null;
 }

package/src/skills.ts

@@ -66,3 +66,10 @@ export function loadSkills(dir: string): SlashItem[] {
 
 /** Skills reach the composer palette through context, so no surface needs a new prop to list them. */
 export const SlashSkillsContext = createContext<SlashItem[]>([]);
+
+/**
+ * The action and skill names every composer paints as "/name" references. Held in
+ * context so each surface - the plan thread, the diff sheet, the prototype - reads
+ * the same palette without threading a prop.
+ */
+export const PaletteNamesContext = createContext<ReadonlySet<string>>(new Set());

package/src/slash-palette.test.ts

@@ -1,5 +1,11 @@
 import { describe, expect, test } from "bun:test";
-import { inlineSlashToken, scoreMatch, slashFilter, type SlashItem } from "./slash-palette";
+import {
+  activeSlashToken,
+  isStandaloneSlashQuery,
+  scoreMatch,
+  slashFilter,
+  type SlashItem,
+} from "./slash-palette";
 
 function item(name: string): SlashItem {
   return { name, description: name, body: name };
@@ -46,9 +52,35 @@ describe("slashFilter", () => {
   });
 });
 
-describe("inlineSlashToken", () => {
-  test("finds a trailing /word only when text precedes it", () => {
-    expect(inlineSlashToken("use /vitest-patt")).toBe("/vitest-patt");
-    expect(inlineSlashToken("/vitest-patt")).toBeNull();
+describe("activeSlashToken", () => {
+  const atEnd = (text: string) => activeSlashToken(text, text.length);
+
+  test("finds the caret's /word at the start or after a space, so each new / reopens the palette", () => {
+    expect(atEnd("/vitest-patt")).toBe("/vitest-patt");
+    expect(atEnd("use /vitest-patt")).toBe("/vitest-patt");
+    expect(atEnd("/zoom-out hello world /")).toBe("/");
+    // an underscore is a valid skill-name character, so the token spans it
+    expect(atEnd("run /my_skill")).toBe("/my_skill");
+  });
+
+  test("closes on the space that ends the token, and ignores prose", () => {
+    expect(atEnd("/zoom-out ")).toBeNull();
+    expect(atEnd("just some prose")).toBeNull();
+  });
+
+  test("tracks the caret, not the string end: a slash mid-draft is the active token", () => {
+    // caret sits right after "/imp" in "/imp done", ignoring the trailing text
+    expect(activeSlashToken("/imp done", 4)).toBe("/imp");
+    // caret inside plain prose, even with a later slash token, has no active token
+    expect(activeSlashToken("plain text /later", 5)).toBeNull();
+  });
+});
+
+describe("isStandaloneSlashQuery", () => {
+  test("true only when the whole draft is a bare /query, so prose ending in /name still saves", () => {
+    expect(isStandaloneSlashQuery("/lgtm")).toBe(true);
+    expect(isStandaloneSlashQuery("  /lgtm  ")).toBe(true);
+    expect(isStandaloneSlashQuery("please inspect /tmp")).toBe(false);
+    expect(isStandaloneSlashQuery("just prose")).toBe(false);
   });
 });

package/src/slash-palette.ts

@@ -64,36 +64,50 @@ export function slashFilter(items: SlashItem[], query: string): SlashItem[] {
   return scored.toSorted((left, right) => right.score - left.score).map((entry) => entry.item);
 }
 
+// a skill or action name: the grammar loadSkills and slashItemsFrom can produce, so a "/name"
+// token closes only on whitespace or another slash, never inside a valid underscore-or-hyphen name
+const SLASH_TOKEN = /(?:^|\s)(\/[a-zA-Z0-9_-]*)$/;
+
 /**
- * A skill invoked mid-sentence: the trailing "/word" token when text already
- * precedes it (a draft that starts with "/" is the palette, not an inline
- * completion). Newline-safe, since the token may sit at the start of a new line.
+ * The "/word" token the caret is writing right now: the run from the last
+ * whitespace up to the caret, at the start of the draft or after it. Null once a
+ * space closes the token, so each new "/" reopens the palette and skills chain.
+ * Caret-aware, so editing an earlier "/name" targets it, not a trailing token.
  */
-export function inlineSlashToken(text: string): string | null {
-  if (text.startsWith("/")) return null;
-  const match = /(?:^|\s)(\/[a-zA-Z0-9-]*)$/.exec(text);
+export function activeSlashToken(text: string, caret: number): string | null {
+  const head = text.slice(0, Math.max(0, Math.min(caret, text.length)));
+  const match = SLASH_TOKEN.exec(head);
 
   return match ? match[1]! : null;
 }
 
-export interface InlineSlash {
-  token: string;
-  suggestion: SlashItem;
+/** True while the whole draft is just a "/query" - the palette owns it, so a blur discards it. */
+export function isStandaloneSlashQuery(text: string): boolean {
+  return /^\/\S*$/.test(text.trim());
 }
 
-/** The inline completion state: the trailing "/word" and its closest item, or null. */
-export function resolveInlineSuggestion(
-  slashActive: boolean,
+/**
+ * The character ranges of every completed "/name" in the draft that names a real
+ * action or skill, so a surface can paint the references. A half-typed "/na" is
+ * not a reference yet, so it stays unpainted until the palette completes it.
+ */
+export function skillReferenceRanges(
   text: string,
-  items: SlashItem[],
-): InlineSlash | null {
-  if (slashActive) return null;
-  const token = inlineSlashToken(text);
+  names: ReadonlySet<string>,
+): Array<{ start: number; end: number }> {
+  const ranges: Array<{ start: number; end: number }> = [];
+  const pattern = /(?:^|\s)(\/[a-zA-Z0-9_-]+)/g;
 
-  if (token === null) return null;
-  const suggestion = slashFilter(items, token.slice(1))[0];
+  for (let match = pattern.exec(text); match !== null; match = pattern.exec(text)) {
+    const token = match[1]!;
+
+    if (!names.has(token.slice(1))) continue;
+    const start = match.index + match[0].length - token.length;
+
+    ranges.push({ start, end: start + token.length });
+  }
 
-  return suggestion ? { token, suggestion } : null;
+  return ranges;
 }
 
 /** Quick actions and user skills in one palette; a quick action wins a name collision (it expands). */