@geminilight/mindos 0.6.8 → 0.6.13

package/app/components/agents/AgentsOverviewSection.tsx

@@ -158,7 +158,7 @@ export default function AgentsOverviewSection({
               riskOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
             )}
           >
-            <div className="overflow-hidden">
+            <div className="overflow-hidden" {...(!riskOpen && { inert: true } as React.HTMLAttributes<HTMLDivElement>)}>
               <ul className="mt-3 space-y-2" role="list">
                 {riskQueue.map((risk, i) => (
                   <li
@@ -181,7 +181,7 @@ export default function AgentsOverviewSection({
                       className={`text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 select-none ${
                         risk.severity === 'error'
                           ? 'bg-destructive/10 text-destructive'
-                          : 'bg-[var(--amber-dim)] text-[var(--amber)]'
+                          : 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
                       }`}
                     >
                       {risk.severity === 'error' ? copy.riskLevelError : copy.riskLevelWarn}
@@ -384,9 +384,8 @@ function AgentCard({
       className={`group rounded-xl border border-border bg-card p-3.5
         hover:border-[var(--amber)]/30 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)]
         active:scale-[0.98]
-        transition-all duration-150 animate-in
+        transition-all duration-150
         focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
-      style={{ animationDelay: `${Math.min(index * 30, 300)}ms` }}
     >
       {/* Top row: avatar + name + status */}
       <div className="flex items-center gap-2.5 mb-3">

package/app/components/agents/AgentsPrimitives.tsx

@@ -13,7 +13,7 @@ export function PillButton({ active, label, onClick }: { active: boolean; label:
       aria-pressed={active}
       className={`relative px-2.5 min-h-[28px] rounded text-xs cursor-pointer transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
         active
-          ? 'bg-[var(--amber-dim)] text-[var(--amber)] font-medium shadow-[0_1px_2px_rgba(200,135,58,0.08)]'
+          ? 'bg-[var(--amber-dim)] text-[var(--amber-text)] font-medium shadow-[0_1px_2px_rgba(200,135,58,0.08)]'
           : 'text-muted-foreground hover:text-foreground hover:bg-muted/60'
       }`}
     >
@@ -261,7 +261,7 @@ export function ConfirmDialog({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center" role="alertdialog" aria-modal="true" aria-label={title}>
-      <div className="absolute inset-0 bg-black/40 backdrop-blur-[2px]" onClick={onCancel} aria-hidden="true" />
+      <div className="absolute inset-0 overlay-backdrop" onClick={onCancel} aria-hidden="true" />
       <div className="relative bg-card border border-border rounded-lg shadow-xl p-5 max-w-sm w-full mx-4 animate-in fade-in zoom-in-95 duration-200">
         <h3 className="text-sm font-medium text-foreground mb-1.5">{title}</h3>
         <p className="text-sm text-muted-foreground mb-4 leading-relaxed">{message}</p>

package/app/components/agents/AgentsSkillsSection.tsx

@@ -483,7 +483,7 @@ function BySkillView({
                               ? 'bg-muted text-muted-foreground'
                               : skill.source === 'builtin'
                                 ? 'bg-muted text-muted-foreground'
-                                : 'bg-[var(--amber-dim)] text-[var(--amber)]'
+                                : 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
                           }`}>
                             {skill.kind === 'native' ? copy.sourceNative : skill.source === 'builtin' ? copy.sourceBuiltin : copy.sourceUser}
                           </span>
@@ -697,7 +697,7 @@ function AgentCard({
             {skillMode && (
               <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${
                 skillMode === 'universal' ? 'bg-success/10 text-success'
-                  : skillMode === 'additional' ? 'bg-[var(--amber-dim)] text-[var(--amber)]'
+                  : skillMode === 'additional' ? 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
                     : 'bg-muted text-muted-foreground'
               }`}>
                 {skillMode}

package/app/components/agents/SkillDetailPopover.tsx

@@ -14,6 +14,7 @@ import {
   ToggleLeft,
   Trash2,
   X,
+  ChevronDown,
 } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
@@ -100,6 +101,7 @@ export default function SkillDetailPopover({
   const [deleting, setDeleting] = useState(false);
   const [deleteMsg, setDeleteMsg] = useState<string | null>(null);
   const [toggleBusy, setToggleBusy] = useState(false);
+  const [descriptionExpanded, setDescriptionExpanded] = useState(false);
 
   const fetchContent = useCallback(async () => {
     if (!skillName) return;
@@ -204,7 +206,7 @@ export default function SkillDetailPopover({
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 z-40 bg-black/30 backdrop-blur-[2px]"
+        className="fixed inset-0 z-40 overlay-backdrop"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -229,7 +231,7 @@ export default function SkillDetailPopover({
                   ? 'bg-muted text-muted-foreground'
                   : skill?.source === 'builtin'
                     ? 'bg-muted text-muted-foreground'
-                    : 'bg-[var(--amber-dim)] text-[var(--amber)]'
+                    : 'bg-[var(--amber-dim)] text-[var(--amber-text)]'
               }`}>
                 {sourceLabel}
               </span>
@@ -248,12 +250,26 @@ export default function SkillDetailPopover({
 
         {/* ─── Body (scrollable) ─── */}
         <div className="flex-1 overflow-y-auto px-5 py-4 space-y-5">
-          {/* Description */}
-          {description ? (
-            <p className="text-sm text-foreground leading-relaxed">{description}</p>
-          ) : !isNative ? (
-            <p className="text-sm text-muted-foreground italic">{copy.noDescription}</p>
-          ) : null}
+        {/* Description */}
+        {description ? (
+          <div className="space-y-2">
+            <p className={`text-sm text-foreground leading-relaxed whitespace-pre-wrap ${!descriptionExpanded ? 'line-clamp-3' : ''}`}>
+              {description}
+            </p>
+            {description.split('\n').length > 3 && (
+              <button
+                type="button"
+                onClick={() => setDescriptionExpanded(!descriptionExpanded)}
+                className="inline-flex items-center gap-1 text-2xs font-medium text-[var(--amber)] hover:opacity-80 transition-opacity cursor-pointer"
+              >
+                <ChevronDown size={12} className={`transition-transform duration-200 ${descriptionExpanded ? 'rotate-180' : ''}`} />
+                <span>{descriptionExpanded ? '收起' : '查看全部'}</span>
+              </button>
+            )}
+          </div>
+        ) : !isNative ? (
+          <p className="text-sm text-muted-foreground italic">{copy.noDescription}</p>
+        ) : null}
 
           {/* Quick meta */}
           <div className="grid grid-cols-2 gap-3">

package/app/components/ask/AskContent.tsx

@@ -15,6 +15,7 @@ import SlashCommandPopover from '@/components/ask/SlashCommandPopover';
 import SessionHistory from '@/components/ask/SessionHistory';
 import FileChip from '@/components/ask/FileChip';
 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';
 
@@ -27,7 +28,7 @@ const PANEL_COMPOSER_KEY_STEP = 24;
 /** 输入框随内容增高，超过此行数后在框内滚动（与常见 IM 一致） */
 const PANEL_TEXTAREA_MAX_VISIBLE_LINES = 8;
 
-function syncPanelTextareaToContent(el: HTMLTextAreaElement, maxVisibleLines: number, availableHeight?: number): void {
+function syncTextareaToContent(el: HTMLTextAreaElement, maxVisibleLines: number, availableHeight?: number): void {
   const style = getComputedStyle(el);
   const parsedLh = parseFloat(style.lineHeight);
   const parsedFs = parseFloat(style.fontSize);
@@ -86,7 +87,7 @@ interface AskContentProps {
 export default function AskContent({ visible, currentFile, initialMessage, onFirstMessage, variant, onClose, maximized, onMaximize, askMode, onModeSwitch }: AskContentProps) {
   const isPanel = variant === 'panel';
 
-  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const abortRef = useRef<AbortController | null>(null);
   const firstMessageFired = useRef(false);
   const { t } = useLocale();
@@ -171,7 +172,9 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
 
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [loadingPhase, setLoadingPhase] = useState<'connecting' | 'thinking' | 'streaming'>('connecting');
+  const [loadingPhase, setLoadingPhase] = useState<'connecting' | 'thinking' | 'streaming' | 'reconnecting'>('connecting');
+  const [reconnectAttempt, setReconnectAttempt] = useState(0);
+  const reconnectMaxRef = useRef(3);
   const [attachedFiles, setAttachedFiles] = useState<string[]>([]);
   const [showHistory, setShowHistory] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
@@ -220,13 +223,18 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, currentFile]);
 
-  // Persist session on message changes
+  // Persist session on message changes (skip if last msg is empty assistant placeholder during loading)
   useEffect(() => {
     if (!visible || !session.activeSessionId) return;
-    session.persistSession(session.messages, session.activeSessionId);
+    const msgs = session.messages;
+    if (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 () => session.clearPersistTimer();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, session.messages, session.activeSessionId]);
+  }, [visible, session.messages, session.activeSessionId, isLoading]);
 
   // Esc to close — modal only
   useEffect(() => {
@@ -252,12 +260,13 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
   const formRef = useRef<HTMLFormElement>(null);
 
   useLayoutEffect(() => {
-    if (!isPanel || !visible) return;
+    if (!visible) return;
     const el = inputRef.current;
     if (!el || !(el instanceof HTMLTextAreaElement)) return;
     const form = formRef.current;
-    const availableH = form ? form.clientHeight - 40 : undefined;
-    syncPanelTextareaToContent(el, PANEL_TEXTAREA_MAX_VISIBLE_LINES, availableH);
+    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]);
 
   const mentionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -280,9 +289,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
 
   const selectMention = useCallback((filePath: string) => {
     const el = inputRef.current;
-    const cursorPos = el
-      ? (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement ? el.selectionStart ?? input.length : input.length)
-      : input.length;
+    const cursorPos = el?.selectionStart ?? input.length;
     const before = input.slice(0, cursorPos);
     const atIdx = before.lastIndexOf('@');
     const newVal = input.slice(0, atIdx) + input.slice(cursorPos);
@@ -299,9 +306,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
 
   const selectSlashCommand = useCallback((item: SlashItem) => {
     const el = inputRef.current;
-    const cursorPos = el
-      ? (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement ? el.selectionStart ?? input.length : input.length)
-      : input.length;
+    const cursorPos = el?.selectionStart ?? input.length;
     const before = input.slice(0, cursorPos);
     const slashIdx = before.lastIndexOf('/');
     const newVal = input.slice(0, slashIdx) + input.slice(cursorPos);
@@ -315,7 +320,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
   }, [input, slash]);
 
   const handleInputKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (mention.mentionQuery !== null) {
         if (e.key === 'Escape') {
           e.preventDefault();
@@ -329,7 +334,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           e.preventDefault();
           mention.navigateMention('up');
         } else if (e.key === 'Enter' || e.key === 'Tab') {
-          if (e.key === 'Enter' && e.shiftKey) return;
+          if (e.key === 'Enter' && (e.shiftKey || e.nativeEvent.isComposing)) return;
           if (mention.mentionResults.length > 0) {
             e.preventDefault();
             selectMention(mention.mentionResults[mention.mentionIndex]);
@@ -350,7 +355,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           e.preventDefault();
           slash.navigateSlash('up');
         } else if (e.key === 'Enter' || e.key === 'Tab') {
-          if (e.key === 'Enter' && e.shiftKey) return;
+          if (e.key === 'Enter' && (e.shiftKey || e.nativeEvent.isComposing)) return;
           if (slash.slashResults.length > 0) {
             e.preventDefault();
             selectSlashCommand(slash.slashResults[slash.slashIndex]);
@@ -358,12 +363,12 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         }
         return;
       }
-      if (variant === 'panel' && e.key === 'Enter' && !e.shiftKey && !isLoading && input.trim()) {
+      if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && !isLoading && input.trim()) {
         e.preventDefault();
         (e.currentTarget as HTMLTextAreaElement).form?.requestSubmit();
       }
     },
-    [mention, selectMention, slash, selectSlashCommand, variant, isLoading, input],
+    [mention, selectMention, slash, selectSlashCommand, isLoading, input],
   );
 
   const handleStop = useCallback(() => { abortRef.current?.abort(); }, []);
@@ -377,7 +382,12 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     const content = selectedSkill
       ? `Use the skill ${selectedSkill.name}: ${text}`
       : text;
-    const userMsg: Message = { role: 'user', content, timestamp: Date.now() };
+    const userMsg: Message = {
+      role: 'user',
+      content,
+      timestamp: Date.now(),
+      ...(selectedSkill && { skillName: selectedSkill.name }),
+    };
     const requestMessages = [...session.messages, userMsg];
     session.setMessages([...requestMessages, { role: 'assistant', content: '', timestamp: Date.now() }]);
     setInput('');
@@ -389,25 +399,35 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     setAttachedFiles(currentFile ? [currentFile] : []);
     setIsLoading(true);
     setLoadingPhase('connecting');
+    setReconnectAttempt(0);
 
     const controller = new AbortController();
     abortRef.current = controller;
 
+    let maxRetries = 3;
     try {
+      const stored = localStorage.getItem('mindos-reconnect-retries');
+      if (stored !== null) { const n = parseInt(stored, 10); if (Number.isFinite(n)) maxRetries = Math.max(0, Math.min(10, n)); }
+    } catch { /* localStorage unavailable */ }
+    reconnectMaxRef.current = maxRetries;
+
+    const requestBody = JSON.stringify({
+      messages: requestMessages,
+      currentFile,
+      attachedFiles,
+      uploadedFiles: upload.localAttachments.map(f => ({
+        name: f.name,
+        content: f.content.length > 20_000
+          ? f.content.slice(0, 20_000) + '\n\n[...truncated to first ~20000 chars]'
+          : f.content,
+      })),
+    });
+
+    const doFetch = async (): Promise<{ finalMessage: Message }> => {
       const res = await fetch('/api/ask', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          messages: requestMessages,
-          currentFile,
-          attachedFiles,
-          uploadedFiles: upload.localAttachments.map(f => ({
-            name: f.name,
-            content: f.content.length > 20_000
-              ? f.content.slice(0, 20_000) + '\n\n[...truncated to first ~20000 chars]'
-              : f.content,
-          })),
-        }),
+        body: requestBody,
         signal: controller.signal,
       });
 
@@ -423,7 +443,9 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             errorMsg = errBody.message;
           }
         } catch {}
-        throw new Error(errorMsg);
+        const err = new Error(errorMsg);
+        (err as Error & { httpStatus?: number }).httpStatus = res.status;
+        throw err;
       }
 
       if (!res.body) throw new Error('No response body');
@@ -442,14 +464,45 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         },
         controller.signal,
       );
+      return { finalMessage };
+    };
 
-      if (!finalMessage.content.trim() && (!finalMessage.parts || finalMessage.parts.length === 0)) {
-        session.setMessages(prev => {
-          const updated = [...prev];
-          updated[updated.length - 1] = { role: 'assistant', content: `__error__${t.ask.errorNoResponse}` };
-          return updated;
-        });
+    try {
+      let lastError: Error | null = null;
+
+      for (let attempt = 0; attempt <= maxRetries; attempt++) {
+        if (controller.signal.aborted) break;
+
+        if (attempt > 0) {
+          setReconnectAttempt(attempt);
+          setLoadingPhase('reconnecting');
+          session.setMessages(prev => {
+            const updated = [...prev];
+            updated[updated.length - 1] = { role: 'assistant', content: '', timestamp: Date.now() };
+            return updated;
+          });
+          await sleep(retryDelay(attempt - 1), controller.signal);
+          setLoadingPhase('connecting');
+        }
+
+        try {
+          const { finalMessage } = await doFetch();
+          if (!finalMessage.content.trim() && (!finalMessage.parts || finalMessage.parts.length === 0)) {
+            session.setMessages(prev => {
+              const updated = [...prev];
+              updated[updated.length - 1] = { role: 'assistant', content: `__error__${t.ask.errorNoResponse}` };
+              return updated;
+            });
+          }
+          return;
+        } catch (err) {
+          lastError = err instanceof Error ? err : new Error(String(err));
+          const httpStatus = (err as Error & { httpStatus?: number }).httpStatus;
+          if (!isRetryableError(err, httpStatus) || attempt >= maxRetries) break;
+        }
       }
+
+      if (lastError) throw lastError;
     } catch (err) {
       if ((err as Error).name === 'AbortError') {
         session.setMessages(prev => {
@@ -482,6 +535,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
       }
     } finally {
       setIsLoading(false);
+      setReconnectAttempt(0);
       abortRef.current = null;
     }
   }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, mention.mentionQuery, slash.slashQuery, selectedSkill, t.ask.errorNoResponse, t.ask.stopped, onFirstMessage]);
@@ -595,15 +649,21 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         emptyPrompt={t.ask.emptyPrompt}
         suggestions={t.ask.suggestions}
         onSuggestionClick={setInput}
-        labels={{ connecting: t.ask.connecting, thinking: t.ask.thinking, generating: t.ask.generating }}
+        labels={{
+          connecting: t.ask.connecting,
+          thinking: t.ask.thinking,
+          generating: t.ask.generating,
+          reconnecting: reconnectAttempt > 0 ? t.ask.reconnecting(reconnectAttempt, reconnectMaxRef.current) : undefined,
+        }}
       />
 
-      {/* Popovers — rendered outside overflow containers so they can extend freely */}
+      {/* 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">
           <MentionPopover
             results={mention.mentionResults}
             selectedIndex={mention.mentionIndex}
+            query={mention.mentionQuery ?? undefined}
             onSelect={selectMention}
           />
         </div>
@@ -614,6 +674,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           <SlashCommandPopover
             results={slash.slashResults}
             selectedIndex={slash.slashIndex}
+            query={slash.slashQuery ?? undefined}
             onSelect={selectSlashCommand}
           />
         </div>
@@ -706,7 +767,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             onSubmit={handleSubmit}
             className={cn(
               'flex',
-              isPanel ? 'min-h-0 flex-1 items-end gap-1.5 px-2 py-2' : 'items-center gap-2 px-3 py-3',
+              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" 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="Attach local file">
@@ -726,34 +787,24 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             }}
           />
 
-          {isPanel ? (
-            <textarea
-              ref={(el) => {
-                inputRef.current = el;
-              }}
-              value={input}
-              onChange={e => handleInputChange(e.target.value, e.target.selectionStart ?? undefined)}
-              onKeyDown={handleInputKeyDown}
-              placeholder={t.ask.placeholder}
-              rows={1}
-              className="min-w-0 flex-1 resize-none overflow-y-auto bg-transparent py-2 text-sm leading-snug text-foreground placeholder:text-muted-foreground outline-none"
-            />
-          ) : (
-            <input
-              ref={(el) => {
-                inputRef.current = el;
-              }}
-              value={input}
-              onChange={e => handleInputChange(e.target.value, e.target.selectionStart ?? undefined)}
-              onKeyDown={handleInputKeyDown}
-              placeholder={t.ask.placeholder}
-              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none min-w-0"
-            />
-          )}
+          <textarea
+            ref={(el) => {
+              inputRef.current = el;
+            }}
+            value={input}
+            onChange={e => handleInputChange(e.target.value, e.target.selectionStart ?? undefined)}
+            onKeyDown={handleInputKeyDown}
+            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',
+            )}
+          />
 
           {isLoading ? (
-            <button type="button" onClick={handleStop} className="p-1.5 rounded-md transition-colors shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted" title={t.ask.stopTitle}>
-              <StopCircle size={inputIconSize} />
+            <button type="button" onClick={handleStop} className="p-1.5 rounded-md transition-colors shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted" title={loadingPhase === 'reconnecting' ? t.ask.cancelReconnect : t.ask.stopTitle}>
+              {loadingPhase === 'reconnecting' ? <X size={inputIconSize} /> : <StopCircle size={inputIconSize} />}
             </button>
           ) : (
             <button type="submit" disabled={!input.trim() || mention.mentionQuery !== null || slash.slashQuery !== null} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)]">
@@ -770,18 +821,16 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           'flex shrink-0 items-center',
           isPanel
             ? 'flex-wrap gap-x-2 gap-y-1 px-3 pb-1.5 text-[10px] text-muted-foreground/40'
-            : 'hidden gap-3 px-4 pb-2 text-xs text-muted-foreground/50 md:flex',
+            : 'flex-wrap gap-x-3 gap-y-1 px-4 pb-2 text-[10px] md:text-xs text-muted-foreground/50',
         )}
       >
         <span suppressHydrationWarning>
           <kbd className="font-mono">↵</kbd> {t.ask.send}
         </span>
-        {isPanel ? (
-          <span suppressHydrationWarning>
-            <kbd className="font-mono">⇧</kbd>
-            <kbd className="font-mono ml-0.5">↵</kbd> {t.ask.newlineHint}
-          </span>
-        ) : null}
+        <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>

package/app/components/ask/HighlightMatch.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+export default function HighlightMatch({ text, query }: { text: string; query?: string }) {
+  if (!query) return <>{text}</>;
+  const idx = text.toLowerCase().indexOf(query.toLowerCase());
+  if (idx === -1) return <>{text}</>;
+  return (
+    <>
+      {text.slice(0, idx)}
+      <span className="text-[var(--amber)] font-semibold">{text.slice(idx, idx + query.length)}</span>
+      {text.slice(idx + query.length)}
+    </>
+  );
+}

package/app/components/ask/MentionPopover.tsx

@@ -2,14 +2,16 @@
 
 import { useEffect, useRef } from 'react';
 import { FileText, Table, FolderOpen } from 'lucide-react';
+import HighlightMatch from './HighlightMatch';
 
 interface MentionPopoverProps {
   results: string[];
   selectedIndex: number;
+  query?: string;
   onSelect: (filePath: string) => void;
 }
 
-export default function MentionPopover({ results, selectedIndex, onSelect }: MentionPopoverProps) {
+export default function MentionPopover({ results, selectedIndex, query, onSelect }: MentionPopoverProps) {
   const listRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -52,10 +54,10 @@ export default function MentionPopover({ results, selectedIndex, onSelect }: Men
             ) : (
               <FileText size={13} className="text-muted-foreground shrink-0" />
             )}
-            <span className="truncate font-medium flex-1">{name}</span>
+            <span className="truncate font-medium flex-1"><HighlightMatch text={name} query={query} /></span>
             {dir && (
               <span className="text-2xs text-muted-foreground/40 truncate max-w-[140px] shrink-0">
-                {dir}
+                <HighlightMatch text={dir} query={query} />
               </span>
             )}
           </button>