@nextclaw/ui 0.15.21 → 0.15.22

package/src/app/styles/design-system.css

@@ -5,6 +5,12 @@
  */
 
 @layer base {
+   input:focus,
+   textarea:focus {
+      outline: none;
+      box-shadow: none;
+   }
+
    :root {
       color-scheme: light;
 
@@ -70,6 +76,9 @@
       /* Accent */
       --accent: var(--brand-50);
       --accent-foreground: var(--brand-700);
+      --interaction-hover: hsl(0 0% 96%);
+      --interaction-selection: hsl(211 100% 92%);
+      --interaction-selection-border: hsl(211 75% 84%);
 
       /* Muted */
       --muted: var(--gray-100);
@@ -717,6 +726,9 @@
       --secondary-foreground: var(--gray-800);
       --accent: 151 32% 18%;
       --accent-foreground: 148 34% 84%;
+      --interaction-hover: hsl(var(--gray-200));
+      --interaction-selection: hsl(211 48% 30%);
+      --interaction-selection-border: hsl(211 48% 42%);
       --muted: var(--gray-100);
       --muted-foreground: var(--gray-500);
       --destructive: 0 70% 52%;

package/src/features/chat/components/chat-sidebar-list-mode-switch.tsx

@@ -10,7 +10,7 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
         type="button"
         aria-pressed={!isProjectFirstView}
         onClick={() => onSelectMode('time-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
+        className={cn('rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
       >
         {t('chatSidebarViewTime')}
       </button>
@@ -19,7 +19,7 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
         type="button"
         aria-pressed={isProjectFirstView}
         onClick={() => onSelectMode('project-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
+        className={cn('rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
       >
         {t('chatSidebarViewProject')}
       </button>

package/src/features/chat/components/conversation/__tests__/chat-conversation-content.test.tsx

@@ -60,6 +60,7 @@ function renderContent(
     isContextCompacting?: boolean;
     isLoadingPreviousMessages?: boolean;
     onLoadPreviousMessages?: () => Promise<void>;
+    showWelcome?: boolean;
   } = {},
 ) {
   return render(
@@ -74,8 +75,9 @@ function renderContent(
       isSending={false}
       messages={messages}
       sessionKey="session-1"
-      showWelcome={false}
+      showWelcome={options.showWelcome ?? false}
       onLoadPreviousMessages={options.onLoadPreviousMessages ?? vi.fn()}
+      welcomeSlot={<div data-testid="conversation-welcome" />}
     />,
   );
 }
@@ -94,6 +96,22 @@ it("renders manual context compaction feedback after the message list", () => {
   expect(screen.getByTestId("context-compaction-pending")).toBeTruthy();
 });
 
+it("fades the conversation into the docked input without obscuring the final message", () => {
+  const { container } = renderContent();
+  const scrollContainer = container.querySelector<HTMLElement>(
+    '[data-chat-scroll-container="true"]',
+  );
+  expect(scrollContainer?.className).toContain("[mask-image:linear-gradient");
+  expect(scrollContainer?.className).toContain("[-webkit-mask-image:linear-gradient");
+  expect(scrollContainer?.firstElementChild?.className).toContain("pb-7");
+
+  const { container: welcomeContainer } = renderContent({ showWelcome: true });
+  const welcomeScrollContainer = welcomeContainer.querySelector<HTMLElement>(
+    '[data-chat-scroll-container="true"]',
+  );
+  expect(welcomeScrollContainer?.className).not.toContain("[mask-image:linear-gradient");
+});
+
 it("uses the centered reading track in flat message layout", () => {
   useChatMessageLayoutStore.getState().setLayout("flat");
 

package/src/features/chat/components/conversation/__tests__/chat-conversation-header-section.test.tsx

@@ -279,7 +279,7 @@ describe("ChatConversationHeaderSection", () => {
     renderHeaderSection("mobile");
     await user.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("codex");
+    expect(mocks.createSession).toHaveBeenCalledWith({ sessionType: "codex" });
   });
 
   it("keeps the new-session shortcut mobile-only", () => {

package/src/features/chat/components/conversation/chat-conversation-content.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/features/chat/features/message/components/chat-message-list.container";
 import { ChatConversationTrack } from "@/features/chat/components/conversation/chat-conversation-track";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import { t } from "@/shared/lib/i18n";
 
 type ChatConversationContentProps = {
@@ -81,13 +82,13 @@ export function ChatConversationContent({
         ref={threadRef}
         onScroll={handleScroll}
         data-chat-scroll-container="true"
-        className="h-full overflow-y-auto custom-scrollbar"
+        className={showWelcome ? "h-full overflow-y-auto custom-scrollbar" : `h-full overflow-y-auto custom-scrollbar ${SCROLL_BOTTOM_EDGE_FADE_CLASS}`}
         style={{ overflowAnchor: "none" }}
       >
         {showWelcome ? (
           (welcomeSlot ?? null)
         ) : (
-          <div ref={contentRef}>
+          <div ref={contentRef} className="pb-7">
             {hasMessages ? (
               <ChatConversationTrack className="relative py-4 sm:py-5">
                 {historyError ? (
@@ -109,9 +110,7 @@ export function ChatConversationContent({
                 ) : null}
                 <ChatMessageListContainer
                   messages={messages}
-                  isSending={
-                    hasMessages && isSending && isAwaitingAssistantOutput
-                  }
+                  isSending={isSending && isAwaitingAssistantOutput}
                   scrollRef={threadRef}
                   sessionKey={sessionKey}
                 />
@@ -132,7 +131,7 @@ export function ChatConversationContent({
           label={t("chatScrollToBottom")}
           onClick={scrollToBottom}
           tooltipSide="top"
-          className="absolute bottom-4 left-1/2 z-10 h-9 w-9 -translate-x-1/2 rounded-full border border-border bg-background/90 text-foreground shadow-lg backdrop-blur hover:bg-accent hover:text-accent-foreground"
+          className="absolute bottom-4 left-1/2 z-10 h-9 w-9 -translate-x-1/2 rounded-full border border-border bg-background/90 text-foreground shadow-lg backdrop-blur hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         />
       ) : null}
     </div>

package/src/features/chat/components/conversation/chat-conversation-header.tsx

@@ -76,7 +76,7 @@ export function ChatConversationHeader({
             icon={<ArrowLeft className="h-4 w-4" />}
             label={t("chat")}
             onClick={onBackToList}
-            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
           />
         ) : null}
         {leading}

package/src/features/chat/components/layout/__tests__/chat-sidebar-read-state.test.tsx

@@ -189,7 +189,7 @@ describe("ChatSidebar read state sync", () => {
     const { container } = renderReadStateSidebar(createTestQueryClient());
 
     expect(
-      screen.getByText("Sessions").parentElement?.nextElementSibling?.className,
+      container.querySelector(".custom-scrollbar")?.className,
     ).toContain("[mask-image:linear-gradient");
     expect(
       screen.getByRole("button", { name: "Settings menu" }).parentElement

package/src/features/chat/components/layout/__tests__/chat-sidebar-session-area.test.tsx

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSidebarSessionArea } from "@/features/chat/components/layout/chat-sidebar-desktop-layout";
+
+function renderSessionArea(isProjectFirstView: boolean) {
+  const onAddProject = vi.fn();
+  const onSelectMode = vi.fn();
+
+  render(
+    <ChatSidebarSessionArea
+      defaultSessionType="native"
+      groups={[]}
+      isCollapsed={false}
+      isLoading={false}
+      isProjectFirstView={isProjectFirstView}
+      onAddProject={onAddProject}
+      onSelectMode={onSelectMode}
+      projectGroups={[]}
+      renderSessionItem={() => <></>}
+      sessionTypeOptions={[]}
+    />,
+  );
+
+  return { onAddProject, onSelectMode };
+}
+
+describe("ChatSidebarSessionArea", () => {
+  it("reserves the action-row height while switching list modes", () => {
+    const { onSelectMode } = renderSessionArea(false);
+
+    expect(
+      screen.getByRole("button", { name: "Time" }).parentElement?.parentElement?.className,
+    ).toContain("h-7");
+    fireEvent.click(screen.getByRole("button", { name: "Project" }));
+
+    expect(onSelectMode).toHaveBeenCalledWith("project-first");
+  });
+
+  it("uses a folder-plus icon for the add-project action", () => {
+    const { onAddProject } = renderSessionArea(true);
+    const addProjectButton = screen.getByRole("button", { name: "Add Project" });
+
+    expect(
+      addProjectButton
+        .querySelector("svg")
+        ?.classList.contains("lucide-folder-plus"),
+    ).toBe(true);
+    fireEvent.click(addProjectButton);
+
+    expect(onAddProject).toHaveBeenCalledOnce();
+  });
+});

package/src/features/chat/components/layout/__tests__/chat-sidebar.test.tsx

@@ -81,6 +81,9 @@ function expectCodexSelectedInSessionTypeMenu() {
     screen.getByRole("button", { name: /Codex/i }).getAttribute("aria-pressed"),
   ).toBe("true");
 }
+function expectSessionCreated(sessionType: string, projectRoot?: string) {
+  expect(mocks.createSession).toHaveBeenCalledWith({ projectRoot, sessionType });
+}
 
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
@@ -249,7 +252,7 @@ describe("ChatSidebar create and list basics", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
+    expectSessionCreated("codex");
   });
 
   it("hydrates the desktop new-session type from stored preferences", async () => {
@@ -265,7 +268,7 @@ describe("ChatSidebar create and list basics", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
+    expectSessionCreated("codex");
   });
 
   it("does not animate the desktop create task button width during runtime option hydration", () => {
@@ -311,7 +314,7 @@ describe("ChatSidebar create and list basics", () => {
   it("renders the lightweight list mode switch in the session header row and toggles to project view", () => {
     renderSidebar();
 
-    expect(screen.getByText("Sessions")).not.toBeNull();
+    expect(screen.queryByText("Sessions")).toBeNull();
     fireEvent.click(screen.getByRole("button", { name: "Project" }));
 
     expect(mocks.setListMode).toHaveBeenCalledWith("project-first");
@@ -332,7 +335,7 @@ describe("ChatSidebar create and list basics", () => {
     fireEvent.click(screen.getByText("Codex"));
 
     expect(mocks.setQuery).toHaveBeenCalledWith("release notes");
-    expect(mocks.createSession).toHaveBeenCalledWith("codex", undefined);
+    expectSessionCreated("codex");
     expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 
@@ -377,7 +380,7 @@ describe("ChatSidebar create and list basics", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "New Task" }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith("native", undefined);
+    expectSessionCreated("native");
     expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 
@@ -582,10 +585,7 @@ describe("ChatSidebar project-first mode", () => {
     );
     fireEvent.click(screen.getByText("Codex"));
 
-    expect(mocks.createSession).toHaveBeenCalledWith(
-      "codex",
-      "/tmp/project-beta",
-    );
+    expectSessionCreated("codex", "/tmp/project-beta");
     expect(mocks.goToSession).not.toHaveBeenCalled();
   });
 
@@ -617,10 +617,7 @@ describe("ChatSidebar project-first mode", () => {
       screen.getByRole("button", { name: "New Task · project-gamma" }),
     );
 
-    expect(mocks.createSession).toHaveBeenCalledWith(
-      "native",
-      "/tmp/project-gamma",
-    );
+    expectSessionCreated("native", "/tmp/project-gamma");
     expect(mocks.goToSession).not.toHaveBeenCalled();
   });
 
@@ -652,10 +649,7 @@ describe("ChatSidebar project-first mode", () => {
     );
     fireEvent.click(screen.getByText("Codex"));
 
-    expect(mocks.createSession).toHaveBeenCalledWith(
-      "codex",
-      "/tmp/project-mobile",
-    );
+    expectSessionCreated("codex", "/tmp/project-mobile");
     expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 });

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -12,29 +12,20 @@ export type ChatPageProps = {
   view: MainPanelView;
 };
 type UseChatSessionSyncParams = {
-  view: MainPanelView;
   routeSessionKey: string | null;
-  syncRouteSessionSelection: (params: {
-    isChatView: boolean;
-    routeSessionKey: string | null;
-  }) => void;
+  syncRouteSessionSelection: (routeSessionKey: string | null) => void;
 };
 export function useChatSessionSync(params: UseChatSessionSyncParams): void {
   const {
-    view,
     routeSessionKey,
     syncRouteSessionSelection,
   } = params;
 
   useLayoutEffect(() => {
-    syncRouteSessionSelection({
-      isChatView: view === "chat",
-      routeSessionKey,
-    });
+    syncRouteSessionSelection(routeSessionKey);
   }, [
     routeSessionKey,
     syncRouteSessionSelection,
-    view,
   ]);
 }
 type ChatPageLayoutProps = {

package/src/features/chat/components/layout/chat-sidebar-desktop-layout.tsx

@@ -12,6 +12,7 @@ import { t, type I18nLanguage } from "@/shared/lib/i18n";
 import type { UiTheme } from "@/shared/lib/theme";
 import { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import {
   AlarmClock,
   Bot,
@@ -19,7 +20,7 @@ import {
   Inbox,
   PanelLeftClose,
   PanelLeftOpen,
-  Plus,
+  FolderPlus,
 } from "lucide-react";
 import { useInboxUnreadCount } from "@/features/inbox";
 import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
@@ -32,7 +33,6 @@ import {
   SIDEBAR_RAIL_PADDING_X_CLASS,
   SIDEBAR_RAIL_STACK_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
-  SIDEBAR_SCROLL_EDGE_FADE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
 const navItems = [
@@ -86,7 +86,7 @@ export function ChatSidebarDesktopHeader({
           ? "justify-center px-2 py-1.5"
           : isWindowsHost
             ? "justify-end px-3 py-1.5"
-            : "gap-2 px-5 py-2",
+            : "gap-2 px-4 py-2",
         isCollapsed && shouldReserveMacWindowControls ? "pt-8" : null,
       )}
     >
@@ -108,36 +108,29 @@ export function ChatSidebarDesktopNav({
 }) {
   const unreadCount = useInboxUnreadCount();
   return (
-    <>
-      <div className={cn("pb-2", isCollapsed ? "px-0" : "px-3")}>
-        <ul className={isCollapsed ? SIDEBAR_RAIL_STACK_CLASS : "space-y-0.5"}>
-          {navItems.map((item) => (
-            <li
-              key={item.target}
-              className={isCollapsed ? "flex justify-center" : undefined}
-            >
-              <SidebarNavLinkItem
-                to={item.target}
-                label={item.label()}
-                icon={item.icon}
-                density="compact"
-                collapsed={isCollapsed}
-                indicator={item.target === "/inbox" && unreadCount > 0}
-                trailing={item.target === "/inbox" && unreadCount > 0
-                  ? unreadCount > 99 ? "99+" : unreadCount
-                  : undefined}
-              />
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div
-        className={cn(
-          "border-t border-border/70",
-          isCollapsed ? "mx-2 my-1.5" : "mx-4",
-        )}
-      />
-    </>
+    <div className={cn("pb-1", isCollapsed ? "px-0" : "px-3")}>
+      <ul className={isCollapsed ? SIDEBAR_RAIL_STACK_CLASS : "space-y-0.5"}>
+        {navItems.map((item) => (
+          <li
+            key={item.target}
+            className={isCollapsed ? "flex justify-center" : undefined}
+          >
+            <SidebarNavLinkItem
+              to={item.target}
+              label={item.label()}
+              icon={item.icon}
+              density="compact"
+              collapsed={isCollapsed}
+              indicator={item.target === "/inbox" && unreadCount > 0}
+              trailing={item.target === "/inbox" && unreadCount > 0
+                ? unreadCount > 99 ? "99+" : unreadCount
+                : undefined}
+              className={isCollapsed ? undefined : "rounded-lg px-2.5 py-1.5"}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
 
@@ -172,14 +165,11 @@ export function ChatSidebarSessionArea({
 
   return (
     <>
-      <div className="flex items-center justify-between px-5 pb-2 pt-3">
-        <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
-          {t("chatSidebarTaskRecords")}
-        </div>
-        <div className="flex items-center gap-1">
+      <div className="flex items-center justify-end px-4 pb-1 pt-2">
+        <div className="flex h-7 items-center gap-1.5">
           {isProjectFirstView ? (
             <IconActionButton
-              icon={<Plus className="h-3.5 w-3.5" />}
+              icon={<FolderPlus className="h-3.5 w-3.5" />}
               label={t("chatProjectAdd")}
               onClick={onAddProject}
             />
@@ -193,8 +183,8 @@ export function ChatSidebarSessionArea({
 
       <div
         className={cn(
-          "custom-scrollbar min-h-0 flex-1 overflow-y-auto px-3 pb-7 pt-2",
-          SIDEBAR_SCROLL_EDGE_FADE_CLASS,
+          "custom-scrollbar min-h-0 flex-1 overflow-y-auto px-3 pb-4 pt-1",
+          SCROLL_BOTTOM_EDGE_FADE_CLASS,
         )}
       >
         <ChatSidebarSessionList
@@ -246,7 +236,7 @@ export function ChatSidebarDesktopFooter({
   return (
     <div
       className={cn(
-        "py-3",
+        "py-2",
         isCollapsed
           ? cn("flex justify-center", SIDEBAR_RAIL_PADDING_X_CLASS)
           : "px-3",

package/src/features/chat/components/layout/chat-sidebar-toolbar.tsx

@@ -1,4 +1,4 @@
-import { Button, type ButtonProps } from "@/shared/components/ui/button";
+import { Button } from "@/shared/components/ui/button";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { Input } from "@/shared/components/ui/input";
 import {
@@ -20,51 +20,6 @@ import {
 } from "@/app/components/layout/sidebar-rail.styles";
 
 type SessionTypeOption = ChatSessionTypeOption;
-type NewSessionActionStyleVariant =
-  | "neutralSurface"
-  | "brandSoft"
-  | "brandTextSurface"
-  | "brandSolid";
-
-const NEW_SESSION_ACTION_STYLE_VARIANT: NewSessionActionStyleVariant =
-  "brandSoft";
-
-const NEW_SESSION_ACTION_STYLE_CLASSES: Record<
-  NewSessionActionStyleVariant,
-  {
-    leftVariant: ButtonProps["variant"];
-    leftClassName: string;
-    rightClassName: string;
-  }
-> = {
-  neutralSurface: {
-    leftVariant: "ghost",
-    leftClassName:
-      "bg-card text-foreground shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground hover:shadow-sm active:bg-accent",
-    rightClassName:
-      "bg-card text-muted-foreground shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground hover:shadow-sm active:bg-accent",
-  },
-  brandSoft: {
-    leftVariant: "ghost",
-    leftClassName:
-      "bg-primary/10 text-primary shadow-none ring-1 ring-primary/10 transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
-    rightClassName:
-      "bg-primary/10 text-primary shadow-none ring-1 ring-primary/10 transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
-  },
-  brandTextSurface: {
-    leftVariant: "ghost",
-    leftClassName:
-      "bg-card text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
-    rightClassName:
-      "bg-card text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
-  },
-  brandSolid: {
-    leftVariant: "primary",
-    leftClassName: "",
-    rightClassName:
-      "bg-primary text-primary-foreground shadow-sm hover:bg-primary-600 hover:text-primary-foreground active:bg-primary-700",
-  },
-};
 
 type ChatSidebarToolbarProps = {
   query: string;
@@ -117,8 +72,6 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
     collapsed = false,
   } = props;
   const supportsSessionTypeSwitch = sessionTypeOptions.length > 1;
-  const actionStyle =
-    NEW_SESSION_ACTION_STYLE_CLASSES[NEW_SESSION_ACTION_STYLE_VARIANT];
 
   if (collapsed) {
     return (
@@ -183,21 +136,20 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
 
   return (
     <>
-      <div className="px-4 pb-3">
-        <div className="flex items-center gap-2">
+      <div className="px-4 pb-2">
+        <div className="flex overflow-hidden rounded-lg bg-primary/10 text-primary ring-1 ring-primary/10">
           <Button
-            variant={actionStyle.leftVariant}
+            variant="ghost"
             className={cn(
-              "min-w-0 rounded-xl",
-              actionStyle.leftClassName,
-              supportsSessionTypeSwitch ? "flex-1 rounded-r-md" : "w-full",
+              "min-w-0 rounded-none bg-transparent px-3 text-primary shadow-none hover:bg-primary/10 hover:text-primary-700 active:bg-primary/15",
+              supportsSessionTypeSwitch ? "flex-1" : "w-full",
             )}
             onClick={() => {
               onCreateMenuOpenChange(false);
               onCreateSession(selectedNewSessionType);
             }}
           >
-            <Plus className="mr-2 h-4 w-4" />
+            <Plus className="mr-1.5 h-4 w-4" />
             {t("chatSidebarNewTask")}
           </Button>
           {supportsSessionTypeSwitch ? (
@@ -208,19 +160,16 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
               <PopoverTrigger asChild>
                 <IconActionButton
                   icon={
-                    <span className="inline-flex items-center gap-0.5">
+                    <span className="inline-flex items-center gap-1">
                       <SessionTypeTriggerIcon
                         option={selectedNewSessionTypeOption}
                       />
-                      <ChevronDown className="h-3 w-3 opacity-60" />
+                      <ChevronDown className="h-3 w-3 opacity-50" />
                     </span>
                   }
                   label={t("chatSessionTypeLabel")}
                   tooltip={t("chatSessionTypeLabel")}
-                  className={cn(
-                    "h-9 w-12 shrink-0 rounded-xl rounded-l-md",
-                    actionStyle.rightClassName,
-                  )}
+                  className="h-9 w-12 shrink-0 rounded-none border-l border-primary/10 bg-transparent text-primary shadow-none hover:bg-primary/10 hover:text-primary-700 active:bg-primary/15"
                 />
               </PopoverTrigger>
               <ChatPopoverContent
@@ -241,14 +190,14 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
         </div>
       </div>
 
-      <div className="px-4 pb-3">
+      <div className="px-4 pb-2">
         <div className="relative">
-          <Search className="pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" />
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
             placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-9 rounded-lg pl-8 text-xs"
+            className="h-8 rounded-lg border-transparent bg-background/55 pl-8 text-xs shadow-none hover:bg-background/75"
           />
         </div>
       </div>

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -102,13 +102,10 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             aria-label={t("settingsMenu")}
-            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-background/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <Settings className="h-4 w-4 shrink-0 text-muted-foreground/70" />
             <span className="min-w-0 flex-1 text-left">{t("settings")}</span>
-            <span className="max-w-[112px] truncate text-[13px] text-muted-foreground">
-              {currentThemeLabel} / {currentLanguageLabel}
-            </span>
           </button>
         </PopoverTrigger>
       )}

package/src/features/chat/features/conversation/components/__tests__/session-conversation-area.test.tsx

@@ -389,7 +389,7 @@ describe("SessionConversationArea input boundary", () => {
 
     expect(screen.getByTestId("conversation-bottom-slot")).toBeTruthy();
     expect(screen.getByText(/出错了|Something went wrong/)).toBeTruthy();
-    expect(screen.getByText("Run failed: Invalid API Key")).toBeTruthy();
+    expect(screen.getByText(/Failed · Invalid API Key|失败 · Invalid API Key/)).toBeTruthy();
   });
 
   it("does not surface user-cancelled previews as conversation errors", () => {