Merge pull request Stack-Cairn#146 from Stack-Cairn/feat/editor-insert-code-mention

Composer mention-chip overhaul: insert code references, CSS-based chip spacing, caret navigation fixes

Author: su-fen

crates/agent-gateway/web/src/app/GatewayApp.tsx

@@ -27,6 +27,7 @@ import { LocaleContext, t as translate } from "@/i18n";
 import type { ChatHistorySummary } from "@/lib/chat/chatHistory";
 import { buildModelOptions } from "@/lib/chat/chatPageHelpers";
 import type { HistoryMessageRef } from "@/lib/chat/conversationState";
+import type { CodeMentionReference } from "@/lib/chat/mentionReferences";
 import { createActivityStore } from "@/lib/chat/stream/activityStore";
 import {
   type ChatCommandOutcome,
@@ -3697,6 +3698,10 @@ export default function GatewayApp() {
     composerRef.current?.insertGitFileMention(file);
     composerRef.current?.focus();
   }, []);
+  const handleInsertCodeMention = useCallback((reference: CodeMentionReference) => {
+    composerRef.current?.insertCodeMention(reference);
+    composerRef.current?.focus();
+  }, []);
   // Guards re-entry while a suggestion is still typing in: the cards stay
   // disabled and further clicks are ignored until the composer settles.
   const [isSuggestionTyping, setIsSuggestionTyping] = useState(false);
@@ -4369,6 +4374,7 @@ export default function GatewayApp() {
               workspaceEditorOpen={workspaceEditorOpen}
               workspaceEditorCleanupPending={workspaceEditorCleanupPending}
               onWorkspaceEditorPreviewFile={openWorkspaceFilePreview}
+              onWorkspaceEditorInsertCodeMention={handleInsertCodeMention}
               onWorkspaceEditorHide={handleWorkspaceEditorHide}
               onWorkspaceEditorClose={handleWorkspaceEditorClosed}
               workspaceFilePreviewMounted={workspaceFilePreviewMounted}

crates/agent-gateway/web/src/app/WorkspaceOverlayHost.tsx

@@ -4,6 +4,7 @@ import type { WorkspaceCodeEditorOpenRequest } from "@/components/workspace-edit
 import type { WorkspaceFilePreviewOpenRequest } from "@/components/workspace-editor/WorkspaceFilePreviewOverlay";
 import type { WorkspaceSshTerminalOpenRequest } from "@/components/workspace-editor/WorkspaceSshTerminalOverlay";
 import { t as translate } from "@/i18n";
+import type { CodeMentionReference } from "@/lib/chat/mentionReferences";
 import { lockMonacoNlsLocale, preparePreferredMonacoNlsLocale } from "@/lib/monacoNls";
 import type { AppSettings, EffectiveTheme } from "@/lib/settings";
 import type { SftpClient } from "@/lib/sftp/types";
@@ -41,6 +42,7 @@ type WorkspaceOverlayHostProps = {
   workspaceEditorOpen: boolean;
   workspaceEditorCleanupPending: boolean;
   onWorkspaceEditorPreviewFile: (request: WorkspaceCodeEditorOpenRequest) => void;
+  onWorkspaceEditorInsertCodeMention?: (reference: CodeMentionReference) => void;
   onWorkspaceEditorHide: () => void;
   onWorkspaceEditorClose: () => void;
   workspaceFilePreviewMounted: boolean;
@@ -69,6 +71,7 @@ export function WorkspaceOverlayHost(props: WorkspaceOverlayHostProps) {
     workspaceEditorOpen,
     workspaceEditorCleanupPending,
     onWorkspaceEditorPreviewFile,
+    onWorkspaceEditorInsertCodeMention,
     onWorkspaceEditorHide,
     onWorkspaceEditorClose,
     workspaceFilePreviewMounted,
@@ -104,6 +107,7 @@ export function WorkspaceOverlayHost(props: WorkspaceOverlayHostProps) {
             finalCloseRequested={workspaceEditorCleanupPending}
             theme={theme}
             onPreviewFile={onWorkspaceEditorPreviewFile}
+            onInsertCodeMention={onWorkspaceEditorInsertCodeMention}
             onHide={onWorkspaceEditorHide}
             onClose={onWorkspaceEditorClose}
           />

crates/agent-gateway/web/src/app/chatDraft.ts

@@ -4,7 +4,7 @@ import type {
   MentionComposerGitFileMention,
   MentionComposerLargePaste,
 } from "@/components/chat/MentionComposer";
-import { formatFileMentionToken } from "@/lib/chat/mentionReferences";
+import { formatCodeMentionToken, formatFileMentionToken } from "@/lib/chat/mentionReferences";
 import type { PendingUploadedFile } from "@/lib/chat/uploadedFiles";
 import { withPastedTextDisplayMetadata } from "@/lib/chat/uploadedFiles";
 import { importReadableFiles } from "@/lib/uploadReadableFiles";
@@ -70,6 +70,9 @@ export function buildTextFromComposerDraft(
       if (segment.type === "gitFileMention") {
         return formatComposerGitFileMention(segment.file);
       }
+      if (segment.type === "codeMention") {
+        return formatCodeMentionToken(segment.reference);
+      }
       const file = pastedFileById?.get(segment.paste.id);
       return file ? `[${segment.paste.label}: ${file.relativePath}]` : segment.paste.text;
     })