@mndrk/agx 2.0.32 → 2.0.34

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 */}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import type { Components } from "react-markdown";
@@ -9,6 +10,18 @@ interface Props {
   isUser?: boolean;
 }
 
+function isBlockCode(className?: string, children?: React.ReactNode) {
+  if (className?.includes("language-")) return true;
+  const text = React.Children.toArray(children).join("");
+  return text.includes("\n");
+}
+
+function codeBlockClasses(isUser?: boolean) {
+  return isUser
+    ? "bg-[var(--card-bg)]/[0.12] rounded-lg p-3 my-3 overflow-x-auto border border-white/[0.08]"
+    : "bg-black/[0.06] rounded-lg p-3 my-3 overflow-x-auto border border-black/[0.06]";
+}
+
 const components: Components = {
   p: ({ children }) => <p className="mb-3 last:mb-0 leading-relaxed">{children}</p>,
   strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
@@ -30,12 +43,10 @@ const components: Components = {
     <h3 className="text-sm font-semibold mb-1.5 mt-2.5 first:mt-0">{children}</h3>
   ),
   code: ({ children, className }) => {
-    const isBlock = className?.includes("language-");
+    const isBlock = isBlockCode(className, children);
     if (isBlock) {
       return (
-        <pre className="bg-black/[0.06] rounded-lg p-3 my-3 overflow-x-auto border border-black/[0.06]">
-          <code className="text-[13px] leading-relaxed font-mono">{children}</code>
-        </pre>
+        <code className={`text-[13px] leading-relaxed font-mono whitespace-pre ${className ?? ""}`.trim()}>{children}</code>
       );
     }
     return (
@@ -44,7 +55,7 @@ const components: Components = {
       </code>
     );
   },
-  pre: ({ children }) => <>{children}</>,
+  pre: ({ children }) => <pre className={codeBlockClasses(false)}>{children}</pre>,
   blockquote: ({ children }) => (
     <blockquote className="border-l-[3px] border-[var(--border)] pl-3 my-3 text-[var(--muted-foreground)]">
       {children}
@@ -80,12 +91,10 @@ const userComponents: Components = {
     <ol className="list-decimal pl-5 mb-3 last:mb-0 space-y-1.5 marker:text-white/60">{children}</ol>
   ),
   code: ({ children, className }) => {
-    const isBlock = className?.includes("language-");
+    const isBlock = isBlockCode(className, children);
     if (isBlock) {
       return (
-        <pre className="bg-[var(--card-bg)]/[0.12] rounded-lg p-3 my-3 overflow-x-auto border border-white/[0.08]">
-          <code className="text-[13px] leading-relaxed font-mono">{children}</code>
-        </pre>
+        <code className={`text-[13px] leading-relaxed font-mono whitespace-pre ${className ?? ""}`.trim()}>{children}</code>
       );
     }
     return (
@@ -94,6 +103,7 @@ const userComponents: Components = {
       </code>
     );
   },
+  pre: ({ children }) => <pre className={codeBlockClasses(true)}>{children}</pre>,
   blockquote: ({ children }) => (
     <blockquote className="border-l-[3px] border-white/30 pl-3 my-3 text-white/80">
       {children}