@geminilight/mindos 0.6.29 → 0.6.31

package/app/components/ask/AskContent.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
-import { Sparkles, Send, Paperclip, StopCircle, SquarePen, History, X, Zap, Maximize2, Minimize2, PanelRight, AppWindow } from 'lucide-react';
+import { Sparkles, Send, StopCircle, SquarePen, History, X, Maximize2, Minimize2, PanelRight, AppWindow, Plus } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
-import type { Message } from '@/lib/types';
+import type { Message, ImagePart } from '@/lib/types';
 import { useAskSession } from '@/hooks/useAskSession';
 import { useFileUpload } from '@/hooks/useFileUpload';
+import { useImageUpload } from '@/hooks/useImageUpload';
 import { useMention } from '@/hooks/useMention';
 import { useSlashCommand } from '@/hooks/useSlashCommand';
 import type { SlashItem } from '@/hooks/useSlashCommand';
@@ -15,21 +16,18 @@ import SlashCommandPopover from '@/components/ask/SlashCommandPopover';
 import SessionHistory from '@/components/ask/SessionHistory';
 import SessionTabBar from '@/components/ask/SessionTabBar';
 import FileChip from '@/components/ask/FileChip';
+import AgentSelectorCapsule from '@/components/ask/AgentSelectorCapsule';
 import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
 import { isRetryableError, retryDelay, sleep } from '@/lib/agent/reconnect';
 import { cn } from '@/lib/utils';
-import { useComposerVerticalResize } from '@/hooks/useComposerVerticalResize';
-
-const PANEL_COMPOSER_STORAGE = 'mindos-agent-panel-composer-height';
-const PANEL_COMPOSER_DEFAULT = 104;
-const PANEL_COMPOSER_MIN = 84;
-const PANEL_COMPOSER_MAX_ABS = 440;
-const PANEL_COMPOSER_MAX_VIEW = 0.48;
-const PANEL_COMPOSER_KEY_STEP = 24;
-/** 输入框随内容增高，超过此行数后在框内滚动（与常见 IM 一致） */
-const PANEL_TEXTAREA_MAX_VISIBLE_LINES = 8;
-
-function syncTextareaToContent(el: HTMLTextAreaElement, maxVisibleLines: number, availableHeight?: number): void {
+import { useAcpDetection } from '@/hooks/useAcpDetection';
+import type { AcpAgentSelection } from '@/hooks/useAskModal';
+
+/** Textarea auto-grows with content up to this many visible lines, then scrolls */
+const TEXTAREA_MAX_VISIBLE_LINES = 8;
+
+/** Auto-size textarea height to fit content, capped at maxVisibleLines */
+function syncTextareaToContent(el: HTMLTextAreaElement, maxVisibleLines: number): void {
   const style = getComputedStyle(el);
   const parsedLh = parseFloat(style.lineHeight);
   const parsedFs = parseFloat(style.fontSize);
@@ -38,33 +36,13 @@ function syncTextareaToContent(el: HTMLTextAreaElement, maxVisibleLines: number,
   const pad =
     (Number.isFinite(parseFloat(style.paddingTop)) ? parseFloat(style.paddingTop) : 0) +
     (Number.isFinite(parseFloat(style.paddingBottom)) ? parseFloat(style.paddingBottom) : 0);
-  let maxH = lineHeight * maxVisibleLines + pad;
-  if (availableHeight && Number.isFinite(availableHeight) && availableHeight > 0) {
-    maxH = Math.min(maxH, availableHeight);
-  }
+  const maxH = lineHeight * maxVisibleLines + pad;
   if (!Number.isFinite(maxH) || maxH <= 0) return;
   el.style.height = '0px';
   const next = Math.min(el.scrollHeight, maxH);
   el.style.height = `${Number.isFinite(next) ? next : maxH}px`;
-}
-
-function panelComposerMaxForViewport(): number {
-  if (typeof window === 'undefined') return PANEL_COMPOSER_MAX_ABS;
-  return Math.min(PANEL_COMPOSER_MAX_ABS, Math.floor(window.innerHeight * PANEL_COMPOSER_MAX_VIEW));
-}
-
-function readStoredPanelComposerHeight(): number {
-  if (typeof window === 'undefined') return PANEL_COMPOSER_DEFAULT;
-  try {
-    const s = localStorage.getItem(PANEL_COMPOSER_STORAGE);
-    if (s) {
-      const n = parseInt(s, 10);
-      if (Number.isFinite(n) && n >= PANEL_COMPOSER_MIN && n <= PANEL_COMPOSER_MAX_ABS) return n;
-    }
-  } catch {
-    /* ignore */
-  }
-  return PANEL_COMPOSER_DEFAULT;
+  // Only show scrollbar when content exceeds max height
+  el.style.overflowY = el.scrollHeight > maxH ? 'auto' : 'hidden';
 }
 
 interface AskContentProps {
@@ -72,6 +50,8 @@ interface AskContentProps {
   visible: boolean;
   currentFile?: string;
   initialMessage?: string;
+  /** ACP agent pre-selected via "Use" button from A2A tab */
+  initialAcpAgent?: AcpAgentSelection | null;
   onFirstMessage?: () => void;
   /** 'modal' renders close button + ESC handler; 'panel' renders compact header */
   variant: 'modal' | 'panel';
@@ -85,91 +65,16 @@ interface AskContentProps {
   onModeSwitch?: () => void;
 }
 
-export default function AskContent({ visible, currentFile, initialMessage, onFirstMessage, variant, onClose, maximized, onMaximize, askMode, onModeSwitch }: AskContentProps) {
+export default function AskContent({ visible, currentFile, initialMessage, initialAcpAgent, onFirstMessage, variant, onClose, maximized, onMaximize, askMode, onModeSwitch }: AskContentProps) {
   const isPanel = variant === 'panel';
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
   const abortRef = useRef<AbortController | null>(null);
   const firstMessageFired = useRef(false);
   const { t } = useLocale();
-
-  const [panelComposerHeight, setPanelComposerHeight] = useState(PANEL_COMPOSER_DEFAULT);
-  const panelComposerHRef = useRef(panelComposerHeight);
-  panelComposerHRef.current = panelComposerHeight;
-
-  useEffect(() => {
-    const stored = readStoredPanelComposerHeight();
-    if (stored !== PANEL_COMPOSER_DEFAULT) {
-      setPanelComposerHeight(stored);
-      panelComposerHRef.current = stored;
-    }
-  }, []);
-
-  const getPanelComposerHeight = useCallback(() => panelComposerHRef.current, []);
-  const persistPanelComposerHeight = useCallback((h: number) => {
-    try {
-      localStorage.setItem(PANEL_COMPOSER_STORAGE, String(h));
-    } catch {
-      /* ignore */
-    }
-  }, []);
-
-  const onPanelComposerResizePointerDown = useComposerVerticalResize({
-    minHeight: PANEL_COMPOSER_MIN,
-    maxHeightAbs: PANEL_COMPOSER_MAX_ABS,
-    maxHeightViewportRatio: PANEL_COMPOSER_MAX_VIEW,
-    getHeight: getPanelComposerHeight,
-    setHeight: setPanelComposerHeight,
-    persist: persistPanelComposerHeight,
-  });
-
-  const [panelComposerViewportMax, setPanelComposerViewportMax] = useState(PANEL_COMPOSER_MAX_ABS);
-
-  useEffect(() => {
-    setPanelComposerViewportMax(panelComposerMaxForViewport());
-  }, []);
-
-  const applyPanelComposerClampAndPersist = useCallback(() => {
-    const maxH = panelComposerMaxForViewport();
-    setPanelComposerViewportMax(maxH);
-    const h = panelComposerHRef.current;
-    if (h > maxH) {
-      setPanelComposerHeight(maxH);
-      panelComposerHRef.current = maxH;
-      persistPanelComposerHeight(maxH);
-    }
-  }, [persistPanelComposerHeight]);
-
-  const handlePanelComposerSeparatorKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLElement>) => {
-      if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) return;
-      e.preventDefault();
-      const maxH = panelComposerMaxForViewport();
-      setPanelComposerViewportMax(maxH);
-      const h = panelComposerHRef.current;
-      let next = h;
-      if (e.key === 'ArrowUp') next = h + PANEL_COMPOSER_KEY_STEP;
-      else if (e.key === 'ArrowDown') next = h - PANEL_COMPOSER_KEY_STEP;
-      else if (e.key === 'Home') next = PANEL_COMPOSER_MIN;
-      else if (e.key === 'End') next = maxH;
-      const clamped = Math.round(Math.max(PANEL_COMPOSER_MIN, Math.min(maxH, next)));
-      setPanelComposerHeight(clamped);
-      panelComposerHRef.current = clamped;
-      persistPanelComposerHeight(clamped);
-    },
-    [persistPanelComposerHeight],
-  );
-
-  const resetPanelComposerHeight = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setPanelComposerHeight(PANEL_COMPOSER_DEFAULT);
-      panelComposerHRef.current = PANEL_COMPOSER_DEFAULT;
-      persistPanelComposerHeight(PANEL_COMPOSER_DEFAULT);
-    },
-    [persistPanelComposerHeight],
-  );
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
 
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -179,13 +84,17 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
   const [attachedFiles, setAttachedFiles] = useState<string[]>([]);
   const [showHistory, setShowHistory] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
+  const [showAttachMenu, setShowAttachMenu] = useState(false);
 
   const [selectedSkill, setSelectedSkill] = useState<SlashItem | null>(null);
+  const [selectedAcpAgent, setSelectedAcpAgent] = useState<AcpAgentSelection | null>(null);
 
   const session = useAskSession(currentFile);
   const upload = useFileUpload();
+  const imageUpload = useImageUpload();
   const mention = useMention();
   const slash = useSlashCommand();
+  const acpDetection = useAcpDetection();
 
   useEffect(() => {
     const handler = (e: Event) => {
@@ -215,11 +124,13 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
       setInput(initialMessage || '');
       firstMessageFired.current = false;
       setAttachedFiles(currentFile ? [currentFile] : []);
-      upload.clearAttachments();
-      mention.resetMention();
-      slash.resetSlash();
-      setSelectedSkill(null);
-      setShowHistory(false);
+    upload.clearAttachments();
+    imageUpload.clearImages();
+    mention.resetMention();
+    slash.resetSlash();
+    setSelectedSkill(null);
+    setSelectedAcpAgent(initialAcpAgent ?? null);
+    setShowHistory(false);
     } else if (fileChanged) {
       // Update attached file context to match new file (don't reset session/messages)
       setAttachedFiles(currentFile ? [currentFile] : []);
@@ -259,12 +170,14 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     return () => window.removeEventListener('keydown', handler);
   }, [variant, visible, onClose, mention, slash]);
 
+  // Close attach menu on any outside click
   useEffect(() => {
-    if (!isPanel) return;
-    applyPanelComposerClampAndPersist();
-    window.addEventListener('resize', applyPanelComposerClampAndPersist);
-    return () => window.removeEventListener('resize', applyPanelComposerClampAndPersist);
-  }, [isPanel, applyPanelComposerClampAndPersist]);
+    if (!showAttachMenu) return;
+    const handler = () => setShowAttachMenu(false);
+    // Delay to avoid closing immediately from the click that opened it
+    const id = setTimeout(() => document.addEventListener('click', handler), 0);
+    return () => { clearTimeout(id); document.removeEventListener('click', handler); };
+  }, [showAttachMenu]);
 
   const formRef = useRef<HTMLFormElement>(null);
 
@@ -272,11 +185,8 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     if (!visible) return;
     const el = inputRef.current;
     if (!el || !(el instanceof HTMLTextAreaElement)) return;
-    const form = formRef.current;
-    const maxLines = isPanel ? PANEL_TEXTAREA_MAX_VISIBLE_LINES : 6;
-    const availableH = isPanel && form ? form.clientHeight - 40 : undefined;
-    syncTextareaToContent(el, maxLines, availableH);
-  }, [input, isPanel, isLoading, visible, panelComposerHeight]);
+    syncTextareaToContent(el, TEXTAREA_MAX_VISIBLE_LINES);
+  }, [input, isLoading, visible]);
 
   const mentionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const slashTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -372,12 +282,12 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         }
         return;
       }
-      if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && !isLoading && input.trim()) {
+      if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && !isLoading && (input.trim() || imageUpload.images.length > 0)) {
         e.preventDefault();
         (e.currentTarget as HTMLTextAreaElement).form?.requestSubmit();
       }
     },
-    [mention, selectMention, slash, selectSlashCommand, isLoading, input],
+    [mention, selectMention, slash, selectSlashCommand, isLoading, input, imageUpload.images],
   );
 
   const handleStop = useCallback(() => { abortRef.current?.abort(); }, []);
@@ -386,21 +296,22 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     e.preventDefault();
     if (mention.mentionQuery !== null || slash.slashQuery !== null) return;
     const text = input.trim();
-    if (!text || isLoading) return;
+    if ((!text && imageUpload.images.length === 0) || isLoading) return;
 
-    const content = selectedSkill
-      ? `Use the skill ${selectedSkill.name}: ${text}`
-      : text;
+    const pendingImages = imageUpload.images.length > 0 ? [...imageUpload.images] : undefined;
     const userMsg: Message = {
       role: 'user',
-      content,
+      content: text,  // No [ACP:] prefix — pass clean text
       timestamp: Date.now(),
       ...(selectedSkill && { skillName: selectedSkill.name }),
+      ...(pendingImages && { images: pendingImages }),
     };
+    imageUpload.clearImages();
     const requestMessages = [...session.messages, userMsg];
     session.setMessages([...requestMessages, { role: 'assistant', content: '', timestamp: Date.now() }]);
     setInput('');
     setSelectedSkill(null);
+    setSelectedAcpAgent(null);
     if (onFirstMessage && !firstMessageFired.current) {
       firstMessageFired.current = true;
       onFirstMessage();
@@ -430,6 +341,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           ? f.content.slice(0, 20_000) + '\n\n[...truncated to first ~20000 chars]'
           : f.content,
       })),
+      selectedAcpAgent,  // Send structured field instead of text prefix
     });
 
     const doFetch = async (): Promise<{ finalMessage: Message }> => {
@@ -547,7 +459,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
       setReconnectAttempt(0);
       abortRef.current = null;
     }
-  }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, mention.mentionQuery, slash.slashQuery, selectedSkill, t.ask.errorNoResponse, t.ask.stopped, onFirstMessage]);
+  }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, imageUpload.images, imageUpload.clearImages, mention.mentionQuery, slash.slashQuery, selectedSkill, selectedAcpAgent, t.ask.errorNoResponse, t.ask.stopped, onFirstMessage]);
 
   const handleResetSession = useCallback(() => {
     if (isLoading) return;
@@ -555,15 +467,18 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     setInput('');
     setAttachedFiles(currentFile ? [currentFile] : []);
     upload.clearAttachments();
+    imageUpload.clearImages();
     mention.resetMention();
     slash.resetSlash();
     setSelectedSkill(null);
+    setSelectedAcpAgent(null);
     setShowHistory(false);
     setTimeout(() => inputRef.current?.focus(), 0);
-  }, [isLoading, currentFile, session, upload, mention, slash]);
+  }, [isLoading, currentFile, session, upload, imageUpload, mention, slash]);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    if (e.dataTransfer.types.includes('text/mindos-path')) {
+    // Accept mindos file paths and image drops
+    if (e.dataTransfer.types.includes('text/mindos-path') || e.dataTransfer.types.includes('Files')) {
       e.preventDefault();
       e.dataTransfer.dropEffect = 'copy';
       setIsDragOver(true);
@@ -572,14 +487,32 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
 
   const handleDragLeave = useCallback(() => setIsDragOver(false), []);
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
     e.preventDefault();
     setIsDragOver(false);
+    // Try mindos file path first
     const filePath = e.dataTransfer.getData('text/mindos-path');
     if (filePath && !attachedFiles.includes(filePath)) {
       setAttachedFiles(prev => [...prev, filePath]);
+      return;
+    }
+    // Try image drop
+    await imageUpload.handleDrop(e);
+  }, [attachedFiles, imageUpload]);
+
+  /** Handle paste — intercept images before normal text paste */
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    // Check synchronously for image items — must preventDefault before awaiting
+    const hasImageItem = Array.from(items).some(
+      item => item.kind === 'file' && item.type.startsWith('image/')
+    );
+    if (hasImageItem) {
+      e.preventDefault();
+      void imageUpload.handlePaste(e);
     }
-  }, [attachedFiles]);
+  }, [imageUpload]);
 
   const handleLoadSession = useCallback((id: string) => {
     session.loadSession(id);
@@ -587,14 +520,16 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     setInput('');
     setAttachedFiles(currentFile ? [currentFile] : []);
     upload.clearAttachments();
+    imageUpload.clearImages();
     mention.resetMention();
     slash.resetSlash();
     setSelectedSkill(null);
+    setSelectedAcpAgent(null);
     setTimeout(() => inputRef.current?.focus(), 0);
-  }, [session, currentFile, upload, mention, slash]);
+  }, [session, currentFile, upload, imageUpload, mention, slash]);
 
   const iconSize = isPanel ? 13 : 14;
-  const inputIconSize = isPanel ? 14 : 15;
+  const inputIconSize = 15;
 
   return (
     <>
@@ -679,7 +614,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
 
       {/* Popovers — flex children so they stay within overflow boundary (absolute positioning would be clipped by RightAskPanel's overflow-hidden) */}
       {mention.mentionQuery !== null && mention.mentionResults.length > 0 && (
-        <div className="shrink-0 px-2 pb-1">
+        <div className="shrink-0 px-3 pb-1">
           <MentionPopover
             results={mention.mentionResults}
             selectedIndex={mention.mentionIndex}
@@ -690,7 +625,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
       )}
 
       {slash.slashQuery !== null && slash.slashResults.length > 0 && (
-        <div className="shrink-0 px-2 pb-1">
+        <div className="shrink-0 px-3 pb-1">
           <SlashCommandPopover
             results={slash.slashResults}
             selectedIndex={slash.slashIndex}
@@ -700,99 +635,111 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         </div>
       )}
 
-      {/* Input area — panel: fixed-height shell + top drag handle (persisted); modal: simple block */}
+      {/* Input area — auto-height composer, no manual resize */}
       <div
         className={cn(
           'shrink-0 border-t border-border',
-          isPanel && 'flex flex-col overflow-hidden bg-card',
           isDragOver && 'ring-2 ring-[var(--amber)] ring-inset bg-[var(--amber-dim)]',
         )}
-        style={isPanel ? { height: panelComposerHeight } : undefined}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
       >
-        {isPanel ? (
-          <div
-            role="separator"
-            tabIndex={0}
-            aria-orientation="horizontal"
-            aria-label={`${t.ask.panelComposerResize}. ${t.ask.panelComposerResetHint}. ${t.ask.panelComposerKeyboard}`}
-            aria-valuemin={PANEL_COMPOSER_MIN}
-            aria-valuemax={panelComposerViewportMax}
-            aria-valuenow={panelComposerHeight}
-            title={`${t.ask.panelComposerResize} · ${t.ask.panelComposerResetHint} · ${t.ask.panelComposerKeyboard}`}
-            onPointerDown={onPanelComposerResizePointerDown}
-            onKeyDown={handlePanelComposerSeparatorKeyDown}
-            onDoubleClick={resetPanelComposerHeight}
-            className="group flex h-3 shrink-0 cursor-ns-resize items-center justify-center border-b border-border/50 bg-muted/[0.06] transition-colors hover:bg-muted/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
-          >
-            <span
-              className="pointer-events-none h-1 w-10 rounded-full bg-border transition-colors group-hover:bg-[var(--amber)]/45 group-active:bg-[var(--amber)]/60"
-              aria-hidden
-            />
-          </div>
-        ) : null}
 
-        <div className={cn(isPanel && 'flex min-h-0 flex-1 flex-col overflow-y-auto')}>
-          {attachedFiles.length > 0 && (
-            <div className={cn('shrink-0', isPanel ? 'px-3 pt-2 pb-1' : 'px-4 pt-2.5 pb-1')}>
-              <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>
-                {t.ask.attachFile}
-              </div>
-              <div className={`flex flex-wrap ${isPanel ? 'gap-1' : 'gap-1.5'}`}>
-                {attachedFiles.map(f => (
-                  <FileChip key={f} path={f} onRemove={() => setAttachedFiles(prev => prev.filter(x => x !== f))} />
-                ))}
-              </div>
+        {/* Unified context chip flow */}
+        {(attachedFiles.length > 0 || upload.localAttachments.length > 0 || imageUpload.images.length > 0 || selectedSkill || selectedAcpAgent || upload.uploadError || imageUpload.imageError) && (
+          <div className={cn('shrink-0 px-3 pt-2 pb-1', isPanel ? 'max-h-24 overflow-y-auto' : 'max-h-28 overflow-y-auto')}>
+            <div className="flex flex-wrap gap-1.5">
+              {/* KB files (@ attached) */}
+              {attachedFiles.map(f => (
+                <FileChip key={f} path={f} variant="kb" onRemove={() => setAttachedFiles(prev => prev.filter(x => x !== f))} />
+              ))}
+              {/* Uploaded files */}
+              {upload.localAttachments.map((f, idx) => (
+                <FileChip key={`up-${f.name}-${idx}`} path={f.name} variant="upload" onRemove={() => upload.removeAttachment(idx)} />
+              ))}
+              {/* Images (name chip + hover preview) */}
+              {imageUpload.images.map((img, idx) => (
+                <FileChip
+                  key={`img-${idx}`}
+                  path={`Image ${idx + 1}`}
+                  variant="image"
+                  imageData={img.data}
+                  imageMime={img.mimeType}
+                  onRemove={() => imageUpload.removeImage(idx)}
+                />
+              ))}
+              {/* Skill */}
+              {selectedSkill && (
+                <FileChip
+                  path={selectedSkill.name}
+                  variant="skill"
+                  onRemove={() => { setSelectedSkill(null); inputRef.current?.focus(); }}
+                />
+              )}
+              {/* Agent */}
+              {selectedAcpAgent && (
+                <FileChip
+                  path={selectedAcpAgent.name}
+                  variant="agent"
+                  onRemove={() => { setSelectedAcpAgent(null); inputRef.current?.focus(); }}
+                />
+              )}
             </div>
-          )}
+            {/* Errors (merged) */}
+            {(upload.uploadError || imageUpload.imageError) && (
+              <div className="mt-1 text-xs text-error">{upload.uploadError || imageUpload.imageError}</div>
+            )}
+          </div>
+        )}
 
-          {upload.localAttachments.length > 0 && (
-            <div className={cn('shrink-0', isPanel ? 'px-3 pb-1' : 'px-4 pb-1')}>
-              <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>
-                {t.ask.uploadedFiles}
-              </div>
-              <div className={`flex flex-wrap ${isPanel ? 'gap-1' : 'gap-1.5'}`}>
-                {upload.localAttachments.map((f, idx) => (
-                  <FileChip key={`${f.name}-${idx}`} path={f.name} variant="upload" onRemove={() => upload.removeAttachment(idx)} />
-                ))}
-              </div>
-            </div>
-          )}
+        {/* Agent selector — only when no agent selected but agents available (mounted guard for hydration) */}
+        {mounted && !selectedAcpAgent && acpDetection.installedAgents.length > 0 && (
+          <div className="px-3 pt-1 pb-0.5">
+            <AgentSelectorCapsule
+              selectedAgent={null}
+              onSelect={setSelectedAcpAgent}
+              installedAgents={acpDetection.installedAgents}
+              loading={acpDetection.loading}
+            />
+          </div>
+        )}
 
-          {selectedSkill && (
-            <div className={cn('shrink-0', isPanel ? 'px-3 pt-1.5 pb-1' : 'px-4 pt-2 pb-1')}>
-              <span className="inline-flex items-center gap-1.5 pl-2 pr-1 py-1 rounded-md text-xs bg-[var(--amber)]/10 border border-[var(--amber)]/25 text-foreground">
-                <Zap size={11} className="text-[var(--amber)] shrink-0" />
-                <span className="font-medium">{selectedSkill.name}</span>
+        {/* Input form */}
+        <form
+          ref={formRef}
+          onSubmit={handleSubmit}
+          className="flex items-end gap-1.5 px-3 py-2"
+        >
+          {/* + attach button with mini menu */}
+          <div className="relative shrink-0">
+            <button
+              type="button"
+              onClick={() => setShowAttachMenu(v => !v)}
+              className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              title={t.hints.attachFile}
+            >
+              <Plus size={inputIconSize} />
+            </button>
+            {showAttachMenu && (
+              <div className="absolute bottom-full left-0 mb-1 py-1 rounded-lg border border-border bg-card shadow-lg z-50 min-w-[140px]">
                 <button
                   type="button"
-                  onClick={() => { setSelectedSkill(null); inputRef.current?.focus(); }}
-                  className="p-0.5 rounded text-muted-foreground hover:text-foreground transition-colors shrink-0"
-                  aria-label={`Remove skill ${selectedSkill.name}`}
+                  className="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted transition-colors text-left"
+                  onClick={() => { setShowAttachMenu(false); upload.uploadInputRef.current?.click(); }}
                 >
-                  <X size={10} />
+                  File
                 </button>
-              </span>
-            </div>
-          )}
-
-          {upload.uploadError && (
-            <div className={cn('shrink-0 pb-1 text-xs text-error', isPanel ? 'px-3' : 'px-4')}>{upload.uploadError}</div>
-          )}
-
-          <form
-            ref={formRef}
-            onSubmit={handleSubmit}
-            className={cn(
-              'flex',
-              isPanel ? 'min-h-0 flex-1 items-end gap-1.5 px-2 py-2' : 'items-end gap-2 px-3 py-3',
+                <button
+                  type="button"
+                  className="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted transition-colors text-left"
+                  onClick={() => { setShowAttachMenu(false); imageInputRef.current?.click(); }}
+                >
+                  Image
+                </button>
+              </div>
             )}
-          >
-          <button type="button" onClick={() => upload.uploadInputRef.current?.click()} className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0" title={t.hints.attachFile}>
-            <Paperclip size={inputIconSize} />
-          </button>
+          </div>
 
           <input
             ref={upload.uploadInputRef}
@@ -806,6 +753,18 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
               inputEl.value = '';
             }}
           />
+          <input
+            ref={imageInputRef}
+            type="file"
+            className="hidden"
+            multiple
+            accept="image/png,image/jpeg,image/gif,image/webp"
+            onChange={async (e) => {
+              const inputEl = e.currentTarget;
+              await imageUpload.handleFileSelect(inputEl.files);
+              inputEl.value = '';
+            }}
+          />
 
           <textarea
             ref={(el) => {
@@ -814,12 +773,10 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             value={input}
             onChange={e => handleInputChange(e.target.value, e.target.selectionStart ?? undefined)}
             onKeyDown={handleInputKeyDown}
+            onPaste={handlePaste}
             placeholder={t.ask.placeholder}
             rows={1}
-            className={cn(
-              'min-w-0 flex-1 resize-none overflow-y-auto bg-transparent text-sm leading-snug text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-0',
-              isPanel ? 'py-2' : 'py-1.5',
-            )}
+            className="min-w-0 flex-1 resize-none overflow-y-hidden bg-transparent py-1.5 text-sm leading-snug text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-0"
           />
 
           {isLoading ? (
@@ -827,30 +784,31 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
               {loadingPhase === 'reconnecting' ? <X size={inputIconSize} /> : <StopCircle size={inputIconSize} />}
             </button>
           ) : (
-            <button type="submit" disabled={!input.trim() || mention.mentionQuery !== null || slash.slashQuery !== null} title={!input.trim() ? t.hints.typeMessage : mention.mentionQuery !== null || slash.slashQuery !== null ? t.hints.mentionInProgress : undefined} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)]">
-              <Send size={isPanel ? 13 : 14} />
+            <button type="submit" disabled={!input.trim() && imageUpload.images.length === 0} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)]">
+              <Send size={14} />
             </button>
           )}
-          </form>
-        </div>
+        </form>
       </div>
 
-      {/* Footer hints — use full class strings so Tailwind JIT includes utilities */}
+      {/* Footer hints — panel: compact 3 items; modal: full set */}
       <div
         className={cn(
-          'flex shrink-0 items-center',
+          'flex shrink-0 items-center flex-wrap px-3 pb-1.5',
           isPanel
-            ? 'flex-wrap gap-x-2 gap-y-1 px-3 pb-1.5 text-[10px] text-muted-foreground/40'
-            : 'flex-wrap gap-x-3 gap-y-1 px-4 pb-2 text-[10px] md:text-xs text-muted-foreground/50',
+            ? 'gap-x-3 gap-y-1 text-[10px] text-muted-foreground/40'
+            : 'gap-x-3 gap-y-1 text-[10px] md:text-xs text-muted-foreground/50',
         )}
       >
         <span suppressHydrationWarning>
           <kbd className="font-mono">↵</kbd> {t.ask.send}
         </span>
-        <span suppressHydrationWarning>
-          <kbd className="font-mono">⇧</kbd>
-          <kbd className="font-mono ml-0.5">↵</kbd> {t.ask.newlineHint}
-        </span>
+        {!isPanel && (
+          <span suppressHydrationWarning>
+            <kbd className="font-mono">⇧</kbd>
+            <kbd className="font-mono ml-0.5">↵</kbd> {t.ask.newlineHint}
+          </span>
+        )}
         <span suppressHydrationWarning>
           <kbd className="font-mono">@</kbd> {t.ask.attachFile}
         </span>
@@ -863,7 +821,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           </span>
         )}
         {isLoading && input.trim() && (
-          <span className={isPanel ? 'text-[10px] text-[var(--amber)]/80' : 'text-xs text-[var(--amber)]/80'}>
+          <span className="text-[10px] text-[var(--amber)]/80">
             {t.ask.draftingHint}
           </span>
         )}