merge master and address permission settings review

2026-07-31 13:24:30 +08:00
parent 62ad488020 c0b2b20b2f
commit 48152a7a1d
89 changed files with 1336 additions and 295 deletions
--- a/packages/client/ui-command/src/client/PopupSelectView.tsx
+++ b/packages/client/ui-command/src/client/PopupSelectView.tsx
@@ -12,7 +12,7 @@
 import { useEffect, useRef } from 'react'
 import { useSyncExternalStore } from 'react'
 import clsx from 'clsx'
-import { IconCheckOutline16, useAnchoredMaxHeight } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconCheckOutline16, RiskConfirmation, useAnchoredMaxHeight } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import { filterOptions } from './popup.ts'
 import type { PopupSelectController } from './popup.ts'
@@ -60,23 +60,24 @@ export function PopupSelectView({ popup, t }: PopupSelectViewProps) {
  // closes the shell before its own handlers run; that click's target then
  // takes focus naturally, so no focusComposer here.
  useEffect(() => {
-    if (!state.open) return
+    if (!state.open || state.confirming !== null) return
    const onPointerDown = (ev: PointerEvent): void => {
      if (cardRef.current !== null && ev.target instanceof Node && cardRef.current.contains(ev.target)) return
      popup.dismiss()
    }
    document.addEventListener('pointerdown', onPointerDown, true)
    return () => { document.removeEventListener('pointerdown', onPointerDown, true) }
-  }, [state.open, popup])
+  }, [state.open, state.confirming, popup])

  // Focus the search input after it mounts (separate effect so the ref is populated).
  useEffect(() => {
-    if (state.open) searchRef.current?.focus()
-  }, [state.open])
+    if (state.open && state.confirming === null) searchRef.current?.focus()
+  }, [state.open, state.confirming])

  if (!state.open) return null

  const rows = filterOptions(state.options, state.search)
+  const confirmation = state.confirming?.confirmation

  const onKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>): void => {
    // ArrowLeft/ArrowRight fall through on purpose: the search input keeps
@@ -103,55 +104,73 @@ export function PopupSelectView({ popup, t }: PopupSelectViewProps) {
  }

  return (
-    <div
-      ref={cardRef}
-      className={css.card}
-      style={{ maxHeight }}
-      aria-label={t('overlay.aria', { command: String(state.command) })}
-      onKeyDown={onKeyDown}
-    >
-      <input
-        ref={searchRef}
-        className={css.search}
-        type="text"
-        placeholder={t('search.placeholder')}
-        aria-label={t('search.aria')}
-        value={state.search}
-        readOnly={state.submitting}
-        onChange={(ev) => { popup.setSearch(ev.currentTarget.value) }}
-      />
-      {state.error !== null && (
-        <div className={css.error} role="alert">
-          <span className={css.errorText}>{state.error}</span>
-          {state.status === 'failed' && (
-            <button type="button" className={css.retry} onClick={() => { popup.retry() }}>{t('retry')}</button>
+    <>
+      {state.confirming === null && (
+        <div
+          ref={cardRef}
+          className={css.card}
+          style={{ maxHeight }}
+          aria-label={t('overlay.aria', { command: String(state.command) })}
+          onKeyDown={onKeyDown}
+        >
+          <input
+            ref={searchRef}
+            className={css.search}
+            type="text"
+            placeholder={t('search.placeholder')}
+            aria-label={t('search.aria')}
+            value={state.search}
+            readOnly={state.submitting}
+            onChange={(ev) => { popup.setSearch(ev.currentTarget.value) }}
+          />
+          {state.error !== null && (
+            <div className={css.error} role="alert">
+              <span className={css.errorText}>{state.error}</span>
+              {state.status === 'failed' && (
+                <button type="button" className={css.retry} onClick={() => { popup.retry() }}>{t('retry')}</button>
+              )}
+            </div>
+          )}
+          {state.status === 'pending' && <div className={css.status}>{t('status.loading')}</div>}
+          {state.submitting && <div className={css.status}>{t('status.applying')}</div>}
+          {state.status === 'ready' && rows.length === 0 && <div className={css.status}>{t('status.empty')}</div>}
+          {state.status === 'ready' && (
+            <div role="listbox" aria-label={t('listbox.aria', { command: String(state.command) })} className={css.viewport}>
+              {rows.map((option, index) => (
+                <div
+                  key={option.id}
+                  role="option"
+                  aria-selected={index === state.active}
+                  className={clsx(css.row, index === state.active && css.rowActive)}
+                  // mousedown would race the document capture listener; the shell
+                  // owns focus anyway, so a plain click (inside the card → no
+                  // dismiss) works.
+                  onClick={() => { void popup.select(index) }}
+                  onMouseEnter={() => { popup.highlight(index) }}
+                >
+                  <span className={css.label}>{option.label}</span>
+                  {option.detail !== undefined && <span className={css.detail}>{option.detail}</span>}
+                  {option.active === true && <span className={css.check}><IconCheckOutline16 /></span>}
+                </div>
+              ))}
+            </div>
          )}
        </div>
      )}
-      {state.status === 'pending' && <div className={css.status}>{t('status.loading')}</div>}
-      {state.submitting && <div className={css.status}>{t('status.applying')}</div>}
-      {state.status === 'ready' && rows.length === 0 && <div className={css.status}>{t('status.empty')}</div>}
-      {state.status === 'ready' && (
-        <div role="listbox" aria-label={t('listbox.aria', { command: String(state.command) })} className={css.viewport}>
-          {rows.map((option, index) => (
-            <div
-              key={option.id}
-              role="option"
-              aria-selected={index === state.active}
-              className={clsx(css.row, index === state.active && css.rowActive)}
-              // mousedown would race the document capture listener; the shell
-              // owns focus anyway, so a plain click (inside the card → no
-              // dismiss) works.
-              onClick={() => { void popup.select(index) }}
-              onMouseEnter={() => { popup.highlight(index) }}
-            >
-              <span className={css.label}>{option.label}</span>
-              {option.detail !== undefined && <span className={css.detail}>{option.detail}</span>}
-              {option.active === true && <span className={css.check}><IconCheckOutline16 /></span>}
-            </div>
-          ))}
-        </div>
+      {confirmation !== undefined && (
+        <RiskConfirmation
+          open
+          title={confirmation.title}
+          description={confirmation.description}
+          acknowledgeLabel={confirmation.acknowledgeLabel}
+          cancelLabel={confirmation.cancelLabel}
+          confirmLabel={confirmation.confirmLabel}
+          acknowledged={state.acknowledged}
+          onAcknowledgedChange={(value) => { popup.acknowledge(value) }}
+          onCancel={() => { popup.cancelConfirmation() }}
+          onConfirm={() => { void popup.confirm() }}
+        />
      )}
-    </div>
+    </>
  )
 }
--- a/packages/client/ui-command/src/client/contract.ts
+++ b/packages/client/ui-command/src/client/contract.ts
@@ -6,12 +6,23 @@
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ClientSessionContext } from '@deepseek-ai/dsh-client-ui-slash/client'

+/** Copy for an option that must be acknowledged before onSelect can run. */
+export interface SelectConfirmation {
+  readonly title: string
+  readonly description: string
+  readonly acknowledgeLabel: string
+  readonly cancelLabel: string
+  readonly confirmLabel: string
+}
+
 /** One option row of a popupSelect shell. */
 export interface SelectOption {
  readonly id: string
  readonly label: string
  readonly detail?: string
  readonly active?: boolean
+  /** Optional in-page risk gate owned by the shared popup shell. */
+  readonly confirmation?: SelectConfirmation
 }

 /**
--- a/packages/client/ui-command/src/client/index.ts
+++ b/packages/client/ui-command/src/client/index.ts
@@ -24,7 +24,7 @@ export { filterOptions, PopupSelectController } from './popup.ts'
 export type { PopupSelectDeps, PopupSpec, PopupState, TokenSegment } from './popup.ts'
 export type { PopupSelectInjected, PopupSelectViewProps } from './PopupSelectView.tsx'
 export type {
-  CommandContribution, CommandDecoration, CommandServiceContract, CommandUiSpec, SelectOption,
+  CommandContribution, CommandDecoration, CommandServiceContract, CommandUiSpec, SelectConfirmation, SelectOption,
 } from './contract.ts'
 export type { CommandKey } from './locales.ts'

--- a/packages/client/ui-command/src/client/popup.ts
+++ b/packages/client/ui-command/src/client/popup.ts
@@ -67,12 +67,17 @@ export interface PopupState {
  readonly active: number
  /** A select() settlement is in flight: further select/search/highlight no-op until it settles. */
  readonly submitting: boolean
+  /** Option waiting for explicit risk acknowledgement; null during normal selection. */
+  readonly confirming: SelectOption | null
+  /** Caller-controlled checkbox state for the pending confirmation. */
+  readonly acknowledged: boolean
  /** Surfaced settlement failure (options load or onSelect); null when none. */
  readonly error: string | null
 }

 const CLOSED: PopupState = {
-  open: false, command: null, status: 'pending', options: [], search: '', active: 0, submitting: false, error: null,
+  open: false, command: null, status: 'pending', options: [], search: '', active: 0,
+  submitting: false, confirming: null, acknowledged: false, error: null,
 }

 /**
@@ -166,7 +171,7 @@ export class PopupSelectController<TCtx = unknown> {
   */
  setSearch(search: string): void {
    const s = this.state.getSnapshot()
-    if (!s.open || s.submitting || search === s.search) return
+    if (!s.open || s.submitting || s.confirming !== null || search === s.search) return
    this.state.set({ ...s, search, active: 0 })
  }

@@ -177,7 +182,7 @@ export class PopupSelectController<TCtx = unknown> {
   */
  move(dir: 1 | -1): void {
    const s = this.state.getSnapshot()
-    if (!s.open || s.status !== 'ready' || s.submitting) return
+    if (!s.open || s.status !== 'ready' || s.submitting || s.confirming !== null) return
    const rows = filterOptions(s.options, s.search)
    if (rows.length === 0) return
    const active = (s.active + dir + rows.length) % rows.length
@@ -191,7 +196,7 @@ export class PopupSelectController<TCtx = unknown> {
   */
  highlight(index: number): void {
    const s = this.state.getSnapshot()
-    if (!s.open || s.status !== 'ready' || s.submitting) return
+    if (!s.open || s.status !== 'ready' || s.submitting || s.confirming !== null) return
    if (index < 0 || index >= filterOptions(s.options, s.search).length || index === s.active) return
    this.state.set({ ...s, active: index })
  }
@@ -209,10 +214,46 @@ export class PopupSelectController<TCtx = unknown> {
  async select(index: number): Promise<void> {
    const binding = this.binding
    const s = this.state.getSnapshot()
-    if (binding === null || !s.open || s.status !== 'ready' || s.submitting) return
+    if (binding === null || !s.open || s.status !== 'ready' || s.submitting || s.confirming !== null) return
    const option = filterOptions(s.options, s.search)[index]
    if (option === undefined) return
-    this.state.set({ ...s, submitting: true, error: null })
+    if (option.confirmation !== undefined) {
+      this.state.set({ ...s, confirming: option, acknowledged: false, error: null })
+      return
+    }
+    await this.settle(binding, option)
+  }
+
+  /**
+   * Update the explicit checkbox for the currently pending risk gate.
+   * @param acknowledged - whether the user has acknowledged the displayed risk.
+   */
+  acknowledge(acknowledged: boolean): void {
+    const s = this.state.getSnapshot()
+    if (!s.open || s.submitting || s.confirming === null || s.acknowledged === acknowledged) return
+    this.state.set({ ...s, acknowledged })
+  }
+
+  /** Cancel only the risk gate and return to the still-open option picker. */
+  cancelConfirmation(): void {
+    const s = this.state.getSnapshot()
+    if (!s.open || s.submitting || s.confirming === null) return
+    this.state.set({ ...s, confirming: null, acknowledged: false })
+  }
+
+  /** Settle the gated option only after the checkbox is acknowledged. */
+  async confirm(): Promise<void> {
+    const binding = this.binding
+    const s = this.state.getSnapshot()
+    if (binding === null || !s.open || s.submitting || s.confirming === null || !s.acknowledged) return
+    await this.settle(binding, s.confirming)
+  }
+
+  /** Run the business settlement for an already admitted option. */
+  private async settle(binding: OpenBinding<TCtx>, option: SelectOption): Promise<void> {
+    const s = this.state.getSnapshot()
+    if (this.binding !== binding || !s.open || s.submitting) return
+    this.state.set({ ...s, submitting: true, confirming: null, acknowledged: false, error: null })
    try {
      await binding.spec.onSelect(option, binding.context)
    } catch (error) {
--- a/packages/client/ui-command/tests/popup-view.spec.tsx
+++ b/packages/client/ui-command/tests/popup-view.spec.tsx
@@ -38,6 +38,17 @@ const OPTIONS: SelectOption[] = [
  { id: 'light', label: 'Light', active: true },
  { id: 'sepia', label: 'Sepia', detail: 'warm' },
 ]
+const GATED: SelectOption = {
+  id: 'full',
+  label: 'Full access',
+  confirmation: {
+    title: 'Enable Full access?',
+    description: 'Sensitive operations.',
+    acknowledgeLabel: 'I understand the risks',
+    cancelLabel: 'Cancel',
+    confirmLabel: 'Enable Full access',
+  },
+}

 const SEGMENT: TokenSegment = { via: 'enter', token: '/theme' }

@@ -149,6 +160,37 @@ describe('PopupSelectView', () => {
    expect(view.container.childElementCount).toBe(0)
  })

+  it('renders a gated option as an in-page modal and requires the checkbox before onSelect', async () => {
+    const onSelect = vi.fn()
+    const { popup, consume } = await mountOpen({
+      options: () => Promise.resolve([GATED]),
+      onSelect,
+    })
+    await act(async () => { fireEvent.click(screen.getByRole('option', { name: 'Full access' })) })
+    expect(screen.queryByLabelText('/theme 选项')).toBeNull()
+    expect(screen.getByRole('dialog', { name: 'Enable Full access?' })).toBeTruthy()
+    const enable = screen.getByRole('button', { name: 'Enable Full access' }) as HTMLButtonElement
+    expect(enable.disabled).toBe(true)
+    expect(onSelect).not.toHaveBeenCalled()
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'I understand the risks' }))
+    expect(enable.disabled).toBe(false)
+    await act(async () => { fireEvent.click(enable) })
+    expect(onSelect).toHaveBeenCalledExactlyOnceWith(GATED, 'ctx-A')
+    expect(consume).toHaveBeenCalledExactlyOnceWith(SEGMENT)
+    expect(popup.state.getSnapshot().open).toBe(false)
+  })
+
+  it('canceling a gated option returns to the picker with acknowledgement reset', async () => {
+    await mountOpen({ options: () => Promise.resolve([GATED]) })
+    await act(async () => { fireEvent.click(screen.getByRole('option', { name: 'Full access' })) })
+    fireEvent.click(screen.getByRole('checkbox'))
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(screen.getByLabelText('/theme 选项')).toBeTruthy()
+    await act(async () => { fireEvent.click(screen.getByRole('option', { name: 'Full access' })) })
+    expect(screen.getByRole<HTMLInputElement>('checkbox').checked).toBe(false)
+  })
+
  it('submitting shows pending, locks the search input, and further Enter/click no-op', async () => {
    let release!: () => void
    const onSelect = vi.fn(() => new Promise<void>((resolve) => { release = resolve }))
--- a/packages/client/ui-command/tests/popup.spec.ts
+++ b/packages/client/ui-command/tests/popup.spec.ts
@@ -19,6 +19,17 @@ const OPTIONS: SelectOption[] = [
  { id: 'light', label: 'Light', active: true },
  { id: 'sepia', label: 'Sepia', detail: 'warm' },
 ]
+const GATED: SelectOption = {
+  id: 'full',
+  label: 'Full access',
+  confirmation: {
+    title: 'Enable Full access?',
+    description: 'Sensitive operations.',
+    acknowledgeLabel: 'I understand',
+    cancelLabel: 'Cancel',
+    confirmLabel: 'Enable Full access',
+  },
+}

 const SEGMENT: TokenSegment = { via: 'enter', token: '/theme' }

@@ -200,6 +211,38 @@ describe('search / move / highlight over the filtered list', () => {
 })

 describe('select', () => {
+  it('gates a confirmed option until acknowledgement, then settles through the original binding', async () => {
+    const onSelect = vi.fn()
+    const deps = makeDeps()
+    const { popup } = await readyPopup({ options: () => Promise.resolve([GATED]), onSelect }, deps)
+    await popup.select(0)
+    expect(popup.state.getSnapshot()).toMatchObject({
+      open: true, confirming: GATED, acknowledged: false, submitting: false,
+    })
+    expect(onSelect).not.toHaveBeenCalled()
+    await popup.confirm()
+    expect(onSelect).not.toHaveBeenCalled()
+    popup.acknowledge(true)
+    await popup.confirm()
+    expect(onSelect).toHaveBeenCalledExactlyOnceWith(GATED, CTX_A)
+    expect(deps.consume).toHaveBeenCalledExactlyOnceWith(SEGMENT)
+    expect(popup.state.getSnapshot().open).toBe(false)
+  })
+
+  it('cancels a confirmation back to the picker without selecting or consuming', async () => {
+    const onSelect = vi.fn()
+    const deps = makeDeps()
+    const { popup } = await readyPopup({ options: () => Promise.resolve([GATED]), onSelect }, deps)
+    await popup.select(0)
+    popup.acknowledge(true)
+    popup.cancelConfirmation()
+    expect(popup.state.getSnapshot()).toMatchObject({
+      open: true, confirming: null, acknowledged: false, submitting: false,
+    })
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(deps.consume).not.toHaveBeenCalled()
+  })
+
  it('runs onSelect with the filtered option and the open-time context, consumes, closes, refocuses', async () => {
    const seen: Array<{ option: SelectOption; context: Ctx }> = []
    const deps = makeDeps()
--- a/packages/client/ui-conversation/README.i18n.yaml
+++ b/packages/client/ui-conversation/README.i18n.yaml
@@ -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-conversation/README.md
-README.md: 2f3e545bfd7d29dbdbb0e23d833c2c19ee685a9d
-README.zh.md: 12c043f78a242730a6f1e622df997ec5cbacc8fd
+README.md: 3e0bca6610e5503e4c2c1f9fe5ad7a07bbcbdd2a
+README.zh.md: 1606461fc1060825133bb0c3f3f6381bda3926ad
--- a/packages/client/ui-conversation/README.md
+++ b/packages/client/ui-conversation/README.md
@@ -8,7 +8,7 @@ The resident conversation shell survives no-session and session transitions. Wit

 The view ring IS a slot: the conversation registration declares the `'conversation.view'` list slot (session scope) in its `children` table, ConversationRoot renders the active entry through its renderSlot share (`only: <active id>`), and view tabs project from the ring ledger's registration options (`id`/`order`/`label`). The chat view is this package's own ring entry; other plugins (ui-trajectory) contribute tabs through plain `ctx.slots.register` — the former package-local view registry (`registerView`/`ViewEntry`/`ConversationViewMap` and the chrome attachment table) is retired, with per-view chrome dissolved into the view components themselves.

-Approvals take over the composer through the chain this package declares: `ApprovalPanel` registers as a selector-routed `'conversation.composer'` entry (the ui-question pattern) and occupies the composer in place of the InputBar while an approval wait is pending (amber strip, justification headline, paired command line from the running call's args, one-shot refuse/allow). The `PendingApproval` domain face in `contract/slots.ts` owns the wire encoding — the `ApprovalResponsePayload` value with the audit correlation — over the runtime's `PendingWait` carrier; the broadcast `approval/resolved` frame settles the wait and restores the composer. The sidebar mirrors the blocked state through the manager-tracked `waitingApproval` list bit (lit for uninstantiated sessions too), which outranks the running ring until the question resolves. Pending waits leave the message flow entirely: questions (ui-question) and approvals (ApprovalPanel) both answer through the composer takeover, so no display-only placeholder card remains. The composer's bottom-row Access seat mounts `PermissionSelect`, fed by the host-computed `permissions` projection through the standard-kit `useProjection` (key absence hides the chip); the chip opens a Menu-primitive dropdown whose kebab-case preset names render as title-case labels (the `/permission` popup's display transform twin), and a pick submits the `/permission <preset>` command line through the bar's injected `command` callback.
+Approvals take over the composer through the chain this package declares: `ApprovalPanel` registers as a selector-routed `'conversation.composer'` entry (the ui-question pattern) and occupies the composer in place of the InputBar while an approval wait is pending (amber strip, justification headline, paired command line from the running call's args, one-shot refuse/allow). The `PendingApproval` domain face in `contract/slots.ts` owns the wire encoding — the `ApprovalResponsePayload` value with the audit correlation — over the runtime's `PendingWait` carrier; the broadcast `approval/resolved` frame settles the wait and restores the composer. The sidebar mirrors the blocked state through the manager-tracked `waitingApproval` list bit (lit for uninstantiated sessions too), which outranks the running ring until the question resolves. Pending waits leave the message flow entirely: questions (ui-question) and approvals (ApprovalPanel) both answer through the composer takeover, so no display-only placeholder card remains. The composer's bottom-row Access seat mounts `PermissionSelect`, fed by the host-computed `permissions` projection through the standard-kit `useProjection` (key absence hides the chip); the chip opens a Menu-primitive dropdown whose kebab-case preset names render as title-case labels. Safe preset picks submit `/permission <preset>` immediately through the bar's injected `command` callback, while `danger-full-access` is presented as `Full access` and first opens an in-page Modal risk confirmation. The enabling action stays disabled until the user checks the acknowledgement; cancel, Escape, close, and mask click submit nothing.

 Logged non-user messages render as a default-collapsed `上下文注入` disclosure. It shares the Tool calls header geometry and interaction with `ToolRow` through the package-internal `DisclosureRow`, while retaining context semantics: the expanded 141px scrollport shows bounded inline JSON for both `content` and `source`, and no tool state, summary, or keyed toolview dispatch is synthesized ([decision](../../../.agents/notes/implemented/feature/2026-07-30-web-context-injection-disclosure.md)).

--- a/packages/client/ui-conversation/README.zh.md
+++ b/packages/client/ui-conversation/README.zh.md
@@ -20,7 +20,7 @@

 工具行同样是 slot：独立工具环（`ToolViewRegistry`／`ctx.toolviews`／outlet）已经退役。聊天配置项声明键控的 `'conversation.chat.toolview'` 空位（Session scope；key 空间在运行时开放）；其渲染点逐行通过 `entryKey: toolName` 分发，并以 `GenericToolCard` 作为调用点 `fallback`。owner 载荷是统一的 `ToolRowOwnerProps`（`callId`／`toolName`／`block`／`openFile`），`ToolRowProps` 则预先将其与 Session 标准工具包组合。注册方只是普通插件：`ctx.slots.register({ name: 'conversation.chat.toolview', key: '<tool>', inject? }, Row)`，以 `inject: ['slots', 'conversation']` 作为加载顺序 seam（apply 在聊天注册后挂载 ConversationService，因此服务存在即可保证 slot 已声明）；Session 区分在组件内部完成（`useSessions` 读取 `parentId`，bash 示例是第三方姿态的范例）。Trajectory/waterfall 工具视图 slot 共享此形状，并随各自的渲染点落地（RendersCheck 会拒绝没有任何渲染方的声明）。

-审批经由本包声明的链接管编辑器：`ApprovalPanel` 注册为按选择器路由的 `'conversation.composer'` 配置项（ui-question 模式），在审批等待未决期间取代 InputBar 占据编辑器（琥珀色条、理由标题、来自运行中调用参数的配对命令行、一次性的拒绝／允许）。`contract/slots.ts` 中的 `PendingApproval` 领域面在运行时 `PendingWait` 载体之上拥有 wire 编码——带审计关联的 `ApprovalResponsePayload` 值；广播的 `approval/resolved` 帧使等待落定并恢复编辑器。侧边栏通过 manager 跟踪的 `waitingApproval` 列表位（未实例化会话同样点亮）镜像该阻塞状态，其优先级高于运行中圆环，直至问题解决。未决等待完全离开消息流：问题（ui-question）与审批（ApprovalPanel）都经编辑器接管作答，不再保留只读占位卡。编辑器底行的 Access 席位挂载 `PermissionSelect`，由 host 计算的 `permissions` 投影经标准工具包 `useProjection` 供数（key 缺席即隐藏 chip）；chip 打开 Menu 原语下拉，kebab-case 预设名渲染为 Title Case 标签（与 `/permission` popup 的显示变换孪生），选中会经由输入栏注入的 `command` 回调提交 `/permission <preset>` 命令行。
+审批经由本包声明的链接管编辑器：`ApprovalPanel` 注册为按选择器路由的 `'conversation.composer'` 配置项（ui-question 模式），在审批等待未决期间取代 InputBar 占据编辑器（琥珀色条、理由标题、来自运行中调用参数的配对命令行、一次性的拒绝／允许）。`contract/slots.ts` 中的 `PendingApproval` 领域面在运行时 `PendingWait` 载体之上拥有 wire 编码——带审计关联的 `ApprovalResponsePayload` 值；广播的 `approval/resolved` 帧使等待落定并恢复编辑器。侧边栏通过 manager 跟踪的 `waitingApproval` 列表位（未实例化会话同样点亮）镜像该阻塞状态，其优先级高于运行中圆环，直至问题解决。未决等待完全离开消息流：问题（ui-question）与审批（ApprovalPanel）都经编辑器接管作答，不再保留只读占位卡。编辑器底行的 Access 席位挂载 `PermissionSelect`，由 host 计算的 `permissions` 投影经标准工具包 `useProjection` 供数（key 缺席即隐藏 chip）；chip 打开 Menu 原语下拉，普通安全预设会立即经输入栏注入的 `command` 回调提交 `/permission <preset>`，而 `danger-full-access` 在界面中显示为 `Full access`，选择后先打开页面内的 Modal 风险确认。用户勾选确认项前启用按钮始终不可用；取消、Escape、关闭按钮与点击遮罩都不会提交命令。

 todo 两个面就是在该形状上的两个注册项，都是普通注册方插件，`inject: ['slots', 'conversation']`。`TodoRow` 占用 `'conversation.chat.toolview'` 的 `todo_write` key，摘要该次调用「试图写入」的内容（从其 args 解析出 `<已完成>/<总数> 已完成 · <进行中条目>`；模型 JSON 残缺或形状不对时回落到通用摘要；非 ok 执行状态保留通用状态点，使被取消的调用绝不读成一次已完成的更新）。`TodoDock` 以 `order: -1` 占用 `'conversation.input.dock'` 列表 slot（位于队列行之上），是计划条：它经 `useProjection` 读取 host 计算的 `todos` 投影（站立计划：其后没有更晚 `turn/start` 的最近一次 `todo/write`）并渲染 `TodoPanel`，后者接收纯列表，在列表为空时自我隐藏；列表非空时面板初始折叠，表头显示标题加 `"<已完成>/<总数> tasks · <n> in progress"`（状态图标为 figma 的勾选／进行中／虚线未开始一组）。选取由 dock 适配器负责，因此面板保持为其 props 的纯函数；站立列表放在此处而非行内，行才能保持单行。输入区 composer 链隐藏的一切（例如 ui-question 对 `conversation.composer` 的接管）也会隐藏整个 dock，包括这条计划条。

--- a/packages/client/ui-conversation/src/client/locales.ts
+++ b/packages/client/ui-conversation/src/client/locales.ts
@@ -23,6 +23,11 @@ export const zh = {
  'input.stop': '停止生成',
  'input.send': '发送消息',
  'input.accessMode': '访问模式，当前：{name}',
+  'access.confirm.title': '确认启用 Full access？',
+  'access.confirm.description': '启用 Full access 后，agent 将减少确认步骤，并且可以直接执行更多操作，包括敏感操作、文件修改或外部命令。仅建议在你信任当前任务时使用。',
+  'access.confirm.acknowledge': '我已了解风险，并愿意继续',
+  'access.confirm.cancel': '取消',
+  'access.confirm.enable': '启用 Full access',
  'hero.headline': '开始构建吧',
  'hero.chooseWorkspace': '选择工作区',
  'session.hierarchy': '会话层级',
@@ -112,6 +117,11 @@ export const en = {
  'input.stop': 'Stop generating',
  'input.send': 'Send message',
  'input.accessMode': 'Access mode, current: {name}',
+  'access.confirm.title': 'Enable Full access?',
+  'access.confirm.description': 'Full access reduces confirmation steps and lets the agent perform more actions directly, including sensitive operations, file changes, or external commands. Only use it when you trust the current task.',
+  'access.confirm.acknowledge': 'I understand the risks and want to continue',
+  'access.confirm.cancel': 'Cancel',
+  'access.confirm.enable': 'Enable Full access',
  'hero.headline': 'Let\'s start building',
  'hero.chooseWorkspace': 'Choose workspace',
  'session.hierarchy': 'Session hierarchy',
--- a/packages/client/ui-conversation/src/client/queue/QueueDock.module.css
+++ b/packages/client/ui-conversation/src/client/queue/QueueDock.module.css
@@ -1,10 +1,21 @@
-/* Figma .FileContainerText 1:791: 776px wrapper around the inset 752px panel. */
+/* Figma .FileContainerText 1:791: the wrapper uses the shared dock inset
+   inside the composer card around the inset panel. */

 .dock {
  box-sizing: border-box;
  flex: none;
-  width: 100%;
-  max-width: 776px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
  /* Flex gap still applies after this item; subtract it together with the
     design's overlap so the later composer paints over the queue edge. */
  margin: 0 auto calc(
--- a/packages/client/ui-conversation/src/client/queue/QueueDock.tsx
+++ b/packages/client/ui-conversation/src/client/queue/QueueDock.tsx
@@ -73,7 +73,7 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
  }

  return (
-    <div className={css.dock}>
+    <div className={css.dock} data-queue-dock="">
      <div className={css.panel}>
        {queue.length > 1 && (
          <button
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
@@ -133,6 +133,12 @@
  --dsh-composer-stack-gap: 6px;
  --dsh-queue-composer-overlap: 5px;

+  /* InputBar and dock registrants derive their horizontal geometry from the
+     same card width, outer clearance, and dock inset. */
+  --dsh-composer-card-max-width: 800px;
+  --dsh-composer-side-clearance: 32px;
+  --dsh-composer-dock-inset: 12px;
+
  display: flex;
  flex-direction: column;
  gap: var(--dsh-composer-stack-gap);
--- a/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css
@@ -11,7 +11,7 @@
  padding: 0 24px;
 }

-/* Cap matches InputBar card width (800). Glow may paint past the sides. */
+/* Cap matches the InputBar card. Glow may paint past the sides. */
 .stack {
  display: flex;
  flex-direction: column;
@@ -19,7 +19,7 @@
  /* figma 75:8208: 12 between title block / workspace / card. */
  gap: 12px;
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
  overflow: visible;
 }

--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
@@ -23,7 +23,7 @@
  /* figma Input_Bottom: pad L32/R32/B8; the bottom gradient mask is owned by
     the chat scroller. No top pad: the composer stack's gap owns the space
     above; error/status strips still carry their own margin. */
-  padding: 0 32px 8px;
+  padding: 0 var(--dsh-composer-side-clearance) 8px;
 }

 .hero {
@@ -33,7 +33,7 @@
 .error,
 .status {
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 8px;
@@ -48,7 +48,7 @@

 .notice {
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 8px;
@@ -69,6 +69,7 @@
 }

 .card {
+  box-sizing: border-box;
  position: relative; /* overlay anchor positioning context */
  display: flex;
  flex-direction: column;
@@ -76,7 +77,7 @@
     top pad on the card before .InputText. */
  gap: 12px;
  width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
  padding-top: 10px;
  /* Input stroke: black/0.10 light, white/0.06 dark (figma darkmode note says
     the input border is one notch weaker than buttons) — exactly the
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
@@ -279,7 +279,7 @@ export function InputBar({
  // or while the command face is absent with the session).
  const accessSelect: ReactNode = command === undefined
    ? null
-    : <PermissionSelect value={permissions} locked={locked} command={command} t={t} />
+    : <PermissionSelect key={sessionId} value={permissions} locked={locked} command={command} t={t} />

  // Mirror-layer decorations: a visible backdrop with transparent text. The
  // claim token highlights through behind the textarea glyphs; each U+FFFC
--- a/packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx
@@ -1,21 +1,28 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
-import { Menu } from '@deepseek-ai/dsh-client-ui-primitives'
+import { Menu, RiskConfirmation } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ComposerBarProps } from '../contract/slots.ts'
 import css from './PermissionSelect.module.css'

+const FULL_ACCESS = 'danger-full-access'
+
 /**
 * Display transform: kebab-case machine names render as title-case labels
 * (`workspace-write` → `Workspace Write`); non-kebab host-configured names
- * pass through. Twin of the /permission popup's (client ui-permission) — the
- * two permission surfaces must show the same text.
+ * pass through. Full access intentionally overrides the machine-name
+ * transform so both permission surfaces use the product label `Full access`;
+ * the warning body remains locale-aware.
 */
 function displayName(name: string): string {
  if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name)) return name
  return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
 }

+function optionLabel(option: PermissionSelectValue['options'][number]): string {
+  return option.value === FULL_ACCESS ? 'Full access' : displayName(option.name)
+}
+
 export interface PermissionSelectProps {
  value: PermissionSelectValue | undefined
  locked: boolean
@@ -27,49 +34,94 @@ export interface PermissionSelectProps {
 export function PermissionSelect({ value, locked, command, t }: PermissionSelectProps) {
  const [pick, setPick] = useState<string | null>(null)
  const [open, setOpen] = useState(false)
+  const [confirmation, setConfirmation] = useState<string | null>(null)
+  const [acknowledged, setAcknowledged] = useState(false)
+
+  useEffect(() => {
+    if (!locked && value !== undefined) return
+    setOpen(false)
+    setAcknowledged(false)
+    setConfirmation(null)
+  }, [locked, value])

  if (value === undefined) return null

  const currentValue = pick ?? value.currentValue
  const current = value.options.find(option => option.value === currentValue)
-  const busy = pick !== null
+  const busy = pick !== null || confirmation !== null

  const items: MenuEntry[] = value.options
    .filter(o => o.value !== 'custom')
-    .map(option => ({ id: option.value, label: displayName(option.name) }))
+    .map(option => ({ id: option.value, label: optionLabel(option) }))

-  const choose = (id: string): void => {
-    setOpen(false)
-    if (id === value.currentValue) return
+  const submit = (id: string): void => {
    setPick(id)
    void command(`/permission ${id}`)
      .catch(() => false)
      .then(() => { setPick(null) })
  }

+  const choose = (id: string): void => {
+    setOpen(false)
+    if (id === value.currentValue) return
+    if (id === FULL_ACCESS) {
+      setAcknowledged(false)
+      setConfirmation(id)
+      return
+    }
+    submit(id)
+  }
+
+  const closeConfirmation = (): void => {
+    setAcknowledged(false)
+    setConfirmation(null)
+  }
+
+  const confirmFullAccess = (): void => {
+    if (locked || !acknowledged || confirmation === null) return
+    const id = confirmation
+    closeConfirmation()
+    submit(id)
+  }
+
  return (
-    <Menu
-      open={open}
-      items={items}
-      selectedId={currentValue}
-      onSelect={choose}
-      onClose={() => { setOpen(false) }}
-      side="top"
-      anchor={
-        <button
-          type="button"
-          className={css.trigger}
-          aria-label={t('input.accessMode', { name: displayName(current?.name ?? currentValue) })}
-          title={current?.description}
-          disabled={locked || busy}
-          onClick={() => { setOpen(!open) }}
-        >
-          <span className={css.triggerLabel}>{displayName(current?.name ?? currentValue)}</span>
-          <svg className={css.chevron} viewBox="0 0 12 12" width="12" height="12" aria-hidden>
-            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
-          </svg>
-        </button>
-      }
-    />
+    <>
+      <Menu
+        open={open}
+        items={items}
+        selectedId={currentValue}
+        onSelect={choose}
+        onClose={() => { setOpen(false) }}
+        side="top"
+        anchor={
+          <button
+            type="button"
+            className={css.trigger}
+            aria-label={t('input.accessMode', { name: current === undefined ? displayName(currentValue) : optionLabel(current) })}
+            title={current?.description}
+            disabled={locked || busy}
+            onClick={() => { setOpen(!open) }}
+          >
+            <span className={css.triggerLabel}>{current === undefined ? displayName(currentValue) : optionLabel(current)}</span>
+            <svg className={css.chevron} viewBox="0 0 12 12" width="12" height="12" aria-hidden>
+              <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+            </svg>
+          </button>
+        }
+      />
+      <RiskConfirmation
+        open={confirmation !== null}
+        title={t('access.confirm.title')}
+        description={t('access.confirm.description')}
+        acknowledgeLabel={t('access.confirm.acknowledge')}
+        cancelLabel={t('access.confirm.cancel')}
+        confirmLabel={t('access.confirm.enable')}
+        acknowledged={acknowledged}
+        disabled={locked}
+        onAcknowledgedChange={setAcknowledged}
+        onCancel={closeConfirmation}
+        onConfirm={confirmFullAccess}
+      />
+    </>
  )
 }
--- a/packages/client/ui-conversation/src/client/skeleton/TodoPanel.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/TodoPanel.module.css
@@ -1,13 +1,24 @@
 /* Todo strip in the composer context stack (Figma 9:959): tip surface,
-   14px radius, status icons + secondary item labels. */
+   14px radius, status icons + secondary item labels. It shares the composer
+   card geometry and adds the dock inset on both sides. */

 .root {
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
  margin: 0 auto;
-  width: calc(100% - 88px);
-  max-width: 752px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
  border: 1px solid var(--dsw-alias-border-l1);
  border-radius: 14px;
  background: var(--dsw-specific-tip);
--- a/packages/client/ui-conversation/tests/input-bar.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-bar.spec.tsx
@@ -46,6 +46,7 @@ interface BenchOptions {
  variant?: 'hero' | 'composer'
  placeholder?: string
  t?: InputBarProps['t']
+  command?: (line: string) => Promise<boolean>
  accessory?: React.ReactNode
  overlay?: React.ReactNode
  leftItems?: React.ReactNode
@@ -108,7 +109,7 @@ function bench(over?: BenchOptions) {
    useLexicon: bindSnapshotSelector(shell.lexicon),
    useMenuLauncher: bindSnapshotSelector(menuLauncher),
    stop,
-    command: () => Promise.resolve(true),
+    command: over?.command ?? (() => Promise.resolve(true)),
    // Mirrors the real lookup chain (conversation namespace, then common).
    t: over?.t ?? makeTranslate(zh, commonZh),
    renderSlot,
@@ -467,7 +468,35 @@ describe('command launcher chrome and control seats', () => {
    expect(launcher.getAttribute('aria-expanded')).toBe('true')
  })

-  it('the Access chip renders the projection value and submits /permission on pick', async () => {
+  it('the Access chip renders the projection value and submits a non-Full-access pick directly', async () => {
+    const command = vi.fn(() => Promise.resolve(true))
+    const permissions = {
+      options: [
+        { value: 'read-only', name: 'read-only' },
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'read-only',
+    }
+    const { view } = bench({ permissions, command })
+    const trigger = view.getByLabelText(/^访问模式/) as HTMLButtonElement
+    // Title-case display is presentation only; the menu ids stay machine names.
+    expect(trigger.textContent).toBe('Read Only')
+    fireEvent.click(trigger)
+    const items = view.getAllByRole('menuitem')
+    expect(items.map(o => o.textContent)).toEqual(['Read Only', 'Workspace Write', 'Full access'])
+    fireEvent.click(items[1]!)
+    // Optimistic pick + disable until admission resolves (command stub resolves true).
+    const busy = view.getByLabelText(/^访问模式/) as HTMLButtonElement
+    expect(busy.textContent).toBe('Workspace Write')
+    expect(busy.disabled).toBe(true)
+    expect(command).toHaveBeenCalledWith('/permission workspace-write')
+    await act(async () => {})
+    expect((view.getByLabelText(/^访问模式/) as HTMLButtonElement).disabled).toBe(false)
+  })
+
+  it('requires explicit risk acknowledgement before submitting Full access', async () => {
+    const command = vi.fn(() => Promise.resolve(true))
    const permissions = {
      options: [
        { value: 'workspace-write', name: 'workspace-write' },
@@ -475,20 +504,86 @@ describe('command launcher chrome and control seats', () => {
      ],
      currentValue: 'workspace-write',
    }
-    const { view } = bench({ permissions })
-    const trigger = view.getByLabelText(/^访问模式/) as HTMLButtonElement
-    // Title-case display is presentation only; the menu ids stay machine names.
-    expect(trigger.textContent).toBe('Workspace Write')
-    fireEvent.click(trigger)
-    const items = view.getAllByRole('menuitem')
-    expect(items.map(o => o.textContent)).toEqual(['Workspace Write', 'Danger Full Access'])
-    fireEvent.click(items[1]!)
-    // Optimistic pick + disable until admission resolves (command stub resolves true).
-    const busy = view.getByLabelText(/^访问模式/) as HTMLButtonElement
-    expect(busy.textContent).toBe('Danger Full Access')
-    expect(busy.disabled).toBe(true)
+    const { view } = bench({ permissions, command })
+    fireEvent.click(view.getByLabelText(/^访问模式/))
+    fireEvent.click(view.getByRole('menuitem', { name: 'Full access' }))
+
+    expect(command).not.toHaveBeenCalled()
+    expect(view.getByRole('dialog', { name: '确认启用 Full access？' })).toBeTruthy()
+    const enable = view.getByRole('button', { name: '启用 Full access' }) as HTMLButtonElement
+    expect(enable.disabled).toBe(true)
+
+    fireEvent.click(view.getByRole('checkbox', { name: '我已了解风险，并愿意继续' }))
+    expect(enable.disabled).toBe(false)
+    fireEvent.click(enable)
+
+    expect(command).toHaveBeenCalledOnce()
+    expect(command).toHaveBeenCalledWith('/permission danger-full-access')
+    expect(view.queryByRole('dialog')).toBeNull()
+    expect((view.getByLabelText(/^访问模式/) as HTMLButtonElement).textContent).toBe('Full access')
    await act(async () => {})
-    expect((view.getByLabelText(/^访问模式/) as HTMLButtonElement).disabled).toBe(false)
+  })
+
+  it('cancels a Full access selection without changing permission and resets acknowledgement', () => {
+    const command = vi.fn(() => Promise.resolve(true))
+    const permissions = {
+      options: [
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'workspace-write',
+    }
+    const { view } = bench({ permissions, command })
+    const openConfirmation = () => {
+      fireEvent.click(view.getByLabelText(/^访问模式/))
+      fireEvent.click(view.getByRole('menuitem', { name: 'Full access' }))
+    }
+
+    openConfirmation()
+    fireEvent.click(view.getByRole('checkbox'))
+    fireEvent.click(view.getByRole('button', { name: '取消' }))
+    expect(command).not.toHaveBeenCalled()
+    expect((view.getByLabelText(/^访问模式/) as HTMLButtonElement).textContent).toBe('Workspace Write')
+
+    openConfirmation()
+    expect((view.getByRole('checkbox') as HTMLInputElement).checked).toBe(false)
+    expect((view.getByRole('button', { name: '启用 Full access' }) as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('revokes an open Full access confirmation when the task locks', () => {
+    const command = vi.fn(() => Promise.resolve(true))
+    const permissions = {
+      options: [
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'workspace-write',
+    }
+    const { view, session } = bench({ permissions, command })
+    fireEvent.click(view.getByLabelText(/^访问模式/))
+    fireEvent.click(view.getByRole('menuitem', { name: 'Full access' }))
+    fireEvent.click(view.getByRole('checkbox'))
+    act(() => { session.set(snapshotOf({ removed: true })) })
+    expect(view.queryByRole('dialog')).toBeNull()
+    expect(command).not.toHaveBeenCalled()
+  })
+
+  it('resets an open Full access confirmation when switching tasks', () => {
+    const command = vi.fn(() => Promise.resolve(true))
+    const permissions = {
+      options: [
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'workspace-write',
+    }
+    const { view, props } = bench({ permissions, command })
+    fireEvent.click(view.getByLabelText(/^访问模式/))
+    fireEvent.click(view.getByRole('menuitem', { name: 'Full access' }))
+    fireEvent.click(view.getByRole('checkbox'))
+    view.rerender(<InputBar {...props} sessionId={'s2' as SessionId} />)
+    expect(view.queryByRole('dialog')).toBeNull()
+    expect(command).not.toHaveBeenCalled()
  })

  it('a registered entry fills its seat and receives the locked owner prop', () => {
--- a/packages/client/ui-permission/README.i18n.yaml
+++ b/packages/client/ui-permission/README.i18n.yaml
@@ -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-permission/README.md
-README.md: adb56edfc461d982b436159f025dbd65ae14dd83
-README.zh.md: c5b7c9efeb0c8688be3704c66baaeeef24831301
+README.md: 742e82d767152073ab963dc74c0565d6e8f8e5c4
+README.zh.md: e4b39567e4e39d74fd4d527ed2fcfed8d5318a59
--- a/packages/client/ui-permission/README.md
+++ b/packages/client/ui-permission/README.md
@@ -2,7 +2,7 @@

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

-Permission browser surfaces for two different lifetimes. The General-settings row reads the explicitly exposed `permission` Settings descriptor, derives its options from the host's dynamic `defaultPreset` enum, and writes one `settings.mutate` path operation with the descriptor revision. A push invalidation refetches the descriptor. This value applies only when a later session is created; changing it does not switch the current session.
+Permission browser surfaces for two different lifetimes. The General-settings row reads the explicitly exposed `permission` Settings descriptor, derives its options from the host's dynamic `defaultPreset` enum, and writes one `settings.mutate` path operation with the descriptor revision. Its observable rides the slot system's `hooks` compartment, so the renderer owns React hook binding; a push invalidation refetches the descriptor. This value applies only when a later session is created; changing it does not switch the current session. Choosing Full access requires an explicit risk acknowledgement before the row writes it.

 The current-session surface remains a popupSelect DECORATION hung on the host `/permission` command (`ctx.command.decorate`). A decoration is not a second command — the host command keeps its slash-menu row, the argued path (`/permission <preset>` switches directly), and the durable lifecycle logging; the decoration replaces only the bare invocation with the picker: one flat preset list with the current value marked active and kebab-case preset names rendered as title-case labels (`workspace-write` → `Workspace Write`, the composer chip's display transform twin), where a pick submits the `/permission <preset>` command line. Options and the active mark read the session's `permissions` projection (the same host-computed select the composer chip renders), so both current-session surfaces share one read source and one write path, and the pushed projection frame is the single confirmation both follow. The decoration is available exactly while the projection key is present; a permission-less composition shows neither picker nor Settings row.

--- a/packages/client/ui-permission/README.zh.md
+++ b/packages/client/ui-permission/README.zh.md
@@ -2,7 +2,7 @@

 [English](README.md) | 中文

-面向两种不同生命周期的浏览器权限界面。「通用」设置行读取显式暴露的 `permission` Settings 描述符，从 host 的动态 `defaultPreset` enum 中推导选项，并携带描述符的 revision 写入一条 `settings.mutate` 路径操作。推送的失效通知会重新获取描述符。这个值仅在后续会话创建时生效；改变它不会切换当前会话。
+面向两种不同生命周期的浏览器权限界面。「通用」设置行读取显式暴露的 `permission` Settings 描述符，从 host 的动态 `defaultPreset` enum 中推导选项，并携带描述符的 revision 写入一条 `settings.mutate` 路径操作。它的 observable 经 slot 系统的 `hooks` 格传递，因此 React 钩子由渲染器绑定；推送的失效通知会重新获取描述符。这个值仅在后续会话创建时生效；改变它不会切换当前会话。选择 Full access 时必须先显式确认风险，该行随后才会写入。

 当前会话界面仍是挂在 host `/permission` 命令上的 popupSelect **装饰**（`ctx.command.decorate`）。装饰不是第二条命令——host 命令保留斜杠菜单行、带参路径（`/permission <preset>` 直接切换）与持久生命周期记账；装饰只把裸调用替换为选择框：一张扁平预设列表，当前值标记为 active，kebab-case 预设名渲染为 Title Case 标签（`workspace-write` → `Workspace Write`，与 composer chip 的显示变换孪生），选中即提交 `/permission <preset>` 命令行。选项与 active 标记读取会话的 `permissions` 投影（与 composer chip 渲染的同一份 host 计算 select），因此两个当前会话界面共享同一读源与同一写路径，推送的投影帧是两者共同跟随的唯一确认。装饰恰在投影 key 存在时可用；无权限组合既不显示选择框，也不显示 Settings 行。

--- a/packages/client/ui-permission/package.json
+++ b/packages/client/ui-permission/package.json
@@ -25,9 +25,9 @@
  "dshClient": {
    "inject": [
      "@deepseek-ai/dsh-client-connection",
+      "@deepseek-ai/dsh-client-locale",
      "@deepseek-ai/dsh-client-runtime",
-      "@deepseek-ai/dsh-client-ui-command",
-      "@deepseek-ai/dsh-client-locale"
+      "@deepseek-ai/dsh-client-ui-command"
    ],
    "platform": "web"
  },
@@ -45,7 +45,6 @@
    "@deepseek-ai/dsh-client-ui-primitives": "^0.0.1",
    "@deepseek-ai/dsh-client-ui-slash": "^0.0.1",
    "@deepseek-ai/dsh-client-ui-slots": "^0.0.1",
-    "@deepseek-ai/dsh-client-web-react": "^0.0.1",
    "@deepseek-ai/dsh-invariants": "^0.0.1",
    "@deepseek-ai/dsh-permission": "^0.0.1",
    "cordis": "^4.0.0-rc.7",
--- a/packages/client/ui-permission/src/client/PermissionRow.tsx
+++ b/packages/client/ui-permission/src/client/PermissionRow.tsx
@@ -5,78 +5,125 @@
 */

 import { useEffect, useState } from 'react'
-import type {
-  PropsLocale, PropsRuntime, SnapshotSelectorHook,
-} from '@deepseek-ai/dsh-client-ui-slots'
-import { IconChevronDownOutline14, Menu } from '@deepseek-ai/dsh-client-ui-primitives'
-import type {
-  PermissionSettingsController, PermissionSettingsState,
-} from './settings-store.ts'
+import type { SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import {
+  IconChevronDownOutline14, Menu, RiskConfirmation,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PermissionSettingsState } from './settings-store.ts'
 import type { PermissionSettingsKey } from './locales.ts'
+import { FULL_ACCESS_PRESET } from './presentation.ts'
 import css from './PermissionRow.module.css'

-/** Injected controller and hook for the host-backed preference. */
+/** Registration-side business face for the host-backed preference. */
 export interface PermissionRowInjected {
-  /** Permission settings controller. */
-  controller: PermissionSettingsController
-  /** Selector hook bound to the controller snapshot. */
-  useSnapshot: SnapshotSelectorHook<PermissionSettingsState>
+  hooks: {
+    /** Permission settings snapshot bound by the renderer as usePermission. */
+    permission: SnapshotStore<PermissionSettingsState>
+  }
+  /** Load the descriptor when the row first renders. */
+  load: () => Promise<void>
+  /** Persist one advertised preset. */
+  select: (preset: string) => Promise<void>
 }

 /** Full component props. */
 export type PermissionRowProps =
-  PropsRuntime<'settings.general.item'> & PropsLocale<'settings.permission'> & PermissionRowInjected
+  PropsRuntime<'settings.general.item'>
+  & PropsLocale<'settings.permission'>
+  & InjectFace<PermissionRowInjected>

 /**
 * Render the new-session Permission default selector.
 * @param props - composed slot props.
 * @returns the row, or null when the host does not expose permission settings.
 */
-export function PermissionRow({ controller, useSnapshot, t }: PermissionRowProps) {
-  const state = useSnapshot(snapshot => snapshot)
+export function PermissionRow({ load, select, usePermission, t }: PermissionRowProps) {
+  const state = usePermission(snapshot => snapshot)
  const [open, setOpen] = useState(false)
+  const [confirmation, setConfirmation] = useState<string | null>(null)
+  const [acknowledged, setAcknowledged] = useState(false)
+
  useEffect(() => {
-    void controller.load()
-  }, [controller])
+    void load()
+  }, [load])
+
+  useEffect(() => {
+    if (state.writable && state.status !== 'unavailable') return
+    setOpen(false)
+    setAcknowledged(false)
+    setConfirmation(null)
+  }, [state.status, state.writable])
+
  if (state.status === 'unavailable') return null
  const selected = state.options.find(option => option.id === state.currentValue)
-  const busy = state.status === 'loading' || state.status === 'saving'
+  const busy = state.status === 'loading' || state.status === 'saving' || confirmation !== null
  const label = selected?.label
    ?? (busy ? t('loading') : t('unavailable'))
  const description: string = state.error ?? t('description')

  return (
-    <div className={css.row}>
-      <div className={css.rowText}>
-        <div className={css.title}>{t('title')}</div>
-        <div className={css.desc} role={state.error === null ? undefined : 'alert'}>{description}</div>
+    <>
+      <div className={css.row}>
+        <div className={css.rowText}>
+          <div className={css.title}>{t('title')}</div>
+          <div className={css.desc} role={state.error === null ? undefined : 'alert'}>{description}</div>
+        </div>
+        <Menu
+          open={open}
+          onClose={() => { setOpen(false) }}
+          items={state.options.map(option => ({ id: option.id, label: option.label }))}
+          selectedId={state.currentValue}
+          onSelect={(id) => {
+            setOpen(false)
+            if (id === state.currentValue) return
+            if (id === FULL_ACCESS_PRESET) {
+              setAcknowledged(false)
+              setConfirmation(id)
+              return
+            }
+            void select(id)
+          }}
+          align="end"
+          portal
+          anchor={(
+            <button
+              type="button"
+              className={css.selector}
+              aria-haspopup="menu"
+              aria-expanded={open}
+              disabled={busy || !state.writable || state.options.length === 0}
+              onClick={() => { setOpen(value => !value) }}
+            >
+              {label}
+              <IconChevronDownOutline14 className={css.chevron} />
+            </button>
+          )}
+        />
      </div>
-      <Menu
-        open={open}
-        onClose={() => { setOpen(false) }}
-        items={state.options.map(option => ({ id: option.id, label: option.label }))}
-        selectedId={state.currentValue}
-        onSelect={(id) => {
-          setOpen(false)
-          void controller.select(id)
+      <RiskConfirmation
+        open={confirmation !== null}
+        title={t('confirm.title')}
+        description={t('confirm.description')}
+        acknowledgeLabel={t('confirm.acknowledge')}
+        cancelLabel={t('confirm.cancel')}
+        confirmLabel={t('confirm.enable')}
+        acknowledged={acknowledged}
+        disabled={!state.writable || state.status === 'saving'}
+        onAcknowledgedChange={setAcknowledged}
+        onCancel={() => {
+          setAcknowledged(false)
+          setConfirmation(null)
+        }}
+        onConfirm={() => {
+          if (!acknowledged || confirmation === null) return
+          const preset = confirmation
+          setAcknowledged(false)
+          setConfirmation(null)
+          void select(preset)
        }}
-        align="end"
-        portal
-        anchor={(
-          <button
-            type="button"
-            className={css.selector}
-            aria-haspopup="menu"
-            aria-expanded={open}
-            disabled={busy || !state.writable || state.options.length === 0}
-            onClick={() => { setOpen(value => !value) }}
-          >
-            {label}
-            <IconChevronDownOutline14 className={css.chevron} />
-          </button>
-        )}
      />
-    </div>
+    </>
  )
 }

--- a/packages/client/ui-permission/src/client/index.ts
+++ b/packages/client/ui-permission/src/client/index.ts
@@ -1,22 +1,34 @@
 /**
- * Permission plugin, browser half. The General-settings row writes the
- * default preset for subsequently created sessions through Settings; the
- * `/permission` popup decoration switches the current session through the
- * host command and its `permissions` projection.
+ * Permission preset plugin, browser half — a popupSelect DECORATION hung on
+ * the host `/permission` command: one flat list of presets, current value
+ * marked active, a pick executes the switch. The decoration owns only the
+ * bare invocation; the host command keeps its catalog row, the argued path
+ * (`/permission <preset>` still switches directly), and the lifecycle
+ * logging. Options and the active mark read the session's `permissions`
+ * projection (the same host-computed select the composer chip renders); a
+ * pick submits the `/permission <preset>` command line, so both surfaces
+ * write through one path and the pushed projection frame is the one
+ * confirmation. The Full access row carries the same explicit risk gate as
+ * the composer chip; the shared popup shell owns the modal mechanics.
+ * The General-settings row separately writes the default preset for sessions
+ * created later through the host Settings API.
 */
+import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
+// Type-only: pulls the locale plugin's Context merge (ctx.locale).
+import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type { ClientContext, SessionFace } from '@deepseek-ai/dsh-client-runtime/client'
 import type { CommandServiceContract, SelectOption } from '@deepseek-ai/dsh-client-ui-command/client'
 import type { ClientSessionContext } from '@deepseek-ai/dsh-client-ui-slash/client'
-import type { PermissionSelect } from '@deepseek-ai/dsh-permission/client'
-import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
 import { deferRegistration } from '@deepseek-ai/dsh-client-ui-slots'
-import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
-// Type-only: pulls the General item slot and locale service contracts.
-import type {} from '@deepseek-ai/dsh-client-locale/client'
+import type { PermissionSelect } from '@deepseek-ai/dsh-permission/client'
 import { PermissionRow } from './PermissionRow.tsx'
 import type { PermissionRowInjected } from './PermissionRow.tsx'
-import { en, zh } from './locales.ts'
-import { displayPresetName } from './presentation.ts'
+import {
+  accessEn, accessZh, en, zh,
+} from './locales.ts'
+import {
+  displayPermissionPreset, FULL_ACCESS_PRESET,
+} from './presentation.ts'
 import {
  PERMISSION_SETTINGS_NS, PermissionSettingsController, refreshPermissionIfLoaded,
 } from './settings-store.ts'
@@ -29,20 +41,33 @@ export type {
 /** Required services (cordis fiber inject). */
 export const inject = ['command', 'sessions', 'slots', 'locale', 'connection']

+const ACCESS_NS = 'permission.access'
+
 /** Read one session's current permissions projection value (undefined = capability absent). */
 function selectOf(session: SessionFace | undefined): PermissionSelect | undefined {
  return session?.projections.faceOf('permissions').getSnapshot() as PermissionSelect | undefined
 }

 /** Flatten the projection select into popup rows; `custom` is display state, never a target. */
-function optionsOf(value: PermissionSelect): SelectOption[] {
+function optionsOf(value: PermissionSelect, t: (key: string) => string): SelectOption[] {
  return value.options
    .filter(option => option.value !== 'custom')
    .map(option => ({
      id: option.value,
-      label: displayPresetName(option.name),
+      label: displayPermissionPreset(option.value, option.name),
      ...(option.description !== undefined ? { detail: option.description } : {}),
      ...(option.value === value.currentValue ? { active: true } : {}),
+      ...(option.value === FULL_ACCESS_PRESET
+        ? {
+          confirmation: {
+            title: t('confirm.title'),
+            description: t('confirm.description'),
+            acknowledgeLabel: t('confirm.acknowledge'),
+            cancelLabel: t('confirm.cancel'),
+            confirmLabel: t('confirm.enable'),
+          },
+        }
+        : {}),
    }))
 }

@@ -54,6 +79,30 @@ function optionsOf(value: PermissionSelect): SelectOption[] {
 export function apply(ctx: ClientContext): void {
  const command = ctx.get('command') as CommandServiceContract
  const sessions = ctx.sessions
+  // This optional bundle and ui-conversation can load independently, so each
+  // owns the same safety copy under its own locale namespace.
+  /* jscpd:ignore-start */
+  ctx.effect(() => {
+    const disposers = [
+      ctx.locale.register(ACCESS_NS, 'zh', {
+        'confirm.title': accessZh['confirm.title'],
+        'confirm.description': accessZh['confirm.description'],
+        'confirm.acknowledge': accessZh['confirm.acknowledge'],
+        'confirm.cancel': accessZh['confirm.cancel'],
+        'confirm.enable': accessZh['confirm.enable'],
+      }),
+      ctx.locale.register(ACCESS_NS, 'en', {
+        'confirm.title': accessEn['confirm.title'],
+        'confirm.description': accessEn['confirm.description'],
+        'confirm.acknowledge': accessEn['confirm.acknowledge'],
+        'confirm.cancel': accessEn['confirm.cancel'],
+        'confirm.enable': accessEn['confirm.enable'],
+      }),
+    ]
+    return () => { for (const dispose of disposers) dispose() }
+  }, 'ui-permission: Full access confirmation dictionaries')
+  /* jscpd:ignore-end */
+  const t = ctx.locale.bind(ACCESS_NS)
  const sessionFor = (session: ClientSessionContext): SessionFace | undefined =>
    sessions.binding(session.sessionId)?.session

@@ -61,8 +110,13 @@ export function apply(ctx: ClientContext): void {

  const connection = ctx.get('connection') as ConnectionHandle
  const controller = new PermissionSettingsController(connection.api)
-  const useSnapshot = bindSnapshotSelector(controller.store)
-  const injected = (): PermissionRowInjected => ({ controller, useSnapshot })
+  const load = (): Promise<void> => controller.load()
+  const select = (preset: string): Promise<void> => controller.select(preset)
+  const injected = (): PermissionRowInjected => ({
+    hooks: { permission: controller.store },
+    load,
+    select,
+  })

  ctx.effect(() => {
    const refresh = (ns?: string): void => {
@@ -102,7 +156,7 @@ export function apply(ctx: ClientContext): void {
      options: (session) => {
        const value = selectOf(sessionFor(session))
        if (value === undefined) throw new Error('permission presets are not available on this host')
-        return Promise.resolve(optionsOf(value))
+        return Promise.resolve(optionsOf(value, t))
      },
      onSelect: async (option, session) => {
        const live = sessionFor(session)
--- a/packages/client/ui-permission/src/client/locales.ts
+++ b/packages/client/ui-permission/src/client/locales.ts
@@ -6,6 +6,11 @@ export const zh = {
  'description': '选择新会话的默认权限模式',
  'loading': '加载中',
  'unavailable': '不可用',
+  'confirm.title': '确认启用 Full access？',
+  'confirm.description': '启用 Full access 后，新会话将减少确认步骤，并且可以直接执行更多操作，包括敏感操作、文件修改或外部命令。仅建议在你信任后续任务时使用。',
+  'confirm.acknowledge': '我已了解风险，并愿意继续',
+  'confirm.cancel': '取消',
+  'confirm.enable': '启用 Full access',
 } satisfies Record<string, string>

 /** The settings.permission namespace key union. */
@@ -17,4 +22,30 @@ export const en = {
  'description': 'Choose the default permission mode for new sessions',
  'loading': 'Loading',
  'unavailable': 'Unavailable',
+  'confirm.title': 'Enable Full access?',
+  'confirm.description': 'Full access lets new sessions reduce confirmation steps and perform more actions directly, including sensitive operations, file changes, or external commands. Only use it when you trust subsequent tasks.',
+  'confirm.acknowledge': 'I understand the risks and want to continue',
+  'confirm.cancel': 'Cancel',
+  'confirm.enable': 'Enable Full access',
 } satisfies Record<PermissionSettingsKey, string>
+
+/** Simplified Chinese dictionary for the current-session popup gate. */
+export const accessZh = {
+  'confirm.title': '确认启用 Full access？',
+  'confirm.description': '启用 Full access 后，agent 将减少确认步骤，并且可以直接执行更多操作，包括敏感操作、文件修改或外部命令。仅建议在你信任当前任务时使用。',
+  'confirm.acknowledge': '我已了解风险，并愿意继续',
+  'confirm.cancel': '取消',
+  'confirm.enable': '启用 Full access',
+} satisfies Record<string, string>
+
+/** Current-session popup-gate key union. */
+export type PermissionAccessKey = keyof typeof accessZh
+
+/** English dictionary for the current-session popup gate. */
+export const accessEn = {
+  'confirm.title': 'Enable Full access?',
+  'confirm.description': 'Full access reduces confirmation steps and lets the agent perform more actions directly, including sensitive operations, file changes, or external commands. Only use it when you trust the current task.',
+  'confirm.acknowledge': 'I understand the risks and want to continue',
+  'confirm.cancel': 'Cancel',
+  'confirm.enable': 'Enable Full access',
+} satisfies Record<PermissionAccessKey, string>
--- a/packages/client/ui-permission/src/client/presentation.ts
+++ b/packages/client/ui-permission/src/client/presentation.ts
@@ -1,3 +1,6 @@
+/** Machine value of the preset that requires an explicit GUI risk gate. */
+export const FULL_ACCESS_PRESET = 'danger-full-access'
+
 /**
 * Convert conventional kebab-case preset names into user-facing title case.
 * @param name - host-supplied preset label or key.
@@ -7,3 +10,13 @@ export function displayPresetName(name: string): string {
  if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name)) return name
  return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
 }
+
+/**
+ * Render a permission preset under its product label.
+ * @param value - preset machine value.
+ * @param name - host-supplied preset name.
+ * @returns the Full access product label or the conventional display name.
+ */
+export function displayPermissionPreset(value: string, name: string): string {
+  return value === FULL_ACCESS_PRESET ? 'Full access' : displayPresetName(name)
+}
--- a/packages/client/ui-permission/src/client/settings-store.ts
+++ b/packages/client/ui-permission/src/client/settings-store.ts
@@ -13,7 +13,7 @@ import {
 import {
  nodeAtPath, rehydrateSchema, type SchemaNode,
 } from '@deepseek-ai/dsh-client-schema-form'
-import { displayPresetName } from './presentation.ts'
+import { displayPermissionPreset } from './presentation.ts'

 /** Permission's settings namespace on the host wire. */
 export const PERMISSION_SETTINGS_NS = 'permission'
@@ -65,8 +65,8 @@ export function permissionDefaultOf(view: SettingsNamespaceView): {
    return [{
      id: choice.value,
      label: typeof described === 'string' && described.length > 0
-        ? displayPresetName(described)
-        : displayPresetName(choice.value),
+        ? displayPermissionPreset(choice.value, described)
+        : displayPermissionPreset(choice.value, choice.value),
    }]
  })
  if (options.length === 0 || !options.some(option => option.id === value)) {
--- a/packages/client/ui-permission/tests/browser-plugin.spec.ts
+++ b/packages/client/ui-permission/tests/browser-plugin.spec.ts
@@ -14,8 +14,11 @@ import { SlotsService, type SessionId } from '@deepseek-ai/dsh-client-runtime/cl
 import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { CommandDecoration } from '@deepseek-ai/dsh-client-ui-command/client'
 import type { PermissionSelect } from '@deepseek-ai/dsh-permission/client'
-import { PermissionRow } from '../src/client/PermissionRow.tsx'
+import {
+  PermissionRow, type PermissionRowInjected,
+} from '../src/client/PermissionRow.tsx'
 import { apply, inject } from '../src/client/index.ts'
+import { accessEn } from '../src/client/locales.ts'

 const sid = (k: string): SessionId => k as SessionId

@@ -32,6 +35,7 @@ async function bench() {
  const ctx = new Context()
  await ctx.plugin(SlotsService)
  const locale = new LocaleService(ctx)
+  locale.setLocale('en')
  ctx.provide('locale', locale)
  ctx.slots.register({
    name: 'root',
@@ -96,9 +100,10 @@ describe('ui-permission browser plugin', () => {
    expect(c.ui.kind).toBe('popupSelect')
    const row = b.permissionRow()!
    expect(row.options).toEqual({ id: 'permission', order: -20 })
-    const injected = row.inject?.()
-    expect(injected?.controller).toBeDefined()
-    expect(typeof injected?.useSnapshot).toBe('function')
+    const injected = row.inject?.() as PermissionRowInjected | undefined
+    expect(injected?.hooks.permission).toBeDefined()
+    expect(typeof injected?.load).toBe('function')
+    expect(typeof injected?.select).toBe('function')
  })

  it('availability follows the projection key; options mark the current value active and exclude custom', async () => {
@@ -116,7 +121,14 @@ describe('ui-permission browser plugin', () => {
    expect(again.find(option => option.id === 'workspace-write')?.active).toBe(true)
    expect(again.find(option => option.id === 'read-only')?.detail).toBe('Reads only.')
    // Kebab-case names title-case; non-kebab host-configured names pass through.
-    expect(again.map(option => option.label)).toEqual(['Read Only', 'Workspace Write', 'Danger Full Access'])
+    expect(again.map(option => option.label)).toEqual(['Read Only', 'Workspace Write', 'Full access'])
+    expect(again.find(option => option.id === 'danger-full-access')?.confirmation).toEqual({
+      title: 'Enable Full access?',
+      description: accessEn['confirm.description'],
+      acknowledgeLabel: 'I understand the risks and want to continue',
+      cancelLabel: 'Cancel',
+      confirmLabel: 'Enable Full access',
+    })
    b.values.set(sid('s1'), { ...SELECT, options: [{ value: 'plain', name: 'Ask Every Time' }] })
    const passthrough = await c.ui.options(proj, new AbortController().signal)
    expect(passthrough[0]?.label).toBe('Ask Every Time')
--- a/packages/client/ui-permission/tests/permission-row.spec.tsx
+++ b/packages/client/ui-permission/tests/permission-row.spec.tsx
@@ -10,12 +10,13 @@ import { PermissionSettingsController } from '../src/client/settings-store.ts'
 afterEach(cleanup)

 const SCHEMA = {
-  uid: 4,
+  uid: 5,
  refs: {
    1: { type: 'const', value: 'read-only' },
    2: { type: 'const', value: 'workspace-write' },
-    3: { type: 'union', list: [1, 2] },
-    4: { type: 'object', dict: { defaultPreset: 3 } },
+    3: { type: 'const', value: 'danger-full-access' },
+    4: { type: 'union', list: [1, 2, 3] },
+    5: { type: 'object', dict: { defaultPreset: 4 } },
  },
 }

@@ -46,8 +47,9 @@ function mount(controller: PermissionSettingsController) {
  return render(
    <PermissionRow
      {...runtime}
-      controller={controller}
-      useSnapshot={bindSnapshotSelector(controller.store)}
+      load={() => controller.load()}
+      select={preset => controller.select(preset)}
+      usePermission={bindSnapshotSelector(controller.store)}
      t={t}
    />,
  )
@@ -78,6 +80,27 @@ describe('PermissionRow', () => {
    expect(mutate).toHaveBeenCalledOnce()
  })

+  it('requires explicit acknowledgement before saving Full access', async () => {
+    const mutate = vi.fn(() => Promise.resolve(ok(view('danger-full-access', 1))))
+    const controller = new PermissionSettingsController({
+      settings: {
+        describe: () => Promise.resolve(ok({ writable: true, namespaces: [view('read-only')] })),
+        mutate,
+      } as never,
+    })
+    mount(controller)
+    fireEvent.click(await screen.findByRole('button', { name: 'Read Only' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Full access' }))
+    expect(mutate).not.toHaveBeenCalled()
+    const dialog = screen.getByRole('dialog', { name: 'Enable Full access?' })
+    const enable = screen.getByRole('button', { name: 'Enable Full access' })
+    expect((enable as HTMLButtonElement).disabled).toBe(true)
+    fireEvent.click(screen.getByRole('checkbox'))
+    fireEvent.click(enable)
+    await waitFor(() => { expect(mutate).toHaveBeenCalledOnce() })
+    expect(dialog.isConnected).toBe(false)
+  })
+
  it('hides an unavailable namespace and disables a read-only provider', async () => {
    const absent = new PermissionSettingsController({
      settings: {
--- a/packages/client/ui-primitives/src/Modal.tsx
+++ b/packages/client/ui-primitives/src/Modal.tsx
@@ -1,9 +1,11 @@
 // Modal: controlled full-viewport dialog (create-workspace and similar).
-// Fixed overlay in the React tree (no react-dom portal) so ui-primitives
-// stays free of a react-dom dependency; mask tokens match figma 451:18655.
+// The overlay portals to this document's body so ancestor stacking contexts
+// cannot leave sticky page controls above the mask. This is still an in-page
+// WebUI dialog; it never creates or targets another browser/native window.

 import { useEffect } from 'react'
 import type { ReactNode } from 'react'
+import { createPortal } from 'react-dom'
 import clsx from 'clsx'
 import { IconCloseOutline16 } from './icons/index.tsx'
 import css from './Modal.module.css'
@@ -17,6 +19,7 @@ import css from './Modal.module.css'
 * @param props.description - optional supporting sentence under the title.
 * @param props.children - body (inputs, etc.).
 * @param props.footer - action row (Cancel / Create).
+ * @param props.contentClassName - optional class for a scrollable content region.
 * @param props.headless - render children directly in the card (no default
 * header/close/body chrome) for dialogs whose figma frame owns its own
 * header structure; mask, card, Escape, and aria-label remain.
@@ -25,7 +28,7 @@ import css from './Modal.module.css'
 * @returns null when closed; otherwise the overlay tree.
 */
 export function Modal({
-  open, onClose, title, closeLabel = 'Close', description, children, footer, className, headless = false,
+  open, onClose, title, closeLabel = 'Close', description, children, footer, className, contentClassName, headless = false,
 }: {
  open: boolean
  onClose: () => void
@@ -35,6 +38,7 @@ export function Modal({
  children?: ReactNode
  footer?: ReactNode
  className?: string
+  contentClassName?: string
  headless?: boolean
 }) {
  useEffect(() => {
@@ -48,7 +52,7 @@ export function Modal({

  if (!open) return null

-  return (
+  return createPortal((
    <div className={css.root} role="presentation">
      <div className={css.mask} aria-hidden="true" onClick={onClose} />
      <div
@@ -61,7 +65,7 @@ export function Modal({
          ? children
          : (
            <>
-              <div className={css.content}>
+              <div className={clsx(css.content, contentClassName)}>
                <div className={css.header}>
                  <h2 className={css.title}>{title}</h2>
                  <button type="button" className={css.close} aria-label={closeLabel} onClick={onClose}>
@@ -78,5 +82,5 @@ export function Modal({
          )}
      </div>
    </div>
-  )
+  ), document.body)
 }
--- a/packages/client/ui-primitives/src/RiskConfirmation.module.css
+++ b/packages/client/ui-primitives/src/RiskConfirmation.module.css
@@ -0,0 +1,73 @@
+.confirmation {
+  width: min(440px, 100%);
+  max-height: calc(100vh - 48px);
+  overflow: hidden;
+}
+
+.confirmationContent {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+@supports (height: 100dvh) {
+  .confirmation {
+    max-height: calc(100dvh - 48px);
+  }
+}
+
+.warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.warning p {
+  margin: 0;
+}
+
+.warningIcon {
+  flex: none;
+  margin-top: 2px;
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.acknowledgement {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 20px;
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.acknowledgement input {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 3px 0 0;
+  accent-color: var(--dsw-alias-button-primary-fill);
+  cursor: pointer;
+}
+
+.acknowledgement input:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-l4);
+  outline-offset: 2px;
+}
+
+.acknowledgement input:disabled {
+  cursor: default;
+}
+
+.modalAction {
+  min-width: 72px;
+}
+
+.confirmAction {
+  min-width: 136px;
+}
--- a/packages/client/ui-primitives/src/RiskConfirmation.tsx
+++ b/packages/client/ui-primitives/src/RiskConfirmation.tsx
@@ -0,0 +1,80 @@
+/**
+ * Controlled risk acknowledgement dialog shared by product surfaces that
+ * must gate a sensitive action behind an explicit checkbox.
+ */
+import { Button } from './Button.tsx'
+import { IconWarningOutline16 } from './icons/index.tsx'
+import { Modal } from './Modal.tsx'
+import css from './RiskConfirmation.module.css'
+
+export interface RiskConfirmationProps {
+  open: boolean
+  title: string
+  description: string
+  acknowledgeLabel: string
+  cancelLabel: string
+  confirmLabel: string
+  acknowledged: boolean
+  disabled?: boolean
+  onAcknowledgedChange: (acknowledged: boolean) => void
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+/**
+ * Render one in-page confirmation whose primary action is unavailable until
+ * the caller-controlled acknowledgement is checked.
+ */
+export function RiskConfirmation({
+  open,
+  title,
+  description,
+  acknowledgeLabel,
+  cancelLabel,
+  confirmLabel,
+  acknowledged,
+  disabled = false,
+  onAcknowledgedChange,
+  onCancel,
+  onConfirm,
+}: RiskConfirmationProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onCancel}
+      title={title}
+      className={css.confirmation ?? ''}
+      contentClassName={css.confirmationContent ?? ''}
+      footer={(
+        <>
+          <Button variant="outline" className={css.modalAction} onClick={onCancel}>
+            {cancelLabel}
+          </Button>
+          <Button
+            variant="primary"
+            className={css.confirmAction}
+            disabled={disabled || !acknowledged}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </Button>
+        </>
+      )}
+    >
+      <div className={css.warning}>
+        <IconWarningOutline16 size={18} className={css.warningIcon} />
+        <p>{description}</p>
+      </div>
+      <label className={css.acknowledgement}>
+        <input
+          type="checkbox"
+          checked={acknowledged}
+          disabled={disabled}
+          autoFocus
+          onChange={(event) => { onAcknowledgedChange(event.currentTarget.checked) }}
+        />
+        <span>{acknowledgeLabel}</span>
+      </label>
+    </Modal>
+  )
+}
--- a/packages/client/ui-primitives/src/index.ts
+++ b/packages/client/ui-primitives/src/index.ts
@@ -13,6 +13,8 @@ export type { MenuEntry, MenuItem, MenuSeparator, MenuLabel } from './Menu.tsx'
 export { useAnchoredMaxHeight } from './useAnchoredMaxHeight.ts'
 export { HoverCard } from './HoverCard.tsx'
 export { Modal } from './Modal.tsx'
+export { RiskConfirmation } from './RiskConfirmation.tsx'
+export type { RiskConfirmationProps } from './RiskConfirmation.tsx'
 export { ConnectionBanner } from './ConnectionBanner.tsx'
 export { FishLogo } from './FishLogo.tsx'
 export { BrandWordmark } from './BrandWordmark.tsx'
--- a/packages/client/ui-primitives/tests/atoms.spec.tsx
+++ b/packages/client/ui-primitives/tests/atoms.spec.tsx
@@ -324,12 +324,17 @@ describe('Modal', () => {
      <Modal open={false} onClose={onClose} title="Create new workspace">body</Modal>)
    expect(screen.queryByRole('dialog')).toBeNull()
    rerender(
-      <Modal open onClose={onClose} title="Create new workspace" closeLabel="Configure later" description="Name it." footer={<button type="button">Create</button>}>
+      <Modal open onClose={onClose} title="Create new workspace" closeLabel="Configure later" description="Name it." contentClassName="scrolling-content" footer={<button type="button">Create</button>}>
        <input aria-label="name" />
      </Modal>)
-    expect(screen.getByRole('dialog', { name: 'Create new workspace' })).toBeDefined()
+    const dialog = screen.getByRole('dialog', { name: 'Create new workspace' })
+    expect(dialog).toBeDefined()
+    // The full-page layer escapes caller stacking contexts but remains in
+    // this document/current WebUI window.
+    expect(dialog.parentElement?.parentElement).toBe(document.body)
    expect(screen.getByRole('button', { name: 'Configure later' })).toBeDefined()
    expect(screen.getByText('Name it.')).toBeDefined()
+    expect(screen.getByText('Name it.').parentElement?.className).toContain('scrolling-content')
    fireEvent.keyDown(document, { key: 'a' })
    expect(onClose).not.toHaveBeenCalled()
    fireEvent.keyDown(document, { key: 'Escape' })