fix(web): support spaces in composer file mentions

Author: GuilhermeVieiraDev

apps/web/src/components/ComposerPromptEditor.tsx

@@ -56,6 +56,7 @@ import {
 } from "~/composer-logic";
 import {
   selectionTouchesMentionBoundary,
+  serializeComposerMentionPath,
   splitPromptIntoComposerSegments,
 } from "~/composer-editor-mentions";
 import {
@@ -198,7 +199,7 @@ class ComposerMentionNode extends DecoratorNode<React.ReactElement> {
   }
 
   override getTextContent(): string {
-    return `@${this.__path}`;
+    return `@${serializeComposerMentionPath(this.__path)}`;
   }
 
   override isInline(): true {

apps/web/src/components/chat/ChatComposer.tsx

@@ -28,6 +28,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { serializeComposerMentionPath } from "~/composer-editor-mentions";
 import {
   clampCollapsedComposerCursor,
   type ComposerTrigger,
@@ -1471,7 +1472,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       const { snapshot, trigger } = resolveActiveComposerTrigger();
       if (!trigger) return;
       if (item.type === "path") {
-        const replacement = `@${item.path} `;
+        const replacement = `@${serializeComposerMentionPath(item.path)} `;
         const replacementRangeEnd = extendReplacementRangeForTrailingSpace(
           snapshot.value,
           trigger.rangeEnd,

apps/web/src/composer-editor-mentions.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 
 import {
   selectionTouchesMentionBoundary,
+  serializeComposerMentionPath,
   splitPromptIntoComposerSegments,
 } from "./composer-editor-mentions";
 import { INLINE_TERMINAL_CONTEXT_PLACEHOLDER } from "./lib/terminalContext";
@@ -29,6 +30,22 @@ describe("splitPromptIntoComposerSegments", () => {
     ]);
   });
 
+  it("splits quoted mention tokens containing whitespace", () => {
+    expect(splitPromptIntoComposerSegments('Inspect @"My File.md" please')).toEqual([
+      { type: "text", text: "Inspect " },
+      { type: "mention", path: "My File.md" },
+      { type: "text", text: " please" },
+    ]);
+  });
+
+  it("unescapes quoted mention token content", () => {
+    expect(splitPromptIntoComposerSegments('Inspect @"docs/My \\"File\\".md" please')).toEqual([
+      { type: "text", text: "Inspect " },
+      { type: "mention", path: 'docs/My "File".md' },
+      { type: "text", text: " please" },
+    ]);
+  });
+
   it("splits skill tokens followed by whitespace into skill segments", () => {
     expect(splitPromptIntoComposerSegments("Use $review-follow-up please")).toEqual([
       { type: "text", text: "Use " },
@@ -84,6 +101,20 @@ describe("splitPromptIntoComposerSegments", () => {
   });
 });
 
+describe("serializeComposerMentionPath", () => {
+  it("keeps simple paths unquoted", () => {
+    expect(serializeComposerMentionPath("src/index.ts")).toBe("src/index.ts");
+  });
+
+  it("quotes paths containing whitespace", () => {
+    expect(serializeComposerMentionPath("docs/My File.md")).toBe('"docs/My File.md"');
+  });
+
+  it("escapes quoted path content", () => {
+    expect(serializeComposerMentionPath('docs/My "File".md')).toBe('"docs/My \\"File\\".md"');
+  });
+});
+
 describe("selectionTouchesMentionBoundary", () => {
   it("returns true when selection includes the whitespace after a mention", () => {
     expect(
@@ -125,4 +156,14 @@ describe("selectionTouchesMentionBoundary", () => {
       ),
     ).toBe(true);
   });
+
+  it("returns true when selection includes whitespace after a quoted mention", () => {
+    expect(
+      selectionTouchesMentionBoundary(
+        'hi @"My File.md" there',
+        'hi @"My File.md"'.length,
+        'hi @"My File.md" there'.length,
+      ),
+    ).toBe(true);
+  });
 });

apps/web/src/composer-editor-mentions.ts

@@ -21,8 +21,16 @@ export type ComposerPromptSegment =
       context: TerminalContextDraft | null;
     };
 
-const MENTION_TOKEN_REGEX = /(^|\s)@([^\s@]+)(?=\s)/g;
 const SKILL_TOKEN_REGEX = /(^|\s)\$([a-zA-Z][a-zA-Z0-9:_-]*)(?=\s)/g;
+const MENTION_TOKEN_REGEX = /(^|\s)@(?:"((?:\\.|[^"\\])*)"|([^\s@"]+))(?=\s)/g;
+const SIMPLE_MENTION_PATH_REGEX = /^[^\s@"\\]+$/;
+
+export function serializeComposerMentionPath(path: string): string {
+  if (SIMPLE_MENTION_PATH_REGEX.test(path)) {
+    return path;
+  }
+  return `"${path.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`;
+}
 
 function rangeIncludesIndex(start: number, end: number, index: number): boolean {
   return start <= index && index < end;
@@ -52,13 +60,18 @@ type InlineTokenMatch =
       end: number;
     };
 
-function collectInlineTokenMatches(text: string): InlineTokenMatch[] {
-  const matches: InlineTokenMatch[] = [];
+type MentionTokenMatch = Extract<InlineTokenMatch, { type: "mention" }>;
+
+function collectMentionTokenMatches(text: string): MentionTokenMatch[] {
+  const matches: MentionTokenMatch[] = [];
 
   for (const match of text.matchAll(MENTION_TOKEN_REGEX)) {
     const fullMatch = match[0];
     const prefix = match[1] ?? "";
-    const path = match[2] ?? "";
+    const quotedPath = match[2];
+    const unquotedPath = match[3];
+    const path =
+      quotedPath !== undefined ? quotedPath.replace(/\\(.)/g, "$1") : (unquotedPath ?? "");
     const matchIndex = match.index ?? 0;
     const start = matchIndex + prefix.length;
     const end = start + fullMatch.length - prefix.length;
@@ -67,6 +80,12 @@ function collectInlineTokenMatches(text: string): InlineTokenMatch[] {
     }
   }
 
+  return matches;
+}
+
+function collectInlineTokenMatches(text: string): InlineTokenMatch[] {
+  const matches: InlineTokenMatch[] = collectMentionTokenMatches(text);
+
   for (const match of text.matchAll(SKILL_TOKEN_REGEX)) {
     const fullMatch = match[0];
     const prefix = match[1] ?? "";
@@ -148,10 +167,10 @@ function forEachPromptTextSlice(
 
 function forEachMentionMatch(
   prompt: string,
-  visitor: (match: RegExpMatchArray, promptOffset: number) => boolean | void,
+  visitor: (match: MentionTokenMatch, promptOffset: number) => boolean | void,
 ): boolean {
   return forEachPromptTextSlice(prompt, (text, promptOffset) => {
-    for (const match of text.matchAll(MENTION_TOKEN_REGEX)) {
+    for (const match of collectMentionTokenMatches(text)) {
       if (visitor(match, promptOffset) === true) {
         return true;
       }
@@ -203,11 +222,8 @@ export function selectionTouchesMentionBoundary(
   }
 
   return forEachMentionMatch(prompt, (match, promptOffset) => {
-    const fullMatch = match[0];
-    const prefix = match[1] ?? "";
-    const matchIndex = match.index ?? 0;
-    const mentionStart = promptOffset + matchIndex + prefix.length;
-    const mentionEnd = mentionStart + fullMatch.length - prefix.length;
+    const mentionStart = promptOffset + match.start;
+    const mentionEnd = promptOffset + match.end;
     const beforeMentionIndex = mentionStart - 1;
     const afterMentionIndex = mentionEnd;
 

apps/web/src/composer-logic.test.ts

@@ -157,6 +157,16 @@ describe("expandCollapsedComposerCursor", () => {
     );
   });
 
+  it("maps collapsed quoted mention cursor to expanded text cursor", () => {
+    const text = 'what is in @"My File.md" please';
+    const collapsedCursorAfterMention = "what is in ".length + 2;
+    const expandedCursorAfterMention = 'what is in @"My File.md" '.length;
+
+    expect(expandCollapsedComposerCursor(text, collapsedCursorAfterMention)).toBe(
+      expandedCursorAfterMention,
+    );
+  });
+
   it("allows path trigger detection to close after selecting a mention", () => {
     const text = "what's in my @AGENTS.md ";
     const collapsedCursorAfterMention = "what's in my ".length + 2;
@@ -191,6 +201,16 @@ describe("collapseExpandedComposerCursor", () => {
     );
   });
 
+  it("maps expanded quoted mention cursor back to collapsed cursor", () => {
+    const text = 'what is in @"My File.md" please';
+    const collapsedCursorAfterMention = "what is in ".length + 2;
+    const expandedCursorAfterMention = 'what is in @"My File.md" '.length;
+
+    expect(collapseExpandedComposerCursor(text, expandedCursorAfterMention)).toBe(
+      collapsedCursorAfterMention,
+    );
+  });
+
   it("keeps replacement cursors aligned when another mention already exists earlier", () => {
     const text = "open @AGENTS.md then @src/index.ts ";
     const expandedCursor = text.length;

apps/web/src/composer-logic.ts

@@ -1,4 +1,7 @@
-import { splitPromptIntoComposerSegments } from "./composer-editor-mentions";
+import {
+  serializeComposerMentionPath,
+  splitPromptIntoComposerSegments,
+} from "./composer-editor-mentions";
 import { INLINE_TERMINAL_CONTEXT_PLACEHOLDER } from "./lib/terminalContext";
 
 export type ComposerTriggerKind = "path" | "slash-command" | "skill";
@@ -54,7 +57,7 @@ export function expandCollapsedComposerCursor(text: string, cursorInput: number)
 
   for (const segment of segments) {
     if (segment.type === "mention") {
-      const expandedLength = segment.path.length + 1;
+      const expandedLength = serializeComposerMentionPath(segment.path).length + 1;
       if (remaining <= 1) {
         return expandedCursor + (remaining === 0 ? 0 : expandedLength);
       }
@@ -142,7 +145,7 @@ export function collapseExpandedComposerCursor(text: string, cursorInput: number
 
   for (const segment of segments) {
     if (segment.type === "mention") {
-      const expandedLength = segment.path.length + 1;
+      const expandedLength = serializeComposerMentionPath(segment.path).length + 1;
       if (remaining === 0) {
         return collapsedCursor;
       }