@nextclaw/ui 0.14.1 → 0.14.3

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

@@ -6,8 +6,9 @@ import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
-import { PREFERENCE_KEYS, type ChatSessionTypeOptionView } from "@/shared/lib/api";
-
+import { PREFERENCE_KEYS } from "@/shared/lib/api";
+import type { ChatSessionTypeOptionView } from "@/shared/lib/api";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 const mocks = vi.hoisted(() => ({
   createSession: vi.fn(() => "draft-session-key"),
   goToSession: vi.fn(),
@@ -30,7 +31,6 @@ const mocks = vi.hoisted(() => ({
   sessionItems: [] as NcpSessionListItemView[],
   isLoading: false,
 }));
-
 vi.mock("@/shared/lib/api", async (importOriginal) => {
   const actual = await importOriginal();
   return {
@@ -39,14 +39,12 @@ vi.mock("@/shared/lib/api", async (importOriginal) => {
     updatePreference: mocks.updatePreference,
   };
 });
-
 function createSessionItem(
   session: NcpSessionListItemView["session"],
   runStatus?: NcpSessionListItemView["runStatus"],
 ): NcpSessionListItemView {
   return { session, runStatus };
 }
-
 function setSessionTypes(
   options: ChatSessionTypeOptionView[],
   defaultType = "native",
@@ -63,7 +61,6 @@ function setSessionTypes(
     },
   });
 }
-
 function sidebarElement(variant?: "desktop" | "mobile") {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -79,14 +76,14 @@ function sidebarElement(variant?: "desktop" | "mobile") {
     </QueryClientProvider>
   );
 }
-
 function renderSidebar(variant?: "desktop" | "mobile") {
   return render(sidebarElement(variant));
 }
-
 function expectCodexSelectedInSessionTypeMenu() {
   fireEvent.click(screen.getByLabelText("Session Type"));
-  expect(screen.getByRole("button", { name: /Codex/i }).getAttribute("aria-pressed")).toBe("true");
+  expect(
+    screen.getByRole("button", { name: /Codex/i }).getAttribute("aria-pressed"),
+  ).toBe("true");
 }
 
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
@@ -191,6 +188,8 @@ vi.mock("@/features/system-status", () => ({
 }));
 
 function resetSidebarTestState() {
+  window.localStorage.clear();
+  viewportLayoutManager.resetForTests();
   mocks.createSession.mockReset();
   mocks.createSession.mockReturnValue("draft-session-key");
   mocks.goToSession.mockReset();
@@ -208,10 +207,13 @@ function resetSidebarTestState() {
     value: null,
   });
   mocks.updatePreference.mockReset();
-  mocks.updatePreference.mockImplementation(async (key: string, value: string) => ({
-    key, value,
-    updatedAt: "2026-06-17T00:00:00.000Z",
-  }));
+  mocks.updatePreference.mockImplementation(
+    async (key: string, value: string) => ({
+      key,
+      value,
+      updatedAt: "2026-06-17T00:00:00.000Z",
+    }),
+  );
   mocks.updateNcpSession.mockReset();
   mocks.updateNcpSession.mockResolvedValue({});
   mocks.agents = [];
@@ -291,7 +293,7 @@ describe("ChatSidebar create and list basics", () => {
 
     expect(
       screen.getByTestId("brand-header").parentElement?.className,
-    ).toContain("py-2.5");
+    ).toMatch(/(?:^|\s)py-2(?:\s|$)/);
   });
 
   it("shows setup required status for runtime session types that are not ready yet", () => {
@@ -364,9 +366,9 @@ describe("ChatSidebar create and list basics", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "Settings menu" }));
     fireEvent.click(screen.getByRole("combobox", { name: "Theme" }));
-    fireEvent.click(screen.getByRole("option", { name: "Cool" }));
+    fireEvent.click(screen.getByRole("option", { name: "Probe" }));
 
-    expect(mocks.setTheme).toHaveBeenCalledWith("cool");
+    expect(mocks.setTheme).toHaveBeenCalledWith("probe");
   });
 
   it("creates the default session directly from the compact mobile add button when no menu is needed", () => {

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

@@ -50,7 +50,7 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
       {view === "chat" ? (
         isMobile ? <ChatMobileShell /> : <ChatConversationPanel />
       ) : (
-        <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+        <section className="flex-1 min-h-0 overflow-hidden bg-background">
           {view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">

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

@@ -0,0 +1,247 @@
+import { BrandHeader } from "@/shared/components/common/brand-header";
+import { StatusBadge } from "@/shared/components/common/status-badge";
+import { ChatSidebarListModeSwitch } from "@/features/chat/components/chat-sidebar-list-mode-switch";
+import type {
+  groupSessionsByDate,
+  groupSessionsByProject,
+} from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import type { useSystemStatus } from "@/features/system-status";
+import { cn } from "@/shared/lib/utils";
+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 {
+  AlarmClock,
+  Bot,
+  BrainCircuit,
+  PanelLeftClose,
+  PanelLeftOpen,
+} from "lucide-react";
+import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
+import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
+import { isWindowsDesktopHost } from "@/platforms/desktop";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import {
+  SIDEBAR_RAIL_CONTROL_CLASS,
+  SIDEBAR_RAIL_ICON_CLASS,
+  SIDEBAR_RAIL_PADDING_X_CLASS,
+  SIDEBAR_RAIL_STACK_CLASS,
+  SIDEBAR_RAIL_SURFACE_CLASS,
+} from "@/app/components/layout/sidebar-rail.styles";
+
+const navItems = [
+  {
+    target: "/cron",
+    label: () => t("chatSidebarScheduledTasks"),
+    icon: AlarmClock,
+  },
+  {
+    target: "/skills",
+    label: () => t("chatSidebarSkills"),
+    icon: BrainCircuit,
+  },
+  { target: "/agents", label: () => t("agentsPageTitle"), icon: Bot },
+];
+
+function ChatSidebarCollapseButton({ isCollapsed }: { isCollapsed: boolean }) {
+  const label = isCollapsed ? t("sidebarExpand") : t("sidebarCollapse");
+  const Icon = isCollapsed ? PanelLeftOpen : PanelLeftClose;
+
+  return (
+    <IconActionButton
+      icon={<Icon className={SIDEBAR_RAIL_ICON_CLASS} />}
+      label={label}
+      className={cn(SIDEBAR_RAIL_SURFACE_CLASS, isCollapsed && SIDEBAR_RAIL_CONTROL_CLASS)}
+      onClick={viewportLayoutManager.toggleSidebarCollapsed}
+    />
+  );
+}
+
+export function ChatSidebarDesktopHeader({
+  connectionStatus,
+  isCollapsed,
+}: {
+  connectionStatus: ReturnType<typeof useSystemStatus>["connectionStatus"];
+  isCollapsed: boolean;
+}) {
+  const isWindowsHost = isWindowsDesktopHost();
+  const shouldReserveMacWindowControls =
+    typeof window !== "undefined" &&
+    window.nextclawDesktop?.platform === "darwin";
+
+  return (
+    <div
+      className={cn(
+        "flex items-center",
+        isCollapsed
+          ? "justify-center px-2 py-1.5"
+          : isWindowsHost
+            ? "justify-end px-3 py-1.5"
+            : "gap-2 px-5 py-2",
+        isCollapsed && shouldReserveMacWindowControls ? "pt-8" : null,
+      )}
+    >
+      {isCollapsed || isWindowsHost ? null : (
+        <BrandHeader
+          className="flex min-w-0 flex-1 items-center gap-2"
+          suffix={<StatusBadge status={connectionStatus} />}
+        />
+      )}
+      <ChatSidebarCollapseButton isCollapsed={isCollapsed} />
+    </div>
+  );
+}
+
+export function ChatSidebarDesktopNav({
+  isCollapsed,
+}: {
+  isCollapsed: boolean;
+}) {
+  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}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div
+        className={cn(
+          "border-t border-border/70",
+          isCollapsed ? "mx-2 my-1.5" : "mx-4",
+        )}
+      />
+    </>
+  );
+}
+
+export function ChatSidebarSessionArea({
+  defaultSessionType,
+  groups,
+  isCollapsed,
+  isLoading,
+  isProjectFirstView,
+  onCreateSession,
+  onSelectMode,
+  projectGroups,
+  renderSessionItem,
+  sessionTypeOptions,
+}: {
+  defaultSessionType: string;
+  groups: ReturnType<typeof groupSessionsByDate>;
+  isCollapsed: boolean;
+  isLoading: boolean;
+  isProjectFirstView: boolean;
+  onCreateSession: (sessionType: string, projectRoot?: string | null) => void;
+  onSelectMode: (mode: "time-first" | "project-first") => void;
+  projectGroups: ReturnType<typeof groupSessionsByProject>;
+  renderSessionItem: (item: NcpSessionListItemView) => JSX.Element;
+  sessionTypeOptions: Parameters<
+    typeof ChatSidebarSessionList
+  >[0]["sessionTypeOptions"];
+}) {
+  if (isCollapsed) {
+    return <div className="min-h-0 flex-1" aria-hidden="true" />;
+  }
+
+  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>
+        <ChatSidebarListModeSwitch
+          isProjectFirstView={isProjectFirstView}
+          onSelectMode={onSelectMode}
+        />
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
+        <ChatSidebarSessionList
+          isLoading={isLoading}
+          isProjectFirstView={isProjectFirstView}
+          groups={groups}
+          projectGroups={projectGroups}
+          defaultSessionType={defaultSessionType}
+          sessionTypeOptions={sessionTypeOptions}
+          renderSessionItem={renderSessionItem}
+          onCreateSession={onCreateSession}
+        />
+      </div>
+    </>
+  );
+}
+
+export function ChatSidebarDesktopFooter({
+  currentLanguage,
+  currentLanguageLabel,
+  currentTheme,
+  currentThemeLabel,
+  isCollapsed,
+  isOpen,
+  languageOptions,
+  onOpenApps,
+  onOpenChange,
+  onOpenDocs,
+  onSelectLanguage,
+  onSelectTheme,
+  themeOptions,
+}: {
+  currentLanguage: I18nLanguage;
+  currentLanguageLabel: string;
+  currentTheme: UiTheme;
+  currentThemeLabel: string;
+  isCollapsed: boolean;
+  isOpen: boolean;
+  languageOptions: Array<{ value: I18nLanguage; label: string }>;
+  onOpenApps: () => void;
+  onOpenChange: (open: boolean) => void;
+  onOpenDocs: () => void;
+  onSelectLanguage: (language: I18nLanguage) => void;
+  onSelectTheme: (theme: UiTheme) => void;
+  themeOptions: Array<{
+    value: UiTheme;
+    label: string;
+  }>;
+}) {
+  return (
+    <div
+      className={cn(
+        "border-t border-border/70 py-3",
+        isCollapsed
+          ? cn("flex justify-center", SIDEBAR_RAIL_PADDING_X_CLASS)
+          : "px-3",
+      )}
+    >
+      <ChatSidebarUtilityMenu
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        currentTheme={currentTheme}
+        currentThemeLabel={currentThemeLabel}
+        themeOptions={themeOptions}
+        onSelectTheme={onSelectTheme}
+        currentLanguage={currentLanguage}
+        currentLanguageLabel={currentLanguageLabel}
+        languageOptions={languageOptions}
+        onSelectLanguage={onSelectLanguage}
+        onOpenDocs={onOpenDocs}
+        onOpenApps={onOpenApps}
+        collapsed={isCollapsed}
+      />
+    </div>
+  );
+}

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

@@ -8,12 +8,19 @@ import {
 } from "@/shared/components/ui/popover";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
 import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
-import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
 import { Bot, ChevronDown, Plus, Search } from "lucide-react";
+import {
+  SIDEBAR_RAIL_CONTROL_CLASS,
+  SIDEBAR_RAIL_ICON_CLASS,
+  SIDEBAR_RAIL_ITEM_GAP_CLASS,
+  SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS,
+  SIDEBAR_RAIL_SURFACE_CLASS,
+} from "@/app/components/layout/sidebar-rail.styles";
 
-type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+type SessionTypeOption = ChatSessionTypeOption;
 type NewSessionActionStyleVariant =
   | "neutralSurface"
   | "brandSoft"
@@ -34,23 +41,23 @@ const NEW_SESSION_ACTION_STYLE_CLASSES: Record<
   neutralSurface: {
     leftVariant: "ghost",
     leftClassName:
-      "bg-white/90 text-gray-700 shadow-none transition-[background-color,color,box-shadow] hover:bg-white hover:text-gray-950 hover:shadow-sm active:bg-white/95",
+      "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-white/90 text-gray-600 shadow-none transition-[background-color,color,box-shadow] hover:bg-white hover:text-gray-900 hover:shadow-sm active:bg-white/95",
+      "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 transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
+      "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 transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
+      "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-white/90 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/10 hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
+      "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-white/90 text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-primary/10 hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
+      "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",
@@ -72,6 +79,7 @@ type ChatSidebarToolbarProps = {
   onCreateSession: (sessionType: string) => void;
   onSelectNewSessionType: (sessionType: string) => void;
   onQueryChange: (query: string) => void;
+  collapsed?: boolean;
 };
 
 function getMobileCreateOptions(params: {
@@ -122,11 +130,73 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
     onCreateSession,
     onSelectNewSessionType,
     onQueryChange,
+    collapsed = false,
   } = props;
   const supportsSessionTypeSwitch = sessionTypeOptions.length > 1;
   const actionStyle =
     NEW_SESSION_ACTION_STYLE_CLASSES[NEW_SESSION_ACTION_STYLE_VARIANT];
 
+  if (collapsed) {
+    return (
+      <div className="px-2 pb-2">
+        <div
+          className={cn(
+            "flex flex-col items-center",
+            SIDEBAR_RAIL_ITEM_GAP_CLASS,
+          )}
+        >
+          <IconActionButton
+            icon={<Plus className={SIDEBAR_RAIL_ICON_CLASS} />}
+            label={t("chatSidebarNewTask")}
+            className={cn(
+              SIDEBAR_RAIL_CONTROL_CLASS,
+              SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS,
+            )}
+            onClick={() => {
+              onCreateMenuOpenChange(false);
+              onCreateSession(selectedNewSessionType);
+            }}
+          />
+          {supportsSessionTypeSwitch ? (
+            <Popover
+              open={isCreateMenuOpen}
+              onOpenChange={onCreateMenuOpenChange}
+            >
+              <PopoverTrigger asChild>
+                <IconActionButton
+                  icon={
+                    <SessionTypeTriggerIcon
+                      option={selectedNewSessionTypeOption}
+                    />
+                  }
+                  label={t("chatSessionTypeLabel")}
+                  className={cn(
+                    SIDEBAR_RAIL_CONTROL_CLASS,
+                    SIDEBAR_RAIL_SURFACE_CLASS,
+                  )}
+                />
+              </PopoverTrigger>
+              <PopoverContent
+                align="start"
+                side="right"
+                className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+              >
+                <ChatSessionTypeMenu
+                  options={sessionTypeOptions}
+                  selectedSessionType={selectedNewSessionType}
+                  onSelect={(sessionType) => {
+                    onSelectNewSessionType(sessionType);
+                    onCreateMenuOpenChange(false);
+                  }}
+                />
+              </PopoverContent>
+            </Popover>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <div className="px-4 pb-3">
@@ -136,9 +206,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
             className={cn(
               "min-w-0 rounded-xl",
               actionStyle.leftClassName,
-              supportsSessionTypeSwitch
-                ? "flex-1 rounded-r-md"
-                : "w-full",
+              supportsSessionTypeSwitch ? "flex-1 rounded-r-md" : "w-full",
             )}
             onClick={() => {
               onCreateMenuOpenChange(false);
@@ -157,7 +225,9 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
                 <IconActionButton
                   icon={
                     <span className="inline-flex items-center gap-0.5">
-                      <SessionTypeTriggerIcon option={selectedNewSessionTypeOption} />
+                      <SessionTypeTriggerIcon
+                        option={selectedNewSessionTypeOption}
+                      />
                       <ChevronDown className="h-3 w-3 opacity-60" />
                     </span>
                   }
@@ -171,7 +241,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
               </PopoverTrigger>
               <PopoverContent
                 align="end"
-                className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+                className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
               >
                 <ChatSessionTypeMenu
                   options={sessionTypeOptions}
@@ -189,7 +259,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
 
       <div className="px-4 pb-3">
         <div className="relative">
-          <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-gray-400" />
+          <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
@@ -224,28 +294,31 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
     <div className="px-4 pb-2 pt-1">
       <div className="flex items-center gap-2">
         <div className="relative min-w-0 flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
             placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-9 rounded-full border-transparent bg-gray-100/80 pl-9 pr-3 text-[13px] shadow-none focus:border-gray-200/80 focus:bg-white"
+            className="h-9 rounded-full border-transparent bg-muted pl-9 pr-3 text-[13px] shadow-none focus:border-border focus:bg-card"
           />
         </div>
 
         {hasCreateMenu ? (
-          <Popover open={isCreateMenuOpen} onOpenChange={onCreateMenuOpenChange}>
+          <Popover
+            open={isCreateMenuOpen}
+            onOpenChange={onCreateMenuOpenChange}
+          >
             <PopoverTrigger asChild>
               <IconActionButton
                 icon={<Plus className="h-4 w-4" />}
                 label={t("chatSidebarNewTask")}
                 tooltip={false}
-                className="h-9 w-9 shrink-0 rounded-full bg-gray-100/80 text-gray-700 shadow-none hover:bg-gray-200/80 hover:text-gray-900"
+                className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
               />
             </PopoverTrigger>
             <PopoverContent
               align="end"
-              className="w-60 rounded-3xl border border-gray-200/80 bg-white p-2 shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
+              className="w-60 rounded-3xl border border-border bg-popover p-2 text-popover-foreground shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
             >
               <ChatSessionTypeMenu
                 options={createOptions}
@@ -263,7 +336,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
           <IconActionButton
             icon={<Plus className="h-4 w-4" />}
             label={t("chatSidebarNewTask")}
-            className="h-9 w-9 shrink-0 rounded-full bg-gray-100/80 text-gray-700 shadow-none hover:bg-gray-200/80 hover:text-gray-900"
+            className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
             onClick={() => onCreateSession(defaultSessionType)}
           />
         )}