From f852a4c60e66ecbde4871715db75482e5cb27a04 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Mon, 8 Jun 2026 17:14:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |   2 +-
 src/app/globals.css                     | 226 ++++++++++++------------
 src/app/layout.tsx                      |   2 +-
 src/components/layout/AppShell.tsx      | 163 ++++++++++++++---
 src/components/layout/ChatListPanel.tsx |  64 ++-----
 src/components/layout/UnifiedTopBar.tsx |  46 ++---
 6 files changed, 289 insertions(+), 214 deletions(-)

diff --git a/package.json b/package.json
index 8e13847..879a485 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "codewiz",
+  "name": "wizai",
   "version": "0.54.0",
   "private": true,
   "license": "BUSL-1.1",
diff --git a/src/app/globals.css b/src/app/globals.css
index 3b6507e..610ef07 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -64,126 +64,126 @@
 }
 
 :root {
-  --radius: 0.75rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.147 0.004 49.25);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.147 0.004 49.25);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.147 0.004 49.25);
-  --primary: oklch(0.546 0.245 262.881);
-  --primary-foreground: oklch(0.985 0.001 106.423);
-  --secondary: oklch(0.97 0.001 106.424);
-  --secondary-foreground: oklch(0.216 0.006 56.043);
-  --muted: oklch(0.97 0.001 106.424);
-  --muted-foreground: oklch(0.553 0.013 58.071);
-  --accent: oklch(0.97 0.001 106.424);
-  --accent-foreground: oklch(0.216 0.006 56.043);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.923 0.003 48.717);
-  --input: oklch(0.923 0.003 48.717);
-  --ring: oklch(0.546 0.245 262.881);
-  --chart-1: oklch(0.546 0.245 262.881);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.001 106.423);
-  --sidebar-foreground: oklch(0.147 0.004 49.25);
-  --sidebar-primary: oklch(0.546 0.245 262.881);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.97 0.001 106.424);
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-  --sidebar-border: oklch(0.923 0.003 48.717);
-  --sidebar-ring: oklch(0.546 0.245 262.881);
+  --radius: 0.5rem;
+  --background: oklch(0.98 0.002 60);
+  --foreground: oklch(0.18 0.015 50);
+  --card: oklch(0.99 0.001 60);
+  --card-foreground: oklch(0.18 0.015 50);
+  --popover: oklch(0.99 0.001 60);
+  --popover-foreground: oklch(0.18 0.015 50);
+  --primary: oklch(0.65 0.19 55);
+  --primary-foreground: oklch(0.99 0.001 60);
+  --secondary: oklch(0.94 0.005 55);
+  --secondary-foreground: oklch(0.30 0.015 50);
+  --muted: oklch(0.93 0.005 55);
+  --muted-foreground: oklch(0.50 0.015 50);
+  --accent: oklch(0.94 0.005 55);
+  --accent-foreground: oklch(0.30 0.015 50);
+  --destructive: oklch(0.58 0.22 25);
+  --border: oklch(0.88 0.005 55);
+  --input: oklch(0.92 0.005 55);
+  --ring: oklch(0.65 0.19 55);
+  --chart-1: oklch(0.65 0.19 55);
+  --chart-2: oklch(0.60 0.15 180);
+  --chart-3: oklch(0.55 0.12 250);
+  --chart-4: oklch(0.70 0.14 85);
+  --chart-5: oklch(0.60 0.18 30);
+  --sidebar: oklch(0.22 0.01 50);
+  --sidebar-foreground: oklch(0.90 0.005 60);
+  --sidebar-primary: oklch(0.65 0.19 55);
+  --sidebar-primary-foreground: oklch(0.99 0.001 60);
+  --sidebar-accent: oklch(0.30 0.015 50);
+  --sidebar-accent-foreground: oklch(0.90 0.005 60);
+  --sidebar-border: oklch(0.32 0.01 50);
+  --sidebar-ring: oklch(0.65 0.19 55);
   --user-bubble: oklch(0.22 0.005 250);
-  --user-bubble-foreground: oklch(0.985 0.001 106.423);
+  --user-bubble-foreground: oklch(0.95 0.002 60);
   /* Status semantic tokens */
-  --status-success: oklch(0.527 0.154 150.069);
-  --status-success-foreground: oklch(0.393 0.124 148.697);
-  --status-success-muted: oklch(0.527 0.154 150.069 / 10%);
-  --status-success-border: oklch(0.527 0.154 150.069 / 20%);
-  --status-warning: oklch(0.705 0.213 47.604);
-  --status-warning-foreground: oklch(0.646 0.222 41.116);
-  --status-warning-muted: oklch(0.705 0.213 47.604 / 10%);
-  --status-warning-border: oklch(0.705 0.213 47.604 / 20%);
-  --status-error: oklch(0.577 0.245 27.325);
-  --status-error-foreground: oklch(0.577 0.245 27.325);
-  --status-error-muted: oklch(0.577 0.245 27.325 / 10%);
-  --status-error-border: oklch(0.577 0.245 27.325 / 20%);
-  --status-info: oklch(0.546 0.245 262.881);
-  --status-info-foreground: oklch(0.546 0.245 262.881);
-  --status-info-muted: oklch(0.546 0.245 262.881 / 10%);
-  --status-info-border: oklch(0.546 0.245 262.881 / 20%);
+  --status-success: oklch(0.60 0.18 148);
+  --status-success-foreground: oklch(0.40 0.12 148);
+  --status-success-muted: oklch(0.60 0.18 148 / 12%);
+  --status-success-border: oklch(0.60 0.18 148 / 25%);
+  --status-warning: oklch(0.72 0.18 80);
+  --status-warning-foreground: oklch(0.30 0.10 50);
+  --status-warning-muted: oklch(0.72 0.18 80 / 12%);
+  --status-warning-border: oklch(0.72 0.18 80 / 25%);
+  --status-error: oklch(0.60 0.22 25);
+  --status-error-foreground: oklch(0.99 0.001 60);
+  --status-error-muted: oklch(0.60 0.22 25 / 12%);
+  --status-error-border: oklch(0.60 0.22 25 / 25%);
+  --status-info: oklch(0.60 0.18 250);
+  --status-info-foreground: oklch(0.99 0.001 60);
+  --status-info-muted: oklch(0.60 0.18 250 / 12%);
+  --status-info-border: oklch(0.60 0.18 250 / 25%);
   /* Terminal / code-block (bash) tokens */
-  --terminal-bg: oklch(0.13 0.004 49.25);
-  --terminal-foreground: oklch(0.87 0.006 106);
-  --terminal-muted: oklch(0.55 0.01 58);
-  --terminal-border: oklch(0.30 0.005 49);
-  --terminal-accent: oklch(0.55 0.17 155);
-  --terminal-hover-bg: oklch(0.25 0.005 49);
-  --terminal-gradient-from: oklch(0.13 0.004 49.25);
+  --terminal-bg: oklch(0.12 0.005 50);
+  --terminal-foreground: oklch(0.88 0.005 60);
+  --terminal-muted: oklch(0.55 0.01 55);
+  --terminal-border: oklch(0.30 0.005 50);
+  --terminal-accent: oklch(0.65 0.18 55);
+  --terminal-hover-bg: oklch(0.22 0.005 50);
+  --terminal-gradient-from: oklch(0.12 0.005 50);
 }
 
 .dark {
-  --background: oklch(0.147 0.004 49.25);
-  --foreground: oklch(0.985 0.001 106.423);
-  --card: oklch(0.216 0.006 56.043);
-  --card-foreground: oklch(0.985 0.001 106.423);
-  --popover: oklch(0.216 0.006 56.043);
-  --popover-foreground: oklch(0.985 0.001 106.423);
-  --primary: oklch(0.623 0.214 259.815);
-  --primary-foreground: oklch(0.985 0.001 106.423);
-  --secondary: oklch(0.268 0.007 34.298);
-  --secondary-foreground: oklch(0.985 0.001 106.423);
-  --muted: oklch(0.268 0.007 34.298);
-  --muted-foreground: oklch(0.709 0.01 56.259);
-  --accent: oklch(0.268 0.007 34.298);
-  --accent-foreground: oklch(0.985 0.001 106.423);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.623 0.214 259.815);
-  --chart-1: oklch(0.623 0.214 259.815);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.216 0.006 56.043);
-  --sidebar-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-primary: oklch(0.623 0.214 259.815);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.268 0.007 34.298);
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.623 0.214 259.815);
-  --user-bubble: oklch(0.90 0.003 106);
-  --user-bubble-foreground: oklch(0.147 0.004 49.25);
+  --background: oklch(0.11 0.01 50);
+  --foreground: oklch(0.92 0.003 60);
+  --card: oklch(0.16 0.012 50);
+  --card-foreground: oklch(0.92 0.003 60);
+  --popover: oklch(0.16 0.012 50);
+  --popover-foreground: oklch(0.92 0.003 60);
+  --primary: oklch(0.70 0.18 55);
+  --primary-foreground: oklch(0.11 0.01 50);
+  --secondary: oklch(0.22 0.01 50);
+  --secondary-foreground: oklch(0.88 0.005 60);
+  --muted: oklch(0.22 0.01 50);
+  --muted-foreground: oklch(0.60 0.01 55);
+  --accent: oklch(0.28 0.015 50);
+  --accent-foreground: oklch(0.92 0.003 60);
+  --destructive: oklch(0.65 0.22 25);
+  --border: oklch(0.28 0.01 50);
+  --input: oklch(0.22 0.01 50);
+  --ring: oklch(0.70 0.18 55);
+  --chart-1: oklch(0.70 0.18 55);
+  --chart-2: oklch(0.62 0.16 180);
+  --chart-3: oklch(0.58 0.15 250);
+  --chart-4: oklch(0.68 0.15 85);
+  --chart-5: oklch(0.65 0.18 30);
+  --sidebar: oklch(0.11 0.01 50);
+  --sidebar-foreground: oklch(0.88 0.005 60);
+  --sidebar-primary: oklch(0.70 0.18 55);
+  --sidebar-primary-foreground: oklch(0.11 0.01 50);
+  --sidebar-accent: oklch(0.22 0.012 50);
+  --sidebar-accent-foreground: oklch(0.88 0.005 60);
+  --sidebar-border: oklch(0.26 0.01 50);
+  --sidebar-ring: oklch(0.70 0.18 55);
+  --user-bubble: oklch(0.70 0.18 220);
+  --user-bubble-foreground: oklch(0.11 0.01 50);
   /* Status semantic tokens */
-  --status-success: oklch(0.527 0.154 150.069);
-  --status-success-foreground: oklch(0.448 0.133 148.697);
-  --status-success-muted: oklch(0.527 0.154 150.069 / 10%);
-  --status-success-border: oklch(0.527 0.154 150.069 / 20%);
-  --status-warning: oklch(0.705 0.213 47.604);
-  --status-warning-foreground: oklch(0.705 0.213 47.604);
-  --status-warning-muted: oklch(0.705 0.213 47.604 / 10%);
-  --status-warning-border: oklch(0.705 0.213 47.604 / 20%);
-  --status-error: oklch(0.704 0.191 22.216);
-  --status-error-foreground: oklch(0.704 0.191 22.216);
-  --status-error-muted: oklch(0.704 0.191 22.216 / 10%);
-  --status-error-border: oklch(0.704 0.191 22.216 / 20%);
-  --status-info: oklch(0.623 0.214 259.815);
-  --status-info-foreground: oklch(0.623 0.214 259.815);
-  --status-info-muted: oklch(0.623 0.214 259.815 / 10%);
-  --status-info-border: oklch(0.623 0.214 259.815 / 20%);
-  /* Terminal tokens — dark mode: stronger border contrast against dark page bg */
-  --terminal-bg: oklch(0.10 0.002 49);
-  --terminal-foreground: oklch(0.87 0.006 106);
-  --terminal-muted: oklch(0.60 0.01 58);
-  --terminal-border: oklch(0.35 0.006 49);
-  --terminal-accent: oklch(0.62 0.17 155);
-  --terminal-hover-bg: oklch(0.22 0.005 49);
-  --terminal-gradient-from: oklch(0.10 0.002 49);
+  --status-success: oklch(0.65 0.18 148);
+  --status-success-foreground: oklch(0.11 0.01 50);
+  --status-success-muted: oklch(0.65 0.18 148 / 15%);
+  --status-success-border: oklch(0.65 0.18 148 / 30%);
+  --status-warning: oklch(0.75 0.18 80);
+  --status-warning-foreground: oklch(0.11 0.01 50);
+  --status-warning-muted: oklch(0.75 0.18 80 / 15%);
+  --status-warning-border: oklch(0.75 0.18 80 / 30%);
+  --status-error: oklch(0.65 0.22 25);
+  --status-error-foreground: oklch(0.11 0.01 50);
+  --status-error-muted: oklch(0.65 0.22 25 / 15%);
+  --status-error-border: oklch(0.65 0.22 25 / 30%);
+  --status-info: oklch(0.65 0.18 250);
+  --status-info-foreground: oklch(0.11 0.01 50);
+  --status-info-muted: oklch(0.65 0.18 250 / 15%);
+  --status-info-border: oklch(0.65 0.18 250 / 30%);
+  /* Terminal tokens — dark mode: warm dark background */
+  --terminal-bg: oklch(0.09 0.008 50);
+  --terminal-foreground: oklch(0.88 0.005 60);
+  --terminal-muted: oklch(0.55 0.01 55);
+  --terminal-border: oklch(0.28 0.008 50);
+  --terminal-accent: oklch(0.70 0.18 55);
+  --terminal-hover-bg: oklch(0.18 0.008 50);
+  --terminal-gradient-from: oklch(0.09 0.008 50);
 }
 
 @layer base {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c2af808..86a1dff 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "CodePilot",
+  title: "WizAI",
   description: "A multi-model AI agent desktop client",
 };
 
diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index 6da3009..968ef82 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { usePathname, useRouter } from "next/navigation";
+import Link from "next/link";
 import { TooltipProvider } from "@/components/ui/tooltip";
 // NavRail removed — navigation merged into ChatListPanel
 import { ChatListPanel } from "./ChatListPanel";
@@ -20,8 +21,18 @@ import { useGitStatus } from "@/hooks/useGitStatus";
 import { SetupCenter } from '@/components/setup/SetupCenter';
 import { Toaster } from '@/components/ui/toast';
 import { useNotificationPoll } from '@/hooks/useNotificationPoll';
+import { useClientPlatform } from '@/hooks/useClientPlatform';
 import { useGlobalSearchShortcut } from '@/hooks/useGlobalSearchShortcut';
 import { GlobalSearchDialog } from './GlobalSearchDialog';
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { MagnifyingGlass, Gear } from '@/components/ui/icon';
+import { cn } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
 
 const SPLIT_SESSIONS_KEY = "codepilot:split-sessions";
 const SPLIT_ACTIVE_COLUMN_KEY = "codepilot:split-active-column";
@@ -77,7 +88,8 @@ const LG_BREAKPOINT = 1024;
 export function AppShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const router = useRouter();
-
+  const { t } = useTranslation();
+  const { isWindows } = useClientPlatform();
   const [chatListOpenRaw, setChatListOpenRaw] = useState(false);
   const [setupOpen, setSetupOpen] = useState(false);
   const [setupInitialCard, setSetupInitialCard] = useState<'claude' | 'provider' | 'project' | undefined>();
@@ -495,29 +507,86 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         <ImageGenContext.Provider value={imageGenValue}>
         <BatchImageGenContext.Provider value={batchImageGenValue}>
         <TooltipProvider delayDuration={300}>
-          <div className="flex h-screen overflow-hidden">
-            <ErrorBoundary>
-              <ChatListPanel
-                open={chatListOpen}
-                width={chatListWidth}
-              />
-            </ErrorBoundary>
-            {chatListOpen && (
-              <ResizeHandle side="left" onResize={handleChatListResize} onResizeEnd={handleChatListResizeEnd} />
-            )}
-            <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-              <UnifiedTopBar />
-              <div className="flex flex-1 min-h-0 overflow-hidden">
-                <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-                  <main className="relative flex-1 overflow-hidden">
-                    {isSplitActive ? (
-                      <SplitChatContainer />
-                    ) : (
-                      <ErrorBoundary>{children}</ErrorBoundary>
-                    )}
-                  </main>
+          <div className="flex h-screen flex-col overflow-hidden">
+            {/* ===== TOP NAVIGATION BAR ===== */}
+            <div
+              className="flex h-11 shrink-0 items-center border-b border-sidebar-border/60 bg-sidebar px-3 gap-1"
+              style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+            >
+              {/* Brand */}
+              <div
+                className="flex items-center gap-2 shrink-0 mr-3"
+                style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+              >
+                <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary/20">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="currentColor" opacity="0.8"/>
+                    <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </div>
+                <span className="text-sm font-semibold text-sidebar-foreground tracking-tight">WizAI</span>
+              </div>
+
+              {/* Main nav */}
+              <nav
+                className="flex items-center gap-0.5"
+                style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+              >
+                <NavNavItem href="/chat" label="Chats" isActive={pathname === "/chat" || pathname.startsWith("/chat/")} />
+                <NavNavItem href="/skills" label="Skills" isActive={pathname.startsWith("/skills")} />
+                <NavNavItem href="/mcp" label="MCP" isActive={pathname.startsWith("/mcp")} />
+                <NavNavItem href="/cli-tools" label="CLI Tools" isActive={pathname.startsWith("/cli-tools")} />
+                <NavNavItem href="/gallery" label="Gallery" isActive={pathname.startsWith("/gallery")} />
+                <NavNavItem href="/bridge" label="Bridge" isActive={pathname.startsWith("/bridge")} />
+              </nav>
+
+              {/* Spacer */}
+              <div className="flex-1" style={{ WebkitAppRegion: 'drag' } as React.CSSProperties} />
+
+              {/* Right side controls */}
+              <div
+                className="flex items-center gap-1"
+                style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+              >
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="h-7 w-7 text-sidebar-foreground/60 hover:text-sidebar-foreground"
+                  onClick={() => setSearchOpen(true)}
+                >
+                  <MagnifyingGlass size={15} />
+                </Button>
+                <NavRailSettingsButton pathname={pathname} />
+                {isWindows && <div style={{ width: 138 }} className="shrink-0" />}
+              </div>
+            </div>
+
+            {/* ===== MAIN CONTENT AREA ===== */}
+            <div className="flex flex-1 min-h-0 overflow-hidden">
+              <ErrorBoundary>
+                <ChatListPanel
+                  open={chatListOpen}
+                  width={chatListWidth}
+                />
+              </ErrorBoundary>
+              {chatListOpen && (
+                <ResizeHandle side="left" onResize={handleChatListResize} onResizeEnd={handleChatListResizeEnd} />
+              )}
+              <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+                <UnifiedTopBar />
+                <div className="flex flex-1 min-h-0 overflow-hidden">
+                  <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+                    <main className="relative flex-1 overflow-hidden">
+                      {isSplitActive ? (
+                        <SplitChatContainer />
+                      ) : (
+                        <ErrorBoundary>{children}</ErrorBoundary>
+                      )}
+                    </main>
+                  </div>
+                  {isChatDetailRoute && <PanelZone />}
                 </div>
-                {isChatDetailRoute && <PanelZone />}
               </div>
             </div>
           </div>
@@ -537,3 +606,51 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       </PanelContext.Provider>
   );
 }
+
+// ===== INLINE NAV COMPONENTS =====
+
+function NavNavItem({ href, label, isActive }: { href: string; label: string; isActive: boolean }) {
+  return (
+    <Link href={href}>
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          "h-7 gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors",
+          isActive
+            ? "bg-primary/15 text-primary"
+            : "text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        )}
+      >
+        {label}
+      </Button>
+    </Link>
+  );
+}
+
+function NavRailSettingsButton({ pathname }: { pathname: string }) {
+  const isSettingsActive = pathname === "/settings" || pathname.startsWith("/settings/");
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="relative">
+          <Button
+            asChild
+            variant="ghost"
+            size="icon-sm"
+            className={cn(
+              "h-7 w-7",
+              isSettingsActive ? "text-sidebar-foreground" : "text-sidebar-foreground/60 hover:text-sidebar-foreground"
+            )}
+          >
+            <Link href="/settings">
+              <Gear size={15} weight={isSettingsActive ? "fill" : "regular"} />
+              <span className="sr-only">Settings</span>
+            </Link>
+          </Button>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">Settings</TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/src/components/layout/ChatListPanel.tsx b/src/components/layout/ChatListPanel.tsx
index 9c8469e..cc8dca2 100644
--- a/src/components/layout/ChatListPanel.tsx
+++ b/src/components/layout/ChatListPanel.tsx
@@ -6,14 +6,8 @@ import Link from "next/link";
 import { motion, AnimatePresence } from "motion/react";
 import {
   MagnifyingGlass,
-  FileArrowDown,
-  Plus,
   FolderPlus,
-  Lightning,
-  Plug,
-  Terminal,
-  Image,
-  WifiHigh,
+  Plus,
   Gear,
 } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
@@ -419,28 +413,17 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
 
   if (!open) return null;
 
-  const navItems = [
-    { href: "/skills", label: t('nav.skills' as TranslationKey), icon: Lightning },
-    { href: "/mcp", label: t('nav.mcp' as TranslationKey), icon: Plug },
-    { href: "/cli-tools", label: t('nav.cliTools' as TranslationKey), icon: Terminal },
-    { href: "/gallery", label: t('nav.gallery' as TranslationKey), icon: Image },
-    { href: "/bridge", label: t('nav.bridge' as TranslationKey), icon: WifiHigh },
-  ];
-
   return (
     <aside
-      className="hidden h-full shrink-0 flex-col overflow-hidden bg-sidebar/80 backdrop-blur-xl lg:flex"
+      className="hidden h-full shrink-0 flex-col overflow-hidden border-r border-sidebar-border/60 bg-sidebar lg:flex"
       style={{ width: width ?? 240 }}
     >
-      {/* macOS traffic lights spacing */}
-      <div className="h-5 shrink-0 mt-3" />
-
       {/* Top action bar: New Chat + Search */}
-      <div className="flex items-center gap-2 px-3 pb-2">
+      <div className="flex items-center gap-2 px-3 pt-3 pb-2 shrink-0">
         <Button
-          variant="outline"
+          variant="default"
           size="sm"
-          className="flex-1 justify-center gap-1.5 h-8 text-xs"
+          className="flex-1 justify-center gap-1.5 h-8 text-xs font-medium shadow-sm"
           disabled={creatingChat}
           onClick={handleNewChat}
         >
@@ -450,9 +433,9 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
-              variant="outline"
+              variant="ghost"
               size="icon-sm"
-              className="h-8 w-8 shrink-0"
+              className="h-8 w-8 shrink-0 text-sidebar-foreground/60 hover:text-sidebar-foreground"
               onClick={() => window.dispatchEvent(new CustomEvent('open-global-search'))}
             >
               <MagnifyingGlass size={14} />
@@ -463,33 +446,8 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
         </Tooltip>
       </div>
 
-      {/* Feature nav items */}
-      <div className="px-3 pb-2">
-        <div className="flex flex-col gap-0.5">
-          {navItems.map((item) => {
-            const isActive = pathname.startsWith(item.href);
-            return (
-              <Link key={item.href} href={item.href}>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className={`w-full justify-start gap-2 h-8 text-xs ${
-                    isActive
-                      ? "bg-accent text-accent-foreground font-medium"
-                      : "text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  <item.icon size={14} weight={isActive ? "fill" : "regular"} />
-                  {item.label}
-                </Button>
-              </Link>
-            );
-          })}
-        </div>
-      </div>
-
       {/* Separator */}
-      <div className="mx-3 border-t border-border/40" />
+      <div className="mx-3 border-t border-sidebar-border/50" />
 
       {/* Section title + add folder button (fixed, not scrolling) */}
       <div className="flex items-center justify-between px-5 pt-2 pb-1.5 shrink-0">
@@ -658,15 +616,15 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
       </ScrollArea>
 
       {/* Bottom: Settings */}
-      <div className="shrink-0 px-3 py-2">
+      <div className="shrink-0 px-3 pb-3 pt-2 border-t border-sidebar-border/50">
         <Link href="/settings">
           <Button
             variant="ghost"
             size="sm"
             className={`w-full justify-start gap-2 h-8 text-xs ${
               pathname.startsWith("/settings")
-                ? "bg-accent text-accent-foreground font-medium"
-                : "text-muted-foreground hover:text-foreground"
+                ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+                : "text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent"
             }`}
           >
             <Gear size={14} weight={pathname.startsWith("/settings") ? "fill" : "regular"} />
diff --git a/src/components/layout/UnifiedTopBar.tsx b/src/components/layout/UnifiedTopBar.tsx
index 2dc155a..604544b 100644
--- a/src/components/layout/UnifiedTopBar.tsx
+++ b/src/components/layout/UnifiedTopBar.tsx
@@ -114,10 +114,10 @@ export function UnifiedTopBar() {
 
   // On non-chat routes, render only a thin drag region (no visible bar)
   if (!isChatRoute) {
-    // Thin drag region for macOS window dragging — just enough for traffic light area
+    // Thin drag region for macOS window dragging
     return (
       <div
-        className="h-3 shrink-0"
+        className="h-0 shrink-0"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
       />
     );
@@ -126,7 +126,7 @@ export function UnifiedTopBar() {
   return (
     <>
       <div
-        className="flex h-12 shrink-0 items-center gap-2 bg-background px-3"
+        className="flex h-10 shrink-0 items-center gap-2 bg-background/50 px-3 border-b border-border/40"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
       >
         {/* Left: chat title + project folder */}
@@ -143,37 +143,37 @@ export function UnifiedTopBar() {
                   onChange={(e) => setEditTitle(e.target.value)}
                   onKeyDown={handleTitleKeyDown}
                   onBlur={handleSaveTitle}
-                  className="h-7 text-sm max-w-[200px]"
+                  className="h-6 text-xs max-w-[180px] px-2"
                 />
               </div>
             ) : (
-              <div className="flex items-center gap-1 cursor-default max-w-[200px]">
-                <h2 className="text-sm font-medium text-foreground/80 truncate">
+              <div className="flex items-center gap-1 cursor-default max-w-[180px]">
+                <h2 className="text-xs font-medium text-foreground/70 truncate">
                   {sessionTitle}
                 </h2>
                 <Button
                   variant="ghost"
                   size="icon"
                   onClick={handleStartEditTitle}
-                  className="shrink-0 h-auto w-auto p-0.5"
+                  className="shrink-0 h-auto w-auto p-0.5 opacity-0 group-hover:opacity-100"
                 >
-                  <PencilSimple size={12} className="text-muted-foreground" />
+                  <PencilSimple size={11} className="text-muted-foreground/60" />
                 </Button>
               </div>
             )
           )}
 
           {isChatRoute && projectName && sessionTitle && (
-            <span className="text-xs text-muted-foreground/60 shrink-0">/</span>
+            <span className="text-[10px] text-muted-foreground/40 shrink-0 mx-0.5">/</span>
           )}
 
           {isChatRoute && projectName && (
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  variant="ghost"
+                  variant="link"
                   size="sm"
-                  className="text-xs text-muted-foreground/60 shrink-0 hover:text-foreground transition-colors h-auto p-0"
+                  className="text-[11px] text-muted-foreground/50 shrink-0 hover:text-foreground/70 transition-colors h-auto p-0"
                   onClick={() => {
                     if (workingDirectory) {
                       if (window.electronAPI?.shell?.openPath) {
@@ -192,7 +192,7 @@ export function UnifiedTopBar() {
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                <p className="text-xs break-all">{workingDirectory}</p>
+                <p className="text-[10px] break-all">{workingDirectory}</p>
               </TooltipContent>
             </Tooltip>
           )}
@@ -203,7 +203,7 @@ export function UnifiedTopBar() {
 
         {/* Right: action buttons */}
         <div
-          className="flex items-center gap-1"
+          className="flex items-center gap-0.5"
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
         >
           {isChatRoute && (
@@ -213,16 +213,16 @@ export function UnifiedTopBar() {
                   <Button
                     variant={gitPanelOpen ? "secondary" : "ghost"}
                     size="sm"
-                    className={`h-7 gap-1 px-1.5 ${gitPanelOpen ? "" : "text-muted-foreground hover:text-foreground"}`}
+                    className={`h-7 gap-1 px-2 ${gitPanelOpen ? "bg-primary/10 text-primary" : "text-muted-foreground/60 hover:text-foreground/70"}`}
                     onClick={() => setGitPanelOpen(!gitPanelOpen)}
                   >
-                    <GitBranch size={16} />
+                    <GitBranch size={13} />
                     {currentBranch && (
-                      <span className="text-xs max-w-[100px] truncate">{currentBranch}</span>
+                      <span className="text-[11px] max-w-[80px] truncate">{currentBranch}</span>
                     )}
                     {gitDirtyCount > 0 && (
-                      <span className="flex items-center gap-0.5 text-[11px] text-amber-500">
-                        <DotOutline size={10} weight="fill" />
+                      <span className="flex items-center gap-0.5 text-[10px] text-amber-500">
+                        <DotOutline size={9} weight="fill" />
                         {gitDirtyCount}
                       </span>
                     )}
@@ -237,10 +237,10 @@ export function UnifiedTopBar() {
                   <Button
                     variant={fileTreeOpen ? "secondary" : "ghost"}
                     size="icon-sm"
-                    className={fileTreeOpen ? "" : "text-muted-foreground hover:text-foreground"}
+                    className={`h-7 w-7 ${fileTreeOpen ? "bg-primary/10 text-primary" : "text-muted-foreground/60 hover:text-foreground/70"}`}
                     onClick={() => setFileTreeOpen(!fileTreeOpen)}
                   >
-                    <TreeStructure size={16} />
+                    <TreeStructure size={14} />
                     <span className="sr-only">{t('topBar.fileTree')}</span>
                   </Button>
                 </TooltipTrigger>
@@ -252,15 +252,15 @@ export function UnifiedTopBar() {
                   <Button
                     variant={dashboardPanelOpen ? "secondary" : "ghost"}
                     size="icon-sm"
-                    className={dashboardPanelOpen ? "" : "text-muted-foreground hover:text-foreground"}
+                    className={`h-7 w-7 ${dashboardPanelOpen ? "bg-primary/10 text-primary" : "text-muted-foreground/60 hover:text-foreground/70"}`}
                     onClick={() => setDashboardPanelOpen(!dashboardPanelOpen)}
                   >
                     {isAssistantWorkspace
                       ? <img
                           src={buddySpecies ? (SPECIES_IMAGE_URL[buddySpecies as Species] || '') : EGG_IMAGE_URL}
-                          alt="" width={16} height={16} className="rounded-sm"
+                          alt="" width={14} height={14} className="rounded-[3px]"
                         />
-                      : <ChartBar size={16} />}
+                      : <ChartBar size={14} />}
                     <span className="sr-only">{t('topBar.dashboard')}</span>
                   </Button>
                 </TooltipTrigger>

From 3657c3bb6b4353632ef4a3a3e08142c249bd2873 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Mon, 8 Jun 2026 20:31:40 +0800
Subject: [PATCH 2/2] =?UTF-8?q?add:=E5=AE=8C=E5=96=84harness=20agent?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AFsesion=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/chat/[id]/page.tsx                |  5 ++-
 src/components/chat/ChatView.tsx          | 39 ++++++++++++++++++++++-
 src/components/layout/SessionListItem.tsx |  7 +++-
 3 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx
index d978a9e..a3f5a71 100644
--- a/src/app/chat/[id]/page.tsx
+++ b/src/app/chat/[id]/page.tsx
@@ -25,6 +25,7 @@ export default function ChatSessionPage({ params }: ChatSessionPageProps) {
   const [sessionInfoLoaded, setSessionInfoLoaded] = useState(false);
   const [sessionPermissionProfile, setSessionPermissionProfile] = useState<'default' | 'full_access'>('default');
   const [sessionMode, setSessionMode] = useState<'code' | 'plan'>('code');
+  const [sessionAgentMode, setSessionAgentMode] = useState<'claude' | 'agent'>('claude');
   const [sessionHasSummary, setSessionHasSummary] = useState(false);
   const { setWorkingDirectory, setSessionId, setSessionTitle: setPanelSessionTitle, setFileTreeOpen, setGitPanelOpen, setDashboardPanelOpen } = usePanel();
   const targetFilePath = searchParams.get('file') || undefined;
@@ -39,6 +40,7 @@ export default function ChatSessionPage({ params }: ChatSessionPageProps) {
     setSessionModel('');
     setSessionProviderId('');
     setSessionInfoLoaded(false);
+    setSessionAgentMode('claude');
 
     async function loadSession() {
       try {
@@ -65,6 +67,7 @@ export default function ChatSessionPage({ params }: ChatSessionPageProps) {
           setSessionProviderId(resolved.providerId);
           setSessionPermissionProfile(data.session.permission_profile || 'default');
           setSessionMode((data.session.mode as 'code' | 'plan') || 'code');
+          setSessionAgentMode((data.session.agent_mode as 'claude' | 'agent') || 'claude');
           setSessionHasSummary(!!data.session.context_summary);
         }
       } catch {
@@ -186,7 +189,7 @@ export default function ChatSessionPage({ params }: ChatSessionPageProps) {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <ChatView key={id} sessionId={id} initialMessages={messages} initialHasMore={hasMore} modelName={sessionModel} providerId={sessionProviderId} initialPermissionProfile={sessionPermissionProfile} initialMode={sessionMode} initialHasSummary={sessionHasSummary} />
+      <ChatView key={id} sessionId={id} initialMessages={messages} initialHasMore={hasMore} modelName={sessionModel} providerId={sessionProviderId} initialPermissionProfile={sessionPermissionProfile} initialMode={sessionMode} initialHasSummary={sessionHasSummary} initialAgentMode={sessionAgentMode} />
     </div>
   );
 }
diff --git a/src/components/chat/ChatView.tsx b/src/components/chat/ChatView.tsx
index 6ef76dc..c02968a 100644
--- a/src/components/chat/ChatView.tsx
+++ b/src/components/chat/ChatView.tsx
@@ -59,12 +59,13 @@ interface ChatViewProps {
   initialPermissionProfile?: 'default' | 'full_access';
   initialMode?: 'code' | 'plan';
   initialHasSummary?: boolean;
+  initialAgentMode?: 'claude' | 'agent';
 }
 
 /** Maximum messages kept in React state. Older messages are trimmed and reloaded on scroll. */
 const MAX_MESSAGES_IN_MEMORY = 300;
 
-export function ChatView({ sessionId, initialMessages = [], initialHasMore = false, modelName, providerId, initialPermissionProfile, initialMode, initialHasSummary }: ChatViewProps) {
+export function ChatView({ sessionId, initialMessages = [], initialHasMore = false, modelName, providerId, initialPermissionProfile, initialMode, initialHasSummary, initialAgentMode }: ChatViewProps) {
   const { setStreamingSessionId, workingDirectory, setPendingApprovalSessionId, setDashboardPanelOpen, setFileTreeOpen, setIsAssistantWorkspace } = usePanel();
   const { t } = useTranslation();
   const router = useRouter();
@@ -127,6 +128,7 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal
     });
   }, []);
   const [mode, setMode] = useState<string>(initialMode || 'code');
+  const [agentMode, setAgentMode] = useState<'claude' | 'agent'>(initialAgentMode || 'claude');
   const [currentModel, setCurrentModel] = useState(() => modelName || (typeof window !== 'undefined' ? localStorage.getItem('codepilot:last-model') : null) || 'sonnet');
   const [currentProviderId, setCurrentProviderId] = useState(() => providerId || (typeof window !== 'undefined' ? localStorage.getItem('codepilot:last-provider-id') : null) || '');
   const [selectedEffort, setSelectedEffort] = useState<string | undefined>(undefined);
@@ -235,6 +237,19 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal
   const sendMessageRef = useRef<(content: string, files?: FileAttachment[], systemPromptAppend?: string, displayOverride?: string, mentions?: MentionRef[]) => Promise<void>>(undefined);
   const initMetaRef = useRef<{ tools?: unknown; slash_commands?: unknown; skills?: unknown } | null>(null);
 
+  const handleAgentModeChange = useCallback((newAgentMode: 'claude' | 'agent') => {
+    setAgentMode(newAgentMode);
+    if (sessionId) {
+      fetch(`/api/chat/sessions/${sessionId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agent_mode: newAgentMode }),
+      }).then(() => {
+        window.dispatchEvent(new CustomEvent('session-updated'));
+      }).catch(() => { /* silent */ });
+    }
+  }, [sessionId]);
+
   const handleModeChange = useCallback((newMode: string) => {
     setMode(newMode);
     if (sessionId) {
@@ -876,6 +891,28 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal
           </Button>
         </div>
       )}
+      {/* Agent mode toggle */}
+      <div className="flex items-center justify-end gap-2 border-b border-border/50 px-4 py-1.5">
+        <span className="text-xs text-muted-foreground">Agent:</span>
+        <button
+          onClick={() => handleAgentModeChange(agentMode === 'claude' ? 'agent' : 'claude')}
+          className={`
+            relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring
+            ${agentMode === 'agent' ? 'bg-primary' : 'bg-muted'}
+          `}
+          aria-label="Toggle agent mode"
+        >
+          <span
+            className={`
+              inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200
+              ${agentMode === 'agent' ? 'translate-x-6' : 'translate-x-1'}
+            `}
+          />
+        </button>
+        <span className={`text-xs font-medium ${agentMode === 'agent' ? 'text-primary' : 'text-muted-foreground'}`}>
+          {agentMode === 'agent' ? 'Agent' : 'Claude'}
+        </span>
+      </div>
       <MessageList
         messages={messages}
         streamingContent={streamingContent}
diff --git a/src/components/layout/SessionListItem.tsx b/src/components/layout/SessionListItem.tsx
index 7d23d30..8cd4299 100644
--- a/src/components/layout/SessionListItem.tsx
+++ b/src/components/layout/SessionListItem.tsx
@@ -98,8 +98,13 @@ export function SessionListItem({
           )}
         </span>
         {/* Title — flex-1 + truncate ensures it shrinks */}
-        <span className="flex-1 min-w-0 line-clamp-1 text-[13px] font-medium leading-tight break-all">
+        <span className="flex-1 min-w-0 flex items-center gap-1.5 line-clamp-1 text-[13px] font-medium leading-tight break-all">
           {session.title}
+          {session.agent_mode === 'agent' && (
+            <span className="shrink-0 inline-flex items-center rounded bg-primary/20 px-1 py-0.5 text-[10px] font-medium text-primary">
+              Agent
+            </span>
+          )}
         </span>
         {/* Right area — fixed width, time or dots swap via opacity */}
         <span className="shrink-0 w-[38px] flex items-center justify-end">