@nextclaw/ui 0.12.5 → 0.12.6

package/src/components/chat/stores/chat-session-list.store.ts

@@ -1,5 +1,6 @@
-import { create } from 'zustand';
+import { create, type StateCreator } from 'zustand';
 import { createNcpSessionId } from '@/components/chat/ncp/ncp-session-adapter';
+import type { SessionRunStatus } from '@/lib/session-run-status';
 
 export type ChatSessionListMode = 'time-first' | 'project-first';
 
@@ -11,11 +12,47 @@ export type ChatSessionListSnapshot = {
   listMode: ChatSessionListMode;
 };
 
+export function hasUnreadSessionUpdate(
+  updatedAt: string | null | undefined,
+  readUpdatedAt: string | undefined,
+): boolean {
+  const normalizedUpdatedAt = updatedAt?.trim();
+  if (!normalizedUpdatedAt) {
+    return false;
+  }
+  const normalizedReadUpdatedAt = readUpdatedAt?.trim();
+  if (!normalizedReadUpdatedAt) {
+    return true;
+  }
+  return normalizedUpdatedAt.localeCompare(normalizedReadUpdatedAt) > 0;
+}
+
+export function shouldShowUnreadSessionIndicator(params: {
+  active: boolean;
+  updatedAt: string | null | undefined;
+  readUpdatedAt: string | undefined;
+  runStatus?: SessionRunStatus;
+}): boolean {
+  const { active, readUpdatedAt, runStatus, updatedAt } = params;
+  if (active || runStatus === 'running') {
+    return false;
+  }
+  return hasUnreadSessionUpdate(updatedAt, readUpdatedAt);
+}
+
 type ChatSessionListStore = {
   snapshot: ChatSessionListSnapshot;
+  readUpdatedAtBySessionKey: Record<string, string>;
+  hasHydratedReadWatermarks: boolean;
   setSnapshot: (patch: Partial<ChatSessionListSnapshot>) => void;
+  markSessionRead: (sessionKey: string, updatedAt: string | null | undefined) => void;
+  hydrateReadWatermarks: (
+    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+  ) => void;
 };
 
+type ChatSessionListStoreSet = Parameters<StateCreator<ChatSessionListStore>>[0];
+
 const initialSnapshot: ChatSessionListSnapshot = {
   selectedSessionKey: null,
   draftSessionKey: createNcpSessionId(),
@@ -24,13 +61,67 @@ const initialSnapshot: ChatSessionListSnapshot = {
   listMode: 'time-first'
 };
 
-export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({
-  snapshot: initialSnapshot,
-  setSnapshot: (patch) =>
+function createSetSnapshotAction(set: ChatSessionListStoreSet) {
+  return (patch: Partial<ChatSessionListSnapshot>) =>
     set((state) => ({
       snapshot: {
         ...state.snapshot,
         ...patch
       }
-    }))
+    }));
+}
+
+function createMarkSessionReadAction(set: ChatSessionListStoreSet) {
+  return (sessionKey: string, updatedAt: string | null | undefined) =>
+    set((state) => {
+      const normalizedSessionKey = sessionKey.trim();
+      const normalizedUpdatedAt = updatedAt?.trim();
+      if (!normalizedSessionKey || !normalizedUpdatedAt) {
+        return state;
+      }
+      if (state.readUpdatedAtBySessionKey[normalizedSessionKey] === normalizedUpdatedAt) {
+        return state;
+      }
+      return {
+        ...state,
+        readUpdatedAtBySessionKey: {
+          ...state.readUpdatedAtBySessionKey,
+          [normalizedSessionKey]: normalizedUpdatedAt
+        }
+      };
+    });
+}
+
+function createHydrateReadWatermarksAction(set: ChatSessionListStoreSet) {
+  return (
+    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+  ) =>
+    set((state) => {
+      if (state.hasHydratedReadWatermarks) {
+        return state;
+      }
+      const nextReadUpdatedAtBySessionKey = { ...state.readUpdatedAtBySessionKey };
+      for (const entry of entries) {
+        const normalizedSessionKey = entry.sessionKey.trim();
+        const normalizedUpdatedAt = entry.updatedAt?.trim();
+        if (!normalizedSessionKey || !normalizedUpdatedAt || nextReadUpdatedAtBySessionKey[normalizedSessionKey]) {
+          continue;
+        }
+        nextReadUpdatedAtBySessionKey[normalizedSessionKey] = normalizedUpdatedAt;
+      }
+      return {
+        ...state,
+        hasHydratedReadWatermarks: true,
+        readUpdatedAtBySessionKey: nextReadUpdatedAtBySessionKey
+      };
+    });
+}
+
+export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({
+  snapshot: initialSnapshot,
+  readUpdatedAtBySessionKey: {},
+  hasHydratedReadWatermarks: false,
+  setSnapshot: createSetSnapshotAction(set),
+  markSessionRead: createMarkSessionReadAction(set),
+  hydrateReadWatermarks: createHydrateReadWatermarksAction(set)
 }));

package/src/components/config/ProviderForm.tsx

@@ -143,6 +143,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     () => providerAuth?.methods ?? [],
     [providerAuth?.methods]
   );
+  const supportsWireApi = Boolean(providerSpec?.supportsWireApi) || isCustomProvider;
   const providerAuthMethodOptions = useMemo(
     () =>
       providerAuthMethods.map((method) => ({
@@ -174,25 +175,18 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     () => providerAuthMethods.find((method) => method.id === resolvedAuthMethodId),
     [providerAuthMethods, resolvedAuthMethodId]
   );
-  const selectedAuthMethodHint =
-    selectedAuthMethod?.hint?.[language] || selectedAuthMethod?.hint?.en || '';
   const shouldUseAuthMethodPills = shouldUsePillSelector({
     required: providerAuth?.kind === 'device_code',
     hasDefault: Boolean(providerAuth?.defaultMethodId?.trim()),
     optionCount: providerAuthMethods.length
   });
-  const providerAuthNote =
-    providerAuth?.note?.[language] ||
-    providerAuth?.note?.en ||
-    providerAuth?.displayName ||
-    '';
   const wireApiOptions = providerSpec?.wireApiOptions || ['auto', 'chat', 'responses'];
   const wireApiSelectOptions: PillSelectOption[] = wireApiOptions.map((option) => ({
     value: option,
     label: option === 'chat' ? t('wireApiChat') : option === 'responses' ? t('wireApiResponses') : t('wireApiAuto')
   }));
   const shouldUseWireApiPills = shouldUsePillSelector({
-    required: Boolean(providerSpec?.supportsWireApi),
+    required: supportsWireApi,
     hasDefault: typeof providerSpec?.defaultWireApi === 'string' && providerSpec.defaultWireApi.length > 0,
     optionCount: wireApiSelectOptions.length
   });
@@ -302,7 +296,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     const apiKeyChanged = apiKey.trim().length > 0;
     const apiBaseChanged = apiBase.trim() !== currentApiBase.trim();
     const headersChanged = !headersEqual(extraHeaders, currentHeaders);
-    const wireApiChanged = providerSpec?.supportsWireApi ? wireApi !== currentWireApi : false;
+    const wireApiChanged = supportsWireApi ? wireApi !== currentWireApi : false;
     const modelsChanged = !modelListsEqual(models, currentEditableModels);
     const modelThinkingChanged = !modelThinkingEqual(modelThinking, currentModelThinking);
     const displayNameChanged = isCustomProvider
@@ -331,7 +325,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     currentApiBase,
     extraHeaders,
     currentHeaders,
-    providerSpec?.supportsWireApi,
+    supportsWireApi,
     wireApi,
     currentWireApi,
     models,
@@ -422,7 +416,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       payload.extraHeaders = normalizedHeaders;
     }
 
-    if (providerSpec?.supportsWireApi && wireApi !== currentWireApi) {
+    if (supportsWireApi && wireApi !== currentWireApi) {
       payload.wireApi = wireApi;
     }
     if (!modelListsEqual(models, currentEditableModels)) {
@@ -450,7 +444,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     if (apiKey.trim().length > 0) {
       payload.apiKey = apiKey.trim();
     }
-    if (providerSpec?.supportsWireApi) {
+    if (supportsWireApi) {
       payload.wireApi = wireApi;
     }
 
@@ -608,10 +602,10 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
 
           <ProviderAuthSection
             providerAuth={providerAuth}
-            providerAuthNote={providerAuthNote}
+            providerAuthNote={providerAuth?.note?.[language] || providerAuth?.note?.en || providerAuth?.displayName || ''}
             providerAuthMethodOptions={providerAuthMethodOptions}
             providerAuthMethodsCount={providerAuthMethods.length}
-            selectedAuthMethodHint={selectedAuthMethodHint}
+            selectedAuthMethodHint={selectedAuthMethod?.hint?.[language] || selectedAuthMethod?.hint?.en || ''}
             shouldUseAuthMethodPills={shouldUseAuthMethodPills}
             resolvedAuthMethodId={resolvedAuthMethodId}
             onAuthMethodChange={setAuthMethodId}
@@ -663,7 +657,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
           <ProviderAdvancedSettingsSection
             showAdvanced={showAdvanced}
             onShowAdvancedChange={setShowAdvanced}
-            supportsWireApi={Boolean(providerSpec.supportsWireApi)}
+            supportsWireApi={supportsWireApi}
             wireApiLabel={wireApiHint?.label ?? t('wireApi')}
             wireApi={wireApi}
             onWireApiChange={setWireApi}

package/src/components/config/desktop-update-config.tsx

@@ -0,0 +1,230 @@
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { PageHeader, PageLayout } from '@/components/layout/page-layout';
+import { desktopUpdateManager } from '@/desktop/managers/desktop-update.manager';
+import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
+import { formatDateTime, t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { Download, ExternalLink, RefreshCw, RotateCw } from 'lucide-react';
+
+function formatVersion(value: string | null): string {
+  return value?.trim() || '-';
+}
+
+function formatLastCheckedAt(value: string | null): string {
+  return value ? formatDateTime(value) : '-';
+}
+
+function getStatusLabel(status: string): string {
+  if (status === 'checking') {
+    return t('desktopUpdatesStatusChecking');
+  }
+  if (status === 'update-available') {
+    return t('desktopUpdatesStatusAvailable');
+  }
+  if (status === 'downloading') {
+    return t('desktopUpdatesStatusDownloading');
+  }
+  if (status === 'downloaded') {
+    return t('desktopUpdatesStatusDownloaded');
+  }
+  if (status === 'up-to-date') {
+    return t('desktopUpdatesStatusUpToDate');
+  }
+  if (status === 'failed') {
+    return t('desktopUpdatesStatusFailed');
+  }
+  return t('desktopUpdatesStatusIdle');
+}
+
+function getStatusTone(status: string): string {
+  if (status === 'downloaded') {
+    return 'bg-emerald-50 text-emerald-700 ring-emerald-100';
+  }
+  if (status === 'update-available' || status === 'downloading' || status === 'checking') {
+    return 'bg-amber-50 text-amber-700 ring-amber-100';
+  }
+  if (status === 'failed') {
+    return 'bg-red-50 text-red-700 ring-red-100';
+  }
+  return 'bg-gray-100 text-gray-700 ring-gray-200';
+}
+
+export function DesktopUpdateConfig() {
+  const { supported, initialized, busyAction, snapshot } = useDesktopUpdateStore();
+
+  useEffect(() => {
+    void desktopUpdateManager.start();
+    return () => {
+      desktopUpdateManager.stop();
+    };
+  }, []);
+
+  if (!initialized) {
+    return <div className="p-8 text-gray-400">{t('loading')}</div>;
+  }
+
+  if (!supported || !snapshot) {
+    return (
+      <PageLayout className="space-y-6">
+        <PageHeader
+          title={t('desktopUpdatesPageTitle')}
+          description={t('desktopUpdatesPageDescription')}
+        />
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('desktopUpdatesDesktopOnlyTitle')}</CardTitle>
+            <CardDescription>{t('desktopUpdatesDesktopOnlyDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-gray-500">{t('desktopUpdatesDesktopOnlyFutureHint')}</p>
+          </CardContent>
+        </Card>
+      </PageLayout>
+    );
+  }
+
+  const isChecking = busyAction === 'checking';
+  const isDownloading = busyAction === 'downloading';
+  const isApplying = busyAction === 'applying';
+  const isSavingPreferences = busyAction === 'saving-preferences';
+  const canDownload = snapshot.status === 'update-available' && !isDownloading && !isApplying;
+  const canApply = snapshot.status === 'downloaded' && !isApplying;
+
+  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>
+        )}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesOverviewTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesOverviewDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="flex flex-wrap items-center gap-3">
+            <span className="text-sm font-medium text-gray-700">{t('desktopUpdatesStatusLabel')}</span>
+            <span className={cn('inline-flex rounded-full px-3 py-1 text-xs font-medium ring-1', getStatusTone(snapshot.status))}>
+              {getStatusLabel(snapshot.status)}
+            </span>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            <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">{t('desktopUpdatesLauncherVersion')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{formatVersion(snapshot.launcherVersion)}</p>
+            </div>
+            <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">{t('desktopUpdatesCurrentBundleVersion')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{formatVersion(snapshot.currentVersion)}</p>
+            </div>
+            <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">{t('desktopUpdatesAvailableVersion')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{formatVersion(snapshot.availableVersion)}</p>
+            </div>
+            <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">{t('desktopUpdatesLastCheckedAt')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{formatLastCheckedAt(snapshot.lastCheckedAt)}</p>
+            </div>
+          </div>
+
+          {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>
+            </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}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesPreferencesTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesPreferencesDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
+            <div className="space-y-1">
+              <Label>{t('desktopUpdatesAutomaticChecks')}</Label>
+              <p className="text-sm text-gray-500">{t('desktopUpdatesAutomaticChecksHelp')}</p>
+            </div>
+            <Switch
+              checked={snapshot.preferences.automaticChecks}
+              disabled={isSavingPreferences}
+              onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ automaticChecks: checked })}
+            />
+          </div>
+
+          <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
+            <div className="space-y-1">
+              <Label>{t('desktopUpdatesAutoDownload')}</Label>
+              <p className="text-sm text-gray-500">{t('desktopUpdatesAutoDownloadHelp')}</p>
+            </div>
+            <Switch
+              checked={snapshot.preferences.autoDownload}
+              disabled={isSavingPreferences}
+              onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ autoDownload: checked })}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesActionsTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesActionsDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-3">
+          <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>
+
+          <Button onClick={() => void desktopUpdateManager.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}>
+            <RotateCw className={cn('mr-2 h-4 w-4', isApplying && 'animate-spin')} />
+            {t('desktopUpdatesApplyNow')}
+          </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>
+      </Card>
+    </PageLayout>
+  );
+}

package/src/components/layout/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield, Wrench, Wifi, Bot } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield, Wrench, Wifi, Bot, Download } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { BrandHeader } from '@/components/common/BrandHeader';
@@ -105,6 +105,11 @@ export function Sidebar({ mode }: SidebarProps) {
       label: t('runtime'),
       icon: GitBranch,
     },
+    {
+      target: '/updates',
+      label: t('updates'),
+      icon: Download,
+    },
     {
       target: '/remote',
       label: t('remote'),

package/src/components/layout/sidebar.layout.test.tsx

@@ -109,6 +109,7 @@ describe('Sidebar', () => {
       'Plugins',
       'MCP',
       'Routing & Runtime',
+      'Updates',
       'Remote Access',
       'Security',
       'Sessions',

package/src/desktop/desktop-update.types.ts

@@ -0,0 +1,36 @@
+export type DesktopUpdateStatus =
+  | 'idle'
+  | 'checking'
+  | 'update-available'
+  | 'downloading'
+  | 'downloaded'
+  | 'up-to-date'
+  | 'failed';
+
+export type DesktopUpdatePreferences = {
+  automaticChecks: boolean;
+  autoDownload: boolean;
+};
+
+export type DesktopUpdateSnapshot = {
+  status: DesktopUpdateStatus;
+  launcherVersion: string;
+  currentVersion: string | null;
+  availableVersion: string | null;
+  downloadedVersion: string | null;
+  releaseNotesUrl: string | null;
+  lastCheckedAt: string | null;
+  errorMessage: string | null;
+  preferences: DesktopUpdatePreferences;
+};
+
+export type NextClawDesktopBridge = {
+  platform: string;
+  version: string;
+  getUpdateState: () => Promise<DesktopUpdateSnapshot>;
+  checkForUpdates: () => Promise<DesktopUpdateSnapshot>;
+  downloadUpdate: () => Promise<DesktopUpdateSnapshot>;
+  applyDownloadedUpdate: () => Promise<DesktopUpdateSnapshot>;
+  updatePreferences: (preferences: Partial<DesktopUpdatePreferences>) => Promise<DesktopUpdateSnapshot>;
+  onUpdateStateChanged: (listener: (snapshot: DesktopUpdateSnapshot) => void) => () => void;
+};

package/src/desktop/managers/desktop-update.manager.ts

@@ -0,0 +1,163 @@
+import type {
+  DesktopUpdatePreferences,
+  DesktopUpdateSnapshot,
+  NextClawDesktopBridge
+} from '@/desktop/desktop-update.types';
+import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
+import { t } from '@/lib/i18n';
+import { toast } from 'sonner';
+
+type DesktopUpdateBusyAction = 'checking' | 'downloading' | 'applying' | 'saving-preferences';
+
+export class DesktopUpdateManager {
+  private unsubscribe: (() => void) | null = null;
+
+  start = async () => {
+    const desktopApi = this.getDesktopApi();
+    if (!desktopApi) {
+      useDesktopUpdateStore.setState({
+        supported: false,
+        initialized: true,
+        snapshot: null
+      });
+      return;
+    }
+
+    if (!this.unsubscribe) {
+      this.unsubscribe = desktopApi.onUpdateStateChanged((snapshot) => {
+        useDesktopUpdateStore.setState({
+          supported: true,
+          initialized: true,
+          snapshot
+        });
+      });
+    }
+
+    useDesktopUpdateStore.setState({
+      supported: true,
+      initialized: false
+    });
+
+    try {
+      const snapshot = await desktopApi.getUpdateState();
+      useDesktopUpdateStore.setState({
+        supported: true,
+        initialized: true,
+        snapshot
+      });
+    } catch (error) {
+      useDesktopUpdateStore.setState({
+        supported: true,
+        initialized: true
+      });
+      toast.error(`${t('desktopUpdatesLoadFailed')}: ${this.getErrorMessage(error)}`);
+    }
+  };
+
+  stop = () => {
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+  };
+
+  checkForUpdates = async () => {
+    let snapshot: DesktopUpdateSnapshot;
+    try {
+      snapshot = await this.runSnapshotCommand('checking', t('desktopUpdatesCheckFailed'), async (desktopApi) => {
+        return await desktopApi.checkForUpdates();
+      });
+    } catch {
+      return;
+    }
+
+    if (snapshot.status === 'up-to-date') {
+      toast.success(t('desktopUpdatesAlreadyLatest'));
+      return;
+    }
+    if (snapshot.status === 'update-available') {
+      toast.success(
+        t('desktopUpdatesAvailable').replace('{version}', snapshot.availableVersion ?? t('desktopUpdatesUnknownVersion'))
+      );
+      return;
+    }
+    if (snapshot.status === 'downloaded') {
+      toast.success(t('desktopUpdatesReadyToApply'));
+      return;
+    }
+    if (snapshot.status === 'failed' && snapshot.errorMessage) {
+      toast.error(snapshot.errorMessage);
+    }
+  };
+
+  downloadUpdate = async () => {
+    let snapshot: DesktopUpdateSnapshot;
+    try {
+      snapshot = await this.runSnapshotCommand('downloading', t('desktopUpdatesDownloadFailed'), async (desktopApi) => {
+        return await desktopApi.downloadUpdate();
+      });
+    } catch {
+      return;
+    }
+
+    if (snapshot.status === 'downloaded') {
+      toast.success(t('desktopUpdatesReadyToApply'));
+    }
+  };
+
+  applyDownloadedUpdate = async () => {
+    try {
+      await this.runSnapshotCommand('applying', t('desktopUpdatesApplyFailed'), async (desktopApi) => {
+        return await desktopApi.applyDownloadedUpdate();
+      });
+    } catch {
+      return;
+    }
+  };
+
+  updatePreferences = async (preferences: Partial<DesktopUpdatePreferences>) => {
+    try {
+      await this.runSnapshotCommand(
+        'saving-preferences',
+        t('desktopUpdatesPreferencesFailed'),
+        async (desktopApi) => await desktopApi.updatePreferences(preferences)
+      );
+    } catch {
+      return;
+    }
+  };
+
+  private runSnapshotCommand = async (
+    busyAction: DesktopUpdateBusyAction,
+    fallbackMessage: string,
+    job: (desktopApi: NextClawDesktopBridge) => Promise<DesktopUpdateSnapshot>
+  ): Promise<DesktopUpdateSnapshot> => {
+    const desktopApi = this.getDesktopApi();
+    if (!desktopApi) {
+      throw new Error(t('desktopUpdatesDesktopOnlyDescription'));
+    }
+
+    useDesktopUpdateStore.setState({ busyAction });
+    try {
+      const snapshot = await job(desktopApi);
+      useDesktopUpdateStore.setState({ snapshot });
+      return snapshot;
+    } catch (error) {
+      toast.error(`${fallbackMessage}: ${this.getErrorMessage(error)}`);
+      throw error;
+    } finally {
+      useDesktopUpdateStore.setState({ busyAction: null });
+    }
+  };
+
+  private getDesktopApi = (): NextClawDesktopBridge | null => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    return window.nextclawDesktop ?? null;
+  };
+
+  private getErrorMessage = (error: unknown): string => {
+    return error instanceof Error ? error.message : t('error');
+  };
+}
+
+export const desktopUpdateManager = new DesktopUpdateManager();