dsh-codinput 0.1.0

package/src/client/components/ExpandBall.tsx

@@ -0,0 +1,122 @@
+/**
+ * 小球：侧栏收起后的 Codinput 唤出入口。
+ *
+ * 场景：输入入口在侧栏（形态 = side），用户把右侧栏收起——此时界面上
+ * 没有任何输入入口。小球出现在**标题栏（会话头部）下方**的右上角空余处：
+ * 与官方角落按钮同内缩（右侧 12px）右对齐，垂直贴着头部底边下沿 8px；
+ * 头部尺寸/窗口变化时重测（左栏展开、分屏、窗口缩放都会带动）。点击 →
+ * 展开右侧栏并聚焦 Codinput 标签，小球随承载态消失。
+ *
+ * 不占用官方任何槽位（早前版本接管 `conversation.session.header.corner`
+ * 会顶掉官方侧栏展开按钮——已废弃）：小球由接管条目 portal 到 body，
+ * 只在「侧栏承载且已收起」时存在，官方标题栏按钮原样保留。
+ */
+
+import { useEffect, useState, type JSX } from 'react';
+import { createPortal } from 'react-dom';
+import { stash } from '../services';
+import { diagError } from '../diag';
+import { useSidebarCarry } from '../sideinput';
+import { SIDEBAR_TAB_KIND } from '../sidebar';
+import { IconBrand } from '../icons';
+import { t, useT } from '../i18n';
+
+/** 球径（比官方角落按钮的 28px 大一档，置于内容之上需更显眼）。 */
+const BALL_SIZE = 36;
+/** 球内图标边长。 */
+const BALL_ICON = 18;
+/** 距标题栏右边缘的内缩（官方角落按钮为 12px，取同一值以对齐视觉基线）。 */
+const HEADER_INSET = 12;
+/** 与标题栏底边的间距。 */
+const HEADER_GAP = 8;
+
+/**
+ * 标题栏元素：会话头部（`<header>` 带 role=banner）。优先语义角色，
+ * 类名是构建哈希（wSkVaW_*）不可依赖。
+ */
+function headerElement(): HTMLElement | null {
+  return document.querySelector<HTMLElement>('[role="banner"]') ?? document.querySelector<HTMLElement>('header');
+}
+
+export function CodinputBall(props: { sessionId?: string }): JSX.Element | null {
+  const { sessionId } = props;
+  useT();
+  const { carried, collapsed } = useSidebarCarry(sessionId);
+  const active = carried && collapsed;
+  const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
+
+  useEffect(() => {
+    if (!active) {
+      setPos(null);
+      return;
+    }
+    const measure = (): void => {
+      const rect = headerElement()?.getBoundingClientRect();
+      if (!rect || rect.height === 0) return;
+      const next = {
+        left: Math.round(rect.right - HEADER_INSET - BALL_SIZE),
+        top: Math.round(rect.bottom + HEADER_GAP),
+      };
+      setPos((prev) => (prev && prev.left === next.left && prev.top === next.top ? prev : next));
+    };
+    measure();
+    const header = headerElement();
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : null;
+    if (header && observer) observer.observe(header);
+    window.addEventListener('resize', measure);
+    // 头部尚未挂载（会话切换/重挂载）时短轮询兜底，量到即停。
+    const timer = window.setInterval(() => {
+      if (!headerElement()) return;
+      measure();
+      window.clearInterval(timer);
+    }, 250);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('resize', measure);
+      window.clearInterval(timer);
+    };
+  }, [active]);
+
+  if (!active || !pos) return null;
+  return createPortal(
+    <button
+      type="button"
+      className="dci-ball"
+      data-codinput-expand="true"
+      style={{ left: pos.left, top: pos.top }}
+      aria-label={t("ball.label")}
+      title={t("ball.title")}
+      onClick={() => summonSidebarCodinput(sessionId)}
+    >
+      <IconBrand size={BALL_ICON} />
+    </button>,
+    document.body,
+  );
+}
+
+/**
+ * 唤回侧栏里的 Codinput：展开右侧栏 + 聚焦该标签。openTabIn 是语义路径
+ * （放置/去重/聚焦/展开一次完成）；缺席时退回「仅展开」——侧栏上次激活
+ * 的就是 Codinput，展开即露出。
+ */
+function summonSidebarCodinput(sessionId: string | undefined): void {
+  const sidebar = stash.sidebarRight;
+  if (!sidebar) return;
+  try {
+    if (sessionId && typeof sidebar.openTabIn === 'function') {
+      sidebar.openTabIn(sessionId, SIDEBAR_TAB_KIND);
+      return;
+    }
+    if (typeof sidebar.openTab === 'function') {
+      sidebar.openTab(SIDEBAR_TAB_KIND);
+      return;
+    }
+  } catch (error) {
+    diagError('ball.openTab', error);
+  }
+  try {
+    if (typeof sidebar.isExpanded === 'function' && !sidebar.isExpanded()) sidebar.toggleExpanded?.();
+  } catch (error) {
+    diagError('ball.expand', error);
+  }
+}

package/src/client/components/MenuSurface.tsx

@@ -0,0 +1,72 @@
+/** 官方 Menu 容器复刻：fixed 定位、锚点上方 4px、r20 卡片、视口约束。 */
+
+import { useEffect, useLayoutEffect, useRef, type ReactNode } from 'react';
+
+export interface MenuSurfaceProps {
+  /** 触发器矩形（getBoundingClientRect 快照）。 */
+  anchor: { left: number; top: number; right: number; bottom: number };
+  onClose(): void;
+  children: ReactNode;
+  /** 右对齐锚点（trailing 控件用）。 */
+  alignEnd?: boolean;
+  minWidth?: number;
+  /** 弹出方向：top = 锚点上方（默认），bottom = 锚点下方（设置区下拉）。 */
+  side?: 'top' | 'bottom';
+}
+
+export function MenuSurface(props: MenuSurfaceProps): JSX.Element {
+  const { anchor, onClose, children, alignEnd, minWidth = 218, side = 'top' } = props;
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    let top: number;
+    if (side === 'top') {
+      top = Math.max(12, anchor.top - rect.height - 4);
+      el.style.bottom = 'auto';
+    } else {
+      top = Math.min(window.innerHeight - rect.height - 12, anchor.bottom + 4);
+      el.style.bottom = 'auto';
+    }
+    el.style.top = `${top}px`;
+    let left = anchor.left;
+    if (alignEnd) left = anchor.right - rect.width;
+    left = Math.min(Math.max(12, left), window.innerWidth - rect.width - 12);
+    el.style.left = `${left}px`;
+  }, [anchor, alignEnd, side]);
+
+  useEffect(() => {
+    const onDown = (event: PointerEvent): void => {
+      if (ref.current && event.target instanceof Node && ref.current.contains(event.target)) return;
+      onClose();
+    };
+    window.addEventListener('pointerdown', onDown, true);
+    return () => window.removeEventListener('pointerdown', onDown, true);
+  }, [onClose]);
+
+  const below = side === 'bottom';
+  return (
+    <div
+      ref={ref}
+      className="dci-menu"
+      style={
+        below
+          ? { top: anchor.bottom + 4, bottom: 'auto', ...(alignEnd ? { left: 'auto', right: window.innerWidth - anchor.right } : { left: anchor.left }), minWidth }
+          : { left: anchor.left, bottom: window.innerHeight - anchor.top + 4, top: 'auto', ...(alignEnd ? { left: 'auto', right: window.innerWidth - anchor.right } : {}), minWidth }
+      }
+    >
+      <div className="dci-viewport">{children}</div>
+    </div>
+  );
+}
+
+/** 官方菜单项选中勾（描边勾，14-16）。 */
+export function MenuCheck({ size = 16 }: { size?: number }): JSX.Element {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/src/client/components/ModelMenu.tsx

@@ -0,0 +1,234 @@
+/**
+ * 模型与思考强度菜单：官方 ModelSelection 的触发器与两级 cell 菜单。
+ * 数据来自官方 per-session 目录（ctx.modelDirectories.directoryFor(id).store：
+ * { current, groups, status, error }），写入走官方 select（selectModel RPC）。
+ * 服务缺席时触发器禁用。
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import type { InputActions, ModelCatalogModel, ModelProviderGroup, ModelSelection } from '../host-types';
+import { getSessionDirectory, type DirectorySnapshot } from '../modeldir';
+import { stash } from '../services';
+import { IconChevronOfficial } from '../icons';
+import { MenuCheck, MenuSurface } from './MenuSurface';
+import { useSnapshot } from './useSnapshot';
+import { t } from '../i18n';
+
+export interface ModelMenuProps {
+  sessionId: string | undefined;
+  onNotify?(level: 'info' | 'error', text: string): void;
+}
+
+type MenuView = 'root' | 'models' | 'efforts';
+
+/** 目录中按 (provider, model id) 找目录项。 */
+function findCurrent(
+  current: ModelSelection | null,
+  groups: readonly ModelProviderGroup[],
+): { group: ModelProviderGroup; model: ModelCatalogModel } | null {
+  if (!current) return null;
+  for (const group of groups) {
+    if (group.id !== current.provider) continue;
+    const model = group.models.find((m) => m.id === current.model);
+    if (model) return { group, model };
+  }
+  return null;
+}
+
+/** 触发器显示模型**显示名**（目录项 name；目录未热时退回 id）。 */
+function modelLabel(selection: ModelSelection | null, groups: readonly ModelProviderGroup[]): string {
+  if (!selection) return t('tool.modelPlain');
+  return findCurrent(selection, groups)?.model.name ?? selection.model;
+}
+
+/** 推理等级显示名（目录 efforts[].name，如 High；未热时退回首字母大写 id）。 */
+function effortLabel(selection: ModelSelection | null, groups: readonly ModelProviderGroup[]): string {
+  const effortId = selection?.reasoningEffort;
+  if (!effortId) return 'Default';
+  const named = findCurrent(selection, groups)?.model.reasoning?.efforts.find((e) => e.id === effortId);
+  if (named) return named.name;
+  return effortId.charAt(0).toUpperCase() + effortId.slice(1);
+}
+
+export function ModelMenu(props: ModelMenuProps): JSX.Element {
+  const { sessionId, onNotify } = props;
+  const [busy, setBusy] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState<MenuView>('root');
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const [anchor, setAnchor] = useState<{ left: number; top: number; right: number; bottom: number } | null>(null);
+
+  // 服务缺席（installServices 未注入到）时禁用；svcEpoch 轮询兜底见 CodinputSurface。
+  const directory = getSessionDirectory(sessionId);
+  const snap = useSnapshot(directory?.store) as DirectorySnapshot | undefined;
+
+  // 首次打开时确保目录已加载（官方 load 语义）。
+  useEffect(() => {
+    if (!open || !directory) return;
+    directory.load().catch(() => {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (event: PointerEvent): void => {
+      if (refContains(rootMenuRef.current, event.target)) return;
+      close();
+    };
+    window.addEventListener('pointerdown', onDown, true);
+    return () => window.removeEventListener('pointerdown', onDown, true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const rootMenuRef = useRef<HTMLDivElement | null>(null);
+
+  const openMenu = (): void => {
+    const el = triggerRef.current;
+    if (!el) return;
+    setAnchor(el.getBoundingClientRect());
+    setView('root');
+    setOpen(true);
+  };
+
+  const close = (): void => {
+    setOpen(false);
+    setView('root');
+  };
+
+  const current = snap?.current ?? null;
+  const groups = snap?.groups ?? [];
+  const currentModelName = modelLabel(current, groups);
+  const currentEffort = effortLabel(current, groups);
+
+  const pick = async (group: ModelProviderGroup, model: ModelCatalogModel, effortId: string | undefined): Promise<void> => {
+    if (!directory || busy) return;
+    const next: ModelSelection = {
+      provider: group.id,
+      model: model.id,
+      ...(effortId !== undefined ? { reasoningEffort: effortId } : {}),
+    };
+    setBusy(true);
+    try {
+      await directory.select(next);
+    } catch (error) {
+      onNotify?.('error', error instanceof Error ? error.message : String(error));
+    } finally {
+      setBusy(false);
+      close();
+    }
+  };
+
+  const refContains = (el: Element | null, target: EventTarget | null): boolean =>
+    !!el && target instanceof Node && el.contains(target);
+
+  return (
+    <div style={{ position: 'relative', minWidth: 0 }}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className="dci-trigger"
+        style={{ maxWidth: 'min(360px, 45cqw)' }}
+        data-open={open}
+        onMouseDown={(e) => e.preventDefault()}
+        disabled={!directory}
+        onClick={() => (open ? close() : openMenu())}
+        aria-label={t("tool.model", { name: `${currentModelName} · ${currentEffort}` })}
+        title={t("tool.model", { name: `${currentModelName} · ${currentEffort}` })}
+      >
+        <span className="dci-triggerLabel">{currentModelName}</span>
+        {currentEffort ? <span className="dci-triggerEffort">{currentEffort}</span> : null}
+        <span className="dci-chev" data-open={open}>
+          <IconChevronOfficial size={14} />
+        </span>
+      </button>
+
+      {open && anchor ? (
+        <div ref={rootMenuRef}>
+          <MenuSurface anchor={anchor} onClose={close} alignEnd={true} minWidth={240}>
+            {view === 'root' ? (
+              <>
+                <button type="button" className="dci-cell" onClick={() => setView('models')}>
+                  <span className="dci-cellLabel">{t("menu.model")}</span>
+                  <span className="dci-cellValue">{currentModelName}</span>
+                  <span className="dci-cellChevron" style={{ transform: 'rotate(-90deg)' }} aria-hidden="true">
+                    <IconChevronOfficial size={14} />
+                  </span>
+                </button>
+                <button type="button" className="dci-cell" onClick={() => setView('efforts')}>
+                  <span className="dci-cellLabel">{t("menu.reasoning")}</span>
+                  <span className="dci-cellValue">{currentEffort}</span>
+                  <span className="dci-cellChevron" style={{ transform: 'rotate(-90deg)' }} aria-hidden="true">
+                    <IconChevronOfficial size={14} />
+                  </span>
+                </button>
+              </>
+            ) : null}
+
+            {view === 'models' ? (
+              <>
+                <div className="dci-menuLabel">{t("menu.model")}</div>
+                {groups.map((group) => (
+                  <div key={group.id}>
+                    <div className="dci-menuLabel">{group.name}</div>
+                    {group.models.map((model) => {
+                      const active = current !== null && current.provider === group.id && current.model === model.id;
+                      return (
+                        <button
+                          key={model.id}
+                          type="button"
+                          className="dci-item"
+                          disabled={busy}
+                          title={model.description}
+                          onClick={() => void pick(group, model, model.reasoning?.defaultEffort)}
+                        >
+                          <span className="dci-itemLabel">{model.name}</span>
+                          {active ? (
+                            <span className="dci-check" aria-hidden="true">
+                              <MenuCheck size={16} />
+                            </span>
+                          ) : null}
+                        </button>
+                      );
+                    })}
+                  </div>
+                ))}
+                {groups.length === 0 ? <div className="dci-empty">{snap?.status === 'loading' ? t('menu.refreshingModels') : t('menu.noModels')}</div> : null}
+              </>
+            ) : null}
+
+            {view === 'efforts' ? (
+              <>
+                <div className="dci-menuLabel">{t("menu.reasoning")}</div>
+                {(() => {
+                  const found = findCurrent(current, groups);
+                  const efforts = found?.model.reasoning?.efforts ?? [];
+                  if (efforts.length === 0) return <div className="dci-empty">{t("menu.reasoningNone")}</div>;
+                  return efforts.map((eff) => {
+                    const active = current?.reasoningEffort === eff.id;
+                    return (
+                      <button
+                        key={eff.id}
+                        type="button"
+                        className="dci-item"
+                        disabled={busy}
+                        title={eff.description}
+                        onClick={() => found && void pick(found.group, found.model, eff.id)}
+                      >
+                        <span className="dci-itemLabel">{eff.name}</span>
+                        {active ? (
+                          <span className="dci-check" aria-hidden="true">
+                            <MenuCheck size={16} />
+                          </span>
+                        ) : null}
+                      </button>
+                    );
+                  });
+                })()}
+              </>
+            ) : null}
+          </MenuSurface>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/client/components/PermissionMenu.tsx

@@ -0,0 +1,257 @@
+/**
+ * 权限菜单：官方 PermissionSelect 复刻。事实源是宿主投影
+ * useProjection("permissions")（{ currentValue, options }），触发器
+ * （模式 glyph + 标签 + chevron，open 时旋转）、上方 Menu（三项 +
+ * glyph + 选中勾）与「完全权限」的 RiskConfirmation 模态确认都按官方
+ * 流程：选完全权限先关菜单、弹确认框，勾选后才提交 /permission 命令。
+ * 投影缺席时整个按钮不渲染（同官方 value === undefined 返回 null）。
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import type { InputActions, UseProjection } from '../host-types';
+import { t } from '../i18n';
+import {
+  fullAccessConfirm,
+  PERMISSION_PRESET_IDS,
+  applyPermission,
+  permissionLabel,
+  type PermissionProjection,
+} from '../permission';
+import {
+  IconChevronOfficial,
+  IconShieldBarsOfficial,
+  IconShieldCheckOfficial,
+  IconShieldWriteOfficial,
+  IconWarningOfficial,
+  IconX,
+} from '../icons';
+import { MenuCheck, MenuSurface } from './MenuSurface';
+
+export interface PermissionMenuProps {
+  sessionId: string | undefined;
+  actions: InputActions | undefined;
+  currentDraft: string;
+  useProjection: UseProjection | undefined;
+  /** owner disabled（blocked/removed 场景锁住触发器）。 */
+  disabled?: boolean;
+  onNotify?(level: 'info' | 'error', text: string): void;
+}
+
+const FULL_ACCESS = 'danger-full-access';
+
+/** 官方 permissionGlyphs：每个预设一枚专属盾 glyph；未知值无 glyph。 */
+function glyph(value: string): JSX.Element | undefined {
+  if (value === 'read-only') return <IconShieldCheckOfficial size={16} />;
+  if (value === 'workspace-write') return <IconShieldWriteOfficial size={16} />;
+  if (value === FULL_ACCESS) return <IconShieldBarsOfficial size={16} />;
+  return undefined;
+}
+
+export function PermissionMenu(props: PermissionMenuProps): JSX.Element | null {
+  const { sessionId, actions, currentDraft, useProjection, disabled, onNotify } = props;
+  // 官方同款事实源：宿主投影（hook 顺序随 useProjection prop 存在性固定）。
+  const permissions = useProjection
+    ? (useProjection('permissions') as PermissionProjection | undefined)
+    : undefined;
+  const [pick, setPick] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+  const [confirmation, setConfirmation] = useState<string | null>(null);
+  const [acknowledged, setAcknowledged] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const [anchor, setAnchor] = useState<{ left: number; top: number; right: number; bottom: number } | null>(null);
+
+  // locked/无值时收起（官方 useEffect 同语义）。
+  useEffect(() => {
+    if (disabled) return;
+    if (permissions !== undefined) return;
+    setOpen(false);
+    setAcknowledged(false);
+    setConfirmation(null);
+  }, [disabled, permissions]);
+
+  // alpha 权限投影只含 currentValue（选项目录移至宿主 permission catalog）：
+  // 触发器以 currentValue 显示；选项用内建三预设，当前值不在其中时补入兜底。
+  if (!permissions || typeof permissions.currentValue !== 'string') return null;
+
+  const busy = pick !== null || confirmation !== null;
+  const currentValue = pick ?? permissions.currentValue;
+  const currentLabel = permissionLabel(currentValue, currentValue);
+
+  // 官方顺序：内建三预设按目录序，当前值不在其中时附加兜底。
+  const items = [...PERMISSION_PRESET_IDS, ...(PERMISSION_PRESET_IDS.includes(currentValue) ? [] : [currentValue])].map((id) => ({
+    id,
+    label: permissionLabel(id, id),
+    icon: glyph(id),
+  }));
+
+  const close = (): void => setOpen(false);
+
+  const submit = (id: string): void => {
+    if (!sessionId) return;
+    setPick(id);
+    applyPermission(sessionId, id, actions, currentDraft)
+      .then((outcome) => {
+        if (!outcome.ok) onNotify?.('error', outcome.message ?? t('perm.switchFailed'));
+      })
+      .finally(() => setPick(null));
+  };
+
+  const choose = (id: string): void => {
+    close();
+    if (id === permissions.currentValue) return;
+    if (id === FULL_ACCESS) {
+      setAcknowledged(false);
+      setConfirmation(id);
+      return;
+    }
+    submit(id);
+  };
+
+  const closeConfirmation = (): void => {
+    setAcknowledged(false);
+    setConfirmation(null);
+  };
+
+  const confirmFullAccess = (): void => {
+    if (disabled || !acknowledged || confirmation === null) return;
+    const id = confirmation;
+    closeConfirmation();
+    submit(id);
+  };
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className="dci-trigger"
+        aria-label={t("perm.trigger", { name: currentLabel })}
+        title={undefined}
+        disabled={disabled || busy}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => {
+          if (!open) setAnchor(triggerRef.current?.getBoundingClientRect() ?? null);
+          setOpen(!open);
+        }}
+      >
+        {glyph(currentValue) !== undefined ? (
+          <span className="dci-triggerIcon" aria-hidden="true">
+            {glyph(currentValue)}
+          </span>
+        ) : null}
+        <span className="dci-triggerLabel">{currentLabel}</span>
+        <span className="dci-chev" data-open={open}>
+          <IconChevronOfficial size={14} />
+        </span>
+      </button>
+
+      {open && anchor ? (
+        <MenuSurface anchor={anchor} onClose={close}>
+          {items.map((item) => {
+            const active = item.id === currentValue;
+            return (
+              <button
+                key={item.id}
+                type="button"
+                className="dci-item"
+                disabled={busy}
+                onClick={() => choose(item.id)}
+              >
+                {item.icon !== undefined ? (
+                  <span className="dci-itemIcon" aria-hidden="true">
+                    {item.icon}
+                  </span>
+                ) : null}
+                <span className="dci-itemLabel">{item.label}</span>
+                {active ? (
+                  <span className="dci-check" aria-hidden="true">
+                    <MenuCheck size={16} />
+                  </span>
+                ) : null}
+              </button>
+            );
+          })}
+        </MenuSurface>
+      ) : null}
+
+      <RiskConfirmation
+        open={confirmation !== null}
+        acknowledged={acknowledged}
+        disabled={disabled === true}
+        onAcknowledgedChange={setAcknowledged}
+        onCancel={closeConfirmation}
+        onConfirm={confirmFullAccess}
+      />
+    </>
+  );
+}
+
+/** 官方 RiskConfirmation（Modal + 警示行 + 勾选 + 取消/启用）。 */
+function RiskConfirmation(props: {
+  open: boolean;
+  acknowledged: boolean;
+  disabled: boolean;
+  onAcknowledgedChange(checked: boolean): void;
+  onCancel(): void;
+  onConfirm(): void;
+}): JSX.Element | null {
+  const { open, acknowledged, disabled, onAcknowledgedChange, onCancel, onConfirm } = props;
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onCancel();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  if (!open) return null;
+  return (
+    <div className="dci-modal-root" role="presentation">
+      <div className="dci-modal-mask" aria-hidden="true" onClick={onCancel} />
+      <div className="dci-modal-dialog dci-confirm" role="dialog" aria-modal="true" aria-label={fullAccessConfirm().title}>
+        <div className="dci-modal-content">
+          <div className="dci-modal-header">
+            <h2 className="dci-modal-title">{fullAccessConfirm().title}</h2>
+            <button type="button" className="dci-modal-close" aria-label={t("perm.close")} onClick={onCancel}>
+              <IconX size={14} />
+            </button>
+          </div>
+          <div className="dci-modal-body">
+            <div className="dci-confirm-warning">
+              <span className="dci-confirm-warningIcon" aria-hidden="true">
+                <IconWarningOfficial size={18} />
+              </span>
+              <p>{fullAccessConfirm().description}</p>
+            </div>
+            <label className="dci-confirm-ack">
+              <input
+                type="checkbox"
+                checked={acknowledged}
+                disabled={disabled}
+                autoFocus
+                onChange={(e) => onAcknowledgedChange(e.currentTarget.checked)}
+              />
+              <span>{fullAccessConfirm().acknowledgeLabel}</span>
+            </label>
+          </div>
+        </div>
+        <div className="dci-modal-footer">
+          <button type="button" className="dci-btn dci-btn-outline dci-btn-cancel" onClick={onCancel}>
+            {fullAccessConfirm().cancelLabel}
+          </button>
+          <button
+            type="button"
+            className="dci-btn dci-btn-primary dci-btn-confirm"
+            disabled={disabled || !acknowledged}
+            onClick={onConfirm}
+          >
+            {fullAccessConfirm().enableLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}