@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/ask/AskContent.tsx

@@ -0,0 +1,849 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Send, StopCircle, X, Plus, FileText, ImageIcon } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import type { AskMode, Message } from '@/lib/types';
+import ModeCapsule, { getPersistedMode } from '@/components/ask/ModeCapsule';
+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';
+import MessageList from '@/components/ask/MessageList';
+import MentionPopover from '@/components/ask/MentionPopover';
+import SlashCommandPopover from '@/components/ask/SlashCommandPopover';
+import SessionHistory from '@/components/ask/SessionHistory';
+import SessionHistoryPanel from '@/components/ask/SessionHistoryPanel';
+import AskHeader from '@/components/ask/AskHeader';
+import FileChip from '@/components/ask/FileChip';
+import AgentSelectorCapsule from '@/components/ask/AgentSelectorCapsule';
+import ProviderModelCapsule, { getPersistedProviderModel } from '@/components/ask/ProviderModelCapsule';
+import type { ProviderId } from '@/lib/agent/providers';
+import { useAskChat } from '@/hooks/useAskChat';
+import { getSelectedAcpAgentFromMessage, resolveComposerAgent } from '@/lib/ask-agent';
+import { cn } from '@/lib/utils';
+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;
+
+/** Per-element cached metrics to avoid getComputedStyle on every keystroke */
+const _metricsCache = new WeakMap<HTMLTextAreaElement, { maxH: number }>();
+
+/** Auto-size textarea height to fit content, capped at maxVisibleLines */
+function syncTextareaToContent(el: HTMLTextAreaElement, maxVisibleLines: number): void {
+  let cached = _metricsCache.get(el);
+  if (!cached) {
+    const style = getComputedStyle(el);
+    const parsedLh = parseFloat(style.lineHeight);
+    const parsedFs = parseFloat(style.fontSize);
+    const fontSize = Number.isFinite(parsedFs) ? parsedFs : 14;
+    const lineHeight = Number.isFinite(parsedLh) ? parsedLh : fontSize * 1.375;
+    const pad =
+      (Number.isFinite(parseFloat(style.paddingTop)) ? parseFloat(style.paddingTop) : 0) +
+      (Number.isFinite(parseFloat(style.paddingBottom)) ? parseFloat(style.paddingBottom) : 0);
+    const maxH = lineHeight * maxVisibleLines + pad;
+    if (!Number.isFinite(maxH) || maxH <= 0) return;
+    cached = { maxH };
+    _metricsCache.set(el, cached);
+  }
+  const { maxH } = cached;
+  el.style.height = 'auto';
+  const contentH = el.scrollHeight;
+  const next = Math.min(contentH, maxH);
+  el.style.height = `${next}px`;
+  el.style.overflowY = contentH > maxH ? 'auto' : 'hidden';
+}
+
+interface AskContentProps {
+  /** Controls visibility — 'open' for modal, 'active' for panel */
+  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; 'home' renders embedded on homepage */
+  variant: 'modal' | 'panel' | 'home';
+  /** Required for modal variant — called on close button / ESC / backdrop click */
+  onClose?: () => void;
+  maximized?: boolean;
+  onMaximize?: () => void;
+  /** Current Ask display mode */
+  askMode?: 'panel' | 'popup';
+  /** Switch between panel ↔ popup */
+  onModeSwitch?: () => void;
+  /** Navigate from fullscreen to right-side panel mode */
+  onDockToPanel?: () => void;
+}
+
+export default function AskContent({ visible, currentFile, initialMessage, initialAcpAgent, onFirstMessage, variant, onClose, maximized, onMaximize, askMode, onModeSwitch, onDockToPanel }: AskContentProps) {
+  const isPanel = variant === 'panel';
+  const isHome = variant === 'home';
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
+  const { t } = useLocale();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  const [input, setInput] = useState('');
+  const inputValueRef = useRef('');
+  inputValueRef.current = input;
+  const [attachedFiles, setAttachedFiles] = useState<string[]>([]);
+  const attachedFilesRef = useRef(attachedFiles);
+  attachedFilesRef.current = attachedFiles;
+  const [showHistory, setShowHistory] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [showAttachMenu, setShowAttachMenu] = useState(false);
+  const attachButtonRef = useRef<HTMLButtonElement>(null);
+  const attachMenuRef = useRef<HTMLDivElement>(null);
+  const [attachMenuPos, setAttachMenuPos] = useState<{ top: number; left: number } | null>(null);
+
+  const [selectedSkill, setSelectedSkill] = useState<SlashItem | null>(null);
+  const selectedSkillRef = useRef(selectedSkill);
+  selectedSkillRef.current = selectedSkill;
+  const [selectedAcpAgent, setSelectedAcpAgent] = useState<AcpAgentSelection | null>(null);
+  const selectedAcpAgentRef = useRef(selectedAcpAgent);
+  const pendingOpenAgentRef = useRef<AcpAgentSelection | null>(null);
+  selectedAcpAgentRef.current = selectedAcpAgent;
+  const [chatMode, setChatMode] = useState<AskMode>('agent');
+  const [providerOverride, setProviderOverride] = useState<ProviderId | `p_${string}` | null>(null);
+  const [modelOverride, setModelOverride] = useState<string | null>(null);
+
+  useEffect(() => {
+    setChatMode(getPersistedMode());
+    const persisted = getPersistedProviderModel();
+    setProviderOverride(persisted.provider);
+    setModelOverride(persisted.model);
+  }, []);
+
+  const session = useAskSession(currentFile);
+  const sessionRef = useRef(session);
+  sessionRef.current = session;
+  const uploadLabels = useMemo(() => ({ unsupportedType: t.fileImport?.unsupported }), [t]);
+  const upload = useFileUpload(uploadLabels);
+  const uploadRef = useRef(upload);
+  uploadRef.current = upload;
+  const imageUpload = useImageUpload();
+  const mention = useMention();
+  const slash = useSlashCommand();
+  const acpDetection = useAcpDetection();
+
+  const imageUploadRef = useRef(imageUpload);
+  imageUploadRef.current = imageUpload;
+  const mentionRef = useRef(mention);
+  mentionRef.current = mention;
+  const slashRef = useRef(slash);
+  slashRef.current = slash;
+
+  const resetInputState = useCallback(() => {
+    setInput('');
+    setSelectedSkill(null);
+    setAttachedFiles(currentFile ? [currentFile] : []);
+    uploadRef.current.clearAttachments();
+  }, [currentFile]);
+
+
+  const handleRestoreInput = useCallback((userMessage: Message) => {
+    setInput(userMessage.content);
+    if (userMessage.images && userMessage.images.length > 0) {
+      imageUploadRef.current.clearImages();
+    }
+    if (userMessage.attachedFiles) setAttachedFiles(userMessage.attachedFiles);
+    if (userMessage.skillName) {
+      slashRef.current.resetSlash();
+    }
+    setSelectedAcpAgent(getSelectedAcpAgentFromMessage(userMessage));
+    setTimeout(() => inputRef.current?.focus(), 50);
+  }, []);
+
+  const chatRefs = useRef({ inputValueRef, mentionRef, slashRef, imageUploadRef, sessionRef, uploadRef, selectedSkillRef, selectedAcpAgentRef, attachedFilesRef });
+  const chat = useAskChat({
+    currentFile,
+    chatMode,
+    providerOverride,
+    modelOverride,
+    onFirstMessage,
+    refs: chatRefs.current,
+    errorLabels: { noResponse: t.ask.errorNoResponse, stopped: t.ask.stopped },
+    resetInputState,
+    onRestoreInput: handleRestoreInput,
+  });
+  const { isLoading, loadingPhase, reconnectAttempt, reconnectMaxRef } = chat;
+  const handleSubmit = chat.submit;
+  const handleStop = chat.stop;
+
+  const handleSelectAcpAgent = useCallback((agent: AcpAgentSelection | null) => {
+    setSelectedAcpAgent(agent);
+    session.setSessionDefaultAcpAgent(agent);
+  }, [session]);
+  const hasLoadingAttachments = upload.localAttachments.some((f) => f.status === 'loading');
+  const composerStatusMessage = upload.uploadError || imageUpload.imageError || (hasLoadingAttachments ? (t.ask.uploadsProcessing ?? 'Wait for uploaded files to finish processing before sending.') : '');
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const files = (e as CustomEvent).detail?.files;
+      if (Array.isArray(files) && files.length > 0) {
+        uploadRef.current.injectFiles(files);
+      }
+    };
+    window.addEventListener('mindos:inject-ask-files', handler);
+    return () => window.removeEventListener('mindos:inject-ask-files', handler);
+  }, []);
+
+  // Position the attach menu popover above the button (using Portal to avoid clipping)
+  useEffect(() => {
+    if (!showAttachMenu || !attachButtonRef.current) {
+      setAttachMenuPos(null);
+      return;
+    }
+    const rect = attachButtonRef.current.getBoundingClientRect();
+    setAttachMenuPos({
+      top: rect.top - 8,  // 8px above button
+      left: rect.left,
+    });
+  }, [showAttachMenu]);
+
+  // Close attach menu when clicking outside the button + menu portal.
+  useEffect(() => {
+    if (!showAttachMenu) return;
+    const handlePointerDownOutside = (e: MouseEvent) => {
+      const target = e.target as Node | null;
+      if (!target) return;
+      if (attachButtonRef.current?.contains(target)) return;
+      if (attachMenuRef.current?.contains(target)) return;
+      setShowAttachMenu(false);
+    };
+    document.addEventListener('mousedown', handlePointerDownOutside);
+    return () => document.removeEventListener('mousedown', handlePointerDownOutside);
+  }, [showAttachMenu]);
+
+  // Home suggestion chip click — inject text into input
+  useEffect(() => {
+    if (!isHome) return;
+    const handler = (e: Event) => {
+      const text = (e as CustomEvent).detail?.text;
+      if (typeof text === 'string') {
+        setInput(text);
+        setTimeout(() => inputRef.current?.focus(), 50);
+      }
+    };
+    window.addEventListener('mindos:home-suggestion', handler);
+    return () => window.removeEventListener('mindos:home-suggestion', handler);
+  }, [isHome]);
+
+  // Focus and init session when becoming visible (edge-triggered for panel, level-triggered for modal)
+  const prevVisibleRef = useRef(false);
+  const prevFileRef = useRef(currentFile);
+  useEffect(() => {
+    const justOpened = variant === 'panel' || variant === 'home'
+      ? (visible && !prevVisibleRef.current)  // panel/home: edge detection
+      : visible;                               // modal: level detection (reset every open)
+
+    // Detect file change while panel is already open
+    const fileChanged = visible && prevVisibleRef.current && currentFile !== prevFileRef.current;
+
+    if (justOpened) {
+      pendingOpenAgentRef.current = initialAcpAgent ?? null;
+      setTimeout(() => inputRef.current?.focus(), 50);
+      void session.initSessions();
+      setInput(initialMessage || '');
+      chat.firstMessageFired.current = false;
+      setAttachedFiles(currentFile ? [currentFile] : []);
+      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] : []);
+    } else if (!visible && variant === 'modal') {
+      // Modal: abort streaming on close
+      chat.abortRef.current?.abort();
+    }
+    // Home variant: auto-focus on mount
+    if (variant === 'home' && visible && !prevVisibleRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 150);
+    }
+    prevVisibleRef.current = visible;
+    prevFileRef.current = currentFile;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, currentFile]);
+
+  useEffect(() => {
+    if (!visible || !session.activeSessionId) return;
+
+    const openerAgent = pendingOpenAgentRef.current;
+    const restoredAgent = resolveComposerAgent({
+      sessionAgent: session.activeSession?.defaultAcpAgent ?? null,
+      initialAgent: openerAgent,
+    });
+
+    setSelectedAcpAgent(restoredAgent);
+
+    if (openerAgent && !session.activeSession?.defaultAcpAgent && session.activeSession?.messages.length === 0) {
+      session.setSessionDefaultAcpAgent(openerAgent);
+    }
+
+    pendingOpenAgentRef.current = null;
+  }, [
+    visible,
+    session.activeSessionId,
+    session.activeSession?.defaultAcpAgent,
+    session.activeSession?.messages.length,
+    session.setSessionDefaultAcpAgent,
+  ]);
+
+  // Persist session on message changes (skip if last msg is empty assistant placeholder during loading)
+  const clearPersistTimerRef = useRef(session.clearPersistTimer);
+  clearPersistTimerRef.current = session.clearPersistTimer;
+  useEffect(() => {
+    if (!visible || !session.activeSessionId) return;
+    const msgs = session.messages;
+    if (chat.isLoading && msgs.length > 0) {
+      const last = msgs[msgs.length - 1];
+      if (last.role === 'assistant' && !last.content.trim() && (!last.parts || last.parts.length === 0)) return;
+    }
+    session.persistSession(msgs, session.activeSessionId);
+    return () => clearPersistTimerRef.current();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, session.messages, session.activeSessionId, chat.isLoading]);
+
+  // Esc to close modal or exit focus mode (skip for home variant)
+  useEffect(() => {
+    if (!visible || variant === 'home') return;
+    const isModal = variant === 'modal';
+    const isFocused = variant === 'panel' && maximized;
+    if (!isModal && !isFocused) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (mentionRef.current.mentionQuery !== null) { mentionRef.current.resetMention(); return; }
+        if (slashRef.current.slashQuery !== null) { slashRef.current.resetSlash(); return; }
+        if (isFocused && onMaximize) { onMaximize(); return; }
+        if (isModal && onClose) { onClose(); }
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [variant, visible, onClose, maximized, onMaximize]);
+
+  const formRef = useRef<HTMLFormElement>(null);
+
+  useLayoutEffect(() => {
+    if (!visible) return;
+    const el = inputRef.current;
+    if (!el || !(el instanceof HTMLTextAreaElement)) return;
+    syncTextareaToContent(el, TEXTAREA_MAX_VISIBLE_LINES);
+  }, [input, isLoading, visible]);
+
+  useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    const handler = () => _metricsCache.delete(el);
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, []);
+
+  const mentionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const slashTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleInputChange = useCallback((val: string, cursorPos?: number) => {
+    setInput(val);
+    const pos = cursorPos ?? val.length;
+    if (mentionTimerRef.current) clearTimeout(mentionTimerRef.current);
+    if (slashTimerRef.current) clearTimeout(slashTimerRef.current);
+    mentionTimerRef.current = setTimeout(() => mentionRef.current.updateMentionFromInput(val, pos), 80);
+    slashTimerRef.current = setTimeout(() => slashRef.current.updateSlashFromInput(val, pos), 80);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (mentionTimerRef.current) clearTimeout(mentionTimerRef.current);
+      if (slashTimerRef.current) clearTimeout(slashTimerRef.current);
+    };
+  }, []);
+
+  const selectMention = useCallback((filePath: string) => {
+    const el = inputRef.current;
+    const val = inputValueRef.current;
+    const cursorPos = el?.selectionStart ?? val.length;
+    const before = val.slice(0, cursorPos);
+    const atIdx = before.lastIndexOf('@');
+    const newVal = val.slice(0, atIdx) + val.slice(cursorPos);
+    setInput(newVal);
+    mentionRef.current.resetMention();
+    if (!attachedFilesRef.current.includes(filePath)) {
+      setAttachedFiles(prev => [...prev, filePath]);
+    }
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.setSelectionRange(atIdx, atIdx);
+    }, 0);
+  }, []);
+
+  const selectSlashCommand = useCallback((item: SlashItem) => {
+    const el = inputRef.current;
+    const val = inputValueRef.current;
+    const cursorPos = el?.selectionStart ?? val.length;
+    const before = val.slice(0, cursorPos);
+    const slashIdx = before.lastIndexOf('/');
+    const newVal = val.slice(0, slashIdx) + val.slice(cursorPos);
+    setInput(newVal);
+    setSelectedSkill(item);
+    slashRef.current.resetSlash();
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.setSelectionRange(slashIdx, slashIdx);
+    }, 0);
+  }, []);
+
+  const selectMentionRef = useRef(selectMention);
+  selectMentionRef.current = selectMention;
+  const selectSlashRef = useRef(selectSlashCommand);
+  selectSlashRef.current = selectSlashCommand;
+
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      const m = mentionRef.current;
+      const s = slashRef.current;
+      if (m.mentionQuery !== null) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          m.resetMention();
+          return;
+        }
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          m.navigateMention('down');
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          m.navigateMention('up');
+        } else if (e.key === 'Enter' || e.key === 'Tab') {
+          if (e.key === 'Enter' && (e.shiftKey || e.nativeEvent.isComposing)) return;
+          if (m.mentionResults.length > 0) {
+            e.preventDefault();
+            selectMentionRef.current(m.mentionResults[m.mentionIndex]);
+          }
+        }
+        return;
+      }
+      if (s.slashQuery !== null) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          s.resetSlash();
+          return;
+        }
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          s.navigateSlash('down');
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          s.navigateSlash('up');
+        } else if (e.key === 'Enter' || e.key === 'Tab') {
+          if (e.key === 'Enter' && (e.shiftKey || e.nativeEvent.isComposing)) return;
+          if (s.slashResults.length > 0) {
+            e.preventDefault();
+            selectSlashRef.current(s.slashResults[s.slashIndex]);
+          }
+        }
+        return;
+      }
+      if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && !chat.isLoadingRef.current && (inputValueRef.current.trim() || imageUploadRef.current.images.length > 0)) {
+        e.preventDefault();
+        (e.currentTarget as HTMLTextAreaElement).form?.requestSubmit();
+      }
+    },
+    [],
+  );
+
+  const handleResetSession = useCallback(() => {
+    if (chat.isLoadingRef.current) return;
+    sessionRef.current.resetSession();
+    setInput('');
+    setAttachedFiles(currentFile ? [currentFile] : []);
+    uploadRef.current.clearAttachments();
+    imageUploadRef.current.clearImages();
+    mentionRef.current.resetMention();
+    slashRef.current.resetSlash();
+    setSelectedSkill(null);
+    setSelectedAcpAgent(null);
+    pendingOpenAgentRef.current = null;
+    setShowHistory(false);
+    chat.firstMessageFired.current = false;
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, [currentFile]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    // Accept mindos file paths and image drops
+    if (e.dataTransfer.types.includes('text/mindos-path') || e.dataTransfer.types.includes('Files')) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = 'copy';
+      setIsDragOver(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback(() => setIsDragOver(false), []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    const filePath = e.dataTransfer.getData('text/mindos-path');
+    if (filePath) {
+      const pathType = e.dataTransfer.getData('text/mindos-type');
+      const key = pathType === 'directory' ? filePath.replace(/\/?$/, '/') : filePath;
+      if (!attachedFilesRef.current.includes(key)) {
+        setAttachedFiles(prev => [...prev, key]);
+      }
+      return;
+    }
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const hasImages = Array.from(files).some(f => f.type.startsWith('image/'));
+      const nonImageFiles = Array.from(files).filter(f => !f.type.startsWith('image/'));
+      // Fire-and-forget with error handling to prevent unhandled rejections
+      void (async () => {
+        try {
+          if (hasImages) await imageUploadRef.current.handleDrop(e);
+          if (nonImageFiles.length > 0) {
+            const dt = new DataTransfer();
+            nonImageFiles.forEach(f => dt.items.add(f));
+            await uploadRef.current.pickFiles(dt.files);
+          }
+        } catch (err) {
+          console.warn('[AskContent] Drop file processing failed:', err);
+        }
+      })();
+    }
+  }, []);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const hasImageItem = Array.from(items).some(
+      item => item.kind === 'file' && item.type.startsWith('image/')
+    );
+    if (hasImageItem) {
+      e.preventDefault();
+      void imageUploadRef.current.handlePaste(e);
+    }
+  }, []);
+
+  const handleLoadSession = useCallback((id: string) => {
+    if (chat.isLoadingRef.current) return; // Don't switch sessions during streaming
+    const targetSession = session.sessions.find((item) => item.id === id) ?? null;
+    sessionRef.current.loadSession(id);
+    setShowHistory(false);
+    setInput('');
+    setAttachedFiles(currentFile ? [currentFile] : []);
+    uploadRef.current.clearAttachments();
+    imageUploadRef.current.clearImages();
+    mentionRef.current.resetMention();
+    slashRef.current.resetSlash();
+    setSelectedSkill(null);
+    setSelectedAcpAgent(targetSession?.defaultAcpAgent ?? null);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, [currentFile, session.sessions]);
+
+  const toggleHistory = useCallback(() => setShowHistory(v => !v), []);
+  const inputIconSize = 15;
+  const messageLabels = useMemo(() => ({
+    connecting: t.ask.connecting,
+    thinking: t.ask.thinking,
+    generating: t.ask.generating,
+    reconnecting: reconnectAttempt > 0 ? t.ask.reconnecting(reconnectAttempt, reconnectMaxRef.current) : undefined,
+    copyMessage: t.ask.copyMessage,
+  }), [t, reconnectAttempt]);
+
+  const handleProviderChange = useCallback((p: ProviderId | `p_${string}` | null) => {
+    setProviderOverride(p);
+    setModelOverride(null);
+  }, []);
+
+  return (
+    <div className="flex min-h-0 w-full flex-col h-full">
+      {/* Header — home variant shows session switcher + new/history/fullscreen buttons */}
+      <AskHeader
+        isPanel={isPanel || isHome}
+        showHistory={showHistory}
+        onToggleHistory={toggleHistory}
+        onReset={handleResetSession}
+        isLoading={isLoading}
+        maximized={maximized}
+        onMaximize={isHome ? onMaximize : onMaximize}
+        askMode={isHome ? undefined : askMode}
+        onModeSwitch={isHome ? undefined : onModeSwitch}
+        onClose={isHome ? undefined : onClose}
+        onDockToPanel={maximized ? onDockToPanel : undefined}
+        sessions={session.sessions}
+        activeSessionId={session.activeSessionId}
+        onLoadSession={handleLoadSession}
+        onDeleteSession={session.deleteSession}
+        onRenameSession={session.renameSession}
+        onTogglePinSession={session.togglePinSession}
+        messages={session.messages}
+      />
+
+      {showHistory && (
+        <SessionHistoryPanel
+          sessions={session.sessions}
+          activeSessionId={session.activeSessionId}
+          onLoad={handleLoadSession}
+          onDelete={session.deleteSession}
+          onRename={session.renameSession}
+          onTogglePin={session.togglePinSession}
+          onClearAll={session.clearAllSessions}
+          onClose={() => setShowHistory(false)}
+          onNewChat={handleResetSession}
+        />
+      )}
+
+      {!showHistory && (
+        <>
+      {/* Messages — home variant hides empty state unless maximized (suggestions rendered externally in normal mode) */}
+      <div className="flex-1 min-h-0 flex flex-col">
+        {!isHome && (
+          <MessageList
+            messages={session.messages}
+            isLoading={isLoading}
+            loadingPhase={loadingPhase}
+            emptyPrompt={t.ask.emptyPrompt}
+            emptyHint={t.ask.emptyHint}
+            suggestions={t.ask.suggestions}
+            onSuggestionClick={setInput}
+            labels={messageLabels}
+          />
+        )}
+        {isHome && (session.messages.length > 0 || maximized) && (
+          <MessageList
+            messages={session.messages}
+            isLoading={isLoading}
+            loadingPhase={loadingPhase}
+            emptyPrompt={t.ask.emptyPrompt}
+            emptyHint={t.ask.emptyHint}
+            suggestions={maximized && session.messages.length === 0 ? t.ask.suggestions : []}
+            onSuggestionClick={setInput}
+            labels={messageLabels}
+          />
+        )}
+      </div>
+
+      {/* 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-3 pb-1">
+          <MentionPopover
+            results={mention.mentionResults}
+            selectedIndex={mention.mentionIndex}
+            query={mention.mentionQuery ?? undefined}
+            onSelect={selectMention}
+          />
+        </div>
+      )}
+
+      {slash.slashQuery !== null && slash.slashResults.length > 0 && (
+        <div className="shrink-0 px-3 pb-1">
+          <SlashCommandPopover
+            results={slash.slashResults}
+            selectedIndex={slash.slashIndex}
+            query={slash.slashQuery ?? undefined}
+            onSelect={selectSlashCommand}
+          />
+        </div>
+      )}
+
+      {/* Composer card — unified input area */}
+      <div className={cn('shrink-0', isHome ? 'px-2 pb-2 pt-0.5' : 'px-3 pb-2.5 pt-1')}>
+        <div
+          className={cn(
+            'rounded-xl bg-muted/40 transition-all focus-within:bg-muted/60',
+            isDragOver && 'ring-2 ring-[var(--amber)] bg-[var(--amber-dim)]',
+          )}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {/* Unified context chip flow */}
+          {(attachedFiles.length > 0 || upload.localAttachments.length > 0 || imageUpload.images.length > 0 || selectedSkill || selectedAcpAgent || upload.uploadError || imageUpload.imageError) && (
+            <div className={cn('px-3 pt-2.5 pb-1', isPanel ? 'max-h-24 overflow-y-auto' : 'max-h-28 overflow-y-auto')}>
+              <div className="flex flex-wrap gap-1.5">
+                {attachedFiles.map(f => (
+                  <FileChip key={f} path={f} variant="kb" onRemove={() => setAttachedFiles(prev => prev.filter(x => x !== f))} />
+                ))}
+                {upload.localAttachments.map((f, idx) => (
+                  <FileChip key={`up-${f.name}-${idx}`} path={f.name} variant="upload" status={f.status} error={f.error} truncatedInfo={f.truncatedInfo} onRemove={() => upload.removeAttachment(idx)} />
+                ))}
+                {imageUpload.images.map((img, idx) => (
+                  <FileChip
+                    key={`img-${idx}`}
+                    path={img.fileName || `Image ${idx + 1}`}
+                    variant="image"
+                    imageData={img.data}
+                    imageMime={img.mimeType}
+                    onRemove={() => imageUpload.removeImage(idx)}
+                  />
+                ))}
+                {selectedSkill && (
+                  <FileChip
+                    path={selectedSkill.name}
+                    variant="skill"
+                    onRemove={() => { setSelectedSkill(null); inputRef.current?.focus(); }}
+                  />
+                )}
+                {selectedAcpAgent && (
+                  <FileChip
+                    path={typeof selectedAcpAgent === 'object' && 'name' in selectedAcpAgent ? (selectedAcpAgent as { name: string }).name : 'Remote Agent'}
+                    variant="agent"
+                    onRemove={() => { handleSelectAcpAgent(null); inputRef.current?.focus(); }}
+                  />
+                )}
+              </div>
+              {composerStatusMessage && (
+                <div className="mt-1 text-xs text-error">{composerStatusMessage}</div>
+              )}
+            </div>
+          )}
+
+          {/* Input form */}
+          <form
+            ref={formRef}
+            onSubmit={handleSubmit}
+            className={cn('flex items-end gap-1.5', isHome ? 'px-2 py-1.5' : 'px-3 py-2')}
+          >
+            {/* + attach button with mini menu */}
+            <div className="relative shrink-0">
+              <button
+                ref={attachButtonRef}
+                type="button"
+                onClick={() => setShowAttachMenu(v => !v)}
+                className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
+                title={t.hints.attachFile}
+              >
+                <Plus size={inputIconSize} />
+              </button>
+            </div>
+
+            {/* Attach menu rendered as Portal to avoid clipping by overflow-hidden parent */}
+            {mounted && showAttachMenu && attachMenuPos && createPortal(
+              <div
+                ref={attachMenuRef}
+                className="fixed py-1 rounded-xl border border-border/60 bg-card shadow-lg z-50 min-w-[150px] animate-in fade-in-0 slide-in-from-bottom-2 duration-150"
+                style={{
+                  top: `${attachMenuPos.top}px`,
+                  left: `${attachMenuPos.left}px`,
+                  transform: 'translateY(-100%)',  // Position above the button
+                }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <button
+                  type="button"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs hover:bg-muted transition-colors text-left rounded-lg"
+                  onClick={() => { upload.uploadInputRef.current?.click(); setShowAttachMenu(false); }}
+                >
+                  <FileText size={12} className="shrink-0 text-muted-foreground" />
+                  {t.ask.attachFileLabel}
+                </button>
+                <button
+                  type="button"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs hover:bg-muted transition-colors text-left rounded-lg"
+                  onClick={() => { imageInputRef.current?.click(); setShowAttachMenu(false); }}
+                >
+                  <ImageIcon size={12} className="shrink-0 text-muted-foreground" />
+                  {t.ask.attachImageLabel}
+                </button>
+              </div>,
+              document.body
+            )}
+
+            <input
+              ref={upload.uploadInputRef}
+              type="file"
+              className="hidden"
+              multiple
+              accept=".txt,.md,.markdown,.csv,.json,.yaml,.yml,.xml,.html,.htm,.pdf,text/plain,text/markdown,text/csv,application/json,application/pdf"
+              onChange={async (e) => {
+                const inputEl = e.currentTarget;
+                await upload.pickFiles(inputEl.files);
+                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) => {
+                inputRef.current = el;
+              }}
+              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-hidden bg-transparent py-2 leading-relaxed text-foreground placeholder:text-muted-foreground/50 outline-none focus-visible:ring-0', isHome ? 'text-xs' : 'text-sm')}
+            />
+
+            {isLoading ? (
+              <button type="button" onClick={handleStop} className="p-2 rounded-xl transition-colors shrink-0 text-foreground bg-muted hover:bg-muted/80" title={loadingPhase === 'reconnecting' ? t.ask.cancelReconnect : t.ask.stopTitle}>
+                {loadingPhase === 'reconnecting' ? <X size={inputIconSize} /> : <StopCircle size={inputIconSize} />}
+              </button>
+            ) : (
+              <button type="submit" title={hasLoadingAttachments ? (t.ask.uploadsProcessing ?? 'Wait for uploaded files to finish processing before sending.') : t.ask.send} disabled={hasLoadingAttachments || (!input.trim() && imageUpload.images.length === 0)} className="p-2 rounded-xl disabled:opacity-20 disabled:scale-95 disabled:cursor-not-allowed transition-all duration-150 shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm shadow-[var(--amber)]/15 hover:shadow-md hover:shadow-[var(--amber)]/20 active:scale-95">
+                <Send size={14} />
+              </button>
+            )}
+          </form>
+
+          {/* Mode + Agent + Provider selector row + keyboard hint */}
+          <div className={cn('flex items-center justify-between border-t border-border/10', isPanel ? 'px-2 pb-1.5 pt-1 gap-1' : 'px-3 pb-2 pt-1.5')}>
+            <div className={cn('flex items-center flex-wrap', isPanel ? 'gap-1' : 'gap-2')}>
+              <ModeCapsule mode={chatMode} onChange={setChatMode} disabled={isLoading} />
+            {mounted && acpDetection.installedAgents.length > 0 && (
+              <AgentSelectorCapsule
+                selectedAgent={selectedAcpAgent}
+                onSelect={handleSelectAcpAgent}
+                installedAgents={acpDetection.installedAgents}
+                loading={acpDetection.loading}
+              />
+            )}
+            {mounted && (
+              <ProviderModelCapsule
+                providerValue={providerOverride}
+                onProviderChange={handleProviderChange}
+                modelValue={modelOverride}
+                onModelChange={setModelOverride}
+                disabled={isLoading}
+              />
+            )}
+            </div>
+            {/* Keyboard hint — hidden in panel (too narrow) and home (compact) */}
+            {!isPanel && !isHome && (
+              <span className="hidden md:inline text-2xs text-muted-foreground/40 select-none shrink-0">
+                <kbd className="font-mono">Enter</kbd> {t.ask.send} · <kbd className="font-mono">Shift+Enter</kbd> {t.ask.newlineHint}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+        </>
+      )}
+    </div>
+  );
+}