@nextclaw/ui 0.12.19 → 0.12.20-beta.0

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

@@ -1,4 +1,6 @@
+import type { UpdateSnapshot } from '@nextclaw/kernel';
 import { useEffect } from 'react';
+import { runtimeUpdateManager, useRuntimeUpdateStore } from '@/features/system-status';
 import { Button } from '@/shared/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
 import { Label } from '@/shared/components/ui/label';
@@ -7,11 +9,6 @@ import { Switch } from '@/shared/components/ui/switch';
 import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
 import { formatDateTime, t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
-import {
-  desktopUpdateManager,
-  type DesktopReleaseChannel,
-  useDesktopUpdateStore,
-} from '@/platforms/desktop';
 import { Download, ExternalLink, RefreshCw, RotateCw } from 'lucide-react';
 
 const STATUS_LABEL_KEYS: Record<string, string> = {
@@ -20,6 +17,7 @@ const STATUS_LABEL_KEYS: Record<string, string> = {
   downloading: 'desktopUpdatesStatusDownloading',
   downloaded: 'desktopUpdatesStatusDownloaded',
   'up-to-date': 'desktopUpdatesStatusUpToDate',
+  blocked: 'desktopUpdatesStatusBlocked',
   failed: 'desktopUpdatesStatusFailed',
 };
 
@@ -31,6 +29,28 @@ function OverviewStat({ label, value }: { label: string; value: string }) {
   return <div className="rounded-xl border border-gray-200 bg-gray-50/60 p-4"><p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">{label}</p><p className="mt-2 text-base font-semibold text-gray-900">{value}</p></div>;
 }
 
+function DownloadProgress({ snapshot }: { snapshot: UpdateSnapshot }) {
+  if (snapshot.status !== 'downloading') {
+    return null;
+  }
+  const percent = snapshot.progress?.percent;
+  const progressLabel = percent === null || percent === undefined
+    ? t('desktopUpdatesDownloadProgressUnknown')
+    : t('desktopUpdatesDownloadProgressPercent').replace('{percent}', String(percent));
+  const byteLabel = formatDownloadBytes(snapshot.progress?.downloadedBytes ?? 0, snapshot.progress?.totalBytes ?? null);
+  return (
+    <div className="rounded-2xl border border-amber-200 bg-amber-50/70 p-4">
+      <div className="flex items-center justify-between gap-4">
+        <p className="text-sm font-semibold text-amber-800">{progressLabel}</p>
+        <p className="text-xs font-medium text-amber-700">{byteLabel}</p>
+      </div>
+      <div className="mt-3 h-2 overflow-hidden rounded-full bg-amber-100">
+        <div className="h-full rounded-full bg-amber-500 transition-[width]" style={{ width: `${percent ?? 0}%` }} />
+      </div>
+    </div>
+  );
+}
+
 function PreferenceToggle({
   label,
   help,
@@ -61,7 +81,24 @@ function formatVersion(value: string | null): string {
 function formatLastCheckedAt(value: string | null): string {
   return value ? formatDateTime(value) : '-';
 }
-function getChannelLabel(channel: DesktopReleaseChannel): string {
+function formatDownloadBytes(downloadedBytes: number, totalBytes: number | null): string {
+  const downloaded = formatBytes(downloadedBytes);
+  return totalBytes && totalBytes > 0 ? `${downloaded} / ${formatBytes(totalBytes)}` : downloaded;
+}
+function formatBytes(value: number): string {
+  if (!Number.isFinite(value) || value <= 0) {
+    return '0 B';
+  }
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let cursor = value;
+  let unitIndex = 0;
+  while (cursor >= 1024 && unitIndex < units.length - 1) {
+    cursor /= 1024;
+    unitIndex += 1;
+  }
+  return `${cursor >= 10 || unitIndex === 0 ? cursor.toFixed(0) : cursor.toFixed(1)} ${units[unitIndex]}`;
+}
+function getChannelLabel(channel: UpdateSnapshot['channel']): string {
   return channel === 'beta' ? t('desktopUpdatesChannelBeta') : t('desktopUpdatesChannelStable');
 }
 function getStatusLabel(status: string): string {
@@ -74,40 +111,40 @@ function getStatusTone(status: string): string {
   if (status === 'update-available' || status === 'downloading' || status === 'checking') {
     return 'bg-amber-50 text-amber-700 ring-amber-100';
   }
-  if (status === 'failed') {
+  if (status === 'failed' || status === 'blocked') {
     return 'bg-red-50 text-red-700 ring-red-100';
   }
   return 'bg-gray-100 text-gray-700 ring-gray-200';
 }
 
-function DesktopOnlyState() {
+function RuntimeUpdateUnavailableState() {
   return (
     <PageLayout className="space-y-6">
-      <PageHeader title={t('desktopUpdatesPageTitle')} description={t('desktopUpdatesPageDescription')} />
+      <PageHeader title={t('runtimeUpdatesPageTitle')} description={t('runtimeUpdatesPageDescription')} />
       <Card>
         <CardHeader>
-          <CardTitle>{t('desktopUpdatesDesktopOnlyTitle')}</CardTitle>
-          <CardDescription>{t('desktopUpdatesDesktopOnlyDescription')}</CardDescription>
+          <CardTitle>{t('runtimeUpdatesUnavailableTitle')}</CardTitle>
+          <CardDescription>{t('runtimeUpdatesUnavailableDescription')}</CardDescription>
         </CardHeader>
-        <CardContent><p className="text-sm text-gray-500">{t('desktopUpdatesDesktopOnlyFutureHint')}</p></CardContent>
+        <CardContent><p className="text-sm text-gray-500">{t('runtimeUpdatesUnavailableHint')}</p></CardContent>
       </Card>
     </PageLayout>
   );
 }
 
 export function DesktopUpdateConfig() {
-  const { supported, initialized, busyAction, snapshot } = useDesktopUpdateStore();
+  const { supported, initialized, busyAction, snapshot } = useRuntimeUpdateStore();
   useEffect(() => {
-    void desktopUpdateManager.start();
+    void runtimeUpdateManager.start();
     return () => {
-      desktopUpdateManager.stop();
+      runtimeUpdateManager.stop();
     };
   }, []);
   if (!initialized) {
     return <div className="p-8 text-gray-400">{t('loading')}</div>;
   }
   if (!supported || !snapshot) {
-    return <DesktopOnlyState />;
+    return <RuntimeUpdateUnavailableState />;
   }
   const isChecking = busyAction === 'checking';
   const isDownloading = busyAction === 'downloading';
@@ -117,7 +154,7 @@ export function DesktopUpdateConfig() {
   const canDownload = snapshot.status === 'update-available' && !isDownloading && !isApplying;
   const canApply = snapshot.status === 'downloaded' && !isApplying;
   const overviewStats = [
-    [t('desktopUpdatesLauncherVersion'), formatVersion(snapshot.launcherVersion)],
+    [t('runtimeUpdatesHostVersion'), formatVersion(snapshot.hostVersion)],
     [t('desktopUpdatesCurrentBundleVersion'), formatVersion(snapshot.currentVersion)],
     [t('desktopUpdatesAvailableVersion'), formatVersion(snapshot.availableVersion)],
     [t('desktopUpdatesLastCheckedAt'), formatLastCheckedAt(snapshot.lastCheckedAt)],
@@ -126,9 +163,9 @@ export function DesktopUpdateConfig() {
   return (
     <PageLayout className="space-y-6">
       <PageHeader
-        title={t('desktopUpdatesPageTitle')}
-        description={t('desktopUpdatesPageDescription')}
-        actions={<Button variant="outline" onClick={() => void desktopUpdateManager.checkForUpdates()} disabled={isChecking || isDownloading || isApplying}><RefreshCw className={cn('mr-2 h-4 w-4', isChecking && 'animate-spin')} />{t('desktopUpdatesCheckNow')}</Button>}
+        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>}
       />
       <Card>
         <CardHeader>
@@ -147,10 +184,18 @@ export function DesktopUpdateConfig() {
           {snapshot.downloadedVersion ? (
             <div className="rounded-2xl border border-emerald-200 bg-emerald-50/70 p-4">
               <p className="text-sm font-semibold text-emerald-800">{t('desktopUpdatesDownloadedBannerTitle')}</p>
-              <p className="mt-1 text-sm text-emerald-700">{t('desktopUpdatesDownloadedBannerDescription').replace('{version}', snapshot.downloadedVersion)}</p>
+              <p className="mt-1 text-sm text-emerald-700">{t('runtimeUpdatesDownloadedBannerDescription').replace('{version}', snapshot.downloadedVersion)}</p>
+            </div>
+          ) : null}
+          <DownloadProgress snapshot={snapshot} />
+          {snapshot.status === 'blocked' ? (
+            <div className="rounded-2xl border border-red-200 bg-red-50/70 p-4">
+              <p className="text-sm font-semibold text-red-800">{t('desktopUpdatesBlockedTitle')}</p>
+              <p className="mt-1 text-sm text-red-700">{snapshot.errorMessage ?? t('desktopUpdatesBlockedDescription')}</p>
+              {snapshot.recoveryCommand ? <code className="mt-3 block rounded-lg bg-white/70 px-3 py-2 text-xs text-red-800">{snapshot.recoveryCommand}</code> : null}
             </div>
           ) : null}
-          {snapshot.errorMessage ? <div className="rounded-2xl border border-red-200 bg-red-50/70 p-4 text-sm text-red-700">{snapshot.errorMessage}</div> : null}
+          {snapshot.errorMessage && snapshot.status !== 'blocked' ? <div className="rounded-2xl border border-red-200 bg-red-50/70 p-4 text-sm text-red-700">{snapshot.errorMessage}</div> : null}
         </CardContent>
       </Card>
       <Card>
@@ -165,7 +210,7 @@ export function DesktopUpdateConfig() {
                 <Label>{t('desktopUpdatesReleaseChannel')}</Label>
                 <p className="text-sm text-gray-500">{t('desktopUpdatesReleaseChannelHelp')}</p>
               </div>
-              <Select value={snapshot.channel} disabled={isSwitchingChannel || isChecking || isDownloading || isApplying} onValueChange={(value) => void desktopUpdateManager.updateChannel(value as DesktopReleaseChannel)}>
+              <Select value={snapshot.channel} disabled={isSwitchingChannel || isChecking || isDownloading || isApplying} onValueChange={(value) => void runtimeUpdateManager.updateChannel(value as UpdateSnapshot['channel'])}>
                 <SelectTrigger className="w-full max-w-sm">
                   <SelectValue placeholder={t('desktopUpdatesReleaseChannel')} />
                 </SelectTrigger>
@@ -182,34 +227,34 @@ export function DesktopUpdateConfig() {
             help={t('desktopUpdatesAutomaticChecksHelp')}
             checked={snapshot.preferences.automaticChecks}
             disabled={isSavingPreferences || isSwitchingChannel}
-            onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ automaticChecks: checked })}
+            onCheckedChange={(checked) => void runtimeUpdateManager.updatePreferences({ automaticChecks: checked })}
           />
           <PreferenceToggle
             label={t('desktopUpdatesAutoDownload')}
             help={t('desktopUpdatesAutoDownloadHelp')}
             checked={snapshot.preferences.autoDownload}
             disabled={isSavingPreferences || isSwitchingChannel}
-            onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ autoDownload: checked })}
+            onCheckedChange={(checked) => void runtimeUpdateManager.updatePreferences({ autoDownload: checked })}
           />
         </CardContent>
       </Card>
       <Card>
         <CardHeader>
           <CardTitle>{t('desktopUpdatesActionsTitle')}</CardTitle>
-          <CardDescription>{t('desktopUpdatesActionsDescription')}</CardDescription>
+          <CardDescription>{t('runtimeUpdatesActionsDescription')}</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-wrap items-center gap-3">
-          <Button variant="outline" onClick={() => void desktopUpdateManager.checkForUpdates()} disabled={isChecking || isDownloading || isApplying}>
+          <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>
-          <Button onClick={() => void desktopUpdateManager.downloadUpdate()} disabled={!canDownload}>
+          <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 desktopUpdateManager.applyDownloadedUpdate()} disabled={!canApply}>
+          <Button variant="secondary" onClick={() => void runtimeUpdateManager.applyDownloadedUpdate()} disabled={!canApply}>
             <RotateCw className={cn('mr-2 h-4 w-4', isApplying && 'animate-spin')} />
-            {t('desktopUpdatesApplyNow')}
+            {t('runtimeUpdatesApplyNow')}
           </Button>
           {snapshot.releaseNotesUrl ? <Button variant="ghost" onClick={() => window.open(snapshot.releaseNotesUrl ?? '', '_blank', 'noopener,noreferrer')}><ExternalLink className="mr-2 h-4 w-4" />{t('desktopUpdatesReleaseNotes')}</Button> : null}
         </CardContent>

package/src/features/system-status/hooks/use-system-status.ts

@@ -82,17 +82,6 @@ export function useSystemStatus() {
   return toSystemStatusView(state);
 }
 
-export function useChatRuntimeAvailability() {
-  const state = useSystemStatusStore((store) => store.state);
-  const view = toSystemStatusView(state);
-  return {
-    isBlocked: view.isChatBlocked,
-    message: view.chatMessage,
-    phase: view.phase,
-    lastReadyAt: view.lastReadyAt,
-  };
-}
-
 export function useRuntimeStatusBadgeView() {
   const state = useSystemStatusStore((store) => store.state);
   return toRuntimeStatusBadgeView(state);

package/src/features/system-status/index.ts

@@ -1,4 +1,7 @@
-export { useChatRuntimeAvailability, useRuntimeControlPanelView, useRuntimeStatusBadgeView, useSystemStatus, useSystemStatusSources } from './hooks/use-system-status';
+export { useRuntimeControlPanelView, useRuntimeStatusBadgeView, useSystemStatus, useSystemStatusSources } from './hooks/use-system-status';
 export { isTransientRuntimeConnectionErrorMessage, systemStatusManager } from './managers/system-status.manager';
+export { runtimeUpdateManager } from './managers/runtime-update.manager';
+export type { SystemStatusState, SystemStatusView } from './types/system-status.types';
 export { useSystemStatusStore } from './stores/system-status.store';
+export { useRuntimeUpdateStore } from './stores/runtime-update.store';
 export { SecurityConfig } from './components/security-config';

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

@@ -0,0 +1,330 @@
+import type { UpdatePreferences, UpdateSnapshot } from '@nextclaw/kernel';
+import { applyRuntimeUpdate, checkRuntimeUpdate, downloadRuntimeUpdate, fetchRuntimeUpdate, updateRuntimeUpdateChannel, updateRuntimeUpdatePreferences } from '@/shared/lib/api';
+import type { NextClawDesktopBridge } from '@/platforms/desktop';
+import { t } from '@/shared/lib/i18n';
+import { toast } from 'sonner';
+import { useRuntimeUpdateStore, type RuntimeUpdateBusyAction } from '@/features/system-status/stores/runtime-update.store';
+
+type RuntimeUpdateSourceKind = 'desktop-bridge' | 'runtime-host';
+
+interface RuntimeUpdateSourceBase {
+  getState: () => Promise<UpdateSnapshot>;
+  checkForUpdates: () => Promise<UpdateSnapshot>;
+  downloadUpdate: () => Promise<UpdateSnapshot>;
+  applyDownloadedUpdate: () => Promise<UpdateSnapshot>;
+  updatePreferences: (preferences: Partial<UpdatePreferences>) => Promise<UpdateSnapshot>;
+  updateChannel: (channel: UpdateSnapshot['channel']) => Promise<UpdateSnapshot>;
+}
+
+interface DesktopBridgeRuntimeUpdateSourceContract extends RuntimeUpdateSourceBase {
+  kind: 'desktop-bridge';
+  subscribe: (listener: (snapshot: UpdateSnapshot) => void) => () => void;
+}
+
+interface HostRuntimeUpdateSourceContract extends RuntimeUpdateSourceBase {
+  kind: 'runtime-host';
+}
+
+const RUNTIME_HOST_POLL_INTERVAL_MS = 1000;
+
+type RuntimeUpdateSource = DesktopBridgeRuntimeUpdateSourceContract | HostRuntimeUpdateSourceContract;
+
+class DesktopBridgeRuntimeUpdateSource implements DesktopBridgeRuntimeUpdateSourceContract {
+  readonly kind = 'desktop-bridge' as const;
+
+  constructor(private readonly desktopApi: NextClawDesktopBridge) {}
+
+  subscribe = (listener: (snapshot: UpdateSnapshot) => void) => {
+    return this.desktopApi.onUpdateStateChanged(listener);
+  };
+
+  getState = async (): Promise<UpdateSnapshot> => {
+    return await this.desktopApi.getUpdateState();
+  };
+
+  checkForUpdates = async (): Promise<UpdateSnapshot> => {
+    return await this.desktopApi.checkForUpdates();
+  };
+
+  downloadUpdate = async (): Promise<UpdateSnapshot> => {
+    return await this.desktopApi.downloadUpdate();
+  };
+
+  applyDownloadedUpdate = async (): Promise<UpdateSnapshot> => {
+    return await this.desktopApi.applyDownloadedUpdate();
+  };
+
+  updatePreferences = async (preferences: Partial<UpdatePreferences>): Promise<UpdateSnapshot> => {
+    return await this.desktopApi.updatePreferences(preferences);
+  };
+
+  updateChannel = async (channel: UpdateSnapshot['channel']): Promise<UpdateSnapshot> => {
+    return await this.desktopApi.updateChannel(channel);
+  };
+}
+
+class HostRuntimeUpdateSource implements HostRuntimeUpdateSourceContract {
+  readonly kind = 'runtime-host' as const;
+
+  getState = async (): Promise<UpdateSnapshot> => {
+    return await fetchRuntimeUpdate();
+  };
+
+  checkForUpdates = async (): Promise<UpdateSnapshot> => {
+    return await checkRuntimeUpdate();
+  };
+
+  downloadUpdate = async (): Promise<UpdateSnapshot> => {
+    return await downloadRuntimeUpdate();
+  };
+
+  applyDownloadedUpdate = async (): Promise<UpdateSnapshot> => {
+    return await applyRuntimeUpdate();
+  };
+
+  updatePreferences = async (preferences: Partial<UpdatePreferences>): Promise<UpdateSnapshot> => {
+    return await updateRuntimeUpdatePreferences(preferences);
+  };
+
+  updateChannel = async (channel: UpdateSnapshot['channel']): Promise<UpdateSnapshot> => {
+    return await updateRuntimeUpdateChannel(channel);
+  };
+}
+
+export class RuntimeUpdateManager {
+  private unsubscribe: (() => void) | null = null;
+  private pollingTimer: number | null = null;
+  private subscriptionCount = 0;
+  private source: RuntimeUpdateSource | null = null;
+
+  start = async () => {
+    this.subscriptionCount += 1;
+    const source = this.resolveSource();
+    this.source = source;
+    if (!source) {
+      useRuntimeUpdateStore.setState({
+        supported: false,
+        initialized: true,
+        snapshot: null
+      });
+      return;
+    }
+
+    if (source.kind === 'desktop-bridge' && !this.unsubscribe) {
+      this.unsubscribe = source.subscribe((snapshot) => {
+        useRuntimeUpdateStore.setState({
+          supported: true,
+          initialized: true,
+          snapshot
+        });
+      });
+    }
+
+    if (source.kind === 'runtime-host') {
+      this.ensurePolling();
+    }
+
+    useRuntimeUpdateStore.setState({
+      supported: true,
+      initialized: false
+    });
+
+    try {
+      const snapshot = await source.getState();
+      useRuntimeUpdateStore.setState({
+        supported: true,
+        initialized: true,
+        snapshot
+      });
+    } catch (error) {
+      if (source.kind === 'runtime-host' && this.isUnsupportedError(error)) {
+        useRuntimeUpdateStore.setState({
+          supported: false,
+          initialized: true,
+          snapshot: null
+        });
+        return;
+      }
+      useRuntimeUpdateStore.setState({
+        supported: true,
+        initialized: true
+      });
+      toast.error(`${t('runtimeUpdatesLoadFailed')}: ${this.getErrorMessage(error)}`);
+    }
+  };
+
+  stop = () => {
+    this.subscriptionCount = Math.max(0, this.subscriptionCount - 1);
+    if (this.subscriptionCount > 0) {
+      return;
+    }
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    if (this.pollingTimer !== null && typeof window !== 'undefined') {
+      window.clearInterval(this.pollingTimer);
+    }
+    this.pollingTimer = null;
+    this.source = null;
+  };
+
+  checkForUpdates = async () => {
+    let snapshot: UpdateSnapshot;
+    try {
+      snapshot = await this.runSnapshotCommand('checking', t('runtimeUpdatesCheckFailed'), async (source) => {
+        return await source.checkForUpdates();
+      });
+    } catch {
+      return;
+    }
+
+    if (snapshot.status === 'up-to-date') {
+      toast.success(t('runtimeUpdatesAlreadyLatest'));
+      return;
+    }
+    if (snapshot.status === 'update-available') {
+      toast.success(
+        t('runtimeUpdatesAvailable').replace('{version}', snapshot.availableVersion ?? t('runtimeUpdatesUnknownVersion'))
+      );
+      return;
+    }
+    if (snapshot.status === 'downloaded') {
+      toast.success(t('runtimeUpdatesReadyToApply'));
+    }
+  };
+
+  downloadUpdate = async () => {
+    try {
+      await this.runSnapshotCommand('downloading', t('runtimeUpdatesDownloadFailed'), async (source) => {
+        return await source.downloadUpdate();
+      });
+    } catch {
+      return;
+    }
+  };
+
+  applyDownloadedUpdate = async () => {
+    try {
+      await this.runSnapshotCommand('applying', t('runtimeUpdatesApplyFailed'), async (source) => {
+        return await source.applyDownloadedUpdate();
+      });
+    } catch {
+      return;
+    }
+  };
+
+  updatePreferences = async (preferences: Partial<UpdatePreferences>) => {
+    try {
+      await this.runSnapshotCommand('saving-preferences', t('runtimeUpdatesPreferencesFailed'), async (source) => {
+        return await source.updatePreferences(preferences);
+      });
+    } catch {
+      return;
+    }
+  };
+
+  updateChannel = async (channel: UpdateSnapshot['channel']) => {
+    const currentChannel = useRuntimeUpdateStore.getState().snapshot?.channel;
+    if (currentChannel === channel) {
+      return;
+    }
+
+    let snapshot: UpdateSnapshot;
+    try {
+      snapshot = await this.runSnapshotCommand('switching-channel', t('runtimeUpdatesChannelChangeFailed'), async (source) => {
+        return await source.updateChannel(channel);
+      });
+    } catch {
+      return;
+    }
+
+    if (snapshot.status === 'update-available' && snapshot.availableVersion) {
+      toast.success(
+        t('runtimeUpdatesChannelChangedWithUpdate')
+          .replace('{channel}', this.getChannelLabel(channel))
+          .replace('{version}', snapshot.availableVersion)
+      );
+      return;
+    }
+
+    toast.success(t('runtimeUpdatesChannelChanged').replace('{channel}', this.getChannelLabel(channel)));
+  };
+
+  private ensurePolling = () => {
+    if (this.pollingTimer !== null || typeof window === 'undefined') {
+      return;
+    }
+    this.pollingTimer = window.setInterval(() => {
+      void this.refreshSnapshot();
+    }, RUNTIME_HOST_POLL_INTERVAL_MS);
+  };
+
+  private refreshSnapshot = async () => {
+    if (!this.source || this.source.kind !== 'runtime-host') {
+      return;
+    }
+    try {
+      const snapshot = await this.source.getState();
+      useRuntimeUpdateStore.setState({
+        supported: true,
+        initialized: true,
+        snapshot
+      });
+    } catch {
+      // keep the latest successful snapshot visible
+    }
+  };
+
+  private runSnapshotCommand = async (
+    busyAction: RuntimeUpdateBusyAction,
+    fallbackMessage: string,
+    job: (source: RuntimeUpdateSource) => Promise<UpdateSnapshot>
+  ): Promise<UpdateSnapshot> => {
+    const source = this.source ?? this.resolveSource();
+    if (!source) {
+      throw new Error(t('runtimeUpdatesUnavailableDescription'));
+    }
+
+    this.source = source;
+    useRuntimeUpdateStore.setState({ busyAction });
+    try {
+      const snapshot = await job(source);
+      useRuntimeUpdateStore.setState({ snapshot });
+      return snapshot;
+    } catch (error) {
+      toast.error(`${fallbackMessage}: ${this.getErrorMessage(error)}`);
+      throw error;
+    } finally {
+      useRuntimeUpdateStore.setState({ busyAction: null });
+    }
+  };
+
+  private resolveSource = (): RuntimeUpdateSource | null => {
+    const desktopApi = this.getDesktopApi();
+    if (desktopApi) {
+      return new DesktopBridgeRuntimeUpdateSource(desktopApi);
+    }
+    return new HostRuntimeUpdateSource();
+  };
+
+  private getDesktopApi = (): NextClawDesktopBridge | null => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    return window.nextclawDesktop ?? null;
+  };
+
+  private isUnsupportedError = (error: unknown): boolean => {
+    const message = this.getErrorMessage(error).toLowerCase();
+    return message.includes('404') || message.includes('not found') || message.includes('endpoint not found');
+  };
+
+  private getErrorMessage = (error: unknown): string => {
+    return error instanceof Error ? error.message : t('error');
+  };
+
+  private getChannelLabel = (channel: UpdateSnapshot['channel']): string => {
+    return channel === 'beta' ? t('desktopUpdatesChannelBeta') : t('desktopUpdatesChannelStable');
+  };
+}
+
+export const runtimeUpdateManager = new RuntimeUpdateManager();

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

@@ -1,7 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { BootstrapStatusView } from '@/shared/lib/api';
 import { appQueryClient } from '@/app-query-client';
-import { t } from '@/shared/lib/i18n';
 import {
   isTransientRuntimeConnectionErrorMessage,
   systemStatusManager,
@@ -120,30 +119,6 @@ describe('systemStatusManager', () => {
     expect(useSystemStatusStore.getState().state.lifecyclePhase).toBe('stalled');
   });
 
-  it('maps transient chat errors to friendly recovery copy while recovering', () => {
-    systemStatusManager.reportBootstrapStatus(readyBootstrapStatus);
-    systemStatusManager.handleConnectionInterrupted('Failed to fetch');
-
-    expect(
-      systemStatusManager.getDisplayMessage(
-        'NCP fetch failed for POST /api/ncp/agent: Error: Failed to fetch'
-      )
-    ).toBe(t('runtimeControlRecoveringHelp'));
-  });
-
-  it('suppresses transient transport errors after recovery stalls', async () => {
-    systemStatusManager.reportBootstrapStatus(readyBootstrapStatus);
-    systemStatusManager.handleConnectionInterrupted('Failed to fetch');
-
-    await vi.advanceTimersByTimeAsync(30_000);
-
-    expect(
-      systemStatusManager.getDisplayMessage(
-        'NCP fetch failed for POST /api/ncp/agent: Error: Failed to fetch'
-      )
-    ).toBeNull();
-  });
-
   it('restores readiness from stalled once the realtime connection reopens', async () => {
     systemStatusManager.reportBootstrapStatus(readyBootstrapStatus);
     systemStatusManager.handleConnectionInterrupted('websocket error');

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

@@ -15,7 +15,6 @@ import type { NextClawDesktopBridge } from '@/platforms/desktop';
 import { t } from '@/shared/lib/i18n';
 import {
   buildActiveSystemActionState,
-  resolveChatRuntimeMessage,
   toSystemStatusView,
 } from '@/features/system-status/utils/system-status.utils';
 import {
@@ -245,35 +244,7 @@ export class SystemStatusManager {
     }
   };
 
-  isChatInteractionBlocked = (): boolean => {
-    return toSystemStatusView(this.getState()).isChatBlocked;
-  };
-
-  getDisplayMessage = (message: string | null | undefined): string | null => {
-    if (!message?.trim()) {
-      return resolveChatRuntimeMessage(this.getState());
-    }
-    const { phase } = toSystemStatusView(this.getState());
-    if (
-      phase === 'service-transitioning' &&
-      this.getState().activeSystemAction?.message?.trim()
-    ) {
-      return this.getState().activeSystemAction?.message?.trim() ?? null;
-    }
-    if (
-      phase === 'recovering' &&
-      isTransientRuntimeConnectionErrorMessage(message)
-    ) {
-      return t('runtimeControlRecoveringHelp');
-    }
-    if (
-      phase === 'stalled' &&
-      isTransientRuntimeConnectionErrorMessage(message)
-    ) {
-      return null;
-    }
-    return message;
-  };
+  getStatusView = () => toSystemStatusView(this.getState());
 
   resetForTests = (): void => {
     this.clearRecoveryTimeout();