@nextclaw/ui 0.15.24 → 0.15.26

package/src/features/marketplace/components/__tests__/marketplace-page.test.tsx

@@ -1,5 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MarketplacePage } from "@/features/marketplace";
+import { NextClawClientError } from "@nextclaw/client-sdk";
 import type {
   MarketplaceInstalledView,
   MarketplaceItemSummary,
@@ -82,6 +83,8 @@ vi.mock("@/shared/lib/host-capabilities", () => ({
 }));
 
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
+  isMarketplaceSkillLocalChangesError: (error: { code?: string }) =>
+    error?.code === "MARKETPLACE_SKILL_LOCAL_CHANGES",
   useMarketplaceItems: () => mocks.itemsQuery,
   useMarketplaceRecentItems: () => mocks.recentItemsQuery,
   useMarketplaceSkillScenes: () => ({
@@ -160,6 +163,43 @@ function createInstalledQuery(
   };
 }
 
+function prepareInstalledSkillUpdate() {
+  const item = createMarketplaceItem();
+  mocks.itemsQuery = createItemsQuery({
+    data: {
+      total: 1,
+      page: 1,
+      pageSize: 20,
+      totalPages: 1,
+      sort: "relevance",
+      items: [item],
+    } satisfies MarketplaceListView,
+  });
+  mocks.installedQuery = createInstalledQuery({
+    data: {
+      type: "skill",
+      total: 1,
+      specs: [item.slug],
+      records: [{
+        type: "skill",
+        id: item.slug,
+        spec: item.slug,
+        source: "workspace",
+        origin: "marketplace",
+        catalogSlug: item.slug,
+        enabled: true,
+      }],
+    } satisfies MarketplaceInstalledView,
+  });
+  mocks.manageMutation.mutateAsync.mockRejectedValueOnce(
+    new NextClawClientError({
+      message: "Local skill files changed since install: web-search",
+      status: 409,
+      code: "MARKETPLACE_SKILL_LOCAL_CHANGES",
+    }),
+  );
+}
+
 describe("MarketplacePage", () => {
   beforeEach(() => {
     mocks.navigate.mockReset();
@@ -364,4 +404,48 @@ describe("MarketplacePage", () => {
 
     expect(mocks.openExternalUrl).toHaveBeenCalledWith("https://skillhub.cn/");
   });
+
+  it("asks before overwriting local skill changes and retries the update with force", async () => {
+    prepareInstalledSkillUpdate();
+    mocks.manageMutation.mutateAsync.mockResolvedValueOnce({});
+    mocks.confirm.mockResolvedValueOnce(true);
+
+    render(<MarketplacePage forcedType="skills" />);
+    fireEvent.click(screen.getByRole("button", { name: "Update" }));
+
+    await waitFor(() => expect(mocks.confirm).toHaveBeenCalledWith({
+      title: "Overwrite local changes and update?",
+      description: "This skill was changed after installation. Continuing replaces local changes in its skill directory with the latest marketplace version. Canceling leaves the current files unchanged.",
+      confirmLabel: "Overwrite and Update",
+      variant: "destructive",
+    }));
+    await waitFor(() => expect(mocks.manageMutation.mutateAsync).toHaveBeenCalledTimes(2));
+    expect(mocks.manageMutation.mutateAsync).toHaveBeenNthCalledWith(1, {
+      type: "skill",
+      action: "update",
+      id: "web-search",
+      spec: "web-search",
+    });
+    expect(mocks.manageMutation.mutateAsync).toHaveBeenNthCalledWith(2, {
+      type: "skill",
+      action: "update",
+      id: "web-search",
+      spec: "web-search",
+      force: true,
+    });
+  });
+
+  it("keeps local skill changes untouched when overwrite is canceled", async () => {
+    prepareInstalledSkillUpdate();
+    mocks.confirm.mockResolvedValueOnce(false);
+
+    render(<MarketplacePage forcedType="skills" />);
+    fireEvent.click(screen.getByRole("button", { name: "Update" }));
+
+    await waitFor(() => expect(mocks.confirm).toHaveBeenCalledTimes(1));
+    expect(mocks.manageMutation.mutateAsync).toHaveBeenCalledTimes(1);
+    expect(mocks.manageMutation.mutateAsync).not.toHaveBeenCalledWith(
+      expect.objectContaining({ force: true }),
+    );
+  });
 });

package/src/features/marketplace/hooks/__tests__/use-marketplace.test.tsx

@@ -1,14 +1,25 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { renderHook, waitFor } from "@testing-library/react";
+import { act, renderHook, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import {
+  useManageMarketplaceItem,
   useMarketplaceItems,
   useMarketplaceRecentItems,
 } from "@/features/marketplace/hooks/use-marketplace";
+import { NextClawClientError } from "@nextclaw/client-sdk";
 import type { MarketplaceListView } from "@/shared/lib/api";
 
 const mocks = vi.hoisted(() => ({
   fetchMarketplaceItems: vi.fn(),
+  manageMarketplaceItem: vi.fn(),
+  toastError: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: mocks.toastError,
+    success: vi.fn(),
+  },
 }));
 
 vi.mock("@/shared/lib/api", async () => {
@@ -16,6 +27,7 @@ vi.mock("@/shared/lib/api", async () => {
   return {
     ...(actual as object),
     fetchMarketplaceItems: mocks.fetchMarketplaceItems,
+    manageMarketplaceItem: mocks.manageMarketplaceItem,
   };
 });
 
@@ -132,3 +144,34 @@ describe("useMarketplaceItems", () => {
     });
   });
 });
+
+describe("useManageMarketplaceItem", () => {
+  beforeEach(() => {
+    mocks.manageMarketplaceItem.mockReset();
+    mocks.toastError.mockReset();
+  });
+
+  it("leaves local-change conflicts for the explicit overwrite confirmation", async () => {
+    const conflict = new NextClawClientError({
+      message: "Local skill files changed since install: web-search",
+      status: 409,
+      code: "MARKETPLACE_SKILL_LOCAL_CHANGES",
+    });
+    mocks.manageMarketplaceItem.mockRejectedValueOnce(conflict);
+
+    const { result } = renderHook(() => useManageMarketplaceItem(), {
+      wrapper: createWrapper(),
+    });
+
+    await act(async () => {
+      await expect(result.current.mutateAsync({
+        type: "skill",
+        action: "update",
+        id: "web-search",
+        spec: "web-search",
+      })).rejects.toBe(conflict);
+    });
+
+    expect(mocks.toastError).not.toHaveBeenCalled();
+  });
+});

package/src/features/marketplace/hooks/use-marketplace-item-actions.ts

@@ -4,6 +4,7 @@ import type {
   MarketplaceManageAction,
 } from "@/shared/lib/api";
 import {
+  isMarketplaceSkillLocalChangesError,
   useInstallMarketplaceItem,
   useManageMarketplaceItem,
 } from "@/features/marketplace/hooks/use-marketplace";
@@ -76,12 +77,32 @@ export function useMarketplaceItemActions() {
     setManagingTargets((previous) => new Map(previous).set(targetId, action));
 
     try {
-      await manageMutation.mutateAsync({
+      const request = {
         type: record.type,
         action,
         id: targetId,
         spec: record.spec,
-      });
+      } as const;
+      try {
+        await manageMutation.mutateAsync(request);
+      } catch (error) {
+        if (action !== "update" || !isMarketplaceSkillLocalChangesError(error)) {
+          return;
+        }
+        const confirmed = await confirm({
+          title: t("marketplaceUpdateConflictTitle"),
+          description: t("marketplaceUpdateConflictDescription"),
+          confirmLabel: t("marketplaceUpdateConflictConfirm"),
+          variant: "destructive",
+        });
+        if (!confirmed) {
+          return;
+        }
+        await manageMutation.mutateAsync({
+          ...request,
+          force: true,
+        });
+      }
     } finally {
       setManagingTargets((previous) => {
         const next = new Map(previous);

package/src/features/marketplace/hooks/use-marketplace.ts

@@ -24,8 +24,15 @@ import type {
 } from '@/shared/lib/api';
 import { collapseMarketplaceListPages } from '@/features/marketplace/utils/marketplace-list-pages.utils';
 import { useMemo } from 'react';
+import { NextClawClientError } from '@nextclaw/client-sdk';
 
 const MARKETPLACE_BACKGROUND_REFRESH_MS = 30_000;
+export const MARKETPLACE_SKILL_LOCAL_CHANGES_ERROR_CODE = 'MARKETPLACE_SKILL_LOCAL_CHANGES';
+
+export function isMarketplaceSkillLocalChangesError(error: unknown): boolean {
+  return error instanceof NextClawClientError
+    && error.code === MARKETPLACE_SKILL_LOCAL_CHANGES_ERROR_CODE;
+}
 
 export function useMarketplaceItems(params: MarketplaceListParams) {
   const query = useInfiniteQuery({
@@ -209,6 +216,9 @@ export function useManageMarketplaceItem() {
       toast.success(result.message || fallback);
     },
     onError: (error: Error) => {
+      if (isMarketplaceSkillLocalChangesError(error)) {
+        return;
+      }
       toast.error(error.message || t('marketplaceOperationFailed'));
     }
   });

package/src/features/marketplace/index.ts

@@ -3,6 +3,10 @@ export { McpMarketplacePage } from './components/mcp/mcp-marketplace-page';
 export {
   MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
 } from './components/marketplace-detail-doc';
+export {
+  buildLocaleFallbacks,
+  pickLocalizedText,
+} from './components/marketplace-localization';
 export {
   useInstallMarketplaceItem,
   useManageMarketplaceItem,

package/src/features/panel-apps/index.ts

@@ -1,5 +1,9 @@
 export { PanelAppsList } from './components/panel-apps-list';
-export { usePanelApps } from './hooks/use-panel-apps';
+export {
+  useGrantPanelAppClient,
+  usePanelApps,
+  useRecordPanelAppOpened,
+} from './hooks/use-panel-apps';
 export { PanelAppBridgeManager } from './managers/panel-app-bridge.manager';
 export { findPanelAppEntryByDisplayId } from './utils/panel-app-entry-match.utils';
 export { PANEL_APP_IFRAME_SANDBOX, focusPanelAppIframe } from './utils/panel-app-iframe.utils';

package/src/features/panel-apps/utils/__tests__/panel-app-doc-browser.utils.test.ts

@@ -4,9 +4,16 @@ import {
 } from '@/features/panel-apps/utils/panel-app-doc-browser.utils';
 
 describe('panel app doc browser URL helpers', () => {
-  it('uses the root apps URL for the default panel apps tab', () => {
-    expect(createAppsPanelUrl('panel-apps')).toBe('nextclaw://apps');
-    expect(getAppsPanelTabFromUrl('nextclaw://apps')).toBe('panel-apps');
+  it('uses the root apps URL for the package library', () => {
+    expect(createAppsPanelUrl('apps')).toBe('nextclaw://apps');
+    expect(getAppsPanelTabFromUrl('nextclaw://apps')).toBe('apps');
+  });
+
+  it('round-trips the developer panel apps tab', () => {
+    const url = createAppsPanelUrl('panel-apps');
+
+    expect(url).toBe('nextclaw://apps?tab=panel-apps');
+    expect(getAppsPanelTabFromUrl(url)).toBe('panel-apps');
   });
 
   it('round-trips the service apps tab through the hidden apps URL', () => {
@@ -16,8 +23,8 @@ describe('panel app doc browser URL helpers', () => {
     expect(getAppsPanelTabFromUrl(url)).toBe('service-apps');
   });
 
-  it('falls back to panel apps for unknown URL state', () => {
-    expect(getAppsPanelTabFromUrl('nextclaw://apps?tab=unknown')).toBe('panel-apps');
-    expect(getAppsPanelTabFromUrl('not a url')).toBe('panel-apps');
+  it('falls back to the package library for unknown URL state', () => {
+    expect(getAppsPanelTabFromUrl('nextclaw://apps?tab=unknown')).toBe('apps');
+    expect(getAppsPanelTabFromUrl('not a url')).toBe('apps');
   });
 });

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -10,6 +10,7 @@ import {
   RIGHT_PANEL_APPS_URL,
   RIGHT_PANEL_HOME_TAB_KIND,
   RIGHT_PANEL_PANEL_APP_TAB_KIND,
+  RIGHT_PANEL_PANEL_APPS_URL,
   RIGHT_PANEL_SERVICE_APPS_URL,
   RightPanelResourceHomePage,
 } from '@/features/right-panel-resources';
@@ -18,14 +19,16 @@ import { PANEL_APP_IFRAME_SANDBOX, focusPanelAppIframe } from './panel-app-ifram
 
 export const APPS_TAB_KIND = RIGHT_PANEL_APPS_TAB_KIND;
 export const PANEL_APP_TAB_KIND = RIGHT_PANEL_PANEL_APP_TAB_KIND;
-const DEFAULT_APPS_PANEL_TAB: AppsPanelTab = 'panel-apps';
+const DEFAULT_APPS_PANEL_TAB: AppsPanelTab = 'apps';
 
 function isAppsPanelTab(value: unknown): value is AppsPanelTab {
-  return value === 'panel-apps' || value === 'service-apps';
+  return value === 'apps' || value === 'panel-apps' || value === 'service-apps';
 }
 
 export function createAppsPanelUrl(tab: AppsPanelTab = DEFAULT_APPS_PANEL_TAB): string {
-  return tab === DEFAULT_APPS_PANEL_TAB ? RIGHT_PANEL_APPS_URL : RIGHT_PANEL_SERVICE_APPS_URL;
+  if (tab === 'panel-apps') return RIGHT_PANEL_PANEL_APPS_URL;
+  if (tab === 'service-apps') return RIGHT_PANEL_SERVICE_APPS_URL;
+  return RIGHT_PANEL_APPS_URL;
 }
 
 export function getAppsPanelTabFromUrl(url: string): AppsPanelTab {

package/src/features/right-panel-resources/index.ts

@@ -15,5 +15,6 @@ export {
   RIGHT_PANEL_HOME_TAB_KIND,
   RIGHT_PANEL_HOME_URL,
   RIGHT_PANEL_PANEL_APP_TAB_KIND,
+  RIGHT_PANEL_PANEL_APPS_URL,
   RIGHT_PANEL_SERVICE_APPS_URL,
 } from '@/features/right-panel-resources/utils/right-panel-resource-uri.utils';

package/src/features/right-panel-resources/utils/right-panel-resource-uri.utils.ts

@@ -6,19 +6,22 @@ export const RIGHT_PANEL_HOME_TAB_KIND = 'home';
 export const RIGHT_PANEL_HOME_URL = 'nextclaw://new-tab';
 export const RIGHT_PANEL_APPS_TAB_KIND = 'apps';
 export const RIGHT_PANEL_APPS_URL = 'nextclaw://apps';
+export const RIGHT_PANEL_PANEL_APPS_URL = `${RIGHT_PANEL_APPS_URL}?tab=panel-apps`;
 export const RIGHT_PANEL_SERVICE_APPS_URL = `${RIGHT_PANEL_APPS_URL}?tab=service-apps`;
 export const RIGHT_PANEL_PANEL_APP_TAB_KIND = 'panel-app';
 
-export type RightPanelAppsTab = 'panel-apps' | 'service-apps';
+export type RightPanelAppsTab = 'apps' | 'panel-apps' | 'service-apps';
 
-const DEFAULT_RIGHT_PANEL_APPS_TAB: RightPanelAppsTab = 'panel-apps';
+const DEFAULT_RIGHT_PANEL_APPS_TAB: RightPanelAppsTab = 'apps';
 
 function isRightPanelAppsTab(value: unknown): value is RightPanelAppsTab {
-  return value === 'panel-apps' || value === 'service-apps';
+  return value === 'apps' || value === 'panel-apps' || value === 'service-apps';
 }
 
 export function createRightPanelAppsUrl(tab: RightPanelAppsTab = DEFAULT_RIGHT_PANEL_APPS_TAB): string {
-  return tab === DEFAULT_RIGHT_PANEL_APPS_TAB ? RIGHT_PANEL_APPS_URL : RIGHT_PANEL_SERVICE_APPS_URL;
+  if (tab === 'panel-apps') return RIGHT_PANEL_PANEL_APPS_URL;
+  if (tab === 'service-apps') return RIGHT_PANEL_SERVICE_APPS_URL;
+  return RIGHT_PANEL_APPS_URL;
 }
 
 export function getRightPanelAppsTabFromUrl(url: string): RightPanelAppsTab {

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;