@nextclaw/ui 0.12.7 → 0.12.8

package/src/components/chat/ncp/tests/ncp-chat-input.manager.test.ts

@@ -0,0 +1,99 @@
+import { createChatComposerTextNode } from '@nextclaw/agent-chat-ui';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { NcpChatInputManager } from '@/components/chat/ncp/ncp-chat-input.manager';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
+
+describe('NcpChatInputManager', () => {
+  beforeEach(() => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        draft: 'hello from current thread',
+        composerNodes: [createChatComposerTextNode('hello from current thread')],
+        attachments: [],
+        selectedSkills: [],
+        selectedSessionType: 'native',
+        selectedModel: '',
+        selectedThinkingLevel: null,
+      },
+    });
+    useChatSessionListStore.setState({
+      optimisticReadAtBySessionKey: {},
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'stale-selected-session',
+        draftSessionKey: 'draft-root-session',
+        selectedAgentId: 'main',
+      },
+    });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: 'current-route-session',
+      },
+    });
+  });
+
+  it('sends through the current thread session when selected session state is stale', async () => {
+    const streamActionsManager = {
+      sendMessage: vi.fn().mockResolvedValue(undefined),
+      stopCurrentRun: vi.fn().mockResolvedValue(undefined),
+    } as unknown as ConstructorParameters<typeof NcpChatInputManager>[1];
+    const sessionListManager = {
+      ensureDraftSession: vi.fn(() => 'draft-session'),
+      promoteRootDraftSessionRoute: vi.fn(),
+    } as unknown as ConstructorParameters<typeof NcpChatInputManager>[2];
+    const manager = new NcpChatInputManager(
+      {} as ConstructorParameters<typeof NcpChatInputManager>[0],
+      streamActionsManager,
+      sessionListManager,
+    );
+
+    await manager.send();
+
+    expect(streamActionsManager.sendMessage).toHaveBeenCalledTimes(1);
+    expect(streamActionsManager.sendMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sessionKey: 'current-route-session',
+        message: 'hello from current thread',
+      }),
+    );
+    expect(sessionListManager.ensureDraftSession).not.toHaveBeenCalled();
+    expect(sessionListManager.promoteRootDraftSessionRoute).toHaveBeenCalledWith('current-route-session');
+  });
+
+  it('keeps sending through the current root draft session while /chat is still in blank-draft mode', async () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: 'draft-root-session',
+      },
+    });
+    const streamActionsManager = {
+      sendMessage: vi.fn().mockResolvedValue(undefined),
+      stopCurrentRun: vi.fn().mockResolvedValue(undefined),
+    } as unknown as ConstructorParameters<typeof NcpChatInputManager>[1];
+    const sessionListManager = {
+      ensureDraftSession: vi.fn(() => 'materialized-draft-session'),
+      promoteRootDraftSessionRoute: vi.fn(),
+    } as unknown as ConstructorParameters<typeof NcpChatInputManager>[2];
+    const manager = new NcpChatInputManager(
+      {} as ConstructorParameters<typeof NcpChatInputManager>[0],
+      streamActionsManager,
+      sessionListManager,
+    );
+
+    await manager.send();
+
+    expect(sessionListManager.ensureDraftSession).not.toHaveBeenCalled();
+    expect(streamActionsManager.sendMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sessionKey: 'draft-root-session',
+        message: 'hello from current thread',
+      }),
+    );
+    expect(sessionListManager.promoteRootDraftSessionRoute).toHaveBeenCalledWith('draft-root-session');
+  });
+});

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

@@ -13,42 +13,39 @@ export type ChatSessionListSnapshot = {
 };
 
 export function hasUnreadSessionUpdate(
-  updatedAt: string | null | undefined,
-  readUpdatedAt: string | undefined,
+  lastMessageAt: string | null | undefined,
+  readAt: string | undefined,
 ): boolean {
-  const normalizedUpdatedAt = updatedAt?.trim();
-  if (!normalizedUpdatedAt) {
+  const normalizedLastMessageAt = lastMessageAt?.trim();
+  if (!normalizedLastMessageAt) {
     return false;
   }
-  const normalizedReadUpdatedAt = readUpdatedAt?.trim();
-  if (!normalizedReadUpdatedAt) {
-    return true;
+  const normalizedReadAt = readAt?.trim();
+  if (!normalizedReadAt) {
+    // Until this client establishes a read watermark, avoid guessing unread state.
+    return false;
   }
-  return normalizedUpdatedAt.localeCompare(normalizedReadUpdatedAt) > 0;
+  return normalizedLastMessageAt.localeCompare(normalizedReadAt) > 0;
 }
 
 export function shouldShowUnreadSessionIndicator(params: {
   active: boolean;
-  updatedAt: string | null | undefined;
-  readUpdatedAt: string | undefined;
+  lastMessageAt: string | null | undefined;
+  readAt: string | undefined;
   runStatus?: SessionRunStatus;
 }): boolean {
-  const { active, readUpdatedAt, runStatus, updatedAt } = params;
+  const { active, readAt, runStatus, lastMessageAt } = params;
   if (active || runStatus === 'running') {
     return false;
   }
-  return hasUnreadSessionUpdate(updatedAt, readUpdatedAt);
+  return hasUnreadSessionUpdate(lastMessageAt, readAt);
 }
 
 type ChatSessionListStore = {
   snapshot: ChatSessionListSnapshot;
-  readUpdatedAtBySessionKey: Record<string, string>;
-  hasHydratedReadWatermarks: boolean;
+  optimisticReadAtBySessionKey: Record<string, string>;
   setSnapshot: (patch: Partial<ChatSessionListSnapshot>) => void;
-  markSessionRead: (sessionKey: string, updatedAt: string | null | undefined) => void;
-  hydrateReadWatermarks: (
-    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
-  ) => void;
+  markSessionRead: (sessionKey: string, readAt: string | null | undefined) => void;
 };
 
 type ChatSessionListStoreSet = Parameters<StateCreator<ChatSessionListStore>>[0];
@@ -72,56 +69,30 @@ function createSetSnapshotAction(set: ChatSessionListStoreSet) {
 }
 
 function createMarkSessionReadAction(set: ChatSessionListStoreSet) {
-  return (sessionKey: string, updatedAt: string | null | undefined) =>
+  return (sessionKey: string, readAt: string | null | undefined) =>
     set((state) => {
       const normalizedSessionKey = sessionKey.trim();
-      const normalizedUpdatedAt = updatedAt?.trim();
-      if (!normalizedSessionKey || !normalizedUpdatedAt) {
+      const normalizedReadAt = readAt?.trim();
+      if (!normalizedSessionKey || !normalizedReadAt) {
         return state;
       }
-      if (state.readUpdatedAtBySessionKey[normalizedSessionKey] === normalizedUpdatedAt) {
+      const previousReadAt = state.optimisticReadAtBySessionKey[normalizedSessionKey];
+      if (previousReadAt && previousReadAt.localeCompare(normalizedReadAt) >= 0) {
         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;
+        optimisticReadAtBySessionKey: {
+          ...state.optimisticReadAtBySessionKey,
+          [normalizedSessionKey]: normalizedReadAt
         }
-        nextReadUpdatedAtBySessionKey[normalizedSessionKey] = normalizedUpdatedAt;
-      }
-      return {
-        ...state,
-        hasHydratedReadWatermarks: true,
-        readUpdatedAtBySessionKey: nextReadUpdatedAtBySessionKey
       };
     });
 }
 
 export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({
   snapshot: initialSnapshot,
-  readUpdatedAtBySessionKey: {},
-  hasHydratedReadWatermarks: false,
+  optimisticReadAtBySessionKey: {},
   setSnapshot: createSetSnapshotAction(set),
-  markSessionRead: createMarkSessionReadAction(set),
-  hydrateReadWatermarks: createHydrateReadWatermarksAction(set)
+  markSessionRead: createMarkSessionReadAction(set)
 }));

package/src/components/common/ProviderScopedModelInput.tsx

@@ -64,6 +64,11 @@ export function ProviderScopedModelInput({
       setModelId(currentModel);
       return;
     }
+    if (!currentModel) {
+      setModelId('');
+      setProviderName((currentProvider) => (providerMap.has(currentProvider) ? currentProvider : ''));
+      return;
+    }
     const matchedProvider = findProviderByModel(currentModel, providerCatalog);
     const effectiveProvider = matchedProvider ?? '';
     const aliases = providerMap.get(effectiveProvider)?.aliases ?? [];
@@ -72,9 +77,14 @@ export function ProviderScopedModelInput({
   }, [hasProviders, providerCatalog, providerMap, value]);
 
   const handleProviderChange = (nextProvider: string) => {
+    const nextProviderModel = normalizeModelOptions(providerMap.get(nextProvider)?.models ?? [])[0] ?? '';
     setProviderName(nextProvider);
-    setModelId('');
-    onChange('');
+    setModelId(nextProviderModel);
+    if (!nextProviderModel) {
+      onChange('');
+      return;
+    }
+    onChange(composeProviderModel(providerMap.get(nextProvider)?.prefix ?? nextProvider, nextProviderModel));
   };
 
   const handleModelChange = (nextModelId: string) => {

package/src/components/config/ModelConfig.test.tsx

@@ -1,5 +1,7 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { ProviderScopedModelInput } from '@/components/common/ProviderScopedModelInput';
 import { ModelConfig } from '@/components/config/ModelConfig';
 import { setLanguage } from '@/lib/i18n';
 
@@ -19,7 +21,7 @@ const mocks = vi.hoisted(() => ({
           apiKeySet: true,
           models: ['gpt-5.2']
         }
-      }
+      } as Record<string, { enabled: boolean; apiKeySet: boolean; models: string[] }>
     },
     isLoading: false
   },
@@ -58,6 +60,9 @@ describe('ModelConfig', () => {
   beforeEach(() => {
     mocks.mutate.mockReset();
     setLanguage('en');
+    HTMLElement.prototype.hasPointerCapture = vi.fn(() => false);
+    HTMLElement.prototype.setPointerCapture = vi.fn();
+    HTMLElement.prototype.releasePointerCapture = vi.fn();
     mocks.configQuery.data = {
       agents: {
         defaults: {
@@ -82,9 +87,42 @@ describe('ModelConfig', () => {
           defaultModels: ['openai/gpt-5.2'],
           keywords: [],
           envKey: 'OPENAI_API_KEY'
+        },
+        {
+          name: 'deepseek',
+          displayName: 'DeepSeek',
+          modelPrefix: 'deepseek',
+          defaultModels: ['deepseek/deepseek-chat', 'deepseek/deepseek-reasoner'],
+          keywords: [],
+          envKey: 'DEEPSEEK_API_KEY'
+        },
+        {
+          name: 'customhub',
+          displayName: 'CustomHub',
+          modelPrefix: 'customhub',
+          defaultModels: [],
+          keywords: [],
+          envKey: 'CUSTOMHUB_API_KEY'
         }
       ]
     };
+    mocks.configQuery.data.providers = {
+      openai: {
+        enabled: true,
+        apiKeySet: true,
+        models: ['gpt-5.2']
+      },
+      deepseek: {
+        enabled: true,
+        apiKeySet: true,
+        models: ['deepseek-chat', 'deepseek-reasoner']
+      },
+      customhub: {
+        enabled: true,
+        apiKeySet: true,
+        models: []
+      }
+    };
   });
 
   it('submits the workspace together with the selected model', async () => {
@@ -136,4 +174,72 @@ describe('ModelConfig', () => {
       });
     });
   });
+
+  it('switches to the new provider without clearing the selection and auto-fills its first model', async () => {
+    const user = userEvent.setup();
+
+    render(<ModelConfig />);
+
+    const providerTrigger = screen.getByRole('combobox');
+    fireEvent.keyDown(providerTrigger, { key: 'ArrowDown' });
+    await user.click(screen.getByRole('option', { name: 'DeepSeek' }));
+    await user.click(screen.getByRole('button', { name: /save/i }));
+
+    await waitFor(() => {
+      expect(mocks.mutate).toHaveBeenCalledWith({
+        model: 'deepseek/deepseek-chat',
+        workspace: '~/old-workspace'
+      });
+    });
+
+    expect(providerTrigger.textContent).toContain('DeepSeek');
+    expect(screen.getByDisplayValue('deepseek-chat')).toBeTruthy();
+  });
+
+  it('keeps the provider selected when the shared input switches to a provider without preset models', async () => {
+    const user = userEvent.setup();
+
+    function Harness() {
+      const [value, setValue] = useState('openai/gpt-5.2');
+
+      return (
+        <ProviderScopedModelInput
+          value={value}
+          onChange={setValue}
+          providerCatalog={[
+            {
+              name: 'openai',
+              displayName: 'OpenAI',
+              prefix: 'openai',
+              aliases: ['openai'],
+              models: ['gpt-5.2'],
+              modelThinking: {},
+              configured: true
+            },
+            {
+              name: 'customhub',
+              displayName: 'CustomHub',
+              prefix: 'customhub',
+              aliases: ['customhub'],
+              models: [],
+              modelThinking: {},
+              configured: true
+            }
+          ]}
+        />
+      );
+    }
+
+    render(<Harness />);
+
+    const providerTrigger = screen.getByRole('combobox');
+    fireEvent.keyDown(providerTrigger, { key: 'ArrowDown' });
+    await user.click(screen.getByRole('option', { name: 'CustomHub' }));
+
+    const modelInput = screen.getByPlaceholderText('provider/model');
+    await user.type(modelInput, 'reasoner-v1');
+
+    expect(providerTrigger.textContent).toContain('CustomHub');
+    expect(screen.getByDisplayValue('reasoner-v1')).toBeTruthy();
+  });
 });

package/src/components/config/RuntimeConfig.tsx

@@ -3,6 +3,8 @@ import { useConfig, useConfigSchema, useUpdateRuntime } from '@/hooks/useConfig'
 import type { AgentBindingView, AgentProfileView } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { RuntimeControlCard } from '@/components/config/runtime-control-card';
+import { RuntimePresenceCard } from '@/components/config/runtime-presence-card';
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -30,6 +32,16 @@ const DM_SCOPE_OPTIONS: Array<{ value: DmScope; label: string }> = [
   { value: 'per-account-channel-peer', label: 'per-account-channel-peer' }
 ];
 
+function RuntimeConfigOverview() {
+  return (
+    <>
+      <PageHeader title={t('runtimePageTitle')} description={t('runtimePageDescription')} />
+      <RuntimeControlCard />
+      <RuntimePresenceCard />
+    </>
+  );
+}
+
 export function RuntimeConfig() {
   const { data: config, isLoading } = useConfig();
   const { data: schema } = useConfigSchema();
@@ -79,7 +91,6 @@ export function RuntimeConfig() {
   const updateBinding = (index: number, next: AgentBindingView) => {
     setBindings((prev) => prev.map((binding, cursor) => (cursor === index ? next : binding)));
   };
-
   const handleSave = () => {
     try {
       const normalizedAgents = agents.map((agent, index) => {
@@ -160,14 +171,11 @@ export function RuntimeConfig() {
     }
   };
 
-  if (isLoading || !config) {
-    return <div className="p-8 text-gray-400">{t('runtimeLoading')}</div>;
-  }
+  if (isLoading || !config) return <div className="p-8 text-gray-400">{t('runtimeLoading')}</div>;
 
   return (
     <PageLayout className="space-y-6">
-      <PageHeader title={t('runtimePageTitle')} description={t('runtimePageDescription')} />
-
+      <RuntimeConfigOverview />
       <Card>
         <CardHeader>
           <CardTitle>{dmScopeHint?.label ?? t('dmScope')}</CardTitle>

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

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { DesktopUpdateConfig } from '@/components/config/desktop-update-config';
+import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
+import { setLanguage } from '@/lib/i18n';
+
+const mocks = vi.hoisted(() => ({
+  start: vi.fn(),
+  stop: vi.fn(),
+  checkForUpdates: vi.fn(),
+  downloadUpdate: vi.fn(),
+  applyDownloadedUpdate: vi.fn(),
+  updatePreferences: vi.fn(),
+  updateChannel: vi.fn()
+}));
+
+vi.mock('@/desktop/managers/desktop-update.manager', () => ({
+  desktopUpdateManager: mocks
+}));
+
+describe('DesktopUpdateConfig', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    mocks.start.mockReset();
+    mocks.stop.mockReset();
+    mocks.checkForUpdates.mockReset();
+    mocks.downloadUpdate.mockReset();
+    mocks.applyDownloadedUpdate.mockReset();
+    mocks.updatePreferences.mockReset();
+    mocks.updateChannel.mockReset();
+
+    if (!HTMLElement.prototype.hasPointerCapture) {
+      HTMLElement.prototype.hasPointerCapture = () => false;
+    }
+    if (!HTMLElement.prototype.setPointerCapture) {
+      HTMLElement.prototype.setPointerCapture = () => {};
+    }
+    if (!HTMLElement.prototype.releasePointerCapture) {
+      HTMLElement.prototype.releasePointerCapture = () => {};
+    }
+
+    useDesktopUpdateStore.setState({
+      supported: true,
+      initialized: true,
+      busyAction: null,
+      snapshot: {
+        status: 'idle',
+        channel: 'beta',
+        launcherVersion: '0.0.138',
+        currentVersion: '0.18.0',
+        availableVersion: '0.18.2-beta.1',
+        downloadedVersion: null,
+        releaseNotesUrl: 'https://example.com/release-notes',
+        lastCheckedAt: '2026-04-13T12:00:00.000Z',
+        errorMessage: null,
+        preferences: {
+          automaticChecks: true,
+          autoDownload: false
+        }
+      }
+    });
+  });
+
+  it('renders current channel information and beta guidance', () => {
+    render(<DesktopUpdateConfig />);
+
+    expect(mocks.start).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('当前更新通道')).toBeTruthy();
+    expect(screen.getAllByText('Beta').length).toBeGreaterThan(0);
+    expect(screen.getByText('当前正在跟随 Beta 通道')).toBeTruthy();
+    expect(screen.getByText('切回 Stable 后不会立刻强制降级；只有当 Stable 追平或超过当前版本时，才会继续提供 Stable 更新。')).toBeTruthy();
+  });
+
+  it('sends the newly selected release channel to the desktop update manager', async () => {
+    const user = userEvent.setup();
+
+    render(<DesktopUpdateConfig />);
+
+    await user.click(screen.getByRole('combobox'));
+    await user.click(screen.getByRole('option', { name: 'Stable' }));
+
+    expect(mocks.updateChannel).toHaveBeenCalledWith('stable');
+  });
+});

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

@@ -2,9 +2,11 @@ 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { PageHeader, PageLayout } from '@/components/layout/page-layout';
 import { desktopUpdateManager } from '@/desktop/managers/desktop-update.manager';
+import type { DesktopReleaseChannel } from '@/desktop/desktop-update.types';
 import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
 import { formatDateTime, t } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
@@ -18,6 +20,10 @@ function formatLastCheckedAt(value: string | null): string {
   return value ? formatDateTime(value) : '-';
 }
 
+function getChannelLabel(channel: DesktopReleaseChannel): string {
+  return channel === 'beta' ? t('desktopUpdatesChannelBeta') : t('desktopUpdatesChannelStable');
+}
+
 function getStatusLabel(status: string): string {
   if (status === 'checking') {
     return t('desktopUpdatesStatusChecking');
@@ -91,6 +97,7 @@ export function DesktopUpdateConfig() {
   const isDownloading = busyAction === 'downloading';
   const isApplying = busyAction === 'applying';
   const isSavingPreferences = busyAction === 'saving-preferences';
+  const isSwitchingChannel = busyAction === 'switching-channel';
   const canDownload = snapshot.status === 'update-available' && !isDownloading && !isApplying;
   const canApply = snapshot.status === 'downloaded' && !isApplying;
 
@@ -124,7 +131,7 @@ export function DesktopUpdateConfig() {
             </span>
           </div>
 
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
             <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>
@@ -141,8 +148,19 @@ export function DesktopUpdateConfig() {
               <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 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('desktopUpdatesCurrentChannel')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{getChannelLabel(snapshot.channel)}</p>
+            </div>
           </div>
 
+          {snapshot.channel === 'beta' ? (
+            <div className="rounded-2xl border border-amber-200 bg-amber-50/70 p-4">
+              <p className="text-sm font-semibold text-amber-800">{t('desktopUpdatesBetaBadgeTitle')}</p>
+              <p className="mt-1 text-sm text-amber-700">{t('desktopUpdatesBetaBadgeDescription')}</p>
+            </div>
+          ) : null}
+
           {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>
@@ -166,6 +184,29 @@ export function DesktopUpdateConfig() {
           <CardDescription>{t('desktopUpdatesPreferencesDescription')}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-5">
+          <div className="rounded-xl border border-gray-200 p-4">
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <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)}
+              >
+                <SelectTrigger className="w-full max-w-sm">
+                  <SelectValue placeholder={t('desktopUpdatesReleaseChannel')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="stable">{t('desktopUpdatesChannelStable')}</SelectItem>
+                  <SelectItem value="beta">{t('desktopUpdatesChannelBeta')}</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-sm text-gray-500">{t('desktopUpdatesReleaseChannelDowngradeHint')}</p>
+            </div>
+          </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('desktopUpdatesAutomaticChecks')}</Label>
@@ -173,7 +214,7 @@ export function DesktopUpdateConfig() {
             </div>
             <Switch
               checked={snapshot.preferences.automaticChecks}
-              disabled={isSavingPreferences}
+              disabled={isSavingPreferences || isSwitchingChannel}
               onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ automaticChecks: checked })}
             />
           </div>
@@ -185,7 +226,7 @@ export function DesktopUpdateConfig() {
             </div>
             <Switch
               checked={snapshot.preferences.autoDownload}
-              disabled={isSavingPreferences}
+              disabled={isSavingPreferences || isSwitchingChannel}
               onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ autoDownload: checked })}
             />
           </div>