@nextclaw/ui 0.14.1 → 0.14.3

package/src/features/settings/pages/providers-config-page.tsx

@@ -133,11 +133,11 @@ export function ProvidersConfigPage() {
                 </Button>
               </PopoverTrigger>
               <PopoverContent className="w-[42rem] max-w-[calc(100vw-2rem)] p-3" align="start">
-                <div className="mb-2 px-1 text-xs font-semibold text-gray-500">{t('providerTemplatePickerTitle')}</div>
+                <div className="mb-2 px-1 text-xs font-semibold text-muted-foreground">{t('providerTemplatePickerTitle')}</div>
                 <div className="grid max-h-[24rem] grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3">
                   <button
                     type="button"
-                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-gray-300 bg-white px-3 py-2 text-left hover:border-primary/40 hover:bg-gray-50"
+                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border bg-card px-3 py-2 text-left transition-colors hover:border-primary/40 hover:bg-accent/70"
                     onClick={async () => {
                       try {
                         const result = await createProvider.mutateAsync({ data: { providerType: null } });
@@ -150,8 +150,8 @@ export function ProvidersConfigPage() {
                       }
                     }}
                   >
-                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-gray-200 bg-white" />
-                    <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-gray-800">
+                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-border bg-background" />
+                    <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
                       {t('providerAddCustom')}
                     </span>
                   </button>
@@ -159,7 +159,7 @@ export function ProvidersConfigPage() {
                     <button
                       key={template.providerType}
                       type="button"
-                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-left hover:border-primary/40 hover:bg-gray-50"
+                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border bg-card px-3 py-2 text-left transition-colors hover:border-primary/40 hover:bg-accent/70"
                       onClick={async () => {
                         try {
                           const result = await createProvider.mutateAsync({ data: { providerType: template.providerType } });
@@ -175,10 +175,10 @@ export function ProvidersConfigPage() {
                       <LogoBadge
                         name={template.providerType}
                         src={template.logo ? `/logos/${template.logo}` : null}
-                        className="h-8 w-8 rounded-lg border border-gray-200 bg-white"
+                        className="h-8 w-8 rounded-lg border border-border bg-background"
                         imgClassName="h-4 w-4 object-contain"
                       />
-                      <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-gray-800">
+                      <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
                         {template.displayName || template.providerType}
                       </span>
                     </button>
@@ -188,9 +188,9 @@ export function ProvidersConfigPage() {
             </Popover>
           </ConfigSplitPaneHeader>
 
-          <div className="border-b border-gray-100 px-4 py-3">
+          <div className="border-b border-border/70 px-4 py-3">
             <div className="relative">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
               <Input
                 value={query}
                 onChange={(event) => setQuery(event.target.value)}
@@ -223,8 +223,8 @@ export function ProvidersConfigPage() {
                   className={cn(
                     'w-full rounded-xl border p-2.5 text-left transition-all',
                     resolvedSelectedProvider === provider.providerId
-                      ? 'border-primary/30 bg-primary-50/40 shadow-sm'
-                      : 'border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70',
+                      ? 'border-primary/35 bg-primary-50/45 text-foreground shadow-sm'
+                      : 'border-border bg-card text-muted-foreground hover:border-primary/35 hover:bg-accent/70 hover:text-accent-foreground',
                   )}
                 >
                   <div className="relative min-h-10">
@@ -234,15 +234,15 @@ export function ProvidersConfigPage() {
                         src={template?.logo ? `/logos/${template.logo}` : null}
                         className={cn(
                           'h-10 w-10 rounded-lg border',
-                          isReady ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white',
+                          isReady ? 'border-primary/35 bg-background' : 'border-border bg-background',
                         )}
                         imgClassName="h-5 w-5 object-contain"
-                        fallback={<span className="text-sm font-semibold uppercase text-gray-500">{provider.providerId[0]}</span>}
+                        fallback={<span className="text-sm font-semibold uppercase text-muted-foreground">{provider.providerId[0]}</span>}
                       />
                       <div className="min-w-0">
-                        <p className="truncate text-sm font-semibold text-gray-900">{providerLabel}</p>
-                        <p className="truncate font-mono text-[10px] text-gray-400">{provider.providerId}</p>
-                        <p className="line-clamp-1 text-[11px] text-gray-500">
+                        <p className="truncate text-sm font-semibold text-foreground">{providerLabel}</p>
+                        <p className="truncate font-mono text-[10px] text-muted-foreground/65">{provider.providerId}</p>
+                        <p className="line-clamp-1 text-[11px] text-muted-foreground">
                           {description} · {provider.models?.length ?? 0}
                         </p>
                       </div>
@@ -268,7 +268,7 @@ export function ProvidersConfigPage() {
                         <PopoverTrigger asChild>
                           <button
                             type="button"
-                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-accent hover:text-accent-foreground"
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >

package/src/platforms/desktop/components/__tests__/desktop-app-shell.test.tsx

@@ -1,8 +1,9 @@
 import { act, render, screen } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter } from "react-router-dom";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { DesktopAppShell } from "@/platforms/desktop/components/desktop-app-shell";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 
 vi.mock("@/app/components/layout/sidebar", () => ({
   Sidebar: () => <aside data-testid="settings-sidebar">Settings Sidebar</aside>,
@@ -16,7 +17,10 @@ type WindowStateListener = (snapshot: { isMaximized: boolean }) => void;
 
 let windowStateListener: WindowStateListener | null = null;
 
-function setDesktopPlatform(platform: string | null, isMaximized = false): void {
+function setDesktopPlatform(
+  platform: string | null,
+  isMaximized = false,
+): void {
   windowStateListener = null;
   window.nextclawDesktop = platform
     ? ({
@@ -59,6 +63,11 @@ function renderDesktopShell(platform: string | null, isMobileLayout = false) {
 }
 
 describe("DesktopAppShell", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    viewportLayoutManager.resetForTests();
+  });
+
   afterEach(() => {
     setDesktopPlatform(null);
   });
@@ -68,29 +77,58 @@ describe("DesktopAppShell", () => {
 
     const chrome = screen.getByTestId("desktop-window-chrome");
     const sidebarChrome = screen.getByTestId("desktop-window-chrome-sidebar");
-    const resizeStrip = screen.getByTestId("desktop-window-chrome-resize-strip");
+    const resizeStrip = screen.getByTestId(
+      "desktop-window-chrome-resize-strip",
+    );
     const controls = screen.getByTestId("desktop-window-controls");
 
     expect(chrome).toBeTruthy();
-    expect(chrome.parentElement?.style.getPropertyValue("--desktop-titlebar-height")).toBe("40px");
+    expect(
+      chrome.parentElement?.style.getPropertyValue("--desktop-titlebar-height"),
+    ).toBe("40px");
     expect(chrome.className).toContain("bg-secondary");
     expect(chrome.className).not.toContain(" shrink-0 border-b ");
-    expect(chrome.className).toContain("after:left-[var(--desktop-sidebar-width)]");
+    expect(chrome.className).toContain(
+      "after:left-[var(--desktop-sidebar-width)]",
+    );
     expect(chrome.className).toContain("after:border-b");
     expect(chrome.className).toContain("desktop-window-drag");
-    expect(sidebarChrome.className).toContain("w-[var(--desktop-sidebar-width)]");
+    expect(sidebarChrome.className).toContain(
+      "w-[var(--desktop-sidebar-width)]",
+    );
     expect(sidebarChrome.className).not.toContain("border-b");
     expect(sidebarChrome.className).toContain("desktop-window-drag");
     expect(resizeStrip.className).toContain("desktop-window-no-drag");
     expect(resizeStrip.className).toContain("top-0");
     expect(resizeStrip.className).toContain("h-1");
     expect(controls.className).toContain("desktop-window-no-drag");
-    expect(screen.getByLabelText("Minimize").className).toContain("desktop-window-no-drag");
-    expect(screen.getByLabelText("Maximize").className).toContain("desktop-window-no-drag");
-    expect(screen.getByLabelText("Close").className).toContain("desktop-window-no-drag");
+    expect(screen.getByLabelText("Minimize").className).toContain(
+      "desktop-window-no-drag",
+    );
+    expect(screen.getByLabelText("Maximize").className).toContain(
+      "desktop-window-no-drag",
+    );
+    expect(screen.getByLabelText("Close").className).toContain(
+      "desktop-window-no-drag",
+    );
     expect(screen.getByTestId("app-content")).toBeTruthy();
   });
 
+  it("uses the collapsed sidebar width in Windows chrome from the shared layout store", () => {
+    viewportLayoutManager.setSidebarCollapsed(true);
+
+    renderDesktopShell("win32");
+
+    const chromeRoot = screen.getByTestId(
+      "desktop-window-chrome",
+    ).parentElement;
+
+    expect(chromeRoot?.style.getPropertyValue("--desktop-sidebar-width")).toBe(
+      "56px",
+    );
+    expect(screen.getByAltText("NextClaw")).toBeTruthy();
+  });
+
   it("switches the Windows maximize button to restore while maximized", async () => {
     renderDesktopShell("win32");
 
@@ -100,7 +138,9 @@ describe("DesktopAppShell", () => {
       windowStateListener?.({ isMaximized: true });
     });
 
-    expect(screen.getByLabelText("Restore").className).toContain("desktop-window-no-drag");
+    expect(screen.getByLabelText("Restore").className).toContain(
+      "desktop-window-no-drag",
+    );
     expect(screen.queryByLabelText("Maximize")).toBeNull();
   });
 

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -11,9 +11,12 @@ import { MobileBottomNav } from "@/platforms/mobile";
 import type { DocBrowserCustomTabRenderers } from "@/shared/components/doc-browser/doc-browser-renderer.types";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
 import { cn } from "@/shared/lib/utils";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styles";
 
 const DocBrowser = lazy(async () => ({
-  default: (await import("@/shared/components/doc-browser/doc-browser")).DocBrowser,
+  default: (await import("@/shared/components/doc-browser/doc-browser"))
+    .DocBrowser,
 }));
 
 type DesktopAppShellProps = {
@@ -38,8 +41,17 @@ export function DesktopAppShell({
   children,
 }: DesktopAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
-  const showMobileBottomNav = isMobileLayout && !isChatSessionDetailRoute(pathname);
+  const isSidebarCollapsed = useViewportLayoutStore(
+    (state) => state.isSidebarCollapsed,
+  );
+  const showMobileBottomNav =
+    isMobileLayout && !isChatSessionDetailRoute(pathname);
   const shouldUseWindowsChrome = isWindowsDesktopHost();
+  const desktopSidebarWidth = isSidebarCollapsed
+    ? `${SIDEBAR_RAIL_WIDTH_PX}px`
+    : isMainRoute
+      ? "280px"
+      : "240px";
 
   return (
     <div
@@ -47,13 +59,19 @@ export function DesktopAppShell({
         "h-screen flex flex-col overflow-hidden bg-background font-sans text-foreground",
         shouldUseWindowsChrome ? "rounded-[10px]" : null,
       )}
-      style={shouldUseWindowsChrome ? ({
-        "--desktop-titlebar-height": "40px",
-        "--desktop-caption-safe-right": "140px",
-        "--desktop-sidebar-width": isMainRoute ? "280px" : "240px",
-      } as CSSProperties) : undefined}
+      style={
+        shouldUseWindowsChrome
+          ? ({
+              "--desktop-titlebar-height": "40px",
+              "--desktop-caption-safe-right": "140px",
+              "--desktop-sidebar-width": desktopSidebarWidth,
+            } as CSSProperties)
+          : undefined
+      }
     >
-      {shouldUseWindowsChrome ? <DesktopWindowChrome /> : null}
+      {shouldUseWindowsChrome ? (
+        <DesktopWindowChrome sidebarCollapsed={isSidebarCollapsed} />
+      ) : null}
       <div className="flex min-h-0 flex-1 overflow-hidden">
         {!isMainRoute && <Sidebar mode="settings" />}
         <div className="flex-1 flex min-w-0 overflow-hidden relative">
@@ -70,7 +88,10 @@ export function DesktopAppShell({
           </div>
           {isDocBrowserOpen && docBrowserMode === "docked" ? (
             <Suspense fallback={null}>
-              <DocBrowser customTabRenderers={docBrowserRenderers} dockControls={docBrowserDockControls} />
+              <DocBrowser
+                customTabRenderers={docBrowserRenderers}
+                dockControls={docBrowserDockControls}
+              />
             </Suspense>
           ) : null}
           {sideDock}
@@ -79,7 +100,10 @@ export function DesktopAppShell({
       {showMobileBottomNav ? <MobileBottomNav /> : null}
       {isDocBrowserOpen && docBrowserMode === "floating" ? (
         <Suspense fallback={null}>
-          <DocBrowser customTabRenderers={docBrowserRenderers} dockControls={docBrowserDockControls} />
+          <DocBrowser
+            customTabRenderers={docBrowserRenderers}
+            dockControls={docBrowserDockControls}
+          />
         </Suspense>
       ) : null}
     </div>

package/src/platforms/desktop/components/desktop-window-chrome.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Copy, Minus, Square, X } from "lucide-react";
 import { BrandHeader } from "@/shared/components/common/brand-header";
+import { cn } from "@/shared/lib/utils";
 import type { DesktopWindowStateSnapshot } from "@/platforms/desktop/types/desktop-update.types";
 
 type DesktopWindowControlAction = "minimize" | "toggle-maximize" | "close";
@@ -17,7 +18,11 @@ const windowControls: WindowControlDefinition[] = [
   { action: "close", label: "Close", icon: X, variant: "danger" },
 ];
 
-export function DesktopWindowChrome() {
+export function DesktopWindowChrome({
+  sidebarCollapsed = false,
+}: {
+  sidebarCollapsed?: boolean;
+}) {
   const isMaximized = useDesktopWindowMaximizedState();
   const maximizeControl: WindowControlDefinition = isMaximized
     ? { action: "toggle-maximize", label: "Restore", icon: Copy }
@@ -33,21 +38,37 @@ export function DesktopWindowChrome() {
         data-testid="desktop-window-chrome-resize-strip"
       />
       <div
-        className="desktop-window-drag relative z-10 flex h-full w-[var(--desktop-sidebar-width)] shrink-0 items-center bg-secondary pl-4 pr-3 text-secondary-foreground"
+        className={cn(
+          "desktop-window-drag relative z-10 flex h-full w-[var(--desktop-sidebar-width)] shrink-0 items-center bg-secondary text-secondary-foreground",
+          sidebarCollapsed ? "justify-center px-0" : "pl-4 pr-3",
+        )}
         data-testid="desktop-window-chrome-sidebar"
       >
-        <BrandHeader
-          className="flex min-w-0 shrink-0 items-center gap-2.5"
-          density="chrome"
-        />
+        {sidebarCollapsed ? (
+          <img
+            src="/logo.svg"
+            alt="NextClaw"
+            className="h-6 w-6 shrink-0 object-contain"
+          />
+        ) : (
+          <BrandHeader
+            className="flex min-w-0 shrink-0 items-center gap-2.5"
+            density="chrome"
+          />
+        )}
       </div>
       <div
         className="desktop-window-no-drag absolute right-0 top-0 z-20 flex h-full w-[var(--desktop-caption-safe-right)] items-start justify-end"
         data-testid="desktop-window-controls"
       >
-        {[windowControls[0], maximizeControl, windowControls[1]].map((control) => (
-          <DesktopWindowControlButton key={control.action} control={control} />
-        ))}
+        {[windowControls[0], maximizeControl, windowControls[1]].map(
+          (control) => (
+            <DesktopWindowControlButton
+              key={control.action}
+              control={control}
+            />
+          ),
+        )}
       </div>
     </header>
   );
@@ -86,14 +107,18 @@ function useDesktopWindowMaximizedState(): boolean {
     let isSubscribed = true;
     const desktopApi = window.nextclawDesktop;
 
-    void desktopApi?.getWindowState?.().then((snapshot: DesktopWindowStateSnapshot) => {
-      if (isSubscribed) {
+    void desktopApi
+      ?.getWindowState?.()
+      .then((snapshot: DesktopWindowStateSnapshot) => {
+        if (isSubscribed) {
+          setIsMaximized(snapshot.isMaximized);
+        }
+      });
+    const unsubscribe = desktopApi?.onWindowStateChanged?.(
+      (snapshot: DesktopWindowStateSnapshot) => {
         setIsMaximized(snapshot.isMaximized);
-      }
-    });
-    const unsubscribe = desktopApi?.onWindowStateChanged?.((snapshot: DesktopWindowStateSnapshot) => {
-      setIsMaximized(snapshot.isMaximized);
-    });
+      },
+    );
 
     return () => {
       isSubscribed = false;

package/src/shared/components/config-split-page.tsx

@@ -3,7 +3,7 @@ import { ArrowLeft, type LucideIcon } from "lucide-react";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
-const CARD_CLASS = "min-w-0 overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
+const CARD_CLASS = "min-w-0 overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
 type DivProps = HTMLAttributes<HTMLDivElement>; type SectionProps = HTMLAttributes<HTMLElement>;
 
 function ConfigSplitPane({ className, ...props }: SectionProps) {
@@ -37,7 +37,7 @@ export function ConfigSplitPage({
               <button
                 type="button"
                 onClick={onMobileBack}
-                className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900"
+                className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
               >
                 <ArrowLeft className="h-4 w-4" />
                 <span>{mobileListLabel ?? t("backToMain")}</span>
@@ -81,7 +81,7 @@ export function ConfigSplitEmptyPane({ className, ...props }: SectionProps) {
 }
 
 export function ConfigSplitPaneHeader({ className, ...props }: DivProps) {
-  return <div className={cn("shrink-0 border-b border-gray-100", className)} {...props} />;
+  return <div className={cn("shrink-0 border-b border-border/70", className)} {...props} />;
 }
 
 export function ConfigSplitPaneBody({
@@ -102,7 +102,7 @@ export function ConfigSplitPaneBody({
 }
 
 export function ConfigSplitPaneFooter({ className, ...props }: DivProps) {
-  return <div className={cn("shrink-0 border-t border-gray-100", className)} {...props} />;
+  return <div className={cn("shrink-0 border-t border-border/70", className)} {...props} />;
 }
 
 export function ConfigSelectionCard({
@@ -117,8 +117,8 @@ export function ConfigSelectionCard({
       className={cn(
         "w-full rounded-xl border p-2.5 text-left transition-all",
         active
-          ? "border-primary/30 bg-primary-50/40 shadow-sm"
-          : "border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70",
+          ? "border-primary/35 bg-primary-50/45 text-foreground shadow-sm"
+          : "border-border bg-card text-muted-foreground hover:border-primary/35 hover:bg-accent/70 hover:text-accent-foreground",
         className,
       )}
       {...props}
@@ -140,16 +140,16 @@ export function ConfigSplitEmptyState({
   return (
     <div
       className={cn(
-        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 px-4 py-10 text-center",
+        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/60 px-4 py-10 text-center",
         className,
       )}
       {...props}
     >
-      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white">
-        <Icon className="h-5 w-5 text-gray-300" />
+      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-card">
+        <Icon className="h-5 w-5 text-muted-foreground/45" />
       </div>
-      <p className="text-sm font-medium text-gray-700">{title}</p>
-      {description ? <p className="mt-2 text-xs text-gray-500">{description}</p> : null}
+      <p className="text-sm font-medium text-foreground">{title}</p>
+      {description ? <p className="mt-2 text-xs text-muted-foreground">{description}</p> : null}
     </div>
   );
 }

package/src/shared/components/doc-browser/doc-browser-home-page.tsx

@@ -5,10 +5,10 @@ export function DocBrowserHomePage() {
   return (
     <div className="flex h-full items-center justify-center bg-background px-5 py-6">
       <div className="flex max-w-[260px] flex-col items-center gap-3 text-center">
-        <span className="flex h-12 w-12 items-center justify-center rounded-lg border border-gray-100 bg-gray-50 text-gray-600 shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
+        <span className="flex h-12 w-12 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
           <Boxes className="h-5 w-5" />
         </span>
-        <span className="text-sm font-medium text-gray-800">{t('docBrowserHomeTitle')}</span>
+        <span className="text-sm font-medium text-foreground">{t('docBrowserHomeTitle')}</span>
       </div>
     </div>
   );

package/src/shared/components/doc-browser/doc-browser-panel-parts.tsx

@@ -38,15 +38,15 @@ export function DocBrowserDocsToolbar({
   }
 
   return (
-    <div className="flex items-center gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
+    <div className="flex items-center gap-2 border-b border-border/70 bg-card px-3.5 py-2 shrink-0">
       <form onSubmit={onSubmit} className="flex-1 relative">
-        <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+        <Search className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/70" />
         <input
           type="text"
           value={urlInput}
           onChange={(e) => onUrlInputChange(e.target.value)}
           placeholder={t('docBrowserSearchPlaceholder')}
-          className="w-full h-8 pl-8 pr-3 rounded-lg bg-gray-50 border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 transition-colors placeholder:text-gray-400"
+          className="h-8 w-full rounded-lg border border-border bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/30"
         />
       </form>
     </div>
@@ -91,7 +91,7 @@ export function DocBrowserExternalLink({ currentUrl, isDocsTab }: { currentUrl:
   }
 
   return (
-    <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-t border-gray-200 shrink-0">
+    <div className="flex items-center justify-between border-t border-border/70 bg-muted/55 px-4 py-2 shrink-0">
       <a
         href={currentUrl}
         target="_blank"

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -111,16 +111,16 @@ export function DocBrowserTabStrip({
       tabs={compactTabs}
       actions={actions}
       className={cn(
-        "h-11 gap-2 px-2.5 bg-background border-[#f1e7d4] shrink-0 select-none",
+        "h-11 gap-2 border-border/70 bg-card px-2.5 shrink-0 select-none",
         isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
       )}
       scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-1.5"
       tabsClassName="items-center gap-1.5"
       actionsClassName="h-full items-center gap-1"
-      actionButtonClassName="rounded-md p-1.5 hover:text-gray-700 disabled:opacity-60"
+      actionButtonClassName="rounded-md p-1.5 hover:text-foreground disabled:opacity-60"
       tabBaseClassName="group inline-flex min-w-0 items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors"
-      activeTabClassName="bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
-      inactiveTabClassName="bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]"
+      activeTabClassName="border-primary/30 bg-primary-50/70 text-foreground shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
+      inactiveTabClassName="border-border bg-muted/60 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
       labelClassName="px-1 text-xs font-normal"
       onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
       onScrollPointerDown={(event) => event.stopPropagation()}

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -359,10 +359,10 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
     <div
       data-testid="doc-browser-panel"
       className={cn(
-        'flex flex-col bg-white overflow-hidden relative',
+        'relative flex flex-col overflow-hidden bg-card text-card-foreground',
         isFullscreen
           ? 'fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
-          : 'rounded-2xl shadow-2xl border border-gray-200',
+          : 'rounded-2xl border border-border shadow-2xl',
       )}
       style={
         isFullscreen
@@ -398,7 +398,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
             onPointerDown={startFloatResize('bottom')}
           />
           <div
-            className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize z-30 flex items-center justify-center text-gray-300 hover:text-gray-500 transition-colors"
+            className="absolute bottom-0 right-0 z-30 flex h-4 w-4 cursor-se-resize items-center justify-center text-muted-foreground/45 transition-colors hover:text-muted-foreground"
             data-testid="doc-browser-resize-bottom-right"
             onPointerDown={startFloatResize('bottom-right')}
           >

package/src/shared/components/resizable-right-panel/resizable-right-panel.tsx

@@ -36,7 +36,7 @@ export function ResizableRightPanel({ children, className, style, defaultWidth =
   return (
     <aside
       {...props}
-      className={cn("relative flex h-full min-h-0 shrink-0 overflow-hidden bg-white", overlay ? "fixed inset-0 z-40" : "border-l border-gray-200", className)}
+      className={cn("relative flex h-full min-h-0 shrink-0 overflow-hidden bg-card text-card-foreground", overlay ? "fixed inset-0 z-40" : "border-l border-border", className)}
       style={overlay ? style : { ...style, width }}
     >
       {!overlay ? (

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -27,7 +27,7 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
         aria-label={label}
         className={cn(
           'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed',
-          'text-gray-500 hover:bg-gray-100 hover:text-gray-900 disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300',
+          'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
           className
         )}
       >

package/src/shared/components/ui/button.tsx

@@ -9,12 +9,12 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-gray-200 bg-white hover:bg-gray-50 hover:text-gray-800 text-gray-600',
-        secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200/80',
-        ghost: 'hover:bg-gray-100/80 hover:text-gray-800',
+        outline: 'border border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-muted text-foreground hover:bg-accent hover:text-accent-foreground',
+        ghost: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         primary: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
-        subtle: 'bg-gray-100 text-gray-600 hover:bg-gray-200/80',
+        subtle: 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
         'primary-outline': 'border border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground'
       },
       size: {

package/src/shared/components/ui/card.tsx

@@ -8,8 +8,8 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-2xl border border-gray-200/50 bg-white text-card-foreground shadow-card transition-all duration-base',
-      hover && 'hover:shadow-card-hover hover:border-gray-200',
+      'rounded-2xl border border-border bg-card text-card-foreground shadow-card transition-all duration-base',
+      hover && 'hover:border-primary/25 hover:shadow-card-hover',
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      'text-[15px] font-semibold leading-tight tracking-tight text-gray-900',
+      'text-[15px] font-semibold leading-tight tracking-tight text-foreground',
       className
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-[13px] text-gray-400 leading-relaxed', className)}
+    className={cn('text-[13px] text-muted-foreground leading-relaxed', className)}
     {...props}
   />
 ));