@geminilight/mindos 0.6.58 → 0.6.60

package/app/components/ask/AskContent.tsx

@@ -15,7 +15,6 @@ 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 SessionTabBar from '@/components/ask/SessionTabBar';
 import AskHeader from '@/components/ask/AskHeader';
 import FileChip from '@/components/ask/FileChip';
 import AgentSelectorCapsule from '@/components/ask/AgentSelectorCapsule';
@@ -65,8 +64,8 @@ interface AskContentProps {
   /** ACP agent pre-selected via "Use" button from A2A tab */
   initialAcpAgent?: AcpAgentSelection | null;
   onFirstMessage?: () => void;
-  /** 'modal' renders close button + ESC handler; 'panel' renders compact header */
-  variant: 'modal' | 'panel';
+  /** '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;
@@ -79,6 +78,7 @@ interface AskContentProps {
 
 export default function AskContent({ visible, currentFile, initialMessage, initialAcpAgent, onFirstMessage, variant, onClose, maximized, onMaximize, askMode, onModeSwitch }: AskContentProps) {
   const isPanel = variant === 'panel';
+  const isHome = variant === 'home';
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const imageInputRef = useRef<HTMLInputElement>(null);
@@ -160,12 +160,26 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     return () => window.removeEventListener('mindos:inject-ask-files', handler);
   }, []);
 
+  // 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'
-      ? (visible && !prevVisibleRef.current)  // panel: edge detection
+    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
@@ -173,14 +187,15 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
 
     if (justOpened) {
       setTimeout(() => inputRef.current?.focus(), 50);
+      // Home variant: also load sessions so user can switch
       void session.initSessions();
       setInput(initialMessage || '');
       chat.firstMessageFired.current = false;
       setAttachedFiles(currentFile ? [currentFile] : []);
-    upload.clearAttachments();
-    imageUpload.clearImages();
-    mention.resetMention();
-    slash.resetSlash();
+      upload.clearAttachments();
+      imageUpload.clearImages();
+      mention.resetMention();
+      slash.resetSlash();
     setSelectedSkill(null);
     setSelectedAcpAgent(initialAcpAgent ?? null);
     setShowHistory(false);
@@ -191,6 +206,10 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
       // 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
@@ -209,9 +228,9 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, session.messages, session.activeSessionId, chat.isLoading]);
 
-  // Esc to close modal or exit focus mode
+  // Esc to close modal or exit focus mode (skip for home variant)
   useEffect(() => {
-    if (!visible) return;
+    if (!visible || variant === 'home') return;
     const isModal = variant === 'modal';
     const isFocused = variant === 'panel' && maximized;
     if (!isModal && !isFocused) return;
@@ -376,6 +395,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     setSelectedSkill(null);
     setSelectedAcpAgent(null);
     setShowHistory(false);
+    chat.firstMessageFired.current = false;
     setTimeout(() => inputRef.current?.focus(), 0);
   }, [currentFile]);
 
@@ -383,6 +403,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     // 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);
     }
@@ -392,6 +413,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
 
   const handleDrop = useCallback(async (e: React.DragEvent) => {
     e.preventDefault();
+    e.stopPropagation();
     setIsDragOver(false);
     const filePath = e.dataTransfer.getData('text/mindos-path');
     if (filePath) {
@@ -402,7 +424,21 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
       }
       return;
     }
-    await imageUploadRef.current.handleDrop(e);
+    // Try image upload first, then fall back to general file upload
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const hasImages = Array.from(files).some(f => f.type.startsWith('image/'));
+      if (hasImages) {
+        await imageUploadRef.current.handleDrop(e);
+      }
+      // Upload non-image files as attachments
+      const nonImageFiles = Array.from(files).filter(f => !f.type.startsWith('image/'));
+      if (nonImageFiles.length > 0) {
+        const dt = new DataTransfer();
+        nonImageFiles.forEach(f => dt.items.add(f));
+        await uploadRef.current.pickFiles(dt.files);
+      }
+    }
   }, []);
 
   const handlePaste = useCallback((e: React.ClipboardEvent) => {
@@ -438,34 +474,31 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     thinking: t.ask.thinking,
     generating: t.ask.generating,
     reconnecting: reconnectAttempt > 0 ? t.ask.reconnecting(reconnectAttempt, reconnectMaxRef.current) : undefined,
+    copyMessage: t.ask.copyMessage,
   }), [t, reconnectAttempt]);
 
   return (
     <>
+      {/* Header — home variant shows session switcher + new/history/fullscreen buttons */}
       <AskHeader
-        isPanel={isPanel}
+        isPanel={isPanel || isHome}
         showHistory={showHistory}
         onToggleHistory={toggleHistory}
         onReset={handleResetSession}
         isLoading={isLoading}
         maximized={maximized}
-        onMaximize={onMaximize}
-        askMode={askMode}
-        onModeSwitch={onModeSwitch}
-        onClose={onClose}
+        onMaximize={isHome ? onMaximize : onMaximize}
+        askMode={isHome ? undefined : askMode}
+        onModeSwitch={isHome ? undefined : onModeSwitch}
+        onClose={isHome ? undefined : onClose}
+        sessions={session.sessions}
+        activeSessionId={session.activeSessionId}
+        onLoadSession={handleLoadSession}
+        onDeleteSession={session.deleteSession}
+        onRenameSession={session.renameSession}
+        onTogglePinSession={session.togglePinSession}
       />
 
-      {/* Session tabs — panel variant only */}
-      {isPanel && session.sessions.length > 0 && (
-        <SessionTabBar
-          sessions={session.sessions}
-          activeSessionId={session.activeSessionId}
-          onLoad={handleLoadSession}
-          onDelete={session.deleteSession}
-          onNew={handleResetSession}
-        />
-      )}
-
       {showHistory && (
         <SessionHistory
           sessions={session.sessions}
@@ -473,6 +506,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
           onLoad={handleLoadSession}
           onDelete={session.deleteSession}
           onRename={session.renameSession}
+          onTogglePin={session.togglePinSession}
           onClearAll={session.clearAllSessions}
           labels={{
             title: t.ask.sessionHistory ?? 'Session History',
@@ -485,16 +519,31 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
       )}
 
       {/* Messages */}
-      <MessageList
-        messages={session.messages}
-        isLoading={isLoading}
-        loadingPhase={loadingPhase}
-        emptyPrompt={t.ask.emptyPrompt}
-        emptyHint={t.ask.emptyHint}
-        suggestions={t.ask.suggestions}
-        onSuggestionClick={setInput}
-        labels={messageLabels}
-      />
+      {/* 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}
+        />
+      )}
 
       {/* 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 && (
@@ -519,11 +568,11 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
         </div>
       )}
 
-      {/* Composer card — unified input area with rounded container */}
-      <div className="shrink-0 px-3 pb-2 pt-1">
+      {/* Composer card — unified input area */}
+      <div className="shrink-0 px-3 pb-2.5 pt-1">
         <div
           className={cn(
-            'rounded-xl border border-border/60 bg-card shadow-sm transition-shadow',
+            'rounded-xl bg-muted/40 transition-all focus-within:bg-muted/60',
             isDragOver && 'ring-2 ring-[var(--amber)] bg-[var(--amber-dim)]',
           )}
           onDragOver={handleDragOver}
@@ -538,12 +587,12 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
                   <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" onRemove={() => upload.removeAttachment(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={`Image ${idx + 1}`}
+                    path={img.fileName || `Image ${idx + 1}`}
                     variant="image"
                     imageData={img.data}
                     imageMime={img.mimeType}
@@ -568,23 +617,23 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
           <form
             ref={formRef}
             onSubmit={handleSubmit}
-            className="flex items-end gap-1 px-1.5 py-1.5"
+            className="flex items-end gap-1.5 px-3 py-2"
           >
             {/* + attach button with mini menu */}
             <div className="relative shrink-0">
               <button
                 type="button"
                 onClick={() => setShowAttachMenu(v => !v)}
-                className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
+                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>
               {showAttachMenu && (
-                <div className="absolute bottom-full left-0 mb-1 py-1 rounded-lg border border-border bg-card shadow-lg z-50 min-w-[140px]">
+                <div className="absolute bottom-full left-0 mb-1.5 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">
                   <button
                     type="button"
-                    className="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted transition-colors text-left"
+                    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={() => { setShowAttachMenu(false); upload.uploadInputRef.current?.click(); }}
                   >
                     <FileText size={12} className="shrink-0 text-muted-foreground" />
@@ -592,7 +641,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
                   </button>
                   <button
                     type="button"
-                    className="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted transition-colors text-left"
+                    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={() => { setShowAttachMenu(false); imageInputRef.current?.click(); }}
                   >
                     <ImageIcon size={12} className="shrink-0 text-muted-foreground" />
@@ -637,23 +686,24 @@ 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-1.5 text-sm leading-snug text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-0"
+              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"
             />
 
             {isLoading ? (
-              <button type="button" onClick={handleStop} className="p-1.5 rounded-lg transition-colors shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted/60" title={loadingPhase === 'reconnecting' ? t.ask.cancelReconnect : t.ask.stopTitle}>
+              <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" disabled={!input.trim() && imageUpload.images.length === 0} className="p-1.5 rounded-lg disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)]">
+              <button type="submit" disabled={!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 — inside card bottom */}
-          <div className="flex items-center gap-1.5 px-3 pb-2 pt-0.5 border-t border-border/30">
-            <ModeCapsule mode={chatMode} onChange={setChatMode} disabled={isLoading} />
+          {/* 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">
+              <ModeCapsule mode={chatMode} onChange={setChatMode} disabled={isLoading} />
             {mounted && acpDetection.installedAgents.length > 0 && (
               <AgentSelectorCapsule
                 selectedAgent={selectedAcpAgent}
@@ -669,6 +719,11 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
                 disabled={isLoading}
               />
             )}
+            </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>
           </div>
         </div>
       </div>

package/app/components/ask/AskHeader.tsx

@@ -1,6 +1,9 @@
-import { memo } from 'react';
-import { Sparkles, SquarePen, History, X, Maximize2, Minimize2, PanelRight, AppWindow } from 'lucide-react';
+import { memo, useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Sparkles, SquarePen, History, X, Maximize2, Minimize2, PanelRight, AppWindow, ChevronDown, Check, Trash2, Pencil, Pin, PinOff } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
+import type { ChatSession } from '@/lib/types';
+import { sessionTitle } from '@/hooks/useAskSession';
 
 interface AskHeaderProps {
   isPanel: boolean;
@@ -13,49 +16,246 @@ interface AskHeaderProps {
   askMode?: 'panel' | 'popup';
   onModeSwitch?: () => void;
   onClose?: () => void;
+  hideTitle?: boolean;
+  /** Session switching — inline in header when >=2 sessions */
+  sessions?: ChatSession[];
+  activeSessionId?: string | null;
+  onLoadSession?: (id: string) => void;
+  onDeleteSession?: (id: string) => void;
+  onRenameSession?: (id: string, name: string) => void;
+  onTogglePinSession?: (id: string) => void;
 }
 
 export default memo(function AskHeader({
   isPanel, showHistory, onToggleHistory, onReset, isLoading,
-  maximized, onMaximize, askMode, onModeSwitch, onClose,
+  maximized, onMaximize, askMode, onModeSwitch, onClose, hideTitle,
+  sessions, activeSessionId, onLoadSession, onDeleteSession, onRenameSession, onTogglePinSession,
 }: AskHeaderProps) {
   const { t } = useLocale();
-  const iconSize = isPanel ? 13 : 14;
+  const iconSize = 14;
+  const hasMultipleSessions = sessions && sessions.length >= 1;
+  const activeSession = sessions?.find(s => s.id === activeSessionId);
+  const activeTitle = activeSession ? sessionTitle(activeSession) : null;
+
+  // Session switcher dropdown state
+  const [switcherOpen, setSwitcherOpen] = useState(false);
+  const switcherRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Inline rename state
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!switcherOpen) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        switcherRef.current && !switcherRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setSwitcherOpen(false);
+        setRenamingId(null);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [switcherOpen]);
+
+  useEffect(() => {
+    if (!switcherOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (renamingId) { setRenamingId(null); } else { setSwitcherOpen(false); }
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [switcherOpen, renamingId]);
+
+  // Focus rename input when it appears
+  useEffect(() => {
+    if (renamingId) setTimeout(() => renameInputRef.current?.focus(), 0);
+  }, [renamingId]);
+
+  const handleSelectSession = useCallback((id: string) => {
+    onLoadSession?.(id);
+    setSwitcherOpen(false);
+  }, [onLoadSession]);
+
+  const handleStartRename = useCallback((id: string, currentTitle: string) => {
+    setRenamingId(id);
+    setRenameValue(currentTitle === '(empty session)' ? '' : currentTitle);
+  }, []);
+
+  const handleCommitRename = useCallback(() => {
+    if (renamingId && onRenameSession && renameValue.trim()) {
+      onRenameSession(renamingId, renameValue.trim());
+    }
+    setRenamingId(null);
+  }, [renamingId, renameValue, onRenameSession]);
+
+  // Position dropdown below trigger
+  const [dropPos, setDropPos] = useState<{ top: number; left: number; width: number } | null>(null);
+  useEffect(() => {
+    if (!switcherOpen || !switcherRef.current) return;
+    const rect = switcherRef.current.getBoundingClientRect();
+    setDropPos({ top: rect.bottom + 4, left: rect.left, width: Math.max(rect.width, 240) });
+  }, [switcherOpen]);
+
+  const switcherDropdown = switcherOpen && dropPos && sessions ? createPortal(
+    <div
+      ref={dropdownRef}
+      className="fixed z-50 rounded-xl border border-border/50 bg-card shadow-lg py-1 animate-in fade-in-0 slide-in-from-top-1 duration-100"
+      style={{ top: dropPos.top, left: dropPos.left, minWidth: dropPos.width, maxWidth: 320 }}
+      role="listbox"
+    >
+      {sessions.map((s) => {
+        const isActive = s.id === activeSessionId;
+        const title = sessionTitle(s);
+        const displayTitle = title === '(empty session)' ? (t.hints?.newChat ?? 'New chat') : title;
+
+        if (renamingId === s.id) {
+          return (
+            <div key={s.id} className="flex items-center gap-1 px-2 py-1.5">
+              <input
+                ref={renameInputRef}
+                type="text"
+                value={renameValue}
+                onChange={(e) => setRenameValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleCommitRename();
+                  if (e.key === 'Escape') setRenamingId(null);
+                }}
+                onBlur={handleCommitRename}
+                className="flex-1 min-w-0 px-2 py-1 text-xs rounded-md border border-border bg-background text-foreground outline-none focus:border-[var(--amber)]/50"
+                placeholder="Session name..."
+              />
+            </div>
+          );
+        }
+
+        return (
+          <div key={s.id} className="group/item flex items-center">
+            <button
+              type="button"
+              role="option"
+              aria-selected={isActive}
+              onClick={() => handleSelectSession(s.id)}
+              className={`flex-1 min-w-0 flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors ${
+                isActive ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              }`}
+            >
+              {s.pinned && <Pin size={10} className="shrink-0 text-[var(--amber)]/60 -rotate-45" />}
+              {isActive && !s.pinned && <Check size={11} className="shrink-0 text-[var(--amber)]" />}
+              <span className="truncate">{displayTitle}</span>
+            </button>
+            <div className="shrink-0 flex items-center gap-0.5 mr-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              {onTogglePinSession && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); onTogglePinSession(s.id); }}
+                  className={`p-1.5 rounded-md transition-colors ${s.pinned ? 'text-[var(--amber)] hover:text-muted-foreground hover:bg-muted/60' : 'text-muted-foreground/40 hover:text-[var(--amber)] hover:bg-[var(--amber)]/5'}`}
+                  aria-label={s.pinned ? 'Unpin' : 'Pin'}
+                >
+                  {s.pinned ? <PinOff size={10} /> : <Pin size={10} />}
+                </button>
+              )}
+              {onRenameSession && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); handleStartRename(s.id, title); }}
+                  className="p-1.5 rounded-md text-muted-foreground/40 hover:text-foreground hover:bg-muted/60"
+                  aria-label={`Rename: ${displayTitle}`}
+                >
+                  <Pencil size={10} />
+                </button>
+              )}
+              {sessions.length > 1 && onDeleteSession && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); onDeleteSession(s.id); }}
+                  className="p-1.5 rounded-md text-muted-foreground/40 hover:text-error hover:bg-error/5"
+                  aria-label={`Delete: ${displayTitle}`}
+                >
+                  <Trash2 size={10} />
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>,
+    document.body,
+  ) : null;
 
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+    <div className="flex items-center justify-between px-4 py-2.5 shrink-0">
       {!isPanel && (
         <div className="absolute top-2 left-1/2 -translate-x-1/2 w-8 h-1 rounded-full bg-muted-foreground/20 md:hidden" />
       )}
-      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-        <Sparkles size={isPanel ? 14 : 15} className="text-[var(--amber)]" />
-        <span className={isPanel ? 'text-xs uppercase tracking-wider text-muted-foreground' : ''}>
-          {isPanel ? 'MindOS Agent' : t.ask.title}
-        </span>
-      </div>
+      {!hideTitle && (
+        <div className="flex items-center gap-2 min-w-0">
+          <div className="w-6 h-6 rounded-lg bg-[var(--amber)]/10 flex items-center justify-center shrink-0">
+            <Sparkles size={13} className="text-[var(--amber)]" />
+          </div>
+          {hasMultipleSessions && activeTitle ? (
+            <button
+              ref={switcherRef}
+              type="button"
+              onClick={() => {
+                if (sessions && sessions.length >= 2) {
+                  setSwitcherOpen(v => !v);
+                } else {
+                  onToggleHistory();
+                }
+              }}
+              className="flex items-center gap-1 min-w-0 text-sm font-medium text-[var(--amber)] hover:text-[var(--amber)]/80 transition-colors"
+              aria-expanded={switcherOpen}
+              aria-haspopup="listbox"
+            >
+              <span className="truncate max-w-[180px]">{activeTitle === '(empty session)' ? (t.hints?.newChat ?? 'New chat') : activeTitle}</span>
+              <ChevronDown size={12} className={`shrink-0 text-muted-foreground transition-transform duration-150 ${switcherOpen ? 'rotate-180' : ''}`} />
+            </button>
+          ) : activeTitle ? (
+            <span className="text-sm font-medium text-muted-foreground/60 truncate max-w-[180px]">
+              {activeTitle === '(empty session)' ? (t.hints?.newChat ?? 'New chat') : activeTitle}
+            </span>
+          ) : (
+            /* Placeholder while sessions load — avoids flash of "MindOS Agent" text */
+            <span className="text-sm font-medium text-muted-foreground/40">
+              {t.hints?.newChat ?? 'New chat'}
+            </span>
+          )}
+        </div>
+      )}
+      {hideTitle && <div />}
       <div className="flex items-center gap-1 shrink-0">
-        <button type="button" onClick={(e) => { e.stopPropagation(); onToggleHistory(); }} aria-pressed={showHistory} className={`p-2 rounded transition-colors ${showHistory ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}`} title={t.hints.sessionHistory}>
+        <button type="button" onClick={(e) => { e.stopPropagation(); onToggleHistory(); }} aria-pressed={showHistory} className={`p-2 rounded-lg transition-colors ${showHistory ? 'bg-[var(--amber)]/10 text-[var(--amber)]' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}`} title={t.hints.sessionHistory}>
           <History size={iconSize} />
         </button>
-        <button type="button" onClick={(e) => { e.stopPropagation(); onReset(); }} disabled={isLoading} className="p-2 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-40" title={t.hints.newSession}>
+        <button type="button" onClick={(e) => { e.stopPropagation(); onReset(); }} disabled={isLoading} className="p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-40" title={t.hints.newSession}>
           <SquarePen size={iconSize} />
         </button>
-        {isPanel && onMaximize && (
-          <button type="button" onClick={(e) => { e.stopPropagation(); onMaximize(); }} className="p-2 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={maximized ? t.hints.restorePanel : t.hints.maximizePanel}>
+        {onMaximize && (
+          <button type="button" onClick={(e) => { e.stopPropagation(); onMaximize(); }} className="p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={maximized ? t.hints.restorePanel : t.hints.maximizePanel}>
             {maximized ? <Minimize2 size={iconSize} /> : <Maximize2 size={iconSize} />}
           </button>
         )}
         {onModeSwitch && (
-          <button type="button" onClick={(e) => { e.stopPropagation(); onModeSwitch(); }} className="p-2 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={askMode === 'popup' ? t.hints.dockToSide : t.hints.openAsPopup}>
+          <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} />}
           </button>
         )}
         {onClose && (
-          <button type="button" onClick={(e) => { e.stopPropagation(); onClose(); }} className="p-2 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.hints.closePanel} aria-label="Close">
-            <X size={isPanel ? iconSize : 15} />
+          <button type="button" onClick={(e) => { e.stopPropagation(); onClose(); }} className="p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.hints.closePanel} aria-label="Close">
+            <X size={iconSize} />
           </button>
         )}
       </div>
+      {typeof document !== 'undefined' && switcherDropdown}
     </div>
   );
 });