@geminilight/mindos 0.6.58 → 0.6.59

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 } from 'lucide-react';
+import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap, Copy, Check, ArrowDown, FolderInput, Search, PenLine, Lightbulb } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { Message, ImagePart } from '@/lib/types';
@@ -12,7 +12,7 @@ import ThinkingBlock from './ThinkingBlock';
 
 const SKILL_PREFIX_RE = /^Use the skill ([^:]+):\s*/;
 
-function CopyMessageButton({ text }: { text: string }) {
+function CopyMessageButton({ text, label }: { text: string; label?: string }) {
   const [copied, setCopied] = useState(false);
   const handleCopy = useCallback(() => {
     copyToClipboard(text).then(ok => {
@@ -27,8 +27,8 @@ function CopyMessageButton({ text }: { text: string }) {
     <button
       type="button"
       onClick={handleCopy}
-      className="absolute -bottom-1 right-1 p-1 rounded-md bg-card border border-border/60 shadow-sm text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
-      title="Copy"
+      className="absolute -bottom-1 right-1 p-1 rounded-md bg-card border border-border/60 shadow-sm text-muted-foreground hover:text-foreground opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity"
+      title={label ?? 'Copy'}
     >
       {copied ? <Check size={11} className="text-success" /> : <Copy size={11} />}
     </button>
@@ -62,7 +62,7 @@ function UserMessageContent({ content, skillName, images }: { content: string; s
       )}
       {/* Skill capsule + text */}
       {resolved && (
-        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber)]/15 text-[var(--amber)] mr-1 align-middle">
+        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-white/20 text-white/90 mr-1 align-middle">
           <Zap size={10} className="shrink-0" />
           {resolved}
         </span>
@@ -82,16 +82,16 @@ function AssistantMessage({ content, isStreaming }: { content: string; isStreami
       prose-h1:text-base prose-h2:text-[15px] prose-h3:text-sm
       prose-ul:my-1.5 prose-li:my-0.5
       prose-ol:my-1.5
-      prose-code:text-[0.8em] prose-code:bg-background/60 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
-      prose-pre:bg-background/60 prose-pre:text-foreground prose-pre:text-xs
-      prose-blockquote:border-l-[var(--amber)] prose-blockquote:text-muted-foreground
+      prose-code:text-[0.8em] prose-code:bg-muted/80 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-code:font-mono
+      prose-pre:bg-muted/60 prose-pre:text-foreground prose-pre:text-xs prose-pre:rounded-lg
+      prose-blockquote:border-l-[var(--amber)] prose-blockquote:text-muted-foreground prose-blockquote:not-italic
       prose-a:text-[var(--amber)] prose-a:no-underline hover:prose-a:underline
       prose-strong:text-foreground prose-strong:font-semibold
-      prose-table:text-xs prose-th:py-1 prose-td:py-1
+      prose-table:text-xs prose-th:py-1.5 prose-td:py-1
     ">
       <ReactMarkdown remarkPlugins={[remarkGfm]}>{cleaned}</ReactMarkdown>
       {isStreaming && (
-        <span className="inline-block w-1.5 h-3.5 bg-[var(--amber)] ml-0.5 align-middle animate-pulse rounded-sm" />
+        <span className="inline-block w-1.5 h-3.5 bg-[var(--amber)] ml-0.5 align-middle animate-pulse rounded-full" />
       )}
     </div>
   );
@@ -129,7 +129,7 @@ function AssistantMessageWithParts({ message, isStreaming }: { message: Message;
         return null;
       })}
       {showTrailingSpinner && (
-        <div className="flex items-center gap-2 py-1 mt-1">
+        <div className="flex items-center gap-2 py-1.5 mt-1.5">
           <Loader2 size={12} className="animate-spin text-[var(--amber)]" />
           <span className="text-xs text-muted-foreground animate-pulse">Executing tool…</span>
         </div>
@@ -145,9 +145,9 @@ function StepCounter({ parts }: { parts: Message['parts'] }) {
   const lastToolCall = toolCalls[toolCalls.length - 1];
   const toolLabel = lastToolCall.type === 'tool-call' ? lastToolCall.toolName : '';
   return (
-    <div className="flex items-center gap-1.5 mt-1.5 text-xs text-muted-foreground/70">
+    <div className="flex items-center gap-1.5 mt-2 pt-1.5 border-t border-border/15 text-xs text-muted-foreground/60">
       <Wrench size={10} />
-      <span>Step {toolCalls.length}{toolLabel ? ` — ${toolLabel}` : ''}</span>
+      <span className="font-medium">Step {toolCalls.length}{toolLabel ? ` — ${toolLabel}` : ''}</span>
     </div>
   );
 }
@@ -158,13 +158,14 @@ interface MessageListProps {
   loadingPhase: 'connecting' | 'thinking' | 'streaming' | 'reconnecting';
   emptyPrompt: string;
   emptyHint?: string;
-  suggestions: readonly string[];
+  suggestions: readonly { label: string; prompt: string }[];
   onSuggestionClick: (text: string) => void;
   labels: {
     connecting: string;
     thinking: string;
     generating: string;
     reconnecting?: string;
+    copyMessage?: string;
   };
 }
 
@@ -183,7 +184,9 @@ export default memo(function MessageList({
   const [showScrollDown, setShowScrollDown] = useState(false);
 
   const scrollToBottom = useCallback(() => {
-    endRef.current?.scrollIntoView({ behavior: 'smooth' });
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
   }, []);
 
   useEffect(() => {
@@ -202,56 +205,65 @@ export default memo(function MessageList({
   }, []);
 
   return (
-    <div ref={scrollContainerRef} className="relative flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 space-y-4 min-h-0">
+    <div ref={scrollContainerRef} role="log" aria-live="polite" className="relative flex-1 overflow-y-auto overflow-x-hidden px-4 py-5 space-y-5 min-h-0">
       {messages.length === 0 && (
-        <div className="flex flex-col items-center justify-center flex-1 min-h-[200px] px-4">
-          {/* Brand anchor */}
-          <div className="w-10 h-10 rounded-xl bg-[var(--amber)]/10 flex items-center justify-center mb-4">
-            <Sparkles size={20} className="text-[var(--amber)]" />
+        <div className="flex flex-col items-center justify-center flex-1 min-h-[260px] px-6 pt-10 pb-4">
+          {/* Brand anchor — refined presence */}
+          <div className="relative w-12 h-12 rounded-2xl bg-[var(--amber)]/10 flex items-center justify-center mb-6">
+            <div className="absolute inset-0 rounded-2xl bg-[var(--amber)]/5 scale-[1.4]" />
+            <Sparkles size={22} className="text-[var(--amber)] relative z-10" />
           </div>
-          <p className="text-center text-sm font-medium text-foreground/80 mb-1">{emptyPrompt}</p>
+          <p className="text-center text-[15px] font-semibold text-foreground tracking-tight mb-2">{emptyPrompt}</p>
           {emptyHint && (
-            <p className="text-center text-[11px] text-muted-foreground/50 mb-5">{emptyHint}</p>
+            <p className="text-center text-xs text-muted-foreground/80 mb-10 tracking-wide">{emptyHint}</p>
           )}
-          {/* Suggestion chips — centered 2-column grid */}
-          <div className="grid grid-cols-2 gap-2 max-w-sm w-full">
-            {suggestions.map((s, i) => (
-              <button
-                key={i}
-                type="button"
-                onClick={() => onSuggestionClick(s)}
-                className="text-left text-xs px-3 py-2.5 rounded-lg border border-border/60 bg-card text-muted-foreground hover:text-foreground hover:border-[var(--amber)]/30 hover:bg-[var(--amber)]/5 transition-colors leading-snug"
-              >
-                {s}
-              </button>
-            ))}
+          {/* Suggestion chips — refined single column */}
+          <div className="flex flex-col gap-2.5 max-w-[280px] w-full">
+            {suggestions.map((s, i) => {
+              const icons = [FolderInput, Search, PenLine, Lightbulb];
+              const SugIcon = icons[i % icons.length];
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => onSuggestionClick(s.prompt)}
+                  className="group/sug flex items-center gap-3 text-left text-[13px] px-3.5 py-3 rounded-xl border border-border/40 bg-transparent text-muted-foreground hover:text-foreground hover:border-[var(--amber)]/30 hover:bg-[var(--amber)]/5 transition-all leading-snug"
+                  aria-label={s.prompt}
+                >
+                  <span className="shrink-0 w-8 h-8 rounded-lg bg-muted/60 flex items-center justify-center group-hover/sug:bg-[var(--amber)]/10 transition-colors">
+                    <SugIcon size={15} className="text-muted-foreground/70 group-hover/sug:text-[var(--amber)] transition-colors" />
+                  </span>
+                  <span className="flex-1">{s.label}</span>
+                </button>
+              );
+            })}
           </div>
         </div>
       )}
       {messages.map((m, i) => (
-        <div key={i} className={`flex gap-3 ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+        <div key={i} className={`flex gap-3 animate-[fadeSlideUp_0.22s_ease_both] ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
           {m.role === 'assistant' && (
             <div
-              className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-0.5 bg-[var(--amber-dim)]"
+              className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5 bg-[var(--amber)]/8"
             >
-              <Sparkles size={12} className="text-[var(--amber)]" />
+              <Sparkles size={13} className="text-[var(--amber)]" />
             </div>
           )}
           {m.role === 'user' ? (
             <div
-              className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap bg-[var(--amber)] text-[var(--amber-foreground)]"
+              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} />
             </div>
           ) : m.content.startsWith('__error__') ? (
-            <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-error/20 bg-error/8 text-sm">
-              <div className="flex items-start gap-2 text-error">
-                <AlertCircle size={14} className="shrink-0 mt-0.5" />
-                <span className="leading-relaxed">{m.content.slice(9)}</span>
+            <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">
+              <div className="flex items-start gap-2.5 text-error">
+                <AlertCircle size={15} className="shrink-0 mt-0.5" />
+                <span className="leading-relaxed font-medium">{m.content.slice(9)}</span>
               </div>
             </div>
           ) : (
-            <div className="group relative max-w-[85%] px-3 py-2 rounded-xl rounded-bl-sm bg-muted text-foreground text-sm">
+            <div className="group relative max-w-[85%] px-3.5 py-2.5 rounded-2xl rounded-bl-lg bg-card border border-border/30 shadow-sm text-foreground text-sm">
               {(m.parts && m.parts.length > 0) || stripThinkingTags(m.content) ? (
                 <>
                   <AssistantMessageWithParts message={m} isStreaming={isLoading && i === messages.length - 1} />
@@ -259,17 +271,18 @@ export default memo(function MessageList({
                     <StepCounter parts={m.parts} />
                   )}
                   {!(isLoading && i === messages.length - 1) && stripThinkingTags(m.content) && (
-                    <CopyMessageButton text={stripThinkingTags(m.content)} />
+                    <CopyMessageButton text={stripThinkingTags(m.content)} label={labels.copyMessage} />
                   )}
                 </>
               ) : isLoading && i === messages.length - 1 ? (
-                <div className="flex items-center gap-2 py-1">
+                <div className="flex items-center gap-2.5 py-1">
                   {loadingPhase === 'reconnecting' ? (
                     <WifiOff size={14} className="text-[var(--amber)] animate-pulse" />
                   ) : (
                     <Loader2 size={14} className="animate-spin text-[var(--amber)]" />
                   )}
-                  <span className="text-xs text-muted-foreground animate-pulse">
+                  <span className="text-xs text-muted-foreground">
+                    <span className="inline-flex items-center gap-1">
                     {loadingPhase === 'reconnecting'
                       ? (labels.reconnecting ?? 'Reconnecting...')
                       : loadingPhase === 'connecting'
@@ -277,6 +290,12 @@ export default memo(function MessageList({
                         : loadingPhase === 'thinking'
                           ? labels.thinking
                           : labels.generating}
+                    <span className="inline-flex gap-0.5">
+                      <span className="w-1 h-1 rounded-full bg-[var(--amber)] animate-bounce [animation-delay:0ms]"></span>
+                      <span className="w-1 h-1 rounded-full bg-[var(--amber)] animate-bounce [animation-delay:150ms]"></span>
+                      <span className="w-1 h-1 rounded-full bg-[var(--amber)] animate-bounce [animation-delay:300ms]"></span>
+                    </span>
+                    </span>
                   </span>
                 </div>
               ) : null}
@@ -291,7 +310,7 @@ export default memo(function MessageList({
         <button
           type="button"
           onClick={scrollToBottom}
-          className="sticky bottom-2 left-1/2 -translate-x-1/2 z-10 p-1.5 rounded-full border border-border/60 bg-card shadow-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          className="sticky bottom-2 left-1/2 -translate-x-1/2 z-10 p-2 rounded-full border border-border/60 bg-card shadow-md text-muted-foreground hover:text-foreground hover:bg-muted transition-all hover:shadow-lg"
           title="Scroll to bottom"
         >
           <ArrowDown size={14} />

package/_standalone/components/ask/SessionHistory.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Trash2, Pencil } from 'lucide-react';
+import { Trash2, Pencil, Pin, PinOff } from 'lucide-react';
 import type { ChatSession } from '@/lib/types';
 import { sessionTitle } from '@/hooks/useAskSession';
 
@@ -11,11 +11,25 @@ interface SessionHistoryProps {
   onLoad: (id: string) => void;
   onDelete: (id: string) => void;
   onRename: (id: string, title: string) => void;
+  onTogglePin: (id: string) => void;
   onClearAll: () => void;
   labels: { title: string; clearAll: string; confirmClear: string; noSessions: string; rename: string };
 }
 
-export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete, onRename, onClearAll, labels }: SessionHistoryProps) {
+function formatRelativeTime(date: Date): string {
+  const now = Date.now();
+  const diff = now - date.getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete, onRename, onTogglePin, onClearAll, labels }: SessionHistoryProps) {
   const [confirmClearAll, setConfirmClearAll] = useState(false);
   const clearTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -60,78 +74,90 @@ export default function SessionHistory({ sessions, activeSessionId, onLoad, onDe
   }, []);
 
   return (
-    <div className="border-b border-border px-4 py-2.5 max-h-[190px] overflow-y-auto">
-      <div className="flex items-center justify-between mb-2">
-        <span className="text-xs text-muted-foreground">{labels.title}</span>
+    <div className="border-b border-border/40 px-4 py-3 max-h-[220px] overflow-y-auto">
+      <div className="flex items-center justify-between mb-2.5">
+        <span className="text-xs font-medium text-muted-foreground">{labels.title}</span>
         {sessions.length > 1 && (
           <button
             type="button"
             onClick={handleClearAll}
-            className={`text-2xs px-1.5 py-0.5 rounded transition-colors ${
+            className={`text-2xs px-2 py-0.5 rounded-md transition-colors ${
               confirmClearAll
                 ? 'bg-error/10 text-error font-medium'
-                : 'text-muted-foreground hover:text-error hover:bg-muted'
+                : 'text-muted-foreground/60 hover:text-error hover:bg-muted'
             }`}
           >
             {confirmClearAll ? labels.confirmClear : labels.clearAll}
           </button>
         )}
       </div>
-      <div className="flex flex-col gap-1.5">
+      <div className="flex flex-col gap-1">
         {sessions.length === 0 && (
-          <div className="text-xs text-muted-foreground/70">{labels.noSessions}</div>
+          <div className="text-xs text-muted-foreground/50 py-2 text-center">{labels.noSessions}</div>
         )}
-        {sessions.map((s) => (
-          <div key={s.id} className="group flex items-center gap-1">
-            <button
-              type="button"
-              onClick={() => onLoad(s.id)}
-              onDoubleClick={() => startRename(s)}
-              className={`flex-1 text-left px-2 py-1.5 rounded text-xs transition-colors min-w-0 ${
-                activeSessionId === s.id
-                  ? 'bg-accent text-foreground'
-                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-              }`}
-            >
-              {editingId === s.id ? (
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={editValue}
-                  onChange={(e) => setEditValue(e.target.value)}
-                  onBlur={commitRename}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') { e.preventDefault(); commitRename(); }
-                    if (e.key === 'Escape') { e.preventDefault(); cancelRename(); }
-                  }}
-                  onClick={(e) => e.stopPropagation()}
-                  className="w-full bg-transparent border-b border-[var(--amber)] outline-none text-xs text-foreground"
-                />
-              ) : (
-                <div className="truncate">{sessionTitle(s)}</div>
-              )}
-              {editingId !== s.id && (
-                <div className="text-2xs opacity-60">{new Date(s.updatedAt).toLocaleString()}</div>
-              )}
-            </button>
-            <button
-              type="button"
-              onClick={() => startRename(s)}
-              className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
-              title={labels.rename}
-            >
-              <Pencil size={11} />
-            </button>
-            <button
-              type="button"
-              onClick={() => onDelete(s.id)}
-              className="p-1 rounded text-muted-foreground hover:text-error hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
-              title="Delete session"
-            >
-              <Trash2 size={12} />
-            </button>
-          </div>
-        ))}
+        {sessions.map((s) => {
+          const isActive = activeSessionId === s.id;
+          return (
+            <div key={s.id} className="group flex items-center gap-0.5">
+              {s.pinned && <Pin size={10} className="shrink-0 text-[var(--amber)]/50 -rotate-45 ml-1" />}
+              <button
+                type="button"
+                onClick={() => onLoad(s.id)}
+                onDoubleClick={() => startRename(s)}
+                className={`flex-1 text-left px-2.5 py-2 rounded-lg text-xs transition-colors min-w-0 ${
+                  isActive
+                    ? 'bg-[var(--amber)]/8 text-foreground border border-[var(--amber)]/15'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground border border-transparent'
+                }`}
+              >
+                {editingId === s.id ? (
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onBlur={commitRename}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') { e.preventDefault(); commitRename(); }
+                      if (e.key === 'Escape') { e.preventDefault(); cancelRename(); }
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                    className="w-full bg-transparent border-b border-[var(--amber)] outline-none text-xs text-foreground"
+                  />
+                ) : (
+                  <div className="truncate font-medium">{sessionTitle(s)}</div>
+                )}
+                {editingId !== s.id && (
+                  <div className="text-2xs text-muted-foreground/50 mt-0.5">{formatRelativeTime(new Date(s.updatedAt))}</div>
+                )}
+              </button>
+              <button
+                type="button"
+                onClick={() => onTogglePin(s.id)}
+                className={`p-1.5 rounded-lg transition-opacity opacity-0 group-hover:opacity-100 ${s.pinned ? 'text-[var(--amber)] hover:text-muted-foreground' : 'text-muted-foreground hover:text-[var(--amber)]'}`}
+                title={s.pinned ? 'Unpin' : 'Pin'}
+              >
+                {s.pinned ? <PinOff size={11} /> : <Pin size={11} />}
+              </button>
+              <button
+                type="button"
+                onClick={() => startRename(s)}
+                className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
+                title={labels.rename}
+              >
+                <Pencil size={11} />
+              </button>
+              <button
+                type="button"
+                onClick={() => onDelete(s.id)}
+                className="p-1.5 rounded-lg text-muted-foreground hover:text-error hover:bg-error/5 opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Delete session"
+              >
+                <Trash2 size={11} />
+              </button>
+            </div>
+          );
+        })}
       </div>
     </div>
   );

package/_standalone/components/ask/SessionTabBar.tsx

@@ -19,48 +19,56 @@ export default function SessionTabBar({
 }: SessionTabBarProps) {
   const { t } = useLocale();
   const visibleSessions = sessions.slice(0, maxTabs);
+  const hasMore = sessions.length > maxTabs;
 
   if (visibleSessions.length === 0) return null;
 
   return (
-    <div className="flex items-center border-b border-border shrink-0 bg-background/50">
+    <div className="flex items-center border-b border-border/60 shrink-0 bg-background/50" role="tablist">
       <div className="flex flex-1 min-w-0">
         {visibleSessions.map((s) => {
           const isActive = s.id === activeSessionId;
           const title = sessionTitle(s);
           return (
-            <button
-              key={s.id}
-              type="button"
-              onClick={() => onLoad(s.id)}
-              className={`group relative flex items-center gap-1 min-w-0 max-w-[160px] px-3 py-2 text-xs transition-colors
-                ${isActive
-                  ? 'text-foreground border-b-2 border-[var(--amber)] bg-card'
-                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/50 border-b-2 border-transparent'
-                }`}
-              title={title}
-            >
-              <span className="truncate">{title === '(empty session)' ? t.hints.newChat : title}</span>
+            <div key={s.id} className="group relative flex items-center min-w-0 max-w-[160px]">
+              <button
+                type="button"
+                role="tab"
+                aria-selected={isActive}
+                onClick={() => onLoad(s.id)}
+                className={`flex-1 min-w-0 px-3 py-2.5 text-xs transition-colors truncate
+                  ${isActive
+                    ? 'text-foreground border-b-2 border-[var(--amber)] bg-card font-medium'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-muted/50 border-b-2 border-transparent'
+                  }`}
+                title={title}
+              >
+                {title === '(empty session)' ? t.hints.newChat : title}
+              </button>
               {visibleSessions.length > 1 && (
-                <span
-                  role="button"
-                  tabIndex={0}
+                <button
+                  type="button"
                   onClick={(e) => { e.stopPropagation(); onDelete(s.id); }}
-                  onKeyDown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); onDelete(s.id); } }}
-                  className="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-muted hover:text-error transition-opacity"
+                  className="absolute right-0.5 top-1/2 -translate-y-1/2 shrink-0 p-0.5 rounded opacity-100 md:opacity-0 md:group-hover:opacity-100 hover:bg-muted hover:text-error transition-opacity"
                   title={t.hints.closeSession}
+                  aria-label={`${t.hints.closeSession}: ${title}`}
                 >
                   <X size={10} />
-                </span>
+                </button>
               )}
-            </button>
+            </div>
           );
         })}
+        {hasMore && (
+          <span className="flex items-center px-2 text-2xs text-muted-foreground/60">
+            +{sessions.length - maxTabs}
+          </span>
+        )}
       </div>
       <button
         type="button"
         onClick={onNew}
-        className="shrink-0 p-2 text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+        className="shrink-0 p-2 text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors rounded-lg"
         title={t.hints.newChat}
       >
         <Plus size={13} />

package/_standalone/components/ask/ThinkingBlock.tsx

@@ -16,11 +16,12 @@ export default function ThinkingBlock({ text, isStreaming }: ThinkingBlockProps)
   if (!text && !isStreaming) return null;
 
   return (
-    <div className="my-1 rounded-md border border-border/40 bg-muted/20 text-xs">
+    <div className="my-1.5 rounded-lg border border-border/30 bg-muted/15 text-xs">
       <button
         type="button"
         onClick={() => setExpanded(v => !v)}
-        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/30 transition-colors rounded-md"
+        aria-expanded={expanded}
+        className="w-full flex items-center gap-1.5 px-2.5 py-2 text-left hover:bg-muted/30 transition-colors rounded-lg"
       >
         {expanded ? (
           <ChevronDown size={12} className="shrink-0 text-muted-foreground" />
@@ -35,17 +36,17 @@ export default function ThinkingBlock({ text, isStreaming }: ThinkingBlockProps)
           )}
         </span>
         {!expanded && text && (
-          <span className="text-muted-foreground/60 truncate flex-1 ml-1">
+          <span className="text-muted-foreground/50 truncate flex-1 ml-1">
             {text.slice(0, 80)}{text.length > 80 ? '...' : ''}
           </span>
         )}
       </button>
       {expanded && (
-        <div className="px-2 pb-2 pt-0.5 border-t border-border/30">
+        <div className="px-2.5 pb-2.5 pt-1 border-t border-border/20">
           <div className="text-muted-foreground whitespace-pre-wrap leading-relaxed">
             {text}
             {isStreaming && (
-              <span className="inline-block w-1 h-3 bg-muted-foreground/40 ml-0.5 align-middle animate-pulse rounded-sm" />
+              <span className="inline-block w-1 h-3 bg-muted-foreground/40 ml-0.5 align-middle animate-pulse rounded-full" />
             )}
           </div>
         </div>

package/_standalone/components/ask/ToolCallBlock.tsx

@@ -101,15 +101,16 @@ export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
     : formatInput(part.input);
 
   return (
-    <div className={`my-1 rounded-md border text-xs font-mono ${
+    <div className={`my-1.5 rounded-lg border text-xs font-mono ${
       isDestructive
         ? 'border-[var(--amber)]/30 bg-background/60'
-        : 'border-border/50 bg-background/60'
+        : 'border-border/40 bg-background/50'
     }`}>
       <button
         type="button"
         onClick={() => setManualToggle(v => v === null ? !expanded : !v)}
-        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/30 transition-colors rounded-md"
+        aria-expanded={expanded}
+        className="w-full flex items-center gap-1.5 px-2.5 py-2 text-left hover:bg-muted/30 transition-colors rounded-lg"
       >
         {expanded ? <ChevronDown size={12} className="shrink-0 text-muted-foreground" /> : <ChevronRight size={12} className="shrink-0 text-muted-foreground" />}
         {isDestructive && <AlertTriangle size={11} className="shrink-0 text-[var(--amber)]" />}
@@ -161,19 +162,19 @@ export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
             </div>
           ) : (
             /* Fallback: show input (always), output when available */
-            <div className="px-2 pb-2 pt-1 space-y-1">
+            <div className="px-2.5 pb-2.5 pt-1.5 space-y-1.5">
               {part.state === 'running' && (
-                <div className="text-muted-foreground/60 text-2xs flex items-center gap-1">
+                <div className="text-muted-foreground/60 text-2xs flex items-center gap-1.5">
                   <Loader2 size={10} className="animate-spin" /> Running...
                 </div>
               )}
-              <div className="text-muted-foreground">
-                <span className="font-semibold">Input: </span>
+              <div className="text-muted-foreground leading-relaxed">
+                <span className="font-semibold text-foreground/70">Input: </span>
                 <span className="break-all whitespace-pre-wrap">{JSON.stringify(part.input, null, 2)}</span>
               </div>
               {part.output !== undefined && part.output !== '' && (
-                <div className="text-muted-foreground">
-                  <span className="font-semibold">Output: </span>
+                <div className="text-muted-foreground leading-relaxed">
+                  <span className="font-semibold text-foreground/70">Output: </span>
                   <span className="break-all whitespace-pre-wrap">{part.output.length > 500 ? part.output.slice(0, 500) + '…' : part.output}</span>
                 </div>
               )}

package/_standalone/components/settings/SettingsContent.tsx

@@ -66,7 +66,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
 
     if (justOpened) {
       apiFetch<SettingsData>('/api/settings').then(d => { setData(d); dataLoaded.current = true; }).catch(() => setStatus('load-error'));
-      setFont(localStorage.getItem('prose-font') === 'geist' ? 'inter' : localStorage.getItem('prose-font') ?? 'lora');
+      setFont(localStorage.getItem('prose-font') === 'geist' ? 'inter' : localStorage.getItem('prose-font') ?? 'ibm-plex-sans');
       setFontSize(localStorage.getItem('prose-font-size') ?? '15px');
       setContentWidth(localStorage.getItem('content-width') ?? '780px');
       const stored = localStorage.getItem('theme');