sparkecoder 0.1.99 → 0.1.100

package/web/.next/standalone/web/src/components/ai-elements/mention-input.tsx

@@ -59,8 +59,15 @@ export interface SlashCommand {
   action?: () => void;
 }
 
+interface McpServer {
+  id: string;
+  name: string;
+  enabled: boolean;
+  transport: string;
+}
+
 interface TriggerState {
-  type: "file" | "command";
+  type: "file" | "command" | "mcp";
   query: string;
   startIndex: number; // Where the trigger character is
   endIndex: number; // Current cursor position
@@ -87,8 +94,9 @@ export function useMentionInput() {
   return ctx;
 }
 
-// Regex to match @mentions in text (matches @path/to/file or @folder/)
-const MENTION_REGEX = /@([\w./-]+\/?)/g;
+// Regex to match @mentions in text. Captures both file-style (`@path/to/file`,
+// `@folder/`) and MCP-style (`@mcp/<server-name>`).
+const MENTION_REGEX = /@(mcp\/[\w-]+|[\w./-]+\/?)/g;
 
 // ============================================================================
 // Default Slash Commands - Each inserts a prompt template
@@ -311,6 +319,36 @@ export function MentionTextarea({
     limit: 15,
   });
 
+  // Fetch enabled MCP servers when either the dedicated @mcp trigger is
+  // active OR the user is typing a plain @<query> that might match a server
+  // name (e.g. `@gmail`, `@github`). Server names appear alongside files
+  // in the popover.
+  const [mcpServers, setMcpServers] = useState<McpServer[]>([]);
+  useEffect(() => {
+    if (trigger?.type !== "mcp" && trigger?.type !== "file") {
+      setMcpServers([]);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        const { getApiUrl } = await import("@/lib/config");
+        const res = await fetch(`${getApiUrl()}/api/mcp`);
+        if (!res.ok) return;
+        const data = await res.json();
+        if (cancelled) return;
+        const q = (trigger.query || "").toLowerCase();
+        const filtered: McpServer[] = (data.servers || [])
+          .filter((s: any) => s.enabled)
+          .filter((s: any) => !q || s.name.toLowerCase().includes(q));
+        setMcpServers(filtered);
+      } catch {
+        if (!cancelled) setMcpServers([]);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [trigger]);
+
   // Filter slash commands based on query
   const filteredCommands = useMemo(() => {
     if (trigger?.type !== "command") return [];
@@ -322,8 +360,14 @@ export function MentionTextarea({
     );
   }, [trigger, slashCommands]);
 
-  // Current items to display
-  const items = trigger?.type === "file" ? files : filteredCommands;
+  // Current items to display. For file mode we prepend any matching MCP
+  // servers so the same @-popover surfaces both. MCP names render in their
+  // own group above files (see CommandList below); we keep them sequenced
+  // first here so arrow-key navigation matches the visual order.
+  const items: Array<(typeof files)[0] | SlashCommand | McpServer> =
+    trigger?.type === "file" ? [...mcpServers, ...files]
+    : trigger?.type === "mcp" ? mcpServers
+    : filteredCommands;
   const showPopover = trigger !== null && (items.length > 0 || isLoading);
 
   // Calculate popover position based on textarea caret
@@ -408,6 +452,20 @@ export function MentionTextarea({
 
       const beforeCursor = text.slice(0, cursorPos);
 
+      // Check for @mcp trigger (MCP server mention). Supports `@mcp/<query>`,
+      // `@mcp:<query>`, and bare `@mcp` (no separator yet).
+      const mcpMatch = beforeCursor.match(/@mcp(?:[\/:]([^\s@]*))?$/i);
+      if (mcpMatch) {
+        setTrigger({
+          type: "mcp",
+          query: mcpMatch[1] ?? "",
+          startIndex: cursorPos - mcpMatch[0].length,
+          endIndex: cursorPos,
+        });
+        setSelectedIndex(0);
+        return;
+      }
+
       // Check for @ trigger (file mention)
       const atMatch = beforeCursor.match(/@([^\s@]*)$/);
       if (atMatch) {
@@ -453,9 +511,31 @@ export function MentionTextarea({
 
   // Handle selection from popover
   const handleSelect = useCallback(
-    (item: (typeof files)[0] | SlashCommand) => {
+    (item: (typeof files)[0] | SlashCommand | McpServer) => {
       if (!trigger || !textareaRef.current) return;
 
+      // MCP server selection. Works under either the dedicated `@mcp/` trigger
+      // OR a plain `@<name>` file-trigger when the query happens to match a
+      // configured server (so `@gmail` works the same as `@mcp/gmail`).
+      if ("name" in item && "transport" in item) {
+        const mcp = item as McpServer;
+        const before = value.slice(0, trigger.startIndex);
+        const after = value.slice(trigger.endIndex);
+        const mentionText = `@mcp/${mcp.name} `;
+        const newValue = before + mentionText + after;
+        onChange(newValue);
+        setTimeout(() => {
+          if (textareaRef.current) {
+            const newPos = trigger.startIndex + mentionText.length;
+            textareaRef.current.selectionStart = newPos;
+            textareaRef.current.selectionEnd = newPos;
+            textareaRef.current.focus();
+          }
+        }, 0);
+        setTrigger(null);
+        return;
+      }
+
       if (trigger.type === "file" && "path" in item) {
         // Insert @path inline (replacing @query with @fullpath)
         const before = value.slice(0, trigger.startIndex);
@@ -711,30 +791,58 @@ export function MentionTextarea({
                 <CommandEmpty>
                   {trigger?.type === "file"
                     ? "No files found"
+                    : trigger?.type === "mcp"
+                    ? "No MCP servers configured. Add one in Settings → MCP."
                     : "No commands found"}
                 </CommandEmpty>
               )}
-              {trigger?.type === "file" && files.length > 0 && (
-                <CommandGroup heading="Files & Folders">
-                  {files.map((file, index) => (
+              {(trigger?.type === "mcp" || trigger?.type === "file") && mcpServers.length > 0 && (
+                <CommandGroup heading="MCP servers">
+                  {mcpServers.map((s, index) => (
                     <CommandItem
-                      key={file.path}
-                      onSelect={() => handleSelect(file)}
+                      key={s.id}
+                      onSelect={() => handleSelect(s)}
                       className={cn(
                         "cursor-pointer",
                         index === selectedIndex && "bg-accent"
                       )}
                     >
-                      {file.type === "folder" ? (
-                        <FolderIcon className="mr-2 size-4 text-blue-500" />
-                      ) : (
-                        <FileIcon className="mr-2 size-4 text-muted-foreground" />
-                      )}
-                      <span className="truncate">{file.path}</span>
+                      <HashIcon className="mr-2 size-4 text-emerald-500" />
+                      <div className="flex flex-col">
+                        <span className="font-medium">{s.name}</span>
+                        <span className="text-xs text-muted-foreground">{s.transport} · tools: mcp_{s.name}_*</span>
+                      </div>
                     </CommandItem>
                   ))}
                 </CommandGroup>
               )}
+              {trigger?.type === "file" && files.length > 0 && (
+                <CommandGroup heading="Files & Folders">
+                  {files.map((file, fileIdx) => {
+                    // In file mode the items array is [mcpServers, ...files],
+                    // so the per-file selection index is offset by the number
+                    // of MCP rows rendered above.
+                    const idx = mcpServers.length + fileIdx;
+                    return (
+                      <CommandItem
+                        key={file.path}
+                        onSelect={() => handleSelect(file)}
+                        className={cn(
+                          "cursor-pointer",
+                          idx === selectedIndex && "bg-accent"
+                        )}
+                      >
+                        {file.type === "folder" ? (
+                          <FolderIcon className="mr-2 size-4 text-blue-500" />
+                        ) : (
+                          <FileIcon className="mr-2 size-4 text-muted-foreground" />
+                        )}
+                        <span className="truncate">{file.path}</span>
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+              )}
               {trigger?.type === "command" && filteredCommands.length > 0 && (
                 <CommandGroup heading="Commands">
                   {filteredCommands.map((cmd, index) => (

package/web/.next/static/chunks/4239395558fab3ef.js

@@ -0,0 +1 @@
+(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,739963,e=>{"use strict";let o="sparkecoder_api_url",i="http://localhost:3141",a=!1;function t(){if(a)return;a=!0;let e=new URLSearchParams(window.location.search),i=e.get("apiUrl");if(i){localStorage.setItem(o,i),e.delete("apiUrl");let a=e.toString()?`${window.location.pathname}?${e.toString()}`:window.location.pathname;window.history.replaceState({},"",a),console.log(`[SparkECoder] API URL set to: ${i}`)}}function r(){return a||t(),localStorage.getItem(o)||i}function n(e){localStorage.setItem(o,e)}function l(){localStorage.removeItem(o)}let d={availableModels:[{id:"anthropic/claude-opus-4.7",name:"Claude Opus 4.7",provider:"Anthropic"},{id:"anthropic/claude-opus-4-6",name:"Claude Opus 4.6",provider:"Anthropic"},{id:"anthropic/claude-opus-4-5",name:"Claude Opus 4.5",provider:"Anthropic"},{id:"anthropic/claude-sonnet-4",name:"Claude Sonnet 4",provider:"Anthropic"},{id:"anthropic/claude-haiku-4-5",name:"Claude Haiku 4.5",provider:"Anthropic"},{id:"openai/gpt-5-2-codex",name:"GPT-5.2 Codex",provider:"OpenAI"},{id:"google/gemini-3-flash",name:"Gemini 3 Flash",provider:"Google"},{id:"xai/grok-code-fast-1",name:"Grok Code Fast",provider:"xAI"}],availableTools:[{id:"bash",name:"Bash",description:"Execute shell commands",dangerous:!0},{id:"write_file",name:"Write File",description:"Create or edit files",dangerous:!0},{id:"read_file",name:"Read File",description:"Read file contents",dangerous:!1}],defaultModel:"anthropic/claude-opus-4.7",defaultToolApprovals:{},serverConnected:!1,apiKeyConfigured:!1,apiBaseUrl:i};async function c(){let e=r();try{let o=new AbortController,i=setTimeout(()=>o.abort(),3e3),a=await fetch(`${e}/health`,{signal:o.signal});if(clearTimeout(i),!a.ok)return{...d,apiBaseUrl:e};let t=await a.json();return{...d,defaultModel:t.config?.defaultModel||d.defaultModel,defaultToolApprovals:t.config?.defaultToolApprovals||{},serverConnected:!0,apiKeyConfigured:t.apiKeyConfigured??!1,apiBaseUrl:e}}catch{return{...d,apiBaseUrl:e}}}async function p(){return r()}function s(){}e.s(["clearApiUrl",()=>l,"getApiBaseUrl",()=>p,"getApiUrl",()=>r,"getConfig",()=>c,"initApiUrl",()=>t,"resetConfigCache",()=>s,"setApiUrl",()=>n])},760800,e=>{"use strict";var o=e.i(430878),i=e.i(739963);function a(){return(0,o.useEffect)(()=>{(0,i.initApiUrl)()},[]),null}e.s(["ApiInit",()=>a])}]);