@nextclaw/ui 0.15.25 → 0.15.27

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useState } from "react";
 import type {
   ServiceActionGrantView,
   ServiceActionListView,
@@ -25,11 +25,7 @@ import { t } from "@/shared/lib/i18n";
 
 type ServiceActionView = ServiceActionListView["actions"][number];
 
-export function ServiceAppsPanel({
-  headerContent,
-}: {
-  headerContent?: ReactNode;
-}) {
+export function ServiceAppsPanel() {
   const serviceApps = useServiceApps();
   const serviceActions = useServiceActions();
   const serviceActionGrants = useServiceActionGrants();
@@ -92,17 +88,7 @@ export function ServiceAppsPanel({
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
-      <div className="flex items-center justify-between gap-2 border-b border-border/60 px-4 py-3">
-        <div className="flex min-w-0 items-center gap-2">
-          {headerContent ?? (
-            <>
-              <Server className="h-4 w-4 text-primary" />
-              <div className="truncate text-sm font-semibold text-foreground">
-                {t("serviceAppsTitle")}
-              </div>
-            </>
-          )}
-        </div>
+      <div className="flex min-h-12 shrink-0 items-center justify-end border-b border-border/60 px-4 py-2">
         <TooltipProvider delayDuration={250}>
           <Tooltip>
             <TooltipTrigger asChild>

package/src/features/system-status/components/__tests__/desktop-update-config.test.tsx

@@ -11,6 +11,7 @@ const mocks = vi.hoisted(() => ({
   start: vi.fn(),
   stop: vi.fn(),
   checkForUpdates: vi.fn(),
+  updateNow: vi.fn(),
   downloadUpdate: vi.fn(),
   applyDownloadedUpdate: vi.fn(),
   updateChannel: vi.fn()
@@ -48,6 +49,7 @@ describe('DesktopUpdateConfig', () => {
     mocks.start.mockReset();
     mocks.stop.mockReset();
     mocks.checkForUpdates.mockReset();
+    mocks.updateNow.mockReset();
     mocks.downloadUpdate.mockReset();
     mocks.applyDownloadedUpdate.mockReset();
     mocks.updateChannel.mockReset();
@@ -101,12 +103,29 @@ describe('DesktopUpdateConfig', () => {
     expect(screen.getByText('当前更新通道')).toBeTruthy();
     expect(screen.getAllByText('Beta').length).toBeGreaterThan(0);
     expect(screen.getByText('当前正在跟随 Beta 通道')).toBeTruthy();
-    expect(screen.getByText('系统每两小时自动检查更新，下载和应用都由你手动确认。')).toBeTruthy();
+    expect(screen.getByText('系统每两小时自动检查更新；是否开始更新由你确认。')).toBeTruthy();
     expect(screen.queryByText('自动检查更新')).toBeNull();
     expect(screen.queryByText('发现更新后自动后台下载')).toBeNull();
     expect(screen.getByText('切回 Stable 后不会立刻强制降级；只有当 Stable 追平或超过当前版本时，才会继续提供 Stable 更新。')).toBeTruthy();
   });
 
+  it('uses one update action instead of separate download and apply actions', async () => {
+    const user = userEvent.setup();
+    useRuntimeUpdateStore.setState((state) => ({
+      ...state,
+      snapshot: state.snapshot ? { ...state.snapshot, status: 'update-available' } : null
+    }));
+
+    renderDesktopUpdateConfig();
+
+    expect(screen.queryByRole('button', { name: '下载更新' })).toBeNull();
+    const updateButton = screen.getByRole('button', { name: '立即更新' });
+    await user.click(updateButton);
+    expect(mocks.updateNow).toHaveBeenCalledTimes(1);
+    expect(mocks.downloadUpdate).not.toHaveBeenCalled();
+    expect(mocks.applyDownloadedUpdate).not.toHaveBeenCalled();
+  });
+
   it('sends the newly selected release channel to the desktop update manager', async () => {
     const user = userEvent.setup();
 

package/src/features/system-status/components/desktop-update-config.tsx

@@ -16,13 +16,15 @@ import {
   type ReleaseNotesLocale,
   type ReleaseNotesSection
 } from '@/features/system-status/utils/update-release-notes.utils';
-import { Download, RefreshCw, RotateCw } from 'lucide-react';
+import { RefreshCw, RotateCw } from 'lucide-react';
 
 const STATUS_LABEL_KEYS: Record<string, string> = {
   checking: 'desktopUpdatesStatusChecking',
   'update-available': 'desktopUpdatesStatusAvailable',
   downloading: 'desktopUpdatesStatusDownloading',
   downloaded: 'desktopUpdatesStatusDownloaded',
+  applying: 'desktopUpdatesStatusApplying',
+  'restart-required': 'desktopUpdatesStatusRestartRequired',
   'up-to-date': 'desktopUpdatesStatusUpToDate',
   blocked: 'desktopUpdatesStatusBlocked',
   failed: 'desktopUpdatesStatusFailed',
@@ -103,7 +105,7 @@ function getStatusLabel(snapshot: UpdateSnapshot): string {
   return t(STATUS_LABEL_KEYS[snapshot.status] ?? 'desktopUpdatesStatusIdle');
 }
 function getStatusTone(status: string): string {
-  if (status === 'downloaded') {
+  if (status === 'downloaded' || status === 'restart-required') {
     return 'bg-emerald-50 text-emerald-700 ring-emerald-100';
   }
   if (status === 'update-available' || status === 'downloading' || status === 'checking') {
@@ -218,9 +220,12 @@ export function DesktopUpdateConfig() {
   const isChecking = busyAction === 'checking';
   const isDownloading = busyAction === 'downloading';
   const isApplying = busyAction === 'applying';
+  const isUpdating = busyAction === 'updating';
   const isSwitchingChannel = busyAction === 'switching-channel';
-  const canDownload = snapshot.status === 'update-available' && !isDownloading && !isApplying;
-  const canApply = snapshot.status === 'downloaded' && !isApplying;
+  const canUpdate = (snapshot.status === 'update-available' || snapshot.status === 'downloaded')
+    && !isDownloading
+    && !isApplying
+    && !isUpdating;
   const overviewStats = [
     [t('runtimeUpdatesHostVersion'), formatVersion(snapshot.hostVersion)],
     [t('desktopUpdatesCurrentBundleVersion'), formatVersion(snapshot.currentVersion)],
@@ -232,7 +237,7 @@ export function DesktopUpdateConfig() {
     <SettingsPage
       title={t('runtimeUpdatesPageTitle')}
       description={t('runtimeUpdatesPageDescription')}
-      actions={<Button variant='outline' onClick={() => void runtimeUpdateManager.checkForUpdates()} disabled={isChecking || isDownloading || isApplying}><RefreshCw className={cn('mr-2 h-4 w-4', isChecking && 'animate-spin')} />{t('desktopUpdatesCheckNow')}</Button>}
+      actions={<Button variant='outline' onClick={() => void runtimeUpdateManager.checkForUpdates()} disabled={isChecking || isDownloading || isApplying || isUpdating}><RefreshCw className={cn('mr-2 h-4 w-4', isChecking && 'animate-spin')} />{t('desktopUpdatesCheckNow')}</Button>}
     >
       <SettingsSection title={t('desktopUpdatesOverviewTitle')} description={t('desktopUpdatesOverviewDescription')}>
         <SettingsGroup>
@@ -278,7 +283,7 @@ export function DesktopUpdateConfig() {
             layout='stacked'
           >
             <div className='space-y-2'>
-              <Select value={snapshot.channel} disabled={isSwitchingChannel || isChecking || isDownloading || isApplying} onValueChange={(value) => void runtimeUpdateManager.updateChannel(value as UpdateSnapshot['channel'])}>
+              <Select value={snapshot.channel} disabled={isSwitchingChannel || isChecking || isDownloading || isApplying || isUpdating} onValueChange={(value) => void runtimeUpdateManager.updateChannel(value as UpdateSnapshot['channel'])}>
                 <SelectTrigger className='w-full max-w-sm'>
                   <SelectValue placeholder={t('desktopUpdatesReleaseChannel')} />
                 </SelectTrigger>
@@ -295,16 +300,12 @@ export function DesktopUpdateConfig() {
       <SettingsSection title={t('desktopUpdatesActionsTitle')} description={t('runtimeUpdatesActionsDescription')}>
         <SettingsGroup>
           <div className='flex flex-wrap items-center gap-3 p-4'>
-            <Button variant='outline' onClick={() => void runtimeUpdateManager.checkForUpdates()} disabled={isChecking || isDownloading || isApplying}>
+            <Button variant='outline' onClick={() => void runtimeUpdateManager.checkForUpdates()} disabled={isChecking || isDownloading || isApplying || isUpdating}>
               <RefreshCw className={cn('mr-2 h-4 w-4', isChecking && 'animate-spin')} />
               {t('desktopUpdatesCheckNow')}
             </Button>
-            <Button onClick={() => void runtimeUpdateManager.downloadUpdate()} disabled={!canDownload}>
-              <Download className={cn('mr-2 h-4 w-4', isDownloading && 'animate-bounce')} />
-              {t('desktopUpdatesDownloadNow')}
-            </Button>
-            <Button variant='secondary' onClick={() => void runtimeUpdateManager.applyDownloadedUpdate()} disabled={!canApply}>
-              <RotateCw className={cn('mr-2 h-4 w-4', isApplying && 'animate-spin')} />
+            <Button onClick={() => void runtimeUpdateManager.updateNow()} disabled={!canUpdate}>
+              <RotateCw className={cn('mr-2 h-4 w-4', isUpdating && 'animate-spin')} />
               {t('runtimeUpdatesApplyNow')}
             </Button>
           </div>

package/src/features/system-status/managers/__tests__/runtime-update.manager.test.ts

@@ -0,0 +1,99 @@
+import type { UpdateSnapshot } from '@nextclaw/shared';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { RuntimeUpdateManager } from '@/features/system-status/managers/runtime-update.manager';
+import { useRuntimeUpdateStore } from '@/features/system-status/stores/runtime-update.store';
+
+const mocks = vi.hoisted(() => ({
+  applyRuntimeUpdate: vi.fn(),
+  checkRuntimeUpdate: vi.fn(),
+  downloadRuntimeUpdate: vi.fn(),
+  fetchRuntimeUpdate: vi.fn(),
+  updateRuntimeUpdateChannel: vi.fn()
+}));
+
+vi.mock('@/shared/lib/api', () => mocks);
+
+const createSnapshot = (patch: Partial<UpdateSnapshot> = {}): UpdateSnapshot => ({
+  status: 'update-available',
+  installationKind: 'npm-runtime-bundle',
+  channel: 'stable',
+  hostVersion: '0.30.0',
+  currentVersion: '0.30.0',
+  availableVersion: '0.31.0',
+  downloadedVersion: null,
+  minimumHostVersion: null,
+  releaseNotesUrl: null,
+  lastCheckedAt: null,
+  progress: null,
+  canApplyInApp: false,
+  requiresRestart: false,
+  blockReason: null,
+  recoveryCommand: null,
+  errorMessage: null,
+  ...patch
+});
+
+describe('RuntimeUpdateManager', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useRuntimeUpdateStore.setState({
+      supported: false,
+      initialized: false,
+      busyAction: null,
+      snapshot: null
+    });
+    mocks.fetchRuntimeUpdate.mockResolvedValue(createSnapshot());
+  });
+
+  it('downloads and applies an available update from one user action', async () => {
+    const downloaded = createSnapshot({
+      status: 'downloaded',
+      downloadedVersion: '0.31.0',
+      canApplyInApp: true
+    });
+    const applied = createSnapshot({
+      status: 'restart-required',
+      availableVersion: null,
+      downloadedVersion: null,
+      requiresRestart: true
+    });
+    mocks.downloadRuntimeUpdate.mockResolvedValue(downloaded);
+    mocks.applyRuntimeUpdate.mockResolvedValue(applied);
+    const manager = new RuntimeUpdateManager();
+    await manager.start();
+
+    await manager.updateNow();
+
+    expect(mocks.downloadRuntimeUpdate).toHaveBeenCalledTimes(1);
+    expect(mocks.applyRuntimeUpdate).toHaveBeenCalledTimes(1);
+    expect(useRuntimeUpdateStore.getState()).toMatchObject({
+      busyAction: null,
+      snapshot: applied
+    });
+    manager.stop();
+  });
+
+  it('resumes a downloaded update without downloading it again', async () => {
+    const downloaded = createSnapshot({
+      status: 'downloaded',
+      downloadedVersion: '0.31.0',
+      canApplyInApp: true
+    });
+    const applied = createSnapshot({
+      status: 'restart-required',
+      availableVersion: null,
+      downloadedVersion: null,
+      requiresRestart: true
+    });
+    mocks.fetchRuntimeUpdate.mockResolvedValue(downloaded);
+    mocks.applyRuntimeUpdate.mockResolvedValue(applied);
+    const manager = new RuntimeUpdateManager();
+    await manager.start();
+
+    await manager.updateNow();
+
+    expect(mocks.downloadRuntimeUpdate).not.toHaveBeenCalled();
+    expect(mocks.applyRuntimeUpdate).toHaveBeenCalledTimes(1);
+    manager.stop();
+  });
+});

package/src/features/system-status/managers/runtime-update.manager.ts

@@ -208,6 +208,28 @@ export class RuntimeUpdateManager {
     }
   };
 
+  updateNow = async () => {
+    const initialSnapshot = useRuntimeUpdateStore.getState().snapshot;
+    if (initialSnapshot?.status !== 'update-available' && initialSnapshot?.status !== 'downloaded') {
+      return;
+    }
+
+    try {
+      await this.runSnapshotCommand('updating', t('runtimeUpdatesUpdateFailed'), async (source) => {
+        const downloadedSnapshot = initialSnapshot.status === 'downloaded'
+          ? initialSnapshot
+          : await source.downloadUpdate();
+        useRuntimeUpdateStore.setState({ snapshot: downloadedSnapshot });
+        if (downloadedSnapshot.status !== 'downloaded') {
+          return downloadedSnapshot;
+        }
+        return await source.applyDownloadedUpdate();
+      });
+    } catch {
+      return;
+    }
+  };
+
   updateChannel = async (channel: UpdateSnapshot['channel']) => {
     const currentChannel = useRuntimeUpdateStore.getState().snapshot?.channel;
     if (currentChannel === channel) {

package/src/features/system-status/stores/runtime-update.store.ts

@@ -5,6 +5,7 @@ export type RuntimeUpdateBusyAction =
   | 'checking'
   | 'downloading'
   | 'applying'
+  | 'updating'
   | 'switching-channel'
   | null;
 

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

@@ -10,6 +10,7 @@ import { isWindowsDesktopHost } from "@/platforms/desktop/utils/desktop-host.uti
 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 type { DocBrowserTabMenuGroupsResolver } from "@/shared/components/doc-browser/doc-browser";
 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";
@@ -26,6 +27,7 @@ type DesktopAppShellProps = {
   docBrowserMode: "floating" | "docked";
   docBrowserDockControls?: DocBrowserDockControls;
   docBrowserRenderers?: DocBrowserCustomTabRenderers;
+  docBrowserTabMenuGroups?: DocBrowserTabMenuGroupsResolver;
   sideDock?: React.ReactNode;
   children: React.ReactNode;
 };
@@ -37,6 +39,7 @@ export function DesktopAppShell({
   docBrowserMode,
   docBrowserDockControls,
   docBrowserRenderers = {},
+  docBrowserTabMenuGroups,
   sideDock,
   children,
 }: DesktopAppShellProps) {
@@ -91,6 +94,7 @@ export function DesktopAppShell({
               <DocBrowser
                 customTabRenderers={docBrowserRenderers}
                 dockControls={docBrowserDockControls}
+                getTabMenuGroups={docBrowserTabMenuGroups}
               />
             </Suspense>
           ) : null}
@@ -103,6 +107,7 @@ export function DesktopAppShell({
           <DocBrowser
             customTabRenderers={docBrowserRenderers}
             dockControls={docBrowserDockControls}
+            getTabMenuGroups={docBrowserTabMenuGroups}
           />
         </Suspense>
       ) : null}

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

@@ -7,6 +7,7 @@ import { MobileBottomNav } from "@/platforms/mobile/components/mobile-bottom-nav
 import { MobileTopbar } from "@/platforms/mobile/components/mobile-topbar";
 import type { DocBrowserCustomTabRenderers } from "@/shared/components/doc-browser/doc-browser-renderer.types";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
+import type { DocBrowserTabMenuGroupsResolver } from "@/shared/components/doc-browser/doc-browser";
 
 const DocBrowser = lazy(async () => ({
   default: (await import("@/shared/components/doc-browser/doc-browser")).DocBrowser,
@@ -17,6 +18,7 @@ type MobileAppShellProps = {
   isDocBrowserOpen: boolean;
   docBrowserDockControls?: DocBrowserDockControls;
   docBrowserRenderers?: DocBrowserCustomTabRenderers;
+  docBrowserTabMenuGroups?: DocBrowserTabMenuGroupsResolver;
   topbarLeadingInset?: string;
   children: React.ReactNode;
 };
@@ -26,6 +28,7 @@ export function MobileAppShell({
   isDocBrowserOpen,
   docBrowserDockControls,
   docBrowserRenderers = {},
+  docBrowserTabMenuGroups,
   topbarLeadingInset,
   children,
 }: MobileAppShellProps) {
@@ -48,7 +51,12 @@ export function MobileAppShell({
       {showBottomNav ? <MobileBottomNav /> : null}
       {isDocBrowserOpen ? (
         <Suspense fallback={null}>
-          <DocBrowser customTabRenderers={docBrowserRenderers} displayMode="fullscreen" dockControls={docBrowserDockControls} />
+          <DocBrowser
+            customTabRenderers={docBrowserRenderers}
+            displayMode="fullscreen"
+            dockControls={docBrowserDockControls}
+            getTabMenuGroups={docBrowserTabMenuGroups}
+          />
         </Suspense>
       ) : null}
     </div>

package/src/shared/components/actions/__tests__/navigation-link.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -55,4 +56,15 @@ describe("NavigationLink", () => {
     expect(screen.getByText("Session route")).toBeTruthy();
     expect(mocks.openExternalUrl).not.toHaveBeenCalled();
   });
+
+  it("forwards refs to the rendered anchor for asChild consumers", () => {
+    const ref = createRef<HTMLAnchorElement>();
+    render(
+      <NavigationLink ref={ref} href="https://docs.nextclaw.io/" external>
+        View docs
+      </NavigationLink>,
+    );
+
+    expect(ref.current).toBe(screen.getByRole("link", { name: "View docs" }));
+  });
 });

package/src/shared/components/actions/navigation-link.tsx

@@ -3,6 +3,7 @@ import type {
   MouseEvent,
   ReactNode,
 } from "react";
+import { forwardRef } from "react";
 import { ExternalLink as ExternalLinkIcon, type LucideIcon } from "lucide-react";
 import { Link } from "react-router-dom";
 import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
@@ -62,7 +63,7 @@ function resolveExternalHttpUrl(href: string): string | null {
  * Internal links use client-side routing; external links delegate ordinary
  * clicks to the desktop host when one is available.
  */
-export function NavigationLink({
+export const NavigationLink = forwardRef<HTMLAnchorElement, NavigationLinkProps>(function NavigationLink({
   children,
   className,
   external = false,
@@ -74,7 +75,7 @@ export function NavigationLink({
   size = "sm",
   target,
   ...props
-}: NavigationLinkProps) {
+}, ref) {
   const Icon = icon === undefined && external ? ExternalLinkIcon : icon;
   const linkClassName = cn(
     "inline-flex items-center rounded-sm font-medium text-primary underline-offset-4 transition-colors hover:text-primary-hover hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
@@ -98,6 +99,7 @@ export function NavigationLink({
   if (!external) {
     return (
       <Link
+        ref={ref}
         {...props}
         to={href}
         target={target}
@@ -112,6 +114,7 @@ export function NavigationLink({
 
   return (
     <a
+      ref={ref}
       {...props}
       href={href}
       target={target ?? "_blank"}
@@ -133,4 +136,4 @@ export function NavigationLink({
       {content}
     </a>
   );
-}
+});

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

@@ -571,6 +571,40 @@ describe("DocBrowser floating interactions", () => {
     expect(onDragStart).toHaveBeenCalledTimes(1);
   });
 
+  it("opens the same tab action from right click and the more button", () => {
+    const onAddToChat = vi.fn();
+
+    render(
+      <DocBrowserTabStrip
+        tabs={docBrowserState.tabs}
+        activeTabId="docs"
+        canGoBack={false}
+        canGoForward={false}
+        isDocked={true}
+        isFullscreen={false}
+        onGoBack={vi.fn()}
+        onGoForward={vi.fn()}
+        onOpenNewTab={vi.fn()}
+        onSetActiveTab={vi.fn()}
+        onCloseTab={vi.fn()}
+        onClose={vi.fn()}
+        onDragStart={vi.fn()}
+        onToggleMode={vi.fn()}
+        getTabMenuGroups={() => [{
+          key: "chat",
+          items: [{ key: "add", label: "Add to Chat", onSelect: onAddToChat }],
+        }]}
+      />,
+    );
+
+    fireEvent.contextMenu(screen.getByRole("button", { name: "Docs" }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Add to Chat" }));
+    fireEvent.click(screen.getByRole("button", { name: "More tab actions" }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Add to Chat" }));
+
+    expect(onAddToChat).toHaveBeenCalledTimes(2);
+  });
+
   it("keeps the floating panel left edge stable when resizing from the right", () => {
     docBrowserState.mode = "floating";
 

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

@@ -10,6 +10,7 @@ import {
   X,
 } from "lucide-react";
 import type { DocBrowserDockState, DocBrowserTab } from "./doc-browser-context";
+import type { ContextMenuGroup } from "@/shared/components/ui/context-menu/context-menu";
 import {
   CompactTabStrip,
   type CompactTabStripAction,
@@ -35,6 +36,7 @@ type DocBrowserTabStripProps = {
   onClose: () => void;
   onDragStart: (event: PointerEvent<HTMLElement>) => void;
   onToggleMode: () => void;
+  getTabMenuGroups?: (tab: DocBrowserTab) => readonly ContextMenuGroup[] | undefined;
 };
 
 function shouldBlockHeaderDrag(target: EventTarget | null): boolean {
@@ -60,6 +62,7 @@ export function DocBrowserTabStrip({
   onClose,
   onDragStart,
   onToggleMode,
+  getTabMenuGroups,
 }: DocBrowserTabStripProps) {
   const backLabel = t("docBrowserBack");
   const closeLabel = t("docBrowserClose");
@@ -81,6 +84,8 @@ export function DocBrowserTabStrip({
     closePlacement: "trailing",
     onSelect: () => onSetActiveTab(tab.id),
     onClose: () => onCloseTab(tab.id),
+    menuLabel: t("docBrowserTabMoreActions"),
+    menuGroups: getTabMenuGroups?.(tab),
   }));
   const actions: CompactTabStripAction[] = [
     { key: "back", disabled: !canGoBack, icon: <ArrowLeft className="h-3.5 w-3.5" />, label: backLabel, onClick: onGoBack },

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

@@ -28,6 +28,7 @@ import {
 import { ResizableRightPanel } from '@/shared/components/resizable-right-panel/resizable-right-panel';
 import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
+import type { ContextMenuGroup } from '@/shared/components/ui/context-menu/context-menu';
 import { GripVertical } from 'lucide-react';
 import {
   DOC_BROWSER_DOCKED_MAX_WIDTH,
@@ -38,8 +39,11 @@ type DocBrowserProps = {
   customTabRenderers?: DocBrowserCustomTabRenderers;
   displayMode?: 'desktop' | 'fullscreen';
   dockControls?: DocBrowserDockControls;
+  getTabMenuGroups?: (tab: DocBrowserTab) => readonly ContextMenuGroup[] | undefined;
 };
 
+export type DocBrowserTabMenuGroupsResolver = NonNullable<DocBrowserProps['getTabMenuGroups']>;
+
 type FloatingPanelInteraction = {
   startX: number;
   startY: number;
@@ -160,7 +164,12 @@ function useDocBrowserAddressBar({
   };
 }
 
-export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', dockControls }: DocBrowserProps) {
+export function DocBrowser({
+  customTabRenderers = {},
+  displayMode = 'desktop',
+  dockControls,
+  getTabMenuGroups,
+}: DocBrowserProps) {
   const {
     isOpen,
     mode,
@@ -367,6 +376,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
         onClose={close}
         onDragStart={startFloatDrag}
         onToggleMode={toggleMode}
+        getTabMenuGroups={getTabMenuGroups}
       />
 
       <DocBrowserAddressToolbar

package/src/shared/components/doc-browser/managers/doc-browser.manager.ts

@@ -267,6 +267,19 @@ export class DocBrowserManager {
     this.onRightPanelOpened?.();
   };
 
+  readonly reloadByDedupeKeys = (dedupeKeys: readonly string[]): void => {
+    const targets = new Set(dedupeKeys);
+    if (targets.size === 0) {
+      return;
+    }
+    this.setSnapshot((prev) => ({
+      ...prev,
+      tabs: prev.tabs.map((tab) => targets.has(tab.dedupeKey ?? "")
+        ? { ...tab, navVersion: tab.navVersion + 1 }
+        : tab),
+    }));
+  };
+
   readonly openNewTab = (): void => {
     this.open(undefined, { kind: DOC_BROWSER_HOME_TAB_KIND, newTab: true });
   };

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

@@ -34,6 +34,21 @@ describe('IconActionButton', () => {
     expect(button.className).toContain('hover:bg-[var(--interaction-hover)]');
   });
 
+  it('uses surface-relative feedback without introducing a new surface', () => {
+    render(
+      <IconActionButton
+        tone="surface"
+        icon={<span data-testid="icon" />}
+        label="Add project"
+      />,
+    );
+
+    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');
+  });
+
   it('ignores restored pointer focus while preserving keyboard tooltip focus', () => {
     render(
       <IconActionButton

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

@@ -8,7 +8,7 @@ import {
 import { cn } from '@/shared/lib/utils';
 
 type IconActionButtonSize = 'sm' | 'md' | 'lg';
-type IconActionButtonTone = 'default' | 'strong';
+type IconActionButtonTone = 'default' | 'surface' | 'strong';
 
 type IconActionButtonProps = Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -17,7 +17,7 @@ type IconActionButtonProps = Omit<
   icon: React.ReactNode;
   label: string;
   size?: IconActionButtonSize;
-  /** default: soft accent hover. strong: denser gray hover for nested hover surfaces. */
+  /** default: global interaction hover. surface: relative feedback on the current surface. strong: denser feedback for nested hover surfaces. */
   tone?: IconActionButtonTone;
   tooltip?: string | false | null;
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
@@ -32,6 +32,8 @@ const SIZE_CLASS: Record<IconActionButtonSize, string> = {
 const TONE_CLASS: Record<IconActionButtonTone, string> = {
   default:
     'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
+  surface:
+    'text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/80 disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
   strong:
     'text-muted-foreground hover:bg-black/10 hover:text-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
 };