feat(web): present onboarding as a continuous page

2026-07-31 00:28:17 +08:00
parent 04f8b30db1
commit 75a0366a52
25 changed files with 475 additions and 228 deletions
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-07-30-versioned-gui-welcome-onboarding.md
-2026-07-30-versioned-gui-welcome-onboarding.md: 06ac9fbe5c10db872c7ea3989ff2e14f756965a0
-2026-07-30-versioned-gui-welcome-onboarding.zh.md: e2d726368e6282e4f6043c225b665c1945228f2d
+2026-07-30-versioned-gui-welcome-onboarding.md: 0705469e02ddb9068722ae5d500c151f077c83fd
+2026-07-30-versioned-gui-welcome-onboarding.zh.md: bdd21d635f824b8c4a4813e6bff7798b34ec9677
@@ -18,7 +18,7 @@ The GUI's credential onboarding begins with a DeepSeek-specific readiness check,

 **Concurrent views converge without stale replacement.** The acknowledgement write omits `expectedRevision` deliberately: every tab writes the same version to one path, so the operation is idempotent and preserves sibling fields instead of rebuilding the section. `settings/document-updated` becomes `host/settings-changed`; an already mounted tab refetches and advances when another tab or an external editor commits the current version. The API proxy exposes this one product namespace through a closed allowlist beside configurable-provider namespaces, without treating its changes as model-catalog invalidations.

-**The welcome modal is scan-first and has one completion path.** Its hierarchy is a declaration title, one status sentence, one emphasized feedback callout, one consequence sentence, and a restrained quotation; the notice version changes whenever that authored copy changes materially. It renders no close icon or secondary action, installs no Escape handler, and assigns no click handler to the mask. Its mask starts below the 80 px top chrome and preserves `position:absolute`, zero left/right/bottom offsets, `rgba(0, 0, 0, 0.24)`, and `backdrop-filter: blur(2px)`. Continue is the sole button and receives initial focus.
+**Onboarding temporarily owns the viewport as one continuous stage.** A solid product surface replaces the complete application view through a body-level portal and marks the underlying app root inert; the exact required mask remains mounted behind that surface with `position:absolute`, zero left/right/bottom offsets, `top:80px`, `rgba(0, 0, 0, 0.24)`, and `backdrop-filter: blur(2px)`. Welcome and conditional credential setup render as successive pages in this stage instead of independent modals. Both pages reuse the Web UI's black `BrandWordmark`. The welcome page preserves the four authored paragraphs verbatim under the `内测声明` title; every paragraph uses one 16/28 body scale, and only the requested action clause inside the final paragraph receives a subtle 500 weight. A short staggered opacity/vertical entrance supplies pacing without blocking interaction and disappears under reduced motion. The title receives initial focus, Continue is the sole button, and no close, Escape, or mask-click path exists.

 ## Alternatives considered

@@ -18,7 +18,7 @@ GUI 的凭据引导从 DeepSeek 专用的就绪状态检查开始，但内部测

 **并发视图无需陈旧的整体替换即可收敛。** 确认写入有意省略 `expectedRevision`：每个标签页都向同一路径写入相同版本，因此该操作是幂等的，并会保留同级字段，而不是重建整个分节。`settings/document-updated` 会转为 `host/settings-changed`；另一个标签页或外部编辑器提交当前版本后，已挂载的标签页会重新拉取状态并推进。API 网关在可配置提供方 namespace 之外，通过封闭的允许列表暴露这一个产品 namespace，同时不会把它的变更视为模型目录失效事件。

-**欢迎模态窗口以便于扫读为先，且只有一条完成路径。** 其信息层级依次为声明标题、一句状态说明、一则重点突出的反馈提示、一句影响说明和一则克制的引语；只要这份文案发生实质变化，就同步提升通知版本。界面不渲染关闭图标或次要操作，不安装 Escape 处理器，也不为遮罩添加点击处理器。遮罩从顶部 80 px 的界面框架下方开始，并保留 `position:absolute`、left/right/bottom 偏移量为零、`rgba(0, 0, 0, 0.24)` 和 `backdrop-filter: blur(2px)`。「继续」是唯一按钮，并会获得初始焦点。
+**引导流程会暂时接管视口，形成一个连续阶段。** 纯色产品界面通过挂载到 `body` 的 portal 取代完整的应用视图，并将底层应用根节点标记为 inert；严格符合要求的遮罩仍挂载在该界面后方，并保留 `position:absolute`、left/right/bottom 偏移量为零、`top:80px`、`rgba(0, 0, 0, 0.24)` 和 `backdrop-filter: blur(2px)`。欢迎页和按条件显示的凭据设置页在这一阶段中依次呈现，而不是各自作为独立的模态窗口。两个页面都复用 Web UI 的黑色 `BrandWordmark`。欢迎页在 `内测声明` 标题下逐字保留既定的四段文案；所有段落统一采用 16/28 的正文字号与行高，只有最后一段中指定的行动语句使用较为克制的 500 字重。短暂的错落式透明度与纵向位移动画营造出舒缓节奏，但不会阻碍交互，并会在用户启用减少动态效果时禁用。初始焦点落在标题上，「继续」是唯一按钮，且不存在关闭、Escape 或点击遮罩的退出路径。

 ## 曾考虑的替代方案

@@ -48,14 +48,17 @@ describe.skipIf(MODE === 'record')('web e2e: first-run DeepSeek credential setup

  it('stores a key write-only and observes configured state without restarting', async () => {
    onTestFailed(() => saveFailureShot(page, 'web-e2e-onboarding-deepseek-config'))
-    const welcome = page.getByRole('dialog', { name: WELCOME_NOTICE_COPY.zh.title })
+    const welcome = page.getByRole('region', { name: WELCOME_NOTICE_COPY.zh.title })
    await welcome.waitFor({ timeout: 15_000 })
-    const welcomeAria = await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd)
+    expect(await page.locator('#root').evaluate(root => (root as HTMLElement).inert)).toBe(true)
+    const welcomeAria = await captureStableAria(page, '[role="region"]', scaffold.workspaceCwd)
    await compareOrRefreshGolden(WELCOME_EXPECTED, welcomeAria, MODE)
    expect(await welcome.getByRole('button').allTextContents()).toEqual([WELCOME_NOTICE_COPY.zh.continueLabel])
    expect(await welcome.locator('button').count()).toBe(1)

-    const maskStyles = await welcome.locator('xpath=..').locator(':scope > div').first().evaluate((mask) => {
+    const mask = page.locator('[class*="onboardingMask"]')
+    expect(await mask.count()).toBe(1)
+    const maskStyles = await mask.evaluate((mask) => {
      const style = getComputedStyle(mask)
      const rect = mask.getBoundingClientRect()
      return {
@@ -89,16 +92,17 @@ describe.skipIf(MODE === 'record')('web e2e: first-run DeepSeek credential setup

    await welcome.getByRole('button', { name: WELCOME_NOTICE_COPY.zh.continueLabel }).click()
    await welcome.waitFor({ state: 'detached', timeout: 15_000 })
-    const dialog = page.getByRole('dialog', { name: '添加一个 API Key 开始使用' })
-    await dialog.waitFor({ timeout: 15_000 })
-    expect(await dialog.getByRole('textbox').count()).toBe(0)
-    const initial = await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd)
+    const credentialStep = page.getByRole('region', { name: '添加一个 API Key 开始使用' })
+    await credentialStep.waitFor({ timeout: 15_000 })
+    expect(await credentialStep.getByRole('textbox').count()).toBe(0)
+    const initial = await captureStableAria(page, '[role="region"]', scaffold.workspaceCwd)
    await compareOrRefreshGolden(MISSING_EXPECTED, initial, MODE)

-    await dialog.getByRole('button', { name: '前往配置' }).click()
-    await dialog.waitFor({ state: 'detached', timeout: 15_000 })
+    await credentialStep.getByRole('button', { name: '前往配置' }).click()
+    await credentialStep.waitFor({ state: 'detached', timeout: 15_000 })
    const settings = page.getByRole('dialog', { name: '设置' })
    await settings.waitFor({ timeout: 10_000 })
+    expect(await page.locator('#root').evaluate(root => (root as HTMLElement).inert)).toBe(false)
    const keyInput = settings.getByLabel('API 密钥', { exact: true })
    await keyInput.waitFor({ timeout: 10_000 })

@@ -132,8 +136,8 @@ describe.skipIf(MODE === 'record')('web e2e: first-run DeepSeek credential setup
    await page.reload({ waitUntil: 'load' })
    acknowledgeReloadConnectionLoss(tripwire, secondReloadWarnings)
    await page.waitForSelector('[class*="frame"]', { timeout: 15_000 })
-    expect(await page.getByRole('dialog', { name: WELCOME_NOTICE_COPY.zh.title }).count()).toBe(0)
-    expect(await page.getByRole('dialog', { name: '添加一个 API Key 开始使用' }).count()).toBe(0)
+    expect(await page.getByRole('region', { name: WELCOME_NOTICE_COPY.zh.title }).count()).toBe(0)
+    expect(await page.getByRole('region', { name: '添加一个 API Key 开始使用' }).count()).toBe(0)

    // A different stored copy version represents an intentional version bump:
    // the welcome step returns even though the credential is already ready.
@@ -146,7 +150,7 @@ describe.skipIf(MODE === 'record')('web e2e: first-run DeepSeek credential setup
    await welcome.waitFor({ timeout: 15_000 })
    await welcome.getByRole('button', { name: WELCOME_NOTICE_COPY.zh.continueLabel }).click()
    await welcome.waitFor({ state: 'detached', timeout: 15_000 })
-    expect(await page.getByRole('dialog', { name: '添加一个 API Key 开始使用' }).count()).toBe(0)
+    expect(await page.getByRole('region', { name: '添加一个 API Key 开始使用' }).count()).toBe(0)

    expect((await page.content()).includes(secret)).toBe(false)
    expect((await page.locator('body').ariaSnapshot()).includes(secret)).toBe(false)
@@ -1,6 +1,6 @@
- dialog "添加一个 API Key 开始使用":
+- region "添加一个 API Key 开始使用":
  - heading "添加一个 API Key 开始使用" [level=2]
-  - button "稍后配置":
-    - img
  - paragraph: 配置 DeepSeek 官方模型，即可开始使用。
+  - text: DeepSeek deepseek-official
+  - button "稍后配置"
  - button "前往配置"
@@ -1,8 +1,10 @@
- dialog "内测声明":
+- region "内测声明":
  - heading "内测声明" [level=2]
-  - paragraph: 感谢您试用 DeepSeek Harness。目前仍处于内部测试阶段，部分功能与体验还在持续打磨。
-  - strong: 我们最想听见：失败、困惑和不顺手
-  - paragraph: 如果它没帮到您，甚至给工作添了麻烦，请在企业微信群告诉我们。
-  - paragraph: 真实使用中的每一个问题，都可能促使我们重新审视，甚至推翻已有设计。
-  - paragraph: “如切如磋，如琢如磨。”
+  - paragraph: 感谢您愿意拨冗试用 DeepSeek Harness。
+  - paragraph: 目前的版本仍处于内部测试阶段，有些功能仍待完善，有些体验难免粗粝。
+  - blockquote: “如切如磋，如琢如磨。” 产品的成长，离不开一次次真实的碰撞与坦诚的反馈。您在真实使用中暴露的问题，也可能促使我们重新审视，甚至推翻已有的设计。
+  - paragraph:
+    - text: 我们尤其希望听见那些失败、困惑与不顺手的时刻——
+    - strong: 如果它未能帮到您，甚至反而为工作平添了麻烦，请在企业微信群中留言
+    - text: ，将使用感受告诉我们。每一条反馈，都会帮助我们把它打磨得更好。
  - button "继续"
@@ -1,14 +1,136 @@
-.dialog {
-  width: min(420px, 100%);
+.page {
+  position: relative;
+  z-index: 1;
+  width: min(640px, calc(100vw - 64px));
+  max-height: 100vh;
+  padding: clamp(64px, 9vh, 108px) 0 40px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  color: var(--dsw-alias-label-primary);
 }

-.diagnostic {
+.brand {
+  display: flex;
+  align-items: center;
+  margin-bottom: 42px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.title {
+  max-width: 620px;
  margin: 0;
-  font-size: 13px;
-  line-height: 20px;
+  font-size: clamp(30px, 4vw, 42px);
+  line-height: 1.15;
+  font-weight: 600;
+  letter-spacing: -0.035em;
+  outline: none;
+}
+
+.description,
+.diagnostic {
+  max-width: 600px;
+  margin: 22px 0 0;
+  font-size: 17px;
+  line-height: 29px;
  color: var(--dsw-alias-label-secondary);
 }

-.primary {
-  width: 100%;
+.provider {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 600px;
+  margin-top: 36px;
+  padding: 18px 20px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 16px;
+  background: var(--dsw-alias-bg-module-platform);
+}
+
+.providerName {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.providerRoute {
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 40px;
+}
+
+.primary {
+  min-width: 132px;
+}
+
+.brand,
+.title,
+.description,
+.diagnostic,
+.provider,
+.actions {
+  animation: credential-enter 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+.title { animation-delay: 40ms; }
+.description,
+.diagnostic { animation-delay: 80ms; }
+.provider { animation-delay: 120ms; }
+.actions { animation-delay: 160ms; }
+
+@keyframes credential-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .brand,
+  .title,
+  .description,
+  .diagnostic,
+  .provider,
+  .actions {
+    animation: none;
+  }
+}
+
+@media (max-width: 560px) {
+  .page {
+    width: calc(100vw - 40px);
+    padding-top: 48px;
+  }
+
+  .brand {
+    margin-bottom: 30px;
+  }
+
+  .description,
+  .diagnostic {
+    font-size: 16px;
+    line-height: 27px;
+  }
+
+  .actions {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+
+  .primary,
+  .later {
+    width: 100%;
+  }
 }
@@ -1,13 +1,13 @@
 /**
- * Official-DeepSeek first-run dialog. Readiness comes from the same
+ * Official-DeepSeek first-run step. Readiness comes from the same
 * provider/settings/credential join as the Models page; the prompt only
 * routes the user to that page's single credential editor.
 */

-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import type { ReactNode } from 'react'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
-import { Button, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
+import { BrandWordmark, Button } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-web-react'
 import type { DeepSeekReadiness, ModelsSettingsState, ModelsSettingsStore } from './store.ts'
 import { deepSeekReadiness } from './store.ts'
@@ -61,12 +61,13 @@ function unavailableDiagnostic(
 * Prompt a first-run user to open Models while the official adapter exists
 * and its effective credential is not configured.
 * @param props - settings-shell owner state and Models feature dependencies.
- * @returns the controlled modal or null when onboarding needs no intervention.
+ * @returns the onboarding page or null when onboarding needs no intervention.
 */
 export function DeepSeekOnboardingDialog(props: DeepSeekOnboardingDialogProps): ReactNode {
  const { complete, openSection, controller, useSnapshot, t } = props
  const state = useSnapshot(snapshot => snapshot)
  const readiness = deepSeekReadiness(state)
+  const titleRef = useRef<HTMLHeadingElement | null>(null)

  useEffect(() => {
    if (state.status === 'idle') void controller.load()
@@ -81,6 +82,12 @@ export function DeepSeekOnboardingDialog(props: DeepSeekOnboardingDialogProps):
    openSection('models')
  }

+  useEffect(() => {
+    if (readiness.kind === 'credential-missing' || readiness.kind === 'unavailable') {
+      titleRef.current?.focus()
+    }
+  }, [readiness.kind])
+
  let unavailableReason: UnavailableReason | undefined
  switch (readiness.kind) {
    case 'loading':
@@ -102,26 +109,38 @@ export function DeepSeekOnboardingDialog(props: DeepSeekOnboardingDialogProps):
    ? undefined
    : unavailableDiagnostic(unavailableReason, t)

+  const title = unavailable ? t('onboardingUnavailableTitle') : t('onboardingTitle')
+
  return (
-    <Modal
-      open
-      onClose={complete}
-      title={unavailable ? t('onboardingUnavailableTitle') : t('onboardingTitle')}
-      closeLabel={t('onboardingLater')}
-      {...(unavailable ? {} : { description: t('onboardingDescription') })}
-      className={styles['dialog'] as string}
-      footer={(
+    <section className={styles['page']} role="region" aria-labelledby="deepseek-onboarding-title">
+      <div className={styles['brand']} aria-hidden="true"><BrandWordmark size={24} /></div>
+      <h2
+        ref={titleRef}
+        id="deepseek-onboarding-title"
+        className={styles['title']}
+        tabIndex={-1}
+      >
+        {title}
+      </h2>
+      {unavailable
+        ? <p className={styles['diagnostic']}>{diagnostic}</p>
+        : <p className={styles['description']}>{t('onboardingDescription')}</p>}
+      <div className={styles['provider']}>
+        <span className={styles['providerName']}>DeepSeek</span>
+        <span className={styles['providerRoute']}>deepseek-official</span>
+      </div>
+      <div className={styles['actions']}>
+        <Button variant="ghost" className={styles['later']} onClick={complete}>
+          {t('onboardingLater')}
+        </Button>
        <Button
          variant="primary"
          className={styles['primary']}
-          autoFocus
          onClick={openModels}
        >
          {t('onboardingGoToSettings')}
        </Button>
-      )}
-    >
-      {diagnostic === undefined ? undefined : <p className={styles['diagnostic']}>{diagnostic}</p>}
-    </Modal>
+      </div>
+    </section>
  )
 }
@@ -111,18 +111,18 @@ describe('DeepSeekOnboardingDialog', () => {
  it('loads on first entry and presents one accessible route to Models', async () => {
    const h = harness()
    render(<DeepSeekOnboardingDialog {...h.props} />)
-    expect(await screen.findByRole('dialog', { name: en.onboardingTitle })).toBeTruthy()
+    expect(await screen.findByRole('region', { name: en.onboardingTitle })).toBeTruthy()
    expect(screen.getByText(en.onboardingDescription)).toBeTruthy()
    const action = screen.getByRole('button', { name: en.onboardingGoToSettings })
    expect(action).toBeTruthy()
-    expect(document.activeElement).toBe(action)
+    expect(document.activeElement).toBe(screen.getByRole('heading', { name: en.onboardingTitle }))
    expect(screen.queryByRole('textbox')).toBeNull()
  })

  it('opens the Models section and dismisses the prompt', async () => {
    const h = harness()
    render(<DeepSeekOnboardingDialog {...h.props} />)
-    await screen.findByRole('dialog')
+    await screen.findByRole('region')
    fireEvent.click(screen.getByRole('button', { name: en.onboardingGoToSettings }))
    expect(h.complete).toHaveBeenCalledOnce()
    expect(h.openSection).toHaveBeenCalledWith('models')
@@ -131,7 +131,7 @@ describe('DeepSeekOnboardingDialog', () => {
  it('allows configure-later dismissal without opening settings', async () => {
    const h = harness()
    render(<DeepSeekOnboardingDialog {...h.props} />)
-    await screen.findByRole('dialog')
+    await screen.findByRole('region')
    fireEvent.click(screen.getByRole('button', { name: en.onboardingLater }))
    expect(h.complete).toHaveBeenCalledOnce()
    expect(h.openSection).not.toHaveBeenCalled()
@@ -140,7 +140,7 @@ describe('DeepSeekOnboardingDialog', () => {
  it('routes an unavailable credential deployment to Models with a diagnostic', async () => {
    const h = harness({ describeFailure: 'credentials service is absent' })
    render(<DeepSeekOnboardingDialog {...h.props} />)
-    await screen.findByRole('dialog', { name: en.onboardingUnavailableTitle })
+    await screen.findByRole('region', { name: en.onboardingUnavailableTitle })
    expect(screen.getByText(en.onboardingCredentialsUnavailable)).toBeTruthy()
    fireEvent.click(screen.getByRole('button', { name: en.onboardingGoToSettings }))
    expect(h.openSection).toHaveBeenCalledWith('models')
@@ -152,7 +152,7 @@ describe('DeepSeekOnboardingDialog', () => {
      harness({ settingsWritable: false }),
    ]) {
      const view = render(<DeepSeekOnboardingDialog {...h.props} />)
-      await screen.findByRole('dialog', { name: en.onboardingUnavailableTitle })
+      await screen.findByRole('region', { name: en.onboardingUnavailableTitle })
      expect(screen.getByText(en.onboardingReadOnly)).toBeTruthy()
      view.unmount()
    }
@@ -161,7 +161,7 @@ describe('DeepSeekOnboardingDialog', () => {
  it('distinguishes an initial transport failure from deployment misconfiguration', async () => {
    const h = harness({ providersRejectOnce: true })
    render(<DeepSeekOnboardingDialog {...h.props} />)
-    await screen.findByRole('dialog', { name: en.onboardingUnavailableTitle })
+    await screen.findByRole('region', { name: en.onboardingUnavailableTitle })
    expect(screen.getByText(en.onboardingLoadFailed)).toBeTruthy()
    fireEvent.click(screen.getByRole('button', { name: en.onboardingGoToSettings }))
    expect(h.openSection).toHaveBeenCalledWith('models')
@@ -174,7 +174,7 @@ describe('DeepSeekOnboardingDialog', () => {
      harness({ apiKeyEnv: null }),
    ]) {
      const view = render(<DeepSeekOnboardingDialog {...h.props} />)
-      await screen.findByRole('dialog', { name: en.onboardingUnavailableTitle })
+      await screen.findByRole('region', { name: en.onboardingUnavailableTitle })
      expect(screen.getByText(en.onboardingConfigurationUnavailable)).toBeTruthy()
      view.unmount()
    }
@@ -188,7 +188,7 @@ describe('DeepSeekOnboardingDialog', () => {
    ]) {
      const view = render(<DeepSeekOnboardingDialog {...h.props} />)
      await act(async () => { await h.controller.load() })
-      expect(screen.queryByRole('dialog')).toBeNull()
+      expect(screen.queryByRole('region')).toBeNull()
      await waitFor(() => { expect(h.complete).toHaveBeenCalledOnce() })
      view.unmount()
    }
@@ -197,10 +197,10 @@ describe('DeepSeekOnboardingDialog', () => {
  it('closes when an external credential invalidation refreshes the shared join', async () => {
    const h = harness()
    render(<DeepSeekOnboardingDialog {...h.props} />)
-    await screen.findByRole('dialog')
+    await screen.findByRole('region')
    h.configure()
    await act(async () => { await h.controller.load() })
-    await waitFor(() => { expect(screen.queryByRole('dialog')).toBeNull() })
+    await waitFor(() => { expect(screen.queryByRole('region')).toBeNull() })
    expect(h.complete).toHaveBeenCalledOnce()
  })
 })
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-settings-general/README.md
-README.md: 3ae3f58bd00172ed9b547c01a354023c224f6a1c
-README.zh.md: ffdaf0e4314daa947a4183e2b23b7b1650de7611
+README.md: 0ec2e14bc4f483a23607de7f33ca4c35687c7c4f
+README.zh.md: 9ce7136ce9a0bf384bd2b6419d52cd0da5c7dc83
@@ -4,7 +4,7 @@ English | [中文](README.zh.md)

 Settings ownerless-copy and product-onboarding plugin: registers everything on the Settings surface that belongs to no single feature — the shell's trigger/header/close chrome content, the General section (Permission/Tool Call skeleton rows + the `settings.general.item` slot declaration), the `settings` dictionaries, and the first ordered welcome step. Feature-owned rows (Language, Appearance), sections (Models), and conditional onboarding steps stay with their feature packages.

-`src/onboarding-copy.ts` is the single editable owner of the complete Chinese and English notice plus `WELCOME_NOTICE_VERSION`. The Host half registers `ui-onboarding` in the user-settings seam; the browser compares `welcomeNoticeVersion` for exact equality and writes the current value only after Continue succeeds. The path mutation is idempotent across tabs and preserves sibling settings, while `host/settings-changed` makes an externally acknowledged notice advance without a reload. A different version deliberately presents the notice again. The welcome UI has no close, Escape, mask-click, or secondary path, and none of its copy or acknowledgement enters a Session log or model request.
+`src/onboarding-copy.ts` is the single editable owner of the complete Chinese and English notice plus `WELCOME_NOTICE_VERSION`. The Host half registers `ui-onboarding` in the user-settings seam; the browser compares `welcomeNoticeVersion` for exact equality and writes the current value only after Continue succeeds. The path mutation is idempotent across tabs and preserves sibling settings, while `host/settings-changed` makes an externally acknowledged notice advance without a reload. A different version deliberately presents the notice again. The welcome page preserves every authored paragraph, gives the requested clause in the final paragraph the sole emphasis, initially focuses the title, and has no close, Escape, mask-click, or secondary path. None of its copy or acknowledgement enters a Session log or model request.

 ## Model Experience

@@ -4,7 +4,7 @@

 设置界面无特定功能归属的文案与产品引导插件：在设置界面注册所有不属于单一功能的内容，包括外壳的触发器、标题栏与关闭控件内容，「通用」分区（「权限」／「工具调用」骨架行和 `settings.general.item` slot 声明）、`settings` 字典，以及第一个有序欢迎步骤。归具体功能所有的行（「语言」、「外观」）、分区（「模型」）和条件式首次使用引导步骤仍由各自的功能包提供。

-`src/onboarding-copy.ts` 是完整中英文通知文案和 `WELCOME_NOTICE_VERSION` 的唯一可编辑来源。宿主端在 user-settings seam 中注册 `ui-onboarding`；浏览器比较 `welcomeNoticeVersion` 是否精确相等，仅在「继续」操作成功后写入当前值。该路径变更在不同标签页间幂等，并会保留同级设置；`host/settings-changed` 则让页面在通知被外部确认后，无需重新加载即可推进。版本不同时，系统会有意重新显示通知。欢迎界面没有关闭操作、Escape、点击遮罩或次要操作路径，其文案和确认状态均不会进入会话日志或模型请求。
+`src/onboarding-copy.ts` 是完整中英文通知文案和 `WELCOME_NOTICE_VERSION` 的唯一可编辑来源。宿主端在 user-settings seam 中注册 `ui-onboarding`；浏览器比较 `welcomeNoticeVersion` 是否精确相等，仅在「继续」操作成功后写入当前值。该路径变更在不同标签页间幂等，并会保留同级设置；`host/settings-changed` 则让页面在通知被外部确认后，无需重新加载即可推进。版本不同时，系统会有意重新显示通知。欢迎页保留原文的每个段落，仅强调最后一段中指定的句段，初始焦点落在标题上，并且没有关闭操作、Escape、点击遮罩或次要操作路径。其文案和确认状态均不会进入会话日志或模型请求。

 ## 模型体验

@@ -1,137 +1,161 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 80px;
-  box-sizing: border-box;
-}
-
-/* Mask */
-.mask {
-  position: absolute;
-  left: 0px;
-  right: 0px;
-  top: 80px;
-  bottom: 0px;
-  background: rgba(0, 0, 0, 0.24);
-  /* Mask-blur */
-  backdrop-filter: blur(2px);
-}
-
-.dialog {
+.page {
  position: relative;
  z-index: 1;
-  width: min(600px, calc(100vw - 48px));
-  max-height: calc(100vh - 128px);
-  padding: 32px;
+  width: min(640px, calc(100vw - 64px));
+  max-height: 100vh;
+  padding: clamp(64px, 9vh, 104px) 0 40px;
  box-sizing: border-box;
  overflow-y: auto;
-  border-radius: 24px;
-  background: var(--dsw-alias-bg-layer-2);
-  box-shadow: var(--dsw-shadow-lv3);
+  color: var(--dsw-alias-label-primary);
+  --welcome-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  margin-bottom: 42px;
  color: var(--dsw-alias-label-primary);
 }

 .title {
  margin: 0;
-  font-size: 20px;
-  line-height: 30px;
+  font-size: 28px;
+  line-height: 36px;
  font-weight: 600;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
+  outline: none;
 }

-.lead,
-.closing,
-.quote,
-.feedback p,
+.opening,
+.status,
+.reflection,
+.feedback,
 .error {
  margin: 0;
 }

-.lead {
-  margin-top: 12px;
-  font-size: 16px;
-  line-height: 25px;
-  color: var(--dsw-alias-label-secondary);
+.opening {
+  margin-top: 30px;
+}
+
+.status {
+  margin-top: 18px;
+}
+
+.reflection {
+  margin-top: 36px;
+  padding: 0;
 }

 .feedback {
-  margin-top: 20px;
-  padding: 16px 18px;
-  border-radius: 14px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  background: var(--dsw-alias-bg-module-platform);
-  font-size: 15px;
-  line-height: 24px;
+  margin-top: 30px;
+}
+
+.opening,
+.status,
+.reflection,
+.feedback {
+  font-size: 16px;
+  line-height: 28px;
+  color: var(--dsw-alias-label-secondary);
 }

 .feedback strong {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: 600;
-}
-
-.feedback p,
-.closing {
-  color: var(--dsw-alias-label-secondary);
-}
-
-.closing {
-  margin-top: 16px;
-  font-size: 15px;
-  line-height: 24px;
-}
-
-.quote {
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--dsw-alias-label-secondary);
+  color: inherit;
+  font-weight: 500;
 }

 .footer {
  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  margin-top: 24px;
-  padding-top: 20px;
-  border-top: 1px solid var(--dsw-alias-border-l1);
+  justify-content: flex-end;
+  margin-top: 32px;
 }

 .error {
-  margin-top: 14px;
-  font-size: 13px;
-  line-height: 20px;
+  margin-top: 20px;
+  font-size: 14px;
+  line-height: 22px;
  color: var(--dsw-alias-state-error-primary);
 }

 .primary {
-  min-width: 104px;
-  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+  min-width: 120px;
+  transition: transform 140ms var(--welcome-ease-out);
 }

 .primary:active:not(:disabled) {
  transform: scale(0.97);
 }

+.brand,
+.title,
+.opening,
+.status,
+.reflection,
+.feedback,
+.footer {
+  animation: welcome-enter 280ms var(--welcome-ease-out) both;
+}
+
+.title { animation-delay: 40ms; }
+.opening { animation-delay: 80ms; }
+.status { animation-delay: 120ms; }
+.reflection { animation-delay: 160ms; }
+.feedback { animation-delay: 200ms; }
+.footer { animation-delay: 240ms; }
+
+@keyframes welcome-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
@media (prefers-reduced-motion: reduce) {
+  .brand,
+  .title,
+  .opening,
+  .status,
+  .reflection,
+  .feedback,
+  .footer {
+    animation: none;
+  }
+
  .primary {
    transition: none;
  }
 }

@media (max-width: 560px) {
-  .dialog {
-    padding: 24px;
+  .page {
+    width: calc(100vw - 40px);
+    padding-top: 38px;
+  }
+
+  .brand {
+    margin-bottom: 30px;
+  }
+
+  .opening {
+    margin-top: 24px;
+  }
+
+  .reflection {
+    margin-top: 28px;
+  }
+
+  .feedback {
+    margin-top: 28px;
  }

  .footer {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 14px;
+    margin-top: 30px;
  }

  .primary {
@@ -3,11 +3,24 @@
 import { useCallback, useEffect, useRef } from 'react'
 import type { ReactNode } from 'react'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
-import { Button } from '@deepseek-ai/dsh-client-ui-primitives'
+import { BrandWordmark, Button } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-web-react'
 import type { WelcomeNoticeState, WelcomeNoticeStore } from './welcome-store.ts'
 import css from './WelcomeNotice.module.css'

+function emphasizedFeedback(paragraph: string, emphasis: string): ReactNode {
+  const index = paragraph.indexOf(emphasis)
+  /* v8 ignore next -- both locale values derive from one owner object that contains the emphasis */
+  if (index < 0) return paragraph
+  return (
+    <>
+      {paragraph.slice(0, index)}
+      <strong>{emphasis}</strong>
+      {paragraph.slice(index + emphasis.length)}
+    </>
+  )
+}
+
 /** Registrant-owned dependencies of {@link WelcomeNotice}. */
 export interface WelcomeNoticeInjected {
  controller: WelcomeNoticeStore
@@ -23,6 +36,7 @@ export function WelcomeNotice(props: WelcomeNoticeProps): ReactNode {
  const { complete, controller, useSnapshot, t } = props
  const state = useSnapshot(snapshot => snapshot)
  const finished = useRef(false)
+  const titleRef = useRef<HTMLHeadingElement | null>(null)
  const finish = useCallback((): void => {
    if (finished.current) return
    finished.current = true
@@ -37,6 +51,10 @@ export function WelcomeNotice(props: WelcomeNoticeProps): ReactNode {
    if (state.acknowledged) finish()
  }, [finish, state.acknowledged])

+  useEffect(() => {
+    if (state.status === 'ready' && !state.acknowledged) titleRef.current?.focus()
+  }, [state.acknowledged, state.status])
+
  if (state.status === 'idle' || state.status === 'loading' || state.acknowledged) return null

  const acknowledge = async (): Promise<void> => {
@@ -44,30 +62,26 @@ export function WelcomeNotice(props: WelcomeNoticeProps): ReactNode {
  }

  return (
-    <div className={css.overlay} role="presentation">
-      <div className={css.mask} aria-hidden="true" />
-      <section className={css.dialog} role="dialog" aria-modal="true" aria-labelledby="welcome-notice-title">
-        <h2 id="welcome-notice-title" className={css.title}>{t('welcome.title')}</h2>
-        <p className={css.lead}>{t('welcome.lead')}</p>
-        <div className={css.feedback}>
-          <strong>{t('welcome.feedbackTitle')}</strong>
-          <p>{t('welcome.feedbackBody')}</p>
-        </div>
-        <p className={css.closing}>{t('welcome.closing')}</p>
-        {state.error === null ? null : <p className={css.error} role="alert">{t('welcome.error')}</p>}
-        <div className={css.footer}>
-          <p className={css.quote}>{t('welcome.quote')}</p>
-          <Button
-            variant="primary"
-            className={css.primary}
-            autoFocus
-            disabled={state.status === 'saving'}
-            onClick={() => { void acknowledge() }}
-          >
-            {t('welcome.continue')}
-          </Button>
-        </div>
-      </section>
-    </div>
+    <section className={css.page} role="region" aria-labelledby="welcome-notice-title">
+      <div className={css.brand} aria-hidden="true"><BrandWordmark size={24} /></div>
+      <h2 ref={titleRef} id="welcome-notice-title" className={css.title} tabIndex={-1}>{t('welcome.title')}</h2>
+      <p className={css.opening}>{t('welcome.paragraph.0')}</p>
+      <p className={css.status}>{t('welcome.paragraph.1')}</p>
+      <blockquote className={css.reflection}>{t('welcome.paragraph.2')}</blockquote>
+      <p className={css.feedback}>
+        {emphasizedFeedback(t('welcome.paragraph.3'), t('welcome.feedbackEmphasis'))}
+      </p>
+      {state.error === null ? null : <p className={css.error} role="alert">{t('welcome.error')}</p>}
+      <div className={css.footer}>
+        <Button
+          variant="primary"
+          className={css.primary}
+          disabled={state.status === 'saving'}
+          onClick={() => { void acknowledge() }}
+        >
+          {t('welcome.continue')}
+        </Button>
+      </div>
+    </section>
  )
 }
@@ -27,11 +27,11 @@ export const zh: LocaleDict = {
  'permission.desc': '选择默认权限模式',
  'toolcall.title': '工具调用',
  'welcome.title': WELCOME_NOTICE_COPY.zh.title,
-  'welcome.lead': WELCOME_NOTICE_COPY.zh.lead,
-  'welcome.feedbackTitle': WELCOME_NOTICE_COPY.zh.feedbackTitle,
-  'welcome.feedbackBody': WELCOME_NOTICE_COPY.zh.feedbackBody,
-  'welcome.closing': WELCOME_NOTICE_COPY.zh.closing,
-  'welcome.quote': WELCOME_NOTICE_COPY.zh.quote,
+  'welcome.paragraph.0': WELCOME_NOTICE_COPY.zh.paragraphs[0],
+  'welcome.paragraph.1': WELCOME_NOTICE_COPY.zh.paragraphs[1],
+  'welcome.paragraph.2': WELCOME_NOTICE_COPY.zh.paragraphs[2],
+  'welcome.paragraph.3': WELCOME_NOTICE_COPY.zh.paragraphs[3],
+  'welcome.feedbackEmphasis': WELCOME_NOTICE_COPY.zh.feedbackEmphasis,
  'welcome.continue': WELCOME_NOTICE_COPY.zh.continueLabel,
  'welcome.error': '暂时无法保存确认状态，请重试。',
 }
@@ -47,11 +47,11 @@ export const en: LocaleDict = {
  'permission.desc': 'Choose default permission mode',
  'toolcall.title': 'Tool Call',
  'welcome.title': WELCOME_NOTICE_COPY.en.title,
-  'welcome.lead': WELCOME_NOTICE_COPY.en.lead,
-  'welcome.feedbackTitle': WELCOME_NOTICE_COPY.en.feedbackTitle,
-  'welcome.feedbackBody': WELCOME_NOTICE_COPY.en.feedbackBody,
-  'welcome.closing': WELCOME_NOTICE_COPY.en.closing,
-  'welcome.quote': WELCOME_NOTICE_COPY.en.quote,
+  'welcome.paragraph.0': WELCOME_NOTICE_COPY.en.paragraphs[0],
+  'welcome.paragraph.1': WELCOME_NOTICE_COPY.en.paragraphs[1],
+  'welcome.paragraph.2': WELCOME_NOTICE_COPY.en.paragraphs[2],
+  'welcome.paragraph.3': WELCOME_NOTICE_COPY.en.paragraphs[3],
+  'welcome.feedbackEmphasis': WELCOME_NOTICE_COPY.en.feedbackEmphasis,
  'welcome.continue': WELCOME_NOTICE_COPY.en.continueLabel,
  'welcome.error': 'The acknowledgement could not be saved. Please try again.',
 }
@@ -8,26 +8,30 @@ export const WELCOME_NOTICE_ACK_FIELD = 'welcomeNoticeVersion'
 * Bump only when the notice changes materially and every user should see it
 * again. The acknowledgement is compared for exact equality.
 */
-export const WELCOME_NOTICE_VERSION = '2026-07-30.2'
+export const WELCOME_NOTICE_VERSION = '2026-07-30.3'

 /** The complete editable welcome notice in both supported GUI locales. */
 export const WELCOME_NOTICE_COPY = {
  zh: {
    title: '内测声明',
-    lead: '感谢您试用 DeepSeek Harness。目前仍处于内部测试阶段，部分功能与体验还在持续打磨。',
-    feedbackTitle: '我们最想听见：失败、困惑和不顺手',
-    feedbackBody: '如果它没帮到您，甚至给工作添了麻烦，请在企业微信群告诉我们。',
-    closing: '真实使用中的每一个问题，都可能促使我们重新审视，甚至推翻已有设计。',
-    quote: '“如切如磋，如琢如磨。”',
+    paragraphs: [
+      '感谢您愿意拨冗试用 DeepSeek Harness。',
+      '目前的版本仍处于内部测试阶段，有些功能仍待完善，有些体验难免粗粝。',
+      '“如切如磋，如琢如磨。” 产品的成长，离不开一次次真实的碰撞与坦诚的反馈。您在真实使用中暴露的问题，也可能促使我们重新审视，甚至推翻已有的设计。',
+      '我们尤其希望听见那些失败、困惑与不顺手的时刻——如果它未能帮到您，甚至反而为工作平添了麻烦，请在企业微信群中留言，将使用感受告诉我们。每一条反馈，都会帮助我们把它打磨得更好。',
+    ],
+    feedbackEmphasis: '如果它未能帮到您，甚至反而为工作平添了麻烦，请在企业微信群中留言',
    continueLabel: '继续',
  },
  en: {
    title: 'Internal Testing Notice',
-    lead: 'Thank you for trying DeepSeek Harness. This version is still in internal testing, and some features and experiences remain under refinement.',
-    feedbackTitle: 'What we most want to hear: failures, confusion, and friction',
-    feedbackBody: 'If it did not help—or even made your work harder—please tell us in the company WeChat group.',
-    closing: 'Every problem found in real use may prompt us to reconsider, or even overturn, an existing design.',
-    quote: '“As one cuts and files, as one chisels and polishes.”',
+    paragraphs: [
+      'Thank you for taking the time to try DeepSeek Harness.',
+      'This version is still in internal testing. Some features remain unfinished, and parts of the experience may feel rough.',
+      '“As one cuts and files, as one chisels and polishes.” A product grows through real encounters and candid feedback. Problems you uncover in real use may prompt us to reconsider—or even overturn—our existing designs.',
+      'We especially want to hear about failures, confusion, and friction. If it did not help you, or even made your work harder, please leave a message in the company WeChat group and tell us about your experience. Every piece of feedback helps us refine it.',
+    ],
+    feedbackEmphasis: 'If it did not help you, or even made your work harder, please leave a message in the company WeChat group',
    continueLabel: 'Continue',
  },
 } as const
@@ -54,30 +54,22 @@ function mount(version?: string, mutateImpl: () => Promise<unknown> = () => Prom
 describe('WelcomeNotice', () => {
  it('renders the owner copy with one primary action and no dismissal control', async () => {
    const h = mount()
-    const dialog = await screen.findByRole('dialog', { name: WELCOME_NOTICE_COPY.zh.title })
-    for (const text of [
-      WELCOME_NOTICE_COPY.zh.title,
-      WELCOME_NOTICE_COPY.zh.lead,
-      WELCOME_NOTICE_COPY.zh.feedbackTitle,
-      WELCOME_NOTICE_COPY.zh.feedbackBody,
-      WELCOME_NOTICE_COPY.zh.closing,
-      WELCOME_NOTICE_COPY.zh.quote,
-    ]) {
-      expect(screen.getByText(text)).toBeTruthy()
-    }
-    expect(dialog.textContent?.match(/感谢您试用 DeepSeek Harness/g) ?? []).toHaveLength(1)
-    const buttons = dialog.querySelectorAll('button')
+    const page = await screen.findByRole('region', { name: WELCOME_NOTICE_COPY.zh.title })
+    expect(screen.getByText(WELCOME_NOTICE_COPY.zh.title)).toBeTruthy()
+    for (const text of WELCOME_NOTICE_COPY.zh.paragraphs) expect(page.textContent).toContain(text)
+    expect(page.textContent?.match(/感谢您愿意拨冗试用 DeepSeek Harness/g) ?? []).toHaveLength(1)
+    const buttons = page.querySelectorAll('button')
    expect(buttons).toHaveLength(1)
    expect(screen.getByRole('button', { name: WELCOME_NOTICE_COPY.zh.continueLabel })).toBeTruthy()
+    expect(document.activeElement).toBe(screen.getByRole('heading', { name: WELCOME_NOTICE_COPY.zh.title }))
    fireEvent.keyDown(document, { key: 'Escape' })
-    fireEvent.click(dialog.parentElement!.firstElementChild!)
    expect(h.complete).not.toHaveBeenCalled()
-    expect(screen.getByRole('dialog')).toBeTruthy()
+    expect(screen.getByRole('region')).toBeTruthy()
  })

  it('completes only after the acknowledgement write commits', async () => {
    const h = mount()
-    await screen.findByRole('dialog')
+    await screen.findByRole('region')
    fireEvent.click(screen.getByRole('button', { name: WELCOME_NOTICE_COPY.zh.continueLabel }))
    await act(async () => { await Promise.resolve() })
    expect(h.mutate).toHaveBeenCalledOnce()
@@ -87,7 +79,7 @@ describe('WelcomeNotice', () => {
  it('skips itself when this exact version was already acknowledged', async () => {
    const h = mount(WELCOME_NOTICE_VERSION)
    await act(async () => { await h.controller.load() })
-    expect(screen.queryByRole('dialog')).toBeNull()
+    expect(screen.queryByRole('region')).toBeNull()
    expect(h.complete).toHaveBeenCalledOnce()
  })

@@ -95,7 +87,7 @@ describe('WelcomeNotice', () => {
    let resolveWrite!: (value: unknown) => void
    const write = new Promise<unknown>((resolve) => { resolveWrite = resolve })
    const h = mount(undefined, () => write)
-    await screen.findByRole('dialog')
+    await screen.findByRole('region')
    const action = screen.getByRole<HTMLButtonElement>('button', { name: WELCOME_NOTICE_COPY.zh.continueLabel })
    fireEvent.click(action)
    expect(action.disabled).toBe(true)
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-settings/README.md
-README.md: 02d8f0e5fdc169d3a45f59d7b42d873943df2b52
-README.zh.md: 465d57847588e9ccbccc9d9067099773de63c0d0
+README.md: 6d784e906b937e912b56b2e85bfa32866d8cb9b8
+README.zh.md: 3c627c185db3d1d80915f19df56a8fe7257fa828
@@ -2,9 +2,9 @@

 English | [中文](README.zh.md)

-Settings shell plugin: a pure composition face. It occupies `sidebar.settings` with the trigger chrome and modal settings panel, and declares the slots registrants fill: `settings.trigger` / `settings.header` / `settings.close` (chrome content), `settings.section` (one page per feature), and `settings.onboarding` (ordered feature-owned steps on the empty Hero). The shell ships no copy and reads no locale state — all text arrives from registrants (ui-settings-general owns chrome, General, and the product welcome step; features own their sections, rows, and conditional onboarding steps).
+Settings shell plugin: a pure composition face. It occupies `sidebar.settings` with the trigger chrome and modal settings panel, and declares the slots registrants fill: `settings.trigger` / `settings.header` / `settings.close` (chrome content), `settings.section` (one page per feature), and `settings.onboarding` (ordered feature-owned pages in a full-viewport stage). The shell ships no copy and reads no locale state — all text arrives from registrants (ui-settings-general owns chrome, General, and the product notice; features own their sections, rows, and conditional onboarding pages).

-The shell projects the onboarding ledger into ascending order and mounts exactly one step at a time. The active registrant receives its id, `complete()`, and an `openSection(id)` callback; completing or skipping transfers ownership to the next entry. Registrants own durable completion, capability readiness, copy, and mutations, so two independently registered dialogs cannot stack and the shell does not become a second configuration fact source.
+The shell projects the onboarding ledger into ascending order and mounts exactly one page at a time in a body-level stage while marking the underlying app root inert. The active registrant receives its id, `complete()`, and an `openSection(id)` callback; completing or skipping transfers ownership to the next entry. Registrants own durable completion, capability readiness, copy, and mutations, so independently registered flows cannot stack and the shell does not become a second configuration fact source.

 ## Model Experience

@@ -2,9 +2,9 @@

 [English](README.md) | 中文

-设置外壳插件：一个纯组合表层。它以触发控件和模态设置面板占用 `sidebar.settings`，并声明由注册方填充的 slot：`settings.trigger`／`settings.header`／`settings.close`（界面框架内容）、`settings.section`（每项功能一页）和 `settings.onboarding`（由各功能持有、显示在空白 Hero 上的有序步骤）。外壳不自带文案，也不读取 locale 状态：所有文本都来自注册方（ui-settings-general 拥有界面框架、「通用」分区和产品欢迎步骤；各功能拥有各自的分区、行和条件式首次使用引导步骤）。
+设置外壳插件：一个纯组合表层。它以触发控件和模态设置面板占用 `sidebar.settings`，并声明由注册方填充的 slot：`settings.trigger`／`settings.header`／`settings.close`（界面框架内容）、`settings.section`（每项功能一页）和 `settings.onboarding`（由各功能持有、显示在全视口展示层中的有序页面）。外壳不自带文案，也不读取 locale 状态：所有文本都来自注册方（ui-settings-general 拥有界面框架、「通用」分区和产品声明；各功能拥有各自的分区、行和条件式首次使用引导页面）。

-外壳将首次使用引导记录按升序投影，并且每次只挂载一个步骤。当前注册方会收到该条目的 id、`complete()` 和 `openSection(id)` 回调；完成或跳过当前步骤后，所有权转交给下一项。持久化完成状态、能力就绪状态、文案和变更操作均由注册方持有，因此两个独立注册的对话框无法堆叠，外壳也不会成为第二个配置事实来源。
+外壳将首次使用引导记录按升序投影，在 body 层级的展示层中每次只挂载一个页面，同时将下层应用根节点标记为 `inert`。当前注册方会收到该条目的 id、`complete()` 和 `openSection(id)` 回调；完成或跳过当前页面后，所有权转交给下一项。持久化完成状态、能力就绪状态、文案和变更操作均由注册方持有，因此独立注册的流程无法堆叠，外壳也不会成为第二个配置事实来源。

 ## 模型体验

@@ -1,6 +1,6 @@
 {
  "name": "@deepseek-ai/dsh-client-ui-settings",
-  "description": "Settings shell plugin: sidebar trigger, modal panel, feature sections, and root-scoped onboarding overlays",
+  "description": "Settings shell plugin: sidebar trigger, modal panel, feature sections, and an ordered full-page onboarding stage",
  "version": "0.0.1",
  "private": true,
  "type": "module",
@@ -43,7 +43,8 @@
    "@deepseek-ai/dsh-client-ui-slots": "^0.0.1",
    "@deepseek-ai/dsh-invariants": "^0.0.1",
    "cordis": "^4.0.0-rc.7",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
@@ -51,9 +52,11 @@
    "@deepseek-ai/dsh-client-ui-sidebar": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
+    "@types/react-dom": "~18.3.0",
    "@types/react": "~18.3.1",
    "cordis": "^4.0.0-rc.7",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  },
  "files": [
    "lib/index.js",
@@ -209,3 +209,33 @@
  clip: rect(0 0 0 0);
  white-space: nowrap;
 }
+
+/* First-run stage: keep the product top bar visible, then let onboarding own
+   the complete workspace instead of presenting another settings modal. */
+.onboardingOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+}
+
+/* Mask */
+.onboardingMask {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 80px;
+  bottom: 0px;
+  background: rgba(0, 0, 0, 0.24);
+  /* Mask-blur */
+  backdrop-filter: blur(2px);
+}
+
+.onboardingStage {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-layer-1);
+}
@@ -10,6 +10,7 @@
 * sessions-derived empty-Hero fact is active.
 */
 import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import clsx from 'clsx'
 import { IconCloseOutline16, IconDataOutline16, IconSettingsOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SettingsRootComponentProps, SettingsSectionRow } from './contract/slots.ts'
@@ -132,6 +133,14 @@ export function SettingsRoot(props: SettingsRootComponentProps) {
    })
  }, [])

+  useEffect(() => {
+    if (onboardingStep === undefined) return
+    const appRoot = document.getElementById('root')
+    if (appRoot === null) return
+    appRoot.inert = true
+    return () => { appRoot.inert = false }
+  }, [onboardingStep])
+
  return (
    <>
      <button
@@ -152,11 +161,18 @@ export function SettingsRoot(props: SettingsRootComponentProps) {
          onClose={close}
        />
      )}
-      {onboardingStep !== undefined && renderSlot('settings.onboarding', {
-        stepId: onboardingStep.id,
-        complete: () => { completeOnboardingStep(onboardingStep.id) },
-        openSection,
-      }, { only: onboardingStep.id })}
+      {onboardingStep !== undefined && createPortal((
+        <div className={css.onboardingOverlay} role="presentation">
+          <div className={css.onboardingMask} aria-hidden="true" />
+          <div className={css.onboardingStage}>
+            {renderSlot('settings.onboarding', {
+              stepId: onboardingStep.id,
+              complete: () => { completeOnboardingStep(onboardingStep.id) },
+              openSection,
+            }, { only: onboardingStep.id })}
+          </div>
+        </div>
+      ), document.body)}
    </>
  )
 }
@@ -196,6 +196,17 @@ describe('SettingsPanel navigation', () => {
    expect(inactive).toHaveLength(0)
  })

+  it('makes the underlying application inert while onboarding owns the viewport', () => {
+    const appRoot = document.createElement('div')
+    appRoot.id = 'root'
+    document.body.append(appRoot)
+    const { view } = mount()
+    expect(appRoot.inert).toBe(true)
+    view.unmount()
+    expect(appRoot.inert).toBe(false)
+    appRoot.remove()
+  })
+
  it('falls back to the first row when the active entry unregisters', () => {
    const { bump } = mount()
    openPanel()
@@ -1557,12 +1557,18 @@ importers:
      '@types/react':
        specifier: ~18.3.1
        version: 18.3.31
+      '@types/react-dom':
+        specifier: ~18.3.0
+        version: 18.3.7(@types/react@18.3.31)
      cordis:
        specifier: ^4.0.0-rc.7
        version: 4.0.0-rc.7(@cordisjs/plugin-include@1.0.4)(@cordisjs/plugin-loader@1.0.0-rc.5)
      react:
        specifier: ^18.2.0
        version: 18.3.1
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.3.1(react@18.3.1)

  packages/client/ui-settings-general:
    dependencies: