fix(skills): scope success banner and add menu focus management

Gate the skills install success banner behind a local just-installed flag so it no longer re-appears stale after reopening and cancelling the add dialog, and disable the cancel/close controls while an install is in flight. Add keyboard focus management to ActionMenu: focus the first item on open and restore focus to the trigger on Escape or item selection. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(settings): stabilize add skill dialog size
2026-07-01 10:02:57 +08:00 · 2026-06-30 22:46:29 +00:00 · 2026-06-30 22:35:04 +00:00 · 2026-06-30 22:32:49 +00:00 · 2026-06-30 22:12:21 +00:00
71 changed files with 1118 additions and 1029 deletions
--- a/index.html
+++ b/index.html
@@ -6,15 +6,7 @@
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content" />
    <title>CloudCLI UI</title>
-
-    <!-- Fonts: Encode Sans (UI) + Merriweather (chat) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap"
-      rel="stylesheet"
-    />
-
+    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials"  />
    
--- a/src/components/auth/view/AuthErrorAlert.tsx
+++ b/src/components/auth/view/AuthErrorAlert.tsx
@@ -1,5 +1,3 @@
-import { AlertCircle } from 'lucide-react';
-
 type AuthErrorAlertProps = {
  errorMessage: string;
 };
@@ -10,9 +8,8 @@ export default function AuthErrorAlert({ errorMessage }: AuthErrorAlertProps) {
  }

  return (
-    <div className="flex items-start gap-2.5 rounded-xl border border-destructive/30 bg-destructive/10 p-3 text-destructive">
-      <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
-      <p className="text-sm leading-relaxed">{errorMessage}</p>
+    <div className="rounded-md border border-red-300 bg-red-100 p-3 dark:border-red-800 dark:bg-red-900/20">
+      <p className="text-sm text-red-700 dark:text-red-400">{errorMessage}</p>
    </div>
  );
 }
--- a/src/components/auth/view/AuthInputField.tsx
+++ b/src/components/auth/view/AuthInputField.tsx
@@ -1,7 +1,3 @@
-import { useState } from 'react';
-import type { ComponentType } from 'react';
-import { Eye, EyeOff } from 'lucide-react';
-
 type AuthInputFieldProps = {
  id: string;
  label: string;
@@ -12,14 +8,13 @@ type AuthInputFieldProps = {
  type?: 'text' | 'password' | 'email';
  name?: string;
  autoComplete?: string;
-  icon?: ComponentType<{ className?: string }>;
 };

 /**
 * A labelled input field for authentication forms.
 * Renders a `<label>` / `<input>` pair and forwards browser autofill hints
 * (`name`, `autoComplete`) so that password managers can identify and fill
- * the field correctly. Password fields gain a show/hide visibility toggle.
+ * the field correctly.
 */
 export default function AuthInputField({
  id,
@@ -31,49 +26,24 @@ export default function AuthInputField({
  type = 'text',
  name,
  autoComplete,
-  icon: Icon,
 }: AuthInputFieldProps) {
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-
-  const isPasswordField = type === 'password';
-  const resolvedType = isPasswordField && isPasswordVisible ? 'text' : type;
-
  return (
    <div>
-      <label htmlFor={id} className="mb-1.5 block text-sm font-medium text-foreground">
+      <label htmlFor={id} className="mb-1 block text-sm font-medium text-foreground">
        {label}
      </label>
-      <div className="group relative">
-        {Icon && (
-          <Icon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground transition-colors group-focus-within:text-primary" />
-        )}
-        <input
-          id={id}
-          type={resolvedType}
-          name={name ?? id}
-          autoComplete={autoComplete}
-          value={value}
-          onChange={(event) => onChange(event.target.value)}
-          className={`w-full rounded-xl border border-border bg-background/60 py-2.5 text-foreground shadow-sm transition-colors placeholder:text-muted-foreground/60 hover:border-foreground/20 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-60 ${
-            Icon ? 'pl-10' : 'pl-3.5'
-          } ${isPasswordField ? 'pr-11' : 'pr-3.5'}`}
-          placeholder={placeholder}
-          required
-          disabled={isDisabled}
-        />
-        {isPasswordField && (
-          <button
-            type="button"
-            onClick={() => setIsPasswordVisible((previous) => !previous)}
-            disabled={isDisabled}
-            tabIndex={-1}
-            aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
-            className="absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-60"
-          >
-            {isPasswordVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-          </button>
-        )}
-      </div>
+      <input
+        id={id}
+        type={type}
+        name={name ?? id}
+        autoComplete={autoComplete}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder={placeholder}
+        required
+        disabled={isDisabled}
+      />
    </div>
  );
 }
--- a/src/components/auth/view/AuthLoadingScreen.tsx
+++ b/src/components/auth/view/AuthLoadingScreen.tsx
@@ -1,30 +1,30 @@
-const loadingDotAnimationDelays = ['0s', '0.15s', '0.3s'];
+import { MessageSquare } from 'lucide-react';
+
+const loadingDotAnimationDelays = ['0s', '0.1s', '0.2s'];

 export default function AuthLoadingScreen() {
  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background p-4">
-      <div aria-hidden className="pointer-events-none absolute inset-0">
-        <div className="absolute -top-40 left-1/2 h-[36rem] w-[36rem] -translate-x-1/2 rounded-full bg-primary/10 blur-3xl" />
-      </div>
-
-      <div className="relative text-center">
-        <div className="mb-5 flex justify-center">
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-primary/80 shadow-lg shadow-primary/25 ring-1 ring-inset ring-white/20">
-            <img src="/logo.svg" alt="CloudCLI" className="h-9 w-9" />
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="text-center">
+        <div className="mb-4 flex justify-center">
+          <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary shadow-sm">
+            <MessageSquare className="h-8 w-8 text-primary-foreground" />
          </div>
        </div>

-        <h1 className="mb-4 font-serif text-2xl font-bold tracking-tight text-foreground">CloudCLI</h1>
+        <h1 className="mb-2 text-2xl font-bold text-foreground">CloudCLI</h1>

-        <div className="flex items-center justify-center gap-2">
+        <div className="flex items-center justify-center space-x-2">
          {loadingDotAnimationDelays.map((delay) => (
            <div
              key={delay}
-              className="h-2 w-2 animate-bounce rounded-full bg-primary"
+              className="h-2 w-2 animate-bounce rounded-full bg-blue-500"
              style={{ animationDelay: delay }}
            />
          ))}
        </div>
+
+        <p className="mt-2 text-muted-foreground">Loading...</p>
      </div>
    </div>
  );
--- a/src/components/auth/view/AuthScreenLayout.tsx
+++ b/src/components/auth/view/AuthScreenLayout.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { MessageSquare } from 'lucide-react';
 import { IS_PLATFORM } from '../../../constants/config';

 type AuthScreenLayoutProps = {
@@ -17,38 +18,29 @@ export default function AuthScreenLayout({
  logo,
 }: AuthScreenLayoutProps) {
  return (
-    <div className="relative h-screen overflow-y-auto bg-background">
-      {/* Ambient, on-brand backdrop that gives the screen depth without
-          competing with the card content. Fixed so it stays put while the
-          form scrolls on short viewports. */}
-      <div aria-hidden className="pointer-events-none fixed inset-0">
-        <div className="absolute -top-40 left-1/2 h-[36rem] w-[36rem] -translate-x-1/2 rounded-full bg-primary/10 blur-3xl" />
-        <div className="absolute -bottom-32 -left-24 h-[26rem] w-[26rem] rounded-full bg-primary/5 blur-3xl" />
-        <div className="absolute inset-0 bg-[radial-gradient(hsl(var(--foreground)/0.04)_1px,transparent_1px)] [background-size:22px_22px] opacity-60" />
-      </div>
-
-      <div className="relative mx-auto flex min-h-full w-full max-w-md items-center justify-center p-4 py-8">
-        <div className="w-full rounded-2xl border border-border/70 bg-card/90 p-8 shadow-[0_24px_60px_-20px_hsl(var(--foreground)/0.18)] ring-1 ring-foreground/5 backdrop-blur-xl sm:p-10">
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md">
+        <div className="space-y-6 rounded-lg border border-border bg-card p-8 shadow-lg">
          <div className="text-center">
-            <div className="mb-5 flex justify-center">
+            <div className="mb-4 flex justify-center">
              {logo ?? (
-                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-primary/80 shadow-lg shadow-primary/25 ring-1 ring-inset ring-white/20">
-                  <img src="/logo.svg" alt="CloudCLI" className="h-9 w-9" />
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary shadow-sm">
+                  <MessageSquare className="h-8 w-8 text-primary-foreground" />
                </div>
              )}
            </div>
-            <h1 className="font-serif text-3xl font-bold tracking-tight text-foreground">{title}</h1>
-            <p className="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-muted-foreground">{description}</p>
+            <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+            <p className="mt-2 text-muted-foreground">{description}</p>
          </div>

-          <div className="mt-8">{children}</div>
+          {children}

-          <div className="mt-6 border-t border-border/60 pt-5 text-center">
-            <p className="text-xs leading-relaxed text-muted-foreground">{footerText}</p>
+          <div className="text-center">
+            <p className="text-sm text-muted-foreground">{footerText}</p>
          </div>

          {!IS_PLATFORM && (
-            <div className="mt-4 flex items-center justify-center gap-1.5">
+            <div className="flex items-center justify-center gap-1.5 pt-2">
              <svg className="h-3.5 w-3.5 text-muted-foreground/50" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
              </svg>
--- a/src/components/auth/view/LoginForm.tsx
+++ b/src/components/auth/view/LoginForm.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import type { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Loader2, Lock, User } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import AuthErrorAlert from './AuthErrorAlert';
 import AuthInputField from './AuthInputField';
@@ -70,7 +69,6 @@ export default function LoginForm() {
          placeholder={t('login.placeholders.username')}
          isDisabled={isSubmitting}
          autoComplete="username"
-          icon={User}
        />

        <AuthInputField
@@ -82,7 +80,6 @@ export default function LoginForm() {
          isDisabled={isSubmitting}
          type="password"
          autoComplete="current-password"
-          icon={Lock}
        />

        <AuthErrorAlert errorMessage={errorMessage} />
@@ -90,16 +87,9 @@ export default function LoginForm() {
        <button
          type="submit"
          disabled={isSubmitting}
-          className="flex w-full items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2.5 font-medium text-primary-foreground shadow-lg shadow-primary/25 transition-all duration-200 hover:brightness-110 hover:shadow-primary/30 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-2 focus:ring-offset-card active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60"
+          className="w-full rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors duration-200 hover:bg-blue-700 disabled:bg-blue-400"
        >
-          {isSubmitting ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin" />
-              {t('login.loading')}
-            </>
-          ) : (
-            t('login.submit')
-          )}
+          {isSubmitting ? t('login.loading') : t('login.submit')}
        </button>
      </form>
    </AuthScreenLayout>
--- a/src/components/auth/view/SetupForm.tsx
+++ b/src/components/auth/view/SetupForm.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useState } from 'react';
 import type { FormEvent } from 'react';
-import { Loader2, Lock, ShieldCheck, User } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import AuthErrorAlert from './AuthErrorAlert';
 import AuthInputField from './AuthInputField';
@@ -86,6 +85,7 @@ export default function SetupForm() {
      title="Welcome to CloudCLI"
      description="Set up your account to get started"
      footerText="This is a single-user system. Only one account can be created."
+      logo={<img src="/logo.svg" alt="CloudCLI" className="h-16 w-16" />}
    >
      <form onSubmit={handleSubmit} className="space-y-4">
        <AuthInputField
@@ -94,10 +94,9 @@ export default function SetupForm() {
          label="Username"
          value={formState.username}
          onChange={(value) => updateField('username', value)}
-          placeholder="Choose a username"
+          placeholder="Enter your username"
          isDisabled={isSubmitting}
          autoComplete="username"
-          icon={User}
        />

        <AuthInputField
@@ -106,11 +105,10 @@ export default function SetupForm() {
          label="Password"
          value={formState.password}
          onChange={(value) => updateField('password', value)}
-          placeholder="Create a password"
+          placeholder="Enter your password"
          isDisabled={isSubmitting}
          type="password"
          autoComplete="new-password"
-          icon={Lock}
        />

        <AuthInputField
@@ -119,33 +117,20 @@ export default function SetupForm() {
          label="Confirm Password"
          value={formState.confirmPassword}
          onChange={(value) => updateField('confirmPassword', value)}
-          placeholder="Re-enter your password"
+          placeholder="Confirm your password"
          isDisabled={isSubmitting}
          type="password"
          autoComplete="new-password"
-          icon={ShieldCheck}
        />

-        <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-          <ShieldCheck className="h-3.5 w-3.5" />
-          At least 3 characters for username, 6 for password.
-        </p>
-
        <AuthErrorAlert errorMessage={errorMessage} />

        <button
          type="submit"
          disabled={isSubmitting}
-          className="flex w-full items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2.5 font-medium text-primary-foreground shadow-lg shadow-primary/25 transition-all duration-200 hover:brightness-110 hover:shadow-primary/30 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-2 focus:ring-offset-card active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60"
+          className="w-full rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors duration-200 hover:bg-blue-700 disabled:bg-blue-400"
        >
-          {isSubmitting ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin" />
-              Setting up...
-            </>
-          ) : (
-            'Create Account'
-          )}
+          {isSubmitting ? 'Setting up...' : 'Create Account'}
        </button>
      </form>
    </AuthScreenLayout>
--- a/src/components/chat/hooks/useChatSessionState.ts
+++ b/src/components/chat/hooks/useChatSessionState.ts
@@ -18,6 +18,7 @@ interface UseChatSessionStateArgs {
  selectedSession: ProjectSession | null;
  ws: WebSocket | null;
  sendMessage: (message: unknown) => void;
+  autoScrollToBottom?: boolean;
  externalMessageUpdate?: number;
  newSessionTrigger?: number;
  processingSessions?: SessionActivityMap;
@@ -95,6 +96,7 @@ export function useChatSessionState({
  selectedSession,
  ws,
  sendMessage,
+  autoScrollToBottom,
  externalMessageUpdate,
  newSessionTrigger,
  processingSessions,
@@ -119,7 +121,6 @@ export function useChatSessionState({
  const [viewHiddenCount, setViewHiddenCount] = useState(0);

  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const wasNearTopRef = useRef(false);
  const [searchTarget, setSearchTarget] = useState<{ timestamp?: string; uuid?: string; snippet?: string } | null>(null);
  const searchScrollActiveRef = useRef(false);
  const isLoadingSessionRef = useRef(false);
@@ -184,7 +185,6 @@ export function useChatSessionState({
    setShowLoadAllOverlay(false);
    setViewHiddenCount(0);
    setSearchTarget(null);
-    wasNearTopRef.current = false;
    searchScrollActiveRef.current = false;
    topLoadLockRef.current = false;
    pendingScrollRestoreRef.current = null;
@@ -336,34 +336,12 @@ export function useChatSessionState({
        const slot = await sessionStore.fetchMore(selectedSession.id, {
          limit: MESSAGES_PER_PAGE,
        });
-        if (!slot) return false;
-        if (slot.serverMessages.length === 0) {
-          if (!slot.hasMore) {
-            setHasMoreMessages(false);
-            allMessagesLoadedRef.current = true;
-            setAllMessagesLoaded(true);
-            if (loadAllOverlayTimerRef.current) {
-              clearTimeout(loadAllOverlayTimerRef.current);
-              loadAllOverlayTimerRef.current = null;
-            }
-            setShowLoadAllOverlay(false);
-          }
-          return false;
-        }
+        if (!slot || slot.serverMessages.length === 0) return false;

        pendingScrollRestoreRef.current = { height: previousScrollHeight, top: previousScrollTop };
        setHasMoreMessages(slot.hasMore);
        setTotalMessages(slot.total);
        setVisibleMessageCount((prev) => prev + MESSAGES_PER_PAGE);
-        if (!slot.hasMore) {
-          allMessagesLoadedRef.current = true;
-          setAllMessagesLoaded(true);
-          if (loadAllOverlayTimerRef.current) {
-            clearTimeout(loadAllOverlayTimerRef.current);
-            loadAllOverlayTimerRef.current = null;
-          }
-          setShowLoadAllOverlay(false);
-        }
        return true;
      } finally {
        isLoadingMoreRef.current = false;
@@ -379,25 +357,8 @@ export function useChatSessionState({
    const nearBottom = isNearBottom();
    setIsUserScrolledUp(!nearBottom);

-    const scrolledNearTop = container.scrollTop < 100;
-
-    // "Load all" prompt: appear (with fade-in) when the user reaches the top
-    if (scrolledNearTop && hasMoreMessages && !allMessagesLoadedRef.current) {
-      if (!wasNearTopRef.current) {
-        wasNearTopRef.current = true;
-        if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current);
-
-        setShowLoadAllOverlay(true);
-        loadAllOverlayTimerRef.current = setTimeout(() => {
-          setShowLoadAllOverlay(false);
-          loadAllOverlayTimerRef.current = null;
-        }, 2500);
-      }
-    } else if (!scrolledNearTop) {
-      wasNearTopRef.current = false;
-    }
-
    if (!allMessagesLoadedRef.current) {
+      const scrolledNearTop = container.scrollTop < 100;
      if (!scrolledNearTop) { topLoadLockRef.current = false; return; }
      if (topLoadLockRef.current) {
        if (container.scrollTop > 20) topLoadLockRef.current = false;
@@ -406,7 +367,7 @@ export function useChatSessionState({
      const didLoad = await loadOlderMessages(container);
      if (didLoad) topLoadLockRef.current = true;
    }
-  }, [hasMoreMessages, isNearBottom, loadOlderMessages]);
+  }, [isNearBottom, loadOlderMessages]);

  useLayoutEffect(() => {
    if (!pendingScrollRestoreRef.current || !scrollContainerRef.current) return;
@@ -425,7 +386,6 @@ export function useChatSessionState({
    }
    topLoadLockRef.current = false;
    pendingScrollRestoreRef.current = null;
-    wasNearTopRef.current = false;
    setIsUserScrolledUp(false);
  }, [selectedProject?.projectId, selectedSession?.id]);

@@ -532,7 +492,6 @@ export function useChatSessionState({
    setLoadAllJustFinished(false);
    setShowLoadAllOverlay(false);
    setViewHiddenCount(0);
-    wasNearTopRef.current = false;
    if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current);
    if (loadAllFinishedTimerRef.current) clearTimeout(loadAllFinishedTimerRef.current);

@@ -587,7 +546,7 @@ export function useChatSessionState({
        if (!isProcessing) {
          await sessionStore.refreshFromServer(selectedSession.id);

-          if (isNearBottom()) {
+          if (Boolean(autoScrollToBottom) && isNearBottom()) {
            setTimeout(() => scrollToBottom(), 200);
          }
        }
@@ -598,6 +557,7 @@ export function useChatSessionState({

    reloadExternalMessages();
  }, [
+    autoScrollToBottom,
    externalMessageUpdate,
    isNearBottom,
    scrollToBottom,
@@ -729,9 +689,10 @@ export function useChatSessionState({
  }, [chatMessages, visibleMessageCount]);

  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    scrollPositionRef.current = { height: container.scrollHeight, top: container.scrollTop };
+    if (!autoScrollToBottom && scrollContainerRef.current) {
+      const container = scrollContainerRef.current;
+      scrollPositionRef.current = { height: container.scrollHeight, top: container.scrollTop };
+    }
  });

  useEffect(() => {
@@ -739,8 +700,8 @@ export function useChatSessionState({
    if (isLoadingMoreRef.current || isLoadingMoreMessages || pendingScrollRestoreRef.current) return;
    if (searchScrollActiveRef.current) return;

-    if (!isUserScrolledUp) {
-      setTimeout(() => scrollToBottom(), 50);
+    if (autoScrollToBottom) {
+      if (!isUserScrolledUp) setTimeout(() => scrollToBottom(), 50);
      return;
    }

@@ -750,7 +711,7 @@ export function useChatSessionState({
    const newHeight = container.scrollHeight;
    const heightDiff = newHeight - prevHeight;
    if (heightDiff > 0 && prevTop > 0) container.scrollTop = prevTop + heightDiff;
-  }, [chatMessages.length, isLoadingMoreMessages, isUserScrolledUp, scrollToBottom]);
+  }, [autoScrollToBottom, chatMessages.length, isLoadingMoreMessages, isUserScrolledUp, scrollToBottom]);

  useEffect(() => {
    const container = scrollContainerRef.current;
@@ -759,8 +720,23 @@ export function useChatSessionState({
    return () => container.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

-  // "Load all" overlay visibility is driven by scroll-to-top in handleScroll;
-  // timers are cleared on session change via the reset effect above.
+  // "Load all" overlay
+  const prevLoadingRef = useRef(false);
+  useEffect(() => {
+    const wasLoading = prevLoadingRef.current;
+    prevLoadingRef.current = isLoadingMoreMessages;
+
+    if (wasLoading && !isLoadingMoreMessages && hasMoreMessages) {
+      if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current);
+      setShowLoadAllOverlay(true);
+      loadAllOverlayTimerRef.current = setTimeout(() => setShowLoadAllOverlay(false), 2000);
+    }
+    if (!hasMoreMessages && !isLoadingMoreMessages) {
+      if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current);
+      setShowLoadAllOverlay(false);
+    }
+    return () => { if (loadAllOverlayTimerRef.current) clearTimeout(loadAllOverlayTimerRef.current); };
+  }, [isLoadingMoreMessages, hasMoreMessages]);

  const loadAllMessages = useCallback(async () => {
    if (!selectedSession || !selectedProject) return;
@@ -770,10 +746,6 @@ export function useChatSessionState({
    isLoadingMoreRef.current = true;
    setIsLoadingAllMessages(true);
    setShowLoadAllOverlay(true);
-    if (loadAllOverlayTimerRef.current) {
-      clearTimeout(loadAllOverlayTimerRef.current);
-      loadAllOverlayTimerRef.current = null;
-    }

    const container = scrollContainerRef.current;
    const previousScrollHeight = container ? container.scrollHeight : 0;
@@ -800,11 +772,7 @@ export function useChatSessionState({

        setLoadAllJustFinished(true);
        if (loadAllFinishedTimerRef.current) clearTimeout(loadAllFinishedTimerRef.current);
-        loadAllFinishedTimerRef.current = setTimeout(() => {
-          setLoadAllJustFinished(false);
-          setShowLoadAllOverlay(false);
-          loadAllFinishedTimerRef.current = null;
-        }, 2500);
+        loadAllFinishedTimerRef.current = setTimeout(() => { setLoadAllJustFinished(false); setShowLoadAllOverlay(false); }, 1000);
      } else {
        allMessagesLoadedRef.current = false;
        setShowLoadAllOverlay(false);
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/src/components/chat/tools/ToolRenderer.tsx
@@ -24,6 +24,7 @@ interface ToolRendererProps {
  onFileOpen?: (filePath: string, diffInfo?: any) => void;
  createDiff?: (oldStr: string, newStr: string) => DiffLine[];
  selectedProject?: Project | null;
+  autoExpandTools?: boolean;
  showRawParameters?: boolean;
  rawToolInput?: string;
  isSubagentContainer?: boolean;
@@ -79,6 +80,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
  onFileOpen,
  createDiff,
  selectedProject,
+  autoExpandTools = false,
  showRawParameters = false,
  rawToolInput,
  isSubagentContainer,
@@ -149,8 +151,8 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
        output={output}
        isError={Boolean(toolResult?.isError)}
        status={toolStatus !== 'completed' ? toolStatus : undefined}
-        // Commands stay collapsed by default; only failures auto-expand so they
-        // remain visible.
+        // Commands stay collapsed by default (even consecutive ones); only
+        // failures auto-expand so they remain visible.
        defaultOpen={false}
      />
    );
@@ -197,7 +199,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
      <PlanDisplay
        title={title}
        content={contentProps.content || ''}
-        defaultOpen={displayConfig.defaultOpen ?? false}
+        defaultOpen={displayConfig.defaultOpen ?? autoExpandTools}
        isStreaming={isStreaming}
        showRawParameters={mode === 'input' && showRawParameters}
        rawContent={rawToolInput}
@@ -214,7 +216,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({

    const defaultOpen = displayConfig.defaultOpen !== undefined
      ? displayConfig.defaultOpen
-      : false;
+      : autoExpandTools;

    const contentProps = displayConfig.getContentProps?.(parsedData, {
      selectedProject,
--- a/src/components/chat/tools/components/InteractiveRenderers/AskUserQuestionPanel.tsx
+++ b/src/components/chat/tools/components/InteractiveRenderers/AskUserQuestionPanel.tsx
@@ -229,7 +229,7 @@ export const AskUserQuestionPanel: React.FC<PermissionPanelProps> = ({
                  className={`group flex w-full items-center gap-2.5 rounded-lg border px-3 py-2 text-left transition-all duration-150 ${
                    isSelected
                      ? 'border-blue-300 bg-blue-50/80 ring-1 ring-blue-200/50 dark:border-blue-600 dark:bg-blue-900/25 dark:ring-blue-700/30'
-                      : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/60 dark:border-gray-700/60 dark:hover:border-gray-600 dark:hover:bg-gray-700/40'
+                      : 'dark:hover:bg-gray-750/50 border-gray-200 hover:border-gray-300 hover:bg-gray-50/60 dark:border-gray-700/60 dark:hover:border-gray-600'
                  }`}
                >
                  {/* Keyboard hint */}
@@ -277,7 +277,7 @@ export const AskUserQuestionPanel: React.FC<PermissionPanelProps> = ({
              className={`group flex w-full items-center gap-2.5 rounded-lg border px-3 py-2 text-left transition-all duration-150 ${
                isOtherOn
                  ? 'border-blue-300 bg-blue-50/80 ring-1 ring-blue-200/50 dark:border-blue-600 dark:bg-blue-900/25 dark:ring-blue-700/30'
-                  : 'border-dashed border-gray-200 hover:border-gray-300 hover:bg-gray-50/60 dark:border-gray-700/60 dark:hover:border-gray-600 dark:hover:bg-gray-700/40'
+                  : 'dark:hover:bg-gray-750/50 border-dashed border-gray-200 hover:border-gray-300 hover:bg-gray-50/60 dark:border-gray-700/60 dark:hover:border-gray-600'
              }`}
            >
              <kbd className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded font-mono text-[10px] transition-all duration-150 ${
--- a/src/components/chat/types/types.ts
+++ b/src/components/chat/types/types.ts
@@ -126,8 +126,10 @@ export interface ChatInterfaceProps {
  onNavigateToSession?: (targetSessionId: string, options?: SessionNavigationOptions) => void;
  onSessionEstablished?: (sessionId: string, context: SessionEstablishedContext) => void;
  onShowSettings?: () => void;
+  autoExpandTools?: boolean;
  showRawParameters?: boolean;
  showThinking?: boolean;
+  autoScrollToBottom?: boolean;
  sendByCtrlEnter?: boolean;
  externalMessageUpdate?: number;
  newSessionTrigger?: number;
--- a/src/components/chat/utils/toolGrouping.ts
+++ b/src/components/chat/utils/toolGrouping.ts
@@ -1,6 +1,6 @@
 import type { ChatMessage } from '../types/types';

-export const TOOL_GROUP_THRESHOLD = 2;
+export const TOOL_GROUP_THRESHOLD = 3;

 export interface ToolGroupItem {
  _isGroup: true;
@@ -19,17 +19,7 @@ function isGroupableToolMessage(message: ChatMessage): message is ChatMessage &
  return Boolean(message.isToolUse && message.toolName && !message.isSubagentContainer);
 }

-// Messages that render nothing (e.g. reasoning hidden when showThinking is off)
-// shouldn't split an otherwise-continuous run of the same tool — providers like
-// Codex interleave hidden reasoning between consecutive tool calls.
-function rendersNothing(message: ChatMessage, showThinking: boolean): boolean {
-  return Boolean(message.isThinking && !showThinking);
-}
-
-export function groupConsecutiveTools(
-  messages: ChatMessage[],
-  showThinking: boolean = true,
-): MessageListItem[] {
+export function groupConsecutiveTools(messages: ChatMessage[]): MessageListItem[] {
  const items: MessageListItem[] = [];
  let index = 0;

@@ -45,22 +35,13 @@ export function groupConsecutiveTools(
    const run: ChatMessage[] = [message];
    let nextIndex = index + 1;

-    while (nextIndex < messages.length) {
-      const candidate = messages[nextIndex];
-
-      // Skip invisible interleaved messages so they don't break the run.
-      if (rendersNothing(candidate, showThinking)) {
-        nextIndex += 1;
-        continue;
-      }
-
-      if (isGroupableToolMessage(candidate) && candidate.toolName === message.toolName) {
-        run.push(candidate);
-        nextIndex += 1;
-        continue;
-      }
-
-      break;
+    while (
+      nextIndex < messages.length &&
+      isGroupableToolMessage(messages[nextIndex]) &&
+      messages[nextIndex].toolName === message.toolName
+    ) {
+      run.push(messages[nextIndex]);
+      nextIndex += 1;
    }

    if (run.length >= TOOL_GROUP_THRESHOLD) {
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ArrowDownIcon } from 'lucide-react';

 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import { useWebSocket } from '../../../contexts/WebSocketContext';
@@ -31,8 +30,10 @@ function ChatInterface({
  onNavigateToSession,
  onSessionEstablished,
  onShowSettings,
+  autoExpandTools,
  showRawParameters,
  showThinking,
+  autoScrollToBottom,
  sendByCtrlEnter,
  externalMessageUpdate,
  newSessionTrigger,
@@ -123,6 +124,7 @@ function ChatInterface({
    selectedSession,
    ws,
    sendMessage,
+    autoScrollToBottom,
    externalMessageUpdate,
    newSessionTrigger,
    processingSessions,
@@ -183,7 +185,7 @@ function ChatInterface({
    handlePermissionDecision,
    handleGrantToolPermission,
    handleInputFocusChange,
-    isInputFocused,
+    isInputFocused: _isInputFocused,
    commandModalPayload,
    closeCommandModal,
    showCostModal,
@@ -354,26 +356,13 @@ function ChatInterface({
          onFileOpen={onFileOpen}
          onShowSettings={onShowSettings}
          onGrantToolPermission={handleGrantToolPermission}
+          autoExpandTools={autoExpandTools}
          showRawParameters={showRawParameters}
          showThinking={showThinking}
          selectedProject={selectedProject}
        />

-        <div className="relative flex-shrink-0">
-          {isUserScrolledUp && chatMessages.length > 0 && (
-            <div className="pointer-events-none absolute -top-11 left-0 right-0 z-20 flex justify-center">
-              <button
-                type="button"
-                onClick={scrollToBottomAndReset}
-                className="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border border-border/50 bg-card text-muted-foreground shadow-sm transition-all duration-200 hover:bg-accent hover:text-foreground"
-                title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
-              >
-                <ArrowDownIcon className="h-4 w-4" />
-              </button>
-            </div>
-          )}
-
-          <ChatComposer
+        <ChatComposer
          pendingPermissionRequests={pendingPermissionRequests}
          handlePermissionDecision={handlePermissionDecision}
          handleGrantToolPermission={handleGrantToolPermission}
@@ -388,6 +377,9 @@ function ChatInterface({
          onToggleCommandMenu={handleToggleCommandMenu}
          hasInput={Boolean(input.trim())}
          onClearInput={handleClearInput}
+          isUserScrolledUp={isUserScrolledUp}
+          hasMessages={chatMessages.length > 0}
+          onScrollToBottom={scrollToBottomAndReset}
          onSubmit={handleSubmit}
          isDragActive={isDragActive}
          attachedImages={attachedImages}
@@ -422,7 +414,6 @@ function ChatInterface({
          onTextareaPaste={handlePaste}
          onTextareaScrollSync={syncInputOverlayScroll}
          onTextareaInput={handleTextareaInput}
-          isInputFocused={isInputFocused}
          onInputFocusChange={handleInputFocusChange}
          placeholder={t('input.placeholder', {
            provider:
@@ -439,7 +430,6 @@ function ChatInterface({
          isTextareaExpanded={isTextareaExpanded}
          sendByCtrlEnter={sendByCtrlEnter}
        />
-        </div>
      </div>

      <QuickSettingsPanel />
--- a/src/components/chat/view/subcomponents/ActivityIndicator.tsx
+++ b/src/components/chat/view/subcomponents/ActivityIndicator.tsx
@@ -7,7 +7,6 @@ import type { SessionActivity } from '../../../../hooks/useSessionProtection';
 type ActivityIndicatorProps = {
  activity: SessionActivity | null;
  onAbort?: () => void;
-  isInputFocused?: boolean;
 };

 const ACTION_KEYS = [
@@ -19,7 +18,6 @@ const ACTION_KEYS = [
  'claudeStatus.actions.reasoning',
 ];
 const DEFAULT_ACTION_WORDS = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning'];
-const EXIT_ANIMATION_MS = 220;

 /**
 * Minimal response-in-progress indicator, in the spirit of the inline status
@@ -28,31 +26,11 @@ const EXIT_ANIMATION_MS = 220;
 * session has an entry in the processing map; it disappears the instant that
 * entry is removed.
 */
-export default function ActivityIndicator({ activity, onAbort, isInputFocused = false }: ActivityIndicatorProps) {
+export default function ActivityIndicator({ activity, onAbort }: ActivityIndicatorProps) {
  const { t } = useTranslation('chat');
-  const [renderedActivity, setRenderedActivity] = useState<SessionActivity | null>(activity);
-  const [isExiting, setIsExiting] = useState(false);
-  const startedAt = renderedActivity?.startedAt ?? null;
+  const startedAt = activity?.startedAt ?? null;
  const [elapsedSeconds, setElapsedSeconds] = useState(0);

-  useEffect(() => {
-    if (activity) {
-      setRenderedActivity(activity);
-      setIsExiting(false);
-      return;
-    }
-
-    if (!renderedActivity) return;
-
-    setIsExiting(true);
-    const timer = setTimeout(() => {
-      setRenderedActivity(null);
-      setIsExiting(false);
-    }, EXIT_ANIMATION_MS);
-
-    return () => clearTimeout(timer);
-  }, [activity, renderedActivity]);
-
  useEffect(() => {
    if (startedAt === null) return;
    const update = () => setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));
@@ -61,10 +39,10 @@ export default function ActivityIndicator({ activity, onAbort, isInputFocused =
    return () => clearInterval(timer);
  }, [startedAt]);

-  if (!renderedActivity) return null;
+  if (!activity) return null;

  const actionWords = ACTION_KEYS.map((key, i) => t(key, { defaultValue: DEFAULT_ACTION_WORDS[i] }));
-  const label = (renderedActivity.statusText || actionWords[Math.floor(elapsedSeconds / 4) % actionWords.length])
+  const label = (activity.statusText || actionWords[Math.floor(elapsedSeconds / 4) % actionWords.length])
    .replace(/\.+$/, '');

  const minutes = Math.floor(elapsedSeconds / 60);
@@ -72,31 +50,19 @@ export default function ActivityIndicator({ activity, onAbort, isInputFocused =
  const elapsedLabel = minutes < 1
    ? t('claudeStatus.elapsed.seconds', { count: seconds, defaultValue: '{{count}}s' })
    : t('claudeStatus.elapsed.minutesSeconds', { minutes, seconds, defaultValue: '{{minutes}}m {{seconds}}s' });
-  const tabSurfaceClassName = [
-    'chat-activity-tab inline-flex h-8 items-center rounded-b-none rounded-t-lg border border-b-0 bg-card px-3 text-xs transition-all duration-200',
-    isInputFocused
-      ? 'border-primary/30 shadow-[0_-1px_2px_hsl(var(--foreground)/0.08),1px_0_2px_hsl(var(--foreground)/0.06),-1px_0_2px_hsl(var(--foreground)/0.06)]'
-      : 'border-border/50 shadow-[0_-1px_1px_hsl(var(--foreground)/0.04),1px_0_1px_hsl(var(--foreground)/0.03),-1px_0_1px_hsl(var(--foreground)/0.03)]',
-  ].join(' ');

  return (
-    <div
-      className={`pointer-events-none bg-transparent ${
-        isExiting ? 'chat-activity-exit' : 'chat-activity-enter'
-      }`}
-    >
-      <div className="flex items-end justify-between gap-2">
-        <div className={`${tabSurfaceClassName} gap-2`}>
-          <span className="h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-primary" aria-hidden />
-          <Shimmer className="font-medium">{`${label}…`}</Shimmer>
-          <span className="tabular-nums text-muted-foreground/60">{elapsedLabel}</span>
-        </div>
+    <div className="animate-in fade-in mb-2 w-full duration-300">
+      <div className="mx-auto flex max-w-4xl items-center gap-2 px-1">
+        <span className="h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-primary" aria-hidden />
+        <Shimmer className="text-xs font-medium">{`${label}…`}</Shimmer>
+        <span className="text-xs tabular-nums text-muted-foreground/60">{elapsedLabel}</span>

-        {renderedActivity.canInterrupt && onAbort && (
+        {activity.canInterrupt && onAbort && (
          <button
            type="button"
            onClick={onAbort}
-            className={`${tabSurfaceClassName} pointer-events-auto gap-1.5 text-muted-foreground hover:bg-card hover:text-destructive`}
+            className="ml-auto flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
            aria-label={t('claudeStatus.stop', { defaultValue: 'Stop' })}
          >
            <svg className="h-2.5 w-2.5 fill-current" viewBox="0 0 24 24" aria-hidden>
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -11,7 +11,7 @@ import type {
  RefObject,
  TouchEvent,
 } from 'react';
-import { ImageIcon, MessageSquareIcon, XIcon, Loader2 } from 'lucide-react';
+import { ImageIcon, MessageSquareIcon, XIcon, ArrowDownIcon, Loader2 } from 'lucide-react';

 import { useVoiceInput } from '../../hooks/useVoiceInput';
 import { useVoiceAvailable } from '../../hooks/useVoiceAvailable';
@@ -68,6 +68,9 @@ interface ChatComposerProps {
  onToggleCommandMenu: () => void;
  hasInput: boolean;
  onClearInput: () => void;
+  isUserScrolledUp: boolean;
+  hasMessages: boolean;
+  onScrollToBottom: () => void;
  onSubmit: (event: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement> | TouchEvent<HTMLButtonElement>) => void;
  isDragActive: boolean;
  attachedImages: File[];
@@ -98,7 +101,6 @@ interface ChatComposerProps {
  onTextareaPaste: (event: ClipboardEvent<HTMLTextAreaElement>) => void;
  onTextareaScrollSync: (target: HTMLTextAreaElement) => void;
  onTextareaInput: (event: FormEvent<HTMLTextAreaElement>) => void;
-  isInputFocused?: boolean;
  onInputFocusChange?: (focused: boolean) => void;
  placeholder: string;
  isTextareaExpanded: boolean;
@@ -120,6 +122,9 @@ export default function ChatComposer({
  onToggleCommandMenu,
  hasInput,
  onClearInput,
+  isUserScrolledUp,
+  hasMessages,
+  onScrollToBottom,
  onSubmit,
  isDragActive,
  attachedImages,
@@ -150,7 +155,6 @@ export default function ChatComposer({
  onTextareaPaste,
  onTextareaScrollSync,
  onTextareaInput,
-  isInputFocused = false,
  onInputFocusChange,
  placeholder,
  isTextareaExpanded,
@@ -197,18 +201,15 @@ export default function ChatComposer({

  // Hide the thinking/status bar while any permission request is pending
  const hasPendingPermissions = pendingPermissionRequests.length > 0;
-  const hasActivityIndicator = Boolean(activity && !hasPendingPermissions);

  return (
-    <div className="chat-composer-shell relative flex-shrink-0 px-2 pb-2 pt-0 sm:px-4 sm:pb-4 md:px-4 md:pb-6">
+    <div className="chat-composer-shell flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
      {!hasPendingPermissions && (
-        <div className="pointer-events-none absolute bottom-full left-1/2 z-10 w-[calc(100%-1rem)] max-w-3xl -translate-x-1/2 translate-y-px bg-transparent sm:w-[calc(100%-2rem)]">
-          <ActivityIndicator activity={activity} onAbort={onAbortSession} isInputFocused={isInputFocused} />
-        </div>
+        <ActivityIndicator activity={activity} onAbort={onAbortSession} />
      )}

      {pendingPermissionRequests.length > 0 && (
-        <div className="mx-auto mb-3 max-w-3xl">
+        <div className="mx-auto mb-3 max-w-4xl">
          <PermissionRequestsBanner
            pendingPermissionRequests={pendingPermissionRequests}
            handlePermissionDecision={handlePermissionDecision}
@@ -217,7 +218,19 @@ export default function ChatComposer({
        </div>
      )}

-      {!hasQuestionPanel && <div className="relative mx-auto max-w-3xl">
+      {!hasQuestionPanel && <div className="relative mx-auto max-w-4xl">
+        {isUserScrolledUp && hasMessages && (
+          <div className="absolute -top-10 left-0 right-0 z-10 flex justify-center">
+            <button
+              type="button"
+              onClick={onScrollToBottom}
+              className="flex h-8 w-8 items-center justify-center rounded-full border border-border/50 bg-card text-muted-foreground shadow-sm transition-all duration-200 hover:bg-accent hover:text-foreground"
+              title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
+            >
+              <ArrowDownIcon className="h-4 w-4" />
+            </button>
+          </div>
+        )}
        {showFileDropdown && filteredFiles.length > 0 && (
          <div className="absolute bottom-full left-0 right-0 z-50 mb-2 max-h-48 overflow-y-auto rounded-xl border border-border/50 bg-card/95 shadow-lg backdrop-blur-md">
            {filteredFiles.map((file, index) => (
@@ -258,10 +271,7 @@ export default function ChatComposer({
        <PromptInput
          onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void}
          status={isLoading ? 'streaming' : 'ready'}
-          className={[
-            isTextareaExpanded ? 'chat-input-expanded' : '',
-            hasActivityIndicator ? 'rounded-t-none' : '',
-          ].filter(Boolean).join(' ')}
+          className={isTextareaExpanded ? 'chat-input-expanded' : ''}
          {...getRootProps()}
        >
          {isDragActive && (
@@ -339,7 +349,7 @@ export default function ChatComposer({
            <button
              type="button"
              onClick={onModeSwitch}
-              className={`inline-flex h-8 items-center rounded-lg border px-2 text-xs font-medium transition-all duration-200 sm:px-2.5 ${
+              className={`rounded-lg border p-2 text-xs font-medium transition-all duration-200 sm:px-2.5 sm:py-1 ${
                permissionMode === 'default'
                  ? 'border-border/60 bg-muted/50 text-muted-foreground hover:bg-muted'
                  : permissionMode === 'acceptEdits'
--- a/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
+++ b/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
 import type { Dispatch, RefObject, SetStateAction } from 'react';

 import type { ChatMessage } from '../../types/types';
@@ -15,7 +15,6 @@ import { groupConsecutiveTools, isToolGroupItem } from '../../utils/toolGrouping
 import MessageComponent from './MessageComponent';
 import ProviderSelectionEmptyState from './ProviderSelectionEmptyState';
 import ToolGroupContainer from './ToolGroupContainer';
-import LoadAllMessagesOverlay from './LoadAllMessagesOverlay';

 interface ChatMessagesPaneProps {
  scrollContainerRef: RefObject<HTMLDivElement>;
@@ -62,6 +61,7 @@ interface ChatMessagesPaneProps {
  onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
  onShowSettings?: () => void;
  onGrantToolPermission: (suggestion: { entry: string; toolName: string }) => { success: boolean };
+  autoExpandTools?: boolean;
  showRawParameters?: boolean;
  showThinking?: boolean;
  selectedProject: Project;
@@ -111,59 +111,48 @@ function ChatMessagesPane({
  onFileOpen,
  onShowSettings,
  onGrantToolPermission,
+  autoExpandTools,
  showRawParameters,
  showThinking,
  selectedProject,
 }: ChatMessagesPaneProps) {
  const { t } = useTranslation('chat');
-  const groupedVisibleMessages = useMemo(
-    () => groupConsecutiveTools(visibleMessages, Boolean(showThinking)),
-    [visibleMessages, showThinking],
-  );
+  const messageKeyMapRef = useRef<WeakMap<ChatMessage, string>>(new WeakMap());
+  const allocatedKeysRef = useRef<Set<string>>(new Set());
+  const generatedMessageKeyCounterRef = useRef(0);
+  const groupedVisibleMessages = useMemo(() => groupConsecutiveTools(visibleMessages), [visibleMessages]);

-  // Stable, deterministic keys for the messages rendered this pass.
-  //
-  // `normalizedToChatMessages` rebuilds fresh ChatMessage objects on every store
-  // update, so caching keys by object identity (or via a cross-render allocation
-  // Set) minted a brand-new key for the *same* logical message on each prepend —
-  // remounting the whole list, which disconnects the scroll-restore anchor and
-  // reflows heights, jumping the viewport to the bottom. Deriving keys purely
-  // from this render's ordered messages (intrinsic key, disambiguated by
-  // occurrence index on collision) yields the same key for the same message
-  // order, so React preserves existing DOM nodes and component state on prepend.
-  const messageKeyMap = useMemo(() => {
-    const keys = new WeakMap<ChatMessage, string>();
-    const occurrences = new Map<string, number>();
-    const assign = (message: ChatMessage) => {
-      const intrinsicKey = getIntrinsicMessageKey(message) ?? 'message-generated';
-      const seen = occurrences.get(intrinsicKey) ?? 0;
-      occurrences.set(intrinsicKey, seen + 1);
-      keys.set(message, seen === 0 ? intrinsicKey : `${intrinsicKey}__${seen}`);
-    };
-    for (const item of groupedVisibleMessages) {
-      if (isToolGroupItem(item)) {
-        item.messages.forEach(assign);
-      } else {
-        assign(item);
-      }
+  // Keep keys stable across prepends so existing MessageComponent instances retain local state.
+  const getMessageKey = useCallback((message: ChatMessage) => {
+    const existingKey = messageKeyMapRef.current.get(message);
+    if (existingKey) {
+      return existingKey;
    }
-    return keys;
-  }, [groupedVisibleMessages]);

-  const getMessageKey = useCallback(
-    (message: ChatMessage) =>
-      messageKeyMap.get(message) ?? getIntrinsicMessageKey(message) ?? 'message-generated',
-    [messageKeyMap],
-  );
+    const intrinsicKey = getIntrinsicMessageKey(message);
+    let candidateKey = intrinsicKey;
+
+    if (!candidateKey || allocatedKeysRef.current.has(candidateKey)) {
+      do {
+        generatedMessageKeyCounterRef.current += 1;
+        candidateKey = intrinsicKey
+          ? `${intrinsicKey}-${generatedMessageKeyCounterRef.current}`
+          : `message-generated-${generatedMessageKeyCounterRef.current}`;
+      } while (allocatedKeysRef.current.has(candidateKey));
+    }
+
+    allocatedKeysRef.current.add(candidateKey);
+    messageKeyMapRef.current.set(message, candidateKey);
+    return candidateKey;
+  }, []);

  return (
    <div
      ref={scrollContainerRef}
      onWheel={onWheel}
      onTouchMove={onTouchMove}
-      className="chat-messages-pane relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden py-3 sm:py-4"
+      className="chat-messages-pane relative min-h-0 flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
    >
-      <div className="mx-auto w-full max-w-3xl space-y-3 px-4 sm:space-y-4">
      {(isLoadingSessionMessages || isProcessing) && chatMessages.length === 0 ? (
        <div className="mt-8 text-center text-gray-500 dark:text-gray-400">
          <div className="flex items-center justify-center space-x-2">
@@ -219,13 +208,35 @@ function ChatMessagesPane({
            </div>
          )}

-          <LoadAllMessagesOverlay
-            showLoadAllOverlay={showLoadAllOverlay}
-            isLoadingAllMessages={isLoadingAllMessages}
-            loadAllJustFinished={loadAllJustFinished}
-            totalMessages={totalMessages}
-            onLoadAllMessages={loadAllMessages}
-          />
+          {/* Floating "Load all messages" overlay */}
+          {(showLoadAllOverlay || isLoadingAllMessages || loadAllJustFinished) && (
+            <div className="pointer-events-none sticky top-2 z-20 flex justify-center">
+              {loadAllJustFinished ? (
+                <div className="flex items-center space-x-2 rounded-full bg-green-600 px-4 py-1.5 text-xs font-medium text-white shadow-lg dark:bg-green-500">
+                  <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                  </svg>
+                  <span>{t('session.messages.allLoaded')}</span>
+                </div>
+              ) : (
+                <button
+                  className="pointer-events-auto flex items-center space-x-2 rounded-full bg-blue-600 px-4 py-1.5 text-xs font-medium text-white shadow-lg transition-all duration-200 hover:scale-105 hover:bg-blue-700 disabled:cursor-wait disabled:opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600"
+                  onClick={loadAllMessages}
+                  disabled={isLoadingAllMessages}
+                >
+                  {isLoadingAllMessages && (
+                    <div className="h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                  )}
+                  <span>
+                    {isLoadingAllMessages
+                      ? t('session.messages.loadingAll')
+                      : <>{t('session.messages.loadAll')} {totalMessages > 0 && `(${totalMessages})`}</>
+                    }
+                  </span>
+                </button>
+              )}
+            </div>
+          )}

          {/* Legacy message count indicator (for non-paginated view) */}
          {!hasMoreMessages && chatMessages.length > visibleMessageCount && (
@@ -262,6 +273,7 @@ function ChatMessagesPane({
                    onFileOpen={onFileOpen}
                    onShowSettings={onShowSettings}
                    onGrantToolPermission={onGrantToolPermission}
+                    autoExpandTools={autoExpandTools}
                    showRawParameters={showRawParameters}
                    showThinking={showThinking}
                    selectedProject={selectedProject}
@@ -282,6 +294,7 @@ function ChatMessagesPane({
                  onFileOpen={onFileOpen}
                  onShowSettings={onShowSettings}
                  onGrantToolPermission={onGrantToolPermission}
+                  autoExpandTools={autoExpandTools}
                  showRawParameters={showRawParameters}
                  showThinking={showThinking}
                  selectedProject={selectedProject}
@@ -292,7 +305,6 @@ function ChatMessagesPane({
          })()}
        </>
      )}
-      </div>
    </div>
  );
 }
--- a/src/components/chat/view/subcomponents/CommandMenu.tsx
+++ b/src/components/chat/view/subcomponents/CommandMenu.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import type { CSSProperties, ReactElement } from 'react';
+import type { CSSProperties } from 'react';
 import {
  CornerDownLeft,
  Folder,
@@ -78,7 +77,6 @@ const namespaceAccentClasses: Record<string, string> = {

 const MENU_EDGE_GAP = 16;
 const MENU_MAX_HEIGHT = 360;
-const MENU_MIN_HEIGHT = 160;

 const getCommandKey = (command: CommandMenuCommand) =>
  `${command.name}::${command.namespace || command.type || 'other'}::${command.path || ''}`;
@@ -94,9 +92,8 @@ const getMenuPosition = (position: { top: number; left: number; bottom?: number
  if (typeof window === 'undefined') {
    return { position: 'fixed', top: '16px', left: '16px' };
  }
-  const maxAnchorBottom = Math.max(MENU_EDGE_GAP, window.innerHeight - MENU_EDGE_GAP - MENU_MIN_HEIGHT);
  if (window.innerWidth < 640) {
-    const anchorBottom = Math.min(Math.max(MENU_EDGE_GAP, position.bottom ?? 90), maxAnchorBottom);
+    const anchorBottom = Math.max(MENU_EDGE_GAP, position.bottom ?? 90);
    return {
      position: 'fixed',
      bottom: `${anchorBottom}px`,
@@ -107,7 +104,7 @@ const getMenuPosition = (position: { top: number; left: number; bottom?: number
      maxHeight: `min(54vh, calc(100vh - ${anchorBottom}px - ${MENU_EDGE_GAP}px))`,
    };
  }
-  const anchorBottom = Math.min(Math.max(MENU_EDGE_GAP, position.bottom ?? 90), maxAnchorBottom);
+  const anchorBottom = Math.max(MENU_EDGE_GAP, position.bottom ?? 90);
  const clampedLeft = Math.max(
    MENU_EDGE_GAP,
    Math.min(position.left, window.innerWidth - 440 - MENU_EDGE_GAP),
@@ -219,14 +216,12 @@ export default function CommandMenu({
    : ['builtin', 'skill', 'project', 'user', 'other'];
  const extraNamespaces = Object.keys(groupedCommands).filter((namespace) => !preferredOrder.includes(namespace));
  const orderedNamespaces = [...preferredOrder, ...extraNamespaces].filter((namespace) => groupedCommands[namespace]);
-  const renderInPortal = (node: ReactElement) =>
-    typeof document === 'undefined' ? node : createPortal(node, document.body);

  if (commands.length === 0) {
-    return renderInPortal(
+    return (
      <div
        ref={menuRef}
-        className="command-menu command-menu-empty border border-border bg-popover/95 text-sm text-muted-foreground"
+        className="command-menu command-menu-empty border border-gray-200 bg-white/95 text-sm text-gray-500 dark:border-gray-700/80 dark:bg-gray-900/95 dark:text-gray-400"
        style={{
          ...menuBaseStyle,
          ...menuPosition,
@@ -242,20 +237,20 @@ export default function CommandMenu({
    );
  }

-  return renderInPortal(
+  return (
    <div
      ref={menuRef}
      role="listbox"
      aria-label="Available commands"
-      className="command-menu border border-border bg-popover/95 text-popover-foreground"
+      className="command-menu border border-gray-200/90 bg-white/95 text-gray-900 dark:border-slate-700/80 dark:bg-slate-950/95 dark:text-slate-100"
      style={{ ...menuBaseStyle, ...menuPosition, opacity: 1, transform: 'translateY(0)' }}
    >
      {orderedNamespaces.map((namespace) => (
        <div key={namespace} className="command-group">
          {orderedNamespaces.length > 1 && (
-            <div className="flex items-center justify-between px-2 pb-1.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+            <div className="flex items-center justify-between px-2 pb-1.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-gray-500 dark:text-slate-400">
              <span>{namespaceLabels[namespace] || namespace}</span>
-              <span className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+              <span className="rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] text-gray-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
                {(groupedCommands[namespace] || []).length}
              </span>
            </div>
@@ -273,15 +268,15 @@ export default function CommandMenu({
                aria-selected={isSelected}
                className={`command-item group relative mb-1 flex cursor-pointer items-start gap-2 rounded-md border px-2.5 py-2 transition-all ${
                  isSelected
-                    ? 'border-primary/30 bg-primary/10 shadow-sm'
-                    : 'border-transparent bg-transparent hover:border-border hover:bg-accent'
+                    ? 'border-sky-200 bg-sky-50 shadow-sm dark:border-cyan-400/30 dark:bg-cyan-400/10'
+                    : 'border-transparent bg-transparent hover:border-gray-200 hover:bg-gray-50/90 dark:hover:border-slate-700 dark:hover:bg-slate-900/80'
                }`}
                onMouseEnter={() => onSelect && commandIndex >= 0 && onSelect(command, commandIndex, true)}
                onClick={() => onSelect && commandIndex >= 0 && onSelect(command, commandIndex, false)}
                onMouseDown={(event) => event.preventDefault()}
              >
                {isSelected && (
-                  <span className="absolute bottom-1.5 left-1.5 top-1.5 w-0.5 rounded-full bg-primary" />
+                  <span className="absolute bottom-1.5 left-1.5 top-1.5 w-0.5 rounded-full bg-sky-500 dark:bg-cyan-300" />
                )}
                <span className={`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${accentClass}`}>
                  <NamespaceIcon aria-hidden="true" size={14} strokeWidth={2.2} />
@@ -289,20 +284,20 @@ export default function CommandMenu({
                <div className="min-w-0 flex-1 pr-1">
                  <div className={`flex min-w-0 items-center gap-2 ${command.description ? 'mb-1' : 'mb-0'}`}>
                    <span
-                      className="min-w-0 truncate font-mono text-[13px] font-semibold text-foreground"
+                      className="min-w-0 truncate font-mono text-[13px] font-semibold text-gray-950 dark:text-slate-50"
                      title={command.name}
                    >
                      {command.name}
                    </span>
                    {command.metadata?.type && (
-                      <span className="command-metadata-badge shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm">
+                      <span className="command-metadata-badge shrink-0 rounded border border-gray-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-gray-500 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
                        {command.metadata.type}
                      </span>
                    )}
                  </div>
                  {command.description && (
                    <div
-                      className="truncate whitespace-nowrap text-[12px] leading-4 text-muted-foreground"
+                      className="truncate whitespace-nowrap text-[12px] leading-4 text-gray-500 dark:text-slate-400"
                      title={command.description}
                    >
                      {command.description}
@@ -310,7 +305,7 @@ export default function CommandMenu({
                  )}
                </div>
                {isSelected && (
-                  <span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded border border-primary/30 bg-card text-primary shadow-sm">
+                  <span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded border border-sky-200 bg-white text-sky-600 shadow-sm dark:border-cyan-400/30 dark:bg-slate-950 dark:text-cyan-200">
                    <CornerDownLeft aria-hidden="true" size={13} strokeWidth={2.2} />
                  </span>
                )}
--- a/src/components/chat/view/subcomponents/CommandResultModal.tsx
+++ b/src/components/chat/view/subcomponents/CommandResultModal.tsx
@@ -565,41 +565,46 @@ export default function CommandResultModal({
        <DialogTitle>{activeMeta?.title || 'Command Result'}</DialogTitle>

        <div
-          className={`flex shrink-0 items-start justify-between gap-3 border-b border-border bg-popover ${
-            isModelsModal ? 'px-4 py-3 sm:px-5 sm:py-4' : 'px-4 py-4 sm:px-6 sm:py-5'
+          className={`relative shrink-0 overflow-hidden border-b border-border/70 bg-gradient-to-br from-primary/15 via-background to-muted/40 ${
+            isModelsModal ? 'px-4 pb-3 pt-3 sm:px-5 sm:pb-4 sm:pt-4' : 'px-4 pb-4 pt-4 sm:px-6 sm:pb-5 sm:pt-5'
          }`}
        >
-          <div className="flex min-w-0 items-center gap-3">
-            <div
-              className={`flex shrink-0 items-center justify-center rounded-xl border border-border bg-muted text-foreground ${
-                isModelsModal ? 'h-9 w-9' : 'h-10 w-10'
-              }`}
-            >
-              <HeaderIcon className={isModelsModal ? 'h-4 w-4' : 'h-5 w-5'} />
-            </div>
-            <div className="min-w-0">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
-                {activeMeta?.eyebrow}
-              </p>
-              <p className="mt-0.5 text-lg font-semibold tracking-tight text-foreground sm:text-xl">
-                {activeMeta?.title}
-              </p>
-              <p className="mt-0.5 max-w-2xl text-sm leading-5 text-muted-foreground">
-                {activeMeta?.subtitle}
-              </p>
-            </div>
-          </div>
+          <div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-primary/20 blur-3xl" />
+          <div className="pointer-events-none absolute right-0 top-0 h-full w-1/2 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary)/0.16),transparent_58%)]" />

-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            onClick={onClose}
-            className="h-8 w-8 shrink-0 rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground"
-            aria-label="Close command result modal"
-          >
-            <X className="h-4 w-4" />
-          </Button>
+          <div className="relative flex items-start justify-between gap-3">
+            <div className="flex min-w-0 items-start gap-3 sm:items-center">
+              <div
+                className={`rounded-2xl border border-primary/30 bg-primary/10 text-primary shadow-sm ${
+                  isModelsModal ? 'p-2.5' : 'p-3'
+                }`}
+              >
+                <HeaderIcon className={isModelsModal ? 'h-4 w-4' : 'h-5 w-5'} />
+              </div>
+              <div className="min-w-0">
+                <p className="text-[12px] font-bold uppercase tracking-[0.22em] text-primary">
+                  {activeMeta?.eyebrow}
+                </p>
+                <p className={`mt-1 font-semibold tracking-tight text-foreground ${isModelsModal ? 'text-xl sm:text-2xl' : 'text-xl sm:text-2xl'}`}>
+                  {activeMeta?.title}
+                </p>
+                <p className={`mt-1 max-w-2xl ${isModelsModal ? 'text-sm leading-5 text-foreground/75' : 'text-sm leading-5 text-muted-foreground'}`}>
+                  {activeMeta?.subtitle}
+                </p>
+              </div>
+            </div>
+
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              className="h-9 w-9 shrink-0 rounded-xl text-muted-foreground hover:bg-background/70 hover:text-foreground"
+              aria-label="Close command result modal"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
        </div>

        <div className="settings-content-enter min-h-0 flex-1 overflow-hidden px-4 py-4 sm:px-6 sm:py-5">
--- a/src/components/chat/view/subcomponents/LoadAllMessagesOverlay.tsx
+++ b/src/components/chat/view/subcomponents/LoadAllMessagesOverlay.tsx
@@ -1,68 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-const loadAllOverlayAnimationStyle = `
-@keyframes loadAllOverlayAutoFade {
-  0%, 80% { opacity: 1; }
-  100% { opacity: 0; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .load-all-overlay-auto-fade {
-    animation: none !important;
-  }
-}
-`;
-
-interface LoadAllMessagesOverlayProps {
-  showLoadAllOverlay: boolean;
-  isLoadingAllMessages: boolean;
-  loadAllJustFinished: boolean;
-  totalMessages: number;
-  onLoadAllMessages: () => void;
-}
-
-export default function LoadAllMessagesOverlay({
-  showLoadAllOverlay,
-  isLoadingAllMessages,
-  loadAllJustFinished,
-  totalMessages,
-  onLoadAllMessages,
-}: LoadAllMessagesOverlayProps) {
-  const { t } = useTranslation('chat');
-
-  if (!showLoadAllOverlay && !isLoadingAllMessages && !loadAllJustFinished) {
-    return null;
-  }
-
-  return (
-    <div
-      className={`pointer-events-none sticky top-2 z-20 flex justify-center ${!isLoadingAllMessages ? 'load-all-overlay-auto-fade' : ''}`}
-      style={!isLoadingAllMessages ? { animation: 'loadAllOverlayAutoFade 2500ms ease forwards' } : undefined}
-    >
-      <style>{loadAllOverlayAnimationStyle}</style>
-      {loadAllJustFinished ? (
-        <div className="flex items-center space-x-2 rounded-full bg-green-600 px-4 py-1.5 text-xs font-medium text-white shadow-lg dark:bg-green-500">
-          <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-          </svg>
-          <span>{t('session.messages.allLoaded')}</span>
-        </div>
-      ) : (
-        <button
-          className="pointer-events-auto flex items-center space-x-2 rounded-full bg-blue-600 px-4 py-1.5 text-xs font-medium text-white shadow-lg transition-all duration-200 hover:scale-105 hover:bg-blue-700 disabled:cursor-wait disabled:opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600"
-          onClick={onLoadAllMessages}
-          disabled={isLoadingAllMessages}
-        >
-          {isLoadingAllMessages && (
-            <div className="h-3 w-3 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-          )}
-          <span>
-            {isLoadingAllMessages
-              ? t('session.messages.loadingAll')
-              : <>{t('session.messages.loadAll')} {totalMessages > 0 && `(${totalMessages})`}</>}
-          </span>
-        </button>
-      )}
-    </div>
-  );
-}
--- a/src/components/chat/view/subcomponents/Markdown.tsx
+++ b/src/components/chat/view/subcomponents/Markdown.tsx
@@ -4,12 +4,11 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { useTranslation } from 'react-i18next';
 import { normalizeInlineCodeFences } from '../../utils/chatFormatting';
 import { copyTextToClipboard } from '../../../../utils/clipboard';
 import { usePaletteOps } from '../../../../contexts/PaletteOpsContext';
-import { useTheme } from '../../../../contexts/ThemeContext';

 type MarkdownProps = {
  children: React.ReactNode;
@@ -60,7 +59,6 @@ type CodeBlockProps = {

 const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockProps) => {
  const { t } = useTranslation('chat');
-  const { isDarkMode } = useTheme();
  const [copied, setCopied] = useState(false);
  const raw = Array.isArray(children) ? children.join('') : String(children ?? '');
  const looksMultiline = /[\r\n]/.test(raw);
@@ -98,7 +96,7 @@ const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockPro
            }
          })
        }
-        className="absolute right-2 top-2 z-10 rounded-md border border-border bg-card/90 px-2 py-1 text-xs text-foreground/80 opacity-0 transition-opacity hover:bg-muted focus:opacity-100 active:opacity-100 group-hover:opacity-100"
+        className="absolute right-2 top-2 z-10 rounded-md border border-gray-600 bg-gray-700/80 px-2 py-1 text-xs text-white opacity-0 transition-opacity hover:bg-gray-700 focus:opacity-100 active:opacity-100 group-hover:opacity-100"
        title={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
        aria-label={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
      >
@@ -134,20 +132,17 @@ const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockPro

      <SyntaxHighlighter
        language={language}
-        style={isDarkMode ? oneDark : oneLight}
+        style={oneDark}
        customStyle={{
          margin: 0,
-          borderRadius: '0.75rem',
+          borderRadius: '0.5rem',
          fontSize: '0.875rem',
          padding: language && language !== 'text' ? '2rem 1rem 1rem 1rem' : '1rem',
-          // ChatGPT-style soft grey block in light mode; keep oneDark's own bg in dark.
-          ...(isDarkMode ? {} : { background: 'hsl(var(--muted))' }),
        }}
        codeTagProps={{
          style: {
            fontFamily:
              'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-            ...(isDarkMode ? {} : { background: 'transparent' }),
          },
        }}
      >
@@ -159,10 +154,6 @@ const CodeBlock = ({ node, inline, className, children, ...props }: CodeBlockPro

 const markdownComponents = {
  code: CodeBlock,
-  // CodeBlock renders its own syntax-highlighted <pre>; this passthrough stops
-  // react-markdown (and Tailwind Typography) from wrapping it in a second,
-  // dark-themed <pre> shell that would frame the block.
-  pre: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
  blockquote: ({ children }: { children?: React.ReactNode }) => (
    <blockquote className="my-2 border-l-4 border-gray-300 pl-4 italic text-gray-600 dark:border-gray-600 dark:text-gray-400">
      {children}
--- a/src/components/chat/view/subcomponents/MessageComponent.tsx
+++ b/src/components/chat/view/subcomponents/MessageComponent.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo, useRef } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';

 import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
@@ -30,6 +30,7 @@ type MessageComponentProps = {
  onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
  onShowSettings?: () => void;
  onGrantToolPermission?: (suggestion: ClaudePermissionSuggestion) => PermissionGrantResult | null | undefined;
+  autoExpandTools?: boolean;
  showRawParameters?: boolean;
  showThinking?: boolean;
  selectedProject?: Project | null;
@@ -44,7 +45,7 @@ type InteractiveOption = {

 const COPY_HIDDEN_TOOL_NAMES = new Set(['Bash', 'Edit', 'Write', 'ApplyPatch']);

-const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, showRawParameters, showThinking, selectedProject, provider }: MessageComponentProps) => {
+const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, autoExpandTools, showRawParameters, showThinking, selectedProject, provider }: MessageComponentProps) => {
  const { t } = useTranslation('chat');
  const isGrouped = prevMessage && prevMessage.type === message.type &&
    ((prevMessage.type === 'assistant') ||
@@ -52,6 +53,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
      (prevMessage.type === 'tool') ||
      (prevMessage.type === 'error'));
  const messageRef = useRef<HTMLDivElement | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
  const userCopyContent = String(message.content || '');
  const formattedMessageContent = useMemo(
    () => formatUsageLimitText(String(message.content || '')),
@@ -70,6 +72,32 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
    !message.isThinking;


+  useEffect(() => {
+    const node = messageRef.current;
+    if (!autoExpandTools || !node || !message.isToolUse) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !isExpanded) {
+            setIsExpanded(true);
+            const details = node.querySelectorAll<HTMLDetailsElement>('details');
+            details.forEach((detail) => {
+              detail.open = true;
+            });
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    observer.observe(node);
+
+    return () => {
+      observer.unobserve(node);
+    };
+  }, [autoExpandTools, isExpanded, message.isToolUse]);
+
  const formattedTime = useMemo(() => new Date(message.timestamp).toLocaleTimeString(), [message.timestamp]);
  const shouldHideThinkingMessage = Boolean(message.isThinking && !showThinking);

@@ -87,7 +115,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
        /* User message bubble on the right */
        <div className="flex w-full items-end space-x-0 sm:w-auto sm:max-w-[85%] sm:space-x-3 md:max-w-md lg:max-w-lg xl:max-w-xl">
          <div className="group flex-1 rounded-2xl rounded-br-md bg-blue-600 px-3 py-2 text-white shadow-sm sm:flex-initial sm:px-4">
-            <div dir="auto" className="whitespace-pre-wrap break-words font-serif text-sm">
+            <div dir="auto" className="whitespace-pre-wrap break-words text-sm">
              {message.content}
            </div>
            {message.images && message.images.length > 0 && (
@@ -138,7 +166,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
                  🔧
                </div>
              ) : (
-                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full p-1 text-sm text-foreground">
+                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full p-1 text-sm text-white">
                  <SessionProviderLogo provider={provider} className="h-full w-full" />
                </div>
              )}
@@ -166,7 +194,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
              <>
                <div className="flex flex-col">
                  <div className="flex flex-col">
-                    <Markdown className="prose prose-sm max-w-none font-serif dark:prose-invert">
+                    <Markdown className="prose prose-sm max-w-none dark:prose-invert">
                      {String(message.displayText || '')}
                    </Markdown>
                  </div>
@@ -182,6 +210,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
                    onFileOpen={onFileOpen}
                    createDiff={createDiff}
                    selectedProject={selectedProject}
+                    autoExpandTools={autoExpandTools}
                    showRawParameters={showRawParameters}
                    rawToolInput={typeof message.toolInput === 'string' ? message.toolInput : undefined}
                    isSubagentContainer={message.isSubagentContainer}
@@ -204,7 +233,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
                        <span className="text-xs font-medium text-red-700 dark:text-red-300">{t('messageTypes.error')}</span>
                      </div>
                      <div className="relative text-sm text-red-900 dark:text-red-100">
-                        <Markdown className="prose prose-sm prose-red max-w-none font-serif dark:prose-invert">
+                        <Markdown className="prose prose-sm prose-red max-w-none dark:prose-invert">
                          {String(message.toolResult.content || '')}
                        </Markdown>
                      </div>
@@ -221,6 +250,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
                        onFileOpen={onFileOpen}
                        createDiff={createDiff}
                        selectedProject={selectedProject}
+                        autoExpandTools={autoExpandTools}
                      />
                    </div>
                  )
@@ -312,7 +342,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s
              <Reasoning defaultOpen={false}>
                <ReasoningTrigger />
                <ReasoningContent>
-                  <Markdown className="prose prose-sm prose-gray max-w-none font-serif dark:prose-invert">
+                  <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
                    {message.content}
                  </Markdown>
                  <div className="mt-3 flex items-center text-[11px]">
@@ -347,15 +377,15 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s

                      return (
                        <div className="my-2">
-                          <div className="mb-2 flex items-center gap-2 text-sm text-muted-foreground">
+                          <div className="mb-2 flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                            <span className="font-medium">{t('json.response')}</span>
                          </div>
-                          <div className="overflow-hidden rounded-lg border border-border bg-muted">
+                          <div className="overflow-hidden rounded-lg border border-gray-600/30 bg-gray-800 dark:border-gray-700 dark:bg-gray-900">
                            <pre className="overflow-x-auto p-4">
-                              <code className="block whitespace-pre font-mono text-sm text-foreground">
+                              <code className="block whitespace-pre font-mono text-sm text-gray-100 dark:text-gray-200">
                                {formatted}
                              </code>
                            </pre>
@@ -369,7 +399,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, s

                  // Normal rendering for non-JSON content
                  return message.type === 'assistant' ? (
-                    <Markdown className="prose prose-sm prose-gray max-w-none font-serif dark:prose-invert">
+                    <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
                      {content}
                    </Markdown>
                  ) : (
--- a/src/components/chat/view/subcomponents/MessageCopyControl.tsx
+++ b/src/components/chat/view/subcomponents/MessageCopyControl.tsx
@@ -1,6 +1,4 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import type { CSSProperties } from 'react';
-import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { copyTextToClipboard } from '../../../../utils/clipboard';

@@ -51,32 +49,9 @@ const MessageCopyControl = ({
  const [selectedFormat, setSelectedFormat] = useState<CopyFormat>(defaultFormat);
  const [copied, setCopied] = useState(false);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
  const copyFeedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

-  // The dropdown is rendered in a portal so it escapes the chat message's
-  // `contain: paint` box (which would otherwise clip it). Anchor it to the
-  // trigger, flipping above when there isn't room below.
-  const openDropdown = () => {
-    const rect = triggerRef.current?.getBoundingClientRect();
-    if (rect) {
-      const ESTIMATED_MENU_HEIGHT = 84;
-      const openUp = rect.bottom + ESTIMATED_MENU_HEIGHT + 8 > window.innerHeight;
-      setMenuStyle({
-        position: 'fixed',
-        right: Math.max(8, window.innerWidth - rect.right),
-        zIndex: 1000,
-        ...(openUp
-          ? { bottom: window.innerHeight - rect.top + 4 }
-          : { top: rect.bottom + 4 }),
-      });
-    }
-    setIsDropdownOpen(true);
-  };
-
  const copyFormatOptions: CopyFormatOption[] = useMemo(
    () => [
      {
@@ -108,28 +83,18 @@ const MessageCopyControl = ({
  }, [defaultFormat]);

  useEffect(() => {
-    if (!isDropdownOpen) return;
-
-    // Close when clicking outside both the control and the portaled menu.
+    // Close the dropdown when clicking anywhere outside this control.
    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (!isDropdownOpen) return;
      const target = event.target as Node;
-      if (dropdownRef.current?.contains(target) || menuRef.current?.contains(target)) {
-        return;
+      if (dropdownRef.current && !dropdownRef.current.contains(target)) {
+        setIsDropdownOpen(false);
      }
-      setIsDropdownOpen(false);
    };

-    // The menu is fixed-positioned; close it if the page scrolls so it can't
-    // detach from the trigger.
-    const closeOnScroll = () => setIsDropdownOpen(false);
-
    window.addEventListener('mousedown', closeOnOutsideClick);
-    window.addEventListener('scroll', closeOnScroll, true);
-    window.addEventListener('resize', closeOnScroll);
    return () => {
      window.removeEventListener('mousedown', closeOnOutsideClick);
-      window.removeEventListener('scroll', closeOnScroll, true);
-      window.removeEventListener('resize', closeOnScroll);
    };
  }, [isDropdownOpen]);

@@ -205,9 +170,8 @@ const MessageCopyControl = ({
      {canSelectCopyFormat && (
        <>
          <button
-            ref={triggerRef}
            type="button"
-            onClick={() => (isDropdownOpen ? setIsDropdownOpen(false) : openDropdown())}
+            onClick={() => setIsDropdownOpen((prev) => !prev)}
            className={`rounded px-1 py-0.5 transition-colors ${toneClass}`}
            aria-label={t('copyMessage.selectFormat', { defaultValue: 'Select copy format' })}
            title={t('copyMessage.selectFormat', { defaultValue: 'Select copy format' })}
@@ -222,12 +186,8 @@ const MessageCopyControl = ({
            </svg>
          </button>

-          {isDropdownOpen && createPortal(
-            <div
-              ref={menuRef}
-              style={menuStyle}
-              className="min-w-36 rounded-md border border-border bg-popover p-1 shadow-lg"
-            >
+          {isDropdownOpen && (
+            <div className="absolute left-auto top-full z-30 mt-1 min-w-36 rounded-md border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
              {copyFormatOptions.map((option) => {
                const isSelected = option.format === selectedFormat;
                return (
@@ -236,16 +196,15 @@ const MessageCopyControl = ({
                    type="button"
                    onClick={() => handleFormatChange(option.format)}
                    className={`block w-full rounded px-2 py-1.5 text-left transition-colors ${isSelected
-                      ? 'bg-accent text-foreground'
-                      : 'text-foreground hover:bg-accent'
+                      ? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+                      : 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800/60'
                      }`}
                  >
                    <span className="block text-xs font-medium">{option.label}</span>
                  </button>
                );
              })}
-            </div>,
-            document.body,
+            </div>
          )}
        </>
      )}
--- a/src/components/chat/view/subcomponents/TokenUsageSummary.tsx
+++ b/src/components/chat/view/subcomponents/TokenUsageSummary.tsx
@@ -43,7 +43,7 @@ export default function TokenUsageSummary({ usage, onClick }: TokenUsageSummaryP
    <button
      type="button"
      onClick={onClick}
-      className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-border/70 bg-background/70 px-2 text-xs text-muted-foreground shadow-sm transition-colors hover:border-primary/25 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:gap-2 sm:px-2.5"
+      className="inline-flex h-9 items-center gap-1.5 rounded-lg border border-border/70 bg-background/70 px-2 text-xs text-muted-foreground shadow-sm transition-colors hover:border-primary/25 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:gap-2 sm:px-2.5"
      title={`${usedTokens.toLocaleString()} tokens used`}
      aria-label="Show token usage"
    >
--- a/src/components/chat/view/subcomponents/ToolGroupContainer.tsx
+++ b/src/components/chat/view/subcomponents/ToolGroupContainer.tsx
@@ -22,6 +22,7 @@ interface ToolGroupContainerProps {
  onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
  onShowSettings?: () => void;
  onGrantToolPermission?: (suggestion: ClaudePermissionSuggestion) => PermissionGrantResult | null | undefined;
+  autoExpandTools?: boolean;
  showRawParameters?: boolean;
  showThinking?: boolean;
  selectedProject?: Project | null;
@@ -65,6 +66,7 @@ export default function ToolGroupContainer({
  onFileOpen,
  onShowSettings,
  onGrantToolPermission,
+  autoExpandTools,
  showRawParameters,
  showThinking,
  selectedProject,
@@ -131,6 +133,7 @@ export default function ToolGroupContainer({
              onFileOpen={onFileOpen}
              onShowSettings={onShowSettings}
              onGrantToolPermission={onGrantToolPermission}
+              autoExpandTools={autoExpandTools}
              showRawParameters={showRawParameters}
              showThinking={showThinking}
              selectedProject={selectedProject}
--- a/src/components/code-editor/constants/settings.ts
+++ b/src/components/code-editor/constants/settings.ts
@@ -1,4 +1,5 @@
 export const CODE_EDITOR_STORAGE_KEYS = {
+  theme: 'codeEditorTheme',
  wordWrap: 'codeEditorWordWrap',
  showMinimap: 'codeEditorShowMinimap',
  lineNumbers: 'codeEditorLineNumbers',
@@ -6,6 +7,7 @@ export const CODE_EDITOR_STORAGE_KEYS = {
 } as const;

 export const CODE_EDITOR_DEFAULTS = {
+  isDarkMode: true,
  wordWrap: false,
  minimapEnabled: true,
  showLineNumbers: true,
--- a/src/components/code-editor/hooks/useCodeEditorSettings.ts
+++ b/src/components/code-editor/hooks/useCodeEditorSettings.ts
@@ -5,6 +5,15 @@ import {
  CODE_EDITOR_STORAGE_KEYS,
 } from '../constants/settings';

+const readTheme = () => {
+  const savedTheme = localStorage.getItem(CODE_EDITOR_STORAGE_KEYS.theme);
+  if (!savedTheme) {
+    return CODE_EDITOR_DEFAULTS.isDarkMode;
+  }
+
+  return savedTheme === 'dark';
+};
+
 const readBoolean = (storageKey: string, defaultValue: boolean, falseValue = 'false') => {
  const value = localStorage.getItem(storageKey);
  if (value === null) {
@@ -24,6 +33,7 @@ const readFontSize = () => {
 };

 export const useCodeEditorSettings = () => {
+  const [isDarkMode, setIsDarkMode] = useState(readTheme);
  const [wordWrap, setWordWrap] = useState(readWordWrap);
  const [minimapEnabled, setMinimapEnabled] = useState(() => (
    readBoolean(CODE_EDITOR_STORAGE_KEYS.showMinimap, CODE_EDITOR_DEFAULTS.minimapEnabled)
@@ -33,13 +43,18 @@ export const useCodeEditorSettings = () => {
  ));
  const [fontSize, setFontSize] = useState(readFontSize);

-  // Keep legacy behavior where the editor writes wrap settings directly.
+  // Keep legacy behavior where the editor writes theme and wrap settings directly.
+  useEffect(() => {
+    localStorage.setItem(CODE_EDITOR_STORAGE_KEYS.theme, isDarkMode ? 'dark' : 'light');
+  }, [isDarkMode]);
+
  useEffect(() => {
    localStorage.setItem(CODE_EDITOR_STORAGE_KEYS.wordWrap, String(wordWrap));
  }, [wordWrap]);

  useEffect(() => {
    const refreshFromStorage = () => {
+      setIsDarkMode(readTheme());
      setWordWrap(readWordWrap());
      setMinimapEnabled(readBoolean(CODE_EDITOR_STORAGE_KEYS.showMinimap, CODE_EDITOR_DEFAULTS.minimapEnabled));
      setShowLineNumbers(readBoolean(CODE_EDITOR_STORAGE_KEYS.lineNumbers, CODE_EDITOR_DEFAULTS.showLineNumbers));
@@ -56,6 +71,8 @@ export const useCodeEditorSettings = () => {
  }, []);

  return {
+    isDarkMode,
+    setIsDarkMode,
    wordWrap,
    setWordWrap,
    minimapEnabled,
--- a/src/components/code-editor/view/CodeEditor.tsx
+++ b/src/components/code-editor/view/CodeEditor.tsx
@@ -5,7 +5,6 @@ import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

 import { usePaletteOps } from '../../../contexts/PaletteOpsContext';
-import { useTheme } from '../../../contexts/ThemeContext';
 import { useCodeEditorDocument } from '../hooks/useCodeEditorDocument';
 import { useCodeEditorSettings } from '../hooks/useCodeEditorSettings';
 import { useEditorKeyboardShortcuts } from '../hooks/useEditorKeyboardShortcuts';
@@ -46,10 +45,8 @@ export default function CodeEditor({
  const [showDiff, setShowDiff] = useState(Boolean(file.diffInfo));
  const [markdownPreview, setMarkdownPreview] = useState(false);

-  // The code editor follows the app-wide theme; it has no theme of its own.
-  const { isDarkMode } = useTheme();
-
  const {
+    isDarkMode,
    wordWrap,
    minimapEnabled,
    showLineNumbers,
--- a/src/components/code-editor/view/subcomponents/markdown/MarkdownCodeBlock.tsx
+++ b/src/components/code-editor/view/subcomponents/markdown/MarkdownCodeBlock.tsx
@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import type { ComponentProps } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark as prismOneDark, oneLight as prismOneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark as prismOneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { copyTextToClipboard } from '../../../../../utils/clipboard';
-import { useTheme } from '../../../../../contexts/ThemeContext';

 type MarkdownCodeBlockProps = {
  inline?: boolean;
@@ -17,7 +16,6 @@ export default function MarkdownCodeBlock({
  node: _node,
  ...props
 }: MarkdownCodeBlockProps) {
-  const { isDarkMode } = useTheme();
  const [copied, setCopied] = useState(false);
  const rawContent = Array.isArray(children) ? children.join('') : String(children ?? '');
  const looksMultiline = /[\r\n]/.test(rawContent);
@@ -52,22 +50,20 @@ export default function MarkdownCodeBlock({
              setTimeout(() => setCopied(false), 2000);
            }
          })}
-        className="absolute right-2 top-2 z-10 rounded-md border border-border bg-card/90 px-2 py-1 text-xs text-foreground/80 opacity-0 transition-opacity hover:bg-muted group-hover:opacity-100"
+        className="absolute right-2 top-2 z-10 rounded-md border border-gray-600 bg-gray-700/80 px-2 py-1 text-xs text-white opacity-0 transition-opacity hover:bg-gray-700 group-hover:opacity-100"
      >
        {copied ? 'Copied!' : 'Copy'}
      </button>

      <SyntaxHighlighter
        language={language}
-        style={isDarkMode ? prismOneDark : prismOneLight}
+        style={prismOneDark}
        customStyle={{
          margin: 0,
-          borderRadius: '0.75rem',
+          borderRadius: '0.5rem',
          fontSize: '0.875rem',
          padding: language !== 'text' ? '2rem 1rem 1rem 1rem' : '1rem',
-          ...(isDarkMode ? {} : { background: 'hsl(var(--muted))' }),
        }}
-        codeTagProps={{ style: isDarkMode ? {} : { background: 'transparent' } }}
      >
        {rawContent}
      </SyntaxHighlighter>
--- a/src/components/code-editor/view/subcomponents/markdown/MarkdownPreview.tsx
+++ b/src/components/code-editor/view/subcomponents/markdown/MarkdownPreview.tsx
@@ -12,9 +12,6 @@ type MarkdownPreviewProps = {

 const markdownPreviewComponents: Components = {
  code: MarkdownCodeBlock,
-  // MarkdownCodeBlock renders its own highlighted <pre>; passthrough prevents a
-  // second Typography-styled <pre> shell from framing it.
-  pre: ({ children }) => <>{children}</>,
  blockquote: ({ children }) => (
    <blockquote className="my-2 border-l-4 border-gray-300 pl-4 italic text-gray-600 dark:border-gray-600 dark:text-gray-400">
      {children}
--- a/src/components/git-panel/view/GitPanelHeader.tsx
+++ b/src/components/git-panel/view/GitPanelHeader.tsx
@@ -189,7 +189,7 @@ export default function GitPanelHeader({
                <button
                  onClick={requestPublishConfirmation}
                  disabled={anyPending}
-                  className="flex items-center gap-1 rounded-lg bg-primary px-2.5 py-1 text-sm text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+                  className="flex items-center gap-1 rounded-lg bg-purple-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-purple-700 disabled:opacity-50"
                  title={`Publish "${currentBranch}" to ${remoteName}`}
                >
                  <Upload className={`h-3 w-3 ${isPublishing ? 'animate-pulse' : ''}`} />
--- a/src/components/main-content/view/MainContent.tsx
+++ b/src/components/main-content/view/MainContent.tsx
@@ -54,7 +54,7 @@ function MainContent({
  newSessionTrigger,
 }: MainContentProps) {
  const { preferences } = useUiPreferences();
-  const { showRawParameters, showThinking, sendByCtrlEnter } = preferences;
+  const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter } = preferences;

  const { currentProject, setCurrentProject } = useTaskMaster() as TaskMasterContextValue;
  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings() as TasksSettingsContextValue;
@@ -170,8 +170,10 @@ function MainContent({
                onNavigateToSession={onNavigateToSession}
                onSessionEstablished={onSessionEstablished}
                onShowSettings={onShowSettings}
+                autoExpandTools={autoExpandTools}
                showRawParameters={showRawParameters}
                showThinking={showThinking}
+                autoScrollToBottom={autoScrollToBottom}
                sendByCtrlEnter={sendByCtrlEnter}
                externalMessageUpdate={externalMessageUpdate}
                newSessionTrigger={newSessionTrigger}
--- a/src/components/main-content/view/subcomponents/MainContentTitle.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTitle.tsx
@@ -70,7 +70,7 @@ export default function MainContentTitle({
      <div className="min-w-0 flex-1">
        {activeTab === 'chat' && selectedSession ? (
          <div className="min-w-0">
-            <h2 className="truncate text-sm font-semibold leading-tight text-foreground">
+            <h2 className="scrollbar-hide overflow-x-auto whitespace-nowrap text-sm font-semibold leading-tight text-foreground">
              {getSessionTitle(selectedSession)}
            </h2>
            <div className="truncate text-[11px] leading-tight text-muted-foreground">{selectedProject.displayName}</div>
--- a/src/components/mcp/constants.ts
+++ b/src/components/mcp/constants.ts
@@ -29,11 +29,11 @@ export const MCP_GLOBAL_SUPPORTED_SCOPES: McpScope[] = ['user', 'project'];
 export const MCP_GLOBAL_SUPPORTED_TRANSPORTS: McpTransport[] = ['stdio', 'http'];

 export const MCP_PROVIDER_BUTTON_CLASSES: Record<McpProvider, string> = {
-  claude: 'bg-primary text-primary-foreground hover:bg-primary/90',
-  cursor: 'bg-primary text-primary-foreground hover:bg-primary/90',
-  codex: 'bg-primary text-primary-foreground hover:bg-primary/90',
-  gemini: 'bg-primary text-primary-foreground hover:bg-primary/90',
-  opencode: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  claude: 'bg-purple-600 text-white hover:bg-purple-700',
+  cursor: 'bg-purple-600 text-white hover:bg-purple-700',
+  codex: 'bg-gray-800 text-white hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600',
+  gemini: 'bg-blue-600 text-white hover:bg-blue-700',
+  opencode: 'bg-zinc-900 text-white hover:bg-zinc-800 dark:bg-zinc-700 dark:hover:bg-zinc-600',
 };

 export const MCP_SUPPORTS_WORKING_DIRECTORY: Record<McpProvider, boolean> = {
--- a/src/components/mcp/view/McpServers.tsx
+++ b/src/components/mcp/view/McpServers.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';

 import type { McpProject, McpProvider, McpScope, ProviderMcpServer } from '../types';
 import { IS_PLATFORM } from '../../../constants/config';
-import { Badge, Button } from '../../../shared/view/ui';
+import { ActionMenu, Badge, Button } from '../../../shared/view/ui';
 import {
  MCP_GLOBAL_SUPPORTED_SCOPES,
  MCP_GLOBAL_SUPPORTED_TRANSPORTS,
@@ -134,33 +134,39 @@ export default function McpServers({ selectedProvider, currentProjects }: McpSer

  return (
    <div className="space-y-4">
-      <div className="flex items-center gap-3">
-        <Server className="h-5 w-5 text-primary" />
-        <h3 className="text-lg font-medium text-foreground">{t('mcpServers.title')}</h3>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 items-start gap-3">
+          <Server className="mt-0.5 h-5 w-5 flex-shrink-0 text-purple-500" />
+          <div className="min-w-0 space-y-1">
+            <h3 className="text-lg font-medium text-foreground">{t('mcpServers.title')}</h3>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+        <ActionMenu
+          label="Add MCP Server"
+          icon={Plus}
+          className="w-full sm:w-auto"
+          triggerClassName={`w-full sm:w-auto ${MCP_PROVIDER_BUTTON_CLASSES[selectedProvider]}`}
+          items={[
+            {
+              key: 'global',
+              label: globalButtonLabel,
+              description: globalAddDescription,
+              icon: Globe,
+              onSelect: openGlobalForm,
+            },
+            {
+              key: 'provider',
+              label: providerButtonLabel,
+              description: providerAddDescription,
+              icon: Server,
+              onSelect: () => openForm(),
+            },
+          ]}
+        />
      </div>
-      <p className="text-sm text-muted-foreground">{description}</p>

      <div className="space-y-2">
-        <div className="flex flex-wrap items-center gap-2">
-          <Button
-            onClick={openGlobalForm}
-            className={MCP_PROVIDER_BUTTON_CLASSES[selectedProvider]}
-            size="sm"
-            title={globalAddDescription}
-          >
-            <Plus className="mr-2 h-4 w-4" />
-            {globalButtonLabel}
-          </Button>
-          <Button
-            onClick={() => openForm()}
-            variant="outline"
-            size="sm"
-            title={providerAddDescription}
-          >
-            <Plus className="mr-2 h-4 w-4" />
-            {providerButtonLabel}
-          </Button>
-        </div>
        <div className="min-h-4">
          {saveStatus === 'success' && (
            <span className="animate-in fade-in text-xs text-muted-foreground">{t('saveStatus.success')}</span>
--- a/src/components/mcp/view/modals/McpServerFormModal.tsx
+++ b/src/components/mcp/view/modals/McpServerFormModal.tsx
@@ -1,5 +1,4 @@
 import { FolderOpen, Globe, X } from 'lucide-react';
-import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';

 import { Button, Input } from '../../../../shared/view/ui';
@@ -120,8 +119,8 @@ export default function McpServerFormModal({
  const supportsWorkingDirectory = !isGlobalMode && MCP_SUPPORTS_WORKING_DIRECTORY[provider];
  const showCodexOnlyFields = provider === 'codex' && !isGlobalMode;

-  return createPortal(
-    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 p-4">
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/50 p-4">
      <div className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg border border-border bg-background">
        <div className="flex items-center justify-between border-b border-border p-4">
          <h3 className="text-lg font-medium text-foreground">{modalTitle}</h3>
@@ -419,7 +418,7 @@ export default function McpServerFormModal({
            <Button
              type="submit"
              disabled={isSubmitting || !canSubmit}
-              className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+              className="bg-purple-600 text-white hover:bg-purple-700 disabled:opacity-50"
            >
              {isSubmitting
                ? t('mcpForm.actions.saving')
@@ -430,7 +429,6 @@ export default function McpServerFormModal({
          </div>
        </form>
      </div>
-    </div>,
-    document.body,
+    </div>
  );
 }
--- a/src/components/onboarding/view/Onboarding.tsx
+++ b/src/components/onboarding/view/Onboarding.tsx
@@ -148,18 +148,11 @@ export default function Onboarding({ onComplete }: OnboardingProps) {

  return (
    <>
-      <div className="relative h-screen overflow-y-auto bg-background">
-        <div aria-hidden className="pointer-events-none fixed inset-0">
-          <div className="absolute -top-40 left-1/2 h-[36rem] w-[36rem] -translate-x-1/2 rounded-full bg-primary/10 blur-3xl" />
-          <div className="absolute -bottom-32 -left-24 h-[26rem] w-[26rem] rounded-full bg-primary/5 blur-3xl" />
-          <div className="absolute inset-0 bg-[radial-gradient(hsl(var(--foreground)/0.04)_1px,transparent_1px)] [background-size:22px_22px] opacity-60" />
-        </div>
-
-        <div className="relative mx-auto flex min-h-full w-full max-w-2xl items-center justify-center p-4">
-          <div className="w-full py-6">
+      <div className="flex min-h-screen items-center justify-center bg-background p-4">
+        <div className="w-full max-w-2xl">
          <OnboardingStepProgress currentStep={currentStep} />

-          <div className="rounded-2xl border border-border/70 bg-card/90 p-6 shadow-[0_24px_60px_-20px_hsl(var(--foreground)/0.18)] ring-1 ring-foreground/5 backdrop-blur-xl">
+          <div className="rounded-lg border border-border bg-card p-8 shadow-lg">
            {currentStep === 0 ? (
              <GitConfigurationStep
                gitName={gitName}
@@ -176,12 +169,12 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
            )}

            {errorMessage && (
-              <div className="mt-5 rounded-xl border border-destructive/30 bg-destructive/10 p-3.5">
-                <p className="text-sm text-destructive">{errorMessage}</p>
+              <div className="mt-6 rounded-lg border border-red-300 bg-red-100 p-4 dark:border-red-800 dark:bg-red-900/20">
+                <p className="text-sm text-red-700 dark:text-red-400">{errorMessage}</p>
              </div>
            )}

-            <div className="mt-6 flex items-center justify-between border-t border-border pt-5">
+            <div className="mt-8 flex items-center justify-between border-t border-border pt-6">
              <button
                onClick={handlePreviousStep}
                disabled={currentStep === 0 || isSubmitting}
@@ -196,7 +189,7 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
                  <button
                    onClick={handleNextStep}
                    disabled={!isCurrentStepValid || isSubmitting}
-                    className="flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 font-medium text-primary-foreground shadow-lg shadow-primary/25 transition-all duration-200 hover:brightness-110 active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none"
+                    className="flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-400"
                  >
                    {isSubmitting ? (
                      <>
@@ -214,7 +207,7 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
                  <button
                    onClick={handleFinish}
                    disabled={isSubmitting}
-                    className="flex items-center gap-2 rounded-xl bg-emerald-600 px-6 py-2.5 font-medium text-white shadow-lg shadow-emerald-600/25 transition-all duration-200 hover:bg-emerald-700 active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none"
+                    className="flex items-center gap-2 rounded-lg bg-green-600 px-6 py-3 font-medium text-white transition-colors duration-200 hover:bg-green-700 disabled:cursor-not-allowed disabled:bg-green-400"
                  >
                    {isSubmitting ? (
                      <>
@@ -232,7 +225,6 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
              </div>
            </div>
          </div>
-          </div>
        </div>
      </div>

--- a/src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx
+++ b/src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx
@@ -31,26 +31,26 @@ export default function AgentConnectionCard({
      : status.error || 'Not connected';

  return (
-    <div className={`rounded-xl border px-3 py-2.5 transition-colors ${containerClassName}`}>
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex min-w-0 items-center gap-3">
-          <div className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full ${iconContainerClassName}`}>
+    <div className={`rounded-lg border p-4 transition-colors ${containerClassName}`}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className={`flex h-10 w-10 items-center justify-center rounded-full ${iconContainerClassName}`}>
            <SessionProviderLogo provider={provider} className="h-5 w-5" />
          </div>

-          <div className="min-w-0">
-            <div className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+          <div>
+            <div className="flex items-center gap-2 font-medium text-foreground">
              {title}
-              {status.authenticated && <Check className="h-3.5 w-3.5 flex-shrink-0 text-emerald-500" />}
+              {status.authenticated && <Check className="h-4 w-4 text-green-500" />}
            </div>
-            <div className="truncate text-xs text-muted-foreground">{statusText}</div>
+            <div className="text-xs text-muted-foreground">{statusText}</div>
          </div>
        </div>

        {!status.authenticated && !status.loading && (
          <button
            onClick={onLogin}
-            className={`${loginButtonClassName} flex-shrink-0 rounded-lg px-4 py-1.5 text-sm font-medium text-white transition-colors`}
+            className={`${loginButtonClassName} rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors`}
          >
            Login
          </button>
--- a/src/components/onboarding/view/subcomponents/AgentConnectionsStep.tsx
+++ b/src/components/onboarding/view/subcomponents/AgentConnectionsStep.tsx
@@ -51,15 +51,15 @@ export default function AgentConnectionsStep({
  onOpenProviderLogin,
 }: AgentConnectionsStepProps) {
  return (
-    <div className="space-y-4">
-      <div className="text-center">
-        <h2 className="font-serif text-xl font-bold tracking-tight text-foreground">Connect Your AI Agents</h2>
-        <p className="mx-auto mt-1 max-w-sm text-sm leading-relaxed text-muted-foreground">
+    <div className="space-y-6">
+      <div className="mb-6 text-center">
+        <h2 className="mb-2 text-2xl font-bold text-foreground">Connect Your AI Agents</h2>
+        <p className="text-muted-foreground">
          Login to one or more AI coding assistants. All are optional.
        </p>
      </div>

-      <div className="-mr-1 max-h-[38vh] space-y-2 overflow-y-auto pr-1">
+      <div className="space-y-3">
        {providerCards.map((providerCard) => (
          <AgentConnectionCard
            key={providerCard.provider}
@@ -74,7 +74,9 @@ export default function AgentConnectionsStep({
        ))}
      </div>

-      <p className="text-center text-xs text-muted-foreground">You can configure these later in Settings.</p>
+      <div className="pt-2 text-center text-sm text-muted-foreground">
+        <p>You can configure these later in Settings.</p>
+      </div>
    </div>
  );
 }
--- a/src/components/onboarding/view/subcomponents/GitConfigurationStep.tsx
+++ b/src/components/onboarding/view/subcomponents/GitConfigurationStep.tsx
@@ -16,13 +16,13 @@ export default function GitConfigurationStep({
  onGitEmailChange,
 }: GitConfigurationStepProps) {
  return (
-    <div className="space-y-5">
-      <div className="text-center">
-        <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 ring-1 ring-inset ring-primary/20">
-          <GitBranch className="h-7 w-7 text-primary" />
+    <div className="space-y-6">
+      <div className="mb-8 text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
+          <GitBranch className="h-8 w-8 text-blue-600 dark:text-blue-400" />
        </div>
-        <h2 className="font-serif text-xl font-bold tracking-tight text-foreground">Git Configuration</h2>
-        <p className="mx-auto mt-1 max-w-sm text-sm leading-relaxed text-muted-foreground">
+        <h2 className="mb-2 text-2xl font-bold text-foreground">Git Configuration</h2>
+        <p className="text-muted-foreground">
          Configure your git identity to ensure proper attribution for commits.
        </p>
      </div>
@@ -38,7 +38,7 @@ export default function GitConfigurationStep({
            id="gitName"
            value={gitName}
            onChange={(event) => onGitNameChange(event.target.value)}
-            className="w-full rounded-xl border border-border bg-background/60 px-4 py-2.5 text-foreground shadow-sm transition-colors placeholder:text-muted-foreground/60 hover:border-foreground/20 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30"
+            className="w-full rounded-lg border border-border bg-background px-4 py-3 text-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="John Doe"
            required
            disabled={isSubmitting}
@@ -56,7 +56,7 @@ export default function GitConfigurationStep({
            id="gitEmail"
            value={gitEmail}
            onChange={(event) => onGitEmailChange(event.target.value)}
-            className="w-full rounded-xl border border-border bg-background/60 px-4 py-2.5 text-foreground shadow-sm transition-colors placeholder:text-muted-foreground/60 hover:border-foreground/20 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30"
+            className="w-full rounded-lg border border-border bg-background px-4 py-3 text-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="john@example.com"
            required
            disabled={isSubmitting}
--- a/src/components/onboarding/view/subcomponents/OnboardingStepProgress.tsx
+++ b/src/components/onboarding/view/subcomponents/OnboardingStepProgress.tsx
@@ -11,7 +11,7 @@ const onboardingSteps = [

 export default function OnboardingStepProgress({ currentStep }: OnboardingStepProgressProps) {
  return (
-    <div className="mb-5">
+    <div className="mb-8">
      <div className="flex items-center justify-between">
        {onboardingSteps.map((step, index) => {
          const isCompleted = index < currentStep;
@@ -22,18 +22,18 @@ export default function OnboardingStepProgress({ currentStep }: OnboardingStepPr
            <div key={step.title} className="contents">
              <div className="flex flex-1 flex-col items-center">
                <div
-                  className={`flex h-10 w-10 items-center justify-center rounded-full border-2 transition-all duration-200 ${
+                  className={`flex h-12 w-12 items-center justify-center rounded-full border-2 transition-colors duration-200 ${
                    isCompleted
-                      ? 'border-emerald-500 bg-emerald-500 text-white shadow-lg shadow-emerald-500/25'
+                      ? 'border-green-500 bg-green-500 text-white'
                      : isActive
-                        ? 'border-primary bg-primary text-primary-foreground shadow-lg shadow-primary/25'
-                        : 'border-border bg-card text-muted-foreground'
+                        ? 'border-blue-600 bg-blue-600 text-white'
+                        : 'border-border bg-background text-muted-foreground'
                  }`}
                >
-                  {isCompleted ? <Check className="h-5 w-5" /> : <Icon className="h-5 w-5" />}
+                  {isCompleted ? <Check className="h-6 w-6" /> : <Icon className="h-6 w-6" />}
                </div>

-                <div className="mt-1.5 text-center">
+                <div className="mt-2 text-center">
                  <p className={`text-sm font-medium ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}>
                    {step.title}
                  </p>
@@ -42,7 +42,7 @@ export default function OnboardingStepProgress({ currentStep }: OnboardingStepPr
              </div>

              {index < onboardingSteps.length - 1 && (
-                <div className={`mx-2 h-0.5 flex-1 transition-colors duration-200 ${isCompleted ? 'bg-emerald-500' : 'bg-border'}`} />
+                <div className={`mx-2 h-0.5 flex-1 transition-colors duration-200 ${isCompleted ? 'bg-green-500' : 'bg-border'}`} />
              )}
            </div>
          );
--- a/src/components/quick-settings-panel/constants.ts
+++ b/src/components/quick-settings-panel/constants.ts
@@ -1,10 +1,11 @@
 import {
+  ArrowDown,
  Brain,
  Eye,
  Languages,
+  Maximize2,
  Mic,
 } from 'lucide-react';
-
 import type { PreferenceToggleItem } from './types';

 export const HANDLE_POSITION_STORAGE_KEY = 'quickSettingsHandlePosition';
@@ -15,7 +16,7 @@ export const HANDLE_POSITION_MAX = 90;
 export const DRAG_THRESHOLD_PX = 5;

 export const SETTING_ROW_CLASS =
-  'flex items-center justify-between p-3 rounded-lg bg-muted/60 hover:bg-accent transition-colors border border-transparent hover:border-border';
+  'flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600';

 export const TOGGLE_ROW_CLASS = `${SETTING_ROW_CLASS} cursor-pointer`;

@@ -23,6 +24,11 @@ export const CHECKBOX_CLASS =
  'h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600';

 export const TOOL_DISPLAY_TOGGLES: PreferenceToggleItem[] = [
+  {
+    key: 'autoExpandTools',
+    labelKey: 'quickSettings.autoExpandTools',
+    icon: Maximize2,
+  },
  {
    key: 'showRawParameters',
    labelKey: 'quickSettings.showRawParameters',
@@ -35,6 +41,14 @@ export const TOOL_DISPLAY_TOGGLES: PreferenceToggleItem[] = [
  },
 ];

+export const VIEW_OPTION_TOGGLES: PreferenceToggleItem[] = [
+  {
+    key: 'autoScrollToBottom',
+    labelKey: 'quickSettings.autoScrollToBottom',
+    icon: ArrowDown,
+  },
+];
+
 export const INPUT_SETTING_TOGGLES: PreferenceToggleItem[] = [
  {
    key: 'sendByCtrlEnter',
--- a/src/components/quick-settings-panel/types.ts
+++ b/src/components/quick-settings-panel/types.ts
@@ -2,8 +2,10 @@ import type { CSSProperties } from 'react';
 import type { LucideIcon } from 'lucide-react';

 export type PreferenceToggleKey =
+  | 'autoExpandTools'
  | 'showRawParameters'
  | 'showThinking'
+  | 'autoScrollToBottom'
  | 'sendByCtrlEnter'
  | 'voiceEnabled';

--- a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
@@ -1,19 +1,18 @@
 import { Moon, Sun } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-
 import { DarkModeToggle } from '../../../shared/view/ui';
 import LanguageSelector from '../../../shared/view/ui/LanguageSelector';
 import {
  INPUT_SETTING_TOGGLES,
  SETTING_ROW_CLASS,
  TOOL_DISPLAY_TOGGLES,
+  VIEW_OPTION_TOGGLES,
 } from '../constants';
 import type {
  PreferenceToggleItem,
  PreferenceToggleKey,
  QuickSettingsPreferences,
 } from '../types';
-
 import QuickSettingsSection from './QuickSettingsSection';
 import QuickSettingsToggleRow from './QuickSettingsToggleRow';

@@ -49,11 +48,11 @@ export default function QuickSettingsContent({
    <div className="flex-1 space-y-6 overflow-y-auto overflow-x-hidden bg-background p-4">
      <QuickSettingsSection title={t('quickSettings.sections.appearance')}>
        <div className={SETTING_ROW_CLASS}>
-          <span className="flex items-center gap-2 text-sm text-foreground">
+          <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
            {isDarkMode ? (
-              <Moon className="h-4 w-4 text-muted-foreground" />
+              <Moon className="h-4 w-4 text-gray-600 dark:text-gray-400" />
            ) : (
-              <Sun className="h-4 w-4 text-muted-foreground" />
+              <Sun className="h-4 w-4 text-gray-600 dark:text-gray-400" />
            )}
            {t('quickSettings.darkMode')}
          </span>
@@ -66,9 +65,13 @@ export default function QuickSettingsContent({
        {renderToggleRows(TOOL_DISPLAY_TOGGLES)}
      </QuickSettingsSection>

+      <QuickSettingsSection title={t('quickSettings.sections.viewOptions')}>
+        {renderToggleRows(VIEW_OPTION_TOGGLES)}
+      </QuickSettingsSection>
+
      <QuickSettingsSection title={t('quickSettings.sections.inputSettings')}>
        {renderToggleRows(inputSettingToggles)}
-        <p className="ml-3 text-xs text-muted-foreground">
+        <p className="ml-3 text-xs text-gray-500 dark:text-gray-400">
          {t('quickSettings.sendByCtrlEnterDescription')}
        </p>
      </QuickSettingsSection>
--- a/src/components/quick-settings-panel/view/QuickSettingsPanelHeader.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsPanelHeader.tsx
@@ -5,9 +5,9 @@ export default function QuickSettingsPanelHeader() {
  const { t } = useTranslation('settings');

  return (
-    <div className="border-b border-border bg-muted/40 p-4">
-      <h3 className="flex items-center gap-2 text-lg font-semibold text-foreground">
-        <Settings2 className="h-5 w-5 text-muted-foreground" />
+    <div className="border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900">
+      <h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white">
+        <Settings2 className="h-5 w-5 text-gray-600 dark:text-gray-400" />
        {t('quickSettings.title')}
      </h3>
    </div>
--- a/src/components/quick-settings-panel/view/QuickSettingsPanelView.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsPanelView.tsx
@@ -1,12 +1,10 @@
 import { useCallback, useMemo, useState } from 'react';
 import type { MouseEvent as ReactMouseEvent } from 'react';
-
 import { useDeviceSettings } from '../../../hooks/useDeviceSettings';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { useQuickSettingsDrag } from '../hooks/useQuickSettingsDrag';
 import type { PreferenceToggleKey, QuickSettingsPreferences } from '../types';
-
 import QuickSettingsContent from './QuickSettingsContent';
 import QuickSettingsHandle from './QuickSettingsHandle';
 import QuickSettingsPanelHeader from './QuickSettingsPanelHeader';
@@ -24,11 +22,15 @@ export default function QuickSettingsPanelView() {
  } = useQuickSettingsDrag({ isMobile });

  const quickSettingsPreferences = useMemo<QuickSettingsPreferences>(() => ({
+    autoExpandTools: preferences.autoExpandTools,
    showRawParameters: preferences.showRawParameters,
    showThinking: preferences.showThinking,
+    autoScrollToBottom: preferences.autoScrollToBottom,
    sendByCtrlEnter: preferences.sendByCtrlEnter,
    voiceEnabled: preferences.voiceEnabled,
  }), [
+    preferences.autoExpandTools,
+    preferences.autoScrollToBottom,
    preferences.sendByCtrlEnter,
    preferences.showRawParameters,
    preferences.showThinking,
--- a/src/components/quick-settings-panel/view/QuickSettingsSection.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsSection.tsx
@@ -13,7 +13,7 @@ export default function QuickSettingsSection({
 }: QuickSettingsSectionProps) {
  return (
    <div className={`space-y-2 ${className}`}>
-      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
        {title}
      </h4>
      {children}
--- a/src/components/quick-settings-panel/view/QuickSettingsToggleRow.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsToggleRow.tsx
@@ -17,8 +17,8 @@ function QuickSettingsToggleRow({
 }: QuickSettingsToggleRowProps) {
  return (
    <label className={TOGGLE_ROW_CLASS}>
-      <span className="flex items-center gap-2 text-sm text-foreground">
-        <Icon className="h-4 w-4 text-muted-foreground" />
+      <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
+        <Icon className="h-4 w-4 text-gray-600 dark:text-gray-400" />
        {label}
      </span>
      <input
--- a/src/components/settings/constants/constants.ts
+++ b/src/components/settings/constants/constants.ts
@@ -45,6 +45,7 @@ export const AGENT_CATEGORIES: AgentCategory[] = ['account', 'permissions', 'mcp
 export const DEFAULT_PROJECT_SORT_ORDER: ProjectSortOrder = 'name';
 export const DEFAULT_SAVE_STATUS = null;
 export const DEFAULT_CODE_EDITOR_SETTINGS: CodeEditorSettingsState = {
+  theme: 'dark',
  wordWrap: false,
  showMinimap: true,
  lineNumbers: true,
--- a/src/components/settings/hooks/useSettingsController.ts
+++ b/src/components/settings/hooks/useSettingsController.ts
@@ -86,6 +86,7 @@ const toCodexPermissionMode = (value: unknown): CodexPermissionMode => {
 };

 const readCodeEditorSettings = (): CodeEditorSettingsState => ({
+  theme: localStorage.getItem('codeEditorTheme') === 'light' ? 'light' : 'dark',
  wordWrap: localStorage.getItem('codeEditorWordWrap') === 'true',
  showMinimap: localStorage.getItem('codeEditorShowMinimap') !== 'false',
  lineNumbers: localStorage.getItem('codeEditorLineNumbers') !== 'false',
@@ -329,6 +330,7 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl
  }, [notificationPreferences.channels.sound]);

  useEffect(() => {
+    localStorage.setItem('codeEditorTheme', codeEditorSettings.theme);
    localStorage.setItem('codeEditorWordWrap', String(codeEditorSettings.wordWrap));
    localStorage.setItem('codeEditorShowMinimap', String(codeEditorSettings.showMinimap));
    localStorage.setItem('codeEditorLineNumbers', String(codeEditorSettings.lineNumbers));
--- a/src/components/settings/types/types.ts
+++ b/src/components/settings/types/types.ts
@@ -47,6 +47,7 @@ export type CursorPermissionsState = {
 };

 export type CodeEditorSettingsState = {
+  theme: 'dark' | 'light';
  wordWrap: boolean;
  showMinimap: boolean;
  lineNumbers: boolean;
--- a/src/components/settings/view/Settings.tsx
+++ b/src/components/settings/view/Settings.tsx
@@ -168,6 +168,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
                  projectSortOrder={projectSortOrder}
                  onProjectSortOrderChange={setProjectSortOrder}
                  codeEditorSettings={codeEditorSettings}
+                  onCodeEditorThemeChange={(value) => updateCodeEditorSetting('theme', value)}
                  onCodeEditorWordWrapChange={(value) => updateCodeEditorSetting('wordWrap', value)}
                  onCodeEditorShowMinimapChange={(value) => updateCodeEditorSetting('showMinimap', value)}
                  onCodeEditorLineNumbersChange={(value) => updateCodeEditorSetting('lineNumbers', value)}
--- a/src/components/settings/view/tabs/AppearanceSettingsTab.tsx
+++ b/src/components/settings/view/tabs/AppearanceSettingsTab.tsx
@@ -11,6 +11,7 @@ type AppearanceSettingsTabProps = {
  projectSortOrder: ProjectSortOrder;
  onProjectSortOrderChange: (value: ProjectSortOrder) => void;
  codeEditorSettings: CodeEditorSettingsState;
+  onCodeEditorThemeChange: (value: 'dark' | 'light') => void;
  onCodeEditorWordWrapChange: (value: boolean) => void;
  onCodeEditorShowMinimapChange: (value: boolean) => void;
  onCodeEditorLineNumbersChange: (value: boolean) => void;
@@ -21,6 +22,7 @@ export default function AppearanceSettingsTab({
  projectSortOrder,
  onProjectSortOrderChange,
  codeEditorSettings,
+  onCodeEditorThemeChange,
  onCodeEditorWordWrapChange,
  onCodeEditorShowMinimapChange,
  onCodeEditorLineNumbersChange,
@@ -67,6 +69,17 @@ export default function AppearanceSettingsTab({

      <SettingsSection title={t('appearanceSettings.codeEditor.title')}>
        <SettingsCard divided>
+          <SettingsRow
+            label={t('appearanceSettings.codeEditor.theme.label')}
+            description={t('appearanceSettings.codeEditor.theme.description')}
+          >
+            <DarkModeToggle
+              checked={codeEditorSettings.theme === 'dark'}
+              onToggle={(enabled) => onCodeEditorThemeChange(enabled ? 'dark' : 'light')}
+              ariaLabel={t('appearanceSettings.codeEditor.theme.label')}
+            />
+          </SettingsRow>
+
          <SettingsRow
            label={t('appearanceSettings.codeEditor.wordWrap.label')}
            description={t('appearanceSettings.codeEditor.wordWrap.description')}
--- a/src/components/shell/view/Shell.tsx
+++ b/src/components/shell/view/Shell.tsx
@@ -310,7 +310,7 @@ export default function Shell({

        {cliPromptOptions && isConnected && (
          <div
-            className="absolute inset-x-0 bottom-0 z-10 border-t border-gray-700/80 bg-gray-800/95 px-3 py-2 backdrop-blur-sm md:hidden"
+            className="absolute inset-x-0 bottom-0 z-10 border-t border-gray-700/80 bg-gray-800/95 px-3 py-2 backdrop-blur-sm"
            onMouseDown={(e) => e.preventDefault()}
          >
            <div className="flex flex-wrap items-center gap-2">
--- a/src/components/skills/view/ProviderSkills.tsx
+++ b/src/components/skills/view/ProviderSkills.tsx
@@ -7,6 +7,7 @@ import {
  FileUp,
  FolderUp,
  Loader2,
+  Plus,
  RefreshCw,
  Search,
  Upload,
@@ -18,11 +19,9 @@ import { cn } from '../../../lib/utils';
 import {
  Badge,
  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogTitle,
  Input,
 } from '../../../shared/view/ui';
 import { useProviderSkills } from '../hooks/useProviderSkills';
@@ -215,7 +214,10 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
  const [queuedFiles, setQueuedFiles] = useState<QueuedSkillFile[]>([]);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [justInstalled, setJustInstalled] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const [showInstallPath, setShowInstallPath] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const folderInputRef = useRef<HTMLInputElement>(null);

@@ -227,6 +229,9 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
    setSubmitError(null);
    setIsSubmitting(false);
    setSearchQuery('');
+    setIsAddDialogOpen(false);
+    setShowInstallPath(false);
+    setJustInstalled(false);
  }, [selectedProvider]);

  useEffect(() => {
@@ -354,6 +359,8 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
      })));
      await addSkills({ entries });
      setQueuedFiles([]);
+      setJustInstalled(true);
+      setIsAddDialogOpen(false);
    } catch (error) {
      setSubmitError(error instanceof Error ? error.message : 'Failed to import skills');
    } finally {
@@ -361,294 +368,381 @@ export default function ProviderSkills({ selectedProvider, currentProjects }: Pr
    }
  }, [addSkills, queuedFiles]);

-  return (
-    <div className="min-w-0 space-y-4 overflow-x-hidden">
-      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
-        <div className="flex min-w-0 items-start gap-3">
-          <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
-            <FileCode2 className="h-4 w-4" strokeWidth={1.7} />
+  const handleAddDialogOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      setSubmitError(null);
+      setShowInstallPath(false);
+      setJustInstalled(false);
+      setIsAddDialogOpen(true);
+      return;
+    }
+
+    setQueuedFiles([]);
+    setSubmitError(null);
+    setShowInstallPath(false);
+    setJustInstalled(false);
+    setIsAddDialogOpen(false);
+  }, []);
+
+  const uploadPanel = (
+    <div className="space-y-4">
+      <div
+        {...getRootProps()}
+        className={cn(
+          'rounded-lg border border-dashed p-4 transition-colors sm:p-5',
+          isDragActive
+            ? 'border-foreground/40 bg-muted/35'
+            : 'border-border/70 bg-muted/15 hover:border-foreground/25 hover:bg-muted/25',
+        )}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".md,text/markdown"
+          multiple
+          className="hidden"
+          onChange={(event) => {
+            handleDrop(Array.from(event.target.files ?? []));
+            event.target.value = '';
+          }}
+        />
+        <input
+          ref={folderInputRef}
+          type="file"
+          multiple
+          className="hidden"
+          onChange={(event) => {
+            handleFolderSelection(Array.from(event.target.files ?? []));
+            event.target.value = '';
+          }}
+        />
+        <div className="flex flex-col items-center justify-center gap-3 py-4 text-center">
+          <FileUp className="h-7 w-7 text-muted-foreground" strokeWidth={1.5} />
+          <div className="space-y-1">
+            <div className="text-sm font-medium text-foreground">Drop a skill folder or SKILL.md</div>
+            <div className="text-sm text-muted-foreground">
+              Folders can include scripts, references, and assets.
+            </div>
          </div>
-          <div className="min-w-0 space-y-1">
-            <h3 className="text-lg font-medium text-foreground">{t('tabs.skills', { defaultValue: 'Skills' })}</h3>
-            <p className="text-sm text-muted-foreground">
-              Install global {providerName} skills from `.md` files or complete skill folders.
-            </p>
+          <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => fileInputRef.current?.click()}
+              className="w-full sm:w-auto"
+            >
+              <FileUp className="h-4 w-4" />
+              Choose Files
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => folderInputRef.current?.click()}
+              className="w-full sm:w-auto"
+            >
+              <FolderUp className="h-4 w-4" />
+              Choose Folder
+            </Button>
          </div>
        </div>
-
-        <Button
-          onClick={() => void refreshSkills({ force: true })}
-          variant="outline"
-          size="sm"
-          className="w-full sm:w-auto"
-          disabled={isLoading || isLoadingProjectScopes}
-        >
-          <RefreshCw className={cn('h-4 w-4', (isLoading || isLoadingProjectScopes) && 'animate-spin')} />
-          Refresh
-        </Button>
      </div>

-      <Card className="min-w-0 overflow-hidden border-border/70 bg-background shadow-sm">
-        <CardHeader className="space-y-3 border-b border-border/60 bg-muted/20">
-          <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
-            <div className="text-sm font-medium text-foreground">Upload Skills</div>
-            <div className="min-w-0 rounded-2xl border border-border/60 bg-background/70 p-3">
-              <div className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Install Path</div>
-              <code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{providerPath}</code>
-            </div>
-          </div>
-        </CardHeader>
-
-        <CardContent className="space-y-4 p-4">
-          <div className="space-y-4">
-            <div
-              {...getRootProps()}
-              className={cn(
-                'rounded-3xl border border-dashed p-4 transition-colors sm:p-5',
-                isDragActive
-                  ? 'border-foreground/40 bg-muted/35'
-                  : 'border-border/70 bg-muted/15 hover:border-foreground/25 hover:bg-muted/25',
-              )}
-            >
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept=".md,text/markdown"
-                multiple
-                className="hidden"
-                onChange={(event) => {
-                  handleDrop(Array.from(event.target.files ?? []));
-                  event.target.value = '';
-                }}
-              />
-              <input
-                ref={folderInputRef}
-                type="file"
-                multiple
-                className="hidden"
-                onChange={(event) => {
-                  handleFolderSelection(Array.from(event.target.files ?? []));
-                  event.target.value = '';
-                }}
-              />
-              <div className="flex flex-col items-center justify-center gap-3 py-4 text-center sm:py-6">
-                <FileUp className="h-7 w-7 text-muted-foreground" strokeWidth={1.5} />
-                <div className="space-y-1">
-                  <div className="text-sm font-medium text-foreground">Drop `.md` files or skill folders here</div>
-                  <div className="text-sm text-muted-foreground">
-                    Upload standalone definitions or choose a full folder to include its scripts, references, and assets.
+      {queuedFiles.length > 0 && (
+        <div className="space-y-2">
+          <div className="text-sm font-medium text-foreground">Ready to install</div>
+          <div className="grid gap-2">
+            {queuedFiles.map((queuedFile) => (
+              <div
+                key={queuedFile.id}
+                className="flex items-center gap-3 rounded-lg border border-border/70 bg-background/70 px-3 py-2"
+              >
+                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground">
+                  {queuedFile.kind === 'folder' ? <FolderUp className="h-4 w-4" /> : <FileText className="h-4 w-4" />}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-sm font-medium text-foreground">{queuedFile.name}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {queuedFile.kind === 'folder'
+                      ? `${queuedFile.files.length} files`
+                      : 'Markdown file'}
+                    {' · '}
+                    {formatFileSize(queuedFile.size)}
                  </div>
                </div>
-                <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => fileInputRef.current?.click()}
-                    className="w-full sm:w-auto"
-                  >
-                    <FileUp className="h-4 w-4" />
-                    Choose Files
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => folderInputRef.current?.click()}
-                    className="w-full sm:w-auto"
-                  >
-                    <FolderUp className="h-4 w-4" />
-                    Choose Folder
-                  </Button>
-                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 flex-shrink-0 p-0 text-muted-foreground hover:text-foreground"
+                  aria-label={`Remove ${queuedFile.name}`}
+                  onClick={() => {
+                    setQueuedFiles((previous) => previous.filter((file) => file.id !== queuedFile.id));
+                  }}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {providerPath && (
+        <div className="space-y-2">
+          <button
+            type="button"
+            className="text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+            onClick={() => setShowInstallPath((current) => !current)}
+          >
+            {showInstallPath ? 'Hide install location' : 'Where will this install?'}
+          </button>
+          {showInstallPath && (
+            <div className="rounded-lg border border-border/60 bg-muted/15 p-3">
+              <code className="block whitespace-normal break-all text-xs text-foreground">{providerPath}</code>
            </div>
+          )}
+        </div>
+      )}

-            {queuedFiles.length > 0 && (
-              <div className="space-y-2">
-                <div className="text-sm font-medium text-foreground">Queued Files</div>
-                <div className="grid gap-2">
-                  {queuedFiles.map((queuedFile) => (
-                    <div
-                      key={queuedFile.id}
-                      className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-background/70 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-2"
-                    >
-                      <div className="min-w-0">
-                        <div className="truncate text-sm font-medium text-foreground">{queuedFile.name}</div>
-                        <div className="text-xs text-muted-foreground">
-                          {queuedFile.kind === 'folder'
-                            ? `${queuedFile.files.length} files`
-                            : 'Markdown file'}
-                          {' · '}
-                          {formatFileSize(queuedFile.size)}
-                        </div>
-                      </div>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="w-full sm:w-auto"
-                        onClick={() => {
-                          setQueuedFiles((previous) => previous.filter((file) => file.id !== queuedFile.id));
-                        }}
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                  ))}
+    </div>
+  );
+
+  return (
+    <div className="min-w-0 space-y-4 overflow-x-hidden">
+      <div className="flex min-w-0 items-start gap-3">
+        <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
+          <FileCode2 className="h-4 w-4" strokeWidth={1.7} />
+        </div>
+        <div className="min-w-0 space-y-1">
+          <h3 className="text-lg font-medium text-foreground">{t('tabs.skills', { defaultValue: 'Skills' })}</h3>
+          <p className="text-sm text-muted-foreground">
+            Manage {providerName} skills from local files, complete folders, and project-aware locations.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          <div className="relative min-w-0 flex-1 sm:max-w-md">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              type="text"
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.target.value)}
+              placeholder="Search skills..."
+              aria-label="Search skills"
+              className="h-9 w-full pl-9 pr-9"
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => setSearchQuery('')}
+                aria-label="Clear skill search"
+                className="absolute right-1.5 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            className="w-full sm:w-auto"
+            onClick={() => handleAddDialogOpenChange(true)}
+          >
+            <Plus className="h-4 w-4" />
+            Add Skill
+          </Button>
+          <Button
+            onClick={() => void refreshSkills({ force: true })}
+            variant="outline"
+            size="sm"
+            className="w-full sm:w-auto"
+            disabled={isLoading || isLoadingProjectScopes}
+          >
+            <RefreshCw className={cn('h-4 w-4', (isLoading || isLoadingProjectScopes) && 'animate-spin')} />
+            Refresh
+          </Button>
+        </div>
+        {isLoadingProjectScopes && (
+          <div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            Scanning project skills...
+          </div>
+        )}
+      </div>
+
+      <Dialog open={isAddDialogOpen} onOpenChange={handleAddDialogOpenChange}>
+        <DialogContent
+          wrapperClassName="z-[10000]"
+          className="flex h-[calc(100vh-2rem)] max-h-[760px] w-[calc(100vw-2rem)] max-w-4xl flex-col overflow-hidden p-0 sm:h-[720px]"
+        >
+          <DialogTitle>Add {providerName} Skill</DialogTitle>
+          <div className="flex-shrink-0 border-b border-border/60 px-4 py-4">
+            <div className="flex items-start gap-3">
+              <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
+                <FileUp className="h-4 w-4" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="text-base font-medium text-foreground">Add {providerName} Skill</div>
+                <div className="mt-1 text-sm text-muted-foreground">
+                  Upload a SKILL.md file or a complete skill folder.
                </div>
              </div>
-            )}
-
-            <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
              <Button
                type="button"
-                onClick={() => void handleUploadInstall()}
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                aria-label="Close add skill dialog"
                disabled={isSubmitting}
-                className="w-full sm:w-auto"
+                onClick={() => handleAddDialogOpenChange(false)}
              >
-                {isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
-                Install {queuedFiles.length > 0 ? `${queuedFiles.length} Skill${queuedFiles.length === 1 ? '' : 's'}` : 'Skills'}
+                <X className="h-4 w-4" />
              </Button>
-              <span className="text-xs text-muted-foreground">
-                Folder uploads keep the selected folder name; standalone files use the `name` in `SKILL.md`.
-              </span>
            </div>
          </div>

-          {(submitError || loadError) && (
-            <div className="rounded-2xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-200">
-              {submitError || loadError}
-            </div>
-          )}
+          <div className="min-h-0 flex-1 overflow-y-auto p-4">
+            {uploadPanel}
+          </div>

-          {saveStatus === 'success' && (
-            <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">
-              <CheckCircle2 className="h-4 w-4" />
-              Skills saved successfully.
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      <Card className="min-w-0 border-border/70 bg-background/80 shadow-sm">
-        <CardHeader className="border-b border-border/60">
-          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-            <div className="min-w-0">
-              <CardTitle>Visible Skills</CardTitle>
-              <CardDescription>
-                The list below comes from the provider skill discovery API and includes global and project-aware locations.
-              </CardDescription>
-            </div>
-            <div className="relative w-full lg:w-72">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                type="text"
-                value={searchQuery}
-                onChange={(event) => setSearchQuery(event.target.value)}
-                placeholder="Search skills..."
-                aria-label="Search visible skills"
-                className="h-9 w-full pl-9 pr-9"
-              />
-              {searchQuery && (
-                <button
-                  type="button"
-                  onClick={() => setSearchQuery('')}
-                  aria-label="Clear skill search"
-                  className="absolute right-1.5 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-                >
-                  <X className="h-3.5 w-3.5" />
-                </button>
+          <div className="flex flex-shrink-0 flex-col gap-3 border-t border-border/60 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="min-w-0 flex-1">
+              {(submitError || loadError || (justInstalled && saveStatus === 'success')) ? (
+                <div className={cn(
+                  'max-h-24 overflow-y-auto whitespace-pre-wrap rounded-lg border px-3 py-2 text-sm',
+                  submitError || loadError
+                    ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-200'
+                    : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
+                )}>
+                  {submitError || loadError || 'Skills saved successfully.'}
+                </div>
+              ) : (
+                <span className="text-xs text-muted-foreground">
+                  Folder uploads keep the selected folder name; standalone files use the `name` in `SKILL.md`.
+                </span>
              )}
            </div>
-            {isLoadingProjectScopes && (
-              <div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                Scanning project skills…
-              </div>
-            )}
+            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="w-full sm:w-auto"
+                disabled={isSubmitting}
+                onClick={() => handleAddDialogOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                className="w-full sm:w-auto"
+                onClick={() => void handleUploadInstall()}
+                disabled={isSubmitting || queuedFiles.length === 0}
+              >
+                {isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+                Install {queuedFiles.length > 0 ? `${queuedFiles.length} Skill${queuedFiles.length === 1 ? '' : 's'}` : 'Skill'}
+              </Button>
+            </div>
          </div>
-        </CardHeader>
+        </DialogContent>
+      </Dialog>

-        <CardContent className="space-y-5 p-4">
-          {isLoading && skills.length === 0 && (
-            <div className="flex min-h-[180px] items-center justify-center text-sm text-muted-foreground">
-              Loading {providerName} skills…
+      {!isAddDialogOpen && (submitError || loadError) && (
+        <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-200">
+          {submitError || loadError}
+        </div>
+      )}
+
+      {justInstalled && saveStatus === 'success' && !isAddDialogOpen && (
+        <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">
+          <CheckCircle2 className="h-4 w-4" />
+          Skills saved successfully.
+        </div>
+      )}
+
+      <div className="space-y-5">
+        {isLoading && skills.length === 0 && (
+          <div className="flex min-h-[180px] items-center justify-center text-sm text-muted-foreground">
+            Loading {providerName} skills…
+          </div>
+        )}
+
+        {!isLoading && skills.length === 0 && (
+          <div className="rounded-lg border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
+            <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-lg border border-border/60 bg-background/80 text-muted-foreground">
+              <FileText className="h-6 w-6" />
            </div>
-          )}
-
-          {!isLoading && skills.length === 0 && (
-            <div className="rounded-3xl border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
-              <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl border border-border/60 bg-background/80 text-muted-foreground">
-                <FileText className="h-6 w-6" />
-              </div>
-              <div className="mt-4 text-sm font-medium text-foreground">No skills discovered yet</div>
-              <div className="mt-1 text-sm text-muted-foreground">
-                Add a global skill above or create project-specific skill folders in your workspace.
-              </div>
+            <div className="mt-4 text-sm font-medium text-foreground">No skills discovered yet</div>
+            <div className="mt-1 text-sm text-muted-foreground">
+              Add a global skill above or create project-specific skill folders in your workspace.
            </div>
-          )}
+          </div>
+        )}

-          {!isLoading && skills.length > 0 && filteredSkills.length === 0 && (
-            <div className="rounded-3xl border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
-              <Search className="mx-auto h-6 w-6 text-muted-foreground" />
-              <div className="mt-3 text-sm font-medium text-foreground">No matching skills</div>
-              <div className="mt-1 text-sm text-muted-foreground">
-                Try a different command, name, scope, project, or source path.
-              </div>
+        {!isLoading && skills.length > 0 && filteredSkills.length === 0 && (
+          <div className="rounded-lg border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
+            <Search className="mx-auto h-6 w-6 text-muted-foreground" />
+            <div className="mt-3 text-sm font-medium text-foreground">No matching skills</div>
+            <div className="mt-1 text-sm text-muted-foreground">
+              Try a different command, name, scope, project, or source path.
            </div>
-          )}
+          </div>
+        )}

-          {groupedSkills.map((group) => (
-            <section key={group.scope} className="min-w-0 space-y-3">
-              <div className="flex items-center gap-2">
-                <Badge variant="outline" className={cn('rounded-full px-2.5 py-1 text-xs', SCOPE_BADGE_CLASSES[group.scope])}>
-                  {SCOPE_LABELS[group.scope]}
-                </Badge>
-                <span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
-                  {group.skills.length} skill{group.skills.length === 1 ? '' : 's'}
-                </span>
-              </div>
+        {groupedSkills.map((group) => (
+          <section key={group.scope} className="min-w-0 space-y-3">
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className={cn('rounded-full px-2.5 py-1 text-xs', SCOPE_BADGE_CLASSES[group.scope])}>
+                {SCOPE_LABELS[group.scope]}
+              </Badge>
+              <span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                {group.skills.length} skill{group.skills.length === 1 ? '' : 's'}
+              </span>
+            </div>

-              <div className="grid min-w-0 gap-3 lg:grid-cols-2">
-                {group.skills.map((skill) => (
-                  <div
-                    key={`${skill.command}:${skill.sourcePath}:${skill.projectPath || 'global'}`}
-                    className="min-w-0 rounded-3xl border border-border/70 bg-gradient-to-br from-background via-background to-muted/25 p-4 shadow-sm"
-                  >
-                    <div className="min-w-0 space-y-1">
-                      <div className="break-all font-mono text-sm font-semibold text-foreground">{skill.command}</div>
-                      <div className="text-sm text-muted-foreground">{skill.name}</div>
-                    </div>
-
-                    <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
-                      {skill.description || 'No description provided in the skill front matter.'}
-                    </p>
-
-                    <div className="mt-4 flex flex-wrap items-center gap-2">
-                      {skill.pluginName && (
-                        <Badge variant="outline" className="rounded-full bg-background/70">
-                          Plugin: {skill.pluginName}
-                        </Badge>
-                      )}
-                      {skill.projectDisplayName && (
-                        <Badge variant="outline" className="rounded-full bg-background/70">
-                          Project: {skill.projectDisplayName}
-                        </Badge>
-                      )}
-                    </div>
-
-                    <div className="mt-4 min-w-0 rounded-2xl border border-border/60 bg-muted/20 px-3 py-2">
-                      <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Source</div>
-                      <code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{skill.sourcePath}</code>
-                    </div>
+            <div className="grid min-w-0 gap-3 lg:grid-cols-2">
+              {group.skills.map((skill) => (
+                <div
+                  key={`${skill.command}:${skill.sourcePath}:${skill.projectPath || 'global'}`}
+                  className="min-w-0 rounded-lg border border-border bg-card/50 p-4"
+                >
+                  <div className="min-w-0 space-y-1">
+                    <div className="break-all font-mono text-sm font-semibold text-foreground">{skill.command}</div>
+                    <div className="text-sm text-muted-foreground">{skill.name}</div>
                  </div>
-                ))}
-              </div>
-            </section>
-          ))}
-        </CardContent>
-      </Card>
+
+                  <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                    {skill.description || 'No description provided in the skill front matter.'}
+                  </p>
+
+                  <div className="mt-4 flex flex-wrap items-center gap-2">
+                    {skill.pluginName && (
+                      <Badge variant="outline" className="rounded-full bg-background/70">
+                        Plugin: {skill.pluginName}
+                      </Badge>
+                    )}
+                    {skill.projectDisplayName && (
+                      <Badge variant="outline" className="rounded-full bg-background/70">
+                        Project: {skill.projectDisplayName}
+                      </Badge>
+                    )}
+                  </div>
+
+                  <div className="mt-4 min-w-0 rounded-lg border border-border/60 bg-muted/20 px-3 py-2">
+                    <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Source</div>
+                    <code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{skill.sourcePath}</code>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
    </div>
  );
 }
--- a/src/contexts/ThemeContext.jsx
+++ b/src/contexts/ThemeContext.jsx
@@ -41,7 +41,7 @@ export const ThemeProvider = ({ children }) => {
      
      const themeColorMeta = document.querySelector('meta[name="theme-color"]');
      if (themeColorMeta) {
-        themeColorMeta.setAttribute('content', '#141414'); // Dark background color (hsl(0 0% 8%))
+        themeColorMeta.setAttribute('content', '#0c1117'); // Dark background color (hsl(222.2 84% 4.9%))
      }
    } else {
      document.documentElement.classList.remove('dark');
@@ -55,7 +55,7 @@ export const ThemeProvider = ({ children }) => {
      
      const themeColorMeta = document.querySelector('meta[name="theme-color"]');
      if (themeColorMeta) {
-        themeColorMeta.setAttribute('content', '#f6f4ef'); // Light background color (warm cream)
+        themeColorMeta.setAttribute('content', '#ffffff'); // Light background color
      }
    }
  }, [isDarkMode]);
--- a/src/hooks/useUiPreferences.ts
+++ b/src/hooks/useUiPreferences.ts
@@ -1,8 +1,10 @@
 import { useEffect, useReducer, useRef } from 'react';

 type UiPreferences = {
+  autoExpandTools: boolean;
  showRawParameters: boolean;
  showThinking: boolean;
+  autoScrollToBottom: boolean;
  sendByCtrlEnter: boolean;
  sidebarVisible: boolean;
  voiceEnabled: boolean;
@@ -32,8 +34,10 @@ type UiPreferencesAction =
  | ResetPreferencesAction;

 const DEFAULTS: UiPreferences = {
+  autoExpandTools: false,
  showRawParameters: false,
  showThinking: true,
+  autoScrollToBottom: true,
  sendByCtrlEnter: false,
  sidebarVisible: true,
  voiceEnabled: false,
--- a/src/i18n/locales/de/settings.json
+++ b/src/i18n/locales/de/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "Darstellung",
      "toolDisplay": "Werkzeuganzeige",
+      "viewOptions": "Anzeigeoptionen",
      "inputSettings": "Eingabeeinstellungen"
    },
    "darkMode": "Darkmode",
+    "autoExpandTools": "Werkzeuge automatisch erweitern",
    "showRawParameters": "Rohe Parameter anzeigen",
    "showThinking": "Denken anzeigen",
+    "autoScrollToBottom": "Automatisch nach unten scrollen",
    "sendByCtrlEnter": "Mit Strg+Enter senden",
    "sendByCtrlEnterDescription": "Wenn aktiviert, sendet Strg+Enter die Nachricht anstelle von Enter. Dies ist nützlich für IME-Benutzer:innen, um versehentliches Senden zu vermeiden.",
    "dragHandle": {
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -70,11 +70,14 @@
    "sections": {
      "appearance": "Appearance",
      "toolDisplay": "Tool Display",
+      "viewOptions": "View Options",
      "inputSettings": "Input Settings"
    },
    "darkMode": "Dark Mode",
+    "autoExpandTools": "Auto-expand tools",
    "showRawParameters": "Show raw parameters",
    "showThinking": "Show thinking",
+    "autoScrollToBottom": "Auto-scroll to bottom",
    "sendByCtrlEnter": "Send by Ctrl+Enter",
    "voiceEnabled": "Voice (mic + read aloud)",
    "sendByCtrlEnterDescription": "When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends.",
--- a/src/i18n/locales/fr/settings.json
+++ b/src/i18n/locales/fr/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "Apparence",
      "toolDisplay": "Affichage des outils",
+      "viewOptions": "Options d'affichage",
      "inputSettings": "Paramètres de saisie"
    },
    "darkMode": "Mode sombre",
+    "autoExpandTools": "Développer automatiquement les outils",
    "showRawParameters": "Afficher les paramètres bruts",
    "showThinking": "Afficher la réflexion",
+    "autoScrollToBottom": "Défilement automatique vers le bas",
    "sendByCtrlEnter": "Envoyer avec Ctrl+Entrée",
    "sendByCtrlEnterDescription": "Lorsqu'activé, appuyer sur Ctrl+Entrée envoie le message au lieu de simplement Entrée. Utile pour les utilisateurs IME pour éviter les envois accidentels.",
    "dragHandle": {
--- a/src/i18n/locales/it/settings.json
+++ b/src/i18n/locales/it/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "Aspetto",
      "toolDisplay": "Visualizzazione strumenti",
+      "viewOptions": "Opzioni visualizzazione",
      "inputSettings": "Impostazioni input"
    },
    "darkMode": "Modalità scura",
+    "autoExpandTools": "Espandi strumenti automaticamente",
    "showRawParameters": "Mostra parametri grezzi",
    "showThinking": "Mostra ragionamento",
+    "autoScrollToBottom": "Scorrimento automatico in basso",
    "sendByCtrlEnter": "Invia con Ctrl+Invio",
    "sendByCtrlEnterDescription": "Se abilitato, premere Ctrl+Invio invierà il messaggio invece di Invio. Utile per gli utenti IME per evitare invii accidentali.",
    "dragHandle": {
--- a/src/i18n/locales/ja/settings.json
+++ b/src/i18n/locales/ja/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "外観",
      "toolDisplay": "ツール表示",
+      "viewOptions": "表示オプション",
      "inputSettings": "入力設定"
    },
    "darkMode": "ダークモード",
+    "autoExpandTools": "ツールを自動展開",
    "showRawParameters": "生パラメータを表示",
    "showThinking": "思考を表示",
+    "autoScrollToBottom": "自動スクロール",
    "sendByCtrlEnter": "Ctrl+Enterで送信",
    "sendByCtrlEnterDescription": "有効にすると、Enterではなく Ctrl+Enter でメッセージを送信します。IMEユーザーの誤送信防止に便利です。",
    "dragHandle": {
--- a/src/i18n/locales/ko/settings.json
+++ b/src/i18n/locales/ko/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "외관",
      "toolDisplay": "도구 표시",
+      "viewOptions": "보기 옵션",
      "inputSettings": "입력 설정"
    },
    "darkMode": "다크 모드",
+    "autoExpandTools": "도구 자동 펼치기",
    "showRawParameters": "Raw 파라미터 표시",
    "showThinking": "생각 과정 표시",
+    "autoScrollToBottom": "자동 스크롤",
    "sendByCtrlEnter": "Ctrl+Enter로 전송",
    "sendByCtrlEnterDescription": "활성화하면 Enter 대신 Ctrl+Enter로 메시지를 전송합니다. IME 사용자가 실수로 전송하는 것을 방지하는 데 유용합니다.",
    "dragHandle": {
--- a/src/i18n/locales/ru/settings.json
+++ b/src/i18n/locales/ru/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "Внешний вид",
      "toolDisplay": "Отображение инструментов",
+      "viewOptions": "Параметры просмотра",
      "inputSettings": "Настройки ввода"
    },
    "darkMode": "Темная тема",
+    "autoExpandTools": "Автоматически разворачивать инструменты",
    "showRawParameters": "Показывать сырые параметры",
    "showThinking": "Показывать размышления",
+    "autoScrollToBottom": "Автопрокрутка вниз",
    "sendByCtrlEnter": "Отправка по Ctrl+Enter",
    "sendByCtrlEnterDescription": "Когда включено, нажатие Ctrl+Enter будет отправлять сообщение вместо просто Enter. Это полезно для пользователей IME, чтобы избежать случайной отправки.",
    "dragHandle": {
--- a/src/i18n/locales/tr/settings.json
+++ b/src/i18n/locales/tr/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "Görünüm",
      "toolDisplay": "Araç Gösterimi",
+      "viewOptions": "Görünüm Seçenekleri",
      "inputSettings": "Girdi Ayarları"
    },
    "darkMode": "Koyu Mod",
+    "autoExpandTools": "Araçları otomatik genişlet",
    "showRawParameters": "Ham parametreleri göster",
    "showThinking": "Düşünmeyi göster",
+    "autoScrollToBottom": "Otomatik en alta kaydır",
    "sendByCtrlEnter": "Ctrl+Enter ile gönder",
    "sendByCtrlEnterDescription": "Etkinleştirildiğinde, Ctrl+Enter'a basmak yalnız Enter yerine mesajı gönderir. IME (girdi metot düzenleyici) kullananlar için yanlışlıkla göndermeyi önler.",
    "dragHandle": {
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "外观",
      "toolDisplay": "工具显示",
+      "viewOptions": "视图选项",
      "inputSettings": "输入设置"
    },
    "darkMode": "深色模式",
+    "autoExpandTools": "自动展开工具",
    "showRawParameters": "显示原始参数",
    "showThinking": "显示思考过程",
+    "autoScrollToBottom": "自动滚动到底部",
    "sendByCtrlEnter": "使用 Ctrl+Enter 发送",
    "sendByCtrlEnterDescription": "启用后，按 Ctrl+Enter 发送消息，而不是仅按 Enter。这对于使用输入法的用户可以避免意外发送。",
    "dragHandle": {
--- a/src/i18n/locales/zh-TW/settings.json
+++ b/src/i18n/locales/zh-TW/settings.json
@@ -54,11 +54,14 @@
    "sections": {
      "appearance": "外觀",
      "toolDisplay": "工具顯示",
+      "viewOptions": "檢視選項",
      "inputSettings": "輸入設定"
    },
    "darkMode": "深色模式",
+    "autoExpandTools": "自動展開工具",
    "showRawParameters": "顯示原始參數",
    "showThinking": "顯示思考過程",
+    "autoScrollToBottom": "自動捲動到底部",
    "sendByCtrlEnter": "使用 Ctrl+Enter 傳送",
    "sendByCtrlEnterDescription": "啟用後，按 Ctrl+Enter 傳送訊息，而不是僅按 Enter。這對於使用輸入法的使用者可以避免意外傳送。",
    "dragHandle": {
--- a/src/index.css
+++ b/src/index.css
@@ -23,37 +23,37 @@

@layer base {
  :root {
-    --background: 44 22% 96%;
-    --foreground: 36 25% 4%;
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
-    --card-foreground: 36 25% 4%;
+    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
-    --popover-foreground: 36 25% 4%;
+    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
-    --secondary: 44 15% 91%;
-    --secondary-foreground: 36 15% 18%;
-    --muted: 44 15% 91%;
-    --muted-foreground: 40 5% 44%;
-    --accent: 44 15% 91%;
-    --accent-foreground: 36 15% 18%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
-    --border: 44 14% 87%;
-    --input: 44 14% 87%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;

    /* Nav design tokens */
-    --nav-glass-bg: 44 22% 96% / 0.7;
+    --nav-glass-bg: 0 0% 100% / 0.7;
    --nav-glass-blur: 20px;
    --nav-glass-saturate: 1.8;
    --nav-tab-glow: 221.2 83.2% 53.3% / 0.18;
    --nav-tab-ring: 221.2 83.2% 53.3% / 0.10;
    --nav-float-shadow: 0 0% 0% / 0.06;
-    --nav-float-ring: 44 14% 87% / 0.5;
-    --nav-divider-color: 44 14% 87% / 0.5;
-    --nav-input-bg: 44 15% 91% / 0.5;
+    --nav-float-ring: 214.3 31.8% 91.4% / 0.5;
+    --nav-divider-color: 214.3 31.8% 91.4% / 0.5;
+    --nav-input-bg: 210 40% 96.1% / 0.5;
    --nav-input-focus-ring: 221.2 83.2% 53.3% / 0.22;

    /* Safe area CSS variables */
@@ -85,36 +85,36 @@
  }

  .dark {
-    --background: 0 0% 8%;
-    --foreground: 40 8% 93%;
-    --card: 0 0% 12%;
-    --card-foreground: 40 8% 93%;
-    --popover: 0 0% 12%;
-    --popover-foreground: 40 8% 93%;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 217.2 91.2% 8%;
+    --card-foreground: 210 40% 98%;
+    --popover: 217.2 91.2% 8%;
+    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 0 0% 8%;
-    --secondary: 0 0% 17%;
-    --secondary-foreground: 40 8% 93%;
-    --muted: 0 0% 17%;
-    --muted-foreground: 0 0% 60%;
-    --accent: 0 0% 17%;
-    --accent-foreground: 40 8% 93%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 40 8% 93%;
-    --border: 0 0% 17%;
-    --input: 0 0% 23%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 220 13% 46%;
    --ring: 217.2 91.2% 59.8%;

    /* Nav design tokens — dark overrides */
-    --nav-glass-bg: 0 0% 12% / 0.55;
+    --nav-glass-bg: 217.2 91.2% 8% / 0.55;
    --nav-glass-blur: 24px;
    --nav-glass-saturate: 1.6;
    --nav-tab-glow: 217.2 91.2% 59.8% / 0.25;
    --nav-tab-ring: 217.2 91.2% 59.8% / 0.15;
    --nav-float-shadow: 0 0% 0% / 0.35;
-    --nav-float-ring: 0 0% 17% / 0.3;
-    --nav-divider-color: 0 0% 17% / 0.5;
-    --nav-input-bg: 0 0% 17% / 0.5;
+    --nav-float-ring: 217.2 32.6% 17.5% / 0.3;
+    --nav-divider-color: 217.2 32.6% 17.5% / 0.5;
+    --nav-input-bg: 217.2 32.6% 17.5% / 0.5;
    --nav-input-focus-ring: 217.2 91.2% 59.8% / 0.25;
  }
 }
@@ -128,7 +128,7 @@
  
  body {
    @apply bg-background text-foreground;
-    font-family: "Encode Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
@@ -350,7 +350,7 @@
  }
  
  .dark .scrollbar-thin::-webkit-scrollbar-track {
-    background: rgba(38, 38, 38, 0.3);
+    background: rgba(31, 41, 55, 0.3);
  }
  
  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
@@ -369,7 +369,7 @@
  }
  
  .dark::-webkit-scrollbar-track {
-    background: rgba(38, 38, 38, 0.5);
+    background: rgba(31, 41, 55, 0.5);
  }
  
  .dark::-webkit-scrollbar-thumb {
@@ -384,7 +384,7 @@
  /* Firefox scrollbar styles */
  .dark {
    scrollbar-width: thin;
-    scrollbar-color: rgba(115, 115, 115, 0.5) rgba(38, 38, 38, 0.5);
+    scrollbar-color: rgba(107, 114, 128, 0.5) rgba(31, 41, 55, 0.5);
  }
  
  /* Ensure checkbox styling is preserved */
@@ -475,7 +475,7 @@
  
  /* Fix focus-within container issues in dark mode */
  .dark .focus-within\:ring-2:focus-within {
-    background-color: rgb(20 20 20) !important;
+    background-color: rgb(31 41 55) !important; /* gray-800 */
  }
  
  /* Ensure textarea remains transparent with visible text */
@@ -568,23 +568,7 @@
  }

  .chat-composer-shell {
-    contain: layout style;
-  }
-
-  .chat-activity-enter {
-    animation: chat-activity-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
-    transform-origin: bottom center;
-    will-change: transform, opacity, filter;
-  }
-
-  .chat-activity-exit {
-    animation: chat-activity-exit 220ms cubic-bezier(0.4, 0, 1, 1) both;
-    transform-origin: bottom center;
-    will-change: transform, opacity, filter;
-  }
-
-  .chat-activity-tab {
-    clip-path: inset(-8px -8px 0 -8px);
+    contain: layout style paint;
  }

  .chat-message {
@@ -889,12 +873,12 @@
  
  /* Fix focus ring offset color in dark mode */
  .dark [class*="ring-offset"] {
-    --tw-ring-offset-color: rgb(20 20 20);
+    --tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
  }
-
+  
  /* Ensure buttons don't show white backgrounds in dark mode */
  .dark button:focus {
-    --tw-ring-offset-color: rgb(20 20 20);
+    --tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
  }
  
  /* Fix mobile select dropdown styling */
@@ -937,8 +921,8 @@
  }
  
  .dark select option {
-    background-color: rgb(31 31 31) !important;
-    color: rgb(237 235 230) !important;
+    background-color: rgb(31 41 55) !important;
+    color: rgb(243 244 246) !important;
  }

  /* Tool details chevron animation */
@@ -963,37 +947,6 @@
    animation: settings-fade-in 150ms ease-out;
  }

-  @keyframes chat-activity-enter {
-    from {
-      opacity: 0;
-      filter: blur(3px);
-      transform: translateY(18px) scaleY(0.92);
-    }
-    65% {
-      opacity: 1;
-      filter: blur(0);
-      transform: translateY(-2px) scaleY(1.01);
-    }
-    to {
-      opacity: 1;
-      filter: blur(0);
-      transform: translateY(0) scaleY(1);
-    }
-  }
-
-  @keyframes chat-activity-exit {
-    from {
-      opacity: 1;
-      filter: blur(0);
-      transform: translateY(0) scaleY(1);
-    }
-    to {
-      opacity: 0;
-      filter: blur(2px);
-      transform: translateY(14px) scaleY(0.96);
-    }
-  }
-
  /* Search result highlight flash */
  .search-highlight-flash {
    animation: search-flash 4s ease-out;
--- a/src/shared/view/ui/ActionMenu.tsx
+++ b/src/shared/view/ui/ActionMenu.tsx
@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { ChevronDown, Loader2, type LucideIcon } from 'lucide-react';
+
+import { cn } from '../../../lib/utils';
+
+import { Button } from './Button';
+
+type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
+
+export type ActionMenuItem = {
+  key: string;
+  label: string;
+  description?: string;
+  icon?: LucideIcon;
+  onSelect: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  isDanger?: boolean;
+  showDividerBefore?: boolean;
+};
+
+type ActionMenuProps = {
+  label: string;
+  items: ActionMenuItem[];
+  icon?: LucideIcon;
+  ariaLabel?: string;
+  align?: 'left' | 'right';
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  triggerClassName?: string;
+  disabled?: boolean;
+};
+
+export default function ActionMenu({
+  label,
+  items,
+  icon: TriggerIcon,
+  ariaLabel,
+  align = 'right',
+  variant = 'outline',
+  size = 'sm',
+  className,
+  triggerClassName,
+  disabled,
+}: ActionMenuProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+  const menuRef = React.useRef<HTMLDivElement | null>(null);
+  // Whether closing should move focus back to the trigger. Set for keyboard
+  // (Escape) and item selection, but left false for outside pointer clicks so
+  // focus is not stolen from wherever the user clicked.
+  const restoreFocusRef = React.useRef(false);
+  const wasOpenRef = React.useRef(false);
+  const menuId = React.useId();
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (rootRef.current && !rootRef.current.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        restoreFocusRef.current = true;
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', closeOnOutsideClick);
+    document.addEventListener('keydown', closeOnEscape);
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsideClick);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [isOpen]);
+
+  // Move focus into the menu on open and back to the trigger on a keyboard or
+  // selection close, so keyboard and screen-reader navigation match the menu role.
+  React.useEffect(() => {
+    if (isOpen) {
+      wasOpenRef.current = true;
+      const menu = menuRef.current;
+      const firstItem = menu?.querySelector<HTMLButtonElement>('[role="menuitem"]:not([disabled])');
+      (firstItem ?? menu)?.focus();
+      return;
+    }
+
+    if (wasOpenRef.current) {
+      wasOpenRef.current = false;
+      if (restoreFocusRef.current) {
+        triggerRef.current?.focus();
+      }
+      restoreFocusRef.current = false;
+    }
+  }, [isOpen]);
+
+  const runItem = (item: ActionMenuItem) => {
+    if (item.disabled || item.loading) {
+      return;
+    }
+
+    restoreFocusRef.current = true;
+    setIsOpen(false);
+    item.onSelect();
+  };
+
+  return (
+    <div ref={rootRef} className={cn('relative inline-flex', className)}>
+      <Button
+        ref={triggerRef}
+        type="button"
+        variant={variant}
+        size={size}
+        className={triggerClassName}
+        disabled={disabled}
+        aria-label={ariaLabel || label}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? menuId : undefined}
+        onClick={() => setIsOpen((current) => !current)}
+      >
+        {TriggerIcon && <TriggerIcon className="h-4 w-4" />}
+        <span>{label}</span>
+        <ChevronDown className={cn('h-4 w-4 transition-transform', isOpen && 'rotate-180')} />
+      </Button>
+
+      {isOpen && (
+        <div
+          ref={menuRef}
+          id={menuId}
+          role="menu"
+          tabIndex={-1}
+          className={cn(
+            'absolute top-full z-50 mt-2 min-w-[220px] rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg',
+            'animate-in fade-in-0 zoom-in-95',
+            align === 'right' ? 'right-0' : 'left-0',
+          )}
+        >
+          {items.map((item) => {
+            const Icon = item.icon;
+            return (
+              <React.Fragment key={item.key}>
+                {item.showDividerBefore && <div className="mx-2 my-1 h-px bg-border" />}
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={item.disabled || item.loading}
+                  onClick={() => runItem(item)}
+                  className={cn(
+                    'flex w-full items-start gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors',
+                    'focus:bg-accent focus:outline-none',
+                    item.disabled || item.loading
+                      ? 'cursor-not-allowed opacity-50'
+                      : item.isDanger
+                        ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950'
+                        : 'hover:bg-accent',
+                  )}
+                >
+                  {item.loading ? (
+                    <Loader2 className="mt-0.5 h-4 w-4 flex-shrink-0 animate-spin" />
+                  ) : (
+                    Icon && <Icon className="mt-0.5 h-4 w-4 flex-shrink-0" />
+                  )}
+                  <span className="min-w-0 flex-1">
+                    <span className="block font-medium leading-5">{item.label}</span>
+                    {item.description && (
+                      <span className="mt-0.5 block text-xs leading-4 text-muted-foreground">
+                        {item.description}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              </React.Fragment>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/shared/view/ui/Dialog.tsx
+++ b/src/shared/view/ui/Dialog.tsx
@@ -92,12 +92,13 @@ DialogTrigger.displayName = 'DialogTrigger';
 interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
  onEscapeKeyDown?: () => void;
  onPointerDownOutside?: () => void;
+  wrapperClassName?: string;
 }

 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';

 const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ className, children, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) => {
+  ({ className, children, onEscapeKeyDown, onPointerDownOutside, wrapperClassName, ...props }, ref) => {
    const { open, onOpenChange, triggerRef } = useDialog();
    const contentRef = React.useRef<HTMLDivElement | null>(null);
    const previousFocusRef = React.useRef<HTMLElement | null>(null);
@@ -171,7 +172,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
    if (!open) return null;

    return createPortal(
-      <div className="fixed inset-0 z-50">
+      <div className={cn('fixed inset-0 z-50', wrapperClassName)}>
        {/* Overlay */}
        <div
          className="fixed inset-0 animate-dialog-overlay-show bg-black/50 backdrop-blur-sm"
--- a/src/shared/view/ui/index.ts
+++ b/src/shared/view/ui/index.ts
@@ -1,4 +1,6 @@
 export { Alert, AlertTitle, AlertDescription, alertVariants } from './Alert';
+export { default as ActionMenu } from './ActionMenu';
+export type { ActionMenuItem } from './ActionMenu';
 export { Badge, badgeVariants } from './Badge';
 export { Button, buttonVariants } from './Button';
 export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from './Confirmation';
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,10 +14,6 @@ export default {
      },
    },
    extend: {
-      fontFamily: {
-        sans: ['"Encode Sans"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'],
-        serif: ['Merriweather', 'Georgia', 'Cambria', '"Times New Roman"', 'serif'],
-      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
Author	SHA1	Message	Date
Simos Mikelatos	6317896cd8	fix(skills): scope success banner and add menu focus management Gate the skills install success banner behind a local just-installed flag so it no longer re-appears stale after reopening and cancelling the add dialog, and disable the cancel/close controls while an install is in flight. Add keyboard focus management to ActionMenu: focus the first item on open and restore focus to the trigger on Escape or item selection. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-30 22:46:29 +00:00
Simos Mikelatos	3a9b1d6011	fix(settings): stabilize add skill dialog size	2026-06-30 22:35:04 +00:00
Simos Mikelatos	84b6d6a290	feat(settings): open add skill in dialog	2026-06-30 22:32:49 +00:00
Simos Mikelatos	244b8201eb	feat(settings): refine skills and MCP action controls	2026-06-30 22:12:21 +00:00