@geminilight/mindos 0.6.69 → 0.6.70

package/app/components/agents/AgentsContentChannelDetail.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import Link from 'next/link';
 import {
   ArrowLeft, CheckCircle2, XCircle, Loader2, Send,
-  Eye, EyeOff, Settings2, Trash2, AlertTriangle, AlertCircle, RefreshCw,
+  Eye, EyeOff, Settings2, Trash2, AlertTriangle, AlertCircle, RefreshCw, ExternalLink,
 } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
 import { getPlatform, type PlatformDef, type PlatformStatus } from '@/lib/im/platforms';
@@ -40,13 +40,15 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
     setError(false);
     try {
       const res = await fetch('/api/im/status');
-      if (res.ok) {
-        const data = await res.json();
-        const platforms: PlatformStatus[] = data.platforms ?? [];
-        setStatus(platforms.find(s => s.platform === platformId) ?? null);
-      } else {
+      if (!res.ok) {
         setError(true);
+        setLoading(false);
+        return;
       }
+
+      const data = await res.json();
+      const platforms: PlatformStatus[] = data.platforms ?? [];
+      setStatus(platforms.find(s => s.platform === platformId) ?? null);
     } catch {
       setError(true);
     }
@@ -67,6 +69,7 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
   }
 
   const isConnected = status?.connected ?? false;
+  const hasExistingCredentials = isConnected;
 
   const handleSave = async () => {
     setSaving(true);
@@ -166,19 +169,19 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
       </Link>
 
       {/* Platform header */}
-      <div className="flex items-center gap-3 mb-6">
-        <span className="text-2xl">{platform.icon}</span>
-        <div>
-          <h2 className="text-lg font-semibold text-foreground">{platform.name}</h2>
-          <p className="text-sm text-muted-foreground">
-            {isConnected ? (
-              <span className="inline-flex items-center gap-1.5 text-success">
-                <CheckCircle2 size={14} /> {im.statusConnected}
-              </span>
-            ) : (
-              im.notConfigured
-            )}
-          </p>
+      <div className="flex items-start gap-3 mb-6">
+        <span className="text-3xl shrink-0">{platform.icon}</span>
+        <div className="flex-1">
+          <h2 className="text-xl font-semibold text-foreground">{platform.name}</h2>
+          {isConnected ? (
+            <span className="inline-flex items-center gap-1.5 mt-1 text-xs font-medium px-2 py-0.5 rounded-md bg-success/10 text-success">
+              <CheckCircle2 size={14} /> {im.statusConnected}
+            </span>
+          ) : (
+            <span className="inline-flex items-center gap-1.5 mt-1 text-xs font-medium px-2 py-0.5 rounded-md bg-muted text-muted-foreground">
+              {im.notConfigured}
+            </span>
+          )}
         </div>
       </div>
 
@@ -186,60 +189,133 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
         /* ─── Connected View ─── */
         <div className="flex flex-col gap-6">
           {/* Status info */}
-          <div className="rounded-lg border border-border bg-card p-4">
+          <div className="rounded-lg border border-border bg-muted/30 p-4 shadow-sm">
             <h3 className="text-sm font-medium text-foreground mb-3">{im.tabStatus}</h3>
             {status?.botName && (
-              <div className="flex items-center gap-2 mb-2">
-                <span className="text-2xs text-muted-foreground uppercase tracking-wider">Bot</span>
+              <div className="flex items-center gap-2 mb-3">
+                <span className="text-xs font-medium text-muted-foreground">Bot</span>
                 <span className="text-sm text-foreground font-mono">{status.botName}</span>
               </div>
             )}
             {status?.capabilities && status.capabilities.length > 0 && (
               <div className="flex flex-wrap gap-1.5">
                 {status.capabilities.map(cap => (
-                  <span key={cap} className="text-2xs px-2 py-0.5 rounded-md bg-muted text-muted-foreground">{cap}</span>
+                  <span key={cap} className="text-xs px-2 py-1 rounded-md bg-muted text-muted-foreground">{cap}</span>
                 ))}
               </div>
             )}
           </div>
 
+          {/* Credential update */}
+          <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+            <h3 className="text-sm font-medium text-foreground mb-2">{im.editCredentials}</h3>
+            <p className="text-sm text-muted-foreground leading-6 mb-4 max-w-prose">{platform.editHint || im.editCredentialsHint}</p>
+            {hasExistingCredentials && (
+              <p className="text-xs text-muted-foreground/80 leading-5 mb-4 max-w-prose">{im.savedValuesHint}</p>
+            )}
+            <div className="flex flex-col gap-4">
+              {platform.fields.map(field => (
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <label className="text-xs font-medium text-muted-foreground">
+                    {field.label}
+                    <span className="text-muted-foreground/50 font-normal"> ({im.required})</span>
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showSecrets ? 'text' : 'password'}
+                      placeholder={field.placeholder}
+                      value={formValues[field.key] ?? ''}
+                      onChange={e => setFormValues(prev => ({ ...prev, [field.key]: e.target.value }))}
+                      className="h-11 w-full px-3 pr-10 text-sm font-mono bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                      autoComplete="off"
+                      aria-required="true"
+                      aria-describedby={field.hint ? `connected-hint-${field.key}` : undefined}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowSecrets(!showSecrets)}
+                      className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1.5 text-muted-foreground hover:text-foreground rounded transition-colors"
+                      aria-label={showSecrets ? im.hideSecret : im.showSecret}
+                      title={showSecrets ? im.hideSecret : im.showSecret}
+                    >
+                      {showSecrets ? <EyeOff size={16} /> : <Eye size={16} />}
+                    </button>
+                  </div>
+                  {field.hint && (
+                    <span id={`connected-hint-${field.key}`} className="text-xs text-muted-foreground">{field.hint}</span>
+                  )}
+                </div>
+              ))}
+              <div className="flex items-center gap-3 pt-1">
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={saving || !isFormComplete}
+                  className="h-11 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm hover:opacity-90 hover:shadow disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                  aria-label={saving ? im.saving : im.saveConfig}
+                >
+                  {saving ? <Loader2 size={14} className="animate-spin" /> : <Settings2 size={14} />}
+                  {saving ? im.saving : im.saveConfig}
+                </button>
+              </div>
+              {saveResult && (
+                <div 
+                  role="alert" 
+                  aria-live="polite"
+                  className={`flex items-start gap-1.5 text-sm ${saveResult.ok ? 'text-success' : 'text-error'}`}
+                >
+                  {saveResult.ok ? <CheckCircle2 size={16} className="shrink-0 mt-0.5" /> : <XCircle size={16} className="shrink-0 mt-0.5" />}
+                  <span className="break-all">{saveResult.msg}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
           {/* Test send */}
-          <div className="rounded-lg border border-border bg-card p-4">
+          <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
             <h3 className="text-sm font-medium text-foreground mb-3">{im.testSend}</h3>
             <div className="flex flex-col gap-3">
               <div>
-                <label className="text-2xs text-muted-foreground uppercase tracking-wider mb-1 block">{im.recipientPlaceholder}</label>
+                <label className="text-xs font-medium text-muted-foreground block mb-1.5">{im.recipientPlaceholder}</label>
                 <input
                   type="text"
                   placeholder={im.recipientPlaceholder}
                   value={testRecipient}
                   onChange={e => setTestRecipient(e.target.value)}
-                  className="h-8 w-full px-3 text-sm bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  className="h-11 w-full px-3 text-sm bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  aria-label={im.recipientPlaceholder}
                 />
+                <p className="text-xs text-muted-foreground mt-1.5 leading-5">{im.recipientHint}</p>
               </div>
               <div>
-                <label className="text-2xs text-muted-foreground uppercase tracking-wider mb-1 block">{im.messagePlaceholder}</label>
+                <label className="text-xs font-medium text-muted-foreground block mb-1.5">{im.messagePlaceholder}</label>
                 <input
                   type="text"
                   placeholder={im.messagePlaceholder}
                   value={testMsg}
                   onChange={e => setTestMsg(e.target.value)}
-                  className="h-8 w-full px-3 text-sm bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  className="h-11 w-full px-3 text-sm bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  aria-label={im.messagePlaceholder}
                 />
               </div>
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3 pt-1">
                 <button
                   type="button"
                   onClick={handleTest}
                   disabled={testStatus === 'sending' || !testRecipient.trim()}
-                  className="h-8 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+                  className="h-11 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm hover:opacity-90 hover:shadow disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                  aria-label={im.sendTest}
                 >
                   {testStatus === 'sending' ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
                   {im.sendTest}
                 </button>
               </div>
               {testResult && (
-                <div className={`flex items-start gap-1.5 text-sm ${testStatus === 'success' ? 'text-success' : 'text-error'}`}>
+                <div 
+                  role="alert" 
+                  aria-live="polite"
+                  className={`flex items-start gap-1.5 text-sm ${testStatus === 'success' ? 'text-success' : 'text-error'}`}
+                >
                   {testStatus === 'success' ? <CheckCircle2 size={16} className="shrink-0 mt-0.5" /> : <XCircle size={16} className="shrink-0 mt-0.5" />}
                   <span className="break-all">{testResult}</span>
                 </div>
@@ -248,18 +324,19 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
           </div>
 
           {/* Disconnect */}
-          <div className="rounded-lg border border-error/20 bg-card p-4">
+          <div className="rounded-lg border border-error/20 bg-card p-4 shadow-sm">
             <h3 className="text-sm font-medium text-foreground mb-2">{im.disconnect}</h3>
-            <p className="text-2xs text-muted-foreground mb-3">{im.disconnectHint}</p>
+            <p className="text-xs text-muted-foreground mb-3">{im.disconnectHint}</p>
             <button
               type="button"
               onClick={handleDisconnect}
               disabled={deleting}
-              className={`h-8 px-4 text-sm rounded-md inline-flex items-center gap-1.5 border transition-colors ${
+              className={`h-11 px-4 text-sm rounded-md inline-flex items-center gap-1.5 border transition-colors ${
                 confirmDelete
                   ? 'text-error border-error/40 bg-error/5 hover:bg-error/10'
                   : 'text-muted-foreground border-border hover:text-error hover:border-error/30'
               }`}
+              aria-label={im.disconnect}
             >
               {deleting ? <Loader2 size={14} className="animate-spin" />
                 : confirmDelete ? <><AlertTriangle size={14} /> {im.confirmDisconnect}</>
@@ -270,60 +347,97 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
         </div>
       ) : (
         /* ─── Not Configured View ─── */
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-6">
           {/* Guide */}
           {platform.guide && (
-            <div className="rounded-lg border border-border bg-card p-4">
-              <h3 className="text-sm font-medium text-foreground mb-2">{im.setupGuide}</h3>
-              <div className="text-sm text-muted-foreground leading-relaxed whitespace-pre-line">
-                {platform.guide}
+            <div className="rounded-lg border border-border border-l-4 border-l-[var(--amber)] bg-card p-4 shadow-sm">
+              <div className="flex items-start justify-between gap-3 mb-3">
+                <h3 className="text-sm font-medium text-foreground">{im.setupGuide}</h3>
+                {platform.guideUrl && (
+                  <Link
+                    href={platform.guideUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs bg-[var(--amber-dim)] text-[var(--amber)] hover:bg-[var(--amber-dim)]/80 shrink-0 transition-colors"
+                  >
+                    {im.guideLink}
+                    <ExternalLink size={12} />
+                  </Link>
+                )}
+              </div>
+              <div className="text-sm text-muted-foreground leading-7 space-y-1.5 max-w-prose">
+                {platform.guide.split('\n').map((line, idx) => (
+                  <div key={idx}>{line}</div>
+                ))}
               </div>
             </div>
           )}
 
           {/* Credential form */}
-          <div className="rounded-lg border border-border bg-card p-4">
-            <h3 className="text-sm font-medium text-foreground mb-3">{im.tabConfigure}</h3>
-            <div className="flex flex-col gap-3">
+          <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+            <h3 className="text-sm font-medium text-foreground mb-4">{im.tabConfigure}</h3>
+            <div className="flex flex-col gap-4">
               {platform.fields.map(field => (
-                <div key={field.key} className="flex flex-col gap-1">
-                  <label className="text-2xs text-muted-foreground uppercase tracking-wider">{field.label}</label>
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <label className="text-xs font-medium text-muted-foreground">
+                    {field.label}
+                    <span className="text-muted-foreground/50 font-normal"> ({im.required})</span>
+                  </label>
                   <div className="relative">
                     <input
                       type={showSecrets ? 'text' : 'password'}
                       placeholder={field.placeholder}
                       value={formValues[field.key] ?? ''}
                       onChange={e => setFormValues(prev => ({ ...prev, [field.key]: e.target.value }))}
-                      className="h-8 w-full px-3 pr-8 text-sm font-mono bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                      className="h-11 w-full px-3 pr-10 text-sm font-mono bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       autoComplete="off"
+                      aria-required="true"
+                      aria-describedby={field.hint ? `hint-${field.key}` : undefined}
                     />
                     <button
                       type="button"
                       onClick={() => setShowSecrets(!showSecrets)}
-                      className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 text-muted-foreground hover:text-foreground rounded-sm"
+                      className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1.5 text-muted-foreground hover:text-foreground rounded transition-colors"
                       aria-label={showSecrets ? im.hideSecret : im.showSecret}
+                      title={showSecrets ? im.hideSecret : im.showSecret}
                     >
-                      {showSecrets ? <EyeOff size={14} /> : <Eye size={14} />}
+                      {showSecrets ? <EyeOff size={16} /> : <Eye size={16} />}
                     </button>
                   </div>
-                  {field.hint && <span className="text-2xs text-muted-foreground/60">{field.hint}</span>}
+                  {field.hint && (
+                    <span id={`hint-${field.key}`} className="text-xs text-muted-foreground">{field.hint}</span>
+                  )}
                 </div>
               ))}
-              <div className="flex items-center gap-3 pt-1">
+              <div className="flex items-center gap-3 pt-2">
                 <button
                   type="button"
                   onClick={handleSave}
                   disabled={saving || !isFormComplete}
-                  className="h-8 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+                  className="h-11 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm hover:opacity-90 hover:shadow disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                  aria-label={saving ? im.saving : im.saveConfig}
                 >
                   {saving ? <Loader2 size={14} className="animate-spin" /> : <Settings2 size={14} />}
-                  {im.saveConfig}
+                  {saving ? im.saving : im.saveConfig}
                 </button>
               </div>
               {saveResult && (
-                <div className={`flex items-start gap-1.5 text-sm ${saveResult.ok ? 'text-success' : 'text-error'}`}>
-                  {saveResult.ok ? <CheckCircle2 size={16} className="shrink-0 mt-0.5" /> : <XCircle size={16} className="shrink-0 mt-0.5" />}
-                  <span className="break-all">{saveResult.msg}</span>
+                <div 
+                  role="alert" 
+                  aria-live="polite"
+                  className={`flex items-start gap-1.5 text-sm ${saveResult.ok ? 'text-success' : 'text-error'}`}
+                >
+                  {saveResult.ok ? (
+                    <>
+                      <CheckCircle2 size={16} className="shrink-0 mt-0.5" />
+                      <span className="break-all">{saveResult.msg}</span>
+                    </>
+                  ) : (
+                    <>
+                      <XCircle size={16} className="shrink-0 mt-0.5" />
+                      <span className="break-all">{saveResult.msg}</span>
+                    </>
+                  )}
                 </div>
               )}
             </div>

package/app/components/agents/AgentsContentChannels.tsx

@@ -80,22 +80,22 @@ function ChannelsOverview() {
   const getStatus = (id: string) => statuses.find(s => s.platform === id);
 
   return (
-    <div className="max-w-3xl">
+    <div className="max-w-4xl">
       {/* Stats row */}
-      <div className="grid grid-cols-3 gap-4 mb-8">
-        <div className="rounded-lg border border-border bg-card p-4">
-          <div className="text-2xs text-muted-foreground uppercase tracking-wider mb-1">{im.statsConnected}</div>
-          <div className="text-2xl font-semibold text-foreground tabular-nums">
-            {connected}<span className="text-sm text-muted-foreground font-normal">/{total}</span>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+        <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+          <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">{im.statsConnected}</div>
+          <div className="text-3xl font-semibold text-foreground tabular-nums">
+            {connected}<span className="text-sm text-muted-foreground font-normal ml-1">/ {total}</span>
           </div>
         </div>
-        <div className="rounded-lg border border-border bg-card p-4">
-          <div className="text-2xs text-muted-foreground uppercase tracking-wider mb-1">{im.statsSupported}</div>
-          <div className="text-2xl font-semibold text-foreground tabular-nums">{total}</div>
+        <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+          <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">{im.statsSupported}</div>
+          <div className="text-3xl font-semibold text-foreground tabular-nums">{total}</div>
         </div>
-        <div className="rounded-lg border border-border bg-card p-4">
-          <div className="text-2xs text-muted-foreground uppercase tracking-wider mb-1">{im.statsStatus}</div>
-          <div className="text-sm text-foreground mt-1">
+        <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+          <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">{im.statsStatus}</div>
+          <div className="text-sm text-foreground">
             {connected > 0 ? (
               <span className="inline-flex items-center gap-1.5 text-success">
                 <CheckCircle2 size={14} /> {im.statsReady}
@@ -108,8 +108,8 @@ function ChannelsOverview() {
       </div>
 
       {/* Platform grid — clickable */}
-      <h2 className="text-sm font-medium text-foreground mb-3">{im.platformsTitle}</h2>
-      <div className="grid grid-cols-2 gap-3">
+      <h2 className="text-sm font-medium text-foreground mb-4">{im.platformsTitle}</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
         {PLATFORMS.map(({ id, name, icon }) => {
           const status = getStatus(id);
           const isConnected = status?.connected ?? false;
@@ -118,28 +118,28 @@ function ChannelsOverview() {
             <Link
               key={id}
               href={`/agents?tab=channels&platform=${id}`}
-              className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 hover:border-[var(--amber)]/40 hover:bg-card/80 transition-colors"
+              className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 shadow-sm hover:border-[var(--amber)]/50 hover:bg-card/80 hover:shadow transition-all"
             >
-              <span className="text-lg">{icon}</span>
+              <span className="text-xl shrink-0">{icon}</span>
               <div className="flex-1 min-w-0">
                 <div className="text-sm font-medium text-foreground">{name}</div>
                 {isConnected && status?.botName ? (
-                  <div className="text-2xs text-muted-foreground font-mono truncate">{status.botName}</div>
+                  <div className="text-xs text-muted-foreground font-mono truncate">{status.botName}</div>
                 ) : (
-                  <div className="text-2xs text-muted-foreground">{isConnected ? im.statusConnected : im.notConfigured}</div>
+                  <div className="text-xs text-muted-foreground">{isConnected ? im.statusConnected : im.notConfigured}</div>
                 )}
                 {isConnected && status?.capabilities && status.capabilities.length > 0 && (
-                  <div className="flex flex-wrap gap-1 mt-1">
+                  <div className="flex flex-wrap gap-1 mt-1.5">
                     {status.capabilities.slice(0, 3).map(cap => (
-                      <span key={cap} className="text-2xs px-1 py-0.5 rounded bg-muted text-muted-foreground/70">{cap}</span>
+                      <span key={cap} className="text-xs px-2 py-0.5 rounded-md bg-muted text-muted-foreground">{cap}</span>
                     ))}
                   </div>
                 )}
               </div>
               {isConnected ? (
-                <CheckCircle2 size={16} className="text-success shrink-0" />
+                <CheckCircle2 size={18} className="text-success shrink-0" />
               ) : (
-                <Circle size={16} className="text-border shrink-0" />
+                <Circle size={18} className="text-border shrink-0" />
               )}
             </Link>
           );

package/app/components/ask/AskContent.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useLayoutEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import { Send, StopCircle, X, Plus, FileText, ImageIcon } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
 import type { AskMode, Message } from '@/lib/types';
@@ -15,6 +16,7 @@ import MessageList from '@/components/ask/MessageList';
 import MentionPopover from '@/components/ask/MentionPopover';
 import SlashCommandPopover from '@/components/ask/SlashCommandPopover';
 import SessionHistory from '@/components/ask/SessionHistory';
+import SessionHistoryPanel from '@/components/ask/SessionHistoryPanel';
 import AskHeader from '@/components/ask/AskHeader';
 import FileChip from '@/components/ask/FileChip';
 import AgentSelectorCapsule from '@/components/ask/AgentSelectorCapsule';
@@ -97,6 +99,8 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
   const [showHistory, setShowHistory] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
   const [showAttachMenu, setShowAttachMenu] = useState(false);
+  const attachButtonRef = useRef<HTMLButtonElement>(null);
+  const [attachMenuPos, setAttachMenuPos] = useState<{ top: number; left: number } | null>(null);
 
   const [selectedSkill, setSelectedSkill] = useState<SlashItem | null>(null);
   const selectedSkillRef = useRef(selectedSkill);
@@ -182,6 +186,31 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
     return () => window.removeEventListener('mindos:inject-ask-files', handler);
   }, []);
 
+  // Position the attach menu popover above the button (using Portal to avoid clipping)
+  useEffect(() => {
+    if (!showAttachMenu || !attachButtonRef.current) {
+      setAttachMenuPos(null);
+      return;
+    }
+    const rect = attachButtonRef.current.getBoundingClientRect();
+    setAttachMenuPos({
+      top: rect.top - 8,  // 8px above button
+      left: rect.left,
+    });
+  }, [showAttachMenu]);
+
+  // Close attach menu when clicking outside
+  useEffect(() => {
+    if (!showAttachMenu) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (attachButtonRef.current && !attachButtonRef.current.contains(e.target as Node)) {
+        setShowAttachMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showAttachMenu]);
+
   // Home suggestion chip click — inject text into input
   useEffect(() => {
     if (!isHome) return;
@@ -534,7 +563,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
       />
 
       {showHistory && (
-        <SessionHistory
+        <SessionHistoryPanel
           sessions={session.sessions}
           activeSessionId={session.activeSessionId}
           onLoad={handleLoadSession}
@@ -542,16 +571,13 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
           onRename={session.renameSession}
           onTogglePin={session.togglePinSession}
           onClearAll={session.clearAllSessions}
-          labels={{
-            title: t.ask.sessionHistory ?? 'Session History',
-            clearAll: t.ask.clearAll ?? 'Clear all',
-            confirmClear: t.ask.confirmClear ?? 'Confirm clear?',
-            noSessions: t.ask.noSessions ?? 'No saved sessions.',
-            rename: t.ask.renameSession ?? 'Rename',
-          }}
+          onClose={() => setShowHistory(false)}
+          onNewChat={handleResetSession}
         />
       )}
 
+      {!showHistory && (
+        <>
       {/* Messages — home variant hides empty state unless maximized (suggestions rendered externally in normal mode) */}
       <div className="flex-1 min-h-0 flex flex-col">
         {!isHome && (
@@ -664,6 +690,7 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
             {/* + attach button with mini menu */}
             <div className="relative shrink-0">
               <button
+                ref={attachButtonRef}
                 type="button"
                 onClick={() => setShowAttachMenu(v => !v)}
                 className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
@@ -671,28 +698,39 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
               >
                 <Plus size={inputIconSize} />
               </button>
-              {showAttachMenu && (
-                <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.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" />
-                    {t.ask.attachFileLabel}
-                  </button>
-                  <button
-                    type="button"
-                    className="flex w-full items-center gap-2.5 px-3 py-2 text-xs hover:bg-muted transition-colors text-left rounded-lg"
-                    onClick={() => { setShowAttachMenu(false); imageInputRef.current?.click(); }}
-                  >
-                    <ImageIcon size={12} className="shrink-0 text-muted-foreground" />
-                    {t.ask.attachImageLabel}
-                  </button>
-                </div>
-              )}
             </div>
 
+            {/* Attach menu rendered as Portal to avoid clipping by overflow-hidden parent */}
+            {mounted && showAttachMenu && attachMenuPos && createPortal(
+              <div
+                className="fixed py-1 rounded-xl border border-border/60 bg-card shadow-lg z-50 min-w-[150px] animate-in fade-in-0 slide-in-from-bottom-2 duration-150"
+                style={{
+                  top: `${attachMenuPos.top}px`,
+                  left: `${attachMenuPos.left}px`,
+                  transform: 'translateY(-100%)',  // Position above the button
+                }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <button
+                  type="button"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs hover:bg-muted transition-colors text-left rounded-lg"
+                  onClick={() => { setShowAttachMenu(false); upload.uploadInputRef.current?.click(); }}
+                >
+                  <FileText size={12} className="shrink-0 text-muted-foreground" />
+                  {t.ask.attachFileLabel}
+                </button>
+                <button
+                  type="button"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs hover:bg-muted transition-colors text-left rounded-lg"
+                  onClick={() => { setShowAttachMenu(false); imageInputRef.current?.click(); }}
+                >
+                  <ImageIcon size={12} className="shrink-0 text-muted-foreground" />
+                  {t.ask.attachImageLabel}
+                </button>
+              </div>,
+              document.body
+            )}
+
             <input
               ref={upload.uploadInputRef}
               type="file"
@@ -773,6 +811,8 @@ export default function AskContent({ visible, currentFile, initialMessage, initi
           </div>
         </div>
       </div>
+        </>
+      )}
     </div>
   );
 }

package/app/components/ask/AskHeader.tsx

@@ -205,9 +205,13 @@ export default memo(function AskHeader({
       {!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)]" />
+            {showHistory ? <History size={13} className="text-[var(--amber)]" /> : <Sparkles size={13} className="text-[var(--amber)]" />}
           </div>
-          {hasMultipleSessions && activeTitle ? (
+          {showHistory ? (
+            <span className="text-sm font-medium text-[var(--amber)]">
+              {t.ask?.sessionHistory ?? 'Session History'}
+            </span>
+          ) : hasMultipleSessions && activeTitle ? (
             <button
               ref={switcherRef}
               type="button"