@geminilight/mindos 0.6.63 → 0.6.65

package/_standalone/components/ask/AskContent.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useLayoutEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { Send, StopCircle, X, Plus, FileText, ImageIcon } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
-import type { AskMode } from '@/lib/types';
+import type { AskMode, Message } from '@/lib/types';
 import ModeCapsule, { getPersistedMode } from '@/components/ask/ModeCapsule';
 import { useAskSession } from '@/hooks/useAskSession';
 import { useFileUpload } from '@/hooks/useFileUpload';
@@ -74,9 +74,11 @@ interface AskContentProps {
   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 }: AskContentProps) {
+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';
 
@@ -103,7 +105,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
   const selectedAcpAgentRef = useRef(selectedAcpAgent);
   selectedAcpAgentRef.current = selectedAcpAgent;
   const [chatMode, setChatMode] = useState<AskMode>('agent');
-  const [providerOverride, setProviderOverride] = useState<ProviderId | `cp_${string}` | null>(null);
+  const [providerOverride, setProviderOverride] = useState<ProviderId | `p_${string}` | null>(null);
   const [modelOverride, setModelOverride] = useState<string | null>(null);
 
   useEffect(() => {
@@ -136,7 +138,30 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     setSelectedSkill(null);
     setSelectedAcpAgent(null);
     setAttachedFiles(currentFile ? [currentFile] : []);
-  }, [currentFile]);
+    upload.clearAttachments();
+  }, [currentFile, upload]);
+
+
+  const handleRestoreInput = useCallback((userMessage: Message) => {
+    setInput(userMessage.content);
+    // Restore images if they exist
+    if (userMessage.images && userMessage.images.length > 0) {
+      // Reconstruct the images state from the message images
+      imageUpload.clearImages();
+      // Note: we can't directly set images without going through the upload flow
+      // So we just clear them for now - in practice, images are usually small content
+      // and the user can re-add them if needed
+    }
+    if (userMessage.attachedFiles) setAttachedFiles(userMessage.attachedFiles);
+    // Restore skill selection if it was set
+    if (userMessage.skillName) {
+      // The skill is already in the slash command system, just mark as selected
+      // This will be handled through the UI state
+      slash.resetSlash(); // Clear any active slash query
+    }
+    // Focus back to input
+    setTimeout(() => inputRef.current?.focus(), 50);
+  }, [imageUpload, slash]);
 
   const chatRefs = useRef({ inputValueRef, mentionRef, slashRef, imageUploadRef, sessionRef, uploadRef, selectedSkillRef, selectedAcpAgentRef, attachedFilesRef });
   const chat = useAskChat({
@@ -148,6 +173,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     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;
@@ -482,7 +508,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
   }), [t, reconnectAttempt]);
 
   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}
@@ -495,6 +521,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
         askMode={isHome ? undefined : askMode}
         onModeSwitch={isHome ? undefined : onModeSwitch}
         onClose={isHome ? undefined : onClose}
+        onDockToPanel={maximized ? onDockToPanel : undefined}
         sessions={session.sessions}
         activeSessionId={session.activeSessionId}
         onLoadSession={handleLoadSession}
@@ -522,32 +549,33 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
         />
       )}
 
-      {/* Messages */}
       {/* Messages — home variant hides empty state (suggestions rendered externally) */}
-      {!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 && (
-        <MessageList
-          messages={session.messages}
-          isLoading={isLoading}
-          loadingPhase={loadingPhase}
-          emptyPrompt={t.ask.emptyPrompt}
-          emptyHint={t.ask.emptyHint}
-          suggestions={[]}
-          onSuggestionClick={setInput}
-          labels={messageLabels}
-        />
-      )}
+      <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 && (
+          <MessageList
+            messages={session.messages}
+            isLoading={isLoading}
+            loadingPhase={loadingPhase}
+            emptyPrompt={t.ask.emptyPrompt}
+            emptyHint={t.ask.emptyHint}
+            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 && (
@@ -573,7 +601,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
       )}
 
       {/* Composer card — unified input area */}
-      <div className="shrink-0 px-3 pb-2.5 pt-1">
+      <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',
@@ -621,7 +649,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
           <form
             ref={formRef}
             onSubmit={handleSubmit}
-            className="flex items-end gap-1.5 px-3 py-2"
+            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">
@@ -690,7 +718,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
               onPaste={handlePaste}
               placeholder={t.ask.placeholder}
               rows={1}
-              className="min-w-0 flex-1 resize-none overflow-y-hidden bg-transparent py-2 text-sm leading-relaxed text-foreground placeholder:text-muted-foreground/50 outline-none focus-visible:ring-0"
+              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 ? (
@@ -705,8 +733,8 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
           </form>
 
           {/* Mode + Agent + Provider selector row + keyboard hint */}
-          <div className="flex items-center justify-between px-3 pb-2 pt-1.5 border-t border-border/10">
-            <div className="flex items-center gap-2">
+          <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
@@ -729,13 +757,15 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
               />
             )}
             </div>
-            {/* Keyboard hint */}
-            <span className="hidden md:inline text-2xs text-muted-foreground/40 select-none">
-              <kbd className="font-mono">Enter</kbd> {t.ask.send} · <kbd className="font-mono">Shift+Enter</kbd> {t.ask.newlineHint}
-            </span>
+            {/* 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>
   );
 }

package/_standalone/components/ask/AskHeader.tsx

@@ -16,6 +16,8 @@ interface AskHeaderProps {
   askMode?: 'panel' | 'popup';
   onModeSwitch?: () => void;
   onClose?: () => void;
+  /** Navigate from fullscreen to right-side panel mode */
+  onDockToPanel?: () => void;
   hideTitle?: boolean;
   /** Session switching — inline in header when >=2 sessions */
   sessions?: ChatSession[];
@@ -28,7 +30,7 @@ interface AskHeaderProps {
 
 export default memo(function AskHeader({
   isPanel, showHistory, onToggleHistory, onReset, isLoading,
-  maximized, onMaximize, askMode, onModeSwitch, onClose, hideTitle,
+  maximized, onMaximize, askMode, onModeSwitch, onClose, onDockToPanel, hideTitle,
   sessions, activeSessionId, onLoadSession, onDeleteSession, onRenameSession, onTogglePinSession,
 }: AskHeaderProps) {
   const { t } = useLocale();
@@ -244,6 +246,11 @@ export default memo(function AskHeader({
             {maximized ? <Minimize2 size={iconSize} /> : <Maximize2 size={iconSize} />}
           </button>
         )}
+        {onDockToPanel && (
+          <button type="button" onClick={(e) => { e.stopPropagation(); onDockToPanel(); }} className="p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.hints.dockToSide ?? 'Dock to side panel'}>
+            <PanelRight size={iconSize} />
+          </button>
+        )}
         {onModeSwitch && (
           <button type="button" onClick={(e) => { e.stopPropagation(); onModeSwitch(); }} className="p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={askMode === 'popup' ? t.hints.dockToSide : t.hints.openAsPopup}>
             {askMode === 'popup' ? <PanelRight size={iconSize} /> : <AppWindow size={iconSize} />}

package/_standalone/components/ask/MessageList.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useEffect, memo, useState, useCallback } from 'react';
-import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap, Copy, Check, ArrowDown, FolderInput, Search, PenLine, Lightbulb } from 'lucide-react';
+import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap, Copy, Check, ArrowDown, FolderInput, Search, PenLine, Lightbulb, FileText, Paperclip } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { Message, ImagePart } from '@/lib/types';
@@ -35,10 +35,17 @@ function CopyMessageButton({ text, label }: { text: string; label?: string }) {
   );
 }
 
-function UserMessageContent({ content, skillName, images }: { content: string; skillName?: string; images?: ImagePart[] }) {
+function UserMessageContent({ content, skillName, images, attachedFiles, uploadedFileNames }: { content: string; skillName?: string; images?: ImagePart[]; attachedFiles?: string[]; uploadedFileNames?: string[] }) {
   const resolved = skillName ?? content.match(SKILL_PREFIX_RE)?.[1];
   const prefixMatch = content.match(SKILL_PREFIX_RE);
   const rest = prefixMatch ? content.slice(prefixMatch[0].length) : content;
+
+  // Deduplicate: uploaded files already shown shouldn't repeat as attached
+  const uploadedSet = new Set(uploadedFileNames ?? []);
+  const dedupedAttached = attachedFiles?.filter(fp => !uploadedSet.has(fp.split('/').pop() ?? fp));
+  const hasContext = (dedupedAttached && dedupedAttached.length > 0)
+    || (uploadedFileNames && uploadedFileNames.length > 0);
+
   return (
     <>
       {/* Images */}
@@ -68,6 +75,33 @@ function UserMessageContent({ content, skillName, images }: { content: string; s
         </span>
       )}
       {resolved ? rest : content}
+      {/* File context chips */}
+      {hasContext && (
+        <div className="mt-2 pt-1.5 border-t border-white/15 flex flex-wrap gap-1 whitespace-normal" role="list" aria-label="Attached files">
+          {dedupedAttached?.map(fp => (
+            <span
+              key={fp}
+              role="listitem"
+              className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] bg-white/10 text-white/80 min-w-0"
+              title={fp}
+            >
+              <FileText size={9} className="shrink-0 opacity-70" />
+              <span className="truncate max-w-[120px]">{fp.split('/').pop()}</span>
+            </span>
+          ))}
+          {uploadedFileNames?.map(name => (
+            <span
+              key={name}
+              role="listitem"
+              className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] bg-white/10 text-white/80 min-w-0"
+              title={name}
+            >
+              <Paperclip size={9} className="shrink-0 opacity-70" />
+              <span className="truncate max-w-[120px]">{name}</span>
+            </span>
+          ))}
+        </div>
+      )}
     </>
   );
 }
@@ -253,7 +287,7 @@ export default memo(function MessageList({
             <div
               className="max-w-[85%] px-3.5 py-2.5 rounded-2xl rounded-br-lg text-sm leading-relaxed whitespace-pre-wrap bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm shadow-[var(--amber)]/10"
             >
-              <UserMessageContent content={m.content} skillName={m.skillName} images={m.images} />
+              <UserMessageContent content={m.content} skillName={m.skillName} images={m.images} attachedFiles={m.attachedFiles} uploadedFileNames={m.uploadedFileNames} />
             </div>
           ) : m.content.startsWith('__error__') ? (
             <div className="max-w-[85%] px-3.5 py-3 rounded-2xl rounded-bl-md border border-error/30 bg-error/10 text-sm shadow-sm">

package/_standalone/components/ask/ProviderModelCapsule.tsx

@@ -7,15 +7,13 @@ import { useLocale } from '@/lib/stores/locale-store';
 import {
   type ProviderId,
   PROVIDER_PRESETS,
-  ALL_PROVIDER_IDS,
   isProviderId,
-  getApiKeyEnvVar,
 } from '@/lib/agent/providers';
-import { type CustomProvider, isCustomProviderId, findCustomProvider } from '@/lib/custom-endpoints';
+import { type Provider, isProviderEntryId, findProvider } from '@/lib/custom-endpoints';
 
 const STORAGE_KEY = 'mindos-provider-model';
 
-type ProviderSelection = ProviderId | `cp_${string}` | null;
+type ProviderSelection = ProviderId | `p_${string}` | null;
 
 interface ProviderModelCapsuleProps {
   providerValue: ProviderSelection;
@@ -27,10 +25,9 @@ interface ProviderModelCapsuleProps {
 
 interface SettingsData {
   ai?: {
-    provider?: string;
-    providers?: Record<string, { apiKey?: string; model?: string; baseUrl?: string }>;
+    activeProvider?: string;
+    providers?: Provider[];
   };
-  customProviders?: CustomProvider[];
   envOverrides?: Record<string, boolean>;
 }
 
@@ -42,11 +39,11 @@ export function getPersistedProviderModel(): { provider: ProviderSelection; mode
     const raw = localStorage.getItem(STORAGE_KEY);
     if (!raw) {
       const old = localStorage.getItem('mindos-provider-override');
-      if (old && (isProviderId(old) || isCustomProviderId(old))) return { provider: old as any, model: null };
+      if (old && (isProviderId(old) || isProviderEntryId(old))) return { provider: old as any, model: null };
       return { provider: null, model: null };
     }
     const parsed = JSON.parse(raw);
-    const provider = parsed?.provider && (isProviderId(parsed.provider) || isCustomProviderId(parsed.provider))
+    const provider = parsed?.provider && (isProviderId(parsed.provider) || isProviderEntryId(parsed.provider))
       ? parsed.provider : null;
     const model = typeof parsed?.model === 'string' ? parsed.model : null;
     return { provider, model };
@@ -63,24 +60,8 @@ function persistProviderModel(provider: ProviderSelection, model: string | null)
 
 /* ── Configured providers ── */
 
-function getConfiguredProviders(data: SettingsData): (ProviderId | `cp_${string}`)[] {
-  const result: (ProviderId | `cp_${string}`)[] = [];
-  const providers = data.ai?.providers ?? {};
-  const customProviders = data.customProviders ?? [];
-  const env = data.envOverrides ?? {};
-  for (const id of ALL_PROVIDER_IDS) {
-    const preset = PROVIDER_PRESETS[id];
-    const hasKey = providers[id]?.apiKey === '***set***';
-    const envVar = getApiKeyEnvVar(id);
-    const hasEnv = envVar ? !!env[envVar] : false;
-    if (hasKey || hasEnv) { result.push(id); }
-    else if (preset.apiKeyFallback) {
-      const cfg = providers[id];
-      if (data.ai?.provider === id || (cfg && (cfg.model || cfg.baseUrl))) result.push(id);
-    }
-  }
-  for (const cp of customProviders) result.push(cp.id as `cp_${string}`);
-  return result;
+function getConfiguredProviders(data: SettingsData): string[] {
+  return (data.ai?.providers ?? []).map(p => p.id);
 }
 
 /* ── Component ── */
@@ -101,7 +82,7 @@ export default function ProviderModelCapsule({
   // Flyout state
   const providerPanelRef = useRef<HTMLDivElement>(null);
   const hoveredRowRef = useRef<HTMLDivElement>(null);
-  const [hoveredProvider, setHoveredProvider] = useState<ProviderId | `cp_${string}` | null>(null);
+  const [hoveredProvider, setHoveredProvider] = useState<string | null>(null);
   const [flyoutStyle, setFlyoutStyle] = useState<React.CSSProperties>({});
   const [expandedModels, setExpandedModels] = useState<string[] | null>(null);
   const [modelsLoading, setModelsLoading] = useState(false);
@@ -151,8 +132,7 @@ export default function ProviderModelCapsule({
     return () => { cancelled = true; document.removeEventListener('visibilitychange', onVisible); window.removeEventListener('mindos:settings-changed', onChange); };
   }, []);
 
-  const defaultProvider = (settingsData?.ai?.provider && isProviderId(settingsData.ai.provider))
-    ? settingsData.ai.provider as ProviderId : 'anthropic';
+  const defaultProvider = settingsData?.ai?.activeProvider || '';
 
   const configuredProviders = useMemo(
     () => settingsData ? getConfiguredProviders(settingsData) : [],
@@ -170,14 +150,12 @@ export default function ProviderModelCapsule({
 
   // Resolve active display
   const activeProvider = providerValue ?? defaultProvider;
-  const isCustomActive = isCustomProviderId(String(activeProvider));
-  const customProvider = isCustomActive ? findCustomProvider(settingsData?.customProviders ?? [], String(activeProvider)) : null;
-  const activePreset = !isCustomActive ? PROVIDER_PRESETS[activeProvider as ProviderId] : null;
-  const defaultModel = customProvider?.model
-    || settingsData?.ai?.providers?.[activeProvider as ProviderId]?.model
+  const activeEntry = findProvider(settingsData?.ai?.providers ?? [], String(activeProvider));
+  const activePreset = activeEntry ? PROVIDER_PRESETS[activeEntry.protocol] : null;
+  const defaultModel = activeEntry?.model
     || activePreset?.defaultModel || '';
   const displayModel = modelValue || defaultModel;
-  const displayName = customProvider?.name
+  const displayName = activeEntry?.name
     || (activePreset ? (locale === 'zh' ? activePreset.nameZh : activePreset.name) : String(activeProvider));
 
   /* ── Dropdown positioning ── */
@@ -244,7 +222,7 @@ export default function ProviderModelCapsule({
   }, [open, hoveredProvider]);
 
   /* ── Model fetching ── */
-  const fetchModels = useCallback(async (providerId: ProviderId | `cp_${string}`, force = false) => {
+  const fetchModels = useCallback(async (providerId: string, force = false) => {
     if (!force && modelsCacheRef.current[providerId]) {
       setExpandedModels(modelsCacheRef.current[providerId]);
       setModelsLoading(false);
@@ -254,14 +232,9 @@ export default function ProviderModelCapsule({
     setModelsLoading(true); setModelsError(''); setExpandedModels(null);
     const version = ++fetchVersionRef.current;
     try {
-      const isCustom = isCustomProviderId(String(providerId));
-      const body: Record<string, string> = isCustom 
-        ? { customProviderId: providerId }
-        : { provider: providerId };
-      
       const res = await fetch('/api/settings/list-models', {
         method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body),
+        body: JSON.stringify({ provider: providerId }),
       });
       if (version !== fetchVersionRef.current) return;
       const json = await res.json();
@@ -277,19 +250,13 @@ export default function ProviderModelCapsule({
     }
   }, []);
 
-  const canCustomProviderExpand = useCallback((cpId: string) => {
-    if (!isCustomProviderId(cpId)) return false;
-    const cp = findCustomProvider(settingsData?.customProviders ?? [], cpId);
-    return !!cp; // All custom providers can now expand (they use their baseProviderId)
-  }, [settingsData]);
-
   // Determine if a provider can show model flyout
-  const canProviderExpand = useCallback((id: ProviderId | `cp_${string}`) => {
-    if (isCustomProviderId(String(id))) {
-      return canCustomProviderExpand(String(id));
-    }
-    return PROVIDER_PRESETS[id as ProviderId]?.supportsListModels ?? false;
-  }, [canCustomProviderExpand]);
+  const canProviderExpand = useCallback((id: string) => {
+    const entry = findProvider(settingsData?.ai?.providers ?? [], id);
+    if (!entry) return false;
+    const preset = PROVIDER_PRESETS[entry.protocol];
+    return preset?.supportsListModels ?? false;
+  }, [settingsData]);
 
   // Compute flyout position: anchored to right edge of provider panel, aligned to hovered row
   const computeFlyoutPosition = useCallback(() => {
@@ -323,7 +290,7 @@ export default function ProviderModelCapsule({
   }, []);
 
   // Open flyout for a provider (debounced to prevent flicker)
-  const openFlyout = useCallback((providerId: ProviderId | `cp_${string}`) => {
+  const openFlyout = useCallback((providerId: string) => {
     cancelCloseTimer();
     if (openTimerRef.current) clearTimeout(openTimerRef.current);
     openTimerRef.current = setTimeout(() => {
@@ -378,7 +345,7 @@ export default function ProviderModelCapsule({
     if (e.key === 'ArrowDown') { e.preventDefault(); setModelHighlight(i => (i + 1) % filteredModels.length); }
     else if (e.key === 'ArrowUp') { e.preventDefault(); setModelHighlight(i => (i - 1 + filteredModels.length) % filteredModels.length); }
     else if (e.key === 'Enter' && modelHighlight >= 0 && modelHighlight < filteredModels.length && hoveredProvider) {
-      e.preventDefault(); handleSelectModel(hoveredProvider, filteredModels[modelHighlight]);
+      e.preventDefault(); handleSelectModel(hoveredProvider as ProviderSelection, filteredModels[modelHighlight]);
     } else if (e.key === 'Escape') { e.preventDefault(); setHoveredProvider(null); setModelSearch(''); }
   }, [filteredModels, modelHighlight, hoveredProvider, handleSelectModel]);
 
@@ -391,19 +358,22 @@ export default function ProviderModelCapsule({
   /* ── Guards ── */
   if (!settingsData || configuredProviders.length === 0) return null;
 
-  const modelShort = (displayModel || '').length > 24
-    ? (displayModel || '').slice(0, 22) + '...' : displayModel;
-  const builtInIds = configuredProviders.filter(id => !isCustomProviderId(String(id)));
-  const customIds = configuredProviders.filter(id => isCustomProviderId(String(id)));
+  const modelShort = (displayModel || '').length > 20
+    ? (displayModel || '').slice(0, 18) + '…' : displayModel;
+  // For built-in providers, use shortLabel; for custom, truncate if too long
+  const providerDisplay = (displayName || '').length > 12
+    ? (displayName || '').slice(0, 10) + '…'
+    : (activePreset?.shortLabel || displayName);
+  const capsuleTooltip = `${displayName} · ${displayModel}`;
+  const providerIds = configuredProviders;
   const hasModelOverride = !!(modelValue && modelValue !== defaultModel);
 
   /* ── Render: flyout (right panel) — positioned absolutely via portal ── */
   const renderFlyout = () => {
     if (!hoveredProvider) return null;
-    const isCustom = isCustomProviderId(String(hoveredProvider));
-    const preset = !isCustom ? PROVIDER_PRESETS[hoveredProvider as ProviderId] : null;
-    const customProvider = isCustom ? findCustomProvider(settingsData?.customProviders ?? [], String(hoveredProvider)) : null;
-    const displayName = customProvider?.name || (preset ? (locale === 'zh' ? preset.nameZh : preset.name) : String(hoveredProvider));
+    const hovEntry = findProvider(settingsData?.ai?.providers ?? [], hoveredProvider);
+    const preset = hovEntry ? PROVIDER_PRESETS[hovEntry.protocol] : null;
+    const displayName = hovEntry?.name || (preset ? (locale === 'zh' ? preset.nameZh : preset.name) : String(hoveredProvider));
     
     return createPortal(
       <div
@@ -462,11 +432,11 @@ export default function ProviderModelCapsule({
           )}
           {filteredModels.map((m, i) => {
             const isModelSelected = providerValue === hoveredProvider && modelValue === m;
-            const defModel = settingsData?.ai?.providers?.[hoveredProvider]?.model || preset?.defaultModel;
+            const defModel = hovEntry?.model || preset?.defaultModel;
             return (
               <button
                 key={m} type="button" data-model-item
-                onClick={() => handleSelectModel(hoveredProvider, m)}
+                onClick={() => handleSelectModel(hoveredProvider as ProviderSelection, m)}
                 className={`w-full text-left px-2 py-1 text-2xs rounded transition-colors flex items-center gap-1 ${
                   isModelSelected ? 'bg-[var(--amber)]/12 text-foreground font-medium'
                   : i === modelHighlight ? 'bg-accent' : 'hover:bg-accent/60'
@@ -502,26 +472,28 @@ export default function ProviderModelCapsule({
         className="w-[220px] rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
         style={{ maxHeight: '70vh', overflowY: 'auto' }}
       >
-        {builtInIds.map((id) => {
-          const preset = PROVIDER_PRESETS[id as ProviderId];
-          const provName = locale === 'zh' ? preset.nameZh : preset.name;
+        {providerIds.map((id) => {
+          const entry = findProvider(settingsData?.ai?.providers ?? [], id);
+          if (!entry) return null;
+          const preset = PROVIDER_PRESETS[entry.protocol];
+          const provName = entry.name || (locale === 'zh' ? preset?.nameZh : preset?.name) || id;
           const provModel = modelValue && providerValue === id ? modelValue
-            : settingsData?.ai?.providers?.[id as ProviderId]?.model || preset.defaultModel;
+            : entry.model || preset?.defaultModel || '';
           const isSelected = providerValue === id || (!providerValue && defaultProvider === id);
           const isHovered = hoveredProvider === id;
-          const canExpand = canProviderExpand(id as ProviderId);
+          const canExpand = canProviderExpand(id);
 
           return (
             <div
               key={id}
               ref={isHovered ? hoveredRowRef : undefined}
-              onMouseEnter={() => canExpand ? openFlyout(id as ProviderId) : closeFlyoutImmediate()}
+              onMouseEnter={() => canExpand ? openFlyout(id) : closeFlyoutImmediate()}
               onMouseLeave={startCloseTimer}
             >
               <div className={`flex w-full items-center text-xs transition-colors ${isHovered ? 'bg-accent/60' : 'hover:bg-muted/60'}`}>
                 <button
                   type="button" role="option" aria-selected={isSelected}
-                  onClick={() => handleSelectProvider(id as ProviderId)}
+                  onClick={() => handleSelectProvider(id as ProviderSelection)}
                   className="flex flex-1 items-center gap-2 px-3 py-1.5 min-w-0"
                 >
                   <div className="flex-1 min-w-0 truncate">
@@ -538,57 +510,7 @@ export default function ProviderModelCapsule({
                     onClick={(e) => {
                       e.stopPropagation();
                       if (hoveredProvider === id) closeFlyoutImmediate();
-                      else openFlyout(id as ProviderId);
-                    }}
-                    className={`shrink-0 px-1.5 py-1.5 mr-1 rounded transition-colors ${
-                      isHovered ? 'text-foreground' : 'text-muted-foreground/40 hover:text-muted-foreground'
-                    }`}
-                    title={t.ask?.selectModel ?? 'Select model'}
-                  >
-                    <ChevronRight size={11} />
-                  </button>
-                )}
-              </div>
-            </div>
-          );
-        })}
-
-        {customIds.map((id) => {
-          const cp = findCustomProvider(settingsData?.customProviders ?? [], String(id));
-          if (!cp) return null;
-          const cpModel = modelValue && providerValue === id ? modelValue : cp.model;
-          const isSelected = providerValue === id;
-          const isHovered = hoveredProvider === id;
-          const canExpand = canProviderExpand(id as `cp_${string}`);
-
-          return (
-            <div
-              key={id}
-              ref={isHovered ? hoveredRowRef : undefined}
-              onMouseEnter={() => canExpand ? openFlyout(id as `cp_${string}`) : closeFlyoutImmediate()}
-              onMouseLeave={startCloseTimer}
-            >
-              <div className={`flex w-full items-center text-xs transition-colors ${isHovered ? 'bg-accent/60' : 'hover:bg-muted/60'}`}>
-                <button
-                  type="button" role="option" aria-selected={isSelected}
-                  onClick={() => handleSelectProvider(id)}
-                  className="flex flex-1 items-center gap-2 px-3 py-1.5 min-w-0"
-                >
-                  <div className="flex-1 min-w-0 truncate">
-                    <span className={`text-xs ${isSelected ? 'font-medium text-foreground' : 'text-foreground/80'}`}>
-                      {cp.name}
-                    </span>
-                    <span className="text-2xs text-muted-foreground ml-1.5">{cpModel}</span>
-                  </div>
-                  {isSelected && <Check size={11} className="shrink-0 text-[var(--amber)]" />}
-                </button>
-                {canExpand && (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      if (hoveredProvider === id) closeFlyoutImmediate();
-                      else openFlyout(id as `cp_${string}`);
+                      else openFlyout(id);
                     }}
                     className={`shrink-0 px-1.5 py-1.5 mr-1 rounded transition-colors ${
                       isHovered ? 'text-foreground' : 'text-muted-foreground/40 hover:text-muted-foreground'
@@ -620,7 +542,7 @@ export default function ProviderModelCapsule({
         disabled={disabled}
         className={`
           inline-flex items-center gap-1 rounded-full px-2.5 py-0.5
-          text-2xs font-medium transition-colors select-none
+          text-2xs font-medium transition-colors select-none max-w-[260px]
           border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
           disabled:opacity-40 disabled:cursor-not-allowed
           ${providerValue || hasModelOverride
@@ -628,13 +550,13 @@ export default function ProviderModelCapsule({
             : 'bg-muted/50 border-border/50 text-muted-foreground hover:bg-muted hover:text-foreground'
           }
         `}
-        title={t.ask?.providerCapsule ?? 'Provider'}
+        title={capsuleTooltip}
         aria-expanded={open}
         aria-haspopup="listbox"
       >
         <Cpu size={11} className="shrink-0" />
-        <span className="truncate max-w-[160px]">
-          {displayName}
+        <span className="truncate">
+          {providerDisplay}
           <span className="text-muted-foreground"> · </span>
           <span className={hasModelOverride ? 'text-[var(--amber)]' : 'text-muted-foreground'}>{modelShort}</span>
         </span>