@mndrk/agx 2.0.33 → 2.0.36

package/cloud-runtime/standalone/components/chat-ui/ChatContainer.tsx

@@ -328,6 +328,20 @@ export function ChatContainer({
     reorderAgents: reorderProjectAgents,
   } = useProjectsWithAgents();
   const { projects: projectList, updateProject } = useProjects();
+
+  // Projects scoped to the current thread
+  const threadProjects = useMemo(
+    () => activeThreadId ? projects.filter((project) => project.thread_ids?.includes(activeThreadId)) : projects,
+    [projects, activeThreadId]
+  );
+
+  // Derive project slug from route prop or thread association so messages sent
+  // from the root page still carry project context.
+  const effectiveProjectSlug = useMemo(
+    () => projectSlug || threadProjects[0]?.slug || undefined,
+    [projectSlug, threadProjects]
+  );
+
   const [participants, setParticipants] = useState<Participant[]>([]);
   const [participantsLoaded, setParticipantsLoaded] = useState(false);
   const [activeParticipantIds, setActiveParticipantIds] = useState<string[]>([]);
@@ -631,7 +645,7 @@ export function ChatContainer({
     setKnowledgeExtractionPending(true);
     try {
       const scopes: string[] = ["repo"];
-      if (projectSlug) scopes.push("project");
+      if (effectiveProjectSlug) scopes.push("project");
 
       const response = await fetch("/api/threads/knowledge", {
         method: "POST",
@@ -649,7 +663,7 @@ export function ChatContainer({
     } finally {
       setKnowledgeExtractionPending(false);
     }
-  }, [openThreadId, projectSlug]);
+  }, [openThreadId, effectiveProjectSlug]);
 
   useEffect(() => {
     if (!openThreadId) {
@@ -940,7 +954,7 @@ export function ChatContainer({
   }, [activeThreadId, messages, updateThreadMessages]);
 
   const handleThreadReply = useCallback(
-    (rootMessageId: string, content: string, maxRounds: number = 10, pinnedParticipantId?: string) => {
+    (rootMessageId: string, content: string, maxRounds: number = 10, pinnedParticipantId?: string, promptPrefix?: string) => {
       if (!activeThreadId) return;
       if (activeParticipants.length === 0) return;
       const selectedActiveIds = activeParticipants.map((participant) => participant.id);
@@ -955,10 +969,11 @@ export function ChatContainer({
         undefined,
         undefined,
         orderedActiveIds,
-        projectSlug
+        effectiveProjectSlug,
+        promptPrefix
       );
     },
-    [activeThreadId, sendMessage, activeParticipants, projectSlug]
+    [activeThreadId, sendMessage, activeParticipants, effectiveProjectSlug]
   );
 
 
@@ -1164,7 +1179,8 @@ export function ChatContainer({
       maxRounds: number,
       attachmentIds?: string[],
       attachmentMetas?: import("@/lib/types").Attachment[],
-      pinnedParticipantId?: string
+      pinnedParticipantId?: string,
+      promptPrefix?: string
     ) => {
       const searchMatch = prompt.match(/^\/search(?:\s+([\s\S]+))?$/i);
       if (searchMatch) {
@@ -1216,7 +1232,8 @@ export function ChatContainer({
           attachmentIds,
           attachmentMetas,
           orderedActiveIds,
-          projectSlug
+          effectiveProjectSlug,
+          promptPrefix
         );
         return;
       }
@@ -1231,7 +1248,8 @@ export function ChatContainer({
         attachmentIds,
         attachmentMetas,
         orderedActiveIds,
-        projectSlug
+        effectiveProjectSlug,
+        promptPrefix
       );
 
       // If ship mode was staged on the main composer, activate it for the new thread
@@ -1255,7 +1273,7 @@ export function ChatContainer({
       openThreadId,
       activeParticipants,
       sendMessage,
-      projectSlug,
+      effectiveProjectSlug,
     ]
   );
 
@@ -1441,9 +1459,54 @@ export function ChatContainer({
   );
 
   // Projects scoped to the current thread
-  const threadProjects = useMemo(
-    () => activeThreadId ? projects.filter((project) => project.thread_ids?.includes(activeThreadId)) : projects,
-    [projects, activeThreadId]
+  // Repos from the active project (first thread-scoped project, or matched by projectSlug)
+  const activeProjectRepos = useMemo(() => {
+    const match = effectiveProjectSlug
+      ? threadProjects.find((p) => p.slug === effectiveProjectSlug)
+      : threadProjects[0];
+    return match?.repos ?? [];
+  }, [threadProjects, effectiveProjectSlug]);
+
+  // ── Persisted repo selections per thread ──────────────────────────────────
+  const [selectedRepoIds, setSelectedRepoIds] = useState<Set<string>>(new Set());
+  const repoSelectionLoadedForRef = useRef<string | null>(null);
+
+  // Load saved selections when open discussion changes
+  useEffect(() => {
+    if (!openThreadId) {
+      setSelectedRepoIds(new Set());
+      repoSelectionLoadedForRef.current = null;
+      return;
+    }
+    if (repoSelectionLoadedForRef.current === openThreadId) return;
+    // Clear immediately so old discussion's selections don't bleed
+    setSelectedRepoIds(new Set());
+    repoSelectionLoadedForRef.current = openThreadId;
+    const rid = openThreadId;
+    fetch(`/api/thread-repos?rootMessageId=${encodeURIComponent(rid)}`)
+      .then((res) => res.json())
+      .then((data: { repoIds?: string[] }) => {
+        // Only apply if we're still on the same discussion
+        if (repoSelectionLoadedForRef.current !== rid) return;
+        if (data.repoIds && data.repoIds.length > 0) {
+          setSelectedRepoIds(new Set(data.repoIds));
+        }
+      })
+      .catch(() => {});
+  }, [openThreadId]);
+
+  const handleRepoSelectionChange = useCallback(
+    (next: Set<string>) => {
+      setSelectedRepoIds(next);
+      if (openThreadId) {
+        fetch("/api/thread-repos", {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ rootMessageId: openThreadId, repoIds: [...next] }),
+        }).catch(() => {});
+      }
+    },
+    [openThreadId]
   );
 
   const renderReplyComposer = useCallback(
@@ -1458,8 +1521,8 @@ export function ChatContainer({
 
       return (
         <Composer
-          onSend={(message, maxRounds, _attachmentIds, _attachments, pinnedParticipantId) =>
-            handleThreadReply(rootMessageId, message, maxRounds, pinnedParticipantId)
+          onSend={(message, maxRounds, _attachmentIds, _attachments, pinnedParticipantId, promptPrefix) =>
+            handleThreadReply(rootMessageId, message, maxRounds, pinnedParticipantId, promptPrefix)
           }
           onStop={() => handleStopThread(rootMessageId)}
           loading={threadActivityStatus !== "ready"}
@@ -1472,10 +1535,13 @@ export function ChatContainer({
           placeholder="Reply — @name to mention, /search, /summarize"
           autoMode={autoMode}
           onAutoModeChange={handleAutoModeChange}
+          repos={activeProjectRepos}
+          selectedRepoIds={selectedRepoIds}
+          onRepoSelectionChange={handleRepoSelectionChange}
         />
       );
     },
-    [handleThreadReply, handleStopThread, streaming, activeParticipants, threadProjects, projectMentions, slashCommands, messages, autoMode, handleAutoModeChange, activeProcesses, activeChatRuns]
+    [handleThreadReply, handleStopThread, streaming, activeParticipants, threadProjects, projectMentions, slashCommands, messages, autoMode, handleAutoModeChange, activeProcesses, activeChatRuns, activeProjectRepos, selectedRepoIds, handleRepoSelectionChange]
   );
 
   const toggleWorkspaceSidebar = useCallback(() => {
@@ -1600,7 +1666,7 @@ export function ChatContainer({
 
   const mainToolbar = (
     <div
-      className="border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6"
+      className="desktop-titlebar border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6"
     >
       <div className="mx-auto flex max-w-5xl items-center gap-3">
         <div className="flex min-w-0 items-center flex-shrink-0">
@@ -1717,7 +1783,7 @@ export function ChatContainer({
             <div className="flex flex-1 min-h-0 bg-transparent relative">
               <div className="flex flex-col flex-1 min-w-0">
                 {openThreadId ? (
-                  <div className="border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6 transition-colors duration-200 shrink-0">
+                  <div className="desktop-titlebar border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6 transition-colors duration-200 shrink-0">
                     <div className="mx-auto flex max-w-5xl items-center gap-3 min-w-0">
                       <button
                         onClick={() => setOpenThreadId(null)}
@@ -1877,6 +1943,9 @@ export function ChatContainer({
                     onClearPendingThread={() => setPendingThreadInsert(null)}
                     autoMode={autoMode}
                     onAutoModeChange={handleAutoModeChange}
+                    repos={activeProjectRepos}
+                    selectedRepoIds={selectedRepoIds}
+                    onRepoSelectionChange={handleRepoSelectionChange}
                   />
                 )}
               </div>

package/cloud-runtime/standalone/components/chat-ui/Composer.tsx

@@ -16,6 +16,11 @@ import { useThreadMention, type Discussion } from "@/hooks/useThreadMention";
 import { useComposerAttachments } from "@/hooks/useComposerAttachments";
 import { useComposerHistory } from "@/hooks/useComposerHistory";
 import { buildAgentContext } from "@/lib/chat/agentContextBuilder";
+import {
+  clipboardMayContainImageAttachments,
+  getClipboardAttachmentFiles,
+  readClipboardAttachmentFiles,
+} from "@/lib/chat/paste-attachments";
 import type { ThreadRef } from "@/lib/thread-export";
 import {
   ParticipantMention,
@@ -32,8 +37,8 @@ import { ThreadMentionPopover } from "./ThreadMentionPopover";
 import { AttachmentTray } from "./AttachmentTray";
 import { ComposerDropZone } from "./ComposerDropZone";
 import type { Participant, GroupMessage } from "@/lib/types";
-import type { ProjectWithAgents } from "@/hooks/useProjects";
-import { Paperclip, Rocket } from "lucide-react";
+import type { ProjectWithAgents, ProjectRepo } from "@/hooks/useProjects";
+import { Paperclip, Rocket, FolderGit2, ChevronDown, X } from "lucide-react";
 
 import "@/styles/composer-pills.css";
 
@@ -52,7 +57,8 @@ interface Props {
     maxRounds: number,
     attachmentIds?: string[],
     attachments?: Attachment[],
-    pinnedParticipantId?: string
+    pinnedParticipantId?: string,
+    promptPrefix?: string
   ) => void;
   onStop: () => void;
   loading: boolean;
@@ -77,6 +83,12 @@ interface Props {
   pendingThreadInsert?: { title: string; threadId: string; messages: GroupMessage[] } | null;
   /** Clear the pending thread insert after processing */
   onClearPendingThread?: () => void;
+  /** Repos from the active project, available for scoping */
+  repos?: ProjectRepo[];
+  /** Controlled selected repo IDs (persisted per thread) */
+  selectedRepoIds?: Set<string>;
+  /** Called when repo selection changes */
+  onRepoSelectionChange?: (next: Set<string>) => void;
 }
 
 /**
@@ -119,12 +131,32 @@ export function Composer({
   onClearPendingThread,
   autoMode = false,
   onAutoModeChange,
+  repos = [],
+  selectedRepoIds: controlledSelectedRepoIds,
+  onRepoSelectionChange,
 }: Props) {
   const effectiveActivityStatus =
     activityStatus ?? (loading ? "working" : "ready");
   const isBusy = effectiveActivityStatus !== "ready";
 
   const [pinnedParticipantId, setPinnedParticipantId] = useState<string | null>(null);
+  const [internalSelectedRepoIds, setInternalSelectedRepoIds] = useState<Set<string>>(new Set());
+  const selectedRepoIds = controlledSelectedRepoIds ?? internalSelectedRepoIds;
+  const selectedRepoIdsRef = useRef(selectedRepoIds);
+  selectedRepoIdsRef.current = selectedRepoIds;
+  const setSelectedRepoIds = useCallback(
+    (update: Set<string> | ((prev: Set<string>) => Set<string>)) => {
+      const next = typeof update === "function" ? update(selectedRepoIdsRef.current) : update;
+      if (onRepoSelectionChange) {
+        onRepoSelectionChange(next);
+      } else {
+        setInternalSelectedRepoIds(next);
+      }
+    },
+    [onRepoSelectionChange]
+  );
+  const [repoDropdownOpen, setRepoDropdownOpen] = useState(false);
+  const repoDropdownRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const isComposingRef = useRef(false);
 
@@ -148,6 +180,30 @@ export function Composer({
     }
   }, [participants, pinnedParticipantId]);
 
+  // Close repo dropdown on click outside
+  useEffect(() => {
+    if (!repoDropdownOpen) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (repoDropdownRef.current && !repoDropdownRef.current.contains(e.target as Node)) {
+        setRepoDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [repoDropdownOpen]);
+
+  // Clear stale repo selections when available repos change (uncontrolled mode only).
+  // In controlled mode, the parent (ChatContainer) owns the state and handles cleanup.
+  useEffect(() => {
+    if (controlledSelectedRepoIds != null) return; // skip in controlled mode
+    if (internalSelectedRepoIds.size === 0) return;
+    const validIds = new Set(repos.map((r) => r.id));
+    const filtered = new Set([...internalSelectedRepoIds].filter((id) => validIds.has(id)));
+    if (filtered.size < internalSelectedRepoIds.size) {
+      setInternalSelectedRepoIds(filtered);
+    }
+  }, [repos, controlledSelectedRepoIds, internalSelectedRepoIds]);
+
   // ─── Tiptap editor ─────────────────────────────────────────────────────────
 
   const editor = useEditor({
@@ -178,15 +234,6 @@ export function Composer({
         role: "combobox",
         "aria-autocomplete": "list",
       },
-      handlePaste: (_view, event) => {
-        const files = event.clipboardData?.files;
-        if (files && files.length > 0) {
-          event.preventDefault();
-          attachments.stageFiles(files);
-          return true;
-        }
-        return false;
-      },
       handleDOMEvents: {
         compositionstart: () => {
           isComposingRef.current = true;
@@ -354,6 +401,38 @@ export function Composer({
     }
   }, [editor, mention]);
 
+  const handlePasteCapture = useCallback((event: React.ClipboardEvent<HTMLDivElement>) => {
+    const { clipboardData } = event;
+    const directFiles = getClipboardAttachmentFiles(clipboardData);
+    if (directFiles.length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      attachments.stageFiles(directFiles);
+      return;
+    }
+
+    const clipboardReader = typeof navigator !== "undefined" ? navigator.clipboard : undefined;
+    if (
+      !clipboardMayContainImageAttachments(clipboardData) ||
+      typeof clipboardReader?.read !== "function"
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    void readClipboardAttachmentFiles(clipboardData, clipboardReader)
+      .then((attachmentFiles) => {
+        if (attachmentFiles.length > 0) {
+          attachments.stageFiles(attachmentFiles);
+        }
+      })
+      .catch((error) => {
+        console.error("Failed to read pasted clipboard attachments:", error);
+      });
+  }, [attachments]);
+
   // ─── Selection handlers ────────────────────────────────────────────────────
 
   const applyMentionSelection = useCallback((suggestion: MentionSuggestion) => {
@@ -506,27 +585,48 @@ export function Composer({
 
     let messageText = trimmed || "(attached files)";
 
+    // Build prompt prefix — context injected into the API prompt but NOT shown in the chat thread
+    const prefixParts: string[] = [];
+
+    // Inject focused repos context
+    if (selectedRepoIds.size > 0) {
+      const selectedRepos = repos.filter((r) => selectedRepoIds.has(r.id));
+      if (selectedRepos.length > 0) {
+        const repoLines = selectedRepos
+          .map((r) => {
+            const parts = [r.name];
+            if (r.path) parts.push(`path: ${r.path}`);
+            if (r.notes) parts.push(r.notes);
+            return `- ${parts.join(" | ")}`;
+          })
+          .join("\n");
+        prefixParts.push(`Focused repos (the user is specifically talking about these repositories):\n${repoLines}`);
+      }
+    }
+
     // Inject thread references
     if (threadRefs.length > 0) {
       const threadContext = threadRefs
         .map((ref) => `- "${ref.title}" — ${ref.summary} (full transcript: ${ref.filePath})`)
         .join("\n");
-      messageText = `Referenced threads:\n${threadContext}\n\n${messageText}`;
+      prefixParts.push(`Referenced threads:\n${threadContext}`);
     }
 
     if (fileAttachments.hasFilePaths) {
       const ctx = await buildAgentContext(fileAttachments.filePaths);
       if (ctx.contextPrefix) {
-        messageText = ctx.contextPrefix + messageText;
+        prefixParts.push(ctx.contextPrefix.trimEnd());
       }
     }
 
+    const promptPrefix = prefixParts.length > 0 ? prefixParts.join("\n\n") + "\n\n" : undefined;
+
     // Save to composer history before sending
     if (trimmed) composerHistory.pushEntry(trimmed);
 
     const ids = attachments.attachmentIds.length > 0 ? attachments.attachmentIds : undefined;
     const metas = ids ? attachments.getAttachmentMetas() : undefined;
-    onSend(messageText, 10, ids, metas, pinnedParticipantId ?? undefined);
+    onSend(messageText, 10, ids, metas, pinnedParticipantId ?? undefined, promptPrefix);
 
     editor.commands.clearContent();
     setThreadRefs([]);
@@ -535,7 +635,7 @@ export function Composer({
     mention.close();
     command.close();
     threadMention.close();
-  }, [editor, mention, command, commands, onSend, attachments, fileAttachments, threadRefs, threadMention, composerHistory]);
+  }, [editor, mention, command, commands, onSend, attachments, fileAttachments, threadRefs, threadMention, composerHistory, selectedRepoIds, repos]);
 
   // ─── ARIA helpers ──────────────────────────────────────────────────────────
 
@@ -558,7 +658,7 @@ export function Composer({
     <div className="pb-6">
       <div className="max-w-3xl mx-auto">
         <ComposerDropZone onDrop={attachments.stageFiles}>
-          <div className="bg-white border border-gray-200 shadow-sm focus-within:border-gray-300 focus-within:ring-1 focus-within:ring-gray-300 dark:bg-gray-900 dark:border-gray-800 dark:shadow-lg dark:focus-within:border-gray-600 dark:focus-within:ring-gray-600 transition-all flex flex-col rounded-2xl">
+          <div className="bg-[var(--app-shell-surface)] border border-[var(--app-shell-border)] shadow-[var(--shadow-sm)] focus-within:border-[var(--app-shell-border-strong)] focus-within:ring-1 focus-within:ring-[var(--ring)] transition-all flex flex-col rounded-2xl">
           {/* Ship Mode header */}
           {onAutoModeChange && (
             <div className={`relative overflow-hidden border-b transition-all duration-500 ${autoMode ? "border-orange-200/50 dark:border-orange-500/30" : "border-gray-100 dark:border-gray-800/60"}`}>
@@ -645,7 +745,7 @@ export function Composer({
                 }}
               />
 
-              <div className="flex-1 relative" onClick={refreshMentionState}>
+              <div className="flex-1 relative" onClick={refreshMentionState} onPasteCapture={handlePasteCapture}>
                 <EditorContent editor={editor} className="composer-editor" />
                 <MentionPopover
                   isOpen={mention.isOpen && !command.isOpen}
@@ -692,7 +792,7 @@ export function Composer({
             </div>
 
             {/* Bottom Toolbar */}
-            <div className="flex items-center justify-between px-3 py-2 border-t border-gray-100 dark:border-gray-800/60 transition-colors">
+            <div className="flex items-center justify-between px-3 py-2 border-t border-[var(--app-shell-border)] transition-colors">
               <div className="flex items-center gap-3">
                 <button
                   type="button"
@@ -761,6 +861,102 @@ export function Composer({
                     </span>
                   </>
                 )}
+
+                {/* Repo Select + Pills */}
+                {repos.length > 0 && (
+                  <>
+                    <div className="w-px h-4 bg-[var(--app-shell-border)]" />
+                    <div className="flex items-center gap-1.5">
+                      {/* Dropdown trigger */}
+                      <div className="relative" ref={repoDropdownRef}>
+                        <button
+                          type="button"
+                          onClick={() => setRepoDropdownOpen((v) => !v)}
+                          className="composer-repo-select-trigger"
+                          aria-haspopup="listbox"
+                          aria-expanded={repoDropdownOpen}
+                        >
+                          <FolderGit2 className="h-3.5 w-3.5" strokeWidth={1.75} />
+                          <span>Repos</span>
+                          <ChevronDown className={`h-3 w-3 transition-transform ${repoDropdownOpen ? "rotate-180" : ""}`} />
+                        </button>
+                        {repoDropdownOpen && (
+                          <div className="composer-repo-dropdown" role="listbox" aria-multiselectable="true">
+                            {repos.map((repo) => {
+                              const isSelected = selectedRepoIds.has(repo.id);
+                              return (
+                                <button
+                                  key={repo.id}
+                                  type="button"
+                                  role="option"
+                                  aria-selected={isSelected}
+                                  className={`composer-repo-dropdown__item ${isSelected ? "composer-repo-dropdown__item--selected" : ""}`}
+                                  onClick={() =>
+                                    setSelectedRepoIds((prev) => {
+                                      const next = new Set(prev);
+                                      if (next.has(repo.id)) {
+                                        next.delete(repo.id);
+                                      } else {
+                                        next.add(repo.id);
+                                      }
+                                      return next;
+                                    })
+                                  }
+                                >
+                                  <span className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 transition-colors ${isSelected ? "bg-emerald-500 border-emerald-500 text-white" : "border-[var(--app-shell-border-strong)]"}`}>
+                                    {isSelected && (
+                                      <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                                    )}
+                                  </span>
+                                  <span className="truncate">{repo.name}</span>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                      {/* Selected repo pills (max 3 visible, then +N) */}
+                      {(() => {
+                        const selected = repos.filter((r) => selectedRepoIds.has(r.id));
+                        const visible = selected.slice(0, 1);
+                        const overflow = selected.length - 1;
+                        return (
+                          <>
+                            {visible.map((repo) => (
+                              <span
+                                key={repo.id}
+                                className="composer-repo-pill"
+                                title={repo.path || repo.name}
+                              >
+                                <FolderGit2 className="h-3 w-3 shrink-0" strokeWidth={1.75} />
+                                <span className="composer-repo-pill__name">{repo.name}</span>
+                                <button
+                                  type="button"
+                                  className="composer-repo-pill__remove"
+                                  onClick={() =>
+                                    setSelectedRepoIds((prev) => {
+                                      const next = new Set(prev);
+                                      next.delete(repo.id);
+                                      return next;
+                                    })
+                                  }
+                                  aria-label={`Remove ${repo.name}`}
+                                >
+                                  <X className="h-3 w-3" />
+                                </button>
+                              </span>
+                            ))}
+                            {overflow > 0 && (
+                              <span className="composer-repo-pill composer-repo-pill--overflow">
+                                +{overflow}
+                              </span>
+                            )}
+                          </>
+                        );
+                      })()}
+                    </div>
+                  </>
+                )}
               </div>
 
               {/* Send / Stop Button */}