sparkecoder 0.1.98 → 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/standalone/web/src/components/chat-interface.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import { useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
 import { cn } from '@/lib/utils';
@@ -238,6 +239,167 @@ function stripDevtoolsContext(text: string): string {
   return text.replace(DEVTOOLS_CONTEXT_RE, '').trim();
 }
 
+/** Channel pill at the start of an orchestrator user-message, e.g. "[SLACK #ops by @ryan]" or "[WEB]". */
+interface ChannelPillInfo {
+  channel: string;        // SLACK | WEB | SYSTEM | SCHEDULE | WEBHOOK
+  detail?: string;        // remainder of the bracket, e.g. "#ops by @ryan"
+}
+function extractChannelPill(text: string): { pill: ChannelPillInfo | null; rest: string } {
+  const m = text.match(/^\[([A-Z]+)(?:\s+([^\]]*))?\]\s*([\s\S]*)$/);
+  if (!m) return { pill: null, rest: text };
+  const channel = m[1];
+  // Only treat as a channel pill if it's a known channel id.
+  if (!['WEB', 'SLACK', 'SYSTEM', 'SCHEDULE', 'WEBHOOK'].includes(channel)) {
+    return { pill: null, rest: text };
+  }
+  return { pill: { channel, detail: m[2]?.trim() || undefined }, rest: m[3] };
+}
+
+const CHANNEL_PALETTE: Record<string, string> = {
+  SLACK: 'bg-purple-500/10 text-purple-600 dark:text-purple-300 border-purple-500/30',
+  SYSTEM: 'bg-blue-500/10 text-blue-600 dark:text-blue-300 border-blue-500/30',
+  SCHEDULE: 'bg-amber-500/10 text-amber-600 dark:text-amber-300 border-amber-500/30',
+  WEBHOOK: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 border-emerald-500/30',
+};
+
+function ChannelPill({ channel, detail }: ChannelPillInfo) {
+  // Hide [WEB] pills — web is the default surface, showing a pill on
+  // every typed message is noise.
+  if (channel === 'WEB') return null;
+  const tone = CHANNEL_PALETTE[channel] || 'bg-muted text-muted-foreground border-border';
+  return (
+    <span className={`inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-wide px-1.5 py-0.5 rounded border mr-2 mb-1 ${tone}`}>
+      <span>{channel}</span>
+      {detail && <span className="font-normal normal-case opacity-80">{detail}</span>}
+    </span>
+  );
+}
+
+/** Channels that aren't direct human chat — render compactly with click-to-expand. */
+const SYNTHETIC_CHANNELS = new Set(['SYSTEM', 'SCHEDULE', 'WEBHOOK']);
+
+/**
+ * Inbound human message from a non-web channel (Slack today, others later).
+ * Renders the tag ABOVE a normal user bubble so the convo doesn't read like
+ * the channel pill is part of the message body.
+ */
+function TaggedInboundUserMessage({
+  pill, body, attachmentsBlock, devtoolsTrail, footer,
+}: {
+  pill: ChannelPillInfo;
+  body: string;
+  attachmentsBlock?: React.ReactNode;
+  devtoolsTrail?: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  const tone = CHANNEL_PALETTE[pill.channel] || 'bg-muted text-muted-foreground border-border';
+  return (
+    <div className="flex flex-col items-end gap-1 my-2">
+      <div className={`inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide px-2 py-0.5 rounded-md border self-end ${tone}`}>
+        <span>{pill.channel}</span>
+        {pill.detail && <span className="font-normal normal-case opacity-80">{pill.detail}</span>}
+      </div>
+      <Message from="user">
+        <MessageContent>
+          {attachmentsBlock}
+          {body && <p className="whitespace-pre-wrap">{body}</p>}
+          {devtoolsTrail}
+        </MessageContent>
+        {footer}
+      </Message>
+    </div>
+  );
+}
+
+/**
+ * Renders an outbound `messenger({action:'post', ...})` tool call as if it
+ * were a special assistant message: tag on top ("→ SENT VIA SLACK #ops"),
+ * the actual text bubble below, and a small status footer. So when a user
+ * comes back to the web later they can see exactly what was sent on other
+ * channels.
+ */
+function SentMessengerCard({
+  input, output, status,
+}: {
+  input: any;
+  output: any;
+  status: string;
+}) {
+  if (!input || input.action !== 'post') return null;
+  const channel = String(input.channel || 'unknown').toUpperCase();
+  const tone = CHANNEL_PALETTE[channel] || 'bg-muted text-muted-foreground border-border';
+  const to = String(input.to || '');
+  const threadTs = input.threadTs ? String(input.threadTs) : null;
+  const text = String(input.text || '');
+  const ok = output && typeof output === 'object' && (output as any).ok !== false;
+  const errorText = output && typeof output === 'object' ? (output as any).error : undefined;
+  const pending = status === 'streaming' || status === 'running' || status === 'pending' || status === 'input-available';
+  return (
+    <div className="flex flex-col items-start gap-1 my-2 max-w-[80%]">
+      <div className={`inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide px-2 py-0.5 rounded-md border ${tone}`}>
+        <span>→ Sent via {channel}</span>
+        {to && <span className="font-normal normal-case opacity-80">to {to}</span>}
+        {threadTs && <span className="font-normal normal-case opacity-60">thread {threadTs}</span>}
+      </div>
+      <div className={`rounded-2xl border bg-card/40 px-3 py-2 ${pending ? 'opacity-60' : ''}`}>
+        {text ? (
+          <p className="text-sm whitespace-pre-wrap">{text}</p>
+        ) : (
+          <p className="text-xs italic text-muted-foreground">(empty message)</p>
+        )}
+      </div>
+      <div className="text-[10px] text-muted-foreground flex items-center gap-1">
+        {pending ? (
+          <span className="opacity-70">sending…</span>
+        ) : ok ? (
+          <span className="text-emerald-500">✓ delivered</span>
+        ) : (
+          <span className="text-rose-500">✗ failed{errorText ? `: ${errorText}` : ''}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Synthetic event row — a compact one-liner for SYSTEM/SCHEDULE/WEBHOOK
+ * messages so the chat doesn't get cluttered with every worker completion,
+ * cron tick, or webhook hit. Click to expand the full payload.
+ */
+function SyntheticEventMessage({ pill, body }: { pill: ChannelPillInfo; body: string }) {
+  const [expanded, setExpanded] = React.useState(false);
+  const tone = CHANNEL_PALETTE[pill.channel] || 'bg-muted text-muted-foreground border-border';
+  // First non-empty line for the collapsed summary.
+  const firstLine = body.split('\n').find((l) => l.trim().length > 0) || '';
+  const truncated = firstLine.length > 140 ? firstLine.slice(0, 140) + '…' : firstLine;
+  const isMultiline = body.includes('\n') || body.length > 140;
+
+  return (
+    <div className="flex justify-center my-1.5">
+      <button
+        type="button"
+        onClick={() => isMultiline && setExpanded((v) => !v)}
+        className={`group max-w-[80%] text-left rounded-md border px-2 py-1 transition-colors ${tone} ${isMultiline ? 'cursor-pointer hover:opacity-90' : 'cursor-default'}`}
+      >
+        <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide">
+          <span className="font-medium">{pill.channel}</span>
+          {pill.detail && <span className="font-normal normal-case opacity-80 truncate">{pill.detail}</span>}
+          {isMultiline && (
+            <ChevronDown
+              className={`h-3 w-3 ml-auto shrink-0 transition-transform ${expanded ? 'rotate-180' : ''}`}
+            />
+          )}
+        </div>
+        {expanded ? (
+          <pre className="mt-1 text-[11px] whitespace-pre-wrap font-mono opacity-90 max-h-[400px] overflow-y-auto">{body}</pre>
+        ) : (
+          <p className="mt-0.5 text-[11px] opacity-80 truncate">{truncated}</p>
+        )}
+      </button>
+    </div>
+  );
+}
+
 /** Parse devtools context metadata from a user message */
 function parseDevtoolsContext(text: string): DevtoolsContextMeta | null {
   const match = text.match(/<devtools-context>([\s\S]*?)<\/devtools-context>/);
@@ -2998,12 +3160,31 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
             })
             .map((item) => {
             if (item.type === 'user-message') {
+              // Channel-aware rendering for orchestrator-bound user messages.
+              // - SYSTEM/SCHEDULE/WEBHOOK → compact collapsible row
+              // - SLACK and other non-web human channels → tag ABOVE the bubble,
+              //   clean body inside (so the chat doesn't read like the pill is
+              //   part of the message)
+              // - WEB / no pill → normal user bubble (unchanged)
+              const extracted = item.content ? extractChannelPill(item.content) : { pill: null, rest: item.content || '' };
+              if (extracted.pill && SYNTHETIC_CHANNELS.has(extracted.pill.channel)) {
+                return <SyntheticEventMessage key={item.id} pill={extracted.pill} body={extracted.rest} />;
+              }
+              const useTaggedAbove = !!extracted.pill && extracted.pill.channel !== 'WEB';
+
               // Check if there's a checkpoint for this message (meaning we can revert to before it)
               const hasCheckpoint = item.messageSequence !== undefined && 
                 checkpoints.some(cp => cp.messageSequence === item.messageSequence);
               
               return (
-                <Message key={item.id} from="user">
+                <div key={item.id} className={useTaggedAbove ? 'flex flex-col items-end gap-1' : undefined}>
+                  {useTaggedAbove && extracted.pill && (
+                    <div className={`inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide px-2 py-0.5 rounded-md border self-end ${CHANNEL_PALETTE[extracted.pill.channel] || 'bg-muted text-muted-foreground border-border'}`}>
+                      <span>{extracted.pill.channel}</span>
+                      {extracted.pill.detail && <span className="font-normal normal-case opacity-80">{extracted.pill.detail}</span>}
+                    </div>
+                  )}
+                <Message from="user">
                   <MessageContent>
                     {/* Display attachments if any */}
                     {item.attachments && item.attachments.length > 0 && (
@@ -3032,10 +3213,15 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
                       </div>
                     )}
                     {item.content && (() => {
-                      const displayText = stripDevtoolsContext(item.content);
-                      const devtoolsMeta = parseDevtoolsContext(item.content);
+                      // Use the already-extracted pill/rest from the parent
+                      // scope so we don't double-render the tag for tagged-above
+                      // messages.
+                      const rest = extracted.rest;
+                      const displayText = stripDevtoolsContext(rest);
+                      const devtoolsMeta = parseDevtoolsContext(rest);
                       return (
                         <>
+                          {!useTaggedAbove && extracted.pill && <ChannelPill {...extracted.pill} />}
                           {displayText && (
                             <p className="whitespace-pre-wrap">{displayText}</p>
                           )}
@@ -3078,6 +3264,7 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
                     </MessageActions>
                   )}
                 </Message>
+                </div>
               );
             }
             
@@ -3126,7 +3313,21 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
             if (item.type === 'tool-call' && item.toolCall) {
               const tc = item.toolCall;
               const toolType = `tool-${tc.toolName}` as `tool-${string}`;
-              
+
+              // Render outbound `messenger({action:'post',...})` as a special
+              // "Sent via SLACK #ops" card so anyone returning to the web can
+              // see what the orchestrator actually pushed to external channels.
+              if (tc.toolName === 'messenger' && (tc.input as any)?.action === 'post') {
+                return (
+                  <SentMessengerCard
+                    key={item.id}
+                    input={tc.input}
+                    output={tc.output}
+                    status={tc.status}
+                  />
+                );
+              }
+
               // Use dedicated WriteFileTool component for write_file
               if (tc.toolName === 'write_file') {
                 return (

package/web/.next/standalone/web/src/components/pending-question-banner.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { MessageCircleQuestion, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { getSession, answerAgentQuestion } from '@/lib/api';
+
+/**
+ * Polls the session and shows a banner inside the chat surface when the
+ * worker agent has called `ask_question_to_user`. Lets the user answer
+ * inline so they don't have to leave the session.
+ */
+export function PendingQuestionBanner({ sessionId }: { sessionId: string }) {
+  const [question, setQuestion] = useState<{
+    questionId: string;
+    question: string;
+    context?: string;
+    choices?: string[];
+  } | null>(null);
+  const [answer, setAnswer] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const refresh = useCallback(async () => {
+    const s = await getSession(sessionId);
+    setQuestion(s?.pendingQuestion ?? null);
+  }, [sessionId]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const tick = async () => {
+      if (cancelled) return;
+      await refresh();
+    };
+    tick();
+    const id = setInterval(tick, 3000);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [refresh]);
+
+  if (!question) return null;
+
+  const send = async () => {
+    if (!answer.trim() || sending) return;
+    setSending(true);
+    try {
+      await answerAgentQuestion(sessionId, question.questionId, answer.trim());
+      setAnswer('');
+      setQuestion(null);
+      // The worker will resume; the next poll will reflect that.
+      refresh();
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className="border-b border-amber-500/40 bg-amber-500/5 px-4 py-3">
+      <div className="flex items-start gap-3 max-w-3xl mx-auto">
+        <MessageCircleQuestion className="size-5 text-amber-500 shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+            {question.question}
+          </p>
+          {question.context && (
+            <p className="text-xs text-muted-foreground mt-1">{question.context}</p>
+          )}
+          {question.choices && question.choices.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {question.choices.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => setAnswer(c)}
+                  className="text-xs px-2 py-1 rounded bg-amber-500/10 hover:bg-amber-500/20 text-amber-800 dark:text-amber-200"
+                >
+                  {c}
+                </button>
+              ))}
+            </div>
+          )}
+          <div className="flex gap-2 mt-2">
+            <input
+              type="text"
+              value={answer}
+              onChange={(e) => setAnswer(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  send();
+                }
+              }}
+              placeholder="Type your answer…"
+              className="flex-1 px-3 py-1.5 text-sm rounded border border-border bg-background focus:outline-none focus:ring-2 focus:ring-amber-500/40"
+              autoFocus
+            />
+            <Button size="sm" onClick={send} disabled={!answer.trim() || sending}>
+              {sending ? <Loader2 className="size-3.5 animate-spin" /> : 'Answer'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}