@nextclaw/ui 0.26.2 → 0.26.4

package/src/features/settings/components/config/provider-model-suggestions-panel.tsx

@@ -69,7 +69,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
         <button
           type='button'
           aria-expanded={expanded}
-          className='flex min-w-0 flex-1 items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground'
+          className='flex min-w-0 flex-1 items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground'
           onClick={() => onExpandedChange(!expanded)}
         >
           <Sparkles className='h-3.5 w-3.5 shrink-0 text-primary' />
@@ -81,7 +81,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
         {models.length <= BULK_ADD_LIMIT ? (
           <button
             type='button'
-            className='shrink-0 rounded-lg px-2 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/10'
+            className='shrink-0 rounded-lg px-2 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-[var(--interaction-hover)]'
             onClick={() => addModels(models)}
           >
             {t('providerModelsSuggestionsAddAll')}
@@ -105,7 +105,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
             {visibleModels.map((modelName) => (
               <label
                 key={modelName}
-                className='grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-muted/70'
+                className='grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-[var(--interaction-hover)]'
               >
                 <input
                   type='checkbox'
@@ -137,7 +137,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
             <button
               type='button'
               disabled={selectedModels.length === 0}
-              className='shrink-0 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary transition-colors hover:bg-primary/15 disabled:cursor-not-allowed disabled:opacity-45'
+              className='shrink-0 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary transition-colors hover:bg-[var(--interaction-hover)] disabled:cursor-not-allowed disabled:opacity-45'
               onClick={() => addModels(selectedModels)}
             >
               {t('providerModelsSuggestionsAddSelected')}

package/src/features/settings/components/config/provider-pill-selector.tsx

@@ -16,7 +16,7 @@ export function ProviderPillSelector(props: ProviderPillSelectorProps) {
             type="button"
             onClick={() => onChange(option.value)}
             aria-pressed={selected}
-            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-foreground/15 bg-foreground text-background' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'}`}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-[var(--interaction-selection-border)] bg-[var(--interaction-selection)] text-foreground' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-[var(--interaction-hover)] hover:text-foreground'}`}
           >
             {option.label}
           </button>

package/src/features/settings/pages/appearance-settings-page.tsx

@@ -100,8 +100,8 @@ export function AppearanceSettingsPage() {
                     className={cn(
                       'flex min-w-0 items-start gap-3 rounded-lg px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                       selected
-                        ? 'bg-card text-foreground shadow-sm'
-                        : 'text-muted-foreground hover:bg-card/60 hover:text-foreground'
+                        ? 'bg-[var(--interaction-selection)] text-foreground'
+                        : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground'
                     )}
                   >
                     <span

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

@@ -156,7 +156,7 @@ export function ProvidersConfigPage() {
                 <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-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-muted/45'
+                    className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-[var(--interaction-hover)]'
                     onClick={async () => {
                       try {
                         const result = await createProvider.mutateAsync({
@@ -183,7 +183,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-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-muted/40'
+                      className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-[var(--interaction-hover)]'
                       onClick={async () => {
                         try {
                           const result = await createProvider.mutateAsync({
@@ -254,8 +254,8 @@ export function ProvidersConfigPage() {
                   className={cn(
                     'group w-full rounded-xl p-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                     resolvedSelectedProvider === provider.providerId
-                      ? 'bg-background/95 text-foreground shadow-sm'
-                      : 'bg-transparent text-muted-foreground hover:bg-background/65 hover:text-foreground'
+                      ? 'bg-[var(--interaction-selection)] text-foreground'
+                      : 'bg-transparent text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground'
                   )}
                 >
                   <div className='relative min-h-10'>
@@ -300,7 +300,7 @@ export function ProvidersConfigPage() {
                         <PopoverTrigger asChild>
                           <button
                             type='button'
-                            className='inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-muted hover:text-foreground'
+                            className='inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-[var(--interaction-hover)] hover:text-foreground'
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >
@@ -310,7 +310,7 @@ export function ProvidersConfigPage() {
                         <PopoverContent className='w-40 p-1' align='end' onClick={(event) => event.stopPropagation()}>
                           <button
                             type='button'
-                            className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-red-50'
+                            className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-destructive/10'
                             onClick={() => setProviderToDelete(provider.providerId)}
                           >
                             <Trash2 className='h-4 w-4' />

package/src/features/side-dock/components/side-dock.tsx

@@ -60,9 +60,9 @@ function SideDockButton({
             onClick={() => onOpen(item)}
             className={cn(
               'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-              'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
+              'hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
               active
-                ? 'bg-primary/10 text-primary'
+                ? 'bg-[var(--interaction-selection)] text-foreground hover:bg-[var(--interaction-selection)]'
                 : 'bg-transparent',
             )}
           >
@@ -78,7 +78,7 @@ function SideDockButton({
               event.stopPropagation();
               onUnpin(item);
             }}
-            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-muted hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <X className="h-3 w-3" aria-hidden="true" />
           </button>
@@ -109,7 +109,7 @@ function SideDockActionButton({
           onClick={onClick}
           className={cn(
             'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-            'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
+            'hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
           )}
         >
           <Icon className="h-5 w-5" aria-hidden="true" />

package/src/index.css

@@ -140,6 +140,10 @@
     box-shadow: var(--shadow-card);
   }
 
+  .shadow-floating {
+    box-shadow: var(--shadow-popover);
+  }
+
   .shadow-card-hover {
     box-shadow: var(--shadow-card-hover);
   }

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

@@ -90,7 +90,7 @@ function DesktopWindowControlButton({
       className={
         control.variant === "danger"
           ? "desktop-window-no-drag flex h-10 w-[46px] items-center justify-center text-gray-700 transition-colors hover:bg-red-500 hover:text-white"
-          : "desktop-window-no-drag flex h-10 w-[46px] items-center justify-center text-gray-700 transition-colors hover:bg-black/10"
+          : "desktop-window-no-drag flex h-10 w-[46px] items-center justify-center text-gray-700 transition-colors hover:bg-[var(--interaction-hover)]"
       }
       onClick={() => {
         void window.nextclawDesktop?.controlWindow?.(control.action);

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

@@ -42,7 +42,7 @@ export function MobileAppShell({
         {isMainRoute ? (
           <div className="h-full min-h-0 overflow-hidden">{children}</div>
         ) : (
-          <main className="h-full overflow-auto px-4 py-4 custom-scrollbar">
+          <main className="h-full overflow-auto overscroll-contain px-4 py-4 custom-scrollbar">
             <div className="mx-auto max-w-3xl animate-fade-in">{children}</div>
           </main>
         )}

package/src/platforms/mobile/components/mobile-bottom-nav.tsx

@@ -19,13 +19,13 @@ export function MobileBottomNav() {
   return (
     <nav
       data-testid="mobile-bottom-nav"
-      aria-label={t("settings")}
+      aria-label={t("mobileNavigation")}
       className="shrink-0 border-t border-border/60 bg-background text-foreground"
       style={{
         paddingBottom: "calc(env(safe-area-inset-bottom, 0px) + 0.25rem)",
       }}
     >
-      <ul className="grid grid-cols-6 gap-1 px-2 pt-1">
+      <ul className="grid grid-cols-6 gap-0.5 px-1 pt-1">
         {getMobileBottomNavItems(t).map((item) => {
           const active = item.target === "/settings"
             ? isSettingsRoute(pathname)
@@ -34,19 +34,20 @@ export function MobileBottomNav() {
             <li key={item.target}>
               <Link
                 to={item.target}
+                aria-label={item.label}
                 aria-current={active ? "page" : undefined}
                 data-testid={active ? "mobile-nav-active-indicator" : undefined}
                 className={cn(
-                  "group flex min-h-[2.875rem] flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                  "group flex min-h-12 flex-col items-center justify-center gap-1 rounded-xl px-0.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   active
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    ? "bg-[var(--interaction-selection)] text-foreground"
+                    : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
                 )}
               >
                 <span className="relative">
                   <item.icon
                     className={cn(
-                      "h-3.5 w-3.5",
+                      "h-5 w-5",
                       active ? "text-foreground" : "text-muted-foreground",
                     )}
                   />
@@ -54,7 +55,7 @@ export function MobileBottomNav() {
                     <span className="absolute -right-1 -top-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-background" />
                   ) : null}
                 </span>
-                <span className="max-w-full truncate">{item.label}</span>
+                <span className="max-w-full truncate">{item.target === "/agents" ? t("mobileAgents") : item.label}</span>
               </Link>
             </li>
           );
@@ -63,9 +64,9 @@ export function MobileBottomNav() {
           <button
             type="button"
             onClick={() => openApps(docBrowser)}
-            className="group flex min-h-[2.875rem] w-full flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="group flex min-h-12 w-full flex-col items-center justify-center gap-1 rounded-xl px-0.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
-            <Boxes className="h-3.5 w-3.5 text-muted-foreground" />
+            <Boxes className="h-5 w-5 text-muted-foreground" />
             <span className="max-w-full truncate">{t("appsTitle")}</span>
           </button>
         </li>

package/src/platforms/mobile/components/mobile-settings-shell.tsx

@@ -1,8 +1,10 @@
 import { NavLink } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
 import { getSettingsNavSections } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities";
+import { SettingsGroup } from "@/shared/components/settings/setting-row";
 
 export function MobileSettingsShell() {
   const desktopCapabilityAvailable = useDesktopCapabilityAvailability();
@@ -19,29 +21,28 @@ export function MobileSettingsShell() {
       {settingsNavSections.map((section) => (
         <section key={section.label} className="space-y-2">
           <h2 className="px-1 pt-2 text-xs font-medium text-muted-foreground">{section.label}</h2>
-          {section.items.map((item) => (
-        <NavLink
-          key={item.target}
-          to={item.target}
-          className={({ isActive }) =>
-            cn(
-              "flex items-center gap-3 rounded-2xl border border-gray-200/80 bg-white px-4 py-4 shadow-card transition-colors",
-              isActive
-                ? "border-gray-300 bg-gray-50"
-                : "hover:border-gray-300 hover:bg-gray-50/70",
-            )
-          }
-        >
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-gray-100 text-gray-600">
-            <item.icon className="h-4 w-4" />
-          </div>
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold text-gray-900">
-              {item.label}
-            </p>
-          </div>
-        </NavLink>
-          ))}
+          <SettingsGroup>
+            {section.items.map((item) => (
+              <NavLink
+                key={item.target}
+                to={item.target}
+                className={({ isActive }) => cn(
+                  "flex min-h-14 items-center gap-3 px-4 py-3 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border",
+                  isActive
+                    ? "bg-[var(--interaction-selection)]"
+                    : "hover:bg-[var(--interaction-hover)] active:bg-[var(--interaction-hover)]",
+                )}
+              >
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground">
+                  <item.icon className="h-5 w-5" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="text-[15px] font-medium text-foreground">{item.label}</p>
+                </div>
+                <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground/60" aria-hidden="true" />
+              </NavLink>
+            ))}
+          </SettingsGroup>
         </section>
       ))}
     </div>

package/src/platforms/mobile/components/mobile-topbar.tsx

@@ -2,6 +2,7 @@ import { ArrowLeft } from "lucide-react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { resolveMobileRouteMeta } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 
 export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   const navigate = useNavigate();
@@ -11,31 +12,29 @@ export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   return (
     <header
       data-testid="mobile-topbar"
-      className="shrink-0 border-b border-border/60 bg-secondary text-foreground"
+      className="shrink-0 border-b border-border/60 bg-background text-foreground"
       style={{
-        paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.25rem)",
+        paddingTop: "env(safe-area-inset-top, 0px)",
       }}
     >
       <div
-        className="flex min-h-[2.75rem] items-center gap-2 py-1.5 pl-3 pr-3"
+        className="flex h-[var(--mobile-header-height)] items-center gap-2 pl-3 pr-3"
         style={{ paddingLeft: leadingInset ? `calc(${leadingInset} + 0.75rem)` : undefined }}
       >
         {routeMeta.backTarget ? (
-          <button
-            type="button"
+          <IconActionButton
+            size="lg"
             onClick={() => navigate(routeMeta.backTarget as string)}
-            className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            aria-label={routeMeta.backLabel ?? t("backToMain")}
-          >
-            <ArrowLeft className="h-4 w-4" />
-          </button>
+            label={routeMeta.backLabel ?? t("backToMain")}
+            icon={<ArrowLeft className="h-4 w-4" />}
+          />
         ) : null}
         <div className="min-w-0 flex-1">
           <h1 className="truncate text-center text-[17px] font-semibold text-foreground">
             {routeMeta.title}
           </h1>
         </div>
-        {routeMeta.backTarget ? <div className="h-11 w-11 shrink-0" aria-hidden="true" /> : null}
+        {routeMeta.backTarget ? <div className="w-[var(--icon-control-size)] shrink-0" aria-hidden="true" /> : null}
       </div>
     </header>
   );

package/src/shared/components/common/brand-header.tsx

@@ -181,7 +181,7 @@ function RuntimeUpdateReleaseNotesHover({
           external
           icon={null}
           aria-label={label}
-          className="whitespace-nowrap rounded-md border bg-popover px-3 py-1.5 text-left text-xs font-medium text-popover-foreground shadow-md outline-none transition-colors hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-gray-300"
+          className="whitespace-nowrap rounded-md border bg-popover px-3 py-1.5 text-left text-xs font-medium text-popover-foreground shadow-md outline-none transition-colors hover:bg-[var(--interaction-hover)] focus-visible:ring-2 focus-visible:ring-gray-300"
         >
           {label}
         </NavigationLink>

package/src/shared/components/common/searchable-model-input.tsx

@@ -152,7 +152,7 @@ export function SearchableModelInput({
                 onChange(value.trim());
                 closeMenu();
               }}
-              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-[var(--interaction-hover)]"
             >
               <Check className="h-4 w-4 text-transparent" />
               <span className="truncate text-gray-700">
@@ -170,7 +170,7 @@ export function SearchableModelInput({
                 onChange(option);
                 closeMenu();
               }}
-              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-[var(--interaction-hover)]"
             >
               <Check className={cn('h-4 w-4', option === value.trim() ? 'text-primary' : 'text-transparent')} />
               <span className="truncate text-gray-700">{option}</span>

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

@@ -47,7 +47,7 @@ export function ConfigSplitPage({
               <button
                 type='button'
                 onClick={onMobileBack}
-                className='inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40'
+                className='inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40'
               >
                 <ArrowLeft className='h-4 w-4' />
                 <span>{mobileListLabel ?? t('backToMain')}</span>
@@ -122,8 +122,8 @@ export function ConfigSelectionCard({
       className={cn(
         'w-full rounded-xl p-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
         active
-          ? 'bg-background/95 text-foreground shadow-sm'
-          : 'bg-transparent text-muted-foreground hover:bg-background/65 hover:text-foreground',
+          ? 'bg-[var(--interaction-selection)] text-foreground'
+          : 'bg-transparent text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground',
         className
       )}
       {...props}

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

@@ -545,7 +545,8 @@ describe("DocBrowser panel app navigation", () => {
 
     expect(screen.queryByRole("button", { name: "Pin to left sidebar" })).toBeNull();
     await user.click(screen.getByRole("button", { name: "More panel app actions" }));
-    await user.click(screen.getByRole("button", { name: "Pin to left sidebar" }));
+    await user.click(screen.getByRole("menuitem", { name: "Layout and position" }));
+    await user.click(screen.getByRole("menuitem", { name: "Pin to left sidebar" }));
     expect(panelAppHooks.mutate).toHaveBeenCalledWith({
       id: "piano",
       preferences: { mainSidebar: true },
@@ -571,7 +572,8 @@ describe("DocBrowser panel app navigation", () => {
     render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
 
     await user.click(screen.getByRole("button", { name: "More panel app actions" }));
-    await user.click(screen.getByRole("button", { name: "Pin to left sidebar" }));
+    await user.click(screen.getByRole("menuitem", { name: "Layout and position" }));
+    await user.click(screen.getByRole("menuitem", { name: "Pin to left sidebar" }));
     expect(panelAppHooks.mutate).toHaveBeenCalledWith({
       id: "piano",
       preferences: { mainSidebar: true },
@@ -651,6 +653,36 @@ describe("DocBrowser floating interactions", () => {
     installDocBrowserPointerTestEnvironment();
   });
 
+  it("keeps compact navigation, tab selection, resource and app actions reachable", () => {
+    const onBack = vi.fn();
+    const onSelect = vi.fn();
+    const onClose = vi.fn();
+    const onAdd = vi.fn();
+    const onRefresh = vi.fn();
+    render(<DocBrowserTabStrip compact tabs={docBrowserState.tabs} activeTabId="docs"
+      canGoBack canGoForward={false} onGoBack={onBack} onGoForward={vi.fn()}
+      onOpenNewTab={vi.fn()} onSetActiveTab={onSelect} onCloseTab={onClose}
+      mobileToolbar={<button onClick={onRefresh}>Refresh app</button>}
+      getTabMenuGroups={() => [{ key: 'chat', items: [{ key: 'add', label: 'Add to Chat', onSelect: onAdd }] }]}
+    />);
+    const open = () => fireEvent.click(screen.getByRole('button', { name: 'More tab actions' }));
+    expect(screen.queryByRole('button', { name: 'Back' })).toBeNull();
+    open();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Back' }));
+    expect(onBack).toHaveBeenCalledOnce();
+    open();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Docs' }));
+    expect(onSelect).toHaveBeenCalledWith('docs');
+    open();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Add to Chat' }));
+    expect(onAdd).toHaveBeenCalledOnce();
+    open();
+    fireEvent.click(screen.getByRole('button', { name: 'Refresh app' }));
+    expect(onRefresh).toHaveBeenCalledOnce();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Close tab' }));
+    expect(onClose).toHaveBeenCalledWith('docs');
+  });
+
   it("drags the shared header without stealing tab actions", () => {
     new WorkbenchSurfaceManager().place('global-resources', 'floating');
     render(<DocBrowser />);

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

@@ -1,4 +1,8 @@
 import { PageResourceIcon } from '@/features/right-panel-resources';
+import { useState, type ReactNode } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { ContextMenuItems } from '@/shared/components/ui/context-menu/context-menu';
 import {
   ArrowLeft,
   ArrowRight,
@@ -16,6 +20,8 @@ import {
 import { t } from "@/shared/lib/i18n";
 
 type DocBrowserTabStripProps = {
+  compact?: boolean;
+  mobileToolbar?: ReactNode;
   tabs: DocBrowserTab[];
   activeTabId: string;
   canGoBack: boolean;
@@ -47,7 +53,10 @@ export function DocBrowserTabStrip({
   onSetActiveTab,
   onCloseTab,
   getTabMenuGroups,
+  mobileToolbar,
+  compact = false,
 }: DocBrowserTabStripProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const backLabel = t("docBrowserBack");
   const closeTabLabel = t("workbenchCloseTab");
   const dockLabel = dockState?.isDocked
@@ -87,20 +96,42 @@ export function DocBrowserTabStrip({
       : []),
   ];
 
+  const current = tabs.find(tab => tab.id === activeTabId);
+  const mobileGroups: ContextMenuGroup[] = [
+    { key: 'tabs', items: compactTabs.map(tab => ({ key: tab.key, label: tab.label, icon: tab.leadingIcon, pressed: tab.active, onSelect: tab.onSelect })) },
+    { key: 'navigation', items: actions.map(action => ({ key: action.key, label: action.label, icon: action.icon, disabled: action.disabled, onSelect: action.onClick })) },
+    ...(current ? getTabMenuGroups?.(current) ?? [] : []),
+    ...(current ? [{ key: 'close-tab', items: [{ key: 'close-tab', label: closeTabLabel, onSelect: () => onCloseTab(current.id) }] }] : []),
+  ];
+  if (compact) return (
+    <div className="flex h-12 min-w-0 flex-1 items-center">
+      <Popover open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+        <PopoverTrigger asChild>
+          <button type="button" className="flex h-8 min-w-0 items-center gap-2 rounded-lg px-2 text-sm font-medium hover:bg-[var(--interaction-hover)]" aria-label={t('docBrowserTabMoreActions')}>
+            {current ? <DocBrowserTabIcon tab={current} /> : null}
+            <span className="truncate">{current?.title || t('docBrowserTabUntitled')}</span><ChevronDown className="h-4 w-4 shrink-0" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="max-h-[70dvh] w-72 overflow-y-auto p-1">
+          <ContextMenuItems groups={mobileGroups} onClose={() => setMobileMenuOpen(false)} />
+          {mobileToolbar}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
   return (
     <CompactTabStrip
       testId="doc-browser-tab-strip"
       actionsTestId="doc-browser-tab-actions"
       tabs={compactTabs}
       actions={actions}
-      className="h-10 min-w-0 flex-1 gap-1 border-0 bg-transparent px-0 select-none"
-      scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-0.5"
+      className="flex h-10 min-w-0 flex-1 gap-1 border-0 bg-transparent px-0 select-none"
+      scrollClassName="doc-browser-tab-scrollbar flex h-full max-md:h-11 max-md:basis-full items-center gap-0.5"
       tabsClassName="items-center gap-0.5"
-      actionsClassName="h-full items-center gap-0.5"
-      actionButtonClassName="rounded-md p-1.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground disabled:opacity-50"
-      tabBaseClassName="inline-flex cursor-pointer items-center gap-0.5 h-7 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"
-      activeTabClassName="bg-muted/80 text-foreground"
-      inactiveTabClassName="text-muted-foreground hover:bg-muted/45 hover:text-foreground"
+      actionsClassName="h-full max-md:h-11 max-md:w-full items-center gap-0.5"
+      tabBaseClassName="inline-flex cursor-pointer items-center gap-0.5 h-7 max-md:min-h-11 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"
+      activeTabClassName="bg-[var(--interaction-selection)] text-foreground"
+      inactiveTabClassName="text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground"
       labelClassName="px-0.5 text-xs font-normal"
 
     />

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

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import {
   DOC_BROWSER_HOME_TAB_KIND,
   getDefaultDocsUrl,
@@ -258,6 +259,7 @@ export function DocBrowser({
 
 
   const isFullscreen = displayMode === 'fullscreen';
+  const { isMobile } = useViewportLayout();
   const customRenderParams = currentTab ? {
     currentUrl,
     open,
@@ -284,7 +286,7 @@ export function DocBrowser({
         urlInput={urlInput}
       />
 
-      {customToolbar}
+      {!isMobile ? customToolbar : null}
 
       <DocBrowserFrameContent
         currentTab={currentTab}
@@ -310,6 +312,8 @@ export function DocBrowser({
       onWidthCommit={setDockedWidth} onClose={close} closeLabel={t('workbenchHideGroup')}
       hidden={!isOpen} fullscreen={isFullscreen} navigation={
       <DocBrowserTabStrip
+        mobileToolbar={customToolbar}
+        compact={isMobile}
         tabs={tabs}
         activeTabId={activeTabId}
         canGoBack={canGoBack}

package/src/shared/components/path-picker/server-path-picker-locations.tsx

@@ -112,7 +112,7 @@ export function ServerPathPickerLocations({
         type="button"
         className={cn(
           'flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
-          active ? 'bg-primary/12 text-primary' : 'text-foreground hover:bg-[var(--interaction-hover)]',
+          active ? 'bg-[var(--interaction-selection)] text-foreground' : 'text-foreground hover:bg-[var(--interaction-hover)]',
         )}
         aria-current={active ? 'location' : undefined}
         onClick={() => onNavigate(item.path)}

package/src/shared/components/settings/settings-page.tsx

@@ -27,7 +27,7 @@ export function SettingsPage({
         className
       )}
     >
-      <PageHeader title={title} description={description} actions={actions} />
+      <PageHeader title={title} description={description} actions={actions} mobileTitleInShell />
       {children}
     </PageLayout>
   );

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

@@ -17,7 +17,7 @@ describe('IconActionButton', () => {
     expect(button.className).toContain('h-6');
     expect(button.className).toContain('w-6');
     expect(button.className).toContain('p-1');
-    expect(button.className).toContain('hover:bg-black/10');
+    expect(button.className).toContain('hover:before:bg-[var(--interaction-hover)]');
   });
 
   it('defaults to medium size and soft accent hover', () => {
@@ -31,7 +31,7 @@ describe('IconActionButton', () => {
     const button = screen.getByRole('button', { name: 'More' });
     expect(button.className).toContain('h-7');
     expect(button.className).toContain('w-7');
-    expect(button.className).toContain('hover:bg-[var(--interaction-hover)]');
+    expect(button.className).toContain('hover:before:bg-[var(--interaction-hover)]');
   });
 
   it('uses surface-relative feedback without introducing a new surface', () => {
@@ -44,9 +44,9 @@ describe('IconActionButton', () => {
     );
 
     const button = screen.getByRole('button', { name: 'Add project' });
-    expect(button.className).toContain('hover:bg-gray-200/60');
-    expect(button.className).toContain('hover:text-gray-900');
-    expect(button.className).toContain('active:bg-gray-200/80');
+    expect(button.className).toContain('hover:before:bg-[var(--interaction-hover)]');
+    expect(button.className).toContain('hover:text-accent-foreground');
+    expect(button.className).toContain('active:before:bg-[var(--interaction-hover)]');
   });
 
   it('ignores restored pointer focus while preserving keyboard tooltip focus', () => {

package/src/shared/components/ui/actions/action-feedback.ts

@@ -0,0 +1,8 @@
+/** Neutral actions share one theme color across icon and menu surfaces. */
+export const ACTION_MENU_ITEM_CLASS = 'flex min-h-8 w-full items-center gap-2 rounded-lg px-2.5 py-1 text-left text-[13px] leading-5 font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-45';
+
+export const ACTION_FEEDBACK = {
+  icon: 'hover:before:bg-[var(--interaction-hover)] active:before:bg-[var(--interaction-hover)] disabled:hover:before:bg-transparent disabled:active:before:bg-transparent',
+  item: 'hover:bg-[var(--interaction-hover)] focus-visible:bg-[var(--interaction-hover)] active:bg-[var(--interaction-hover)] disabled:hover:bg-transparent disabled:active:bg-transparent',
+  destructive: 'text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10 disabled:hover:bg-transparent',
+} as const;