@nextclaw/ui 0.15.0 → 0.15.2

package/src/features/settings/components/config/provider-models-section.tsx

@@ -99,7 +99,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
       ) : null}
 
       {models.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-border bg-muted/60 px-4 py-6 text-center">
+        <div className="rounded-xl border border-dashed border-border/65 bg-muted/30 px-4 py-6 text-center">
           <p className="text-sm text-muted-foreground">{t('providerModelsEmptyShort')}</p>
           {!showModelInput ? (
             <button
@@ -123,14 +123,14 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
             return (
               <div
                 key={modelName}
-                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-card px-3 py-1.5"
+                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5"
               >
                 <span className="max-w-[140px] truncate text-sm text-foreground sm:max-w-[220px]">{modelName}</span>
                 <Popover>
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-accent hover:text-accent-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                       aria-label={t('providerModelThinkingTitle')}
                       title={t('providerModelThinkingTitle')}
                     >
@@ -138,7 +138,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                     </button>
                   </PopoverTrigger>
                   <PopoverContent className="w-80 space-y-3">
-                    <div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/60 px-3 py-2">
+                    <div className="flex items-center justify-between gap-3 rounded-lg bg-muted/50 px-3 py-2">
                       <div className="min-w-0">
                         <p className="text-xs font-semibold text-foreground">{t('providerModelVisionTitle')}</p>
                         <p className="text-xs text-muted-foreground">{t('providerModelVisionHint')}</p>
@@ -159,8 +159,8 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                             onClick={() => onToggleModelThinkingLevel(modelName, level)}
                             className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
                               selected
-                                ? 'border-primary bg-primary text-white'
-                                : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:bg-accent/70 hover:text-accent-foreground'
+                                ? 'border-foreground/15 bg-foreground text-background'
+                                : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'
                             }`}
                           >
                             {formatThinkingLevelLabel(level)}
@@ -198,7 +198,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                 <button
                   type="button"
                   onClick={() => onRemoveModel(modelName)}
-                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-accent hover:text-accent-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                   aria-label={t('remove')}
                 >
                   <X className="h-3 w-3" />

package/src/features/settings/components/config/provider-pill-selector.tsx

@@ -16,7 +16,7 @@ export function ProviderPillSelector(props: ProviderPillSelectorProps) {
             type="button"
             onClick={() => onChange(option.value)}
             aria-pressed={selected}
-            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-primary bg-primary text-primary-foreground shadow-sm' : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:bg-accent/70 hover:text-accent-foreground'}`}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-foreground/15 bg-foreground text-background' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'}`}
           >
             {option.label}
           </button>

package/src/features/settings/components/config/secrets-config-form.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { Plus, Save, Trash2 } from 'lucide-react';
 import { Button } from '@/shared/components/ui/button';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
@@ -272,12 +273,12 @@ export function SecretsConfigForm(props: {
         onRemove={(index) => setState((prev) => ({ ...prev, refs: prev.refs.filter((_, cursor) => cursor !== index) }))}
         onAdd={() => setState((prev) => ({ ...prev, refs: [...prev.refs, createRefRow()] }))}
       />
-      <div className="flex justify-end">
-        <Button type="button" onClick={handleSave} disabled={isPending}>
-          <Save className="mr-2 h-4 w-4" />
+      <FormActions>
+        <Button type="button" size="sm" onClick={handleSave} disabled={isPending}>
+          <Save className="mr-1.5 h-3.5 w-3.5" />
           {isPending ? t('saving') : t('save')}
         </Button>
-      </div>
+      </FormActions>
     </PageLayout>
   );
 }

package/src/features/settings/pages/model-config-page.tsx

@@ -3,13 +3,14 @@ import { Card } from '@/shared/components/ui/card';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
 import { Skeleton } from '@/shared/components/ui/skeleton';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { ProviderScopedModelInput } from '@/shared/components/common/provider-scoped-model-input';
 import { useConfig, useConfigSchema, useProviderTemplates, useProviders, useUpdateModel } from '@/shared/hooks/use-config';
 import { hintForPath } from '@/shared/lib/config-hints';
 import { t } from '@/shared/lib/i18n';
 import { buildProviderModelCatalog } from '@/shared/lib/provider-models';
 import { PageLayout, PageHeader } from '@/app/components/layout/page-layout';
-import { DOCS_DEFAULT_BASE_URL } from '@/shared/components/doc-browser/doc-browser-context';
+import { getDocsUrl } from '@/shared/components/doc-browser/doc-browser-context';
 import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
@@ -37,48 +38,48 @@ function ModelConfigForm(props: {
         event.preventDefault();
         onSubmit({ model, workspace });
       }}
-      className="space-y-8"
+      className="space-y-5"
     >
-      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-        <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-card">
-          <div className="mb-8 flex items-center gap-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
-              <Sparkles className="h-5 w-5" />
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+        <div className="rounded-2xl border border-border/75 bg-card p-6">
+          <div className="mb-6 flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <Sparkles className="h-4 w-4" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900">{t('defaultModel')}</h3>
+            <h3 className="text-base font-semibold text-foreground">{t('defaultModel')}</h3>
           </div>
           <div className="space-y-2">
-            <Label htmlFor="model" className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            <Label htmlFor="model" className="text-xs font-medium text-muted-foreground">
               {modelLabel}
             </Label>
             <ProviderScopedModelInput id="model" value={model} onChange={setModel} providerCatalog={providerCatalog} modelPlaceholder={modelPlaceholder} />
-            <p className="text-xs text-gray-400">{modelHelpText}</p>
-            <a href={`${DOCS_DEFAULT_BASE_URL}/guide/model-selection`} className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
+            <p className="text-xs text-muted-foreground/80">{modelHelpText}</p>
+            <a href={getDocsUrl('/guide/model-selection')} className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
               <BookOpen className="h-3.5 w-3.5" />
               {t('channelsGuideTitle')}
             </a>
           </div>
         </div>
-        <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-card">
-          <div className="mb-8 flex items-center gap-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
-              <Folder className="h-5 w-5" />
+        <div className="rounded-2xl border border-border/75 bg-card p-6">
+          <div className="mb-6 flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <Folder className="h-4 w-4" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900">{t('workspace')}</h3>
+            <h3 className="text-base font-semibold text-foreground">{t('workspace')}</h3>
           </div>
           <div className="space-y-2">
-            <Label htmlFor="workspace" className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            <Label htmlFor="workspace" className="text-xs font-medium text-muted-foreground">
               {workspaceLabel}
             </Label>
             <Input id="workspace" value={workspace} onChange={(event) => setWorkspace(event.target.value)} placeholder={workspacePlaceholder} className="rounded-xl" />
           </div>
         </div>
       </div>
-      <div className="flex justify-end pt-4">
-        <Button type="submit" disabled={isPending} size="lg">
-          {isPending ? <Loader2 className="h-5 w-5 animate-spin" /> : t('saveChanges')}
+      <FormActions>
+        <Button type="submit" disabled={isPending} size="sm">
+          {isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : t('saveChanges')}
         </Button>
-      </div>
+      </FormActions>
     </form>
   );
 }
@@ -108,9 +109,9 @@ export function ModelConfigPage() {
           <Skeleton className="h-8 w-32" />
           <Skeleton className="h-4 w-48" />
         </div>
-        <Card className="rounded-2xl border-gray-200 p-6">
-          <div className="mb-6 flex items-center gap-4">
-            <Skeleton className="h-12 w-12 rounded-xl" />
+        <Card hover={false} className="rounded-2xl border-border/75 p-6 shadow-none">
+          <div className="mb-6 flex items-center gap-3">
+            <Skeleton className="h-9 w-9 rounded-lg" />
             <div className="space-y-2">
               <Skeleton className="h-5 w-24" />
               <Skeleton className="h-3 w-32" />
@@ -119,7 +120,7 @@ export function ModelConfigPage() {
           <Skeleton className="mb-2 h-4 w-20" />
           <Skeleton className="h-10 w-full rounded-xl" />
         </Card>
-        <Card className="rounded-2xl border-gray-200 p-6">
+        <Card hover={false} className="rounded-2xl border-border/75 p-6 shadow-none">
           <Skeleton className="mb-2 h-5 w-24" />
           <Skeleton className="h-10 w-full rounded-xl" />
         </Card>

package/src/features/settings/pages/providers-config-page.tsx

@@ -137,7 +137,7 @@ export function ProvidersConfigPage() {
                 <div className="grid max-h-[24rem] grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3">
                   <button
                     type="button"
-                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border bg-card px-3 py-2 text-left transition-colors hover:border-primary/40 hover:bg-accent/70"
+                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-muted/45"
                     onClick={async () => {
                       try {
                         const result = await createProvider.mutateAsync({ data: { providerType: null } });
@@ -150,7 +150,7 @@ export function ProvidersConfigPage() {
                       }
                     }}
                   >
-                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-border bg-background" />
+                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-border/60 bg-muted/50" />
                     <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
                       {t('providerAddCustom')}
                     </span>
@@ -159,7 +159,7 @@ export function ProvidersConfigPage() {
                     <button
                       key={template.providerType}
                       type="button"
-                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border bg-card px-3 py-2 text-left transition-colors hover:border-primary/40 hover:bg-accent/70"
+                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-muted/40"
                       onClick={async () => {
                         try {
                           const result = await createProvider.mutateAsync({ data: { providerType: template.providerType } });
@@ -175,7 +175,7 @@ export function ProvidersConfigPage() {
                       <LogoBadge
                         name={template.providerType}
                         src={template.logo ? `/logos/${template.logo}` : null}
-                        className="h-8 w-8 rounded-lg border border-border bg-background"
+                        className="h-8 w-8 rounded-lg border border-border/55 bg-background"
                         imgClassName="h-4 w-4 object-contain"
                       />
                       <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
@@ -221,10 +221,10 @@ export function ProvidersConfigPage() {
                   role="button"
                   tabIndex={0}
                   className={cn(
-                    'w-full rounded-xl border p-2.5 text-left transition-all',
+                    'group w-full rounded-xl border p-2.5 text-left transition-colors',
                     resolvedSelectedProvider === provider.providerId
-                      ? 'border-primary/35 bg-primary-50/45 text-foreground shadow-sm'
-                      : 'border-border bg-card text-muted-foreground hover:border-primary/35 hover:bg-accent/70 hover:text-accent-foreground',
+                      ? 'border-border/70 bg-muted/65 text-foreground'
+                      : 'border-transparent bg-transparent text-muted-foreground hover:border-border/50 hover:bg-muted/40 hover:text-foreground',
                   )}
                 >
                   <div className="relative min-h-10">
@@ -232,10 +232,7 @@ export function ProvidersConfigPage() {
                       <LogoBadge
                         name={provider.providerType ?? provider.providerId}
                         src={template?.logo ? `/logos/${template.logo}` : null}
-                        className={cn(
-                          'h-10 w-10 rounded-lg border',
-                          isReady ? 'border-primary/35 bg-background' : 'border-border bg-background',
-                        )}
+                        className="h-10 w-10 rounded-lg border border-border/55 bg-muted/40"
                         imgClassName="h-5 w-5 object-contain"
                         fallback={<span className="text-sm font-semibold uppercase text-muted-foreground">{provider.providerId[0]}</span>}
                       />
@@ -247,7 +244,7 @@ export function ProvidersConfigPage() {
                         </p>
                       </div>
                     </div>
-                    <div className="absolute right-0 top-0 flex items-center gap-1.5">
+                    <div className="absolute right-0 top-0 flex items-center gap-1.5 opacity-70 transition-opacity group-hover:opacity-100">
                       <div onClick={(event) => event.stopPropagation()}>
                         <Switch
                           checked={isEnabled}
@@ -268,7 +265,7 @@ export function ProvidersConfigPage() {
                         <PopoverTrigger asChild>
                           <button
                             type="button"
-                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-accent hover:text-accent-foreground"
+                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-muted hover:text-foreground"
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >

package/src/features/settings/pages/search-config-page.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ExternalLink, KeyRound, Search as SearchIcon } from "lucide-react";
 import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
 import { Button } from "@/shared/components/ui/button";
+import { FormActions } from "@/shared/components/ui/actions/form-actions";
 import { Input } from "@/shared/components/ui/input";
 import { Label } from "@/shared/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select";
@@ -456,11 +457,13 @@ function SearchConfigForm(props: {
               />
             </ConfigSplitPaneBody>
 
-            <ConfigSplitPaneFooter className="flex justify-end px-6 py-4">
-              <Button type="submit" disabled={isPending}>
-                <KeyRound className="mr-2 h-4 w-4" />
-                {isPending ? t("saving") : t("saveChanges")}
-              </Button>
+            <ConfigSplitPaneFooter>
+              <FormActions>
+                <Button type="submit" size="sm" disabled={isPending}>
+                  <KeyRound className="mr-1.5 h-3.5 w-3.5" />
+                  {isPending ? t("saving") : t("saveChanges")}
+                </Button>
+              </FormActions>
             </ConfigSplitPaneFooter>
           </form>
         </ConfigSplitDetailPane>

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useRuntimeUpdateStore } from '@/features/system-status';
 import { DesktopUpdateConfig } from '@/features/system-status/components/desktop-update-config';
 import { setLanguage } from '@/shared/lib/i18n';
@@ -26,6 +27,22 @@ vi.mock('@/features/system-status', async () => {
   };
 });
 
+function renderDesktopUpdateConfig() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        gcTime: 0,
+        retry: false
+      }
+    }
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <DesktopUpdateConfig />
+    </QueryClientProvider>
+  );
+}
+
 describe('DesktopUpdateConfig', () => {
   beforeEach(() => {
     setLanguage('zh');
@@ -60,7 +77,7 @@ describe('DesktopUpdateConfig', () => {
         availableVersion: '0.18.2-beta.1',
         downloadedVersion: null,
         minimumHostVersion: null,
-        releaseNotesUrl: 'https://example.com/release-notes',
+        releaseNotesUrl: null,
         lastCheckedAt: '2026-04-13T12:00:00.000Z',
         progress: null,
         canAutoDownload: false,
@@ -77,8 +94,12 @@ describe('DesktopUpdateConfig', () => {
     });
   });
 
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
   it('renders current channel information and beta guidance', () => {
-    render(<DesktopUpdateConfig />);
+    renderDesktopUpdateConfig();
 
     expect(mocks.start).not.toHaveBeenCalled();
     expect(mocks.stop).not.toHaveBeenCalled();
@@ -93,7 +114,7 @@ describe('DesktopUpdateConfig', () => {
   it('sends the newly selected release channel to the desktop update manager', async () => {
     const user = userEvent.setup();
 
-    render(<DesktopUpdateConfig />);
+    renderDesktopUpdateConfig();
 
     await user.click(screen.getByRole('combobox'));
     await user.click(screen.getByRole('option', { name: 'Stable' }));
@@ -118,9 +139,80 @@ describe('DesktopUpdateConfig', () => {
         : null
     }));
 
-    render(<DesktopUpdateConfig />);
+    renderDesktopUpdateConfig();
 
     expect(screen.getByText('正在下载 50%')).toBeTruthy();
     expect(screen.getByText('50 B / 100 B')).toBeTruthy();
   });
+
+  it('loads structured release notes from the docs JSON endpoint', async () => {
+    const fetchMock = vi.fn(async () => new Response(JSON.stringify({
+      schemaVersion: 1,
+      product: 'NextClaw',
+      version: '0.22.0',
+      sections: [
+        {
+          kind: 'feature',
+          title: {
+            'zh-CN': '功能',
+            'en-US': 'Features'
+          },
+          items: [
+            {
+              title: {
+                'zh-CN': '更新前查看内容',
+                'en-US': 'Review before updating'
+              },
+              body: {
+                'zh-CN': '更新提示可以直接展示本版本的结构化说明。',
+                'en-US': 'The update prompt can show structured notes for this version.'
+              }
+            }
+          ]
+        },
+        {
+          kind: 'fix',
+          title: {
+            'zh-CN': '修复',
+            'en-US': 'Fixes'
+          },
+          items: [
+            {
+              title: {
+                'zh-CN': '附件发送修复',
+                'en-US': 'Attachment delivery fix'
+              }
+            }
+          ]
+        }
+      ]
+    }), {
+      headers: { 'content-type': 'application/json' },
+      status: 200
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    useRuntimeUpdateStore.setState((state) => ({
+      ...state,
+      snapshot: state.snapshot
+        ? {
+            ...state.snapshot,
+            status: 'update-available',
+            availableVersion: '0.22.0',
+            releaseNotesUrl: 'https://docs.nextclaw.io/zh/notes/2026-07-05-nextclaw-v0-22-0'
+          }
+        : null
+    }));
+
+    renderDesktopUpdateConfig();
+
+    expect(await screen.findByText('更新前查看内容')).toBeTruthy();
+    expect(screen.getByText('修复')).toBeTruthy();
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://docs.nextclaw.io/release-notes/nextclaw-v0.22.0.json',
+      expect.objectContaining({
+        cache: 'no-store',
+        headers: { accept: 'application/json' }
+      })
+    );
+  });
 });

package/src/features/system-status/components/config/runtime-config-editor.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import { Save } from 'lucide-react';
 import type { ConfigView, RuntimeConfigUpdate } from '@/shared/lib/api';
 import { Button } from '@/shared/components/ui/button';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { PageLayout } from '@/app/components/layout/page-layout';
 import { t } from '@/shared/lib/i18n';
 import { RuntimeConfigOverview } from '@/features/system-status/components/config/runtime-config-overview';
@@ -111,12 +112,12 @@ export function RuntimeConfigEditor({
         onRemoveBinding={(index) => setBindings((previous) => previous.filter((_, cursor) => cursor !== index))}
         onAddBinding={() => setBindings((previous) => [...previous, createEmptyRuntimeBinding()])}
       />
-      <div className="flex justify-end">
-        <Button type="button" onClick={handleSave} disabled={updateRuntime.isPending}>
-          <Save className="h-4 w-4 mr-2" />
+      <FormActions>
+        <Button type="button" size="sm" onClick={handleSave} disabled={updateRuntime.isPending}>
+          <Save className="mr-1.5 h-3.5 w-3.5" />
           {updateRuntime.isPending ? t('saving') : t('saveRuntimeSettings')}
         </Button>
-      </div>
+      </FormActions>
     </PageLayout>
   );
 }

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

@@ -1,4 +1,5 @@
 import type { UpdateSnapshot } from '@nextclaw/shared';
+import { useQuery } from '@tanstack/react-query';
 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';
@@ -6,9 +7,16 @@ import { Label } from '@/shared/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
 import { Switch } from '@/shared/components/ui/switch';
 import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
-import { formatDateTime, t } from '@/shared/lib/i18n';
+import { formatDateTime, getLanguage, t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 import { hostCapabilityManager } from '@/shared/lib/host-capabilities';
+import {
+  fetchReleaseNotesData,
+  readReleaseNotesText,
+  resolveReleaseNotesDataUrl,
+  type ReleaseNotesLocale,
+  type ReleaseNotesSection
+} from '@/features/system-status/utils/update-release-notes.utils';
 import { Download, ExternalLink, RefreshCw, RotateCw } from 'lucide-react';
 
 const STATUS_LABEL_KEYS: Record<string, string> = {
@@ -21,6 +29,13 @@ const STATUS_LABEL_KEYS: Record<string, string> = {
   failed: 'desktopUpdatesStatusFailed',
 };
 
+const RELEASE_NOTES_KIND_LABEL_KEYS: Record<string, string> = {
+  feature: 'desktopUpdatesReleaseNotesFeature',
+  enhancement: 'desktopUpdatesReleaseNotesEnhancement',
+  fix: 'desktopUpdatesReleaseNotesFix',
+  compatibility: 'desktopUpdatesReleaseNotesCompatibility'
+};
+
 function StatusBadge({ status }: { status: string }) {
   return <span className={cn('inline-flex rounded-full px-3 py-1 text-xs font-medium ring-1', getStatusTone(status))}>{getStatusLabel(status)}</span>;
 }
@@ -117,6 +132,80 @@ function getStatusTone(status: string): string {
   return 'bg-gray-100 text-gray-700 ring-gray-200';
 }
 
+function getReleaseNotesLocale(): ReleaseNotesLocale {
+  return getLanguage() === 'zh' ? 'zh-CN' : 'en-US';
+}
+
+function getReleaseNotesSectionTitle(section: ReleaseNotesSection, locale: ReleaseNotesLocale): string {
+  const title = readReleaseNotesText(section.title, locale);
+  return title ?? t(RELEASE_NOTES_KIND_LABEL_KEYS[section.kind] ?? 'desktopUpdatesReleaseNotesEnhancement');
+}
+
+function ReleaseNotesPreview({ snapshot }: { snapshot: UpdateSnapshot }) {
+  const dataUrl = resolveReleaseNotesDataUrl(snapshot);
+  const locale = getReleaseNotesLocale();
+  const releaseNotesQuery = useQuery({
+    queryKey: ['runtime-release-notes', dataUrl],
+    queryFn: async () => await fetchReleaseNotesData(dataUrl ?? ''),
+    enabled: Boolean(dataUrl),
+    retry: false,
+    staleTime: 5 * 60 * 1000
+  });
+  const payload = releaseNotesQuery.data;
+  const title = readReleaseNotesText(payload?.title, locale) ?? t('desktopUpdatesReleaseNotesPreviewTitle');
+  const summary = readReleaseNotesText(payload?.summary, locale) ?? t('desktopUpdatesReleaseNotesPreviewDescription');
+
+  if (!snapshot.releaseNotesUrl) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="space-y-1">
+            <CardTitle>{title}</CardTitle>
+            <CardDescription>{summary}</CardDescription>
+          </div>
+          <Button variant="ghost" onClick={() => void hostCapabilityManager.openExternalUrl(snapshot.releaseNotesUrl ?? '')}>
+            <ExternalLink className="mr-2 h-4 w-4" />
+            {t('desktopUpdatesReleaseNotes')}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {releaseNotesQuery.isLoading ? (
+          <p className="text-sm text-gray-500">{t('desktopUpdatesReleaseNotesPreviewLoading')}</p>
+        ) : null}
+        {!dataUrl || releaseNotesQuery.isError ? (
+          <p className="text-sm text-gray-500">{t('desktopUpdatesReleaseNotesPreviewUnavailable')}</p>
+        ) : null}
+        {payload ? (
+          <div className="grid gap-4 md:grid-cols-2">
+            {payload.sections.map((section) => (
+              <div key={section.kind} className="rounded-xl border border-gray-200 bg-gray-50/60 p-4">
+                <p className="text-sm font-semibold text-gray-900">{getReleaseNotesSectionTitle(section, locale)}</p>
+                <ul className="mt-3 space-y-3">
+                  {section.items.map((item, index) => {
+                    const itemTitle = readReleaseNotesText(item.title, locale);
+                    const itemBody = readReleaseNotesText(item.body, locale);
+                    return (
+                      <li key={`${itemTitle ?? section.kind}-${index}`} className="space-y-1">
+                        {itemTitle ? <p className="text-sm font-medium text-gray-800">{itemTitle}</p> : null}
+                        {itemBody ? <p className="text-sm leading-5 text-gray-600">{itemBody}</p> : null}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
 function RuntimeUpdateUnavailableState() {
   return (
     <PageLayout className="space-y-6">
@@ -192,6 +281,7 @@ export function DesktopUpdateConfig() {
           {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>
+      <ReleaseNotesPreview snapshot={snapshot} />
       <Card>
         <CardHeader>
           <CardTitle>{t('desktopUpdatesPreferencesTitle')}</CardTitle>
@@ -250,7 +340,6 @@ export function DesktopUpdateConfig() {
             <RotateCw className={cn('mr-2 h-4 w-4', isApplying && 'animate-spin')} />
             {t('runtimeUpdatesApplyNow')}
           </Button>
-          {snapshot.releaseNotesUrl ? <Button variant="ghost" onClick={() => void hostCapabilityManager.openExternalUrl(snapshot.releaseNotesUrl ?? '')}><ExternalLink className="mr-2 h-4 w-4" />{t('desktopUpdatesReleaseNotes')}</Button> : null}
         </CardContent>
       </Card>
     </PageLayout>