diff --git a/design-system/README.md b/design-system/README.md
index 6e704ff9e3..04f2767ce2 100644
--- a/design-system/README.md
+++ b/design-system/README.md
@@ -33,6 +33,13 @@ The same entry publishes `ChatComposer`, the shared context-band and
 compact/expanded input anatomy used by product composers without importing
 their stores, localized menus, editor, model, voice, or host actions.
 
+`SetupWizard` publishes the guided configuration pattern used by agent creation:
+a split header, tinted explanatory pane, one current-step indicator, form/editor
+viewport and footer actions. It supports any consumer-controlled sequence and
+stacks by available container width. Design Lab includes a working three-stage
+example; the [UI package guide](packages/ui/README.md#guided-configuration)
+documents validation, localized guidance, dialog labelling and scroll ownership.
+
 FlowChat tool-card frameworks are published from `@openbitfun/ui/flow-chat` as
 `AmbientToolCard` and `ProminentToolCard`. The names describe whether a tool
 result should stay in the conversational background or receive deliberate user
diff --git a/design-system/apps/design-lab/src/i18n/componentMetadata.ts b/design-system/apps/design-lab/src/i18n/componentMetadata.ts
index 910845529d..49a43ec9a9 100644
--- a/design-system/apps/design-lab/src/i18n/componentMetadata.ts
+++ b/design-system/apps/design-lab/src/i18n/componentMetadata.ts
@@ -25,6 +25,7 @@ const descriptionKeys: Readonly<Record<string, MessageKey>> = {
   MobileTag: "component.MobileTag.description",
   MobileToolbar: "component.MobileToolbar.description",
   SplitView: "component.SplitView.description",
+  SetupWizard: "component.SetupWizard.description",
   ListModelsToolCard: "component.ListModelsToolCard.description",
   ControlHubToolCard: "component.ControlHubToolCard.description",
   ThinkingBlock: "component.ThinkingBlock.description",
diff --git a/design-system/apps/design-lab/src/i18n/messages.ts b/design-system/apps/design-lab/src/i18n/messages.ts
index 479aba17e9..66ad15905a 100644
--- a/design-system/apps/design-lab/src/i18n/messages.ts
+++ b/design-system/apps/design-lab/src/i18n/messages.ts
@@ -6,6 +6,7 @@ import { flowChatEn, flowChatZhCN, flowChatZhTW } from "./flowChatMessages";
 import { subagentMotionEn, subagentMotionZhCN, subagentMotionZhTW } from "./subagentMotionMessages";
 import { thinkingIndicatorEn, thinkingIndicatorZhCN, thinkingIndicatorZhTW } from "./thinkingIndicatorMessages";
 import { splitViewEn, splitViewZhCN, splitViewZhTW } from "./splitViewMessages";
+import { setupWizardEn, setupWizardZhCN, setupWizardZhTW } from "./setupWizardMessages";
 import type { DesignLabLocale } from "./core.mjs";
 
 export const enUSMessages = {
@@ -16,6 +17,7 @@ export const enUSMessages = {
   ...subagentMotionEn,
   ...thinkingIndicatorEn,
   ...splitViewEn,
+  ...setupWizardEn,
   ...flowChatEn,
   "component.OpenBitFunSolidMark.description": "The original silver solid mark on a transparent canvas, preserving its material and shading.",
   "component.OpenBitFunAppIcon.description": "The application icon used by the installed product: silver mark, black rounded-square tile, and assets for different display sizes.",
@@ -838,6 +840,7 @@ export const zhCNMessages = {
   ...subagentMotionZhCN,
   ...thinkingIndicatorZhCN,
   ...splitViewZhCN,
+  ...setupWizardZhCN,
   ...flowChatZhCN,
   "component.OpenBitFunSolidMark.description": "透明底的银色实体标志，保留原稿的材质、光泽与立体明暗。",
   "component.OpenBitFunAppIcon.description": "实际应用使用的图标：银色实体标志、黑色圆角底板，以及适配不同显示尺寸的资源。",
@@ -1658,6 +1661,7 @@ export const zhTWMessages = {
   ...subagentMotionZhTW,
   ...thinkingIndicatorZhTW,
   ...splitViewZhTW,
+  ...setupWizardZhTW,
   ...flowChatZhTW,
   "patterns.description": "查看元件在常見介面中的組合與互動。",
   "patterns.title": "組合範例",
diff --git a/design-system/apps/design-lab/src/i18n/setupWizardMessages.ts b/design-system/apps/design-lab/src/i18n/setupWizardMessages.ts
new file mode 100644
index 0000000000..c9e1e0e8bd
--- /dev/null
+++ b/design-system/apps/design-lab/src/i18n/setupWizardMessages.ts
@@ -0,0 +1,83 @@
+export const setupWizardEn = {
+  "component.SetupWizard.description": "Guided configuration with a tinted explanation pane, one current-step indicator, a form or editor viewport, and independent actions.",
+  "setupWizard.title": "Configure workflow",
+  "setupWizard.guide": "Configuration guidance",
+  "setupWizard.progress": "{current} / {total}",
+  "setupWizard.basics": "Basic information",
+  "setupWizard.basicsTitle": "Make the workflow easy to find",
+  "setupWizard.basicsDescription": "A recognizable name helps collaborators choose the right workflow when starting a task.",
+  "setupWizard.rules": "Working rules",
+  "setupWizard.rulesTitle": "Keep results consistent",
+  "setupWizard.rulesDescription": "These rules apply to every run. Define completion criteria so repeated tasks produce comparable results.",
+  "setupWizard.access": "Available capabilities",
+  "setupWizard.accessTitle": "Set the scope of execution",
+  "setupWizard.accessDescription": "Enable only the capabilities this workflow needs. Every operation remains subject to the current permission policy.",
+  "setupWizard.name": "Workflow name",
+  "setupWizard.namePlaceholder": "For example, weekly research",
+  "setupWizard.rulesPlaceholder": "Enter the workflow's working rules",
+  "setupWizard.network": "Allow network access",
+  "setupWizard.back": "Back",
+  "setupWizard.next": "Next",
+  "setupWizard.finish": "Finish preview",
+  "setupWizard.reset": "Reset",
+  "setupWizard.complete": "Preview complete. No configuration was saved.",
+  "setupWizard.help": "Try all three stages. Drafts survive navigation. The contained state delegates scrolling to the editor; the narrow state stacks the guide above the form.",
+  "setupWizard.state.form": "Form",
+  "setupWizard.state.contained": "Contained editor",
+} as const;
+
+export const setupWizardZhCN = {
+  "component.SetupWizard.description": "分步配置布局，包含带底色的引导区、单个当前步骤指示、表单或编辑器区域，以及独立操作区。",
+  "setupWizard.title": "配置工作流",
+  "setupWizard.guide": "配置引导",
+  "setupWizard.progress": "{current} / {total}",
+  "setupWizard.basics": "基础信息",
+  "setupWizard.basicsTitle": "方便发现与选择",
+  "setupWizard.basicsDescription": "清晰的名称能帮助协作者在开始任务时，找到适合的工作流。",
+  "setupWizard.rules": "工作规则",
+  "setupWizard.rulesTitle": "让结果保持一致",
+  "setupWizard.rulesDescription": "规则会应用于每次执行。明确完成条件，让重复任务的结果更容易比较。",
+  "setupWizard.access": "可用能力",
+  "setupWizard.accessTitle": "界定执行范围",
+  "setupWizard.accessDescription": "仅开放工作流需要的能力。每次操作仍受当前权限策略约束。",
+  "setupWizard.name": "工作流名称",
+  "setupWizard.namePlaceholder": "例如：每周调研",
+  "setupWizard.rulesPlaceholder": "请输入工作流的执行规则",
+  "setupWizard.network": "允许访问网络",
+  "setupWizard.back": "上一步",
+  "setupWizard.next": "下一步",
+  "setupWizard.finish": "完成预览",
+  "setupWizard.reset": "重置",
+  "setupWizard.complete": "预览已完成，未保存配置。",
+  "setupWizard.help": "可体验三个阶段，返回时保留输入。编辑器模式由内部编辑区域负责滚动；窄屏模式将引导区放到表单上方。",
+  "setupWizard.state.form": "表单",
+  "setupWizard.state.contained": "沉浸式编辑器",
+} satisfies Record<keyof typeof setupWizardEn, string>;
+
+export const setupWizardZhTW = {
+  "component.SetupWizard.description": "分步設定版面，包含帶底色的引導區、單個目前步驟指示、表單或編輯器區域，以及獨立操作區。",
+  "setupWizard.title": "設定工作流程",
+  "setupWizard.guide": "設定引導",
+  "setupWizard.progress": "{current} / {total}",
+  "setupWizard.basics": "基本資訊",
+  "setupWizard.basicsTitle": "方便發現與選擇",
+  "setupWizard.basicsDescription": "清楚的名稱能協助協作者在開始任務時，找到適合的工作流程。",
+  "setupWizard.rules": "工作規則",
+  "setupWizard.rulesTitle": "讓結果保持一致",
+  "setupWizard.rulesDescription": "規則會套用至每次執行。明確的完成條件，讓重複任務的結果更容易比較。",
+  "setupWizard.access": "可用能力",
+  "setupWizard.accessTitle": "界定執行範圍",
+  "setupWizard.accessDescription": "僅開放工作流程需要的能力。每次操作仍受目前權限策略約束。",
+  "setupWizard.name": "工作流程名稱",
+  "setupWizard.namePlaceholder": "例如：每週調研",
+  "setupWizard.rulesPlaceholder": "請輸入工作流程的執行規則",
+  "setupWizard.network": "允許存取網路",
+  "setupWizard.back": "上一步",
+  "setupWizard.next": "下一步",
+  "setupWizard.finish": "完成預覽",
+  "setupWizard.reset": "重設",
+  "setupWizard.complete": "預覽已完成，未儲存設定。",
+  "setupWizard.help": "可體驗三個階段，返回時保留輸入。編輯器模式由內部編輯區域負責捲動；窄螢幕模式將引導區放到表單上方。",
+  "setupWizard.state.form": "表單",
+  "setupWizard.state.contained": "沉浸式編輯器",
+} satisfies Record<keyof typeof setupWizardEn, string>;
diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
index cea8fe175a..3f076df40e 100644
--- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
@@ -143,6 +143,7 @@ import { IconCompositionPreview } from "../preview/IconCompositionPreview";
 import { RollingTextPreview } from "../preview/RollingTextPreview";
 import { ThinkingIndicatorPreview } from "../preview/ThinkingIndicatorPreview";
 import { SplitViewPreview } from "../preview/SplitViewPreview";
+import { SetupWizardPreview } from "../preview/SetupWizardPreview";
 import { NestedMenuPattern } from "./ReferencePatterns";
 import { useI18n, type MessageKey } from "../i18n";
 import {
@@ -224,6 +225,8 @@ const iconSizes = ["2xs", "xs", "sm", "md", "lg"] as const;
 const iconTones = ["inherit", "primary", "secondary", "muted", "disabled", "info", "success", "warning", "danger"] as const;
 
 const optionLabelKeys: Readonly<Record<string, MessageKey>> = {
+  form: "setupWizard.state.form",
+  contained: "setupWizard.state.contained",
   ...Object.fromEntries(Object.keys(previewEn).filter(key => key.startsWith("preview.state.")).map(key => [key.slice("preview.state.".length), key as MessageKey])),
   collapsed: "detail.option.collapsed",
   streaming: "detail.option.streaming",
@@ -493,6 +496,9 @@ export function ComponentDetailPage({
   const inspectorStates = states;
 
   const codeSample = useMemo(() => {
+    if (component.name === "SetupWizard") {
+      return 'import { SetupWizard } from "@openbitfun/ui";\n\n// The host owns step state, drafts, validation, and saving.\n<SetupWizard\n  title={title}\n  titleId={titleId}\n  headerActions={<CloseButton />}\n  guideLabel={guideLabel}\n  step={{ ...steps[current], progress: formatProgress(current + 1, steps.length) }}\n  contentMode={steps[current].hasEditor ? "contained" : "scroll"}\n  footer={<StepActions />}\n>\n  <StepForm />\n</SetupWizard>\n\n// For a modal, connect Dialog aria-labelledby to the same titleId.\n';
+    }
     if (component.name === "SplitView") {
       return `import { SplitView } from "@openbitfun/ui";\n\n<SplitView\n  primary={<Chat />}\n  secondary={<Content />}\n  mode={mode}\n  secondarySide={contentSide}\n  rightSize={rightSize}\n  onRightSizeChange={setRightSize}\n  dividerLabel="${t('splitView.resize')}"\n  dividerActions={<SwapButton onClick={swapPanes} />}\n/>`;
     }
@@ -972,6 +978,7 @@ export function ComponentDetailPage({
       return <ThinkingIndicatorPreview key={state} state={state} />;
     }
     if (component.name === "SplitView") return <SplitViewPreview state={state} />;
+    if (component.name === "SetupWizard") return <SetupWizardPreview state={state} />;
 
     if (component.name === "MobileButton") {
       return <MobileButton data-openbitfun-preview-state={state} disabled={state === "disabled"} loading={state === "loading"}>{t("components.preview.actionCardTitle")}</MobileButton>;
diff --git a/design-system/apps/design-lab/src/preview/SetupWizardPreview.css b/design-system/apps/design-lab/src/preview/SetupWizardPreview.css
new file mode 100644
index 0000000000..cb3cc76a9c
--- /dev/null
+++ b/design-system/apps/design-lab/src/preview/SetupWizardPreview.css
@@ -0,0 +1,35 @@
+.setup-wizard-preview { inline-size: 100%; min-inline-size: 0; }
+.setup-wizard-preview[data-narrow="true"] { max-inline-size: 420px; }
+.setup-wizard-preview__surface {
+  block-size: 600px;
+  border-radius: var(--openbitfun-overlay-dialog-surface-radius);
+  box-shadow: var(--openbitfun-shadow-sm);
+}
+.setup-wizard-preview__form {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+  gap: var(--openbitfun-space-5);
+}
+.setup-wizard-preview__form[data-contained="true"] { min-block-size: 0; flex: 1; }
+.setup-wizard-preview__editor {
+  min-block-size: 0;
+  flex: 1;
+  inline-size: 100%;
+  border: 0;
+  padding: 0;
+  resize: none;
+  color: var(--openbitfun-color-content-primary);
+  background: transparent;
+  font: inherit;
+}
+.setup-wizard-preview__editor:focus-visible { outline: var(--openbitfun-border-width-default) solid var(--openbitfun-color-focus-ring); }
+.setup-wizard-preview__note {
+  margin-block: var(--openbitfun-space-4) 0;
+  color: var(--openbitfun-color-content-muted);
+  font-family: var(--openbitfun-type-body-sm-font-family);
+  font-size: var(--openbitfun-type-body-sm-font-size);
+  font-weight: var(--openbitfun-type-body-sm-font-weight);
+  line-height: var(--openbitfun-type-body-sm-line-height);
+  letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
+}
diff --git a/design-system/apps/design-lab/src/preview/SetupWizardPreview.tsx b/design-system/apps/design-lab/src/preview/SetupWizardPreview.tsx
new file mode 100644
index 0000000000..31fa1db3a4
--- /dev/null
+++ b/design-system/apps/design-lab/src/preview/SetupWizardPreview.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useId, useState } from "react";
+import { Button, Field, Input, SetupWizard, Switch } from "@openbitfun/ui";
+import { useI18n } from "../i18n";
+import "./SetupWizardPreview.css";
+
+export function SetupWizardPreview({ state }: { state: string }) {
+  const { t } = useI18n();
+  const formId = useId();
+  const [step, setStep] = useState<0 | 1 | 2>(state === "contained" ? 1 : 0);
+  const [name, setName] = useState("");
+  const [rules, setRules] = useState("");
+  const [network, setNetwork] = useState(false);
+  const [complete, setComplete] = useState(false);
+  useEffect(() => { setStep(state === "contained" ? 1 : 0); setComplete(false); }, [state]);
+  const steps = [
+    { id: "basics", label: t("setupWizard.basics"), title: t("setupWizard.basicsTitle"), description: t("setupWizard.basicsDescription") },
+    { id: "rules", label: t("setupWizard.rules"), title: t("setupWizard.rulesTitle"), description: t("setupWizard.rulesDescription") },
+    { id: "access", label: t("setupWizard.access"), title: t("setupWizard.accessTitle"), description: t("setupWizard.accessDescription") },
+  ] as const;
+  const reset = () => { setStep(0); setName(""); setRules(""); setNetwork(false); setComplete(false); };
+
+  return <div className="setup-wizard-preview" data-narrow={state === "narrow"}>
+    <SetupWizard
+      className="setup-wizard-preview__surface"
+      title={t("setupWizard.title")}
+      headerActions={<Button size="sm" variant="text" onClick={reset}>{t("setupWizard.reset")}</Button>}
+      guideLabel={t("setupWizard.guide")}
+      step={{ ...steps[step], progress: t("setupWizard.progress", { current: step + 1, total: steps.length }) }}
+      contentMode={step === 1 ? "contained" : "scroll"}
+      footer={<>
+        {step > 0 && <Button size="sm" variant="outline" onClick={() => { setStep(step === 2 ? 1 : 0); setComplete(false); }}>{t("setupWizard.back")}</Button>}
+        <Button type="submit" form={formId} size="sm" variant="primary">{t(step === 2 ? "setupWizard.finish" : "setupWizard.next")}</Button>
+      </>}
+    >
+      <form id={formId} className="setup-wizard-preview__form" data-contained={step === 1} onSubmit={event => {
+        event.preventDefault();
+        if (step < 2) setStep(step === 0 ? 1 : 2);
+        else setComplete(true);
+      }}>
+        {step === 0 && <Field label={t("setupWizard.name")}><Input placeholder={t("setupWizard.namePlaceholder")} value={name} onChange={event => setName(event.target.value)} /></Field>}
+        {step === 1 && <>
+          <label htmlFor={`${formId}-rules`}>{t("setupWizard.rules")}</label>
+          <textarea id={`${formId}-rules`} className="setup-wizard-preview__editor" value={rules} onChange={event => setRules(event.target.value)} placeholder={t("setupWizard.rulesPlaceholder")} />
+        </>}
+        {step === 2 && <Field label={t("setupWizard.network")}><Switch checked={network} onCheckedChange={setNetwork} /></Field>}
+        {complete && <p role="status">{t("setupWizard.complete")}</p>}
+      </form>
+    </SetupWizard>
+    <p className="setup-wizard-preview__note">{t("setupWizard.help")}</p>
+  </div>;
+}
diff --git a/design-system/apps/design-lab/src/preview/componentPresentation.ts b/design-system/apps/design-lab/src/preview/componentPresentation.ts
index d09a865863..bec997f0c8 100644
--- a/design-system/apps/design-lab/src/preview/componentPresentation.ts
+++ b/design-system/apps/design-lab/src/preview/componentPresentation.ts
@@ -19,6 +19,7 @@ const presentations: Record<string, ComponentPresentation> = {
   Disclosure: "composition", Composer: "composition", Listbox: "composition", Menu: "composition",
   NavigationPanel: "composition", PageHeader: "composition", ScrollArea: "composition", SplitView: "composition",
   SegmentedControl: "composition", TabGroup: "composition",
+  SetupWizard: "composition",
   Icon: "icons", RollingText: "motion", ShimmerText: "motion", VoiceCallPanel: "motion",
   ThinkingIndicator: "motion",
   MobileBadge: "compact", MobileButton: "compact", MobileIconButton: "compact",
diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index 5f5ded1c35..7f6f88d935 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -183,6 +183,64 @@ the native scrollbar while preserving scrolling. `Menu`, `Listbox`, and
 `scrollbar-gutter`, not local scrollbar colors or show/hide handlers. Monaco
 and terminal renderers keep their own scrollbar APIs.
 
+## Guided configuration
+
+`SetupWizard` provides the split-pane layout for complex, staged configuration.
+It includes the split header, a tinted guide pane, one compact current-step
+indicator, a content viewport, and an independent footer. It has no divider lines.
+The same component can sit inside a `Dialog` or an inline card. Its container
+query stacks the guide above the form when the available width is narrow.
+
+```tsx
+import { Button, Dialog, DialogClose, SetupWizard } from "@openbitfun/ui";
+import { useId } from "react";
+
+const titleId = useId();
+
+<Dialog open={open} onOpenChange={close} size="2xl" aria-labelledby={titleId}>
+  <SetupWizard
+    title="Configure workflow"
+    titleId={titleId}
+    headerActions={<DialogClose />}
+    guideLabel="Configuration guidance"
+    step={{
+      id: step.id,
+      label: step.label,
+      title: step.guideTitle,
+      description: step.guideDescription,
+      progress: formatProgress(current + 1, steps.length),
+    }}
+    contentMode={step.hasEditor ? "contained" : "scroll"}
+    footer={<>
+      <Button onClick={close}>Cancel</Button>
+      {current > 0 && <Button onClick={back}>Back</Button>}
+      <Button type="submit" form={formId} loading={saving}>Next</Button>
+    </>}
+  >
+    <form id={formId} onSubmit={validateAndAdvance}>{stepContent}</form>
+  </SetupWizard>
+</Dialog>
+```
+
+The consumer controls the current step, any number of stages, field drafts,
+validation, focus after navigation, asynchronous work, and submission. A stable
+`step.id` resets only the content scroll position when the stage changes;
+ordinary field updates do not reset scrolling or remount the content. Supply
+localized copy and progress; the package imports no locale catalog or product
+state. The guide announces the new explanation and current step together.
+
+Write the left-hand guide about consequences, scope, or decision criteria.
+Keep field instructions beside their controls on the right. Avoid a second
+step list or repeating the right-hand heading on the left.
+
+Use `contentMode="scroll"` for ordinary forms. `contained` bounds the content
+viewport and delegates scrolling to an editor or other child. In that mode,
+intermediate wrappers must use a flex column with `flex: 1` and `min-height: 0`.
+Size the root through `className` or `style` when its default viewport height
+does not suit the host. Keep validation and loading states in the content and
+action slots. `Dialog` continues to own focus trapping, dismissal, and portals;
+connect its `aria-labelledby` to `SetupWizard.titleId` explicitly.
+
 ## Text overflow
 
 
diff --git a/design-system/packages/ui/src/components/Icon/Icon.tsx b/design-system/packages/ui/src/components/Icon/Icon.tsx
index 97badfc451..853dc58463 100644
--- a/design-system/packages/ui/src/components/Icon/Icon.tsx
+++ b/design-system/packages/ui/src/components/Icon/Icon.tsx
@@ -10,6 +10,7 @@ import {
   ArrowRight,
   ArrowUp,
   ArrowUpRight,
+  BatteryFull,
   Bell,
   Blocks,
   BookOpen,
@@ -92,6 +93,7 @@ import {
   type LucideIcon,
 } from "lucide-react";
 import { classNames } from "../../internal/classNames";
+import { Galaxy } from './galaxy';
 import { LayersPlus } from './layersPlus';
 import gitUrl from "./assets/git.svg";
 import thinkingUrl from "./assets/thinking.svg";
@@ -118,6 +120,7 @@ export const iconNames = [
   "arrow-right",
   "arrow-up",
   "arrow-up-right",
+  "battery-full",
   "bell",
   "book-open",
   "book-search",
@@ -151,6 +154,7 @@ export const iconNames = [
   "folder",
   "folder-open",
   "folder-search",
+  "galaxy",
   "gear",
   "git",
   "git-pull-request",
@@ -246,6 +250,7 @@ const lineGlyphs = {
   "arrow-right": ArrowRight,
   "arrow-up": ArrowUp,
   "arrow-up-right": ArrowUpRight,
+  "battery-full": BatteryFull,
   "bell": Bell,
   "book-open": BookOpen,
   "book-search": BookSearch,
@@ -283,6 +288,7 @@ const lineGlyphs = {
   "folder": Folder,
   "folder-open": FolderOpen,
   "folder-search": FolderSearch,
+  "galaxy": Galaxy,
   "gear": Settings,
   "hourglass": Hourglass,
   "image": Image,
diff --git a/design-system/packages/ui/src/components/Icon/galaxy.ts b/design-system/packages/ui/src/components/Icon/galaxy.ts
new file mode 100644
index 0000000000..5eecb86afe
--- /dev/null
+++ b/design-system/packages/ui/src/components/Icon/galaxy.ts
@@ -0,0 +1,27 @@
+/**
+ * Lucide galaxy, absent from the currently bundled lucide-react 0.560.
+ * Source: https://github.com/lucide-icons/lucide/blob/1.35.0/icons/galaxy.svg
+ * Replace with the package export when the shared Lucide dependency is upgraded.
+ *
+ * ISC License
+ * Copyright (c) 2026 Lucide Icons and Contributors
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+import { createLucideIcon } from 'lucide-react';
+
+export const Galaxy = createLucideIcon('Galaxy', [
+  ['path', { d: 'M16.005 15.108a5.041 6.52 28.25 00-8.008-6.217 5.041 6.52 28.25 008.008 6.217A11.884 7.288-60.76 014.029 7.001', key: 'spiral-outer' }],
+  ['path', { d: 'M17 21h.01', key: 'star-bottom' }],
+  ['path', { d: 'M7 3h.01', key: 'star-top' }],
+  ['path', { d: 'M7.997 8.891a11.885 7.288-60.756 0111.977 8.107', key: 'spiral-inner' }],
+  ['circle', { cx: '12', cy: '12', r: '1', fill: 'currentColor', key: 'core' }],
+]);
diff --git a/design-system/packages/ui/src/components/SetupWizard/SetupWizard.meta.ts b/design-system/packages/ui/src/components/SetupWizard/SetupWizard.meta.ts
new file mode 100644
index 0000000000..f29cea7d6d
--- /dev/null
+++ b/design-system/packages/ui/src/components/SetupWizard/SetupWizard.meta.ts
@@ -0,0 +1,24 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const setupWizardMeta = {
+  name: "SetupWizard",
+  category: "form",
+  maturity: "stable",
+  description: "A controlled split-pane setup layout with effect-oriented guidance, one current-step indicator, form or editor content, and independent actions.",
+  props: [
+    { name: "title", type: "ReactNode" },
+    { name: "titleId", type: "string" },
+    { name: "headerActions", type: "ReactNode" },
+    { name: "guideLabel", type: "string" },
+    { name: "step", type: "SetupWizardStep" },
+    { name: "footer", type: "ReactNode" },
+    { name: "contentMode", type: "scroll | contained", defaultValue: "scroll" },
+    { name: "children", type: "ReactNode" },
+  ],
+  states: ["form", "contained", "narrow"],
+  tokens: [
+    "color.surface.chrome", "color.surface.scene", "color.content.primary", "color.content.muted",
+    "space.2", "space.3", "space.4", "space.5", "space.6", "space.8",
+    "type.heading.dialog.fontSize", "type.heading.page.fontSize", "type.body.lg.fontSize", "type.label.sm.fontSize",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/SetupWizard/SetupWizard.module.css b/design-system/packages/ui/src/components/SetupWizard/SetupWizard.module.css
new file mode 100644
index 0000000000..ffddff99f4
--- /dev/null
+++ b/design-system/packages/ui/src/components/SetupWizard/SetupWizard.module.css
@@ -0,0 +1,167 @@
+@layer openbitfun.components {
+  .root,
+  .layout,
+  .header,
+  .heading,
+  .headerActions,
+  .guide,
+  .contentInner,
+  .footer { box-sizing: border-box; }
+
+  .root {
+    container: setup-wizard / inline-size;
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    min-block-size: 0;
+    block-size: min(780px, 84dvh);
+    overflow: hidden;
+    color: var(--openbitfun-color-content-primary);
+    background: var(--openbitfun-color-surface-scene);
+  }
+
+  .layout {
+    --_setup-wizard-columns: minmax(240px, 0.9fr) minmax(0, 1.3fr);
+    display: grid;
+    flex: 1;
+    min-inline-size: 0;
+    min-block-size: 0;
+    grid-template-columns: var(--_setup-wizard-columns);
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
+  .header {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: var(--_setup-wizard-columns);
+    align-items: stretch;
+  }
+
+  .heading,
+  .headerActions {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    padding: var(--openbitfun-space-6) var(--openbitfun-space-8);
+  }
+
+  .heading,
+  .guide { background: var(--openbitfun-color-surface-chrome); }
+
+  .title {
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--openbitfun-color-content-primary);
+    font-family: var(--openbitfun-type-heading-dialog-font-family);
+    font-size: var(--openbitfun-type-heading-dialog-font-size);
+    font-weight: var(--openbitfun-type-heading-dialog-font-weight);
+    line-height: var(--openbitfun-type-heading-dialog-line-height);
+    letter-spacing: var(--openbitfun-type-heading-dialog-letter-spacing);
+  }
+
+  .headerActions {
+    justify-content: flex-end;
+    gap: var(--openbitfun-space-2);
+  }
+
+  .guide {
+    display: flex;
+    min-block-size: 0;
+    grid-column: 1;
+    grid-row: 2 / -1;
+    overflow-y: auto;
+    padding: var(--openbitfun-space-8);
+  }
+
+  .guideContent {
+    display: flex;
+    min-inline-size: 0;
+    min-block-size: 100%;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--openbitfun-space-8);
+  }
+
+  .guideCopy { margin-block: auto; }
+
+  .progress {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--openbitfun-space-3);
+    color: var(--openbitfun-color-content-muted);
+    font-family: var(--openbitfun-type-label-sm-font-family);
+    font-size: var(--openbitfun-type-label-sm-font-size);
+    font-weight: var(--openbitfun-type-label-sm-font-weight);
+    line-height: var(--openbitfun-type-label-sm-line-height);
+    letter-spacing: var(--openbitfun-type-label-sm-letter-spacing);
+  }
+
+  .step {
+    color: var(--openbitfun-color-content-primary);
+    font-weight: var(--openbitfun-type-label-selected-font-weight);
+  }
+
+  .content {
+    min-inline-size: 0;
+    min-block-size: 0;
+    grid-column: 2;
+    grid-row: 2;
+    scrollbar-gutter: stable both-edges;
+  }
+
+  .contentInner {
+    box-sizing: border-box;
+    display: flex;
+    min-inline-size: 0;
+    min-block-size: 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--openbitfun-space-8);
+  }
+
+  .root[data-content-mode="contained"] .content {
+    overflow: hidden;
+    scrollbar-gutter: auto;
+  }
+
+  .root[data-content-mode="contained"] .contentInner {
+    block-size: 100%;
+    min-block-size: 0;
+    justify-content: flex-start;
+  }
+
+  .footer {
+    display: flex;
+    min-inline-size: 0;
+    grid-column: 2;
+    grid-row: 3;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--openbitfun-space-2);
+    padding: var(--openbitfun-space-4) var(--openbitfun-space-8);
+  }
+
+  @container setup-wizard (max-width: 640px) {
+    .layout {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto auto minmax(0, 1fr) auto;
+    }
+
+    .header { grid-template-columns: minmax(0, 1fr) auto; }
+    .heading,
+    .headerActions { padding: var(--openbitfun-space-4); }
+    .headerActions { background: var(--openbitfun-color-surface-chrome); }
+    .guide {
+      grid-column: 1;
+      grid-row: 2;
+      max-block-size: min(180px, 24dvh);
+      padding: var(--openbitfun-space-4) var(--openbitfun-space-5);
+    }
+    .guideContent { gap: var(--openbitfun-space-4); }
+    .content { grid-column: 1; grid-row: 3; }
+    .contentInner { justify-content: flex-start; padding: var(--openbitfun-space-5); }
+    .footer { grid-column: 1; grid-row: 4; padding-inline: var(--openbitfun-space-5); }
+  }
+}
diff --git a/design-system/packages/ui/src/components/SetupWizard/SetupWizard.tsx b/design-system/packages/ui/src/components/SetupWizard/SetupWizard.tsx
new file mode 100644
index 0000000000..f34c998359
--- /dev/null
+++ b/design-system/packages/ui/src/components/SetupWizard/SetupWizard.tsx
@@ -0,0 +1,77 @@
+import { forwardRef, useEffect, useId, useRef, type HTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import { OverflowText } from "../../primitives/OverflowText";
+import { PageHeader } from "../PageHeader";
+import { ScrollArea } from "../ScrollArea";
+import styles from "./SetupWizard.module.css";
+
+export interface SetupWizardStep {
+  /** Stable identity; changing it resets the content viewport's scroll position. */
+  id: string;
+  label: ReactNode;
+  /** Explain the effect of this choice instead of repeating the form labels. */
+  title: ReactNode;
+  description: ReactNode;
+  /** Localized progress, for example "2 / 3". */
+  progress: ReactNode;
+}
+
+export interface SetupWizardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  /** Use the same id on the containing Dialog's aria-labelledby. */
+  titleId?: string;
+  headerActions?: ReactNode;
+  guideLabel: string;
+  step: SetupWizardStep;
+  footer: ReactNode;
+  /** Contained delegates scrolling to an editor or another bounded child. */
+  contentMode?: "scroll" | "contained";
+}
+
+/** Controlled setup layout. The consumer owns drafts, navigation and validation. */
+export const SetupWizard = forwardRef<HTMLDivElement, SetupWizardProps>(function SetupWizard({
+  children,
+  className,
+  contentMode = "scroll",
+  footer,
+  guideLabel,
+  headerActions,
+  step,
+  title,
+  titleId,
+  ...props
+}, ref) {
+  const generatedTitleId = useId();
+  const viewportRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (viewportRef.current) viewportRef.current.scrollTop = 0;
+  }, [step.id]);
+
+  return (
+    <div {...props} className={classNames(styles.root, className)} data-openbitfun-component="setup-wizard" data-openbitfun-part="root" data-content-mode={contentMode} ref={ref}>
+      <div className={styles.layout} data-openbitfun-component="setup-wizard" data-openbitfun-part="layout">
+        <header className={styles.header} data-openbitfun-component="setup-wizard" data-openbitfun-part="header">
+          <div className={styles.heading} data-openbitfun-component="setup-wizard" data-openbitfun-part="heading">
+            <h2 className={styles.title} id={titleId ?? generatedTitleId} data-openbitfun-component="setup-wizard" data-openbitfun-part="title"><OverflowText>{title}</OverflowText></h2>
+          </div>
+          <div className={styles.headerActions} data-openbitfun-component="setup-wizard" data-openbitfun-part="headerActions">{headerActions}</div>
+        </header>
+        <aside className={styles.guide} aria-label={guideLabel} data-openbitfun-component="setup-wizard" data-openbitfun-part="guide">
+          <div className={styles.guideContent} aria-live="polite" aria-atomic="true">
+            <div className={styles.guideCopy} data-openbitfun-component="setup-wizard" data-openbitfun-part="guideCopy">
+              <PageHeader title={step.title} description={step.description} level={3} />
+            </div>
+            <div className={styles.progress} data-openbitfun-component="setup-wizard" data-openbitfun-part="progress">
+              <span>{step.progress}</span>
+              <span className={styles.step} aria-current="step" data-openbitfun-component="setup-wizard" data-openbitfun-part="step">{step.label}</span>
+            </div>
+          </div>
+        </aside>
+        <ScrollArea className={styles.content} ref={viewportRef} data-openbitfun-component="setup-wizard" data-openbitfun-part="content">
+          <div className={styles.contentInner} data-openbitfun-component="setup-wizard" data-openbitfun-part="contentInner">{children}</div>
+        </ScrollArea>
+        <footer className={styles.footer} data-openbitfun-component="setup-wizard" data-openbitfun-part="footer">{footer}</footer>
+      </div>
+    </div>
+  );
+});
diff --git a/design-system/packages/ui/src/components/SetupWizard/index.ts b/design-system/packages/ui/src/components/SetupWizard/index.ts
new file mode 100644
index 0000000000..cb5cbe566a
--- /dev/null
+++ b/design-system/packages/ui/src/components/SetupWizard/index.ts
@@ -0,0 +1 @@
+export { SetupWizard, type SetupWizardProps, type SetupWizardStep } from "./SetupWizard";
diff --git a/design-system/packages/ui/src/index.ts b/design-system/packages/ui/src/index.ts
index 06e8b378fd..148e5e71b0 100644
--- a/design-system/packages/ui/src/index.ts
+++ b/design-system/packages/ui/src/index.ts
@@ -221,6 +221,7 @@ export {
   type NavigationPanelSeparatorProps,
 } from "./components/NavigationPanel";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
+export { SetupWizard, type SetupWizardProps, type SetupWizardStep } from "./components/SetupWizard";
 export { Radio, type RadioProps, type RadioSize } from "./components/Radio";
 export { RollingText, type RollingTextProps } from "./components/RollingText";
 export { ShimmerText, type ShimmerTextProps } from "./components/ShimmerText";
diff --git a/design-system/packages/ui/src/registry.ts b/design-system/packages/ui/src/registry.ts
index 98afc696d7..b8340a3998 100644
--- a/design-system/packages/ui/src/registry.ts
+++ b/design-system/packages/ui/src/registry.ts
@@ -28,6 +28,7 @@ import { navigationPanelMeta } from "./components/NavigationPanel/NavigationPane
 import { numberInputMeta } from "./components/NumberInput/NumberInput.meta";
 import { numberBadgeMeta } from "./components/NumberBadge/NumberBadge.meta";
 import { pageHeaderMeta } from "./components/PageHeader/PageHeader.meta";
+import { setupWizardMeta } from "./components/SetupWizard/SetupWizard.meta";
 import { radioMeta } from "./components/Radio/Radio.meta";
 import { rollingTextMeta } from "./components/RollingText/RollingText.meta";
 import { shimmerTextMeta } from "./components/ShimmerText/ShimmerText.meta";
@@ -217,6 +218,7 @@ export const componentRegistry = [
   numberBadgeMeta,
   pageDeployToolCardMeta,
   pageHeaderMeta,
+  setupWizardMeta,
   radioMeta,
   pagePublishToolCardMeta,
   prominentToolCardMeta,
diff --git a/design-system/packages/ui/tests/icon.test.mjs b/design-system/packages/ui/tests/icon.test.mjs
index ce4633d70c..85deda0545 100644
--- a/design-system/packages/ui/tests/icon.test.mjs
+++ b/design-system/packages/ui/tests/icon.test.mjs
@@ -8,8 +8,8 @@ import { Icon, iconNames, canonicalIconNames, iconAliases } from "../dist/index.
 import { Network } from "lucide-react";
 
 test("Icon exposes the complete named catalog without duplicate names", () => {
-  assert.equal(iconNames.length, 98);
-  assert.equal(canonicalIconNames.length, 95);
+  assert.equal(iconNames.length, 100);
+  assert.equal(canonicalIconNames.length, 97);
   assert.deepEqual(Object.keys(iconAliases).sort(), ["circle", "download"]);
   for (const name of ["thinking", "git", "duplicate", "chevron-left", "selected", "delete", "waitlist-message", "creative", "ultimate", "standard", "minimal", "arrow-down", "unselected"]) {
     assert.ok(canonicalIconNames.includes(name), name);
@@ -34,7 +34,7 @@ test("Icon exposes the complete named catalog without duplicate names", () => {
   assert.ok(iconNames.includes("chevron-up"));
   assert.ok(iconNames.includes("refresh"));
   assert.ok(iconNames.includes("layers-plus"));
-  for (const name of ["target", "users", "history", "git-pull-request"]) {
+  for (const name of ["target", "users", "history", "git-pull-request", "battery-full", "galaxy"]) {
     assert.ok(canonicalIconNames.includes(name));
     assert.match(renderToStaticMarkup(createElement(Icon, { name })), new RegExp(`lucide-${name}`));
   }
diff --git a/design-system/packages/ui/tests/registry.test.mjs b/design-system/packages/ui/tests/registry.test.mjs
index c9d57572e7..872332bae4 100644
--- a/design-system/packages/ui/tests/registry.test.mjs
+++ b/design-system/packages/ui/tests/registry.test.mjs
@@ -103,6 +103,7 @@ test("registry exposes only the formal stable components", () => {
       "NumberBadge",
       "PageDeployToolCard",
       "PageHeader",
+      "SetupWizard",
       "Radio",
       "PagePublishToolCard",
       "ProminentToolCard",
diff --git a/design-system/packages/ui/tests/setup-wizard.test.mjs b/design-system/packages/ui/tests/setup-wizard.test.mjs
new file mode 100644
index 0000000000..9375360eb4
--- /dev/null
+++ b/design-system/packages/ui/tests/setup-wizard.test.mjs
@@ -0,0 +1,33 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Button, SetupWizard } from "../dist/index.js";
+
+test("SetupWizard publishes localized guidance and one current-step indicator without an overlay", () => {
+  const markup = renderToStaticMarkup(createElement(SetupWizard, {
+    title: "Configure workflow", titleId: "workflow-title", guideLabel: "Setup guidance",
+    step: { id: "rules", title: "Keep results consistent", description: "Rules apply to every run.", label: "Working rules", progress: "2 of 5" },
+    headerActions: createElement(Button, null, "Close"),
+    footer: createElement(Button, { form: "workflow-form", type: "submit" }, "Continue"),
+  }, createElement("form", { id: "workflow-form" })));
+  assert.match(markup, /id="workflow-title"/);
+  assert.match(markup, /aria-label="Setup guidance"/);
+  assert.match(markup, /aria-live="polite" aria-atomic="true"/);
+  assert.equal((markup.match(/aria-current="step"/g) ?? []).length, 1);
+  assert.match(markup, /2 of 5/);
+  assert.match(markup, /Rules apply to every run\./);
+  assert.match(markup, /form="workflow-form"/);
+  assert.doesNotMatch(markup, /role="(?:dialog|tablist|tab)"/);
+});
+
+test("SetupWizard contains editor content without requiring three stages or navigation callbacks", () => {
+  const markup = renderToStaticMarkup(createElement(SetupWizard, {
+    title: "Rules", guideLabel: "Guidance", contentMode: "contained",
+    step: { id: "only", title: "Shared defaults", description: "Applied to future runs.", label: "Rules", progress: "1 / 1" },
+    footer: createElement(Button, null, "Save"),
+  }, createElement("textarea", { defaultValue: "Keep this draft" })));
+  assert.match(markup, /data-content-mode="contained"/);
+  assert.match(markup, /<textarea>Keep this draft<\/textarea>/);
+  assert.match(markup, /1 \/ 1/);
+});
diff --git a/scripts/audit-appearance-contracts.mjs b/scripts/audit-appearance-contracts.mjs
index b0a57f44c9..4ad000e7b5 100644
--- a/scripts/audit-appearance-contracts.mjs
+++ b/scripts/audit-appearance-contracts.mjs
@@ -10,6 +10,7 @@ const registryFile = path.join(sourceRoot, 'infrastructure', 'appearance', 'regi
 const retiredOwnershipFile = path.join(sourceRoot, 'infrastructure', 'appearance', 'registry', 'appearanceSourceOwnership.ts');
 const externalAppearanceContractFiles = [
   path.join(repoRoot, 'design-system', 'packages', 'ui', 'src', 'components', 'SplitView', 'SplitView.tsx'),
+  path.join(repoRoot, 'design-system', 'packages', 'ui', 'src', 'components', 'SetupWizard', 'SetupWizard.tsx'),
   path.join(repoRoot, 'design-system', 'packages', 'ui', 'src', 'components', 'ConfirmDialog', 'ConfirmDialog.tsx'),
   ...Object.values(flowChatAppearanceSources).map(file => path.join(repoRoot, file)),
   path.join(repoRoot, 'packages/flow-chat-presentation/src/terminal/TerminalOutputRenderer.tsx'),
diff --git a/src/web-ui/AGENTS-CN.md b/src/web-ui/AGENTS-CN.md
index d9b3be5a63..e2960af273 100644
--- a/src/web-ui/AGENTS-CN.md
+++ b/src/web-ui/AGENTS-CN.md
@@ -79,3 +79,11 @@ pnpm run check:web
 以上依次用于 locale 资源、locale contract/shared terms、i18n runtime/namespace loading 和普通 Web UI 代码。
 `check:web` 会执行类型检查，以及 CI 使用的 Appearance contract、主题颜色和主题视觉治理门禁，确保渲染 DOM
 或样式回归能在本地发现。完整 lint、build 与大范围测试由 CI 兜底，除非本地改动确实需要复现。
+
+导航分割线拖拽、弹性反馈、取消操作与键盘调宽使用以下聚焦检查：
+
+```bash
+pnpm --dir src/web-ui run test:run src/app/layout/useNavResize.test.tsx src/app/layout/WorkspaceBody.presentation.test.ts
+```
+
+这些本地 DOM 测试覆盖手势状态和弹簧收敛，不代表原生 WebView 渲染或真实远程场景验证。
diff --git a/src/web-ui/AGENTS.md b/src/web-ui/AGENTS.md
index 8d8c77eec6..455d1957e8 100644
--- a/src/web-ui/AGENTS.md
+++ b/src/web-ui/AGENTS.md
@@ -108,6 +108,15 @@ deliberate layout transitions or animate virtualized content. Rely on CI for
 full lint, build, and broad test coverage unless the local change specifically
 needs it.
 
+For navigation-divider dragging, elastic feedback, cancellation, and keyboard resizing:
+
+```bash
+pnpm --dir src/web-ui run test:run src/app/layout/useNavResize.test.tsx src/app/layout/WorkspaceBody.presentation.test.ts
+```
+
+These local DOM fixtures cover gesture state and spring settling, not native
+WebView rendering or live remote scenarios.
+
 For Appearance descriptor changes, also exercise production registration; its ID
 and property validation goes beyond the static DOM audit:
 
diff --git a/src/web-ui/src/app/layout/WorkspaceBody.scss b/src/web-ui/src/app/layout/WorkspaceBody.scss
index 92dafa5210..7ca4649816 100644
--- a/src/web-ui/src/app/layout/WorkspaceBody.scss
+++ b/src/web-ui/src/app/layout/WorkspaceBody.scss
@@ -8,7 +8,7 @@
 $_nav-width: 300px;
 $_nav-collapsed-width: 76px;
 $_nav-bar-height: var(--openbitfun-layout-toolbar-md-height);
-$_resize-target-width: 6px;
+$_resize-target-width: 12px;
 
 .openbitfun-workspace-body {
   --nav-width: #{$_nav-width};
@@ -112,12 +112,55 @@ $_resize-target-width: 6px;
   top: 0;
   bottom: 0;
   // Center the resize hit target on the navigation / scene boundary. The
-  // scene surface owns the visual feedback so the hit target stays invisible.
+  // scene surface owns the edge; the short grip supplies elastic feedback.
   left: calc(var(--nav-width) - #{$_resize-target-width * 0.5});
   z-index: 10;
   width: $_resize-target-width;
   cursor: ew-resize;
   background: transparent;
+  touch-action: none;
+  outline: none;
+
+  // Once pulled away, keep the grip reachable on either side during the drag
+  // and release. At rest the normal hit target stays on the boundary.
+  &[data-resize-feedback]::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 48px;
+    height: 80px;
+    transform: translate(-50%, -50%);
+  }
+
+  &[data-resize-feedback],
+  &:focus-visible {
+    .openbitfun-workspace-body__nav-grip { opacity: 1; }
+  }
+
+  &:focus-visible .openbitfun-workspace-body__nav-grip {
+    color: var(--openbitfun-color-focus-ring);
+  }
+}
+
+.openbitfun-workspace-body__nav-grip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 48px;
+  height: 120px;
+  overflow: visible;
+  transform: translate(-50%, -50%);
+  color: var(--openbitfun-color-border-strong);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
+    color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+}
+
+.openbitfun-is-resizing-nav .openbitfun-workspace-body__nav-grip {
+  opacity: 1;
 }
 
 .openbitfun-workspace-body__scene-area {
@@ -173,6 +216,10 @@ $_resize-target-width: 6px;
 }
 
 @media (hover: hover) and (pointer: fine) {
+  .openbitfun-workspace-body__nav-divider:hover:not(:focus-visible) .openbitfun-workspace-body__nav-grip {
+    opacity: 1;
+  }
+
   .openbitfun-workspace-body__nav-divider:hover ~ .openbitfun-workspace-body__scene-area {
     .openbitfun-workspace-body__scene-surface::after {
       border-color: var(--openbitfun-color-border-subtle);
@@ -248,7 +295,8 @@ $_resize-target-width: 6px;
     transition: none;
   }
 
-  .openbitfun-workspace-body__scene-surface::after {
+  .openbitfun-workspace-body__scene-surface::after,
+  .openbitfun-workspace-body__nav-grip {
     transition: none;
   }
 }
diff --git a/src/web-ui/src/app/layout/WorkspaceBody.tsx b/src/web-ui/src/app/layout/WorkspaceBody.tsx
index a2c2b4a72f..fef6093f6f 100644
--- a/src/web-ui/src/app/layout/WorkspaceBody.tsx
+++ b/src/web-ui/src/app/layout/WorkspaceBody.tsx
@@ -10,7 +10,7 @@
  *     SceneViewport (flex:1 — active scene content)
  */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useId, useRef, useState } from 'react';
 import { useCurrentWorkspace } from '../../infrastructure/contexts/WorkspaceContext';
 import { NavBar } from '../components/NavBar';
 import NavPanel from '../components/NavPanel/NavPanel';
@@ -20,6 +20,8 @@ import { SceneViewport } from '../scenes';
 import TerminalActionBridge from '../scenes/terminal/TerminalActionBridge';
 import { useApp } from '../hooks/useApp';
 import { selectActiveSceneId, useSceneStore } from '../stores/sceneStore';
+import { useI18n } from '@/infrastructure/i18n';
+import { useNavResize } from './useNavResize';
 import './WorkspaceBody.scss';
 
 const NAV_DEFAULT_WIDTH = 300;
@@ -48,6 +50,8 @@ const WorkspaceBody: React.FC<WorkspaceBodyProps> = ({
   isMaximized = false,
   sceneOverlay,
 }) => {
+  const { t } = useI18n('components');
+  const navId = useId();
   const { workspace: currentWorkspace } = useCurrentWorkspace();
   const { state, toggleLeftPanel } = useApp();
   const activeSceneId = useSceneStore(selectActiveSceneId);
@@ -55,84 +59,19 @@ const WorkspaceBody: React.FC<WorkspaceBodyProps> = ({
   const [navWidth, setNavWidth] = useState(NAV_DEFAULT_WIDTH);
   const navAreaRef = useRef<HTMLDivElement>(null);
   const navDividerRef = useRef<HTMLDivElement>(null);
-  // Active drag cleanup, so window listeners never leak if we unmount mid-drag.
-  const dragCleanupRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.();
-    };
-  }, []);
-
-  const handleNavCollapseDragStart = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.button !== 0 || isNavCollapsed) return;
-    event.preventDefault();
-
-    const startX = event.clientX;
-    const startWidth = navWidth;
-    let latestWidth = startWidth;
-    let hasCollapsed = false;
-    let frameId: number | null = null;
-
-    document.body.classList.add('openbitfun-is-dragging-nav-collapse');
-    document.body.classList.add('openbitfun-is-resizing-nav');
-
-    // During the drag we bypass React entirely: write the --nav-width CSS
-    // variable straight to the two elements that consume it (rAF-merged).
-    // React state is committed once on mouseup.
-    const applyWidth = () => {
-      frameId = null;
-      const value = `${latestWidth}px`;
-      navAreaRef.current?.style.setProperty('--nav-width', value);
-      navDividerRef.current?.style.setProperty('--nav-width', value);
-    };
-
-    const handleMouseMove = (moveEvent: MouseEvent) => {
-      if (hasCollapsed) return;
-      const deltaX = moveEvent.clientX - startX;
-      const rawWidth = startWidth + deltaX;
-
-      // Collapse only after the width hits minimum AND continues left by COLLAPSE_THRESHOLD
-      if (rawWidth <= NAV_MIN_WIDTH - COLLAPSE_THRESHOLD) {
-        hasCollapsed = true;
-        toggleLeftPanel();
-        cleanup();
-        return;
-      }
-      latestWidth = Math.min(NAV_MAX_WIDTH, Math.max(NAV_MIN_WIDTH, rawWidth));
-      if (frameId === null) {
-        frameId = requestAnimationFrame(applyWidth);
-      }
-    };
-
-    const handleMouseUp = () => cleanup();
-
-    function cleanup() {
-      if (frameId !== null) {
-        cancelAnimationFrame(frameId);
-        frameId = null;
-      }
-      // Flush the final width synchronously, while `openbitfun-is-resizing-nav`
-      // still suppresses the width transition. Without this, a drop that lands
-      // between two animation frames leaves the DOM at the last painted width:
-      // React only rewrites the inline var when `navWidth` actually changes, so
-      // ending a drag back on the previous width would strand the DOM out of
-      // sync with state, and any other drop would glide to its final width
-      // ($motion-base) while the divider's `left` jumps instantly.
-      applyWidth();
-      document.body.classList.remove('openbitfun-is-dragging-nav-collapse');
-      document.body.classList.remove('openbitfun-is-resizing-nav');
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('mouseup', handleMouseUp);
-      dragCleanupRef.current = null;
-      // Commit the final width through React once.
-      setNavWidth(latestWidth);
-    }
-
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
-    dragCleanupRef.current = cleanup;
-  }, [isNavCollapsed, navWidth, toggleLeftPanel]);
+  const navGripRef = useRef<SVGPathElement>(null);
+  const navResize = useNavResize({
+    areaRef: navAreaRef,
+    dividerRef: navDividerRef,
+    gripRef: navGripRef,
+    width: navWidth,
+    minWidth: NAV_MIN_WIDTH,
+    maxWidth: NAV_MAX_WIDTH,
+    collapseThreshold: COLLAPSE_THRESHOLD,
+    collapsed: isNavCollapsed,
+    onWidthChange: setNavWidth,
+    onCollapse: toggleLeftPanel,
+  });
 
   return (
     <div
@@ -156,6 +95,7 @@ const WorkspaceBody: React.FC<WorkspaceBodyProps> = ({
 
       {/* Left: nav history bar + navigation sidebar — always rendered for slide animation */}
       <div
+        id={navId}
         ref={navAreaRef}
         className={`openbitfun-workspace-body__nav-area${isNavCollapsed ? ' is-collapsed' : ''}`}
         style={isNavCollapsed ? undefined : { '--nav-width': `${navWidth}px` } as React.CSSProperties}
@@ -177,12 +117,23 @@ const WorkspaceBody: React.FC<WorkspaceBodyProps> = ({
           ref={navDividerRef}
           className="openbitfun-workspace-body__nav-divider"
           style={{ '--nav-width': `${navWidth}px` } as React.CSSProperties}
-          onMouseDown={handleNavCollapseDragStart}
+          {...navResize}
           role="separator"
-          aria-hidden="true"
+          tabIndex={0}
+          aria-label={t('canvas.resizePanes')}
+          aria-orientation="vertical"
+          aria-controls={navId}
+          aria-valuemin={NAV_MIN_WIDTH}
+          aria-valuemax={NAV_MAX_WIDTH}
+          aria-valuenow={navWidth}
           data-openbitfun-scene="workbench"
           data-openbitfun-part="navDivider"
-        />
+          data-openbitfun-theme-scope="chrome"
+        >
+          <svg className="openbitfun-workspace-body__nav-grip" viewBox="0 0 48 120" aria-hidden="true" focusable="false">
+            <path ref={navGripRef} d="M 24 44 L 24 76" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
+          </svg>
+        </div>
       )}
 
       {/* Right: visual scene surface + any shell-level overlay */}
diff --git a/src/web-ui/src/app/layout/useNavResize.test.tsx b/src/web-ui/src/app/layout/useNavResize.test.tsx
new file mode 100644
index 0000000000..39d2268e9d
--- /dev/null
+++ b/src/web-ui/src/app/layout/useNavResize.test.tsx
@@ -0,0 +1,300 @@
+// @vitest-environment jsdom
+import React, { act, useRef, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useNavResize } from './useNavResize';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('navigation resize interaction', () => {
+  let root: Root;
+  let container: HTMLDivElement;
+  let frames: Map<number, FrameRequestCallback>;
+  let nextFrame: number;
+  let now: number;
+  let reducedMotion: boolean;
+  let preferenceChanged: () => void;
+  let committed: ReturnType<typeof vi.fn>;
+  let collapse: ReturnType<typeof vi.fn>;
+  let captured: Set<number>;
+
+  function Harness({ collapsed = false }: { collapsed?: boolean }) {
+    const [width, setWidth] = useState(300);
+    const areaRef = useRef<HTMLDivElement>(null);
+    const dividerRef = useRef<HTMLDivElement>(null);
+    const gripRef = useRef<SVGPathElement>(null);
+    const handlers = useNavResize({
+      areaRef, dividerRef, gripRef, width, minWidth: 216, maxWidth: 480,
+      collapseThreshold: 64, collapsed,
+      onWidthChange: value => { committed(value); setWidth(value); }, onCollapse: collapse,
+    });
+    return <>
+      <div data-testid="area" ref={areaRef} style={{ '--nav-width': `${width}px` } as React.CSSProperties} />
+      {!collapsed && <div data-testid="divider" ref={dividerRef} {...handlers} style={{ '--nav-width': `${width}px` } as React.CSSProperties}>
+        <svg><path ref={gripRef} d="M 24 44 L 24 76" strokeWidth="3" /></svg>
+      </div>}
+    </>;
+  }
+
+  const area = () => container.querySelector<HTMLElement>('[data-testid="area"]')!;
+  const divider = () => container.querySelector<HTMLElement>('[data-testid="divider"]')!;
+  const grip = () => container.querySelector('path')!;
+  const geometry = () => grip().getAttribute('d')!.match(/-?\d+(?:\.\d+)?/g)!.map(Number);
+  const shape = () => {
+    const points = geometry();
+    return {
+      centerX: points.length === 4 ? (points[0] + points[2]) / 2
+        : (points[0] + 3 * points[2] + 3 * points[4] + points[6]) / 8,
+      endX: points[0],
+      height: points.at(-1)! - points[1],
+      thickness: Number(grip().getAttribute('stroke-width')),
+    };
+  };
+  const render = (collapsed = false) => act(() => root.render(<Harness collapsed={collapsed} />));
+  function pointer(type: string, x: number, pointerId = 1, button = 0) {
+    act(() => {
+      const event = new MouseEvent(type, { clientX: x, button, bubbles: true, cancelable: true });
+      Object.defineProperty(event, 'pointerId', { value: pointerId });
+      (type === 'pointerdown' || type === 'lostpointercapture' ? divider() : window).dispatchEvent(event);
+    });
+  }
+  const key = (value: string, shiftKey = false) => act(() => divider().dispatchEvent(
+    new KeyboardEvent('keydown', { key: value, shiftKey, bubbles: true, cancelable: true }),
+  ));
+  const paint = (count = 1, interval = 16) => act(() => {
+    for (let i = 0; i < count; i++) {
+      now += interval;
+      const pending = [...frames.values()];
+      frames.clear();
+      pending.forEach(callback => callback(now));
+    }
+  });
+
+  beforeEach(() => {
+    frames = new Map(); nextFrame = 0; now = 0; reducedMotion = false;
+    committed = vi.fn(); collapse = vi.fn(); captured = new Set();
+    vi.spyOn(performance, 'now').mockImplementation(() => now);
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+      frames.set(++nextFrame, callback); return nextFrame;
+    });
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => frames.delete(id));
+    vi.stubGlobal('matchMedia', () => ({
+      get matches() { return reducedMotion; },
+      addEventListener: (_event: string, callback: () => void) => { preferenceChanged = callback; },
+      removeEventListener: vi.fn(),
+    }));
+    container = document.createElement('div'); document.body.appendChild(container);
+    root = createRoot(container);
+    render();
+    Object.assign(divider(), {
+      setPointerCapture: (id: number) => captured.add(id),
+      hasPointerCapture: (id: number) => captured.has(id),
+      releasePointerCapture: (id: number) => captured.delete(id),
+    });
+  });
+
+  afterEach(() => {
+    act(() => root.unmount()); container.remove();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+    document.body.style.userSelect = '';
+  });
+
+  it('keeps width under the pointer while the grip bends, then springs back and stops scheduling frames', () => {
+    pointer('pointerdown', 300); pointer('pointermove', 370); paint();
+    expect(area().style.getPropertyValue('--nav-width')).toBe('370px');
+    expect(divider().style.getPropertyValue('--nav-width')).toBe('370px');
+    expect(shape().centerX).toBeGreaterThan(24);
+    expect(committed).not.toHaveBeenCalled();
+    pointer('pointerup', 382);
+    expect(committed).toHaveBeenCalledExactlyOnceWith(382);
+    expect(divider().getAttribute('data-resize-feedback')).toBe('settling');
+    paint(100);
+    expect(shape().centerX).toBe(24);
+    expect(shape().height).toBe(32);
+    expect(shape().thickness).toBe(3);
+    expect(divider().hasAttribute('data-resize-feedback')).toBe(false);
+    expect(frames.size).toBe(0);
+    expect(captured.size).toBe(0);
+  });
+
+  it.each([-1, 1])('starts on the boundary and separates progressively toward a %s pull, including reversals', direction => {
+    expect(shape().centerX).toBe(24);
+    expect(shape().endX).toBe(24);
+    pointer('pointerdown', 300);
+    paint(6);
+    expect(shape().centerX).toBe(24);
+    expect(shape().endX).toBe(24);
+    let firstSeparation = 0;
+    for (let i = 1; i <= 6; i++) {
+      now += 16;
+      pointer('pointermove', 300 + direction * i * 10);
+      paint();
+      if (i === 1) firstSeparation = (shape().endX - 24) * direction;
+    }
+    expect(firstSeparation).toBeGreaterThan(0);
+    expect((shape().endX - 24) * direction).toBeGreaterThan(firstSeparation);
+    expect((shape().endX - 24) * direction).toBeGreaterThan(1);
+    expect((shape().centerX - 24) * direction).toBeGreaterThan(1.5);
+    expect(Math.abs(shape().centerX - 24)).toBeLessThan(8);
+    for (let i = 1; i <= 6; i++) {
+      now += 16;
+      pointer('pointermove', 300 + direction * (60 - i * 10));
+      paint();
+    }
+    expect((shape().centerX - 24) * direction).toBeLessThan(-1.5);
+    expect(committed).not.toHaveBeenCalled();
+    pointer('pointerup', 300); paint(100);
+    expect(shape().endX).toBe(24);
+    expect(shape().centerX).toBe(24);
+    expect(frames.size).toBe(0);
+  });
+
+  it('gives a visible stretch and a small release recoil, with a constant stroke width', () => {
+    pointer('pointerdown', 300);
+    for (let i = 1; i <= 10; i++) {
+      now += 16;
+      pointer('pointermove', 300 + i * 12);
+      paint();
+      expect(shape().thickness).toBe(3);
+    }
+    expect(shape().height).toBeGreaterThan(50);
+    expect(shape().height).toBeLessThanOrEqual(74);
+    paint(90);
+    expect(shape().centerX).toBe(24);
+    expect(shape().height).toBe(32);
+    expect(shape().thickness).toBe(3);
+
+    // Releasing a fresh pull gives a small recoil, capped at two pixels.
+    pointer('pointermove', 460); paint(5);
+    const pulledHeight = shape().height;
+    pointer('pointerup', 460);
+    const heights: number[] = [];
+    for (let i = 0; i < 100; i++) {
+      paint(); heights.push(shape().height);
+      expect(shape().thickness).toBe(3);
+    }
+    expect(pulledHeight).toBeGreaterThan(40);
+    expect(Math.min(...heights)).toBeGreaterThanOrEqual(30);
+    expect(Math.min(...heights)).toBeLessThan(31.8);
+    expect(Math.max(...heights)).toBeLessThanOrEqual(74);
+    expect(shape().height).toBe(32);
+    expect(shape().thickness).toBe(3);
+    expect(frames.size).toBe(0);
+  });
+
+  it('gives the same pull feedback when pointer events are coalesced or delivered more frequently', () => {
+    const drag = (samplesPerFrame: number) => {
+      pointer('pointerdown', 300);
+      for (let frame = 0; frame < 10; frame++) {
+        for (let sample = 1; sample <= samplesPerFrame; sample++) {
+          now += 16 / samplesPerFrame;
+          pointer('pointermove', 300 + (frame + sample / samplesPerFrame) * 8);
+        }
+        paint(1, 0);
+      }
+      const result = shape();
+      pointer('pointercancel', 380);
+      return result;
+    };
+    const coalesced = drag(1);
+    const frequent = drag(4);
+    expect(frequent.centerX).toBeCloseTo(coalesced.centerX, 5);
+    expect(frequent.height).toBeCloseTo(coalesced.height, 5);
+    expect(frequent.thickness).toBeCloseTo(coalesced.thickness, 5);
+  });
+
+  it('flushes the final release and a return to the old width even between animation frames', () => {
+    pointer('pointerdown', 300); pointer('pointermove', 360); paint();
+    pointer('pointerup', 300);
+    expect(area().style.getPropertyValue('--nav-width')).toBe('300px');
+    expect(divider().style.getPropertyValue('--nav-width')).toBe('300px');
+    expect(committed).toHaveBeenCalledExactlyOnceWith(300);
+    pointer('pointerdown', 300); pointer('pointerup', 410);
+    expect(committed).toHaveBeenLastCalledWith(410);
+    expect(area().style.getPropertyValue('--nav-width')).toBe('410px');
+  });
+
+  it('adds bounded elastic resistance at both limits and preserves drag-to-collapse', () => {
+    pointer('pointerdown', 300); pointer('pointermove', 10000); paint(100);
+    expect(area().style.getPropertyValue('--nav-width')).toBe('480px');
+    expect(shape().centerX).toBeGreaterThan(24);
+    expect(shape().centerX).toBeLessThan(44.4);
+    pointer('pointermove', 180); paint(100);
+    expect(area().style.getPropertyValue('--nav-width')).toBe('216px');
+    expect(shape().centerX).toBeLessThan(24);
+    expect(collapse).not.toHaveBeenCalled();
+    pointer('pointermove', 152); pointer('pointerup', 100);
+    expect(collapse).toHaveBeenCalledOnce();
+    expect(committed).toHaveBeenCalledExactlyOnceWith(216);
+    expect(frames.size).toBe(0);
+  });
+
+  it.each(['pointercancel', 'lostpointercapture', 'Escape', 'blur', 'resize', 'collapse', 'unmount'])(
+    'restores geometry, selection and capture without committing when interrupted by %s', reason => {
+      document.body.style.userSelect = 'text';
+      pointer('pointerdown', 300); pointer('pointermove', 380); paint();
+      if (reason === 'Escape') key('Escape');
+      else if (reason === 'blur' || reason === 'resize') act(() => window.dispatchEvent(new Event(reason)));
+      else if (reason === 'collapse') render(true);
+      else if (reason === 'unmount') act(() => root.render(null));
+      else pointer(reason, 380);
+      if (reason !== 'unmount') expect(area().style.getPropertyValue('--nav-width')).toBe('300px');
+      expect(committed).not.toHaveBeenCalled();
+      expect(collapse).not.toHaveBeenCalled();
+      expect(document.body.style.userSelect).toBe('text');
+      expect(document.body.classList.contains('openbitfun-is-resizing-nav')).toBe(false);
+      expect(document.body.classList.contains('openbitfun-is-dragging-nav-collapse')).toBe(false);
+      expect(captured.size).toBe(0);
+      expect(frames.size).toBe(0);
+      pointer('pointerup', 400);
+      expect(committed).not.toHaveBeenCalled();
+    },
+  );
+
+  it('ignores secondary buttons and other pointers throughout an active drag', () => {
+    pointer('pointerdown', 300, 1, 2);
+    expect(captured.size).toBe(0);
+    pointer('pointerdown', 300);
+    pointer('pointerdown', 200, 2); pointer('pointermove', 100, 2);
+    pointer('pointercancel', 100, 2); pointer('pointerup', 100, 2);
+    expect(committed).not.toHaveBeenCalled();
+    expect(captured.has(1)).toBe(true);
+    pointer('pointerup', 340);
+    expect(committed).toHaveBeenCalledExactlyOnceWith(340);
+  });
+
+  it('can reverse rapidly and re-grab during the release spring without stale commits', () => {
+    pointer('pointerdown', 300);
+    for (const x of [440, 220, 460, 240, 400]) {
+      pointer('pointermove', x); paint();
+      expect(shape().centerX).toBeGreaterThanOrEqual(3.6);
+      expect(shape().centerX).toBeLessThanOrEqual(44.4);
+    }
+    pointer('pointerup', 400); paint(2);
+    pointer('pointerdown', 400); pointer('pointerup', 360); paint(100);
+    expect(committed.mock.calls).toEqual([[400], [360]]);
+    expect(area().style.getPropertyValue('--nav-width')).toBe('360px');
+    expect(frames.size).toBe(0);
+  });
+
+  it('keeps resizing available with reduced motion and settles immediately when the preference changes', () => {
+    pointer('pointerdown', 300); pointer('pointermove', 360); paint();
+    reducedMotion = true; act(() => preferenceChanged());
+    expect(frames.size).toBe(0);
+    expect(shape().centerX).toBe(24);
+    pointer('pointermove', 390); pointer('pointerup', 390);
+    expect(committed).toHaveBeenCalledExactlyOnceWith(390);
+    expect(area().style.getPropertyValue('--nav-width')).toBe('390px');
+    expect(frames.size).toBe(0);
+  });
+
+  it('supports keyboard width changes without decorative motion', () => {
+    key('ArrowLeft'); expect(committed).toHaveBeenLastCalledWith(290);
+    key('ArrowRight', true); expect(committed).toHaveBeenLastCalledWith(330);
+    key('Home'); expect(committed).toHaveBeenLastCalledWith(216);
+    key('ArrowLeft'); expect(committed).toHaveBeenLastCalledWith(216);
+    key('End'); expect(committed).toHaveBeenLastCalledWith(480);
+    expect(frames.size).toBe(0);
+  });
+});
diff --git a/src/web-ui/src/app/layout/useNavResize.ts b/src/web-ui/src/app/layout/useNavResize.ts
new file mode 100644
index 0000000000..64741a7575
--- /dev/null
+++ b/src/web-ui/src/app/layout/useNavResize.ts
@@ -0,0 +1,246 @@
+import { useCallback, useLayoutEffect, useRef, type KeyboardEvent, type PointerEvent, type RefObject } from 'react';
+import { isReducedMotionPreferred } from '@/shared/utils/motionPreference';
+
+interface NavResizeOptions {
+  areaRef: RefObject<HTMLDivElement | null>;
+  dividerRef: RefObject<HTMLDivElement | null>;
+  gripRef: RefObject<SVGPathElement | null>;
+  width: number;
+  minWidth: number;
+  maxWidth: number;
+  collapseThreshold: number;
+  collapsed: boolean;
+  onWidthChange: (width: number) => void;
+  onCollapse: () => void;
+}
+
+const REST_LENGTH = 32;
+const MAX_BEND = 14;
+const MAX_STRETCH = 42;
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+// Resistance approaches a limit smoothly, so pulling harder never makes the
+// decorative grip escape its hit target or distort the navigation contents.
+const rubberBand = (distance: number) => MAX_BEND * distance / (36 + Math.abs(distance));
+
+interface Spring { position: number; velocity: number }
+function advance(spring: Spring, target: number, dt: number, active: boolean) {
+  // Track the pull firmly, then allow one small recoil before settling.
+  const stiffness = active ? 690 : 430;
+  const damping = active ? 47 : 29;
+  spring.velocity += ((target - spring.position) * stiffness - spring.velocity * damping) * dt;
+  spring.position += spring.velocity * dt;
+  if (Math.abs(spring.position - target) < 0.02 && Math.abs(spring.velocity) < 0.1) {
+    spring.position = target;
+    spring.velocity = 0;
+  }
+}
+
+/** The pane tracks directly; the grip stretches and bows in the pull direction. */
+export function useNavResize({
+  areaRef, dividerRef, gripRef, width, minWidth, maxWidth, collapseThreshold,
+  collapsed, onWidthChange, onCollapse,
+}: NavResizeOptions) {
+  const dragRef = useRef<((commit: boolean) => void) | null>(null);
+  const animationRef = useRef<number | null>(null);
+  const bend = useRef<Spring>({ position: 0, velocity: 0 });
+  const length = useRef<Spring>({ position: REST_LENGTH, velocity: 0 });
+  const pressure = useRef(0);
+  const pullVelocity = useRef(0);
+  const lastTime = useRef<number | null>(null);
+
+  const paintGrip = useCallback(() => {
+    const size = clamp(length.current.position, REST_LENGTH - 2, REST_LENGTH + MAX_STRETCH);
+    const half = size / 2;
+    // Separation grows with the signed pull, starting at zero on the edge.
+    // Sharing the bow's spring also brings the entire grip home on release.
+    const lift = bend.current.position * 0.45;
+    const endX = 24 + lift + bend.current.position * 0.3;
+    const controlX = 24 + lift + bend.current.position * 1.2333;
+    gripRef.current?.setAttribute('d', [
+      `M ${endX} ${60 - half}`,
+      `C ${controlX} ${60 - half * 0.44} ${controlX} ${60 + half * 0.44} ${endX} ${60 + half}`,
+    ].join(' '));
+  }, [gripRef]);
+
+  const resetFeedback = useCallback(() => {
+    if (animationRef.current !== null) cancelAnimationFrame(animationRef.current);
+    animationRef.current = null;
+    lastTime.current = null;
+    pressure.current = 0;
+    pullVelocity.current = 0;
+    bend.current = { position: 0, velocity: 0 };
+    length.current = { position: REST_LENGTH, velocity: 0 };
+    dividerRef.current?.removeAttribute('data-resize-feedback');
+    paintGrip();
+  }, [dividerRef, paintGrip]);
+
+  const animateFeedback = useCallback(function schedule() {
+    if (isReducedMotionPreferred()) { resetFeedback(); return; }
+    if (animationRef.current !== null) return;
+    animationRef.current = requestAnimationFrame(time => {
+      animationRef.current = null;
+      // Substeps keep the spring stable across low frame rates and wakeups.
+      let remaining = Math.min((time - (lastTime.current ?? time - 16)) / 1000, 0.04);
+      lastTime.current = time;
+      const active = dragRef.current !== null;
+      while (remaining > 0) {
+        const dt = Math.min(remaining, 1 / 120);
+        // Velocity comes from elapsed pointer time, not a kick per event.
+        // When the hand pauses, the stretched grip relaxes back into a pill.
+        pullVelocity.current *= Math.exp(-dt / 0.075);
+        if (Math.abs(pullVelocity.current) < 0.5) pullVelocity.current = 0;
+        const pull = active ? pullVelocity.current * 0.052 + pressure.current : 0;
+        const targetBend = rubberBand(pull);
+        const tension = active ? 1 - Math.exp(-(Math.abs(pullVelocity.current) / 280 + Math.abs(pressure.current) / 50)) : 0;
+        const targetLength = REST_LENGTH + tension * MAX_STRETCH;
+        advance(bend.current, targetBend, dt, active);
+        advance(length.current, targetLength, dt, active);
+        remaining -= dt;
+      }
+      // A rapid reversal must stay inside the SVG even before it settles.
+      bend.current.position = clamp(bend.current.position, -MAX_BEND, MAX_BEND);
+      paintGrip();
+      const targetBend = active ? rubberBand(pressure.current) : 0;
+      const targetLength = REST_LENGTH + (active ? (1 - Math.exp(-Math.abs(pressure.current) / 50)) * MAX_STRETCH : 0);
+      if (Math.abs(pullVelocity.current) > 0.5 || bend.current.position !== targetBend || bend.current.velocity !== 0
+        || length.current.position !== targetLength || length.current.velocity !== 0) {
+        schedule();
+      } else {
+        lastTime.current = null;
+        if (!active) dividerRef.current?.removeAttribute('data-resize-feedback');
+      }
+    });
+  }, [dividerRef, paintGrip, resetFeedback]);
+
+  useLayoutEffect(() => {
+    if (collapsed) { dragRef.current?.(false); resetFeedback(); }
+  }, [collapsed, resetFeedback]);
+
+  useLayoutEffect(() => () => {
+    dragRef.current?.(false);
+    resetFeedback();
+  }, [resetFeedback]);
+
+  useLayoutEffect(() => {
+    const preference = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)');
+    const changed = () => { if (preference?.matches) resetFeedback(); };
+    preference?.addEventListener('change', changed);
+    return () => preference?.removeEventListener('change', changed);
+  }, [resetFeedback]);
+
+  const onPointerDown = useCallback((event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || collapsed || dragRef.current) return;
+    event.preventDefault();
+    const divider = event.currentTarget;
+    const startX = event.clientX;
+    let previousX = startX;
+    let previousTime = performance.now();
+    const pointerId = event.pointerId;
+    let latestWidth = width;
+    let widthFrame: number | null = null;
+    const previousUserSelect = document.body.style.userSelect;
+
+    const applyWidth = () => {
+      widthFrame = null;
+      const value = `${latestWidth}px`;
+      areaRef.current?.style.setProperty('--nav-width', value);
+      divider.style.setProperty('--nav-width', value);
+      divider.setAttribute('aria-valuenow', String(Math.round(latestWidth)));
+    };
+    const finish = (commit: boolean) => {
+      if (dragRef.current !== finish) return;
+      dragRef.current = null;
+      if (widthFrame !== null) cancelAnimationFrame(widthFrame);
+      if (!commit) latestWidth = width;
+      // Flush even when the final pointer event arrives between paint frames,
+      // including a drag that returns to the previously committed width.
+      applyWidth();
+      window.removeEventListener('pointermove', move, true);
+      window.removeEventListener('pointerup', up, true);
+      window.removeEventListener('pointercancel', cancel, true);
+      window.removeEventListener('keydown', key, true);
+      window.removeEventListener('blur', cancel);
+      window.removeEventListener('resize', cancel);
+      divider.removeEventListener('lostpointercapture', lostCapture);
+      if (divider.hasPointerCapture?.(pointerId)) divider.releasePointerCapture(pointerId);
+      document.body.style.userSelect = previousUserSelect;
+      document.body.classList.remove('openbitfun-is-dragging-nav-collapse', 'openbitfun-is-resizing-nav');
+      if (commit) {
+        onWidthChange(latestWidth);
+        pullVelocity.current = 0;
+        divider.setAttribute('data-resize-feedback', 'settling');
+        animateFeedback();
+      } else resetFeedback();
+    };
+    const update = (clientX: number) => {
+      const rawWidth = width + clientX - startX;
+      const nextWidth = clamp(rawWidth, minWidth, maxWidth);
+      const time = performance.now();
+      const delta = clientX - previousX;
+      if (delta !== 0) {
+        // Bow toward the hand, including at a width limit. Reversals replace
+        // the old pull immediately instead of accumulating opposite inertia.
+        pullVelocity.current = clamp(delta / clamp((time - previousTime) / 1000, 0.001, 0.05), -2400, 2400);
+      }
+      previousX = clientX;
+      previousTime = time;
+      pressure.current = rawWidth - nextWidth;
+      latestWidth = nextWidth;
+      if (rawWidth <= minWidth - collapseThreshold) {
+        finish(true);
+        resetFeedback();
+        onCollapse();
+        return false;
+      }
+      animateFeedback();
+      return true;
+    };
+    function move(event: globalThis.PointerEvent) {
+      if (event.pointerId !== pointerId) return;
+      event.preventDefault();
+      if (update(event.clientX) && widthFrame === null) widthFrame = requestAnimationFrame(applyWidth);
+    }
+    function up(event: globalThis.PointerEvent) {
+      if (event.pointerId === pointerId && update(event.clientX)) finish(true);
+    }
+    function cancel(event?: Event) {
+      if (event?.type === 'pointercancel' && (event as globalThis.PointerEvent).pointerId !== pointerId) return;
+      finish(false);
+    }
+    function lostCapture(event: globalThis.PointerEvent) { if (event.pointerId === pointerId) cancel(); }
+    function key(event: globalThis.KeyboardEvent) {
+      if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); cancel(); }
+    }
+    dragRef.current = finish;
+    divider.setPointerCapture?.(pointerId);
+    divider.setAttribute('data-resize-feedback', 'dragging');
+    document.body.style.userSelect = 'none';
+    document.body.classList.add('openbitfun-is-dragging-nav-collapse', 'openbitfun-is-resizing-nav');
+    window.addEventListener('pointermove', move, { capture: true, passive: false });
+    window.addEventListener('pointerup', up, true);
+    window.addEventListener('pointercancel', cancel, true);
+    window.addEventListener('keydown', key, true);
+    window.addEventListener('blur', cancel);
+    window.addEventListener('resize', cancel);
+    divider.addEventListener('lostpointercapture', lostCapture);
+    animateFeedback();
+  }, [animateFeedback, areaRef, collapsed, collapseThreshold, maxWidth, minWidth, onCollapse, onWidthChange, resetFeedback, width]);
+
+  const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+    if (dragRef.current || collapsed) return;
+    const step = event.shiftKey ? 40 : 10;
+    let nextWidth: number;
+    switch (event.key) {
+      case 'ArrowLeft': nextWidth = width - step; break;
+      case 'ArrowRight': nextWidth = width + step; break;
+      case 'Home': nextWidth = minWidth; break;
+      case 'End': nextWidth = maxWidth; break;
+      default: return;
+    }
+    event.preventDefault();
+    resetFeedback();
+    onWidthChange(clamp(nextWidth, minWidth, maxWidth));
+  }, [collapsed, maxWidth, minWidth, onWidthChange, resetFeedback, width]);
+
+  return { onPointerDown, onKeyDown };
+}
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentDialog.test.tsx b/src/web-ui/src/app/scenes/agents/components/CreateAgentDialog.test.tsx
new file mode 100644
index 0000000000..4717830b59
--- /dev/null
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentDialog.test.tsx
@@ -0,0 +1,295 @@
+/** @vitest-environment jsdom */
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Editor } from '@tiptap/core';
+import CreateAgentDialog from './CreateAgentDialog';
+import { activateSurface } from '@/infrastructure/peer-device/deviceSurface';
+
+const mocks = vi.hoisted(() => ({
+  create: vi.fn(),
+  tools: vi.fn(),
+  error: vi.fn(),
+  success: vi.fn(),
+  workspace: { id: 'workspace-1' } as { id: string } | null,
+}));
+vi.mock('@/infrastructure/i18n/hooks/useI18n', () => ({
+  useI18n: () => ({ t: (key: string) => key, formatNumber: String }),
+}));
+vi.mock('@/infrastructure/contexts/WorkspaceContext', () => ({
+  useCurrentWorkspace: () => ({ workspace: mocks.workspace, hasWorkspace: Boolean(mocks.workspace) }),
+}));
+vi.mock('@/infrastructure/api/service-api/CustomAgentAPI', () => ({
+  CustomAgentAPI: { createCustomAgent: mocks.create },
+}));
+vi.mock('@/infrastructure/api/service-api/ToolAPI', () => ({
+  toolAPI: { getAllToolsInfo: mocks.tools },
+}));
+vi.mock('@/shared/notification-system', () => ({
+  useNotification: () => ({ error: mocks.error, success: mocks.success }),
+}));
+vi.mock('../agentsStore', () => ({
+  useAgentsStore: () => ({ openHome: vi.fn(), agentEditorMode: 'create', editingAgentId: null }),
+}));
+vi.mock('./useUserToolGroups', () => ({
+  useUserToolGroups: () => ({ groups: [], saveGroups: vi.fn() }),
+}));
+vi.mock('@/infrastructure/confirm-dialog', () => ({ confirmDanger: vi.fn() }));
+vi.mock('@/infrastructure/markdown', () => ({
+  MarkdownRenderer: ({ content }: { content: string }) => <div>{content}</div>,
+}));
+
+const tools = [
+  { name: 'Read', description: 'Read files', is_readonly: true },
+  { name: 'Write', description: 'Write files', is_readonly: false },
+  { name: 'WebFetch', description: 'Fetch pages', is_readonly: true },
+];
+let container: HTMLDivElement;
+let root: Root;
+let onCreated: ReturnType<typeof vi.fn>;
+let onClose: ReturnType<typeof vi.fn>;
+const copy = (key: string) => `agentsOverview.form.${key}`;
+const dialog = () => document.querySelector<HTMLElement>('[role="dialog"]')!;
+const field = (key: string) => dialog().querySelector<HTMLInputElement | HTMLTextAreaElement>(`[id$="-custom-agent-${key}"]`)!;
+const promptGroup = () => dialog().querySelector<HTMLElement>('[id$="-custom-agent-prompt"]')!;
+const promptEditor = () => (promptGroup().querySelector('.ProseMirror') as HTMLElement & { editor: Editor }).editor;
+const button = (label: string) => [...dialog().querySelectorAll('button')].find(control => control.textContent === label)!;
+const click = async (label: string) => { await act(async () => button(label).click()); };
+const submit = async () => {
+  await act(async () => dialog().querySelector('form')!.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })));
+};
+const fill = (key: string, value: string) => {
+  if (key === 'prompt') {
+    act(() => promptEditor().commands.setContent({
+      type: 'doc',
+      content: [{ type: 'paragraph', content: [{ type: 'text', text: value }] }],
+    }));
+    return;
+  }
+  const control = field(key);
+  const prototype = control instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  act(() => {
+    Object.getOwnPropertyDescriptor(prototype, 'value')!.set!.call(control, value);
+    control.dispatchEvent(new Event('input', { bubbles: true }));
+  });
+};
+const render = async () => {
+  await act(async () => root.render(<CreateAgentDialog onClose={onClose} onCreated={onCreated} />));
+};
+const completeBasics = async () => {
+  fill('id', 'research-helper');
+  fill('name', 'Research helper');
+  fill('description', 'Research a topic');
+  await click(copy('wizard.next'));
+  await act(async () => { await vi.dynamicImportSettled(); });
+};
+const reachTools = async () => {
+  await completeBasics();
+  fill('prompt', 'Return a summary with sources.');
+  await click(copy('wizard.next'));
+};
+
+beforeEach(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  Range.prototype.getClientRects = () => [] as unknown as DOMRectList;
+  Range.prototype.getBoundingClientRect = () => new DOMRect();
+  vi.clearAllMocks();
+  mocks.workspace = { id: 'workspace-1' };
+  mocks.tools.mockReset().mockResolvedValue(tools);
+  mocks.create.mockReset().mockResolvedValue(undefined);
+  activateSurface('local');
+  onCreated = vi.fn();
+  onClose = vi.fn();
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  activateSurface('local');
+});
+
+describe('guided agent creation', () => {
+  it('validates each stage and submits only on the tools stage with all drafts intact', async () => {
+    await render();
+    expect(dialog().querySelectorAll('[aria-current="step"]')).toHaveLength(1);
+    expect(dialog().querySelector('textarea')).toBeNull();
+    await submit();
+    expect(field('id').getAttribute('aria-invalid')).toBe('true');
+    expect(field('description').getAttribute('aria-invalid')).toBe('true');
+    expect(document.activeElement).toBe(field('id'));
+    fill('id', '9-invalid');
+    fill('description', 'Research a topic');
+    await submit();
+    expect(field('id').getAttribute('aria-invalid')).toBe('true');
+    expect(mocks.create).not.toHaveBeenCalled();
+
+    await completeBasics();
+    expect(promptGroup().querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe(copy('promptPlaceholder'));
+    act(() => promptEditor().view.dom.focus());
+    expect(promptGroup().querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe(copy('promptPlaceholder'));
+    expect(dialog().querySelector('[id$="-custom-agent-id"]')).toBeNull();
+    await submit();
+    expect(promptGroup().getAttribute('aria-invalid')).toBe('true');
+    expect(document.activeElement).toBe(promptEditor().view.dom);
+    fill('prompt', 'Return a summary with sources.');
+    await submit();
+    expect(mocks.create).not.toHaveBeenCalled();
+    expect(dialog().querySelector('[data-testid="custom-agent-tool-groups"]')).not.toBeNull();
+    const write = dialog().querySelector<HTMLInputElement>('input[aria-label^="Write"]')!;
+    expect(write.checked).toBe(true);
+    act(() => write.click());
+    await click(copy('wizard.back'));
+    expect(promptEditor().getText()).toBe('Return a summary with sources.');
+    await click(copy('wizard.back'));
+    expect(field('id').value).toBe('research-helper');
+    expect(field('name').value).toBe('Research helper');
+    expect(field('description').value).toBe('Research a topic');
+    await submit();
+    await submit();
+    expect(dialog().querySelector<HTMLInputElement>('input[aria-label^="Write"]')!.checked).toBe(false);
+    await submit();
+    expect(mocks.create).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
+      id: 'research-helper', name: 'Research helper', kind: 'mode', level: 'user',
+      description: 'Research a topic', prompt: 'Return a summary with sources.',
+      tools: ['Read', 'WebFetch'], userContextPolicy: ['workspace_context', 'workspace_instructions'],
+    }));
+    expect(onCreated).toHaveBeenCalledOnce();
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it.each(['text', 'source-html', 'markdown-editor'])('renders pasted Markdown from %s and keeps its structure across steps', async (format) => {
+    await render();
+    await completeBasics();
+    expect(promptGroup().querySelector('textarea')).toBeNull();
+    const markdown = '## Role\n\n{PERSONA}\n\n- Return evidence.';
+    const sourceHtml = document.createElement('div');
+    for (const line of markdown.split('\n')) {
+      sourceHtml.appendChild(document.createElement('div')).textContent = line || '\u00a0';
+    }
+    const paste = new Event('paste', { bubbles: true, cancelable: true });
+    Object.defineProperty(paste, 'clipboardData', { value: {
+      getData: (type: string) => {
+        if (type === 'text/plain') return markdown;
+        if (type === 'text/html' && format !== 'text') return sourceHtml.outerHTML;
+        if (type === 'vscode-editor-data' && format === 'markdown-editor') return '{"version":1,"mode":"markdown"}';
+        return '';
+      },
+      files: [],
+      types: format === 'text' ? ['text/plain'] : ['text/plain', 'text/html'],
+    } });
+    act(() => { promptEditor().view.dom.dispatchEvent(paste); });
+    expect(promptGroup().querySelector('h2')?.textContent).toBe('Role');
+    expect(promptGroup().getAttribute('aria-invalid')).toBeNull();
+    await click(copy('wizard.next'));
+    await click(copy('wizard.back'));
+    await act(async () => { await vi.dynamicImportSettled(); });
+    expect(promptGroup().querySelector('h2')?.textContent).toBe('Role');
+    expect(promptGroup().querySelector('li')?.textContent).toBe('Return evidence.');
+    await click(copy('wizard.next'));
+    await submit();
+    expect(mocks.create).toHaveBeenCalledWith(expect.objectContaining({
+      prompt: '## Role\n\n{PERSONA}\n\n- Return evidence.',
+    }));
+  });
+
+  it('keeps project subagent selection and enforces readonly tools for review', async () => {
+    await render();
+    await click('filters.subagent');
+    await click('agentsOverview.filterProject');
+    await reachTools();
+    const review = dialog().querySelector<HTMLInputElement>(`input[aria-label="${copy('review')}"]`)!;
+    act(() => review.click());
+    const readonly = dialog().querySelector<HTMLInputElement>(`input[aria-label="${copy('readonly')}"]`)!;
+    expect(readonly.checked).toBe(true);
+    expect(readonly.disabled).toBe(true);
+    expect(dialog().querySelector('input[aria-label^="Write"]')).toBeNull();
+    await submit();
+    expect(mocks.create).toHaveBeenCalledWith(expect.objectContaining({
+      kind: 'subagent', level: 'project', workspaceId: 'workspace-1', review: true, readonly: true, tools: ['Read'],
+    }));
+  });
+
+  it('shows tool load errors and allows retry without losing the completed fields', async () => {
+    mocks.tools.mockRejectedValueOnce(new Error('Peer offline'));
+    await render();
+    await reachTools();
+    expect(dialog().querySelector('[role="alert"]')?.textContent).toBe(copy('wizard.toolsLoadFailed'));
+    expect(button(copy('submit')).disabled).toBe(true);
+    await submit();
+    expect(mocks.create).not.toHaveBeenCalled();
+    await click(copy('wizard.retry'));
+    expect(button(copy('submit')).disabled).toBe(false);
+    await submit();
+    expect(mocks.create).toHaveBeenCalledWith(expect.objectContaining({ id: 'research-helper', prompt: 'Return a summary with sources.' }));
+  });
+
+  it('blocks creation while tools load and preserves a failed submission for retry', async () => {
+    let resolveTools!: (value: typeof tools) => void;
+    mocks.tools.mockReturnValueOnce(new Promise(resolve => { resolveTools = resolve; }));
+    await render();
+    await reachTools();
+    expect(dialog().querySelector('[role="status"]')?.textContent).toBe(copy('wizard.loadingTools'));
+    expect(button(copy('submit')).disabled).toBe(true);
+    await submit();
+    expect(mocks.create).not.toHaveBeenCalled();
+    await act(async () => resolveTools(tools));
+    mocks.create.mockRejectedValueOnce(new Error('Connection lost'));
+    await submit();
+    expect(onCreated).not.toHaveBeenCalled();
+    expect(mocks.error).toHaveBeenCalled();
+    expect(button(copy('submit')).disabled).toBe(false);
+    await submit();
+    expect(mocks.create).toHaveBeenCalledTimes(2);
+    expect(onCreated).toHaveBeenCalledOnce();
+  });
+
+  it('preserves project scope and context choices when tools finish loading later', async () => {
+    let resolveTools!: (value: typeof tools) => void;
+    mocks.tools.mockReturnValueOnce(new Promise(resolve => { resolveTools = resolve; }));
+    await render();
+    await click('filters.subagent');
+    await click('agentsOverview.filterProject');
+    await completeBasics();
+    await click(copy('contextProjectLayout'));
+    fill('prompt', 'Review project changes.');
+    await submit();
+    const readonly = dialog().querySelector<HTMLInputElement>(`input[aria-label="${copy('readonly')}"]`)!;
+    act(() => readonly.click());
+    await act(async () => resolveTools(tools));
+    await submit();
+    expect(mocks.create).toHaveBeenCalledWith(expect.objectContaining({
+      kind: 'subagent', level: 'project', workspaceId: 'workspace-1', readonly: false,
+      userContextPolicy: ['workspace_context', 'workspace_instructions', 'project_layout'],
+    }));
+  });
+
+  it('ignores completion from the previous peer after switching surfaces', async () => {
+    let finishCreate!: () => void;
+    mocks.create.mockReturnValueOnce(new Promise<void>(resolve => { finishCreate = resolve; }));
+    await render();
+    await reachTools();
+    await submit();
+    await act(async () => { activateSurface('peer-device'); });
+    await act(async () => finishCreate());
+    expect(onCreated).not.toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+    expect(mocks.success).not.toHaveBeenCalled();
+    expect(field('id').value).toBe('');
+  });
+
+  it('resets the draft when the workspace or peer surface changes', async () => {
+    await render();
+    await completeBasics();
+    mocks.workspace = { id: 'workspace-2' };
+    await render();
+    expect(field('id').value).toBe('');
+    expect(dialog().querySelector('textarea')).toBeNull();
+    await completeBasics();
+    await act(async () => { activateSurface('peer-device'); });
+    expect(field('id').value).toBe('');
+    expect(dialog().querySelector('textarea')).toBeNull();
+    expect(mocks.create).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentDialog.tsx b/src/web-ui/src/app/scenes/agents/components/CreateAgentDialog.tsx
index eb54ff7859..ab318f4d89 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentDialog.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentDialog.tsx
@@ -1,7 +1,6 @@
-import { Dialog, DialogClose, DialogHeader, DialogHeading, DialogTitle } from '@openbitfun/ui';
-import { useSyncExternalStore } from 'react';
+import { Dialog } from '@openbitfun/ui';
+import { useId, useSyncExternalStore } from 'react';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
-import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { getActiveSurfaceScope, onSurfaceActivated } from '@/infrastructure/peer-device/deviceSurface';
 import CreateAgentPage from './CreateAgentPage';
 
@@ -9,19 +8,16 @@ export default function CreateAgentDialog({ onClose, onCreated }: {
   onClose: () => void;
   onCreated: () => void;
 }) {
-  const { t } = useI18n('scenes/agents');
+  const titleId = useId();
   const scope = useSyncExternalStore(onSurfaceActivated, getActiveSurfaceScope, getActiveSurfaceScope);
   const { workspace } = useCurrentWorkspace();
 
   return (
-    <Dialog open onOpenChange={onClose} size="xl">
-      <DialogHeader>
-        <DialogHeading><DialogTitle>{t('agentsOverview.form.title')}</DialogTitle></DialogHeading>
-        <DialogClose />
-      </DialogHeader>
+    <Dialog open onOpenChange={onClose} size="2xl" aria-labelledby={titleId}>
       <CreateAgentPage
         key={scope.key(scope.epoch, workspace?.id)}
         standalone
+        titleId={titleId}
         onCancel={onClose}
         onCreated={() => { onClose(); onCreated(); }}
       />
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.presentation.test.ts b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.presentation.test.ts
index a3d19f8f48..75f90170c5 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.presentation.test.ts
@@ -39,12 +39,13 @@ describe('CreateAgentPage presentation contract', () => {
 
     expect(source).toContain('data-openbitfun-part="contextPreview"');
     expect(source).toContain('onClick={() => toggleContextSection(section)}');
-    expect(source).toContain("aria-describedby={fieldId('runtime-context-preview')}");
+    expect(source).toContain("aria-describedby={`${fieldId('runtime-context-preview')}");
     expect(source).toContain('value={prompt}');
   });
 
-  it('uses the home-page content frame and a single column on both surfaces', () => {
+  it('keeps the page content frame and delegates guided layout to the design system', () => {
     const stylesheet = readLocalFile('./CreateAgentPage.scss');
+    const source = readLocalFile('./CreateAgentPage.tsx');
 
     expect(stylesheet).toContain(
       'grid-template-columns: minmax(0, 1fr);',
@@ -64,5 +65,9 @@ describe('CreateAgentPage presentation contract', () => {
     expect(stylesheet).toMatch(
       /@media \(max-width: 480px\)[\s\S]*\.th-create-panel__identity-fields[\s\S]*grid-template-columns: minmax\(0, 1fr\);/,
     );
+    expect(source).toContain('<SetupWizard');
+    expect(source).toContain("contentMode={step === 1 ? 'contained' : 'scroll'}");
+    expect(stylesheet).not.toContain('th-create-page__guide');
+    expect(stylesheet).not.toContain('th-create-dialog__header');
   });
 });
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
index 11228b60f5..6933ba991d 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
@@ -6,7 +6,45 @@
 }
 
 .th-create-page--dialog {
-  height: min(760px, 70vh);
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+
+  .th-create-page__columns,
+  .th-create-page__panel {
+    gap: var(--openbitfun-space-6);
+  }
+
+  .th-create-panel__identity-fields {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--openbitfun-space-5);
+  }
+
+}
+
+// The Markdown editor owns scrolling on this step. Keep the form's flex chain
+// bounded so editing cannot grow a second scrollbar on the surrounding panel.
+.th-create-page--prompt-step {
+  .th-create-page__form,
+  .th-create-page__columns,
+  .th-create-page__panel--capabilities,
+  .th-create-panel__field--prompt {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .th-create-page__prompt-heading {
+    flex-shrink: 0;
+  }
+
+  .th-create-panel__prompt-control {
+    height: auto;
+  }
 }
 
 .th__list-body {
@@ -213,7 +251,28 @@
 .th-create-panel__prompt-control {
   display: flex;
   flex: 1;
-  min-height: 320px;
+  min-width: 0;
+  min-height: 0;
+  height: 420px;
+  overflow: hidden;
+}
+
+.th-create-panel__markdown-editor {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+  background: var(--openbitfun-color-surface-scene);
+
+  .m-editor-content,
+  .m-editor-ir-panel {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .m-editor-tiptap {
+    padding: 0;
+  }
 }
 
 .th-create-panel__identity-fields {
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx
index bdb47ba861..4a15cd1112 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx
@@ -1,4 +1,4 @@
-import { Button, DialogBody, DialogFooter, Icon, Input, PageHeader, ScrollArea, Switch, Textarea, Tooltip, type IconSource } from '@openbitfun/ui';
+import { Button, DialogBody, DialogClose, Icon, Input, PageHeader, ScrollArea, SetupWizard, Switch, Tooltip, type IconSource } from '@openbitfun/ui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   FileText,
@@ -27,6 +27,8 @@ import { useUserToolGroups } from './useUserToolGroups';
 import '../AgentsView.scss';
 import './CreateAgentPage.scss';
 
+const MEditor = React.lazy(() => import('@/tools/editor/meditor/components/MEditor').then((module) => ({ default: module.MEditor })));
+
 const ID_REGEX = /^[a-zA-Z][a-zA-Z0-9_-]*$/;
 const DEFAULT_MODE_POLICY: UserContextSection[] = [
   'workspace_context',
@@ -95,12 +97,13 @@ function defaultSelectedTools(
 
 interface CreateAgentPageProps {
   standalone?: boolean;
+  titleId?: string;
   onCancel?: () => void;
   onCreated?: () => void;
 }
 
-const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, onCancel, onCreated }) => {
-  const { t } = useI18n('scenes/agents');
+const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, titleId, onCancel, onCreated }) => {
+  const { t, formatNumber } = useI18n('scenes/agents');
   const notification = useNotification();
   const { hasWorkspace, workspace } = useCurrentWorkspace();
   const workspaceId = workspace?.id;
@@ -109,6 +112,38 @@ const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, o
   const formInstanceId = React.useId();
   const formId = `${formInstanceId}-custom-agent-form`;
   const fieldId = (field: string) => `${formInstanceId}-custom-agent-${field}`;
+  const formRef = useRef<HTMLFormElement>(null);
+  const promptControlRef = useRef<HTMLDivElement>(null);
+  const [step, setStep] = useState(0);
+  const steps = [
+    {
+      id: 'basics',
+      label: t('agentsOverview.form.basicInformation'),
+      title: t('agentsOverview.form.wizard.basicsTitle'),
+      description: t('agentsOverview.form.wizard.basicsDescription'),
+    },
+    {
+      id: 'prompt',
+      label: t('agentsOverview.form.prompt'),
+      title: t('agentsOverview.form.wizard.promptTitle'),
+      description: t('agentsOverview.form.wizard.promptDescription'),
+    },
+    {
+      id: 'tools',
+      label: t('agentsOverview.form.tools'),
+      title: t('agentsOverview.form.wizard.toolsTitle'),
+      description: t('agentsOverview.form.wizard.toolsDescription'),
+    },
+  ];
+
+  useEffect(() => {
+    if (!standalone) return;
+    // The Markdown editor owns focus once its lazy-loaded editing surface mounts.
+    if (step === 1) return;
+    const firstControl = formRef.current?.querySelector<HTMLElement>('input:not(:disabled), textarea')
+      ?? formRef.current?.querySelector<HTMLElement>('button:not(:disabled)');
+    firstControl?.focus();
+  }, [standalone, step]);
   const mountedRef = useRef(true);
   useEffect(() => {
     mountedRef.current = true;
@@ -127,10 +162,15 @@ const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, o
   const [agentIdError, setAgentIdError] = useState<string | null>(null);
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
+  const [descriptionError, setDescriptionError] = useState(false);
   const [prompt, setPrompt] = useState('');
+  const [promptError, setPromptError] = useState(false);
   const [readonly, setReadonly] = useState(defaultReadonlyForKind('mode'));
   const [review, setReview] = useState(false);
   const [toolInfos, setToolInfos] = useState<SubagentEditorToolInfo[]>([]);
+  const [toolsLoading, setToolsLoading] = useState(true);
+  const [toolsLoadError, setToolsLoadError] = useState(false);
+  const [toolsAttempt, setToolsAttempt] = useState(0);
   const [selectedTools, setSelectedTools] = useState<Set<string>>(new Set());
   const [toolsEditing, setToolsEditing] = useState(false);
   const [pendingTools, setPendingTools] = useState<Set<string> | null>(null);
@@ -142,9 +182,13 @@ const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, o
   const [detailError, setDetailError] = useState<string | null>(null);
 
   useEffect(() => {
+    let cancelled = false;
+    setToolsLoading(true);
+    setToolsLoadError(false);
     toolAPI
       .getAllToolsInfo()
       .then((tools) => {
+        if (cancelled) return;
         const normalizedTools = tools
           .map((tool): SubagentEditorToolInfo | null => {
             const toolName = typeof tool?.name === 'string' ? tool.name : '';
@@ -162,8 +206,16 @@ const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, o
           .filter((tool): tool is SubagentEditorToolInfo => Boolean(tool));
         setToolInfos(normalizedTools);
       })
-      .catch(() => setToolInfos([]));
-  }, []);
+      .catch(() => {
+        if (cancelled) return;
+        setToolInfos([]);
+        setToolsLoadError(true);
+      })
+      .finally(() => {
+        if (!cancelled) setToolsLoading(false);
+      });
+    return () => { cancelled = true; };
+  }, [toolsAttempt]);
 
   useEffect(() => {
     if (!hasWorkspace && level === 'project') {
@@ -179,10 +231,10 @@ const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, o
     setReadonly(defaultReadonlyForKind(kind));
     setReview(false);
     setUserContextPolicy(new Set(defaultPolicyForKind(kind)));
-    setSelectedTools(defaultSelectedTools(toolInfos, kind, false));
+    setSelectedTools(new Set());
     setToolsEditing(false);
     setPendingTools(null);
-  }, [isEdit, kind, toolInfos]);
+  }, [isEdit, kind]);
 
   useEffect(() => {
     if (isEdit || toolInfos.length === 0) {
@@ -329,6 +381,35 @@ const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, o
     project_layout: t('agentsOverview.form.contextProjectLayoutTooltip'),
   };
 
+  const focusField = (field: string) => {
+    if (field === 'prompt') {
+      promptControlRef.current?.querySelector<HTMLElement>('[contenteditable="true"], textarea')?.focus({ preventScroll: true });
+      return;
+    }
+    const control = formRef.current?.elements.namedItem(fieldId(field));
+    if (control instanceof HTMLElement) control.focus();
+  };
+
+  const handleNext = () => {
+    if (step === 0) {
+      const idError = validateAgentId(agentId);
+      setAgentIdError(idError);
+      setDescriptionError(!description.trim());
+      if (idError || !description.trim()) {
+        focusField(idError ? 'id' : 'description');
+        return;
+      }
+    }
+    if (step === 1) {
+      setPromptError(!prompt.trim());
+      if (!prompt.trim()) {
+        focusField('prompt');
+        return;
+      }
+    }
+    setStep(step + 1);
+  };
+
   const handleSubmit = useCallback(async () => {
     const nextAgentIdError = validateAgentId(agentId);
     setAgentIdError(nextAgentIdError);
@@ -481,6 +562,371 @@ const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, o
     );
   }
 
+  const permissionControls = (
+    <div className="th-create-panel__field th-create-panel__field--row">
+      <div className="th-create-panel__readonly-row">
+        <span className="th-create-panel__label">
+          {t('agentsOverview.form.readonly')}
+        </span>
+        <Switch
+          checked={readonly}
+          disabled={kind === 'subagent' && review}
+          onChange={(event) => handleReadonlyChange(event.target.checked)}
+          aria-label={t('agentsOverview.form.readonly')}
+        />
+      </div>
+      {kind === 'subagent' ? (
+        <div className="th-create-panel__readonly-row">
+          <span className="th-create-panel__label">
+            {t('agentsOverview.form.review')}
+          </span>
+          <Switch
+            checked={review}
+            onChange={(event) => handleReviewChange(event.target.checked)}
+            aria-label={t('agentsOverview.form.review')}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+  const basicInformation = (
+    <div className="th-create-page__section">
+      <div className="th-create-page__section-heading" data-openbitfun-component="create-agent-page" data-openbitfun-part="sectionHeading">
+        <h3>{t('agentsOverview.form.basicInformation')}</h3>
+      </div>
+
+      <div className="th-create-panel__field" data-openbitfun-component="create-agent-page" data-openbitfun-part="field">
+        <span className="th-create-panel__label">{t('agentsOverview.form.kind')}</span>
+        <div
+          className="th-create-panel__level-group"
+          data-openbitfun-component="create-agent-page"
+          data-openbitfun-part="levelGroup"
+          role="group"
+          aria-label={t('agentsOverview.form.kind')}
+        >
+          {(['mode', 'subagent'] as CustomAgentKind[]).map((candidateKind) => (
+            <Tooltip
+              key={candidateKind}
+              content={t(
+                candidateKind === 'mode'
+                  ? 'agentsOverview.form.kindAgentTooltip'
+                  : 'agentsOverview.form.kindSubagentTooltip',
+              )}
+              placement="top"
+            >
+              <button
+                type="button"
+                disabled={isEdit}
+                className={`th-create-panel__level-btn${kind === candidateKind ? ' is-active' : ''}`}
+                data-openbitfun-component="create-agent-page"
+                data-openbitfun-part="levelOption"
+                data-openbitfun-state={kind === candidateKind ? 'active' : undefined}
+                aria-pressed={kind === candidateKind}
+                onClick={() => setKind(candidateKind)}
+              >
+                {candidateKind === 'mode'
+                  ? t('filters.agent')
+                  : t('filters.subagent')}
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
+
+      <div className="th-create-panel__identity-fields">
+        <div className="th-create-panel__field">
+          <label className="th-create-panel__label" htmlFor={fieldId('id')}>
+            {t('agentsOverview.form.id')}
+          </label>
+          <Input
+            id={fieldId('id')}
+            value={agentId}
+            onChange={(event) => {
+              setAgentId(event.target.value);
+              setAgentIdError(validateAgentId(event.target.value));
+            }}
+            onBlur={() => setAgentIdError(validateAgentId(agentId))}
+            placeholder={t('agentsOverview.form.idPlaceholder')}
+            invalid={!!agentIdError}
+            aria-describedby={agentIdError ? fieldId('id-error') : undefined}
+            disabled={isEdit}
+            size="sm"
+          />
+          {agentIdError ? (
+            <span id={fieldId('id-error')} className="th-create-panel__error" data-openbitfun-component="create-agent-page" data-openbitfun-part="error" role="alert">{agentIdError}</span>
+          ) : null}
+        </div>
+
+        <div className="th-create-panel__field">
+          <label className="th-create-panel__label" htmlFor={fieldId('name')}>
+            {t('agentsOverview.form.name')}
+          </label>
+          <Input
+            id={fieldId('name')}
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            placeholder={t('agentsOverview.form.namePlaceholder')}
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <div className="th-create-panel__field">
+        <label className="th-create-panel__label" htmlFor={fieldId('description')}>
+          {t('agentsOverview.form.description')}
+        </label>
+        <Input
+          id={fieldId('description')}
+          value={description}
+          onChange={(event) => {
+            setDescription(event.target.value);
+            setDescriptionError(false);
+          }}
+          invalid={descriptionError}
+          aria-describedby={descriptionError ? fieldId('description-error') : undefined}
+          placeholder={t('agentsOverview.form.descPlaceholder')}
+          size="sm"
+        />
+        {descriptionError && (
+          <span id={fieldId('description-error')} className="th-create-panel__error" role="alert">
+            {t('agentsOverview.form.descRequired')}
+          </span>
+        )}
+      </div>
+
+      {kind === 'subagent' ? (
+        <div className="th-create-panel__field">
+          <span className="th-create-panel__label">{t('agentsOverview.form.level')}</span>
+          <div
+            className="th-create-panel__level-group"
+            data-openbitfun-component="create-agent-page"
+            data-openbitfun-part="levelGroup"
+            role="group"
+            aria-label={t('agentsOverview.form.level')}
+          >
+            {(['user', 'project'] as CustomAgentLevel[]).map((candidateLevel) => {
+              const disabled =
+                (candidateLevel === 'project' && !hasWorkspace) || isEdit;
+              return (
+                <button
+                  data-openbitfun-component="create-agent-page"
+                  data-openbitfun-part="levelOption"
+                  key={candidateLevel}
+                  type="button"
+                  disabled={disabled}
+                  className={`th-create-panel__level-btn${level === candidateLevel ? ' is-active' : ''}`}
+                  data-openbitfun-state={level === candidateLevel ? 'active' : undefined}
+                  aria-pressed={level === candidateLevel}
+                  onClick={() => setLevel(candidateLevel)}
+                  title={
+                    disabled && !isEdit && candidateLevel === 'project'
+                      ? t('agentsOverview.form.noWorkspace')
+                      : undefined
+                  }
+                >
+                  {candidateLevel === 'user'
+                    ? t('agentsOverview.filterUser')
+                    : t('agentsOverview.filterProject')}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+      {!standalone && permissionControls}
+    </div>
+  );
+  const toolSelection = selectableTools.length > 0 ? (
+    <div className="th-create-page__section th-create-page__section--tools">
+      <div className="th-create-panel__field-head">
+        <div
+          className="th-create-page__section-heading th-create-page__section-heading--tools"
+          data-openbitfun-component="create-agent-page"
+          data-openbitfun-part="sectionHeading"
+        >
+          <h3>{t('agentsOverview.form.tools')}</h3>
+          <span className="th-create-panel__label-hint">
+            {kind === 'subagent' && review
+              ? t('agentsOverview.form.reviewToolsHint')
+              : t('agentsOverview.form.toolsHint', {
+                  optionalLabel: t('agentsOverview.form.toolsOptional'),
+                })}
+          </span>
+        </div>
+        {standalone ? null : toolsEditing ? (
+          <div className="th-create-panel__tool-edit-actions">
+            <Button
+              type="button"
+              variant="fill"
+              size="sm"
+              onClick={() => {
+                setToolsEditing(false);
+                setPendingTools(null);
+              }}
+              disabled={submitting}
+            >
+              {t('agentsOverview.cancel')}
+            </Button>
+            <Button
+              type="button"
+              variant="primary"
+              size="sm"
+              onClick={() => {
+                setSelectedTools(new Set(pendingTools ?? selectedTools));
+                setToolsEditing(false);
+                setPendingTools(null);
+              }}
+              disabled={submitting}
+            >
+              {t('agentsOverview.save')}
+            </Button>
+          </div>
+        ) : (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              setPendingTools(new Set(selectedTools));
+              setToolsEditing(true);
+            }}
+            disabled={submitting}
+            leadingIcon={<Icon name="settings" size="sm" aria-hidden="true" />}
+          >
+            {t('agentsOverview.toolsEdit')}
+          </Button>
+        )}
+      </div>
+      {standalone ? (
+        <ToolGroupPicker
+          grouped={false}
+          tools={selectableGroupTools}
+          managementTools={managementGroupTools}
+          selectedToolNames={Array.from(selectedTools)}
+          userGroups={userToolGroups}
+          onSelectionChange={(toolNames) => setSelectedTools(new Set(toolNames))}
+          onSaveUserGroups={saveUserToolGroups}
+          disabled={submitting}
+          testId="custom-agent-tool-groups"
+        />
+      ) : toolsEditing ? (
+        <ScrollArea className="th-create-panel__tool-editor" overscrollBehaviorY="contain">
+          <ToolGroupPicker
+            grouped={false}
+            tools={selectableGroupTools}
+            managementTools={managementGroupTools}
+            selectedToolNames={Array.from(pendingTools ?? selectedTools)}
+            userGroups={userToolGroups}
+            onSelectionChange={(toolNames) => setPendingTools(new Set(toolNames))}
+            onSaveUserGroups={saveUserToolGroups}
+            disabled={submitting}
+            testId="custom-agent-tool-groups"
+          />
+        </ScrollArea>
+      ) : (
+        <ScrollArea
+          className="th-create-panel__tool-summary"
+        >
+          <ToolGroupSummary
+            grouped={false}
+            tools={selectableGroupTools}
+            selectedToolNames={Array.from(selectedTools)}
+            userGroups={userToolGroups}
+          />
+        </ScrollArea>
+      )}
+    </div>
+  ) : null;
+  const promptEditor = (
+    <div className="th-create-panel__field th-create-panel__field--prompt">
+      <h3 id={fieldId('prompt-label')} className="th-create-page__prompt-heading" data-openbitfun-component="create-agent-page" data-openbitfun-part="sectionHeading">
+        <span className="th-create-panel__label th-create-panel__label--strong">
+          {t('agentsOverview.form.prompt')}
+        </span>
+      </h3>
+      <div
+        className="th-create-panel__prompt-editor"
+        data-openbitfun-component="create-agent-page"
+        data-openbitfun-part="promptEditor"
+      >
+        <div
+          id={fieldId('runtime-context-preview')}
+          className="th-create-panel__prompt-context-preview"
+          data-openbitfun-component="create-agent-page"
+          data-openbitfun-part="contextPreview"
+        >
+          <span className="th-create-panel__prompt-context-label">
+            {t('agentsOverview.form.contextPreviewLabel')}
+          </span>
+          <div className="th-create-panel__context-options" data-openbitfun-component="create-agent-page" data-openbitfun-part="tools" role="group" aria-label={t('agentsOverview.form.contextPolicy')}>
+            {VISIBLE_CONTEXT_SECTIONS.map((section) => {
+              const label = contextSectionLabels[section];
+              const isSelected = userContextPolicy.has(section);
+              return (
+                <span
+                  key={section}
+                  className="th-create-panel__context-option"
+                  data-openbitfun-component="create-agent-page"
+                  data-openbitfun-part="tool"
+                  data-openbitfun-state={isSelected ? 'active' : undefined}
+                >
+                  <Tooltip content={contextSectionTooltips[section]} placement="top">
+                    <Button
+                      type="button"
+                      size="xs"
+                      variant={isSelected ? 'fill' : 'outline'}
+                      leadingIcon={<Icon {...CONTEXT_SECTION_ICONS[section]} size="xs" />}
+                      trailingIcon={isSelected ? <Icon name="check-line" size="xs" tone="success" /> : undefined}
+                      onClick={() => toggleContextSection(section)}
+                      aria-pressed={isSelected}
+                      disabled={submitting}
+                    >
+                      {label}
+                    </Button>
+                  </Tooltip>
+                </span>
+              );
+            })}
+          </div>
+        </div>
+        <div
+          ref={promptControlRef}
+          id={fieldId('prompt')}
+          role="group"
+          aria-labelledby={fieldId('prompt-label')}
+          aria-describedby={`${fieldId('runtime-context-preview')}${promptError ? ` ${fieldId('prompt-error')}` : ''}`}
+          aria-invalid={promptError || undefined}
+          data-openbitfun-component="create-agent-page"
+          data-openbitfun-part="prompt"
+          className="th-create-panel__prompt-control"
+        >
+          <React.Suspense fallback={<p className="th__title-sub" role="status">{t('agentsOverview.form.loadingDetail')}</p>}>
+            <MEditor
+              value={prompt}
+              onChange={(value) => {
+                setPrompt(value);
+                setPromptError(false);
+              }}
+              placeholder={t('agentsOverview.form.promptPlaceholder')}
+              emptyDocumentPlaceholder={t('agentsOverview.form.promptPlaceholder')}
+              mode="ir"
+              toolbar={false}
+              height="100%"
+              readonly={submitting}
+              autofocus={standalone}
+              className="th-create-panel__markdown-editor"
+            />
+          </React.Suspense>
+        </div>
+      </div>
+      {promptError && (
+        <span id={fieldId('prompt-error')} className="th-create-panel__error" role="alert">
+          {t('agentsOverview.form.promptRequired')}
+        </span>
+      )}
+    </div>
+  );
+
   const formActions = (
     <>
       <Button
@@ -493,404 +939,118 @@ const CreateAgentPage: React.FC<CreateAgentPageProps> = ({ standalone = false, o
       >
         {t('agentsOverview.form.cancel')}
       </Button>
+      {standalone && step > 0 && (
+        <Button type="button" variant="outline" size="sm" onClick={() => setStep(step - 1)} disabled={submitting}>
+          {t('agentsOverview.form.wizard.back')}
+        </Button>
+      )}
       <Button
         className="th-create-page__action"
         type="submit"
         form={formId}
         variant="primary"
         size="sm"
-        disabled={submitting || toolsEditing}
+        disabled={submitting || toolsEditing || (standalone && step === 2 && (toolsLoading || toolsLoadError))}
         loading={submitting}
       >
-        {submitLabel}
+        {standalone && step < 2 ? t('agentsOverview.form.wizard.next') : submitLabel}
       </Button>
     </>
   );
 
-  const page = (
-    <div className={`tv th-create-page${standalone ? ' th-create-page--dialog' : ''}`} data-openbitfun-component="create-agent-page" data-openbitfun-part="root">
-      <ScrollArea className="th__list-body th-create-page__body">
-        <div className="th__list-inner th-create-page__inner" data-openbitfun-component="create-agent-page" data-openbitfun-part="body">
-          {!standalone && (
-            <header className="th-create-page__head" data-openbitfun-component="create-agent-page" data-openbitfun-part="heading">
-              <PageHeader title={formTitle} level={2} />
-            </header>
-          )}
-
-          <form
-            id={formId}
-            className="th-create-page__form"
-            data-openbitfun-component="create-agent-page"
-            data-openbitfun-part="form"
-            onSubmit={(event) => {
-              event.preventDefault();
-              if (submitting || toolsEditing) {
-                return;
-              }
-              void handleSubmit();
-            }}
-          >
-            <div className="th-create-page__columns" data-openbitfun-component="create-agent-page" data-openbitfun-part="columns">
-              <section
-                className="th-create-page__panel th-create-page__panel--definition"
-                data-openbitfun-component="create-agent-page"
-                data-openbitfun-part="column"
-              >
-                <div className="th-create-page__section">
-                  <div className="th-create-page__section-heading" data-openbitfun-component="create-agent-page" data-openbitfun-part="sectionHeading">
-                    <h3>{t('agentsOverview.form.basicInformation')}</h3>
-                  </div>
-
-                  <div className="th-create-panel__field" data-openbitfun-component="create-agent-page" data-openbitfun-part="field">
-                    <span className="th-create-panel__label">{t('agentsOverview.form.kind')}</span>
-                    <div
-                      className="th-create-panel__level-group"
-                      data-openbitfun-component="create-agent-page"
-                      data-openbitfun-part="levelGroup"
-                      role="group"
-                      aria-label={t('agentsOverview.form.kind')}
-                    >
-                      {(['mode', 'subagent'] as CustomAgentKind[]).map((candidateKind) => (
-                        <Tooltip
-                          key={candidateKind}
-                          content={t(
-                            candidateKind === 'mode'
-                              ? 'agentsOverview.form.kindAgentTooltip'
-                              : 'agentsOverview.form.kindSubagentTooltip',
-                          )}
-                          placement="top"
-                        >
-                          <button
-                            type="button"
-                            disabled={isEdit}
-                            className={`th-create-panel__level-btn${kind === candidateKind ? ' is-active' : ''}`}
-                            data-openbitfun-component="create-agent-page"
-                            data-openbitfun-part="levelOption"
-                            data-openbitfun-state={kind === candidateKind ? 'active' : undefined}
-                            aria-pressed={kind === candidateKind}
-                            onClick={() => setKind(candidateKind)}
-                          >
-                            {candidateKind === 'mode'
-                              ? t('filters.agent')
-                              : t('filters.subagent')}
-                          </button>
-                        </Tooltip>
-                      ))}
-                    </div>
-                  </div>
-
-                  <div className="th-create-panel__identity-fields">
-                    <div className="th-create-panel__field">
-                      <label className="th-create-panel__label" htmlFor={fieldId('id')}>
-                        {t('agentsOverview.form.id')}
-                      </label>
-                      <Input
-                        id={fieldId('id')}
-                        value={agentId}
-                        onChange={(event) => {
-                          setAgentId(event.target.value);
-                          setAgentIdError(validateAgentId(event.target.value));
-                        }}
-                        onBlur={() => setAgentIdError(validateAgentId(agentId))}
-                        placeholder={t('agentsOverview.form.idPlaceholder')}
-                        invalid={!!agentIdError}
-                        disabled={isEdit}
-                        size="sm"
-                      />
-                      {agentIdError ? (
-                        <span className="th-create-panel__error" data-openbitfun-component="create-agent-page" data-openbitfun-part="error" role="alert">{agentIdError}</span>
-                      ) : null}
-                    </div>
-
-                    <div className="th-create-panel__field">
-                      <label className="th-create-panel__label" htmlFor={fieldId('name')}>
-                        {t('agentsOverview.form.name')}
-                      </label>
-                      <Input
-                        id={fieldId('name')}
-                        value={name}
-                        onChange={(event) => setName(event.target.value)}
-                        placeholder={t('agentsOverview.form.namePlaceholder')}
-                        size="sm"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="th-create-panel__field">
-                    <label className="th-create-panel__label" htmlFor={fieldId('description')}>
-                      {t('agentsOverview.form.description')}
-                    </label>
-                    <Input
-                      id={fieldId('description')}
-                      value={description}
-                      onChange={(event) => setDescription(event.target.value)}
-                      placeholder={t('agentsOverview.form.descPlaceholder')}
-                      size="sm"
-                    />
-                  </div>
-
-                  {kind === 'subagent' ? (
-                    <div className="th-create-panel__field">
-                      <span className="th-create-panel__label">{t('agentsOverview.form.level')}</span>
-                      <div
-                        className="th-create-panel__level-group"
-                        data-openbitfun-component="create-agent-page"
-                        data-openbitfun-part="levelGroup"
-                        role="group"
-                        aria-label={t('agentsOverview.form.level')}
-                      >
-                        {(['user', 'project'] as CustomAgentLevel[]).map((candidateLevel) => {
-                          const disabled =
-                            (candidateLevel === 'project' && !hasWorkspace) || isEdit;
-                          return (
-                            <button
-                              data-openbitfun-component="create-agent-page"
-                              data-openbitfun-part="levelOption"
-                              key={candidateLevel}
-                              type="button"
-                              disabled={disabled}
-                              className={`th-create-panel__level-btn${level === candidateLevel ? ' is-active' : ''}`}
-                              data-openbitfun-state={level === candidateLevel ? 'active' : undefined}
-                              aria-pressed={level === candidateLevel}
-                              onClick={() => setLevel(candidateLevel)}
-                              title={
-                                disabled && !isEdit && candidateLevel === 'project'
-                                  ? t('agentsOverview.form.noWorkspace')
-                                  : undefined
-                              }
-                            >
-                              {candidateLevel === 'user'
-                                ? t('agentsOverview.filterUser')
-                                : t('agentsOverview.filterProject')}
-                            </button>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ) : null}
-
-                  <div className="th-create-panel__field th-create-panel__field--row">
-                    <div className="th-create-panel__readonly-row">
-                      <span className="th-create-panel__label">
-                        {t('agentsOverview.form.readonly')}
-                      </span>
-                      <Switch
-                        checked={readonly}
-                        disabled={kind === 'subagent' && review}
-                        onChange={(event) => handleReadonlyChange(event.target.checked)}
-                        aria-label={t('agentsOverview.form.readonly')}
-                      />
-                    </div>
-                    {kind === 'subagent' ? (
-                      <div className="th-create-panel__readonly-row">
-                        <span className="th-create-panel__label">
-                          {t('agentsOverview.form.review')}
-                        </span>
-                        <Switch
-                          checked={review}
-                          onChange={(event) => handleReviewChange(event.target.checked)}
-                          aria-label={t('agentsOverview.form.review')}
-                        />
-                      </div>
-                    ) : null}
+  const formContent = (
+    <form
+      ref={formRef}
+      id={formId}
+      className="th-create-page__form"
+      data-openbitfun-component="create-agent-page"
+      data-openbitfun-part="form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (submitting || toolsEditing) return;
+        if (standalone && step < 2) {
+          handleNext();
+          return;
+        }
+        if (standalone && (toolsLoading || toolsLoadError)) return;
+        void handleSubmit();
+      }}
+    >
+      <div className="th-create-page__columns" data-openbitfun-component="create-agent-page" data-openbitfun-part="columns">
+        {(!standalone || step !== 1) && (
+          <section className="th-create-page__panel th-create-page__panel--definition" data-openbitfun-component="create-agent-page" data-openbitfun-part="column">
+            {(!standalone || step === 0) && basicInformation}
+            {(!standalone || step === 2) && (
+              <>
+                {standalone && permissionControls}
+                {standalone && toolsLoading ? (
+                  <p className="th__title-sub" role="status">{t('agentsOverview.form.wizard.loadingTools')}</p>
+                ) : standalone && toolsLoadError ? (
+                  <div className="th-create-page__section">
+                    <p className="th-create-panel__error" role="alert">{t('agentsOverview.form.wizard.toolsLoadFailed')}</p>
+                    <Button type="button" variant="outline" size="sm" onClick={() => setToolsAttempt((value) => value + 1)}>
+                      {t('agentsOverview.form.wizard.retry')}
+                    </Button>
                   </div>
-                </div>
-
-                {selectableTools.length > 0 ? (
+                ) : (
                   <>
-                    <div className="th-create-page__section th-create-page__section--tools">
-                      <div className="th-create-panel__field-head">
-                        <div
-                          className="th-create-page__section-heading th-create-page__section-heading--tools"
-                          data-openbitfun-component="create-agent-page"
-                          data-openbitfun-part="sectionHeading"
-                        >
-                          <h3>{t('agentsOverview.form.tools')}</h3>
-                          <span className="th-create-panel__label-hint">
-                            {kind === 'subagent' && review
-                              ? t('agentsOverview.form.reviewToolsHint')
-                              : t('agentsOverview.form.toolsHint', {
-                                  optionalLabel: t('agentsOverview.form.toolsOptional'),
-                                })}
-                          </span>
-                        </div>
-                        {toolsEditing ? (
-                          <div className="th-create-panel__tool-edit-actions">
-                            <Button
-                              type="button"
-                              variant="fill"
-                              size="sm"
-                              onClick={() => {
-                                setToolsEditing(false);
-                                setPendingTools(null);
-                              }}
-                              disabled={submitting}
-                            >
-                              {t('agentsOverview.cancel')}
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="primary"
-                              size="sm"
-                              onClick={() => {
-                                setSelectedTools(new Set(pendingTools ?? selectedTools));
-                                setToolsEditing(false);
-                                setPendingTools(null);
-                              }}
-                              disabled={submitting}
-                            >
-                              {t('agentsOverview.save')}
-                            </Button>
-                          </div>
-                        ) : (
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => {
-                              setPendingTools(new Set(selectedTools));
-                              setToolsEditing(true);
-                            }}
-                            disabled={submitting}
-                            leadingIcon={<Icon name="settings" size="sm" aria-hidden="true" />}
-                          >
-
-                            {t('agentsOverview.toolsEdit')}
-                          </Button>
-                        )}
-                      </div>
-                      {toolsEditing ? (
-                        <ScrollArea className="th-create-panel__tool-editor" overscrollBehaviorY="contain">
-                          <ToolGroupPicker
-                            grouped={false}
-                            tools={selectableGroupTools}
-                            managementTools={managementGroupTools}
-                            selectedToolNames={Array.from(pendingTools ?? selectedTools)}
-                            userGroups={userToolGroups}
-                            onSelectionChange={(toolNames) => setPendingTools(new Set(toolNames))}
-                            onSaveUserGroups={saveUserToolGroups}
-                            disabled={submitting}
-                            testId="custom-agent-tool-groups"
-                          />
-                        </ScrollArea>
-                      ) : (
-                        <ScrollArea
-                          className="th-create-panel__tool-summary"
-                        >
-                          <ToolGroupSummary
-                            grouped={false}
-                            tools={selectableGroupTools}
-                            selectedToolNames={Array.from(selectedTools)}
-                            userGroups={userToolGroups}
-                          />
-                        </ScrollArea>
-                      )}
-                    </div>
+                    {toolSelection}
+                    {standalone && selectableTools.length === 0 && (
+                      <p className="th__title-sub">{t('agentsOverview.form.wizard.noTools')}</p>
+                    )}
                   </>
-                ) : null}
-              </section>
+                )}
+              </>
+            )}
+          </section>
+        )}
+        {(!standalone || step === 1) && (
+          <section className="th-create-page__panel th-create-page__panel--capabilities" data-openbitfun-component="create-agent-page" data-openbitfun-part="column">
+            {promptEditor}
+          </section>
+        )}
+      </div>
+    </form>
+  );
 
-              <section
-                className="th-create-page__panel th-create-page__panel--capabilities"
-                data-openbitfun-component="create-agent-page"
-                data-openbitfun-part="column"
-              >
-                <div className="th-create-panel__field th-create-panel__field--prompt">
-                  <h3 className="th-create-page__prompt-heading" data-openbitfun-component="create-agent-page" data-openbitfun-part="sectionHeading">
-                    <label className="th-create-panel__label th-create-panel__label--strong" htmlFor={fieldId('prompt')}>
-                      {t('agentsOverview.form.prompt')}
-                    </label>
-                  </h3>
-                  <div
-                    className="th-create-panel__prompt-editor"
-                    data-openbitfun-component="create-agent-page"
-                    data-openbitfun-part="promptEditor"
-                  >
-                    <div
-                      id={fieldId('runtime-context-preview')}
-                      className="th-create-panel__prompt-context-preview"
-                      data-openbitfun-component="create-agent-page"
-                      data-openbitfun-part="contextPreview"
-                    >
-                      <span className="th-create-panel__prompt-context-label">
-                        {t('agentsOverview.form.contextPreviewLabel')}
-                      </span>
-                      <div className="th-create-panel__context-options" data-openbitfun-component="create-agent-page" data-openbitfun-part="tools" role="group" aria-label={t('agentsOverview.form.contextPolicy')}>
-                        {VISIBLE_CONTEXT_SECTIONS.map((section) => {
-                          const label = contextSectionLabels[section];
-                          const isSelected = userContextPolicy.has(section);
-                          return (
-                            <span
-                              key={section}
-                              className="th-create-panel__context-option"
-                              data-openbitfun-component="create-agent-page"
-                              data-openbitfun-part="tool"
-                              data-openbitfun-state={isSelected ? 'active' : undefined}
-                            >
-                              <Tooltip content={contextSectionTooltips[section]} placement="top">
-                                <Button
-                                  type="button"
-                                  size="xs"
-                                  variant={isSelected ? 'fill' : 'outline'}
-                                  leadingIcon={<Icon {...CONTEXT_SECTION_ICONS[section]} size="xs" />}
-                                  trailingIcon={isSelected ? <Icon name="check-line" size="xs" tone="success" /> : undefined}
-                                  onClick={() => toggleContextSection(section)}
-                                  aria-pressed={isSelected}
-                                  disabled={submitting}
-                                >
-                                  {label}
-                                </Button>
-                              </Tooltip>
-                            </span>
-                          );
-                        })}
-                      </div>
-                    </div>
-                    <div
-                      data-openbitfun-component="create-agent-page"
-                      data-openbitfun-part="prompt"
-                      className="th-create-panel__prompt-control"
-                    >
-                      <Textarea
-                        id={fieldId('prompt')}
-                        value={prompt}
-                        onChange={(event) => setPrompt(event.target.value)}
-                        placeholder={t('agentsOverview.form.promptPlaceholder')}
-                        aria-describedby={fieldId('runtime-context-preview')}
-                        layout="fill"
-                        resize="none"
-                        rows={20}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </section>
+  const page = (
+    <div className={`tv th-create-page${standalone ? ' th-create-page--dialog' : ''}${standalone && step === 1 ? ' th-create-page--prompt-step' : ''}`} data-openbitfun-component="create-agent-page" data-openbitfun-part="root">
+      {standalone ? (
+        <SetupWizard
+          title={formTitle}
+          titleId={titleId}
+          headerActions={<DialogClose />}
+          guideLabel={t('agentsOverview.form.wizard.navigation')}
+          step={{
+            ...steps[step],
+            progress: t('agentsOverview.form.wizard.progress', { current: formatNumber(step + 1), total: formatNumber(steps.length) }),
+          }}
+          contentMode={step === 1 ? 'contained' : 'scroll'}
+          footer={<div className="th-create-page__actions" data-openbitfun-component="create-agent-page" data-openbitfun-part="actions">{formActions}</div>}
+        >
+          {formContent}
+        </SetupWizard>
+      ) : (
+        <>
+          <ScrollArea className="th__list-body th-create-page__body">
+            <div className="th__list-inner th-create-page__inner" data-openbitfun-component="create-agent-page" data-openbitfun-part="body">
+              <header className="th-create-page__head" data-openbitfun-component="create-agent-page" data-openbitfun-part="heading">
+                <PageHeader title={formTitle} level={2} />
+              </header>
+              {formContent}
             </div>
-          </form>
-        </div>
-      </ScrollArea>
-      {!standalone && (
-        <footer className="th-create-page__footer">
-          <div className="th-create-page__footer-inner">
-            <div className="th-create-page__actions" data-openbitfun-component="create-agent-page" data-openbitfun-part="actions">
-              {formActions}
+          </ScrollArea>
+          <footer className="th-create-page__footer">
+            <div className="th-create-page__footer-inner">
+              <div className="th-create-page__actions" data-openbitfun-component="create-agent-page" data-openbitfun-part="actions">{formActions}</div>
             </div>
-          </div>
-        </footer>
+          </footer>
+        </>
       )}
     </div>
   );
 
-  return standalone ? (
-    <>
-      <DialogBody inset="none">{page}</DialogBody>
-      <DialogFooter separator>
-        <div className="th-create-page__actions" data-openbitfun-component="create-agent-page" data-openbitfun-part="actions">
-          {formActions}
-        </div>
-      </DialogFooter>
-    </>
-  ) : page;
+  return standalone ? <DialogBody inset="none">{page}</DialogBody> : page;
 };
 
 export default CreateAgentPage;
diff --git a/src/web-ui/src/app/scenes/personal-overview/PersonalOverviewScene.actions.test.tsx b/src/web-ui/src/app/scenes/personal-overview/PersonalOverviewScene.actions.test.tsx
index ee5e5b19b7..d2553dded8 100644
--- a/src/web-ui/src/app/scenes/personal-overview/PersonalOverviewScene.actions.test.tsx
+++ b/src/web-ui/src/app/scenes/personal-overview/PersonalOverviewScene.actions.test.tsx
@@ -2,6 +2,7 @@
 import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Editor } from '@tiptap/core';
 import { activateSurface, resetDeviceSurfaceForTest } from '@/infrastructure/peer-device/deviceSurface';
 import { ConfirmDialogRenderer, useConfirmDialogStore } from '@/infrastructure/confirm-dialog';
 import { useAgentsStore } from '../agents/agentsStore';
@@ -107,14 +108,27 @@ const answerAssistantConfirmation = (confirm: boolean) => act(async () => {
   const label = confirm ? 'agents.createAssistant' : 'dialog.confirm.cancel';
   [...document.querySelectorAll<HTMLButtonElement>('[role="alertdialog"] button')].find(button => button.textContent === label)!.click();
 });
-const fillAgentField = (field: string, value: string) => act(async () => {
-  const control = document.querySelector<HTMLInputElement | HTMLTextAreaElement>(`[role="dialog"] [id$="custom-agent-${field}"]`)!;
-  const prototype = control instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
-  Object.getOwnPropertyDescriptor(prototype, 'value')!.set!.call(control, value);
-  control.dispatchEvent(new Event('input', { bubbles: true }));
-});
+const fillAgentField = async (field: string, value: string, scope: ParentNode = document.querySelector('[role="dialog"]')!) => {
+  if (field === 'prompt') {
+    await act(async () => { await vi.dynamicImportSettled(); });
+    const editor = scope.querySelector<HTMLElement & { editor: Editor }>('[id$="custom-agent-prompt"] .ProseMirror')!.editor;
+    act(() => editor.commands.setContent({
+      type: 'doc',
+      content: [{ type: 'paragraph', content: [{ type: 'text', text: value }] }],
+    }));
+    return;
+  }
+  await act(async () => {
+    const control = scope.querySelector<HTMLInputElement | HTMLTextAreaElement>(`[id$="custom-agent-${field}"]`)!;
+    const prototype = control instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+    Object.getOwnPropertyDescriptor(prototype, 'value')!.set!.call(control, value);
+    control.dispatchEvent(new Event('input', { bubbles: true }));
+  });
+};
 beforeEach(() => {
   Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  Range.prototype.getClientRects = () => [] as unknown as DOMRectList;
+  Range.prototype.getBoundingClientRect = () => new DOMRect();
   resetDeviceSurfaceForTest();
   useConfirmDialogStore.setState({ isOpen: false, options: null, resolve: null });
   useAgentsStore.setState(useAgentsStore.getInitialState(), true);
@@ -174,11 +188,13 @@ describe('overview catalog actions', () => {
     expect(mocks.openScene).not.toHaveBeenCalled();
     await fillAgentField('id', 'new-agent');
     await fillAgentField('description', 'A new agent');
+    await clickDialogButton('agentsOverview.form.wizard.next');
     await fillAgentField('prompt', 'Help with the task.');
     const contextControls = document.querySelector('[role="dialog"] .th-create-panel__context-options')!;
     expect(contextControls.querySelectorAll('[aria-pressed="true"]')).toHaveLength(2);
     await clickDialogButton('agentsOverview.form.contextWorkspaceContext');
     await clickDialogButton('agentsOverview.form.contextProjectLayout');
+    await clickDialogButton('agentsOverview.form.wizard.next');
     await clickDialogButton('agentsOverview.form.submit');
     expect(mocks.createAgent).toHaveBeenCalledWith(expect.objectContaining({
       id: 'new-agent', kind: 'mode', description: 'A new agent', prompt: 'Help with the task.',
@@ -206,12 +222,7 @@ describe('overview catalog actions', () => {
     mocks.createAgent.mockReturnValue(new Promise<void>(resolve => { finish = resolve; }));
     await act(async () => { root.render(<CreateAgentPage />); });
     for (const [field, value] of [['id', 'page-agent'], ['description', 'Page agent'], ['prompt', 'Original prompt']]) {
-      await act(async () => {
-        const control = container.querySelector<HTMLInputElement | HTMLTextAreaElement>(`[id$="custom-agent-${field}"]`)!;
-        const prototype = control instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
-        Object.getOwnPropertyDescriptor(prototype, 'value')!.set!.call(control, value);
-        control.dispatchEvent(new Event('input', { bubbles: true }));
-      });
+      await fillAgentField(field, value, container);
     }
     const submit = container.querySelector<HTMLButtonElement>('.th-create-page__footer button[type="submit"]')!;
     await act(async () => { submit.click(); });
@@ -229,7 +240,9 @@ describe('overview catalog actions', () => {
     await click('personal-overview-create-agent');
     await fillAgentField('id', 'old-agent');
     await fillAgentField('description', 'Created on the original device');
+    await clickDialogButton('agentsOverview.form.wizard.next');
     await fillAgentField('prompt', 'Original task');
+    await clickDialogButton('agentsOverview.form.wizard.next');
     await clickDialogButton('agentsOverview.form.submit');
     expect(mocks.createAgent).toHaveBeenCalledOnce();
     await act(async () => { activateSurface('peer-host'); });
diff --git a/src/web-ui/src/app/scenes/personal-overview/PersonalOverviewScene.scss b/src/web-ui/src/app/scenes/personal-overview/PersonalOverviewScene.scss
index d4c16d7e62..6d5180230d 100644
--- a/src/web-ui/src/app/scenes/personal-overview/PersonalOverviewScene.scss
+++ b/src/web-ui/src/app/scenes/personal-overview/PersonalOverviewScene.scss
@@ -188,7 +188,12 @@
     min-inline-size: 0;
   }
 
-  &__heatmap { padding: 20px; border-radius: 22px; }
+  &__heatmap {
+    padding-block: 20px;
+    // Keep the smaller calendar text optically inside the heading's edge.
+    padding-inline: calc(var(--openbitfun-space-1) / 2);
+    border-radius: 22px;
+  }
 
 }
 
@@ -214,6 +219,6 @@
 
 @container personal-overview (max-width: 440px) {
   .personal-overview {
-    &__heatmap { padding: 16px 12px; }
+    &__heatmap { padding-block: 16px; }
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.scss b/src/web-ui/src/flow_chat/components/ModelSelector.scss
index 2540b48e0f..d76cba1510 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.scss
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.scss
@@ -162,7 +162,7 @@ $model-mode-dust-sizes: ();
 
   &__dropdown {
     --openbitfun-model-dropdown-offset: -4px;
-    --openbitfun-overlay-menu-inline-size: min(280px, calc(100vw - 16px));
+    --openbitfun-overlay-menu-inline-size: min(240px, calc(100vw - 16px));
     // One geometry owner for manual, smart, pool and their loading state.
     --_model-selector-card-height: calc(var(--openbitfun-space-16) * 2 + var(--openbitfun-space-2));
 
@@ -208,24 +208,32 @@ $model-mode-dust-sizes: ();
       transition: none;
     }
 
+    &[data-model-picker='true'],
+    &[data-menu-level='pool'] {
+      > [data-openbitfun-component='scroll-area'] {
+        display: flex;
+        flex-direction: column;
+        min-block-size: 0;
+        overflow: clip;
+
+        > [data-openbitfun-menu-list] {
+          min-block-size: 0;
+          flex: 1;
+        }
+      }
+    }
+
     &[data-menu-level='settings'] {
-      // All mode summaries share a borderless surface. Detail menus retain their insets.
+      // The homepage is one compact settings card; detail menus retain their insets.
       --openbitfun-overlay-menu-surface-padding: 0px;
       --openbitfun-overlay-menu-scrollbar-gap: 0px;
 
       overflow: hidden;
-      border: 0;
-      border-radius: var(--openbitfun-radius-lg);
+      border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+      border-radius: var(--openbitfun-radius-xl);
       background: var(--openbitfun-color-surface-raised);
       box-shadow: var(--openbitfun-shadow-menu);
 
-      @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
-        // Leave room for the nebula layers without hiding the blurred backdrop.
-        background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 40%, transparent);
-        -webkit-backdrop-filter: var(--openbitfun-effect-blur-base);
-        backdrop-filter: var(--openbitfun-effect-blur-base);
-      }
-
       @media (prefers-reduced-transparency: reduce) {
         background: var(--openbitfun-color-surface-raised);
         -webkit-backdrop-filter: none;
@@ -479,58 +487,218 @@ $model-mode-dust-sizes: ();
     position: relative;
     z-index: 2;
     box-sizing: border-box;
-    block-size: auto;
-    min-block-size: var(--_model-selector-card-height);
-    justify-content: space-between;
-    padding: 0;
+    min-block-size: 0;
+    padding-block: var(--openbitfun-space-1);
+    padding-inline: var(--openbitfun-space-1);
+  }
 
-    &:not([data-model-mode]) {
-      padding-block-start: var(--openbitfun-space-1);
+  &__settings-row {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--openbitfun-control-height-md);
+    padding-inline: var(--openbitfun-space-3);
+    color: var(--openbitfun-color-content-primary);
+    font-family: var(--openbitfun-type-label-md-font-family);
+    font-size: var(--openbitfun-type-label-md-font-size);
+    font-weight: var(--openbitfun-type-label-md-font-weight);
+    line-height: var(--openbitfun-type-action-row-line-height);
+    letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
+  }
+
+  &__settings-row {
+    [data-openbitfun-part='metadata'] {
+      min-inline-size: 0;
+      max-inline-size: 65%;
+      color: var(--openbitfun-color-content-secondary);
+      font-family: var(--openbitfun-type-label-md-font-family);
+      font-size: var(--openbitfun-type-label-md-font-size);
+      font-weight: var(--openbitfun-type-label-md-font-weight);
+      line-height: var(--openbitfun-type-action-row-line-height);
+      letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
     }
 
-    // Keep one layout while the reasoning control animates its content height in both directions.
-    &:not([data-model-mode])[data-has-model='true'] {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      padding-block-start: 0;
+    [data-openbitfun-part='shortcut'] {
+      color: var(--openbitfun-color-content-muted);
+    }
+  }
 
-      .openbitfun-model-selector__model-summary {
-        grid-area: 1 / 1;
-        padding-block: 0;
-      }
+  &__context-row {
+    display: flex;
+    align-items: center;
+    gap: var(--openbitfun-space-1);
 
-      .openbitfun-model-selector__mode-footer {
-        grid-area: 1 / 1;
-        align-self: end;
-      }
+    > label {
+      flex: 1;
     }
+  }
 
-    &[data-selecting-mode='true'] {
-      .openbitfun-model-selector__model-field,
-      .openbitfun-model-selector__mode-footer,
-      .openbitfun-model-selector__mode-summary,
-      .openbitfun-reasoning-control__value {
-        visibility: hidden;
-      }
+  &__settings-info-row {
+    display: flex;
+    align-items: center;
+    gap: var(--openbitfun-space-2);
+    margin: 0;
+
+    > dt {
+      flex: 1;
+      min-inline-size: 0;
     }
 
-    &[data-has-reasoning='true'] {
-      .openbitfun-model-selector__mode-footer,
-      .openbitfun-model-selector__model-field {
-        position: relative;
-        z-index: 1;
-        pointer-events: none;
+    > dd {
+      min-inline-size: 0;
+      max-inline-size: 65%;
+      margin: 0;
+      color: var(--openbitfun-color-content-secondary);
+    }
+  }
+
+  &__context-input {
+    inline-size: 100px;
+    min-inline-size: 0;
+  }
+
+  &__pool-connections {
+    block-size: calc(var(--openbitfun-space-16) * 4);
+    flex: 0 1 auto;
+    min-block-size: 0;
+  }
+
+  &__pool-model {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    min-block-size: var(--openbitfun-control-height-sm);
+    padding-inline: var(--openbitfun-space-2);
+  }
+
+  &__context-save:hover:not(:disabled) {
+    color: var(--openbitfun-color-status-success-emphasis);
+  }
+
+  &__context-error {
+    padding: var(--openbitfun-space-1) var(--openbitfun-space-3);
+    color: var(--openbitfun-color-status-danger-content);
+    font-family: var(--openbitfun-type-label-sm-font-family);
+    font-size: var(--openbitfun-type-label-sm-font-size);
+    line-height: var(--openbitfun-type-label-sm-line-height);
+  }
+
+  &__picker {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  &__picker-results {
+    // Filtering preserves the list height; only a constrained viewport may shrink it.
+    block-size: calc(var(--openbitfun-space-16) * 4);
+    flex: 0 1 auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+
+    > .openbitfun-model-selector__level {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-block-size: 100%;
+    }
+  }
+
+  &__picker-footer {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    gap: var(--openbitfun-space-1);
+    padding-block-start: var(--openbitfun-space-1);
+    margin-block-start: var(--openbitfun-space-1);
+  }
+
+  &__picker-actions {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--openbitfun-control-height-sm);
+    gap: var(--openbitfun-space-1);
+
+    &[data-search-expanded='true'] {
+      .openbitfun-model-selector__search-slot {
+        flex-grow: 1;
       }
 
-      .openbitfun-model-selector__model-control,
-      .openbitfun-model-selector__mode-control,
-      .openbitfun-model-selector__provider-control {
-        pointer-events: auto;
+      .openbitfun-model-selector__quick-actions-slot {
+        flex-grow: 0;
       }
+    }
+
+    [aria-pressed='true'] {
+      color: var(--openbitfun-color-content-primary);
+      background: var(--openbitfun-color-selection-surface);
+    }
+  }
+
+  &__search-slot,
+  &__quick-actions-slot {
+    display: flex;
+    align-items: center;
+    flex: 0 1 var(--openbitfun-control-icon-button-xs-size);
+    min-inline-size: var(--openbitfun-control-icon-button-xs-size);
+    overflow: clip;
+    overflow-clip-margin: var(--openbitfun-space-1);
+    transition: flex-grow var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-decelerate);
+  }
+
+  &__quick-actions-slot {
+    flex-grow: 1;
+    justify-content: center;
+  }
 
+  &__provider-filter {
+    flex: 0 0 auto;
+  }
+
+  &__actions-divider {
+    flex: 0 0 auto;
+    inline-size: var(--openbitfun-border-width-default);
+    block-size: var(--openbitfun-control-icon-size-sm);
+    margin-inline: var(--openbitfun-space-1);
+    background: var(--openbitfun-color-border-subtle);
+  }
+
+  &__quick-actions {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 0;
+    gap: var(--openbitfun-space-2);
+    padding-inline: var(--openbitfun-space-1);
+    animation: model-selector-action-enter var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-decelerate);
+
+    [aria-pressed='true'] {
+      border-radius: var(--openbitfun-radius-pill);
+    }
+
+    [aria-pressed='true'] [data-openbitfun-part='label'] {
+      font-weight: var(--openbitfun-type-label-selected-font-weight);
+      animation: model-selector-label-enter var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-decelerate);
     }
   }
 
+  &__search-input {
+    flex: 1;
+    min-inline-size: 0;
+    animation: model-selector-action-enter var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-decelerate);
+  }
+
+  &__search-empty [data-openbitfun-part='label'] {
+    text-align: center;
+  }
+
+  &__grid-action {
+    animation: model-selector-action-enter var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-decelerate);
+  }
+
   &__loading {
     position: relative;
     z-index: 1;
@@ -672,17 +840,6 @@ $model-mode-dust-sizes: ();
     min-inline-size: 0;
     min-block-size: 0;
 
-    .openbitfun-reasoning-control {
-      // Anchor the sky to the card while the inline choices follow the model.
-      position: static;
-      isolation: auto;
-      overflow: visible;
-    }
-
-    .openbitfun-reasoning-control__value {
-      color: var(--openbitfun-color-content-secondary);
-    }
-
     .openbitfun-reasoning-control {
       // Let the retained content own height throughout expansion and collapse.
       &,
@@ -691,10 +848,6 @@ $model-mode-dust-sizes: ();
         min-block-size: 0;
       }
     }
-
-    .openbitfun-reasoning-control__backdrop {
-      z-index: 0;
-    }
   }
 
   &__mode-footer {
@@ -759,6 +912,23 @@ $model-mode-dust-sizes: ();
     padding-inline: var(--openbitfun-space-1);
   }
 
+  &__option--selected {
+    background: transparent;
+
+    [data-openbitfun-part='label'] {
+      font-weight: var(--openbitfun-type-label-selected-font-weight);
+    }
+
+    &:not([data-disabled='true']):is(:hover, :has(> [data-openbitfun-part='trigger']:active)) {
+      background: var(--openbitfun-color-action-neutral-surface-hover);
+
+      @media (forced-colors: active) {
+        color: HighlightText;
+        background: Highlight;
+      }
+    }
+  }
+
   &__option-main {
     display: flex;
     align-items: center;
@@ -776,9 +946,10 @@ $model-mode-dust-sizes: ();
     overflow: hidden;
   }
 
-  &__option-selected-check {
+  &__option-selected-check,
+  &__action-selected-check {
     flex-shrink: 0;
-    color: var(--openbitfun-color-status-success-content);
+    color: var(--openbitfun-color-status-success-emphasis);
   }
 
   &__option-provider {
@@ -855,14 +1026,47 @@ $model-mode-dust-sizes: ();
   }
 }
 
+@keyframes model-selector-action-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--openbitfun-space-1));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes model-selector-label-enter {
+  from {
+    opacity: 0;
+    transform: translateX(calc(var(--openbitfun-space-1) * -1));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .openbitfun-model-selector__dropdown,
   .openbitfun-model-selector__trigger,
   .openbitfun-model-selector__chevron,
-  .openbitfun-model-selector__level {
+  .openbitfun-model-selector__level,
+  .openbitfun-model-selector__search-slot,
+  .openbitfun-model-selector__quick-actions-slot {
     transition-duration: 0ms;
   }
 
+  .openbitfun-model-selector__quick-actions,
+  .openbitfun-model-selector__quick-actions [aria-pressed='true'] [data-openbitfun-part='label'],
+  .openbitfun-model-selector__search-input,
+  .openbitfun-model-selector__grid-action {
+    animation: none;
+  }
+
   .openbitfun-model-selector__dropdown {
     animation: none;
 
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.tsx b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
index f30b497b20..25dcb70a65 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
@@ -8,11 +8,11 @@
  * - Supports 'primary' | 'fast' | specific model IDs
  */
 
-import { subscribeOverlayInteraction, createOverlayPortal, LoadingState, Menu, MenuItem, MenuList, MenuSection, MenuSeparator, OverflowText, SegmentedControl, Spinner } from '@openbitfun/ui';
+import { createOverlayPortal, useDismissibleLayer, Button, IconButton, Input, LoadingState, Menu, MenuItem, MenuList, MenuPopover, MenuSection, MenuSeparator, OverflowText, ScrollArea, SegmentedControl, Spinner } from '@openbitfun/ui';
 import React, { useState, useEffect, useId, useRef, useCallback, useLayoutEffect, useMemo, useSyncExternalStore } from 'react';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { getActiveSurfaceScope, onSurfaceActivated } from '@/infrastructure/peer-device/deviceSurface';
-import { Zap } from 'lucide-react';
+import { Gem, LayoutGrid, Rocket, Zap } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n';
 import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import { agentAPI } from '@/infrastructure/api/service-api/AgentAPI';
@@ -41,6 +41,7 @@ import { quickActions } from '@/shared/services/ide-control';
 import {
   buildContextUsageTooltip,
   buildModelSelectorTooltipDetails,
+  formatCompactTokenCount,
   type ContextUsageSource,
   type ModelSelectorTooltipDetails,
 } from '../utils/tokenUsageDisplay';
@@ -49,7 +50,7 @@ import { getModelSelectorDropdownLayout } from './modelSelectorDropdownPosition'
 import { AcpModeSelector } from './AcpModeSelector';
 import { ModelModeAnimation } from './ModelModeAnimation';
 import { ReasoningIntensityControl } from './ReasoningIntensityControl';
-import { isAutomaticReasoningPreset, reasoningPresetChoices, reasoningSelectionLabel, resolveReasoningPresetChoice } from './reasoningPresetPresentation';
+import { reasoningPresetChoices, reasoningSelectionLabel, resolveReasoningPresetChoice } from './reasoningPresetPresentation';
 import {
   getRecentReasoningPreset,
   setRecentReasoningPreset,
@@ -143,8 +144,6 @@ interface ModelInfo {
   id: string;
   /** User-defined configuration name (AIModelConfig.name). */
   configName: string;
-  /** Optional label used by symbolic selectors such as Primary and Fast. */
-  displayName?: string;
   /** Actual model identifier (AIModelConfig.model_name). */
   modelName: string;
   providerName: string;
@@ -162,10 +161,29 @@ interface ProviderGroupInfo {
   models: ModelInfo[];
 }
 
-type ModelSelectorPanel = 'modes' | 'models' | 'providers';
+type ModelSelectorPanel = 'modes' | 'models' | 'providers' | 'pool';
 type UpcomingModelMode = 'smart' | 'pool';
 type ModelSelectorLevelDirection = 'none' | 'forward' | 'back';
 
+const ModelSelectorQuickAction = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  label: string;
+  icon: React.ReactNode;
+  selected: boolean;
+}>(function ModelSelectorQuickAction({ label, icon, selected, ...props }, ref) {
+  const actionProps = { ...props, 'aria-label': label, 'aria-pressed': selected };
+  return selected ? (
+    <Button
+      {...actionProps}
+      ref={ref}
+      size="xs"
+      variant="quiet"
+      leadingIcon={<Icon name="check-line" size="sm" aria-hidden className="openbitfun-model-selector__action-selected-check" />}
+    >
+      {label}
+    </Button>
+  ) : <IconButton {...actionProps} ref={ref} size="xs" icon={icon} />;
+});
+
 const ModelSelectorTooltipContent: React.FC<{ details: ModelSelectorTooltipDetails }> = ({ details }) => (
   <div className="openbitfun-model-selector__tooltip">
     {details.rows.map(row => (
@@ -251,7 +269,7 @@ const buildResolvedModelTooltipText = (
 
 const getModelDisplayLabel = (model: ModelInfo | null, fallback: string): string => {
   if (!model) return fallback;
-  return model.displayName || model.modelName || model.configName || fallback;
+  return model.modelName || model.configName || fallback;
 };
 
 const getModelTooltipText = (model: ModelInfo | null, fallback: string): string => {
@@ -331,7 +349,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   disabled = false,
   disabledReason,
 }) => {
-  const { t } = useI18n('flow-chat');
+  const { t, formatNumber } = useI18n('flow-chat');
   const deviceSurfaceScope = useSyncExternalStore(onSurfaceActivated, getActiveSurfaceScope, getActiveSurfaceScope);
   const modelSelectionScopeKey = deviceSurfaceScope.key('model-selector', currentMode, sessionId);
   const modelSelectionScopeRef = useRef(modelSelectionScopeKey);
@@ -357,6 +375,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   const [activeProviderKey, setActiveProviderKey] = useState<string | null>(null);
   /** Providers and models use detail views; modes expand inside the summary card. */
   const [activePanel, setActivePanel] = useState<ModelSelectorPanel | null>(null);
+  const [modelSearchQuery, setModelSearchQuery] = useState('');
+  const [modelSearchExpanded, setModelSearchExpanded] = useState(false);
+  const [modelProviderFilter, setModelProviderFilter] = useState('');
+  const [providerFilterOpen, setProviderFilterOpen] = useState(false);
   const [modeSelectionPending, setModeSelectionPending] = useState(false);
   const [modeFocusRevision, setModeFocusRevision] = useState(0);
   const [modelsFromSummary, setModelsFromSummary] = useState(false);
@@ -369,6 +391,13 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   const [levelDirection, setLevelDirection] = useState<ModelSelectorLevelDirection>('none');
   const [loading, setLoading] = useState(false);
   const [reasoningLoading, setReasoningLoading] = useState(false);
+  const [contextEdit, setContextEdit] = useState<{ modelId: string; scopeKey: string } | null>(null);
+  const [contextDraft, setContextDraft] = useState('');
+  const [contextError, setContextError] = useState<string | null>(null);
+  const contextSaveRef = useRef<symbol | null>(null);
+  const contextInputRef = useRef<HTMLInputElement>(null);
+  const contextFieldRef = useRef<HTMLButtonElement>(null);
+  const restoreContextFocusRef = useRef(false);
   const [preSessionReasoningSelection, setPreSessionReasoningSelection] = useState<{
     modelId: string;
     presetId: string | undefined;
@@ -383,11 +412,16 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   const dropdownRef = useRef<HTMLDivElement>(null);
   const portalDropdownRef = useRef<HTMLDivElement>(null);
   const modelFieldRef = useRef<HTMLButtonElement>(null);
+  const poolFieldRef = useRef<HTMLButtonElement>(null);
   const modeFieldRef = useRef<HTMLButtonElement>(null);
   const modeChoicesRef = useRef<HTMLDivElement>(null);
   const modeSelectionPendingRef = useRef(false);
   const modeRetryFocusRef = useRef<string | undefined>(undefined);
   const providerFieldRef = useRef<HTMLButtonElement>(null);
+  const searchActionRef = useRef<HTMLButtonElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const focusModelSearchRef = useRef(false);
+  const providerFilterButtonRef = useRef<HTMLButtonElement>(null);
   const focusPanelOnOpenRef = useRef(false);
   const focusSummaryOnReturnRef = useRef<ModelSelectorPanel | null>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -400,6 +434,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     setPreSessionReasoningSelection(null);
     setDropdownOpen(false);
     setActivePanel(null);
+    setModelSearchQuery('');
+    setModelSearchExpanded(false);
+    setModelProviderFilter('');
+    setProviderFilterOpen(false);
   }, [deviceSurfaceScope.epoch]);
 
   useEffect(() => {
@@ -488,7 +526,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       return false;
     }
   }, []);
-  
+
   useEffect(() => {
     void loadConfigData();
     const unsubscribe = configManager.onConfigChange((path) => {
@@ -590,26 +628,17 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       }
     });
   }, [acpClientId, isAcpSession, loadAcpOptions, sessionId]);
-  
-  useEffect(() => {
-    let removeOverlayMousedown0: (() => void) | undefined;
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Node;
-      if (dropdownRef.current && !dropdownRef.current.contains(target)
-          && !portalDropdownRef.current?.contains(target)) {
-        setDropdownOpen(false);
-        setKeyboardNavigationOpen(false);
-      }
-    };
-
-    if (dropdownOpen) {
-      removeOverlayMousedown0 = subscribeOverlayInteraction(portalDropdownRef, 'mousedown', handleClickOutside);
-    }
 
-    return () => {
-      removeOverlayMousedown0?.();
-    };
-  }, [dropdownOpen]);
+  useDismissibleLayer({
+    enabled: dropdownOpen,
+    layerRef: portalDropdownRef,
+    branchRefs: [dropdownRef],
+    dismissOnEscape: false,
+    onDismiss: () => {
+      setDropdownOpen(false);
+      setKeyboardNavigationOpen(false);
+    },
+  });
 
   const acpAvailableModels = useMemo((): ModelInfo[] => {
     if (!isAcpSession || !acpOptions) return [];
@@ -725,7 +754,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     () => resolveAcpModeState(acpOptions?.configOptions ?? []),
     [acpOptions?.configOptions],
   );
-  
+
   const getCurrentModelId = useCallback((): string => {
     const resolution = resolveModelSelection({
       models: allModels,
@@ -751,7 +780,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       return {
         id: modelId,
         configName: model.name,
-        displayName: modelId === 'primary' ? t('modelSelector.primaryModel') : t('modelSelector.fastModel'),
         modelName: model.model_name,
         providerName: getProviderDisplayName(model),
         provider: model.provider,
@@ -772,8 +800,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       contextWindow: model.context_window,
       maxOutputTokens: model.max_tokens,
     };
-  }, [getCurrentModelId, allModels, defaultModels, t]);
-  
+  }, [getCurrentModelId, allModels, defaultModels]);
+
   const availableModels = useMemo((): ModelInfo[] => {
     return filterSelectableTextChatModels(allModels)
       .map(m => ({
@@ -818,6 +846,19 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     return groups;
   }, [acpAvailableModels, availableModels, externalAvailableModels, externalSelection, isAcpSession]);
 
+  const modelSearchTerms = useMemo(
+    () => modelSearchQuery.trim().toLowerCase().split(/\s+/).filter(Boolean),
+    [modelSearchQuery],
+  );
+  const searchedModels = useMemo(() => {
+    const groups = providerGroups.some(group => group.key === modelProviderFilter)
+      ? providerGroups.filter(group => group.key === modelProviderFilter) : providerGroups;
+    return groups.flatMap(group => group.models).filter(model => {
+      const text = [model.modelName, model.configName, model.providerName, model.id].join(' ').toLowerCase();
+      return modelSearchTerms.every(term => text.includes(term));
+    });
+  }, [modelProviderFilter, modelSearchTerms, providerGroups]);
+
   const nativeModelResolution = useMemo(
     () => resolveModelSelection({
       models: allModels,
@@ -971,6 +1012,15 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   ), [handleOpenModelSettings, t]);
 
   const focusPreferredPanelItem = useCallback(() => {
+    const menu = portalDropdownRef.current;
+    const retryModeAction = modeRetryFocusRef.current
+      ? menu?.querySelector<HTMLButtonElement>(`button[data-model-mode="${modeRetryFocusRef.current}"]:not(:disabled)`)
+      : undefined;
+    if (retryModeAction) {
+      modeRetryFocusRef.current = undefined;
+      retryModeAction.focus({ preventScroll: true });
+      return;
+    }
     if (modeChoicesRef.current) {
       const buttons = Array.from(modeChoicesRef.current.querySelectorAll<HTMLButtonElement>('button:not(:disabled)'));
       const preferred = buttons.find(button => button.dataset.openbitfunValue === modeRetryFocusRef.current)
@@ -980,14 +1030,15 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       modeRetryFocusRef.current = undefined;
       return;
     }
-    const menu = portalDropdownRef.current;
     const preferredItem = menu?.querySelector<HTMLButtonElement>(
       'button[role="menuitemradio"][aria-checked="true"], button[data-provider-key][data-selected="true"]',
     );
     const firstItem = menu?.querySelector<HTMLButtonElement>(
       'button[role="menuitemradio"]:not(:disabled), button[role="menuitem"]:not(:disabled)',
     );
-    (preferredItem ?? firstItem)?.focus({ preventScroll: true });
+    const target = preferredItem ?? firstItem ?? searchInputRef.current ?? searchActionRef.current;
+    target?.focus({ preventScroll: true });
+    target?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
   }, []);
 
   const resetDropdownNavigation = useCallback(() => {
@@ -996,10 +1047,20 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     setActiveProviderKey(null);
     setModelsFromSummary(false);
     setActivePanel(null);
+    setModelSearchQuery('');
+    setModelSearchExpanded(false);
+    focusModelSearchRef.current = false;
+    setModelProviderFilter('');
+    setProviderFilterOpen(false);
     setLevelDirection('none');
   }, []);
 
   const openPanel = useCallback((kind: ModelSelectorPanel, moveFocus: boolean) => {
+    setModelSearchQuery('');
+    setModelSearchExpanded(false);
+    focusModelSearchRef.current = false;
+    setModelProviderFilter('');
+    setProviderFilterOpen(false);
     modeRetryFocusRef.current = undefined;
     focusPanelOnOpenRef.current = moveFocus;
     focusSummaryOnReturnRef.current = null;
@@ -1022,10 +1083,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     setLevelDirection('back');
   }, [activePanel]);
 
-  const openPanelFromClick = useCallback((kind: ModelSelectorPanel) => {
-    openPanel(kind, true);
-  }, [openPanel]);
-
   const openProviderLevel = useCallback((providerKey: string, fromSummary = false) => {
     setActiveProviderKey(providerKey);
     setModelsFromSummary(fromSummary);
@@ -1121,8 +1178,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     model.id === defaultModels.primary && isSelectableTextChatModel(model)
   ));
   const hasSettingsPanel = hasReasoningSettings || isNativeModelSelection;
-  const automaticReasoning = (selectedReasoningDescriptor && isAutomaticReasoningPreset(selectedReasoningDescriptor))
-    || (!selectedReasoningDescriptor && (!isAcpSession || Boolean(externalSelection)));
   useEffect(() => {
     if (!dropdownOpen) return;
     if (activePanel === 'modes' && !isNativeModelSelection) {
@@ -1130,10 +1185,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       return;
     }
     if (!hasSettingsPanel && !activePanel) {
-      openPanel('models', keyboardNavigationOpen);
+      openPanel('models', true);
     }
-  }, [dropdownOpen, hasSettingsPanel, isNativeModelSelection,
-    keyboardNavigationOpen, activePanel, openPanel]);
+  }, [dropdownOpen, hasSettingsPanel, isNativeModelSelection, activePanel, openPanel]);
 
   // Calculate the portalled dropdown position relative to the trigger button.
   useLayoutEffect(() => {
@@ -1206,7 +1260,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       ? recentPreset
       : undefined;
   }, [allModels, defaultModels, modelCatalog]);
-  
+
   const handleSelectModel = useCallback(async (modelId: string, mode: UpcomingModelMode | null = null) => {
     if (disabled || externalSelection?.disabled || loading || reasoningLoading) return false;
     if (mode && (!isNativeModelSelection || !primaryModelAvailable)) return false;
@@ -1713,18 +1767,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     resetDropdownNavigation,
   ]);
 
-  const handlePanelTriggerKeyDown = useCallback((
-    kind: ModelSelectorPanel,
-    event: React.KeyboardEvent<HTMLButtonElement>,
-  ) => {
-    if (event.key !== 'ArrowRight') return;
-    event.preventDefault();
-    event.stopPropagation();
-    openPanel(kind, true);
-  }, [openPanel]);
-
   const handleDropdownKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.defaultPrevented) return;
+    if (event.defaultPrevented || !event.currentTarget.contains(event.target as Node)) return;
 
     if (event.key === 'Escape') {
       event.preventDefault();
@@ -1736,7 +1780,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     if (event.key === 'ArrowRight') {
       const focusedElement = document.activeElement as HTMLElement | null;
       const focusedTarget = focusedElement?.dataset?.modelMenuTarget;
-      if (focusedTarget === 'modes' || focusedTarget === 'models' || focusedTarget === 'providers') {
+      if (focusedTarget === 'modes' || focusedTarget === 'models' || focusedTarget === 'providers' || focusedTarget === 'pool') {
         event.preventDefault();
         openPanel(focusedTarget, true);
       }
@@ -1745,7 +1789,17 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   }, [openPanel]);
 
   const handlePanelKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.defaultPrevented) return;
+    if (event.defaultPrevented || !event.currentTarget.contains(event.target as Node)) return;
+
+    if (activePanel === 'models' && searchInputRef.current && event.key === 'ArrowUp') {
+      const firstModel = portalDropdownRef.current?.querySelector('button[data-testid="chat-model-selector-option"]:not(:disabled)');
+      if (event.target === firstModel) {
+        event.preventDefault();
+        event.stopPropagation();
+        searchInputRef.current?.focus({ preventScroll: true });
+        return;
+      }
+    }
 
     if (event.key === 'Escape' || event.key === 'ArrowLeft') {
       event.preventDefault();
@@ -1793,7 +1847,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       const firstItem = menu?.querySelector<HTMLButtonElement>(
         'button[role="menuitemradio"]:not(:disabled), button[role="menuitem"]:not(:disabled)',
       );
-      (selectedItem ?? firstItem)?.focus();
+      (selectedItem ?? modelFieldRef.current ?? firstItem)?.focus();
     });
 
     return () => window.cancelAnimationFrame(frameId);
@@ -1811,12 +1865,13 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       focusSummaryOnReturnRef.current = null;
       if (returnTarget) {
         const field = returnTarget === 'providers' ? providerFieldRef.current
-          : returnTarget === 'modes' ? modeFieldRef.current : modelFieldRef.current;
+          : returnTarget === 'modes' ? modeFieldRef.current
+            : returnTarget === 'pool' ? poolFieldRef.current : modelFieldRef.current;
         (field ?? modeFieldRef.current ?? modelFieldRef.current)?.focus({ preventScroll: true });
       }
       return;
     }
-    if (activePanel === 'modes' && (modeSelectionPending || loading || reasoningLoading)) return;
+    if (modelInformationLoading || (activePanel === 'modes' && (modeSelectionPending || loading || reasoningLoading))) return;
     const providerLevelChanged = (activePanel === 'models' || activePanel === 'providers')
       && previousProviderKey !== activeProviderKey;
     if (!focusPanelOnOpenRef.current && !providerLevelChanged) return;
@@ -1832,7 +1887,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       const firstModel = menu.querySelector<HTMLButtonElement>(
         'button[role="menuitemradio"]:not(:disabled)',
       );
-      (selectedModel ?? firstModel)?.focus();
+      const target = selectedModel ?? firstModel;
+      target?.focus({ preventScroll: true });
+      target?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
       return;
     }
 
@@ -1857,6 +1914,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     reasoningLoading,
     modeSelectionPending,
     modeFocusRevision,
+    modelInformationLoading,
   ]);
 
   useEffect(() => {
@@ -1864,7 +1922,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       triggerRef.current?.focus();
     }
   }, [dropdownOpen, keyboardNavigationOpen]);
-  
+
   const resolvedContextUsageSource: ContextUsageSource =
     contextUsageSource ?? (isAcpSession ? 'acp_context' : 'agent_prompt');
   const displayedModel = externalSelection ? externalCurrentModel
@@ -1889,6 +1947,12 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       : currentModelMode === 'pool' ? t('modelSelector.modes.pool')
         : getModelDisplayLabel(displayedModel, getAvailabilityLabel(displayedAvailability.status, t));
   const settingsModelLabel = currentModelMode ? modelLabel : displayedModel?.modelName || modelLabel;
+  const settingsModelRowLabel = currentModelMode
+    ? t('modelSelector.home.mode')
+    : isNativeModelSelection && !currentModelMode && (currentModelId === 'primary' || currentModelId === 'fast')
+      ? t(currentModelId === 'primary' ? 'modelSelector.primaryModel' : 'modelSelector.fastModel')
+      : t('modelSelector.model');
+  const modelPoolLabel = t(currentModelMode === 'smart' ? 'modelSelector.home.modelPool' : 'modelSelector.home.availablePoolModels');
   const rememberedManualModelId = manualModelRef.current?.scopeKey === modelSelectionScopeKey
     ? manualModelRef.current.modelId : getRecentManualModel(modelSelectionScopeKey);
   const manualModelConfig = allModels.find(model => model.id === resolveConcreteModelId(
@@ -1896,13 +1960,98 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   ));
   const manualModelLabel = manualModelConfig?.model_name
     || getAvailabilityLabel(rememberedManualModelId ? 'target-model-unavailable' : nativeAvailability.status, t);
-  const displayedProviderGroup = providerGroups.find(group => group.key === selectedProviderKey);
   const openModelChoices = () => {
     if (disabled || loading || externalSelection?.disabled) return;
     openPanel('models', true);
-    if (!isNativeModelSelection && displayedProviderGroup) openProviderLevel(displayedProviderGroup.key, true);
   };
-  const isSelectionPanel = activePanel === 'models' || activePanel === 'providers';
+  const isSelectionPanel = activePanel === 'models' || activePanel === 'providers' || activePanel === 'pool';
+  const isModelPicker = activePanel === 'models' && !activeProviderGroup;
+  const selectedProviderFilter = providerGroups.find(group => group.key === modelProviderFilter);
+  const pickerDisabled = disabled || loading || reasoningLoading || modeSelectionPending || Boolean(externalSelection?.disabled);
+  const contextCapacity = displayedModel?.contextWindow || (isAcpSelection ? acpOptions?.contextUsage?.size : undefined) || maxTokens;
+  const contextCapacityLabel = contextCapacity > 0
+    ? formatCompactTokenCount(contextCapacity) : t('modelSelector.home.unknownContext');
+  const canEditContext = isNativeModelSelection && allModels.some(model => model.id === concreteModelId && isSelectableTextChatModel(model));
+  const contextErrorId = `${menuId}-context-error`;
+  useEffect(() => {
+    setContextEdit(null);
+    setContextError(null);
+    if (contextSaveRef.current) {
+      contextSaveRef.current = null;
+      setLoading(false);
+    }
+  }, [modelSelectionScopeKey, deviceSurfaceScope.epoch]);
+  useEffect(() => {
+    if (!dropdownOpen || activePanel || contextEdit?.modelId !== concreteModelId) {
+      setContextEdit(null);
+      setContextError(null);
+    }
+  }, [activePanel, concreteModelId, contextEdit?.modelId, dropdownOpen]);
+  useLayoutEffect(() => {
+    if (contextEdit) {
+      contextInputRef.current?.focus({ preventScroll: true });
+      contextInputRef.current?.select();
+    } else if (restoreContextFocusRef.current) {
+      restoreContextFocusRef.current = false;
+      contextFieldRef.current?.focus({ preventScroll: true });
+    }
+  }, [contextEdit]);
+  const saveContext = async () => {
+    if (pickerDisabled || contextSaveRef.current || !contextEdit || !canEditContext
+      || contextEdit.scopeKey !== modelSelectionScopeKey || contextEdit.modelId !== concreteModelId) return;
+    const capacity = Number(contextDraft.trim());
+    if (!Number.isSafeInteger(capacity) || capacity < 32_000 || capacity > 2_000_000) {
+      setContextError(t('modelSelector.home.contextInvalid', { min: formatNumber(32_000), max: formatNumber(2_000_000) }));
+      return;
+    }
+    const operation = Symbol('save-context');
+    contextSaveRef.current = operation;
+    const scope = getActiveSurfaceScope();
+    setLoading(true);
+    setContextError(null);
+    try {
+      const models = await configManager.updateConfig<AIModelConfig[]>('ai.models', current => {
+        scope.assertCurrent('update model context window');
+        if (!current.some(model => model.id === contextEdit.modelId && isSelectableTextChatModel(model))) {
+          throw new Error('Selected context model is no longer available');
+        }
+        return current.map(model => model.id === contextEdit.modelId ? { ...model, context_window: capacity } : model);
+      });
+      scope.assertCurrent('update model context window');
+      if (modelSelectionScopeRef.current !== modelSelectionScopeKey) return;
+      ++configLoadRequestRef.current;
+      setConfigEpoch(scope.epoch);
+      setAllModels(models);
+      const store = FlowChatStore.getInstance();
+      const session = sessionId ? store.getState().sessions.get(sessionId) : undefined;
+      if (sessionId && session && resolveConcreteModelId(session.config.modelName ?? currentNativeModelId, defaultModels, models) === contextEdit.modelId) {
+        store.updateSessionMaxContextTokens(sessionId, capacity);
+      }
+      restoreContextFocusRef.current = true;
+      setContextEdit(null);
+    } catch (error) {
+      if (!scope.isCurrent() || modelSelectionScopeRef.current !== modelSelectionScopeKey) return;
+      log.error('Failed to update model context window', { modelId: contextEdit.modelId, error });
+      setContextError(t('modelSelector.home.contextSaveFailed'));
+    } finally {
+      if (contextSaveRef.current === operation) {
+        contextSaveRef.current = null;
+        setLoading(false);
+      }
+    }
+  };
+  const collapseModelSearch = () => {
+    setModelSearchQuery('');
+    setModelProviderFilter('');
+    setProviderFilterOpen(false);
+    focusModelSearchRef.current = true;
+    setModelSearchExpanded(false);
+  };
+  useLayoutEffect(() => {
+    if (!dropdownOpen || !isModelPicker || !focusModelSearchRef.current) return;
+    focusModelSearchRef.current = false;
+    (modelSearchExpanded ? searchInputRef.current : searchActionRef.current)?.focus({ preventScroll: true });
+  }, [dropdownOpen, isModelPicker, modelSearchExpanded]);
   const acpModeLabel = acpMode?.option.options.find(option => option.value === acpMode.currentValue)?.name
     ?? acpMode?.currentValue ?? '';
   const targetTooltip = buildContextUsageTooltip({
@@ -1946,25 +2095,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   const tooltipContent = externalSelection || isAcpSession || currentModelMode
     ? targetTooltip : <ModelSelectorTooltipContent details={tooltipDetails} />;
 
-  const modeControl = isNativeModelSelection ? (
-    <MenuItem
-      ref={modeFieldRef}
-      className="openbitfun-model-selector__mode-control"
-      data-testid="chat-model-selector-settings-mode"
-      data-model-menu-target="modes"
-      aria-expanded={activePanel === 'modes'}
-      aria-controls={`${menuId}-mode-choices`}
-      aria-label={`${t('modelSelector.modes.selection')}: ${currentModelMode === 'smart'
-        ? t('modelSelector.modes.smart') : currentModelMode === 'pool'
-          ? t('modelSelector.modes.pool') : t('modelSelector.modes.manual')}`}
-      onClick={() => openPanelFromClick('modes')}
-      onKeyDown={event => handlePanelTriggerKeyDown('modes', event)}
-      disabled={disabled || loading || reasoningLoading}
-    >
-      {currentModelMode === 'smart' ? t('modelSelector.modes.smart')
-        : currentModelMode === 'pool' ? t('modelSelector.modes.pool') : t('modelSelector.modes.manual')}
-    </MenuItem>
-  ) : undefined;
 
   return (
     <div data-openbitfun-component="model-selector" data-openbitfun-part="root"
@@ -1991,7 +2121,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               setKeyboardNavigationOpen(event.detail === 0);
               if (isAcpSelection && !modelInformationLoading) void loadAcpOptions();
               if (!hasSettingsPanel) {
-                openPanel('models', event.detail === 0);
+                openPanel('models', true);
               }
             } else if (event.detail !== 0) {
               setKeyboardNavigationOpen(false);
@@ -2006,6 +2136,24 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
           }
          data-openbitfun-component="model-selector" data-openbitfun-part="trigger" data-openbitfun-state={dropdownOpen ? 'open' : undefined}>
           {modelInformationLoading && <Spinner size="xs" />}
+          {currentModelMode && (
+            <Icon
+              name={currentModelMode === 'smart' ? 'galaxy' : 'battery-full'}
+              size="xs"
+              aria-hidden
+              data-testid="chat-model-selector-mode-icon"
+              data-model-mode={currentModelMode}
+            />
+          )}
+          {isNativeModelSelection && !currentModelMode && isSpecialModel(currentModelId) && (
+            <Icon
+              glyph={currentModelId === 'primary' ? Gem : Rocket}
+              size="xs"
+              aria-hidden
+              data-testid="chat-model-selector-default-icon"
+              data-model-role={currentModelId}
+            />
+          )}
           <OverflowText className="openbitfun-model-selector__name" data-openbitfun-component="model-selector" data-openbitfun-part="name">
              {modelLabel}
           </OverflowText>
@@ -2062,6 +2210,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
             data-open={dropdownOpen ? 'true' : 'false'}
             data-menu-level={activeProviderGroup ? 'provider' : isSelectionPanel ? activePanel : 'settings'}
             data-model-mode={currentModelMode ?? 'manual'}
+            data-model-picker={isModelPicker || undefined}
             aria-busy={modelInformationLoading || undefined}
             aria-hidden={!dropdownOpen}
             {...(!dropdownOpen ? { inert: '' } : {})}
@@ -2083,6 +2232,261 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               >
                 <LoadingState size="sm">{t('modelSelector.status.loading')}</LoadingState>
               </div>
+            ) : activePanel === 'pool' ? (
+              <div className="openbitfun-model-selector__picker" data-testid="chat-model-selector-pool-connections" data-panel-kind="pool">
+                <ScrollArea className="openbitfun-model-selector__pool-connections" role="region" aria-label={t(currentModelMode === 'smart' ? 'modelSelector.home.modelPool' : 'modelSelector.home.poolConnections')}>
+                  <ModelSelectorMenuLevel direction={levelDirection}>
+                    <MenuList>
+                      {providerGroups.map(group => (
+                        <MenuSection key={group.key} title={group.providerName}>
+                          <MenuList role="list" aria-label={group.providerName}>
+                            {group.models.map(model => (
+                              <div
+                                key={model.id}
+                                role="listitem"
+                                className="openbitfun-model-selector__pool-model"
+                                data-testid="chat-model-selector-pool-model"
+                                data-model-id={model.id}
+                              >
+                                <OverflowText tabIndex={0}>{model.modelName}</OverflowText>
+                              </div>
+                            ))}
+                          </MenuList>
+                        </MenuSection>
+                      ))}
+                      {providerGroups.length === 0 && (
+                        <div className="openbitfun-model-selector__pool-model">{t('modelSelector.status.noEnabledChatModel')}</div>
+                      )}
+                    </MenuList>
+                  </ModelSelectorMenuLevel>
+                </ScrollArea>
+                <MenuList className="openbitfun-model-selector__picker-footer" data-testid="chat-model-selector-pool-footer">
+                  <MenuItem
+                    data-testid="chat-model-selector-pool-back"
+                    leading={<Icon name="chevron-left" size="sm" aria-hidden />}
+                    onClick={() => closePanel(true)}
+                  >
+                    {t('modelSelector.backToSettings')}
+                  </MenuItem>
+                </MenuList>
+              </div>
+            ) : isModelPicker ? (
+              <div
+                id={`${menuId}-search`}
+                className="openbitfun-model-selector__picker"
+                data-testid="chat-model-selector-options"
+                data-panel-kind={activePanel}
+              >
+                <ScrollArea className="openbitfun-model-selector__picker-results" data-testid="chat-model-selector-results">
+                  <ModelSelectorMenuLevel direction={levelDirection}>
+                    {providerGroups.length === 0 ? renderUnavailableModelMenu(displayedAvailability,
+                      isNativeModelSelection || Boolean(externalSelection?.includeLocalCatalog && !externalSelectionIsUnavailable))
+                      : searchedModels.length === 0 ? (
+                        <MenuItem className="openbitfun-model-selector__search-empty" disabled data-testid="chat-model-selector-search-empty">
+                          {t('modelSelector.noSearchResults')}
+                        </MenuItem>
+                      ) : searchedModels.map(model => {
+                        const isSelected = !currentModelMode && (isNativeModelSelection ? concreteModelId : currentModelId) === model.id;
+                        const providerMatched = modelSearchTerms.some(term => model.providerName.toLowerCase().includes(term));
+                        return (
+                          <Tooltip key={model.id} content={buildModelMetaText(model)} placement="right">
+                            <MenuItem
+                              className={isSelected ? 'openbitfun-model-selector__option--selected' : undefined}
+                              role="menuitemradio"
+                              checked={isSelected}
+                              data-testid="chat-model-selector-option"
+                              data-model-id={model.id}
+                              data-model-name={model.modelName}
+                              data-selected={isSelected ? 'true' : 'false'}
+                              data-openbitfun-component="model-selector"
+                              data-openbitfun-part="option"
+                              data-openbitfun-state={isSelected ? 'selected' : undefined}
+                              shortcut={isSelected ? <Icon name="check-line" size="sm" aria-hidden className="openbitfun-model-selector__option-selected-check" /> : undefined}
+                              disabled={disabled || loading || reasoningLoading || externalSelection?.disabled}
+                              onClick={() => handleSelectModelFromMenu(model.id)}
+                            >
+                              {model.modelName}{providerMatched && <span className="openbitfun-model-selector__option-provider"> {model.providerName}</span>}
+                            </MenuItem>
+                          </Tooltip>
+                        );
+                      })}
+                  </ModelSelectorMenuLevel>
+                </ScrollArea>
+                <div className="openbitfun-model-selector__picker-footer" data-testid="chat-model-selector-actions">
+                  <div className="openbitfun-model-selector__picker-actions" data-search-expanded={modelSearchExpanded}>
+                    {(modelSearchExpanded || isNativeModelSelection) && (
+                      <div className="openbitfun-model-selector__quick-actions-slot">
+                        {modelSearchExpanded ? (
+                          <Tooltip content={t('modelSelector.collapseSearch')}>
+                            <IconButton
+                              className="openbitfun-model-selector__grid-action"
+                              data-testid="chat-model-selector-show-actions"
+                              aria-label={t('modelSelector.collapseSearch')}
+                              size="xs"
+                              icon={<Icon glyph={LayoutGrid} size="sm" aria-hidden />}
+                              disabled={pickerDisabled}
+                              onClick={collapseModelSearch}
+                            />
+                          </Tooltip>
+                        ) : (
+                          <div className="openbitfun-model-selector__quick-actions" data-testid="chat-model-selector-quick-actions">
+                            {(['primary', 'fast'] as const).map(modelId => {
+                              const model = resolveModelReference(allModels, modelId, defaultModels);
+                              const label = t(modelId === 'primary' ? 'modelSelector.primaryModel' : 'modelSelector.fastModel');
+                              const isSelected = currentModelId === modelId && !currentModelMode;
+                              const tooltip = model
+                                ? [label, model.model_name, formatContextWindow(model.context_window)].filter(Boolean).join(' · ')
+                                : `${label} · ${t('modelSelector.modelNotConfigured')}`;
+                              return (
+                                <Tooltip key={modelId} content={tooltip}>
+                                  <ModelSelectorQuickAction
+                                    data-testid={`chat-model-selector-${modelId}-action`}
+                                    data-model-id={modelId}
+                                    data-model-name={model?.model_name}
+                                    label={label}
+                                    selected={isSelected}
+                                    icon={modelId === 'primary'
+                                      ? <Icon glyph={Gem} size="sm" aria-hidden /> : <Icon glyph={Rocket} size="sm" aria-hidden />}
+                                    disabled={!model || pickerDisabled}
+                                    onClick={() => handleSelectModelFromMenu(modelId)}
+                                  />
+                                </Tooltip>
+                              );
+                            })}
+                            {(['pool', 'smart'] as const).map(mode => {
+                              const label = t(mode === 'smart' ? 'modelSelector.modes.smart' : 'modelSelector.modes.pool');
+                              const tooltip = `${label} · ${t(primaryModelAvailable
+                                ? 'modelSelector.modes.comingSoon' : 'modelSelector.modes.primaryRequired')}`;
+                              return (
+                                <Tooltip key={mode} content={tooltip}>
+                                  <ModelSelectorQuickAction
+                                    data-testid={`chat-model-selector-${mode}-action`}
+                                    data-model-mode={mode}
+                                    label={label}
+                                    selected={currentModelMode === mode}
+                                    icon={<Icon name={mode === 'smart' ? 'galaxy' : 'battery-full'} size="sm" aria-hidden />}
+                                    disabled={!primaryModelAvailable || pickerDisabled}
+                                    onClick={() => { void handleSelectMode(mode); }}
+                                  />
+                                </Tooltip>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {(modelSearchExpanded || isNativeModelSelection) && (
+                      <span className="openbitfun-model-selector__actions-divider" data-testid="chat-model-selector-actions-divider" aria-hidden />
+                    )}
+                    <div className="openbitfun-model-selector__search-slot">
+                      {modelSearchExpanded ? (
+                        <Input
+                          ref={searchInputRef}
+                          id={`${menuId}-search-input`}
+                          className="openbitfun-model-selector__search-input"
+                          data-testid="chat-model-selector-search-input"
+                          type="search"
+                          size="sm"
+                          shape="pill"
+                          leading={<Icon name="search" size="xs" aria-hidden />}
+                          trailing={(
+                            <Tooltip content={selectedProviderFilter
+                              ? `${t('modelSelector.filterProvider')} · ${selectedProviderFilter.providerName}`
+                              : t('modelSelector.filterProvider')}>
+                              <IconButton
+                                ref={providerFilterButtonRef}
+                                className="openbitfun-model-selector__provider-filter"
+                                data-testid="chat-model-selector-provider-filter"
+                                aria-label={t('modelSelector.filterProvider')}
+                                aria-haspopup="menu"
+                                aria-expanded={providerFilterOpen}
+                                aria-controls={providerFilterOpen ? `${menuId}-provider-filter` : undefined}
+                                aria-pressed={Boolean(selectedProviderFilter)}
+                                size="xs"
+                                icon={<Icon name="filter" size="sm" aria-hidden />}
+                                disabled={pickerDisabled || providerGroups.length === 0}
+                                onClick={() => setProviderFilterOpen(open => !open)}
+                                onKeyDown={event => {
+                                  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  setProviderFilterOpen(true);
+                                }}
+                              />
+                            </Tooltip>
+                          )}
+                          aria-label={t('modelSelector.searchModels')}
+                          placeholder={t('modelSelector.searchPlaceholder')}
+                          autoComplete="off"
+                          spellCheck={false}
+                          value={modelSearchQuery}
+                          disabled={pickerDisabled}
+                          onValueChange={setModelSearchQuery}
+                          onKeyDown={event => {
+                            event.stopPropagation();
+                            if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+                            if (event.key === 'Escape') {
+                              event.preventDefault();
+                              collapseModelSearch();
+                            } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                              event.preventDefault();
+                              const items = portalDropdownRef.current?.querySelectorAll<HTMLButtonElement>(
+                                'button[data-testid="chat-model-selector-option"]:not(:disabled)',
+                              );
+                              const item = event.key === 'ArrowUp' ? items?.[items.length - 1] : items?.[0];
+                              item?.focus({ preventScroll: true });
+                              item?.scrollIntoView?.({ block: 'nearest' });
+                            } else if (event.key === 'Enter') {
+                              event.preventDefault();
+                              if (searchedModels[0]) void handleSelectModelFromMenu(searchedModels[0].id);
+                            }
+                          }}
+                        />
+                      ) : (
+                        <Tooltip content={t('modelSelector.searchModels')}>
+                          <IconButton
+                            ref={searchActionRef}
+                            data-testid="chat-model-selector-search-toggle"
+                            aria-label={t('modelSelector.searchModels')}
+                            aria-expanded={false}
+                            size="xs"
+                            icon={<Icon name="search" size="sm" aria-hidden />}
+                            disabled={pickerDisabled}
+                            onClick={() => {
+                              focusModelSearchRef.current = true;
+                              setModelSearchExpanded(true);
+                            }}
+                          />
+                        </Tooltip>
+                      )}
+                    </div>
+                    <MenuPopover
+                      id={`${menuId}-provider-filter`}
+                      data-testid="chat-model-selector-provider-filter-menu"
+                      aria-label={t('modelSelector.filterProvider')}
+                      anchorRef={providerFilterButtonRef}
+                      ownerRef={providerFilterButtonRef}
+                      placement="top"
+                      inlineSize="content"
+                      open={dropdownOpen && modelSearchExpanded && providerFilterOpen && !pickerDisabled}
+                      onClose={() => setProviderFilterOpen(false)}
+                      items={[
+                        {
+                          id: 'all-providers', label: t('modelSelector.allProviders'),
+                          role: 'menuitemradio', checked: !selectedProviderFilter,
+                          onSelect: () => setModelProviderFilter(''),
+                        },
+                        ...providerGroups.map(group => ({
+                          id: group.key, label: group.providerName,
+                          role: 'menuitemradio' as const, checked: selectedProviderFilter?.key === group.key,
+                          onSelect: () => setModelProviderFilter(group.key),
+                        })),
+                      ]}
+                    />
+                  </div>
+                  {acpFastModeItem}
+                </div>
+              </div>
             ) : isSelectionPanel ? (
               <div data-testid="chat-model-selector-options" data-panel-kind={activePanel}>
                 <ModelSelectorMenuLevel
@@ -2117,39 +2521,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                       <MenuSeparator />
                     </>
                   )}
-                  {(externalSelection || isAcpSession) && activePanel === 'models' && !activeProviderGroup ? (
-                    <>
-                      {showModelChoices && (
-                        <MenuSection title={externalSelection
-                          ? `${t('modelSelector.modelSelection')} · ${externalSelection.providerLabel}`
-                          : `${t('modelSelector.modelSelection')} · ${acpClientId} ACP`}>
-                          {(externalSelection ? externalAvailableModels : acpAvailableModels).length === 0
-                            ? renderUnavailableModelMenu(displayedAvailability,
-                              Boolean(externalSelection?.includeLocalCatalog && !externalSelectionIsUnavailable))
-                            : (externalSelection ? externalAvailableModels : acpAvailableModels).map(model => (
-                              <Tooltip key={model.id} content={buildModelMetaText(model)} placement="right">
-                                <MenuItem
-                                  role="menuitemradio"
-                                  checked={currentModelId === model.id}
-                                  data-testid="chat-model-selector-option"
-                                  data-model-id={model.id}
-                                  data-model-name={model.modelName}
-                                  data-selected={currentModelId === model.id ? 'true' : 'false'}
-                                  data-openbitfun-component="model-selector"
-                                  data-openbitfun-part="option"
-                                  data-openbitfun-state={currentModelId === model.id ? 'selected' : undefined}
-                                  metadata={currentModelId === model.id ? <Icon name="check-line" size="sm" aria-hidden /> : null}
-                                  onClick={() => handleSelectModelFromMenu(model.id)}
-                                >
-                                  {model.modelName}
-                                </MenuItem>
-                              </Tooltip>
-                            ))}
-                        </MenuSection>
-                      )}
-                      {!hasSettingsPanel && acpFastModeItem}
-                    </>
-                  ) : activeProviderGroup ? (
+                  {activeProviderGroup ? (
                     <>
                       <MenuItem
                         data-testid="chat-model-selector-back"
@@ -2163,11 +2535,12 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                       </MenuItem>
 
                       {activeProviderGroup.models.map(model => {
-                        const isSelected = (isNativeModelSelection ? concreteModelId : currentModelId) === model.id;
+                        const isSelected = !currentModelMode && (isNativeModelSelection ? concreteModelId : currentModelId) === model.id;
 
                         return (
                           <Tooltip key={model.id} content={buildModelMetaText(model)} placement="right">
                             <MenuItem
+                              className={isSelected ? 'openbitfun-model-selector__option--selected' : undefined}
                               role="menuitemradio"
                               checked={isSelected}
                               data-testid="chat-model-selector-option"
@@ -2177,7 +2550,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                               data-openbitfun-component="model-selector"
                               data-openbitfun-part="option"
                               data-openbitfun-state={isSelected ? 'selected' : undefined}
-                              metadata={isSelected ? <Icon name="check-line" size="sm" aria-hidden /> : null}
+                              metadata={isSelected ? <Icon name="check-line" size="sm" aria-hidden className="openbitfun-model-selector__option-selected-check" /> : null}
                               onClick={() => handleSelectModelFromMenu(model.id)}
                             >
                               {model.modelName}
@@ -2190,46 +2563,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                     <>{renderUnavailableModelMenu(displayedAvailability, isNativeModelSelection)}</>
                   ) : (
                     <>
-                      {isNativeModelSelection && activePanel === 'models' && (
-                        <>
-                          {(['primary', 'fast'] as const).map(modelId => {
-                            const model = resolveModelReference(allModels, modelId, defaultModels);
-                            const isSelected = currentModelId === modelId && !currentModelMode;
-                            const label = t(modelId === 'primary' ? 'modelSelector.primaryModel' : 'modelSelector.fastModel');
-                            const tooltip = model
-                              ? buildResolvedModelTooltipText(model.model_name, {
-                                providerName: getProviderDisplayName(model),
-                                contextWindow: model.context_window,
-                              }, label)
-                              : t('modelSelector.modelNotConfigured');
-
-                            return (
-                              <Tooltip key={modelId} content={tooltip} placement="right">
-                                <MenuItem
-                                  role="menuitemradio"
-                                  checked={isSelected}
-                                  data-testid="chat-model-selector-option"
-                                  data-model-id={modelId}
-                                  data-model-name={model?.model_name || modelId}
-                                  data-selected={isSelected ? 'true' : 'false'}
-                                  data-openbitfun-component="model-selector"
-                                  data-openbitfun-part="option"
-                                  data-openbitfun-state={isSelected ? 'selected' : undefined}
-                                  metadata={<OverflowText>{model?.model_name || t('modelSelector.modelNotConfigured')}</OverflowText>}
-                                  shortcut={isSelected ? <Icon name="check-line" size="sm" aria-hidden /> : undefined}
-                                  disabled={!model || disabled || loading || reasoningLoading}
-                                  onClick={() => handleSelectModelFromMenu(modelId)}
-                                >
-                                  {label}
-                                </MenuItem>
-                              </Tooltip>
-                            );
-                          })}
-                          <MenuSeparator />
-                        </>
-                      )}
                       {providerGroups.map(group => {
-                        const isSelected = selectedProviderKey === group.key;
+                        const isSelected = !currentModelMode && selectedProviderKey === group.key;
 
                         return (
                           <Tooltip
@@ -2314,88 +2649,143 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                       />
                     </div>
                   )}
-                  {((showModelChoices && !currentModelMode) || hasReasoningSettings) && (
-                    <div
-                      className="openbitfun-model-selector__model-summary"
-                      aria-hidden={activePanel === 'modes' || undefined}
-                      {...(activePanel === 'modes' ? { inert: '' } : {})}
-                    >
-                      {showModelChoices && !currentModelMode && (
-                        <MenuList
-                          className="openbitfun-model-selector__model-field"
-                          data-openbitfun-component="model-selector"
-                          data-openbitfun-part="selectionSummary"
+                  <MenuList
+                    className="openbitfun-model-selector__settings-general"
+                    aria-hidden={activePanel === 'modes' || undefined}
+                    {...(activePanel === 'modes' ? { inert: '' } : {})}
+                  >
+                    {currentModelMode ? (
+                      <>
+                        {currentModelMode === 'pool' && (
+                          <dl className="openbitfun-model-selector__settings-row openbitfun-model-selector__settings-info-row" data-testid="chat-model-selector-settings-current-model">
+                            <dt><OverflowText>{t('modelSelector.home.currentModel')}</OverflowText></dt>
+                            <dd><OverflowText>{displayedModel?.modelName || getAvailabilityLabel(displayedAvailability.status, t)}</OverflowText></dd>
+                          </dl>
+                        )}
+                        <MenuItem
+                          ref={poolFieldRef}
+                          className="openbitfun-model-selector__settings-row"
+                          data-testid="chat-model-selector-settings-pool"
+                          data-model-menu-target="pool"
+                          aria-label={`${modelPoolLabel}: ${formatNumber(availableModels.length)}`}
+                          metadata={<OverflowText>{formatNumber(availableModels.length)}</OverflowText>}
+                          shortcut={<Icon name="chevron-right" size="sm" aria-hidden />}
+                          disabled={pickerDisabled}
+                          onClick={() => { if (!pickerDisabled) openPanel('pool', true); }}
                         >
-                          <MenuItem data-overflow-trigger
-                            ref={modelFieldRef}
-                            className="openbitfun-model-selector__model-control"
-                            labelBehavior="static"
-                            data-testid="chat-model-selector-settings-model"
-                            data-model-menu-target="models"
-                            aria-label={`${t('modelSelector.model')}: ${settingsModelLabel}`}
-                            onClick={openModelChoices}
+                          {modelPoolLabel}
+                        </MenuItem>
+                      </>
+                    ) : contextEdit ? (
+                      <div className="openbitfun-model-selector__context-editor">
+                        <div className="openbitfun-model-selector__settings-row openbitfun-model-selector__context-row">
+                          <label htmlFor={`${menuId}-context-input`}>{t('modelSelector.home.context')}</label>
+                          <Input
+                            ref={contextInputRef}
+                            id={`${menuId}-context-input`}
+                            data-testid="chat-model-selector-context-input"
+                            className="openbitfun-model-selector__context-input"
+                            size="xs"
+                            inputMode="numeric"
+                            aria-label={t('modelSelector.home.contextTokens')}
+                            aria-describedby={contextError ? contextErrorId : undefined}
+                            invalid={Boolean(contextError)}
+                            disabled={pickerDisabled}
+                            value={contextDraft}
+                            onValueChange={value => { setContextDraft(value); setContextError(null); }}
                             onKeyDown={event => {
-                              if (event.key !== 'ArrowRight') return;
-                              event.preventDefault();
                               event.stopPropagation();
-                              openModelChoices();
+                              if (event.key === 'Enter') {
+                                event.preventDefault();
+                                void saveContext();
+                              } else if (event.key === 'Escape' && !loading) {
+                                event.preventDefault();
+                                restoreContextFocusRef.current = true;
+                                setContextEdit(null);
+                                setContextError(null);
+                              }
                             }}
-                            disabled={disabled || loading || externalSelection?.disabled}
-                          >
-                            <OverflowText className="openbitfun-model-selector__model-name">
-                              {settingsModelLabel}
-                            </OverflowText>
-                          </MenuItem>
-                        </MenuList>
-                      )}
-                      {hasReasoningSettings && (
-                        <div
-                          className="openbitfun-model-selector__reasoning-control"
-                          data-reasoning-mode={automaticReasoning ? 'auto' : 'manual'}
-                        >
-                          <ReasoningIntensityControl
-                            key={`${sessionId ?? ''}:${currentModelId}`}
-                            presets={catalogReasoningPresets}
-                            selectedPreset={isAcpSelection ? effectiveReasoningDescriptor : selectedReasoningDescriptor}
-                            allowDefaultReset={!isAcpSelection}
-                            active={dropdownOpen}
-                            disabled={disabled || loading || reasoningLoading || externalSelection?.disabled}
-                            onSelect={handleSelectReasoningPresetFromControl}
+                          />
+                          <IconButton
+                            className="openbitfun-model-selector__context-save"
+                            data-testid="chat-model-selector-context-save"
+                            aria-label={t('modelSelector.home.saveContext')}
+                            icon={loading ? <Spinner size="xs" /> : <Icon name="check-line" size="sm" aria-hidden />}
+                            size="xs"
+                            shape="circle"
+                            variant="fill"
+                            disabled={pickerDisabled}
+                            onClick={() => { void saveContext(); }}
                           />
                         </div>
-                      )}
-                    </div>
-                  )}
-                  {(modeControl || (showModelChoices && !currentModelMode && displayedModel?.providerName)) && (
-                    <MenuList
-                      className={currentModelMode
-                        ? 'openbitfun-model-selector__mode-summary' : 'openbitfun-model-selector__mode-footer'}
-                      aria-hidden={activePanel === 'modes' || undefined}
-                      {...(activePanel === 'modes' ? { inert: '' } : {})}
-                    >
-                      {modeControl}
-                      {showModelChoices && !currentModelMode && displayedModel?.providerName && (
-                        <MenuItem data-overflow-trigger
-                          ref={providerFieldRef}
-                          className="openbitfun-model-selector__provider-control"
-                          labelBehavior="static"
-                          data-testid="chat-model-selector-settings-provider"
-                          data-model-menu-target="providers"
-                          data-provider-key={displayedProviderGroup?.key}
-                          disabled={disabled || loading || externalSelection?.disabled || providerGroups.length === 0}
-                          onClick={() => openPanelFromClick('providers')}
-                          onKeyDown={event => handlePanelTriggerKeyDown('providers', event)}
+                        {contextError && <div id={contextErrorId} className="openbitfun-model-selector__context-error" role="alert">{contextError}</div>}
+                      </div>
+                    ) : (
+                      <Tooltip content={t(canEditContext ? 'modelSelector.home.editContext' : 'modelSelector.home.contextReadOnly')}>
+                        <MenuItem
+                          ref={contextFieldRef}
+                          className="openbitfun-model-selector__settings-row"
+                          data-testid="chat-model-selector-settings-context"
+                          aria-label={`${t('modelSelector.home.context')}: ${contextCapacityLabel}`}
+                          metadata={<OverflowText>{contextCapacityLabel}</OverflowText>}
+                          shortcut={canEditContext ? <Icon name="chevron-right" size="sm" aria-hidden /> : undefined}
+                          disabled={pickerDisabled || !canEditContext}
+                          onClick={() => {
+                            if (pickerDisabled || !canEditContext || !concreteModelId) return;
+                            setContextDraft(contextCapacity > 0 ? String(contextCapacity) : '300000');
+                            setContextError(null);
+                            setContextEdit({ modelId: concreteModelId, scopeKey: modelSelectionScopeKey });
+                          }}
                         >
-                          <OverflowText className="openbitfun-model-selector__model-provider">
-                            {displayedModel.providerName}
-                          </OverflowText>
+                          {t('modelSelector.home.context')}
                         </MenuItem>
-                      )}
-                    </MenuList>
+                      </Tooltip>
+                    )}
+                    {hasReasoningSettings && (
+                      <ReasoningIntensityControl
+                        key={`${sessionId ?? ''}:${currentModelId}`}
+                        presets={catalogReasoningPresets}
+                        selectedPreset={isAcpSelection ? effectiveReasoningDescriptor : selectedReasoningDescriptor}
+                        allowDefaultReset={!isAcpSelection}
+                        presentation="settings-row"
+                        active={dropdownOpen}
+                        disabled={pickerDisabled}
+                        onSelect={handleSelectReasoningPresetFromControl}
+                      />
+                    )}
+                  </MenuList>
+                  {showModelChoices && (
+                    <>
+                      <MenuSeparator />
+                      <MenuList
+                        className="openbitfun-model-selector__settings-model-section"
+                        data-openbitfun-component="model-selector"
+                        data-openbitfun-part="selectionSummary"
+                      >
+                        <MenuItem
+                          ref={modelFieldRef}
+                          className="openbitfun-model-selector__settings-row"
+                          data-testid="chat-model-selector-settings-model"
+                          data-model-menu-target="models"
+                          aria-label={`${settingsModelRowLabel}: ${settingsModelLabel}`}
+                          metadata={<OverflowText data-testid="chat-model-selector-settings-model-value">{settingsModelLabel}</OverflowText>}
+                          shortcut={<Icon name="chevron-right" size="sm" aria-hidden />}
+                          onClick={openModelChoices}
+                          onKeyDown={event => {
+                            if (event.key !== 'ArrowRight') return;
+                            event.preventDefault();
+                            event.stopPropagation();
+                            openModelChoices();
+                          }}
+                          disabled={pickerDisabled}
+                        >
+                          {settingsModelRowLabel}
+                        </MenuItem>
+                      </MenuList>
+                    </>
                   )}
-                </MenuList>
 
-                {acpFastModeItem}
+                </MenuList>
               </MenuSection>
             )}
           </Menu>,
diff --git a/src/web-ui/src/flow_chat/components/ModelSelectorAcpMode.test.tsx b/src/web-ui/src/flow_chat/components/ModelSelectorAcpMode.test.tsx
index 625c8aa7fe..9aac9097e6 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelectorAcpMode.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelectorAcpMode.test.tsx
@@ -55,7 +55,6 @@ vi.mock('@openbitfun/ui', async importOriginal => ({
   Tooltip: ({ children, content }: { children: React.ReactNode; content?: React.ReactNode }) => (
     <span data-tooltip={typeof content === 'string' ? content : undefined}>{children}</span>
   ),
-  Switch: () => null,
 }));
 
 vi.mock('@/infrastructure/config/services/ConfigManager', () => ({
@@ -280,6 +279,36 @@ describe('ModelSelector ACP mode picker', () => {
       .toEqual(['standard', 'minimal']);
   });
 
+  it('searches the ACP catalog and selects through the remote workspace adapter', async () => {
+    Object.assign(flowChatStoreMocks.sessions.get('acp-session')!, {
+      remoteConnectionId: 'ssh-connection', remoteSshHost: 'a100',
+    });
+    const availableModels = [
+      { id: 'deepseek-official/deepseek-v4-flash', name: 'DeepSeek V4 Flash' },
+      { id: 'deepseek-official/deepseek-v4-pro', name: 'DeepSeek V4 Pro' },
+    ];
+    await renderWithOptions([], { availableModels, currentModelId: availableModels[0].id });
+    await act(async () => container.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-btn"]')!.click());
+    expect(document.activeElement).toBe(document.body.querySelector(`[data-model-id="${availableModels[0].id}"]`));
+    await act(async () => document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-search-toggle"]')!.click());
+    const input = document.body.querySelector<HTMLInputElement>('[data-testid="chat-model-selector-search-input"]')!;
+    expect(document.activeElement).toBe(input);
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, 'PRO');
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(1);
+    vi.mocked(ACPClientAPI.setSessionModel).mockResolvedValue({
+      availableModels, currentModelId: availableModels[1].id, configOptions: [],
+    } as never);
+    await act(async () => document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-option"]')!.click());
+    expect(ACPClientAPI.setSessionModel).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
+      sessionId: 'acp-session', clientId: 'dsh', modelId: availableModels[1].id,
+      remoteConnectionId: 'ssh-connection', remoteSshHost: 'a100',
+    }));
+    expect(configManager.setConfig).not.toHaveBeenCalled();
+  });
+
   it('keeps the mode out of the model dropdown when the agent offers both', async () => {
     await renderWithOptions([MODE_OPTION], {
       availableModels: [
@@ -299,6 +328,8 @@ describe('ModelSelector ACP mode picker', () => {
     const modelMenu = document.body.querySelector('[data-testid="chat-model-selector-menu"]');
     expect(modelMenu?.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(2);
     expect(modelMenu?.querySelectorAll('[data-testid="chat-acp-mode-option"]')).toHaveLength(0);
+    expect(modelMenu?.querySelector('[data-testid="chat-model-selector-pool-action"]')).toBeNull();
+    expect(modelMenu?.querySelector('[data-testid="chat-model-selector-smart-action"]')).toBeNull();
 
     await act(async () => { modeTrigger?.click(); });
     expect(
@@ -391,20 +422,19 @@ describe('ModelSelector ACP mode picker', () => {
     };
     await renderWithOptions([reasoningOption], sessionOptions);
     await click('chat-model-selector-btn');
-    await click(`chat-model-selector-settings-${entry}`);
+    await click('chat-model-selector-settings-model');
     if (entry === 'provider') {
-      const providers = document.body.querySelectorAll('[data-testid="chat-model-selector-provider"]');
-      expect(providers).toHaveLength(2);
-      expect(document.body.querySelector('[data-testid="chat-model-selector-option"]')).toBeNull();
-      const currentProvider = document.body.querySelector<HTMLButtonElement>(
-        '[data-testid="chat-model-selector-provider"][data-provider-key="acp:Acme"]',
+      await click('chat-model-selector-search-toggle');
+      await click('chat-model-selector-provider-filter');
+      const provider = document.body.querySelector<HTMLButtonElement>(
+        '[data-testid="chat-model-selector-provider-filter-menu"] [data-menu-id="acp:Acme"]',
       )!;
-      expect(currentProvider.getAttribute('data-selected')).toBe('true');
-      await act(async () => currentProvider.click());
+      await act(async () => provider.click());
     }
 
     expect(document.body.querySelector('[data-testid="chat-model-selector-provider"]')).toBeNull();
-    expect(document.body.querySelector('[data-model-id="other-model"]')).toBeNull();
+    if (entry === 'provider') expect(document.body.querySelector('[data-model-id="other-model"]')).toBeNull();
+    else expect(document.body.querySelector('[data-model-id="other-model"]')).not.toBeNull();
     expect(document.body.querySelector('[data-model-id="model-one"]')?.getAttribute('aria-checked')).toBe('true');
     vi.mocked(ACPClientAPI.setSessionModel).mockResolvedValue({
       ...sessionOptions, currentModelId: 'model-two', configOptions: [reasoningOption],
@@ -432,7 +462,8 @@ describe('ModelSelector ACP mode picker', () => {
     expect(document.body.querySelector('[data-testid="chat-model-selector-settings-model"]')).not.toBeNull();
     await click('chat-model-selector-settings-model');
     expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(1);
-    await click('chat-model-selector-back');
+    await act(async () => document.body.querySelector<HTMLElement>('[data-testid="chat-model-selector-options"]')!
+      .dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })));
     await click('chat-model-selector-settings-reasoning');
     expect(document.body.querySelector('[data-openbitfun-value="preset:auto"]')).toBeNull();
     vi.mocked(ACPClientAPI.setSessionConfigOption).mockResolvedValue({
@@ -504,10 +535,12 @@ describe('ModelSelector ACP mode picker', () => {
     expect(container.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-btn"]')?.disabled).toBe(false);
   });
 
-  it('keeps the advertised fast mode available in the shared settings menu', async () => {
+  it('keeps the advertised ACP fast mode in the model list rather than the homepage', async () => {
     const fastMode = { id: 'fast-mode', name: 'Fast', type: 'boolean', currentValue: false };
     await renderWithOptions([reasoningOption, fastMode], modelOptions);
     await click('chat-model-selector-btn');
+    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-fast"]')).toBeNull();
+    await click('chat-model-selector-settings-model');
     const fastRow = document.body.querySelector<HTMLButtonElement>('[role="menuitemcheckbox"]');
     expect(fastRow).not.toBeNull();
     vi.mocked(ACPClientAPI.setSessionConfigOption).mockResolvedValue({
@@ -539,7 +572,7 @@ describe('ModelSelector ACP mode picker', () => {
     expect(document.body.querySelector('[data-reasoning-mode="auto"]')).not.toBeNull();
     expect(document.body.querySelector('[data-testid="chat-model-selector-intensity-option"]')).toBeNull();
     expect(document.body.querySelector('[data-testid="chat-model-selector-settings-reasoning"]')?.textContent)
-      .toBe('reasoningSelector.thinking · reasoningSelector.auto');
+      .toBe('modelSelector.home.effortreasoningSelector.auto');
   });
 
   it('shows an advertised model when an older ACP payload omits the current model id', async () => {
diff --git a/src/web-ui/src/flow_chat/components/ModelSelectorExternal.test.tsx b/src/web-ui/src/flow_chat/components/ModelSelectorExternal.test.tsx
index fa0ae49b91..7b10ab9534 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelectorExternal.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelectorExternal.test.tsx
@@ -84,7 +84,6 @@ vi.mock('react-i18next', () => ({
 vi.mock('@openbitfun/ui', async importOriginal => ({
   ...await importOriginal<typeof import('@openbitfun/ui')>(),
   Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  Switch: () => null,
 }));
 
 vi.mock('@/infrastructure/config/services/ConfigManager', () => ({
@@ -745,20 +744,19 @@ describe('ModelSelector external transport reuse', () => {
     const selection = targetSelection({ models: ['model-a', 'remote-model', 'remote-plain'] });
     await renderTarget(selection);
     await clickControl('chat-model-selector-btn');
-    await clickControl(`chat-model-selector-settings-${entry}`);
+    await clickControl('chat-model-selector-settings-model');
     if (entry === 'provider') {
-      const providers = document.body.querySelectorAll('[data-testid="chat-model-selector-provider"]');
-      expect(providers).toHaveLength(2);
-      expect(document.body.querySelector('[data-testid="chat-model-selector-option"]')).toBeNull();
-      const currentProvider = document.body.querySelector<HTMLButtonElement>(
-        '[data-testid="chat-model-selector-provider"][data-provider-key="external:a100"]',
+      await clickControl('chat-model-selector-search-toggle');
+      await clickControl('chat-model-selector-provider-filter');
+      const provider = document.body.querySelector<HTMLButtonElement>(
+        '[data-testid="chat-model-selector-provider-filter-menu"] [data-menu-id="external:a100"]',
       )!;
-      expect(currentProvider.getAttribute('data-selected')).toBe('true');
-      await act(async () => currentProvider.click());
+      await act(async () => provider.click());
     }
 
     expect(document.body.querySelector('[data-testid="chat-model-selector-provider"]')).toBeNull();
-    expect(document.body.querySelector('[data-model-id="model-a"]')).toBeNull();
+    if (entry === 'provider') expect(document.body.querySelector('[data-model-id="model-a"]')).toBeNull();
+    else expect(document.body.querySelector('[data-model-id="model-a"]')).not.toBeNull();
     expect(document.body.querySelector('[data-model-id="remote-model"]')?.getAttribute('aria-checked')).toBe('true');
     const model = document.body.querySelector<HTMLButtonElement>('[data-model-id="remote-plain"]');
     expect(model).not.toBeNull();
@@ -769,6 +767,34 @@ describe('ModelSelector external transport reuse', () => {
     expect(configManager.setConfig).not.toHaveBeenCalled();
   });
 
+  it.each([true, false])('searches only target-owned models and uses the target callback (reasoning settings: %s)', async withReasoning => {
+    const selection = targetSelection(withReasoning ? {} : { onSelectReasoningPreset: undefined });
+    await renderTarget(selection);
+    await act(async () => container.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-btn"]')!
+      .dispatchEvent(new MouseEvent('click', { bubbles: true, detail: 1 })));
+    if (withReasoning) {
+      expect(document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-settings-context"]')?.disabled).toBe(true);
+      expect(document.body.querySelector('[data-testid="chat-model-selector-settings-fast"]')).toBeNull();
+      await clickControl('chat-model-selector-settings-model');
+    }
+    expect(document.body.querySelector('[data-testid="chat-model-selector-pool-action"]')).toBeNull();
+    expect(document.body.querySelector('[data-testid="chat-model-selector-smart-action"]')).toBeNull();
+    expect(document.activeElement).toBe(document.body.querySelector('[data-model-id="remote-model"]'));
+    await clickControl('chat-model-selector-search-toggle');
+    const input = document.body.querySelector<HTMLInputElement>('[data-testid="chat-model-selector-search-input"]')!;
+    expect(document.activeElement).toBe(input);
+    expect(document.body.querySelector('[data-model-id="model-a"]')).toBeNull();
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, 'REMOTE-PLAIN');
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(1);
+    await act(async () => document.body.querySelector<HTMLButtonElement>('[data-model-id="remote-plain"]')!.click());
+    expect(selection.onSelect).toHaveBeenCalledExactlyOnceWith('remote-plain');
+    expect(agentAPI.updateSessionModel).not.toHaveBeenCalled();
+    expect(configManager.setConfig).not.toHaveBeenCalled();
+  });
+
   it('saves an inline choice through the target callback while keeping the card open', async () => {
     const selection = targetSelection();
     await renderTarget(selection);
@@ -786,7 +812,8 @@ describe('ModelSelector external transport reuse', () => {
     expect(agentAPI.updateSessionModel).not.toHaveBeenCalled();
     expect(configManager.setConfig).not.toHaveBeenCalled();
     await renderTarget({ ...selection, selectedReasoningPreset: 'medium' });
-    expect(document.body.querySelector('[data-testid="chat-model-selector-intensity-control"]')?.getAttribute('data-intensity')).toBe('1');
+    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-reasoning"]')?.textContent)
+      .toContain('reasoningSelector.levels.medium');
     expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
   });
 
@@ -823,7 +850,7 @@ describe('ModelSelector external transport reuse', () => {
     expect(document.body.querySelector('[data-testid="chat-model-selector-settings-reasoning"]')).toBeNull();
     expect(document.body.querySelector('[data-model-id="remote-plain"]')?.getAttribute('aria-checked')).toBe('true');
     await act(async () => {
-      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+      document.body.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }));
     });
     expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('false');
   });
diff --git a/src/web-ui/src/flow_chat/components/ModelSelectorProviderLevels.test.tsx b/src/web-ui/src/flow_chat/components/ModelSelectorProviderLevels.test.tsx
index 238b415020..a2cc4d88bf 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelectorProviderLevels.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelectorProviderLevels.test.tsx
@@ -9,13 +9,12 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { ModelSelector } from './ModelSelector';
 import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import { getRecentReasoningPreset } from '../utils/reasoningPresets';
-import { getRecentManualModel } from '../utils/manualModelSelection';
-import { getActiveSurfaceScope, surfaceScopedKey } from '@/infrastructure/peer-device/deviceSurface';
 import { useConfirmDialogStore } from '@/infrastructure/confirm-dialog';
 import { notificationStore } from '@/shared/notification-system';
 import { agentAPI } from '@/infrastructure/api/service-api/AgentAPI';
+import { quickActions } from '@/shared/services/ide-control';
 import type { AIModelCatalog } from '@/infrastructure/api/service-api/AIApi';
-import type { DefaultModelsConfig } from '@/infrastructure/config/types';
+import type { AIModelConfig, DefaultModelsConfig } from '@/infrastructure/config/types';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -63,7 +62,6 @@ vi.mock('@openbitfun/ui', async importOriginal => ({
   }) => cloneElement(children, {
     'data-tooltip': !disabled && typeof content === 'string' ? content : undefined,
   }),
-  Switch: () => null,
 }));
 
 vi.mock('@/infrastructure/config/services/ConfigManager', () => ({
@@ -74,6 +72,7 @@ vi.mock('@/infrastructure/config/services/ConfigManager', () => ({
       return () => flowChatStoreMocks.configChangeListeners.delete(listener);
     }),
     setConfig: vi.fn(async () => undefined),
+    updateConfig: vi.fn(),
   },
 }));
 
@@ -133,7 +132,7 @@ const providerRows = () => Array.from(
 
 const modelOption = (modelId: string) => document.body.querySelector<HTMLButtonElement>(
   `[data-testid="chat-model-selector-option"][data-model-id="${modelId}"]`,
-);
+) ?? document.body.querySelector<HTMLButtonElement>(`[data-testid="chat-model-selector-${modelId}-action"]`);
 
 describe('ModelSelector provider levels', () => {
   let container: HTMLDivElement;
@@ -147,46 +146,53 @@ describe('ModelSelector provider levels', () => {
     });
   };
 
-  const openMenu = async () => {
-    await openSettingsMenu();
+  const openMenu = async () => openModelList();
+
+  const openModelList = async () => {
+    if (container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded') !== 'true') {
+      await openSettingsMenu();
+    }
     const entry = document.body.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-settings-provider"]:not(:disabled)',
-    ) ?? document.body.querySelector<HTMLButtonElement>(
       '[data-testid="chat-model-selector-settings-model"]',
     );
-    if (entry) {
-      await act(async () => entry.click());
-    }
+    if (entry) await act(async () => entry.click());
   };
 
-  const openModelList = async () => {
-    await openSettingsMenu();
-    await act(async () => document.body.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-settings-model"]',
-    )!.click());
+  const reopenModelList = async () => {
+    const trigger = container.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-btn"]')!;
+    if (trigger.getAttribute('aria-expanded') === 'true') await act(async () => trigger.click());
+    await openModelList();
   };
 
   const modeTrigger = () => document.body.querySelector<HTMLButtonElement>(
-    '[data-testid="chat-model-selector-settings-mode"]',
+    '[data-testid="chat-model-selector-settings-model"]',
   )!;
 
-  const modeChoices = () => document.body.querySelector<HTMLElement>('[data-testid="chat-model-selector-mode-choices"]');
-  const modeOption = (mode: 'manual' | 'smart' | 'pool') => modeChoices()?.querySelector<HTMLButtonElement>(
-    `[data-openbitfun-value="${mode}"]`,
-  ) ?? null;
-  const modeTooltip = (mode: 'manual' | 'smart' | 'pool') => modeOption(mode)?.querySelector('[data-tooltip]')?.getAttribute('data-tooltip');
+  const searchTrigger = () => document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-search-toggle"]')!;
+  const searchInput = () => document.body.querySelector<HTMLInputElement>('[data-testid="chat-model-selector-search-input"]')!;
+  const searchFor = async (query: string) => {
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(searchInput(), query);
+      searchInput().dispatchEvent(new Event('input', { bubbles: true }));
+    });
+  };
+
+  const modeAction = (mode: 'smart' | 'pool') => document.body.querySelector<HTMLButtonElement>(
+    `[data-testid="chat-model-selector-${mode}-action"]`,
+  );
 
   const openModeMenu = async () => {
-    await openSettingsMenu();
-    await act(async () => modeTrigger().click());
+    await openModelList();
+    const showActions = document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-show-actions"]');
+    if (showActions) await act(async () => showActions.click());
   };
+  const modeOption = (mode: 'smart' | 'pool') => modeAction(mode);
 
   const openProvider = async (providerKey: string) => {
-    await act(async () => {
-      document.body.querySelector<HTMLButtonElement>(
-        `[data-testid="chat-model-selector-provider"][data-provider-key="${providerKey}"]`,
-      )?.click();
-    });
+    const search = document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-search-toggle"]');
+    if (search) await act(async () => search.click());
+    await act(async () => document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-provider-filter"]')!.click());
+    await act(async () => document.body.querySelector<HTMLButtonElement>(`[data-testid="chat-model-selector-provider-filter-menu"] [data-menu-id="${providerKey}"]`)!.click());
   };
 
   const optionsPanel = () => document.body.querySelector<HTMLElement>(
@@ -225,6 +231,10 @@ describe('ModelSelector provider levels', () => {
     activateSurface('local');
     vi.mocked(configManager.getConfigs).mockReset();
     vi.mocked(configManager.setConfig).mockReset().mockResolvedValue(undefined);
+    vi.mocked(configManager.updateConfig).mockReset().mockImplementation(async (_path, update) => {
+      const config = await configManager.getConfigs(['ai.models']);
+      return update(config['ai.models']);
+    });
     aiApiMocks.getModelCatalog.mockReset();
     vi.mocked(agentAPI.updateSessionModel).mockReset().mockResolvedValue(undefined);
     notificationStore.clearActiveNotifications();
@@ -278,6 +288,193 @@ describe('ModelSelector provider levels', () => {
     vi.clearAllMocks();
   });
 
+  it('searches selectable models across providers without changing the selection while typing', async () => {
+    await renderSelector([
+      ...CATALOG_MODELS,
+      { ...model('disabled-model', 'Hidden', 'disabled-provider', 'https://hidden.test'), enabled: false },
+      { ...model('image-model', 'Images', 'image-provider', 'https://images.test'), category: 'multimodal', capabilities: ['image_understanding'] },
+    ]);
+    await openModelList();
+    await act(async () => searchTrigger().click());
+    expect(document.activeElement).toBe(searchInput());
+    expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(3);
+    expect(modelOption('disabled-model')).toBeNull();
+    expect(modelOption('image-model')).toBeNull();
+    expect(modelOption('acme-fast')?.getAttribute('aria-checked')).toBe('true');
+    expect(modelOption('acme-fast')?.querySelector('[data-openbitfun-part="metadata"]')).toBeNull();
+
+    await searchFor('  ACME deep  ');
+    expect(document.activeElement).toBe(searchInput());
+    expect(modelOption('acme-deep')?.textContent).toContain('acme-deep-native');
+    expect(modelOption('acme-deep')?.querySelector('[data-openbitfun-part="label"]')?.textContent).toBe('acme-deep-native Acme');
+    expect(modelOption('acme-deep')?.querySelector('[data-openbitfun-part="metadata"]')).toBeNull();
+    expect(modelOption('acme-fast')).toBeNull();
+    expect(modelOption('umbra-main')).toBeNull();
+    await searchFor('deep');
+    expect(modelOption('acme-deep')?.textContent).toBe('acme-deep-native');
+    expect(modelOption('acme-deep')?.querySelector('[data-openbitfun-part="metadata"]')).toBeNull();
+    await searchFor('Umbra');
+    expect(modelOption('umbra-main')).not.toBeNull();
+    expect(modelOption('umbra-main')?.querySelector('[data-openbitfun-part="label"]')?.textContent).toBe('umbra-main-native Umbra');
+    expect(modelOption('umbra-main')?.querySelector('[data-openbitfun-part="metadata"]')).toBeNull();
+    expect(modelOption('acme-deep')).toBeNull();
+    await searchFor('  ');
+    expect(modelOption('umbra-main')?.querySelector('[data-openbitfun-part="metadata"]')).toBeNull();
+    expect(configManager.setConfig).not.toHaveBeenCalled();
+  });
+
+  it('keeps text editing inside search and supports keyboard selection and return focus', async () => {
+    await renderSelector();
+    await openModelList();
+    await act(async () => searchTrigger().click());
+    await searchFor('deep');
+    for (const key of ['ArrowLeft', 'ArrowRight', 'Home', 'End']) {
+      const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+      await act(async () => searchInput().dispatchEvent(event));
+      expect(event.defaultPrevented).toBe(false);
+      expect(document.activeElement).toBe(searchInput());
+    }
+    await act(async () => searchInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })));
+    expect(document.activeElement).toBe(modelOption('acme-deep'));
+    await act(async () => modelOption('acme-deep')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true })));
+    expect(document.activeElement).toBe(searchInput());
+    await act(async () => searchInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })));
+    expect(configManager.setConfig).toHaveBeenCalledExactlyOnceWith('ai.agent_model_defaults.mode', 'acme-deep');
+    expect(document.body.querySelector('[data-testid="chat-model-selector-search-input"]')).toBeNull();
+    expect(document.activeElement).toBe(document.body.querySelector('[data-testid="chat-model-selector-settings-model"]'));
+    expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('focuses and scrolls the selected model when opening a long list', async () => {
+    const previousScroll = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'scrollIntoView');
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', { configurable: true, value: scrollIntoView });
+    try {
+      const models = Array.from({ length: 24 }, (_, index) => model(`model-${index}`, 'Acme', 'provider-acme', 'https://acme.test/v1'));
+      await renderSelector(models, 'model-23');
+      await openModelList();
+      const selected = modelOption('model-23');
+      expect(document.activeElement).toBe(selected);
+      expect(selected?.getAttribute('aria-checked')).toBe('true');
+      expect(scrollIntoView.mock.contexts).toContain(selected);
+      expect(scrollIntoView).toHaveBeenCalledWith({ block: 'nearest', inline: 'nearest' });
+    } finally {
+      if (previousScroll) Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', previousScroll);
+      else Reflect.deleteProperty(HTMLElement.prototype, 'scrollIntoView');
+    }
+  });
+
+  it('keeps model rows above the actions and combines provider filtering with search', async () => {
+    await renderSelector();
+    await openModelList();
+    const results = document.body.querySelector('[data-testid="chat-model-selector-results"]')!;
+    const actions = document.body.querySelector('[data-testid="chat-model-selector-actions"]')!;
+    expect(results.nextElementSibling).toBe(actions);
+    expect(results.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(3);
+    expect(actions.contains(modelOption('primary'))).toBe(true);
+    expect(actions.contains(modelOption('fast'))).toBe(true);
+    expect(actions.contains(modeAction('pool'))).toBe(true);
+    expect(actions.contains(modeAction('smart'))).toBe(true);
+    expect(document.activeElement).toBe(modelOption('acme-fast'));
+    expect(searchInput()).toBeNull();
+    expect(actions.querySelector('[data-testid="chat-model-selector-summary-back"]')).toBeNull();
+    const divider = actions.querySelector('[data-testid="chat-model-selector-actions-divider"]')!;
+    expect(searchTrigger().parentElement?.previousElementSibling).toBe(divider);
+    const quickActions = actions.querySelector('[data-testid="chat-model-selector-quick-actions"]')!;
+    expect(divider.previousElementSibling?.contains(quickActions)).toBe(true);
+    expect(quickActions.firstElementChild).toBe(modelOption('primary'));
+    expect(modelOption('primary')?.textContent).toBe('modelSelector.primaryModel');
+    for (const action of [modelOption('fast'), modeAction('pool'), modeAction('smart')]) expect(action?.textContent).toBe('');
+
+    await act(async () => searchTrigger().click());
+    expect(document.activeElement).toBe(searchInput());
+    expect(actions.querySelector('[data-testid="chat-model-selector-actions-divider"]')).not.toBeNull();
+    const showActions = actions.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-show-actions"]')!;
+    expect(showActions.querySelector('.lucide-layout-grid')).not.toBeNull();
+    expect(showActions.parentElement?.nextElementSibling).toBe(actions.querySelector('[data-testid="chat-model-selector-actions-divider"]'));
+    expect(actions.querySelector('[data-testid="chat-model-selector-search-collapse"]')).toBeNull();
+    for (const action of [modelOption('primary'), modelOption('fast'), modeAction('pool'), modeAction('smart')]) expect(action).toBeNull();
+
+    const filter = actions.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-provider-filter"]')!;
+    const searchCapsule = searchInput().closest('[data-openbitfun-component="input"]')!;
+    expect(searchCapsule.getAttribute('data-shape')).toBe('pill');
+    expect(searchCapsule.contains(filter)).toBe(true);
+    const filterMenu = () => document.body.querySelector<HTMLElement>(
+      '[data-testid="chat-model-selector-provider-filter-menu"]:not([aria-hidden="true"])',
+    );
+    expect(actions.querySelector('[role="combobox"]')).toBeNull();
+    expect(filter.textContent).toBe('');
+    expect(filter.getAttribute('aria-expanded')).toBe('false');
+    expect(filterMenu()).toBeNull();
+    const selectProvider = async (providerKey: string) => {
+      await act(async () => filter.click());
+      expect(filter.getAttribute('aria-expanded')).toBe('true');
+      const option = filterMenu()!.querySelector<HTMLButtonElement>(`[data-menu-id="${providerKey}"]`)!;
+      await act(async () => {
+        option.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }));
+        option.click();
+      });
+      expect(filter.getAttribute('aria-expanded')).toBe('false');
+      expect(document.activeElement).toBe(filter);
+      expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
+    };
+    await selectProvider('provider-acme');
+    expect(filter.getAttribute('aria-pressed')).toBe('true');
+    expect(modelOption('acme-fast')).not.toBeNull();
+    expect(modelOption('umbra-main')).toBeNull();
+    expect(modelOption('acme-fast')?.querySelector('[data-openbitfun-part="metadata"]')).toBeNull();
+    expect(searchInput().closest('.openbitfun-model-selector__picker-actions')).toBe(actions.firstElementChild);
+    expect(actions.childElementCount).toBe(1);
+    await searchFor('deep');
+    expect(modelOption('acme-deep')).not.toBeNull();
+    expect(modelOption('acme-fast')).toBeNull();
+    await selectProvider('provider-umbra');
+    expect(document.body.querySelector('[data-testid="chat-model-selector-search-empty"]')).not.toBeNull();
+    await searchFor('main');
+    expect(modelOption('umbra-main')).not.toBeNull();
+    expect(configManager.setConfig).not.toHaveBeenCalled();
+
+    await act(async () => filter.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })));
+    const popup = filterMenu()!;
+    await act(async () => popup.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })));
+    expect(filterMenu()).toBeNull();
+    expect(document.activeElement).toBe(filter);
+    expect(document.body.querySelector('[data-testid="chat-model-selector-actions"]')).toBe(actions);
+    await searchFor('');
+    await selectProvider('all-providers');
+    expect(filter.getAttribute('aria-pressed')).toBe('false');
+    expect(results.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(3);
+    await act(async () => showActions.click());
+    expect(document.activeElement).toBe(searchTrigger());
+    expect(actions.querySelector('[data-testid="chat-model-selector-actions-divider"]')).not.toBeNull();
+    expect(modelOption('primary')?.textContent).toBe('modelSelector.primaryModel');
+    expect(modeAction('smart')).not.toBeNull();
+  });
+
+  it('shows empty results, ignores IME confirmation and resets the query after leaving search', async () => {
+    await renderSelector();
+    await openModelList();
+    await act(async () => searchTrigger().click());
+    await searchFor('does-not-exist');
+    expect(document.body.querySelector('[data-testid="chat-model-selector-search-empty"]')?.textContent).toBe('modelSelector.noSearchResults');
+    await act(async () => searchInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })));
+    expect(configManager.setConfig).not.toHaveBeenCalled();
+    await searchFor('deep');
+    for (const key of ['Enter', 'Escape', 'ArrowDown']) {
+      await act(async () => searchInput().dispatchEvent(new KeyboardEvent('keydown', { key, isComposing: true, bubbles: true, cancelable: true })));
+      expect(document.activeElement).toBe(searchInput());
+    }
+    expect(configManager.setConfig).not.toHaveBeenCalled();
+    await act(async () => searchInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })));
+    expect(document.activeElement).toBe(searchTrigger());
+    await act(async () => searchTrigger().click());
+    expect(searchInput().value).toBe('');
+    expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(3);
+    await act(async () => searchInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })));
+    await act(async () => searchTrigger().dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })));
+    expect(document.activeElement).toBe(document.body.querySelector('[data-testid="chat-model-selector-settings-model"]'));
+  });
+
   it('keeps loading feedback through configuration and catalog loading, then focuses the ready card', async () => {
     vi.useFakeTimers({ toFake: ['requestAnimationFrame', 'cancelAnimationFrame'] });
     let resolveConfig!: (config: Record<string, unknown>) => void;
@@ -365,7 +562,7 @@ describe('ModelSelector provider levels', () => {
     expect(document.body.querySelector('[data-testid="chat-model-selector-settings-model"]')).toBe(modelField);
   });
 
-  it('opens with model and reasoning settings while omitting speed and reset actions', async () => {
+  it('opens a settings homepage with context, effort and model rows', async () => {
     flowChatStoreMocks.sessions.set('session-a', {
       config: {
         agentType: 'Standard',
@@ -396,23 +593,22 @@ describe('ModelSelector provider levels', () => {
       '[data-testid="chat-model-selector-settings"]',
     );
     expect(settings).not.toBeNull();
+    expect(Array.from(settings!.querySelectorAll('[data-testid]'))
+      .map(element => element.getAttribute('data-testid'))
+      .filter(id => ['chat-model-selector-settings-fast', 'chat-model-selector-settings-context', 'chat-model-selector-settings-reasoning', 'chat-model-selector-settings-model'].includes(id!)))
+      .toEqual(['chat-model-selector-settings-context', 'chat-model-selector-settings-reasoning', 'chat-model-selector-settings-model']);
+    expect(settings?.querySelector('[role="separator"]')).not.toBeNull();
     expect(settings?.querySelector(
       '[data-testid="chat-model-selector-settings-model"]',
     )?.textContent).toContain('umbra-main-native');
-    expect(settings?.querySelector('.openbitfun-model-selector__model-provider')?.textContent)
-      .toBe('Umbra');
-    const providerLabel = settings?.querySelector<HTMLElement>('.openbitfun-model-selector__model-provider');
-    expect(providerLabel?.closest('button')).toBe(settings?.querySelector(
-      '[data-testid="chat-model-selector-settings-provider"]',
-    ));
+    expect(settings?.querySelector('[data-testid="chat-model-selector-settings-provider"]')).toBeNull();
+    expect(settings?.querySelector('[data-testid="chat-model-selector-settings-mode"]')).toBeNull();
     expect(optionsPanel()).toBeNull();
     expect(settings?.querySelector(
       '[data-testid="chat-model-selector-settings-reasoning"]',
     )?.textContent).toContain('reasoningSelector.levels.high');
-    expect(settings?.querySelectorAll('button[role="menuitem"]')).toHaveLength(4);
-    expect(settings?.querySelector('.openbitfun-model-selector__mode-footer')?.contains(modeTrigger())).toBe(true);
-    expect(settings?.querySelector('.openbitfun-reasoning-control')?.contains(modeTrigger())).toBe(false);
-    expect(modeTrigger().textContent).toBe('modelSelector.modes.manual');
+    expect(settings?.querySelectorAll('button[role="menuitem"]')).toHaveLength(3);
+    expect(settings?.querySelector('.openbitfun-model-selector__mode-footer')).toBeNull();
     expect(settings?.querySelector('.openbitfun-reasoning-control__title')).toBeNull();
     expect(settings?.textContent).not.toContain('modelSelector.fastMode');
     expect(settings?.querySelector(
@@ -435,7 +631,119 @@ describe('ModelSelector provider levels', () => {
 
   });
 
-  it.each(['primary', 'fast', 'acme-deep'])('offers default shortcuts before providers from the model entry for %s', async modelId => {
+  it.each([
+    ['primary', 'modelSelector.primaryModel', 'acme-fast-native'],
+    ['fast', 'modelSelector.fastModel', 'umbra-main-native'],
+  ])('labels the %s model on the homepage without a fast toggle', async (selection, label, modelName) => {
+    await renderSelector(CATALOG_MODELS, selection);
+    await openSettingsMenu();
+    const row = document.body.querySelector('[data-testid="chat-model-selector-settings-model"]')!;
+    expect(row.getAttribute('aria-label')).toBe(`${label}: ${modelName}`);
+    expect(row.textContent).toBe(`${label}${modelName}`);
+    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-fast-row"]')).toBeNull();
+    expect(document.body.querySelector('input[type="checkbox"]')).toBeNull();
+  });
+
+  const contextInput = () => document.body.querySelector<HTMLInputElement>('[data-testid="chat-model-selector-context-input"]')!;
+  const editContext = async (value: string) => {
+    if (!contextInput()) await act(async () => document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-settings-context"]')!.click());
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(contextInput(), value);
+      contextInput().dispatchEvent(new Event('input', { bubbles: true }));
+    });
+  };
+  const saveContext = async () => {
+    await act(async () => document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-context-save"]')!.click());
+  };
+
+  it('edits the resolved model context inline and preserves other configuration fields', async () => {
+    const openSettings = vi.spyOn(quickActions, 'openSettings').mockImplementation(() => undefined);
+    try {
+      const models = CATALOG_MODELS.map(model => ({ ...model, context_window: 300_000, api_key: 'preserved-key', future_option: { enabled: true } }));
+      flowChatStoreMocks.sessions.set('session-a', { config: { modelName: 'primary' } });
+      await renderSelector(models, 'primary', 'session-a');
+      await openSettingsMenu();
+      expect(document.body.querySelector('[data-testid="chat-model-selector-settings-context"]')?.textContent).toContain('300K');
+      await editContext('512000');
+      expect(document.activeElement).toBe(contextInput());
+      await saveContext();
+      expect(configManager.updateConfig).toHaveBeenCalledExactlyOnceWith('ai.models', expect.any(Function));
+      expect(await vi.mocked(configManager.updateConfig).mock.results[0].value).toEqual([
+        { ...models[0], context_window: 512_000 }, models[1], models[2],
+      ]);
+      expect(document.body.querySelector('[data-testid="chat-model-selector-settings-context"]')?.textContent).toContain('512K');
+      expect(flowChatStoreMocks.store.updateSessionMaxContextTokens).toHaveBeenCalledExactlyOnceWith('session-a', 512_000);
+      expect(openSettings).not.toHaveBeenCalled();
+      expect(document.activeElement).toBe(document.body.querySelector('[data-testid="chat-model-selector-settings-context"]'));
+      expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
+    } finally {
+      openSettings.mockRestore();
+    }
+  });
+
+  it('validates context limits and respects composition and cancellation before saving', async () => {
+    await renderSelector(CATALOG_MODELS.map(model => ({ ...model, context_window: 300_000 })));
+    await openSettingsMenu();
+    for (const invalid of ['', '31000', '2000001', '64000.5', 'tokens']) {
+      await editContext(invalid);
+      await saveContext();
+      expect(document.body.querySelector('[role="alert"]')?.textContent).toBe('modelSelector.home.contextInvalid');
+      expect(configManager.updateConfig).not.toHaveBeenCalled();
+    }
+    await editContext('512000');
+    await act(async () => contextInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', isComposing: true, bubbles: true, cancelable: true })));
+    expect(configManager.updateConfig).not.toHaveBeenCalled();
+    await act(async () => contextInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })));
+    expect(contextInput()).toBeNull();
+    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-context"]')?.textContent).toContain('300K');
+    expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
+    await editContext('512000');
+    await act(async () => contextInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })));
+    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-context"]')?.textContent).toContain('512K');
+  });
+
+  it('retains the context draft and committed limit after failure, then allows retry', async () => {
+    flowChatStoreMocks.sessions.set('session-a', { config: { modelName: 'primary' } });
+    await renderSelector(CATALOG_MODELS.map(model => ({ ...model, context_window: 300_000 })), 'primary', 'session-a');
+    await openSettingsMenu();
+    await editContext('512000');
+    vi.mocked(configManager.updateConfig).mockRejectedValueOnce(new Error('Host offline'));
+    await saveContext();
+    expect(contextInput().value).toBe('512000');
+    expect(document.body.querySelector('[role="alert"]')?.textContent).toBe('modelSelector.home.contextSaveFailed');
+    expect(flowChatStoreMocks.store.updateSessionMaxContextTokens).not.toHaveBeenCalled();
+    await saveContext();
+    expect(contextInput()).toBeNull();
+    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-context"]')?.textContent).toContain('512K');
+    expect(flowChatStoreMocks.store.updateSessionMaxContextTokens).toHaveBeenCalledExactlyOnceWith('session-a', 512_000);
+  });
+
+  it('does not apply an old context save to the newly activated device', async () => {
+    flowChatStoreMocks.sessions.set('session-a', { config: { modelName: 'primary' } });
+    await renderSelector(CATALOG_MODELS.map(model => ({ ...model, context_window: 300_000 })), 'primary', 'session-a');
+    await openSettingsMenu();
+    let finish!: (models: AIModelConfig[]) => void;
+    vi.mocked(configManager.updateConfig).mockImplementationOnce(async (_path, update) => {
+      const current = (await configManager.getConfigs(['ai.models']))['ai.models'];
+      const updated = update(current) as AIModelConfig[];
+      return new Promise(resolve => { finish = resolve; }).then(() => updated);
+    });
+    await editContext('512000');
+    await saveContext();
+    vi.mocked(configManager.getConfigs).mockResolvedValue({
+      'ai.models': CATALOG_MODELS.map(model => ({ ...model, context_window: 128_000 })),
+      'ai.default_models': { primary: 'acme-fast' },
+      'ai.agent_model_defaults': { mode: 'primary' },
+    });
+    await act(async () => { activateSurface('peer-context-host'); });
+    await act(async () => finish([]));
+    expect(flowChatStoreMocks.store.updateSessionMaxContextTokens).not.toHaveBeenCalled();
+    await openSettingsMenu();
+    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-context"]')?.textContent).toContain('128K');
+    expect(document.body.querySelector('[role="alert"]')).toBeNull();
+  });
+
+  it.each(['primary', 'fast', 'acme-deep'])('shows concrete models above the default shortcut actions for %s', async modelId => {
     await renderSelector(CATALOG_MODELS, modelId);
     await openSettingsMenu();
 
@@ -446,24 +754,30 @@ describe('ModelSelector provider levels', () => {
 
     expect(document.body.querySelector('[data-testid="chat-model-selector-menu"]')
       ?.getAttribute('data-menu-level')).toBe('models');
-    expect(providerRows()).toHaveLength(2);
+    expect(providerRows()).toHaveLength(0);
     const choices = Array.from(sharedPanelItems()!.querySelectorAll<HTMLButtonElement>(
-      '[data-model-id], [data-provider-key]',
+      '[data-testid="chat-model-selector-option"]',
     ));
-    expect(choices.map(row => row.dataset.modelId || row.dataset.providerKey))
-      .toEqual(['primary', 'fast', 'provider-acme', 'provider-umbra']);
-    expect(modelOption('primary')?.getAttribute('aria-checked')).toBe(String(modelId === 'primary'));
-    expect(modelOption('fast')?.getAttribute('aria-checked')).toBe(String(modelId === 'fast'));
-    expect(modelOption('primary')?.textContent).toContain('modelSelector.primaryModel');
-    expect(modelOption('primary')?.textContent).toContain('acme-fast-native');
-    expect(modelOption('primary')?.dataset.tooltip).toBe('acme-fast-native · Acme');
-    expect(modelOption('fast')?.textContent).toContain('modelSelector.fastModel');
-    expect(modelOption('fast')?.textContent).toContain('umbra-main-native');
-    expect(document.activeElement).toBe(modelId === 'acme-deep' ? providerRows()[0] : modelOption(modelId));
+    expect(choices.map(row => row.dataset.modelId)).toEqual(['acme-fast', 'acme-deep', 'umbra-main']);
+    expect(modelOption('primary')?.getAttribute('aria-pressed')).toBe(String(modelId === 'primary'));
+    expect(modelOption('fast')?.getAttribute('aria-pressed')).toBe(String(modelId === 'fast'));
+    expect(modelOption('primary')?.getAttribute('aria-label')).toBe('modelSelector.primaryModel');
+    expect(modelOption('primary')?.dataset.modelName).toBe('acme-fast-native');
+    expect(modelOption('primary')?.dataset.tooltip).toBe('modelSelector.primaryModel · acme-fast-native');
+    expect(modelOption('fast')?.getAttribute('aria-label')).toBe('modelSelector.fastModel');
+    expect(modelOption('fast')?.dataset.modelName).toBe('umbra-main-native');
+    expect(modelOption('fast')?.dataset.tooltip).toBe('modelSelector.fastModel · umbra-main-native');
+    expect(modelOption('primary')?.textContent).toBe(modelId === 'primary' ? 'modelSelector.primaryModel' : '');
+    expect(modelOption('fast')?.textContent).toBe(modelId === 'fast' ? 'modelSelector.fastModel' : '');
+    for (const role of ['primary', 'fast']) {
+      const action = modelOption(role)!;
+      expect(Boolean(action.querySelector('.lucide-check'))).toBe(modelId === role);
+      expect(Boolean(action.querySelector(role === 'primary' ? '.lucide-gem' : '.lucide-rocket'))).toBe(modelId !== role);
+    }
+    expect(document.activeElement).toBe(modelOption(modelId === 'primary' ? 'acme-fast' : modelId === 'fast' ? 'umbra-main' : modelId));
 
-    await act(async () => document.body.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-summary-back"]',
-    )!.click());
+    expect(document.body.querySelector('[data-testid="chat-model-selector-summary-back"]')).toBeNull();
+    await act(async () => optionsPanel()!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
     expect(optionsPanel()).toBeNull();
     expect(document.activeElement).toBe(modelControl());
 
@@ -491,10 +805,15 @@ describe('ModelSelector provider levels', () => {
     expect(configManager.setConfig).toHaveBeenCalledWith('ai.agent_model_defaults.mode', modelId);
     expect(flowChatStoreMocks.sessions.get('session-a')?.config.modelName).toBe(modelId);
     expect(optionsPanel()).toBeNull();
+    const defaultIcon = container.querySelector('[data-testid="chat-model-selector-default-icon"]');
+    expect(defaultIcon?.getAttribute('data-model-role')).toBe(modelId);
+    expect(defaultIcon?.querySelector(modelId === 'primary' ? '.lucide-gem' : '.lucide-rocket')).not.toBeNull();
+    const triggerLabel = container.querySelector('[data-testid="chat-model-selector-btn"] .openbitfun-model-selector__name');
+    expect(triggerLabel?.textContent).toBe(modelId === 'primary' ? 'acme-fast-native' : 'umbra-main-native');
     await act(async () => document.body.querySelector<HTMLButtonElement>(
       '[data-testid="chat-model-selector-settings-model"]',
     )!.click());
-    expect(modelOption(modelId)?.getAttribute('aria-checked')).toBe('true');
+    expect(modelOption(modelId)?.getAttribute('aria-pressed')).toBe('true');
   });
 
   it.each([undefined, 'removed-model', 'disabled-fast'])('resolves the fast shortcut through primary when fast is %s', async fast => {
@@ -512,7 +831,7 @@ describe('ModelSelector provider levels', () => {
     await act(async () => document.body.querySelector<HTMLButtonElement>(
       '[data-testid="chat-model-selector-settings-model"]',
     )!.click());
-    expect(modelOption('fast')?.getAttribute('aria-checked')).toBe('true');
+    expect(modelOption('fast')?.getAttribute('aria-pressed')).toBe('true');
   });
 
   it('disables unresolved default shortcuts while keeping concrete models selectable', async () => {
@@ -520,15 +839,192 @@ describe('ModelSelector provider levels', () => {
     await openModelList();
     for (const modelId of ['primary', 'fast']) {
       expect(modelOption(modelId)?.disabled).toBe(true);
-      expect(modelOption(modelId)?.textContent).toContain('modelSelector.modelNotConfigured');
+      expect(modelOption(modelId)?.dataset.tooltip).toBe(`${modelId === 'primary' ? 'modelSelector.primaryModel' : 'modelSelector.fastModel'} · modelSelector.modelNotConfigured`);
       await act(async () => modelOption(modelId)!.click());
     }
+    for (const mode of ['pool', 'smart'] as const) {
+      expect(modeAction(mode)?.disabled).toBe(true);
+      expect(modeAction(mode)?.dataset.tooltip).toContain('modelSelector.modes.primaryRequired');
+      await act(async () => modeAction(mode)!.click());
+    }
     expect(configManager.setConfig).not.toHaveBeenCalled();
-    await openProvider('provider-acme');
     await act(async () => modelOption('acme-fast')!.click());
     expect(configManager.setConfig).toHaveBeenCalledWith('ai.agent_model_defaults.mode', 'acme-fast');
   });
 
+  it.each(['pool', 'smart'] as const)('switches to %s from the model-list actions and back through a model shortcut', async mode => {
+    flowChatStoreMocks.sessions.set('session-a', {
+      config: { agentType: 'Standard', modelName: 'umbra-main', reasoningPreset: 'high' },
+    });
+    await renderSelector(CATALOG_MODELS, 'umbra-main', 'session-a');
+    await openModelList();
+    const action = modeAction(mode)!;
+    expect(action.getAttribute('aria-label')).toBe(`modelSelector.modes.${mode}`);
+    expect(action.dataset.tooltip).toBe(`modelSelector.modes.${mode} · modelSelector.modes.comingSoon`);
+    expect(action.getAttribute('aria-pressed')).toBe('false');
+    expect(action.querySelector(mode === 'smart' ? '.lucide-galaxy' : '.lucide-battery-full')).not.toBeNull();
+    await act(async () => action.click());
+
+    expect(agentAPI.updateSessionModel).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
+      sessionId: 'session-a', modelName: 'primary', reasoningPreset: null,
+    }));
+    expect(optionsPanel()).toBeNull();
+    expect(document.activeElement).toBe(modeTrigger());
+    expect(container.querySelector('[data-testid="chat-model-selector-mode-icon"]')?.getAttribute('data-model-mode')).toBe(mode);
+    expect(notificationStore.getState().notificationHistory.filter(notice => notice.type === 'info')).toHaveLength(1);
+
+    await reopenModelList();
+    expect(modeAction(mode)?.getAttribute('aria-pressed')).toBe('true');
+    expect(modeAction(mode)?.textContent).toBe(`modelSelector.modes.${mode}`);
+    expect(modeAction(mode)?.querySelector('.lucide-check')).not.toBeNull();
+    expect(modeAction(mode)?.querySelector(mode === 'smart' ? '.lucide-galaxy' : '.lucide-battery-full')).toBeNull();
+    for (const row of document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')) {
+      expect(row.getAttribute('aria-checked')).toBe('false');
+      expect(row.getAttribute('data-selected')).toBe('false');
+      expect(row.querySelector('.lucide-check')).toBeNull();
+    }
+    expect(modelOption('primary')?.getAttribute('aria-pressed')).toBe('false');
+    expect(modelOption('primary')?.textContent).toBe('');
+    await act(async () => modeAction(mode)!.click());
+    expect(optionsPanel()).toBeNull();
+    expect(agentAPI.updateSessionModel).toHaveBeenCalledTimes(1);
+    expect(notificationStore.getState().notificationHistory.filter(notice => notice.type === 'info')).toHaveLength(1);
+
+    await reopenModelList();
+    await act(async () => modelOption('fast')!.click());
+    expect(agentAPI.updateSessionModel).toHaveBeenLastCalledWith(expect.objectContaining({
+      sessionId: 'session-a', modelName: 'fast',
+    }));
+    expect(container.querySelector('[data-testid="chat-model-selector-mode-icon"]')).toBeNull();
+    expect(container.querySelector('[data-testid="chat-model-selector-default-icon"]')?.getAttribute('data-model-role')).toBe('fast');
+    await act(async () => document.body.querySelector<HTMLButtonElement>(
+      '[data-testid="chat-model-selector-settings-model"]',
+    )!.click());
+    expect(modeAction(mode)?.getAttribute('aria-pressed')).toBe('false');
+    expect(modelOption('fast')?.getAttribute('aria-pressed')).toBe('true');
+    expect(modelOption('umbra-main')?.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('keeps the battery mode below model information and opens its connections from the live pool count', async () => {
+    const models = [
+      ...CATALOG_MODELS,
+      { ...model('disabled-chat', 'Acme', 'provider-acme', 'https://acme.test'), enabled: false },
+      { ...model('speech-model', 'Acme', 'provider-acme', 'https://acme.test'), capabilities: ['speech_recognition'] },
+      { ...model('image-only', 'Acme', 'provider-acme', 'https://acme.test'), capabilities: ['image_understanding'] },
+      { ...model('legacy-chat', 'Acme', 'provider-acme', 'https://acme.test'), category: 'general_chat', capabilities: undefined },
+    ];
+    await renderSelector(models);
+    await openModelList();
+    await act(async () => modeAction('pool')!.click());
+
+    const homepage = () => document.body.querySelector('[data-testid="chat-model-selector-settings"]')!;
+    const countRow = () => homepage().querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-settings-pool"]')!;
+    const modeRow = () => homepage().querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-settings-model"]')!;
+    expect(homepage().querySelector('[data-testid="chat-model-selector-settings-context"]')).toBeNull();
+    expect(homepage().querySelector('[data-testid="chat-model-selector-context-input"]')).toBeNull();
+    expect(homepage().querySelector('[data-testid="chat-model-selector-settings-current-model"]')?.textContent)
+      .toBe('modelSelector.home.currentModelacme-fast-native');
+    expect(modeRow().getAttribute('aria-label')).toBe('modelSelector.home.mode: modelSelector.modes.pool');
+    expect(countRow().getAttribute('aria-label')).toBe('modelSelector.home.availablePoolModels: 4');
+    expect(Array.from(homepage().querySelectorAll('[data-testid]')).map(row => row.getAttribute('data-testid'))
+      .filter(id => ['chat-model-selector-settings-current-model', 'chat-model-selector-settings-pool', 'chat-model-selector-settings-model'].includes(id!)))
+      .toEqual(['chat-model-selector-settings-current-model', 'chat-model-selector-settings-pool', 'chat-model-selector-settings-model']);
+
+    vi.mocked(configManager.getConfigs).mockResolvedValue({
+      'ai.models': models.map(model => model.id === 'legacy-chat' ? { ...model, enabled: false } : model),
+      'ai.default_models': { primary: 'acme-fast', fast: 'umbra-main' },
+      'ai.agent_model_defaults': { mode: 'primary' },
+    });
+    await act(async () => {
+      flowChatStoreMocks.configChangeListeners.forEach(listener => listener('ai.models'));
+    });
+    expect(countRow().getAttribute('aria-label')).toBe('modelSelector.home.availablePoolModels: 3');
+    const writesBeforeViewing = vi.mocked(configManager.setConfig).mock.calls.length;
+    await act(async () => countRow().click());
+    const connections = document.body.querySelector('[data-testid="chat-model-selector-pool-connections"]')!;
+    expect(connections).not.toBeNull();
+    expect(Array.from(connections.querySelectorAll('[data-testid="chat-model-selector-pool-model"]'))
+      .map(model => model.getAttribute('data-model-id'))).toEqual(['acme-fast', 'acme-deep', 'umbra-main']);
+    expect(Array.from(connections.querySelectorAll('[data-openbitfun-part="heading-label"]'))
+      .map(heading => heading.textContent)).toEqual(['Acme', 'Umbra']);
+    expect(connections.querySelector('[role="menuitemradio"]')).toBeNull();
+    expect(document.body.querySelector('[data-testid="chat-model-selector-actions"]')).toBeNull();
+    expect(document.activeElement).toBe(document.body.querySelector('[data-testid="chat-model-selector-pool-back"]'));
+    await act(async () => document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })));
+    expect(document.activeElement).toBe(countRow());
+    await act(async () => countRow().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true })));
+    expect(document.body.querySelector('[data-testid="chat-model-selector-pool-connections"]')).not.toBeNull();
+    await act(async () => document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-pool-back"]')!.click());
+    expect(document.activeElement).toBe(countRow());
+    expect(vi.mocked(configManager.setConfig).mock.calls).toHaveLength(writesBeforeViewing);
+    expect(agentAPI.updateSessionModel).not.toHaveBeenCalled();
+    await act(async () => modeRow().click());
+    expect(document.body.querySelector('[data-testid="chat-model-selector-pool-connections"]')).toBeNull();
+    expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(3);
+    expect(document.activeElement).toBe(modelOption('acme-fast'));
+    await act(async () => modelOption('primary')!.click());
+    expect(homepage().querySelector('[data-testid="chat-model-selector-settings-current-model"]')).toBeNull();
+    expect(homepage().querySelector('[data-testid="chat-model-selector-settings-pool"]')).toBeNull();
+    expect(homepage().querySelector('[data-testid="chat-model-selector-settings-context"]')).not.toBeNull();
+  });
+
+  it('opens the smart model pool from the homepage instead of editing a fallback model context', async () => {
+    await renderSelector();
+    await openModelList();
+    await act(async () => modeAction('smart')!.click());
+    const homepage = () => document.body.querySelector('[data-testid="chat-model-selector-settings"]')!;
+    const poolRow = () => homepage().querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-settings-pool"]')!;
+    expect(homepage().querySelector('[data-testid="chat-model-selector-settings-context"]')).toBeNull();
+    expect(poolRow().getAttribute('aria-label')).toBe('modelSelector.home.modelPool: 3');
+    expect(homepage().querySelector('[data-testid="chat-model-selector-settings-model"]')?.getAttribute('aria-label'))
+      .toBe('modelSelector.home.mode: modelSelector.modes.smart');
+    const writesBeforeViewing = vi.mocked(configManager.setConfig).mock.calls.length;
+    await act(async () => poolRow().click());
+    const connections = document.body.querySelector('[data-testid="chat-model-selector-pool-connections"]')!;
+    expect(connections.querySelector('[role="region"]')?.getAttribute('aria-label')).toBe('modelSelector.home.modelPool');
+    expect(Array.from(connections.querySelectorAll('[data-testid="chat-model-selector-pool-model"]'))
+      .map(model => model.getAttribute('data-model-id'))).toEqual(['acme-fast', 'acme-deep', 'umbra-main']);
+    expect(connections.querySelector('[role="menuitemradio"]')).toBeNull();
+    await act(async () => document.body.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-pool-back"]')!.click());
+    expect(document.activeElement).toBe(poolRow());
+    expect(vi.mocked(configManager.setConfig).mock.calls).toHaveLength(writesBeforeViewing);
+    expect(configManager.updateConfig).not.toHaveBeenCalled();
+  });
+
+  it('keeps mode actions disabled while a selection is being saved', async () => {
+    await renderSelector(CATALOG_MODELS, 'umbra-main');
+    await openModelList();
+    let finish!: () => void;
+    vi.mocked(configManager.setConfig).mockReturnValueOnce(new Promise<void>(resolve => { finish = resolve; }));
+    await act(async () => modeAction('smart')!.click());
+    expect(modeAction('smart')?.disabled).toBe(true);
+    expect(modeAction('pool')?.disabled).toBe(true);
+    await act(async () => modeAction('pool')!.click());
+    expect(configManager.setConfig).toHaveBeenCalledTimes(1);
+    await act(async () => finish());
+    expect(optionsPanel()).toBeNull();
+    const homepage = document.body.querySelector('[data-testid="chat-model-selector-settings"]')!;
+    expect(homepage.querySelector('[data-testid="chat-model-selector-settings-model-value"]')?.textContent).toBe('modelSelector.modes.smart');
+    expect(homepage.querySelector('[data-testid="chat-model-selector-settings-mode"]')).toBeNull();
+    expect(homepage.querySelector('[data-testid="chat-model-selector-settings-provider"]')).toBeNull();
+  });
+
+  it('preserves the model list and focuses a failed mode action for retry', async () => {
+    await renderSelector(CATALOG_MODELS, 'umbra-main');
+    await openModelList();
+    vi.mocked(configManager.setConfig).mockRejectedValueOnce(new Error('Settings unavailable'));
+    await act(async () => modeAction('pool')!.click());
+
+    expect(optionsPanel()?.dataset.panelKind).toBe('models');
+    expect(modelOption('umbra-main')?.getAttribute('aria-checked')).toBe('true');
+    expect(modeAction('pool')?.getAttribute('aria-pressed')).toBe('false');
+    expect(document.activeElement).toBe(modeAction('pool'));
+    expect(notificationStore.getState().notificationHistory.filter(notice => notice.type === 'info')).toHaveLength(0);
+    await act(async () => modeAction('pool')!.click());
+    expect(optionsPanel()).toBeNull();
+    expect(container.querySelector('[data-testid="chat-model-selector-mode-icon"]')?.getAttribute('data-model-mode')).toBe('pool');
+  });
+
   it('resolves shortcuts from the selected peer surface without retaining local model labels', async () => {
     await renderSelector();
     await openModelList();
@@ -628,7 +1124,7 @@ describe('ModelSelector provider levels', () => {
     const reasoningRow = document.body.querySelector<HTMLButtonElement>(
       '[data-testid="chat-model-selector-settings-reasoning"]',
     );
-    expect(reasoningRow?.textContent).toBe('reasoningSelector.thinking · reasoningSelector.auto');
+    expect(reasoningRow?.textContent).toBe('modelSelector.home.effortreasoningSelector.auto');
 
     await act(async () => reasoningRow?.click());
     await act(async () => {
@@ -644,246 +1140,6 @@ describe('ModelSelector provider levels', () => {
     )?.textContent).toContain('reasoningSelector.levels.high');
   });
 
-  it.each(['smart', 'pool'] as const)('selects %s mode with a notification-center notice and no blocking dialog', async (mode) => {
-    aiApiMocks.getModelCatalog.mockResolvedValue({
-      version: 1, default_models: { primary: 'acme-fast' },
-      models: [{ id: 'umbra-main', reasoning: { status: 'unknown', presets: [] } }, { id: 'acme-fast', reasoning: {
-        status: 'known', default_preset: 'high',
-        presets: [{ id: 'high', label: 'High', order: 1, source: 'models_dev', actions: [{ type: 'effort', value: 'high' }] }],
-      } }],
-    });
-    await renderSelector(CATALOG_MODELS, 'umbra-main');
-    await openSettingsMenu();
-    expect(document.body.querySelector('[data-testid="chat-model-selector-reasoning-status"]')).toBeNull();
-    expect(modeChoices()).toBeNull();
-    await act(async () => modeTrigger().click());
-    expect(optionsPanel()).toBeNull();
-    expect(modeChoices()?.querySelectorAll('button')).toHaveLength(3);
-    expect(modeChoices()?.querySelector('[role="menuitemradio"]')).toBeNull();
-    expect(modeOption('manual')?.getAttribute('aria-pressed')).toBe('true');
-    expect(modeOption('manual')?.textContent).toBe('modelSelector.modes.manual');
-    expect(modeTooltip('manual')).toBe('umbra-main-native');
-    expect(document.body.querySelector('.openbitfun-model-selector__model-summary[aria-hidden="true"][inert]')).not.toBeNull();
-    expect(document.body.querySelector('[data-testid="chat-model-selector-reasoning-status"]')).toBeNull();
-    expect(document.body.querySelector('.openbitfun-model-selector__mode-footer[aria-hidden="true"][inert]')).not.toBeNull();
-    expect(document.body.querySelector('[data-testid="chat-model-selector-menu"]')?.getAttribute('data-menu-level')).toBe('settings');
-    expect(modelOption('primary')).toBeNull();
-    const trigger = container.querySelector<HTMLButtonElement>('[data-testid="chat-model-selector-btn"]')!;
-    const entry = modeOption(mode)!;
-    expect(modeTooltip(mode)).toBe('modelSelector.modes.comingSoon');
-    await act(async () => entry.click());
-
-    expect(useConfirmDialogStore.getState().isOpen).toBe(false);
-    expect(notificationStore.getState().notificationHistory).toEqual([expect.objectContaining({
-      title: `modelSelector.modes.${mode}`,
-      message: 'modelSelector.modes.developmentNotice',
-      type: 'info',
-      showInCenter: true,
-    })]);
-    expect(notificationStore.getState().unreadCount).toBe(1);
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    expect(trigger.textContent).toContain(`modelSelector.modes.${mode}`);
-    expect(configManager.setConfig).toHaveBeenCalledWith('ai.agent_model_defaults.mode', 'primary');
-    expect(document.activeElement).toBe(modeTrigger());
-    expect(document.body.querySelector('[data-testid="chat-model-selector-menu"]')?.getAttribute('data-model-mode')).toBe(mode);
-    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-reasoning"]')).toBeNull();
-    const settings = document.body.querySelector('[data-testid="chat-model-selector-settings"]')!;
-    expect(settings.textContent).toBe(`modelSelector.modes.${mode}`);
-    expect(settings.querySelector('.openbitfun-model-selector__model-provider')).toBeNull();
-    expect(settings.querySelector('.openbitfun-model-selector__model-name')).toBeNull();
-    expect(modeTrigger().closest('.openbitfun-model-selector__mode-summary')).not.toBeNull();
-    await act(async () => settings.click());
-    expect(optionsPanel()).toBeNull();
-    await act(async () => modeTrigger().click());
-    expect(modeChoices()).not.toBeNull();
-    expect(modeOption(mode)?.getAttribute('aria-pressed')).toBe('true');
-    expect(modeTooltip('manual')).toBe('umbra-main-native');
-    await act(async () => modeOption('manual')!.click());
-    expect(trigger.textContent).not.toContain(`modelSelector.modes.${mode}`);
-    expect(trigger.textContent).toContain('umbra-main-native');
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    expect(modeTrigger().textContent).toBe('modelSelector.modes.manual');
-    expect(document.activeElement).toBe(modeTrigger());
-  });
-
-  it('sends the primary model and automatic reasoning to an existing session for an upcoming mode', async () => {
-    flowChatStoreMocks.sessions.set('session-a', {
-      config: { agentType: 'Standard', modelName: 'primary', reasoningPreset: 'high' },
-    });
-    await renderSelector(CATALOG_MODELS, 'primary', 'session-a');
-    await openModeMenu();
-    await act(async () => modeOption('smart')!.click());
-    expect(agentAPI.updateSessionModel).toHaveBeenCalledWith(expect.objectContaining({
-      sessionId: 'session-a', modelName: 'primary', reasoningPreset: null,
-    }));
-    expect(flowChatStoreMocks.store.updateSessionReasoningPreset).toHaveBeenCalledWith('session-a', undefined);
-  });
-
-  it('does not enter an upcoming mode when switching to primary fails', async () => {
-    await renderSelector(CATALOG_MODELS, 'umbra-main');
-    vi.mocked(configManager.setConfig).mockRejectedValueOnce(new Error('Settings unavailable'));
-    await openModeMenu();
-    await act(async () => modeOption('pool')!.click());
-    expect(useConfirmDialogStore.getState().isOpen).toBe(false);
-    expect(notificationStore.getState().notificationHistory.filter(notice => notice.type === 'info')).toEqual([]);
-    expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.textContent).toContain('umbra-main-native');
-    expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
-    expect(modeChoices()).not.toBeNull();
-    expect(document.activeElement).toBe(modeOption('pool'));
-  });
-
-  it('disables upcoming modes when their primary-model fallback is unavailable', async () => {
-    await renderSelector([]);
-    await openModeMenu();
-    const entry = modeOption('smart')!;
-    expect(entry.disabled).toBe(true);
-    await act(async () => entry.click());
-    expect(configManager.setConfig).not.toHaveBeenCalled();
-    expect(useConfirmDialogStore.getState().isOpen).toBe(false);
-    expect(notificationStore.getState().notificationHistory).toEqual([]);
-  });
-
-  it('restores the last manually chosen session model after switching between both upcoming modes', async () => {
-    flowChatStoreMocks.sessions.set('session-a', {
-      config: { agentType: 'Standard', modelName: 'umbra-main' },
-    });
-    await renderSelector(CATALOG_MODELS, 'primary', 'session-a');
-    await openMenu();
-    expect(modeOption('smart')).toBeNull();
-    await openProvider('provider-acme');
-    await act(async () => modelOption('acme-deep')!.click());
-
-    for (const mode of ['smart', 'pool'] as const) {
-      await act(async () => modeTrigger().click());
-      expect(modeTooltip('manual')).toBe('acme-deep-native');
-      await act(async () => modeOption(mode)!.click());
-    }
-    await act(async () => modeTrigger().click());
-    await act(async () => modeOption('manual')!.click());
-    expect(agentAPI.updateSessionModel).toHaveBeenLastCalledWith(expect.objectContaining({
-      sessionId: 'session-a', modelName: 'acme-deep',
-    }));
-    expect(configManager.setConfig).toHaveBeenLastCalledWith('ai.agent_model_defaults.mode', 'acme-deep');
-    expect(flowChatStoreMocks.sessions.get('session-a')?.config.modelName).toBe('acme-deep');
-    expect(getRecentManualModel(getActiveSurfaceScope().key('model-selector', 'Standard', 'session-a')))
-      .toBe('acme-deep');
-  });
-
-  it('keeps manual memory through remounts and isolates it from other sessions and devices', async () => {
-    flowChatStoreMocks.sessions.set('session-a', {
-      config: { agentType: 'Standard', modelName: 'umbra-main' },
-    });
-    await renderSelector(CATALOG_MODELS, 'primary', 'session-a');
-    await openModeMenu();
-    await act(async () => modeOption('smart')!.click());
-    expect(getRecentManualModel(getActiveSurfaceScope().key('model-selector', 'Standard', 'session-b')))
-      .toBeUndefined();
-    expect(getRecentManualModel(surfaceScopedKey('other-device', 'model-selector', 'Standard', 'session-a')))
-      .toBeUndefined();
-
-    await act(async () => root.unmount());
-    root = createRoot(container);
-    await renderSelector(CATALOG_MODELS, 'primary', 'session-a');
-    await openModeMenu();
-    expect(modeTooltip('manual')).toBe('umbra-main-native');
-    await act(async () => modeOption('manual')!.click());
-    expect(agentAPI.updateSessionModel).toHaveBeenLastCalledWith(expect.objectContaining({
-      sessionId: 'session-a', modelName: 'umbra-main',
-    }));
-  });
-
-  it('retains the saved manual model when restoration fails and allows retrying', async () => {
-    await renderSelector(CATALOG_MODELS, 'umbra-main');
-    await openModeMenu();
-    await act(async () => modeOption('pool')!.click());
-    await act(async () => modeTrigger().click());
-    vi.mocked(configManager.setConfig).mockRejectedValueOnce(new Error('Settings unavailable'));
-    await act(async () => modeOption('manual')!.click());
-    expect(modeChoices()).not.toBeNull();
-    expect(modeOption('pool')?.getAttribute('aria-pressed')).toBe('true');
-    expect(modeTooltip('manual')).toBe('umbra-main-native');
-    expect(document.activeElement).toBe(modeOption('manual'));
-    await act(async () => modeOption('manual')!.click());
-    expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.textContent)
-      .toContain('umbra-main-native');
-  });
-
-  it('asks for another model when the remembered model has been removed', async () => {
-    await renderSelector(CATALOG_MODELS, 'umbra-main');
-    await openModeMenu();
-    await act(async () => modeOption('smart')!.click());
-    vi.mocked(configManager.getConfigs).mockResolvedValue({
-      'ai.models': CATALOG_MODELS.filter(model => model.id !== 'umbra-main'),
-      'ai.default_models': { primary: 'acme-fast' },
-      'ai.agent_model_defaults': { mode: 'primary' },
-    });
-    await act(async () => {
-      flowChatStoreMocks.configChangeListeners.forEach(listener => listener('ai.models'));
-    });
-    await act(async () => modeTrigger().click());
-    vi.mocked(configManager.setConfig).mockClear();
-    await act(async () => modeOption('manual')!.click());
-    expect(configManager.setConfig).not.toHaveBeenCalled();
-    expect(optionsPanel()?.dataset.panelKind).toBe('models');
-    expect(getRecentManualModel(getActiveSurfaceScope().key('model-selector', 'Standard', undefined)))
-      .toBe('umbra-main');
-  });
-
-  it('opens the mode picker with the keyboard and restores focus to the mode entry', async () => {
-    await renderSelector();
-    await openSettingsMenu();
-    await act(async () => {
-      modeTrigger().focus();
-      modeTrigger().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    });
-    expect(optionsPanel()).toBeNull();
-    expect(modeChoices()).not.toBeNull();
-    expect(document.activeElement).toBe(modeOption('manual'));
-    await act(async () => {
-      modeOption('manual')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    });
-    expect(document.activeElement).toBe(modeOption('smart'));
-    expect(modeOption('manual')?.getAttribute('aria-pressed')).toBe('true');
-    expect(configManager.setConfig).not.toHaveBeenCalled();
-    await act(async () => {
-      modeOption('smart')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
-    });
-    expect(document.activeElement).toBe(modeOption('manual'));
-    await act(async () => {
-      modeOption('manual')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-    });
-    expect(modeChoices()).toBeNull();
-    expect(document.activeElement).toBe(modeTrigger());
-    expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
-  });
-
-  it('retains the card and its background until mode persistence succeeds, without duplicate saves', async () => {
-    aiApiMocks.getModelCatalog.mockResolvedValue({
-      version: 1, default_models: { primary: 'acme-fast' },
-      models: [{ id: 'acme-fast', reasoning: { status: 'known', presets: [
-        { id: 'high', label: 'High', order: 1, source: 'models_dev', actions: [{ type: 'effort', value: 'high' }] },
-      ] } }],
-    });
-    await renderSelector(CATALOG_MODELS, 'acme-fast');
-    await openSettingsMenu();
-    const sky = document.body.querySelector('[data-openbitfun-part="reasoningSliderSky"]');
-    expect(sky).not.toBeNull();
-    await act(async () => modeTrigger().click());
-    expect(document.body.querySelector('[data-openbitfun-part="reasoningSliderSky"]')).toBe(sky);
-    let finish!: () => void;
-    vi.mocked(configManager.setConfig).mockImplementationOnce(() => new Promise<void>(resolve => { finish = resolve; }));
-    await act(async () => modeOption('smart')!.click());
-    expect(modeChoices()).not.toBeNull();
-    expect(Array.from(modeChoices()!.querySelectorAll('button')).every(button => button.disabled)).toBe(true);
-    expect(modeOption('manual')?.getAttribute('aria-pressed')).toBe('true');
-    await act(async () => modeOption('pool')!.click());
-    expect(configManager.setConfig).toHaveBeenCalledTimes(1);
-    await act(async () => finish());
-    expect(modeChoices()).toBeNull();
-    expect(modeTrigger().textContent).toBe('modelSelector.modes.smart');
-    expect(document.activeElement).toBe(modeTrigger());
-  });
-
   it('selects the advertised levels inline and keeps Auto separate from Off without closing the card', async () => {
     aiApiMocks.getModelCatalog.mockResolvedValue({
       version: 1,
@@ -910,8 +1166,7 @@ describe('ModelSelector provider levels', () => {
     };
     expect(slider()).toBeNull();
     expect(document.body.querySelector('[data-reasoning-mode="auto"] [data-testid="chat-model-selector-settings-reasoning"]')?.textContent)
-      .toBe('reasoningSelector.thinking · reasoningSelector.auto');
-    expect(document.body.querySelector('[data-testid="chat-model-selector-intensity-control"]')?.getAttribute('data-intensity')).toBe('1');
+      .toBe('modelSelector.home.effortreasoningSelector.auto');
 
     await openReasoning();
     expect(document.body.querySelectorAll('[data-testid="chat-model-selector-reasoning-options"] [aria-pressed="true"]')).toHaveLength(1);
@@ -922,10 +1177,9 @@ describe('ModelSelector provider levels', () => {
     expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
     expect(slider()).toBeNull();
     expect(optionsPanel()).toBeNull();
-    expect(document.body.querySelector('[data-testid="chat-model-selector-intensity-control"]')?.getAttribute('data-intensity')).toBe('3');
     const manualRow = document.body.querySelector('[data-reasoning-mode="manual"]')!;
     expect(manualRow.querySelector('[data-testid="chat-model-selector-settings-reasoning"]')?.textContent)
-      .toBe('reasoningSelector.thinking · reasoningSelector.levels.high');
+      .toBe('modelSelector.home.effortreasoningSelector.levels.high');
     expect(manualRow.querySelectorAll('[data-testid="chat-model-selector-settings-reasoning"]')).toHaveLength(1);
     expect(document.body.querySelector('[data-reasoning-mode="manual"] [data-openbitfun-name="reasoning-auto"]')).toBeNull();
     await openReasoning();
@@ -935,7 +1189,8 @@ describe('ModelSelector provider levels', () => {
     });
     expect(getRecentReasoningPreset('acme-fast')).toBe('off');
     expect(slider()).toBeNull();
-    expect(document.body.querySelector('[data-testid="chat-model-selector-intensity-control"]')?.getAttribute('data-intensity')).toBe('1');
+    expect(document.body.querySelector('[data-testid="chat-model-selector-settings-reasoning"]')?.textContent)
+      .toBe('modelSelector.home.effortreasoningSelector.levels.off');
     expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
     expect(document.activeElement).toBe(document.body.querySelector('[data-testid="chat-model-selector-settings-reasoning"]'));
 
@@ -948,63 +1203,10 @@ describe('ModelSelector provider levels', () => {
     expect(getRecentReasoningPreset('acme-fast')).toBeUndefined();
     const autoRow = document.body.querySelector('[data-reasoning-mode="auto"]')!;
     const autoChoice = autoRow.querySelector('[data-testid="chat-model-selector-settings-reasoning"]');
-    expect(autoChoice?.textContent).toBe('reasoningSelector.thinking · reasoningSelector.auto');
+    expect(autoChoice?.textContent).toBe('modelSelector.home.effortreasoningSelector.auto');
     expect(document.activeElement).toBe(autoChoice);
   });
 
-  it('opens only providers from the provider entry and marks the resolved default provider', async () => {
-    await renderSelector();
-    await openMenu();
-
-    const currentSelection = document.body.querySelector<HTMLElement>('[data-testid="chat-model-selector-current-selection"]');
-    expect(currentSelection?.textContent).toBe('acme-fast-native');
-    expect(currentSelection?.dataset.tooltip).toBe('Acme');
-    expect(document.body.querySelector('[data-testid="chat-model-selector-summary-back"]')
-      ?.getAttribute('aria-describedby')).toBe(currentSelection?.id);
-
-    expect(document.body.querySelector(
-      '[data-testid="chat-model-selector-settings"]',
-    )).toBeNull();
-    expect(optionsPanel()?.dataset.panelKind).toBe('providers');
-    expect(sharedPanelItems()).not.toBeNull();
-    expect(providerRows().every(row => sharedPanelItems()?.contains(row))).toBe(true);
-    expect(providerRows().map(row => row.dataset.providerKey))
-      .toEqual(['provider-acme', 'provider-umbra']);
-    expect(modelOption('primary')).toBeNull();
-    expect(modelOption('fast')).toBeNull();
-    expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(0);
-    expect(providerRows().find(row => row.dataset.selected === 'true')?.dataset.providerKey)
-      .toBe('provider-acme');
-    expect(document.body.querySelector(
-      '[data-testid="chat-model-selector-provider-selected-model"]',
-    )).toBeNull();
-    // A concrete model is only reachable through its provider now.
-    expect(modelOption('acme-deep')).toBeNull();
-    expect(modelOption('umbra-main')).toBeNull();
-    await act(async () => document.body.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-summary-back"]',
-    )!.click());
-    const providerControl = document.body.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-settings-provider"]',
-    )!;
-    expect(document.activeElement).toBe(providerControl);
-    await act(async () => providerControl.dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }),
-    ));
-    expect(document.activeElement).toBe(providerRows()[0]);
-    await act(async () => {
-      providerRows()[1].focus();
-      providerRows()[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    });
-    expect(modelOption('umbra-main')).not.toBeNull();
-    expect(modelOption('acme-fast')).toBeNull();
-    await act(async () => optionsPanel()!.dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }),
-    ));
-    expect(document.activeElement).toBe(providerRows()[1]);
-    expect(configManager.setConfig).not.toHaveBeenCalled();
-  });
-
   it('commits the session before remembering defaults and leaves the selector usable during that save', async () => {
     flowChatStoreMocks.sessions.set('session-a', { config: { modelName: 'umbra-main' } });
     let commitSession!: () => void;
@@ -1048,10 +1250,10 @@ describe('ModelSelector provider levels', () => {
     flowChatStoreMocks.sessions.get('session-a')!.config.modelName = 'primary';
     flowChatStoreMocks.sessions.get('session-a')!.config.reasoningPreset = 'high';
     await act(async () => flowChatStoreMocks.subscribers.forEach(callback => callback()));
-    await act(async () => modeTrigger().click());
+    await openModeMenu();
     await act(async () => modeOption('smart')!.click());
     expect(agentAPI.updateSessionModel).toHaveBeenCalledWith(expect.objectContaining({ modelName: 'primary', reasoningPreset: null }));
-    await act(async () => modeTrigger().click());
+    await openModeMenu();
     await act(async () => modeOption('pool')!.click());
     expect(agentAPI.updateSessionModel).toHaveBeenCalledTimes(1);
   });
@@ -1073,7 +1275,7 @@ describe('ModelSelector provider levels', () => {
     await openMenu();
     await openProvider('provider-acme');
 
-    expect(document.body.querySelector('[data-testid="chat-model-selector-back"]')).not.toBeNull();
+    expect(document.body.querySelector('[data-testid="chat-model-selector-back"]')).toBeNull();
     expect(providerRows()).toHaveLength(0);
     expect(modelOption('acme-fast')).not.toBeNull();
     expect(modelOption('acme-deep')).not.toBeNull();
@@ -1102,75 +1304,12 @@ describe('ModelSelector provider levels', () => {
     expect(container.querySelector('[data-testid="chat-model-selector-btn"]')?.getAttribute('aria-expanded')).toBe('true');
     expect(document.body.querySelector('[data-testid="chat-model-selector-menu"]')).toBe(card);
     expect(optionsPanel()).toBeNull();
-    expect(document.activeElement).toBe(document.body.querySelector('[data-testid="chat-model-selector-settings-provider"]'));
+    expect(document.activeElement).toBe(document.body.querySelector('[data-testid="chat-model-selector-settings-model"]'));
     await act(async () => document.body.querySelector<HTMLButtonElement>(
       '[data-testid="chat-model-selector-settings-model"]',
     )!.click());
-    await openProvider('provider-acme');
     expect(modelOption('acme-deep')?.getAttribute('aria-checked')).toBe('true');
-    expect(modelOption('umbra-main')).toBeNull();
-  });
-
-  it('marks the provider that owns the pinned model without repeating the model beneath it', async () => {
-    await renderSelector(CATALOG_MODELS, 'umbra-main');
-    await openMenu();
-
-    const selectedKeys = providerRows()
-      .filter(row => row.dataset.selected === 'true')
-      .map(row => row.dataset.providerKey);
-    expect(selectedKeys).toEqual(['provider-umbra']);
-
-    const selectedProvider = providerRows().find(
-      row => row.dataset.providerKey === 'provider-umbra',
-    );
-    expect(selectedProvider?.querySelector('[data-openbitfun-part="optionMain"]')?.textContent).toBe('Umbra');
-    expect(selectedProvider?.querySelector('[data-testid="chat-model-selector-provider-selected-check"]')).not.toBeNull();
-    expect(selectedProvider?.querySelector('[data-openbitfun-part="metadata"]')?.textContent).toBe('1');
-    expect(selectedProvider?.textContent).not.toContain('umbra-main-native');
-    const currentSelection = document.body.querySelector<HTMLElement>('[data-testid="chat-model-selector-current-selection"]');
-    expect(currentSelection?.textContent).toBe('umbra-main-native');
-    expect(currentSelection?.dataset.tooltip).toBe('Umbra');
-    expect(
-      providerRows()
-        .find(row => row.dataset.providerKey === 'provider-acme')
-        ?.querySelector('[data-testid="chat-model-selector-provider-selected-check"]'),
-    ).toBeNull();
-  });
-
-  it('returns to providers with the back control and resets to the summary on reopen', async () => {
-    await renderSelector();
-    await openMenu();
-    await openProvider('provider-acme');
-
-    await act(async () => {
-      document.body.querySelector<HTMLButtonElement>(
-        '[data-testid="chat-model-selector-back"]',
-      )?.click();
-    });
-    expect(providerRows()).toHaveLength(2);
-    expect(modelOption('acme-deep')).toBeNull();
-
-    await openProvider('provider-acme');
-    expect(modelOption('acme-deep')).not.toBeNull();
-
-    // Reopening starts at the summary; opening models restores defaults and providers.
-    await act(async () => {
-      container.querySelector<HTMLButtonElement>(
-        '[data-testid="chat-model-selector-btn"]',
-      )?.click();
-    });
-    await openSettingsMenu();
-    expect(document.body.querySelector(
-      '[data-testid="chat-model-selector-settings"]',
-    )).not.toBeNull();
-    expect(optionsPanel()).toBeNull();
-    await act(async () => document.body.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-settings-model"]',
-    )!.click());
-    expect(optionsPanel()?.dataset.panelKind).toBe('models');
-    expect(providerRows()).toHaveLength(2);
-    expect(modelOption('primary')).not.toBeNull();
-    expect(modelOption('acme-deep')).toBeNull();
+    expect(modelOption('umbra-main')).not.toBeNull();
   });
 
   it('keeps the selector visible and actionable when no model is configured', async () => {
@@ -1290,7 +1429,7 @@ describe('ModelSelector provider levels', () => {
     });
 
     await openMenu();
-    expect(providerRows()).toHaveLength(1);
+    expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(1);
     await openProvider('provider-legacy');
     expect(modelOption('legacy-chat')).not.toBeNull();
   });
@@ -1322,7 +1461,7 @@ describe('ModelSelector provider levels', () => {
     expect(container.querySelector('[data-testid="chat-model-selector-btn"]')).not.toBeNull();
 
     await openMenu();
-    expect(providerRows()).toHaveLength(2);
+    expect(document.body.querySelectorAll('[data-testid="chat-model-selector-option"]')).toHaveLength(3);
   });
 
   it('refreshes the selector after the model configuration is saved', async () => {
@@ -1374,43 +1513,7 @@ describe('ModelSelector provider levels', () => {
     });
   });
 
-  it('lets Escape step from provider models to the provider list, then the summary, then close', async () => {
-    await renderSelector();
-    await openMenu();
-    await openProvider('provider-acme');
-
-    const pressEscape = async () => {
-      await act(async () => {
-        optionsPanel()
-          ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-      });
-    };
-
-    await pressEscape();
-    expect(providerRows()).toHaveLength(2);
-
-    await pressEscape();
-    expect(optionsPanel()).toBeNull();
-    expect(document.body.querySelector(
-      '[data-testid="chat-model-selector-settings"]',
-    )).not.toBeNull();
-    const providerField = document.body.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-settings-provider"]',
-    )!;
-    expect(document.activeElement).toBe(providerField);
-    const trigger = container.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-btn"]',
-    )!;
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-
-    await act(async () => providerField.dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
-    ));
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-    expect(document.activeElement).toBe(trigger);
-  });
-
-  it('keeps the current provider view intact until the short exit finishes', async () => {
+  it('keeps the current filtered list intact until the short exit finishes', async () => {
     await renderSelector();
     await openMenu();
     await openProvider('provider-acme');
@@ -1424,7 +1527,7 @@ describe('ModelSelector provider levels', () => {
     expect(surface.getAttribute('data-open')).toBe('false');
     expect(surface.getAttribute('aria-hidden')).toBe('true');
     expect(surface.hasAttribute('inert')).toBe(true);
-    expect(surface.getAttribute('data-menu-level')).toBe('provider');
+    expect(surface.getAttribute('data-menu-level')).toBe('models');
     expect(optionsPanel()).toBe(closingOptions);
     expect(modelOption('acme-fast')).toBe(selectedProviderModel);
     act(() => vi.advanceTimersByTime(99));
@@ -1494,9 +1597,7 @@ describe('ModelSelector provider levels', () => {
     expect(document.body.querySelector('[data-testid="chat-model-selector-menu"]')).toBe(surface);
     expect(document.body.querySelectorAll('[role="menu"]')).toHaveLength(1);
 
-    await act(async () => document.body.querySelector<HTMLButtonElement>(
-      '[data-testid="chat-model-selector-summary-back"]',
-    )!.click());
+    await act(async () => optionsPanel()!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
     const reasoningRow = document.body.querySelector<HTMLButtonElement>(
       '[data-testid="chat-model-selector-settings-reasoning"]',
     )!;
@@ -1558,7 +1659,7 @@ describe('ModelSelector provider levels', () => {
     const closingOptions = optionsPanel();
     expect(closingOptions).not.toBeNull();
     await act(async () => {
-      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+      document.body.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }));
     });
     expect(optionsPanel()).toBe(closingOptions);
     expect(document.body.querySelector(
@@ -1575,9 +1676,6 @@ describe('ModelSelector provider levels', () => {
     ]);
     await openMenu();
 
-    expect(providerRows().map(row => row.dataset.providerKey))
-      .toEqual(['provider-acme', 'provider-umbra', 'legacy-model']);
-
     await openProvider('legacy-model');
     expect(modelOption('legacy-model')).not.toBeNull();
   });
diff --git a/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.scss b/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.scss
index 87d2cde860..7bbb7a1020 100644
--- a/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.scss
+++ b/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.scss
@@ -1,54 +1,14 @@
-@use 'sass:math';
-@use 'sass:list';
-
-// Distant points drift with the foreground stars, which twinkle in place.
-$reasoning-dust: ();
-@for $index from 1 through 72 {
-  $x: math.div(($index * 31 + $index * $index * 7) % 137, 137) * 100%;
-  $y: math.div(($index * 47 + $index * $index * 13) % 139, 139) * 100%;
-  $reasoning-dust: list.append($reasoning-dust,
-    radial-gradient(circle at $x $y, var(--_reasoning-star-color) 0 0.45px, transparent 1.05px), comma);
-}
-
 .openbitfun-reasoning-control {
   &__segments[data-wrap='true'] {
     display: grid;
   }
 
-  --_reasoning-control-tint-source: color-mix(in oklch, var(--openbitfun-color-link-default) 70%, var(--openbitfun-color-accent-secondary));
-  --_reasoning-control-tint: var(--_reasoning-control-tint-source);
-  --_reasoning-control-glow: color-mix(in oklch, var(--openbitfun-color-link-default) 64%, var(--openbitfun-color-content-on-dark));
-  --_reasoning-control-highlight: color-mix(in oklch, var(--_reasoning-control-glow) 76%, var(--openbitfun-color-content-on-dark));
-  --_reasoning-sky-opacity: 0.74;
-  --_reasoning-light-opacity: 0.78;
-  --_reasoning-texture-opacity: 0.14;
-  --_reasoning-cloud-width: 50%;
-  --_reasoning-cloud-height: 70%;
-  --_reasoning-cloud-depth: 0.46;
-  --_reasoning-dust-opacity: 0.16;
-  --_reasoning-star-color: var(--openbitfun-color-content-on-dark);
-
-  @supports (color: oklch(from currentColor l c h)) {
-    // Normalize chroma after mixing: the light theme's secondary accent is intentionally muted.
-    --_reasoning-control-tint: oklch(from var(--_reasoning-control-tint-source) clamp(0.66, l, 0.72) max(c, 0.18) h);
-    --_reasoning-control-glow: oklch(from var(--openbitfun-color-link-default) clamp(0.76, l, 0.82) max(c, 0.14) h);
-  }
-
-  :where([data-color-scheme='dark']) & {
-    // Atmosphere stays deep; the small luminous clouds keep their own exposure.
-    --_reasoning-sky-opacity: 0.64;
-    --_reasoning-light-opacity: 0.8;
-    --_reasoning-texture-opacity: 0.1;
-    --_reasoning-control-highlight: color-mix(in oklch, var(--_reasoning-control-glow) 58%, var(--openbitfun-color-content-on-dark));
-  }
-
   position: relative;
-  isolation: isolate;
   display: grid;
   place-items: center;
   min-inline-size: 0;
   min-block-size: calc(var(--openbitfun-space-6) + var(--openbitfun-space-1));
-  overflow: hidden;
+  overflow: visible;
   color: var(--openbitfun-color-content-secondary);
   font-family: var(--openbitfun-type-label-md-font-family);
   font-size: var(--openbitfun-type-label-md-font-size);
@@ -56,294 +16,8 @@ $reasoning-dust: ();
   line-height: var(--openbitfun-type-action-row-line-height);
   letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
 
-  &__backdrop,
-  &__sky,
-  &__field,
-  &__aurora,
-  &__stars {
-    position: absolute;
-    inset: 0;
-  }
-
-  &__sky {
-    overflow: hidden;
-    // Lift the translucent base separately from the colored cloud light.
-    background: color-mix(in srgb,
-      color-mix(in oklch, var(--_reasoning-control-tint) 12%, var(--openbitfun-color-content-on-dark)) 78%, transparent);
-    pointer-events: none;
-
-    :where([data-color-scheme='dark']) & {
-      background: color-mix(in srgb,
-        color-mix(in oklch, var(--_reasoning-control-tint) 22%, var(--openbitfun-color-surface-raised)) 74%, transparent);
-    }
-  }
-
-  &__field,
-  &__aurora,
-  &__stars {
-    // Every level covers the same sky; only the depth and luminosity change.
-    transition: opacity 180ms var(--openbitfun-motion-easing-standard);
-  }
-
-  &__stars {
-    inset: -3%;
-    opacity: 1;
-    animation: openbitfun-reasoning-starfield 12s ease-in-out -4s infinite alternate;
-    // The brightest stars stay around the text, not behind its letterforms.
-    mask-image: radial-gradient(ellipse 42% 64% at 50% 42%,
-      transparent 8%, color-mix(in srgb, var(--openbitfun-color-content-on-dark) 30%, transparent) 40%, var(--openbitfun-color-content-on-dark) 88%);
-  }
-
-  &__field {
-    opacity: var(--_reasoning-sky-opacity);
-    background:
-      radial-gradient(ellipse var(--_reasoning-cloud-width) 90% at 12% 100%, color-mix(in srgb, var(--_reasoning-control-glow) 38%, transparent), transparent 72%),
-      radial-gradient(ellipse 72% var(--_reasoning-cloud-height) at 94% 8%, color-mix(in srgb, var(--_reasoning-control-tint) 34%, transparent), transparent 76%),
-      linear-gradient(128deg,
-        color-mix(in srgb, var(--_reasoning-control-tint) 14%, transparent),
-        transparent 48%,
-        color-mix(in srgb, var(--_reasoning-control-tint) 18%, transparent));
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset: -30% -10%;
-      background:
-        radial-gradient(ellipse 32% 20% at 20% 78%, color-mix(in srgb, var(--_reasoning-control-highlight) 32%, transparent), transparent 74%),
-        radial-gradient(ellipse 30% 28% at 82% 28%, color-mix(in srgb, var(--_reasoning-control-glow) 38%, transparent), transparent 76%);
-      animation: openbitfun-reasoning-nebula 6.4s ease-in-out -2.1s infinite alternate;
-    }
-  }
-
-  &__nebula,
-  &__aurora {
-    position: absolute;
-    inset: 0;
-    inline-size: 100%;
-    block-size: 100%;
-    overflow: visible;
-  }
-
-  &__nebula {
-    color: var(--_reasoning-control-highlight);
-    opacity: var(--_reasoning-texture-opacity);
-    transform-origin: center;
-    animation: openbitfun-reasoning-cloud 8s ease-in-out -2.7s infinite alternate;
-    mask-image: radial-gradient(ellipse 46% 64% at 50% 40%,
-      color-mix(in srgb, var(--openbitfun-color-content-on-dark) 32%, transparent), var(--openbitfun-color-content-on-dark) 90%);
-  }
-
-  &__aurora {
-    // Emission is independent of atmosphere opacity; lower tiers use smaller clouds.
-    opacity: var(--_reasoning-light-opacity);
-    mask-image: radial-gradient(ellipse 42% 58% at 50% 44%,
-      transparent, var(--openbitfun-color-content-on-dark) 86%);
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      inset: -22% -18%;
-      opacity: 0.88;
-      transform-origin: center;
-      animation: openbitfun-reasoning-near-cloud 7.2s ease-in-out -2.4s infinite alternate;
-    }
-
-    &::before {
-      filter: var(--openbitfun-effect-blur-base);
-      background:
-        radial-gradient(ellipse var(--_reasoning-cloud-width) var(--_reasoning-cloud-height) at 18% 82%,
-          color-mix(in srgb, var(--_reasoning-control-glow) 64%, transparent),
-          color-mix(in srgb, var(--_reasoning-control-tint) 42%, transparent) 28%, transparent 72%);
-    }
-
-    &::after {
-      // A smaller unblurred light core gives the soft cloud a readable edge and depth.
-      background:
-        radial-gradient(ellipse 22% 14% at 80% 20%, color-mix(in srgb, var(--_reasoning-control-highlight) 44%, transparent), transparent 78%),
-        radial-gradient(ellipse var(--_reasoning-cloud-width) var(--_reasoning-cloud-height) at 86% 20%,
-          color-mix(in srgb, var(--_reasoning-control-glow) 54%, transparent),
-          color-mix(in srgb, var(--_reasoning-control-tint) 32%, transparent) 30%, transparent 70%);
-      animation-duration: 9.6s;
-      animation-delay: -5.8s;
-      animation-direction: alternate-reverse;
-    }
-  }
-
-  &__stars::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: #{$reasoning-dust};
-    opacity: var(--_reasoning-dust-opacity);
-    transition: opacity 180ms var(--openbitfun-motion-easing-standard);
-  }
-
-  &__star-slot {
-    position: absolute;
-    inline-size: 1.8px;
-    block-size: 1.8px;
-    opacity: 0;
-    transition: opacity 180ms var(--openbitfun-motion-easing-standard);
-
-    &:nth-child(-n + 12) {
-      opacity: 1;
-    }
-
-    // Slots stay mounted across levels so the same stars retain their positions.
-    @for $index from 1 through 48 {
-      &:nth-child(#{$index}) {
-        inset-inline-start: math.div(($index * 37 + $index * $index * 11) % 97, 97) * 96% + 2%;
-        inset-block-start: math.div(($index * 53 + $index * $index * 7) % 83, 83) * 80% + 10%;
-
-        .openbitfun-reasoning-control__star {
-          // Brightness phases vary; the containing starfield owns all movement.
-          animation-duration: 2.8s + ($index % 5) * 0.35s;
-          animation-delay: $index * -0.417s;
-        }
-      }
-    }
-
-    &:nth-child(3n) {
-      inline-size: 1px;
-      block-size: 1px;
-    }
-  }
-
-  &__star {
-    display: block;
-    inline-size: 100%;
-    block-size: 100%;
-    border-radius: var(--openbitfun-radius-pill);
-    background: var(--_reasoning-star-color);
-    box-shadow: 0 0 calc(var(--openbitfun-space-1) * 0.5) color-mix(in srgb, var(--_reasoning-star-color) 26%, transparent);
-    opacity: 0.86;
-    animation: openbitfun-reasoning-star 4s ease-in-out infinite;
-  }
-
-  &[data-intensity='2'] {
-    --_reasoning-control-tint-source: color-mix(in oklch, var(--openbitfun-color-link-default) 55%, var(--openbitfun-color-accent-secondary));
-    --_reasoning-cloud-width: 60%;
-    --_reasoning-cloud-height: 80%;
-    --_reasoning-cloud-depth: 0.64;
-    --_reasoning-dust-opacity: 0.24;
-
-    .openbitfun-reasoning-control__star-slot:nth-child(-n + 24) {
-      opacity: 1;
-    }
-  }
-
-  &[data-intensity='3'] {
-    --_reasoning-control-tint-source: color-mix(in oklch, var(--openbitfun-color-link-default) 40%, var(--openbitfun-color-accent-secondary));
-    --_reasoning-cloud-width: 70%;
-    --_reasoning-cloud-height: 90%;
-    --_reasoning-cloud-depth: 0.82;
-    --_reasoning-dust-opacity: 0.38;
-
-    .openbitfun-reasoning-control__star-slot:nth-child(-n + 36) {
-      opacity: 1;
-    }
-  }
-
-  &[data-intensity='4'] {
-    --_reasoning-control-tint-source: color-mix(in oklch, var(--openbitfun-color-link-default) 25%, var(--openbitfun-color-accent-secondary));
-    --_reasoning-cloud-width: 80%;
-    --_reasoning-cloud-height: 100%;
-    --_reasoning-cloud-depth: 1;
-    --_reasoning-dust-opacity: 0.56;
-
-    .openbitfun-reasoning-control__star-slot {
-      opacity: 1;
-    }
-  }
-
-  &[data-reasoning-state='manual']:is([data-intensity='3'], [data-intensity='4']) {
-    .openbitfun-reasoning-control__star-slot:nth-child(12n) {
-      inline-size: 2.2px;
-      block-size: 2.2px;
-    }
-  }
-
-  &[data-reasoning-state='off'] {
-    --_reasoning-control-tint-source: color-mix(in oklch, var(--openbitfun-color-link-default) 64%, var(--openbitfun-color-accent-secondary));
-    --_reasoning-control-glow: color-mix(in oklch, var(--openbitfun-color-link-default) 66%, var(--openbitfun-color-content-on-dark));
-    --_reasoning-light-opacity: 0.58;
-    --_reasoning-texture-opacity: 0.12;
-    --_reasoning-cloud-width: 74%;
-    --_reasoning-cloud-height: 84%;
-    --_reasoning-cloud-depth: 0.74;
-
-    .openbitfun-reasoning-control__field {
-      // An authored silver-blue cloud composition remains when all stars are absent.
-      background:
-        radial-gradient(ellipse 90% 100% at 12% 12%, color-mix(in srgb, var(--_reasoning-control-glow) 28%, transparent), transparent 76%),
-        radial-gradient(ellipse 90% 86% at 78% 86%, color-mix(in srgb, var(--_reasoning-control-tint) 26%, transparent), transparent 82%),
-        linear-gradient(120deg, color-mix(in srgb, var(--_reasoning-control-glow) 16%, transparent), transparent 70%);
-
-      &::after {
-        background:
-          radial-gradient(ellipse 68% 60% at 8% 80%, color-mix(in srgb, var(--_reasoning-control-highlight) 36%, transparent), transparent 78%),
-          radial-gradient(ellipse 54% 48% at 88% 24%, color-mix(in srgb, var(--_reasoning-control-glow) 30%, transparent), transparent 80%);
-      }
-    }
-  }
-
-  &[data-reasoning-state='auto'] {
-    --_reasoning-control-tint-source: color-mix(in oklch, var(--openbitfun-color-link-default) 60%, var(--openbitfun-color-accent-secondary));
-    --_reasoning-light-opacity: 0.68;
-    --_reasoning-cloud-width: 62%;
-    --_reasoning-cloud-height: 88%;
-    --_reasoning-cloud-depth: 0.6;
-    --_reasoning-dust-opacity: 0.18;
-
-    .openbitfun-reasoning-control__field {
-      background:
-        radial-gradient(ellipse 48% 96% at 20% 50%, color-mix(in srgb, var(--_reasoning-control-glow) 28%, transparent), transparent 80%),
-        radial-gradient(ellipse 48% 96% at 80% 50%, color-mix(in srgb, var(--_reasoning-control-tint) 28%, transparent), transparent 80%),
-        linear-gradient(180deg, transparent, color-mix(in srgb, var(--_reasoning-control-tint) 16%, transparent));
-
-      &::after {
-        background:
-          radial-gradient(ellipse 30% 40% at 28% 42%, color-mix(in srgb, var(--_reasoning-control-highlight) 26%, transparent), transparent 80%),
-          radial-gradient(ellipse 30% 40% at 72% 42%, color-mix(in srgb, var(--_reasoning-control-highlight) 26%, transparent), transparent 80%);
-      }
-    }
-
-    .openbitfun-reasoning-control__aurora::before,
-    .openbitfun-reasoning-control__aurora::after {
-      filter: none;
-      animation: openbitfun-reasoning-balance 6s ease-in-out infinite alternate;
-    }
-
-    .openbitfun-reasoning-control__aurora::before {
-      background:
-        radial-gradient(ellipse 28% 24% at 24% 48%, color-mix(in srgb, var(--_reasoning-control-highlight) 24%, transparent), transparent 78%),
-        radial-gradient(ellipse var(--_reasoning-cloud-width) var(--_reasoning-cloud-height) at 24% 50%,
-          color-mix(in srgb, var(--_reasoning-control-glow) 48%, transparent),
-          color-mix(in srgb, var(--_reasoning-control-tint) 24%, transparent) 38%, transparent 78%);
-    }
-
-    .openbitfun-reasoning-control__aurora::after {
-      background:
-        radial-gradient(ellipse 28% 24% at 76% 48%, color-mix(in srgb, var(--_reasoning-control-highlight) 24%, transparent), transparent 78%),
-        radial-gradient(ellipse var(--_reasoning-cloud-width) var(--_reasoning-cloud-height) at 76% 50%,
-          color-mix(in srgb, var(--_reasoning-control-glow) 48%, transparent),
-          color-mix(in srgb, var(--_reasoning-control-tint) 24%, transparent) 38%, transparent 78%);
-      animation-delay: -6s;
-    }
-
-    .openbitfun-reasoning-control__star-slot {
-      opacity: 0;
-
-      &:nth-child(-n + 18) {
-        opacity: 0.82;
-      }
-    }
-  }
-
   &__value {
     position: relative;
-    z-index: 1;
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     align-items: center;
@@ -398,10 +72,6 @@ $reasoning-dust: ();
     }
   }
 
-  &__backdrop {
-    pointer-events: none;
-  }
-
   &__trigger {
     inline-size: max-content;
     max-inline-size: 100%;
@@ -452,7 +122,7 @@ $reasoning-dust: ();
 
       &[aria-pressed='true'] {
         color: var(--openbitfun-color-content-primary);
-        background: color-mix(in srgb, var(--_reasoning-control-tint) 14%, transparent);
+        background: var(--openbitfun-color-action-neutral-surface-hover);
       }
 
       &:disabled {
@@ -461,39 +131,58 @@ $reasoning-dust: ();
 
       &:is(:hover, :focus-visible):not(:disabled) {
         color: var(--openbitfun-color-content-primary);
-        background: color-mix(in srgb, var(--_reasoning-control-tint) calc(12% + var(--_reasoning-cloud-depth) * 18%), var(--openbitfun-color-surface-panel));
+        background: var(--openbitfun-color-action-neutral-surface-hover);
       }
     }
   }
 
-  &[data-disabled='true'] &__star,
-  &[data-disabled='true'] &__stars,
-  &[data-disabled='true'] &__field::after,
-  &[data-disabled='true'] &__nebula,
-  &[data-disabled='true'] &__aurora::before,
-  &[data-disabled='true'] &__aurora::after {
-    animation-play-state: paused;
-  }
+  &[data-presentation='settings-row'] {
+    inline-size: 100%;
+    color: var(--openbitfun-color-content-primary);
 
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
+    .openbitfun-reasoning-control__value,
+    .openbitfun-reasoning-control__trigger {
+      min-block-size: var(--openbitfun-control-height-md);
+    }
+
+    .openbitfun-reasoning-control__trigger {
+      inline-size: 100%;
+      padding-inline: var(--openbitfun-space-3);
+
+      [data-openbitfun-part='trigger'],
+      [data-openbitfun-part='label'] {
+        text-align: start;
+        justify-content: flex-start;
+      }
 
-    &[data-reasoning-state='auto'] &__aurora::before,
-    &[data-reasoning-state='auto'] &__aurora::after,
-    &__star,
-    &__stars,
-    &__field::after,
-    &__nebula,
-    &__aurora::before,
-    &__aurora::after {
-      animation: none;
+      [data-openbitfun-part='label'] {
+        flex: 1 1 auto;
+        inline-size: auto;
+        min-inline-size: 0;
+      }
+
+      [data-openbitfun-part='label'],
+      [data-openbitfun-part='metadata'] {
+        font-family: var(--openbitfun-type-label-md-font-family);
+        font-size: var(--openbitfun-type-label-md-font-size);
+        font-weight: var(--openbitfun-type-label-md-font-weight);
+        line-height: var(--openbitfun-type-action-row-line-height);
+        letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
+      }
+
+      [data-openbitfun-part='metadata'] {
+        max-inline-size: 60%;
+        min-inline-size: 0;
+        color: var(--openbitfun-color-content-secondary);
+      }
+
+      [data-openbitfun-part='shortcut'] {
+        color: var(--openbitfun-color-content-muted);
+      }
     }
+  }
 
-    &__field,
-    &__aurora,
-    &__stars,
-    &__stars::before,
-    &__star-slot,
+  @media (prefers-reduced-motion: reduce) {
     &__summary,
     &__options,
     &__options-content {
@@ -504,87 +193,5 @@ $reasoning-dust: ();
   @media (forced-colors: active) {
     color: CanvasText;
     background: Canvas;
-
-    &__backdrop {
-      display: none;
-    }
-  }
-}
-
-@keyframes openbitfun-reasoning-nebula {
-  from {
-    transform: translate3d(-6%, 4%, 0) scale(1.06);
-    opacity: 0.55;
-  }
-
-  to {
-    transform: translate3d(6%, -4%, 0) scale(1.12);
-    opacity: 0.9;
-  }
-}
-
-@keyframes openbitfun-reasoning-cloud {
-  from {
-    transform: translate3d(-8%, 5%, 0) scale(1.3);
-    opacity: calc(var(--_reasoning-texture-opacity) * 0.85);
-  }
-
-  to {
-    transform: translate3d(8%, -5%, 0) scale(1.3);
-    opacity: var(--_reasoning-texture-opacity);
-  }
-}
-
-@keyframes openbitfun-reasoning-near-cloud {
-  from {
-    transform: translate3d(-8%, 5%, 0) scale(1.06);
-    opacity: 0.78;
-  }
-
-  to {
-    transform: translate3d(8%, -5%, 0) scale(1.1);
-    opacity: 0.98;
-  }
-}
-
-@keyframes openbitfun-reasoning-balance {
-  from {
-    transform: translate3d(-6%, 3%, 0) scale(1.06);
-    opacity: 0.66;
-  }
-
-  to {
-    transform: translate3d(6%, -3%, 0) scale(1.06);
-    opacity: 0.9;
-  }
-}
-
-@keyframes openbitfun-reasoning-starfield {
-  from {
-    transform: translate3d(-6px, 2px, 0);
-  }
-
-  to {
-    transform: translate3d(6px, -2px, 0);
-  }
-}
-
-@keyframes openbitfun-reasoning-star {
-  0%,
-  100% {
-    opacity: 0.28;
-  }
-
-  20%,
-  32% {
-    opacity: 1;
-  }
-
-  58% {
-    opacity: 0.38;
-  }
-
-  78% {
-    opacity: 0.78;
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.test.tsx b/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.test.tsx
index 411e8db498..693079aeab 100644
--- a/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.test.tsx
@@ -65,14 +65,17 @@ describe('ReasoningIntensityControl', () => {
     container.remove();
   });
 
-  it('leaves the entire background non-interactive and expands only advertised choices in place', async () => {
+  it('omits the decorative background and expands only advertised choices in place', async () => {
     await render([preset('medium'), preset('xhigh')]);
     expect(container.querySelector('input[type="range"]')).toBeNull();
-    const sky = container.querySelector<HTMLElement>('[data-openbitfun-part="reasoningSliderSky"]')!;
+    expect(container.querySelector('.openbitfun-reasoning-control__backdrop')).toBeNull();
+    for (const part of ['reasoningSliderSky', 'reasoningSliderNebula', 'reasoningSliderAurora']) {
+      expect(container.querySelector(`[data-openbitfun-part="${part}"]`)?.closest('[hidden]')).not.toBeNull();
+    }
     await act(async () => {
-      sky.dispatchEvent(new Event('pointerdown', { bubbles: true }));
-      sky.dispatchEvent(new Event('pointerup', { bubbles: true }));
-      sky.click();
+      control().dispatchEvent(new Event('pointerdown', { bubbles: true }));
+      control().dispatchEvent(new Event('pointerup', { bubbles: true }));
+      control().click();
     });
     expect(onSelect).not.toHaveBeenCalled();
     await expand();
@@ -117,48 +120,39 @@ describe('ReasoningIntensityControl', () => {
     expect(document.activeElement).toBe(trigger());
   });
 
-  it('previews the hovered level without selecting it and restores the saved sky on leave', async () => {
+  it('keeps the saved selection while hovering other levels', async () => {
     await render();
     await expand();
     await hover('preset:xhigh');
-    expect(control().dataset.intensity).toBe('4');
     expect(option('preset:medium').getAttribute('aria-pressed')).toBe('true');
     expect(option('preset:xhigh').getAttribute('aria-pressed')).toBe('false');
     await hover('preset:off');
-    expect(control().dataset.reasoningState).toBe('off');
-    expect(control().querySelector('.openbitfun-reasoning-control__nebula')).not.toBeNull();
-    expect(control().querySelector('.openbitfun-reasoning-control__stars')).toBeNull();
     await hover('auto');
-    expect(control().dataset.reasoningState).toBe('auto');
-    expect(control().querySelector('.openbitfun-reasoning-control__stars')).not.toBeNull();
     await act(async () => option('auto').dispatchEvent(new MouseEvent('pointerout', {
       bubbles: true, relatedTarget: container,
     })));
-    expect(control().dataset.reasoningState).toBe('manual');
-    expect(control().dataset.intensity).toBe('2');
+    expect(option('preset:medium').getAttribute('aria-pressed')).toBe('true');
+    expect(container.querySelector('.openbitfun-reasoning-control__backdrop')).toBeNull();
     expect(onSelect).not.toHaveBeenCalled();
   });
 
-  it('retains nebula without stars for a saved Off choice, including provider toggle aliases', async () => {
+  it('shows a saved Off choice through provider toggle aliases', async () => {
     const off = { ...preset('off'), id: 'effort-off' };
     await render([off, preset('on')], 'effort-off');
-    expect(control().dataset.reasoningState).toBe('off');
-    expect(control().querySelector('.openbitfun-reasoning-control__field')).not.toBeNull();
-    expect(control().querySelector('.openbitfun-reasoning-control__nebula')).not.toBeNull();
-    expect(control().querySelector('.openbitfun-reasoning-control__stars')).toBeNull();
+    expect(trigger().textContent).toContain('reasoningSelector.levels.off');
+    await expand();
+    expect(option('preset:effort-off').getAttribute('aria-pressed')).toBe('true');
     expect(onSelect).not.toHaveBeenCalled();
   });
 
-  it('omits unsupported levels and reserves the peak for the highest available choice', async () => {
+  it('omits unsupported levels and focuses the highest available choice with End', async () => {
     await render([preset('medium'), preset('high')]);
     await expand();
     expect(option('unavailable:xhigh')).toBeUndefined();
     expect(option('preset:xhigh')).toBeUndefined();
     expect(option('preset:off')).toBeUndefined();
-    expect(control().dataset.intensity).toBe('1');
     await key('End');
     expect(document.activeElement).toBe(option('preset:high'));
-    expect(control().dataset.intensity).toBe('4');
     expect(onSelect).not.toHaveBeenCalled();
     expect(choices()).not.toBeNull();
   });
@@ -169,8 +163,7 @@ describe('ReasoningIntensityControl', () => {
     await expand();
     expect(option('unavailable:xhigh')).toBeUndefined();
     expect(option('preset:effort-xhigh').disabled).toBe(false);
-    await hover('preset:max');
-    expect(control().dataset.intensity).toBe('4');
+    expect(option('preset:max').disabled).toBe(false);
     await choose('preset:effort-xhigh');
     expect(onSelect).toHaveBeenCalledExactlyOnceWith('effort-xhigh');
     await render([preset('medium'), preset('max')]);
@@ -201,15 +194,12 @@ describe('ReasoningIntensityControl', () => {
     await expand();
     await key('ArrowRight');
     expect(document.activeElement).toBe(option('preset:xhigh'));
-    expect(control().dataset.intensity).toBe('4');
     await key('Home');
     expect(document.activeElement).toBe(option('auto'));
-    expect(control().dataset.reasoningState).toBe('auto');
     expect(onSelect).not.toHaveBeenCalled();
     await key('Escape');
     expect(choices()).toBeNull();
     expect(document.activeElement).toBe(trigger());
-    expect(control().dataset.intensity).toBe('1');
   });
 
   it('folds enable into Auto for toggle-only models and preserves the enable request', async () => {
@@ -251,7 +241,7 @@ describe('ReasoningIntensityControl', () => {
     expect(onSelect).not.toHaveBeenCalled();
   });
 
-  it('keeps five real effort choices and reserves the fourth material for Maximum', async () => {
+  it('keeps all five real effort choices distinct', async () => {
     await render(['low', 'medium', 'high', 'xhigh', 'max'].map(preset), 'medium');
     await expand();
     expect(Array.from(choices()!.querySelectorAll('button')).map(button => button.dataset.openbitfunValue))
@@ -259,12 +249,6 @@ describe('ReasoningIntensityControl', () => {
     expect(choices()!.querySelectorAll('[aria-pressed="true"]')).toHaveLength(1);
     expect(option('preset:medium').getAttribute('aria-pressed')).toBe('true');
     expect(option('auto').getAttribute('aria-pressed')).toBe('false');
-    await hover('preset:high');
-    expect(control().dataset.intensity).toBe('3');
-    await hover('preset:xhigh');
-    expect(control().dataset.intensity).toBe('3');
-    await hover('preset:max');
-    expect(control().dataset.intensity).toBe('4');
     await choose('preset:xhigh');
     expect(onSelect).toHaveBeenCalledExactlyOnceWith('xhigh');
   });
diff --git a/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.tsx b/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.tsx
index e8f5a6e789..91b2f31dd6 100644
--- a/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.tsx
+++ b/src/web-ui/src/flow_chat/components/ReasoningIntensityControl.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
-import { MenuItem, SegmentedControl } from '@openbitfun/ui';
+import { Icon, MenuItem, OverflowText, SegmentedControl } from '@openbitfun/ui';
 import { FlowChatCollapse } from '@openbitfun/ui/flow-chat';
 import { useI18n } from '@/infrastructure/i18n';
 import type { ReasoningPresetDescriptor } from '@/infrastructure/config/types';
-import { isAutomaticReasoningPreset, presetDisplayLabel, presetSemanticKey, reasoningAutomaticValue, reasoningPresetChoices, reasoningSelectionLabel, reasoningVisualTier, resolveReasoningPresetChoice } from './reasoningPresetPresentation';
+import { isAutomaticReasoningPreset, presetDisplayLabel, reasoningAutomaticValue, reasoningPresetChoices, reasoningSelectionLabel, resolveReasoningPresetChoice } from './reasoningPresetPresentation';
 import './ReasoningIntensityControl.scss';
 
 interface ReasoningIntensityControlProps {
@@ -12,6 +12,7 @@ interface ReasoningIntensityControlProps {
   allowDefaultReset?: boolean;
   active?: boolean;
   disabled?: boolean;
+  presentation?: 'compact' | 'settings-row';
   onSelect: (presetId: string | null) => boolean | Promise<boolean>;
 }
 
@@ -21,7 +22,6 @@ interface ReasoningChoice {
   label: string;
 }
 
-const stars = Array.from({ length: 48 }, (_, index) => index);
 const reasoningTransitionMs = 180;
 
 export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps> = ({
@@ -30,13 +30,12 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
   allowDefaultReset = true,
   active = true,
   disabled = false,
+  presentation = 'compact',
   onSelect,
 }) => {
   const { t } = useI18n('flow-chat');
-  const skyId = useId();
   const choicesId = useId();
   const [expanded, setExpanded] = useState(false);
-  const [previewValue, setPreviewValue] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
   const [focusRevision, setFocusRevision] = useState(0);
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -62,15 +61,6 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
   const automaticChoices: ReasoningChoice[] = automaticValue !== undefined
     ? [{ value: 'auto', presetId: automaticValue, label: t('reasoningSelector.auto') }] : [];
   const choices: ReasoningChoice[] = [...automaticChoices, ...presetChoices];
-  const previewChoice = expanded ? choices.find(choice => choice.value === previewValue) : undefined;
-  const visualPreset = previewChoice
-    ? presets.find(preset => preset.id === previewChoice.presetId)
-    : selectedChoice;
-  const visualMeaning = visualPreset && presetSemanticKey(visualPreset);
-  const visualState = visualMeaning === 'off' ? 'off'
-    : visualPreset && isAutomaticReasoningPreset(visualPreset) ? 'auto'
-      : visualPreset ? 'manual' : 'auto';
-  const visualTier = reasoningVisualTier(visualPreset, presets);
   const locked = disabled || pending || !active;
 
   useEffect(() => {
@@ -81,7 +71,6 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
   useEffect(() => {
     if (active) return;
     restoreFocusRef.current = false;
-    setPreviewValue(null);
     setExpanded(false);
   }, [active]);
 
@@ -102,16 +91,9 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
 
   const collapse = () => {
     restoreFocusRef.current = activeRef.current;
-    setPreviewValue(null);
     setExpanded(false);
   };
 
-  const previewTarget = (target: EventTarget) => {
-    if (!expanded || locked || !(target instanceof Element)) return;
-    const button = target.closest<HTMLButtonElement>('button[data-openbitfun-value]');
-    if (button && !button.disabled) setPreviewValue(button.dataset.openbitfunValue ?? null);
-  };
-
   const select = async (value: string) => {
     const choice = choices.find(item => item.value === value);
     if (!expanded || locked || pendingRef.current || !choice) return;
@@ -160,9 +142,9 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
       data-testid="chat-model-selector-intensity-control"
       data-openbitfun-component="model-selector"
       data-openbitfun-part="reasoningSlider"
-      data-reasoning-state={visualState}
-      data-intensity={visualTier}
       data-expanded={expanded ? 'true' : 'false'}
+      data-presentation={presentation}
+      data-reasoning-mode={selectedValue === 'auto' ? 'auto' : 'manual'}
       data-disabled={locked ? 'true' : undefined}
     >
       <div
@@ -182,6 +164,8 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
             aria-label={`${t('reasoningSelector.title')}: ${label}`}
             aria-expanded={expanded}
             aria-controls={choicesId}
+            metadata={presentation === 'settings-row' ? <OverflowText>{label}</OverflowText> : undefined}
+            shortcut={presentation === 'settings-row' ? <Icon name="chevron-right" size="sm" aria-hidden /> : undefined}
             disabled={locked || expanded || choices.length === 0}
             onClick={() => setExpanded(true)}
             onKeyDown={event => {
@@ -191,7 +175,8 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
               if (!locked && choices.length > 0) setExpanded(true);
             }}
           >
-            {t('reasoningSelector.thinking')}{' · '}{label}
+            {presentation === 'settings-row'
+              ? t('modelSelector.home.effort') : <>{t('reasoningSelector.thinking')}{' · '}{label}</>}
           </MenuItem>
         </div>
         <FlowChatCollapse
@@ -209,12 +194,6 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
             data-openbitfun-part="reasoningSliderInput"
             aria-busy={pending || undefined}
             onKeyDown={handleChoiceKeyDown}
-            onPointerOver={event => previewTarget(event.target)}
-            onPointerLeave={() => setPreviewValue(null)}
-            onFocus={event => previewTarget(event.target)}
-            onBlur={event => {
-              if (!event.currentTarget.contains(event.relatedTarget)) setPreviewValue(null);
-            }}
           >
             <SegmentedControl
               className="openbitfun-reasoning-control__segments"
@@ -234,50 +213,12 @@ export const ReasoningIntensityControl: React.FC<ReasoningIntensityControlProps>
           </div>
         </FlowChatCollapse>
       </div>
-      <div className="openbitfun-reasoning-control__backdrop" aria-hidden="true">
-        <span
-          className="openbitfun-reasoning-control__sky"
-          data-openbitfun-component="model-selector"
-          data-openbitfun-part="reasoningSliderSky"
-        >
-          <span className="openbitfun-reasoning-control__field">
-            <svg
-              className="openbitfun-reasoning-control__nebula"
-              data-openbitfun-component="model-selector"
-              data-openbitfun-part="reasoningSliderNebula"
-              viewBox="0 0 280 56"
-              preserveAspectRatio="none"
-              focusable="false"
-            >
-              <defs>
-                <filter id={`${skyId}-cloud`} x="0" y="0" width="100%" height="100%">
-                  <feTurbulence type="fractalNoise" baseFrequency="0.035 0.09" numOctaves="3" seed="8" result="noise" />
-                  <feColorMatrix
-                    in="noise"
-                    type="matrix"
-                    values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2.8 0 0 0 -0.9"
-                    result="cloud"
-                  />
-                  <feComposite in="SourceGraphic" in2="cloud" operator="in" />
-                </filter>
-              </defs>
-              <rect width="280" height="56" fill="currentColor" filter={`url(#${skyId}-cloud)`} />
-            </svg>
-          </span>
-          <span
-            className="openbitfun-reasoning-control__aurora"
-            data-openbitfun-component="model-selector"
-            data-openbitfun-part="reasoningSliderAurora"
-          />
-          {visualState !== 'off' && <span className="openbitfun-reasoning-control__stars">
-            {stars.map(index => (
-              <span key={index} className="openbitfun-reasoning-control__star-slot">
-                <span className="openbitfun-reasoning-control__star" />
-              </span>
-            ))}
-          </span>}
-        </span>
-      </div>
+      {/* Keep existing skin part IDs valid without rendering decorative layers. */}
+      <span hidden aria-hidden="true">
+        <span data-openbitfun-component="model-selector" data-openbitfun-part="reasoningSliderSky" />
+        <span data-openbitfun-component="model-selector" data-openbitfun-part="reasoningSliderNebula" />
+        <span data-openbitfun-component="model-selector" data-openbitfun-part="reasoningSliderAurora" />
+      </span>
     </div>
   );
 };
diff --git a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
index 98e51968fa..99fbbb318b 100644
--- a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
+++ b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
@@ -1,5 +1,6 @@
 import { computerUseControlAppearanceDescriptor } from '@/app/components/ComputerUseControlCard.appearance';
 import { splitViewAppearanceDescriptor } from '@/infrastructure/design-system/SplitView.appearance';
+import { setupWizardAppearanceDescriptor } from '@/infrastructure/design-system/SetupWizard.appearance';
 import { confirmDialogAppearanceDescriptor } from '@/infrastructure/confirm-dialog';
 import { inputDialogAppearanceDescriptor } from '@/app/components/InputDialog/appearance';
 import { windowControlsAppearanceDescriptor } from '@/app/components/WindowControls/appearance';
@@ -258,6 +259,7 @@ import { AppearanceRegistry } from './AppearanceRegistry';
 export function createDefaultAppearanceRegistry(): AppearanceRegistry {
   return new AppearanceRegistry()
     .registerComponent(splitViewAppearanceDescriptor)
+    .registerComponent(setupWizardAppearanceDescriptor)
     .registerComponent(confirmDialogAppearanceDescriptor)
     .registerComponent(inputDialogAppearanceDescriptor)
     .registerComponent(windowControlsAppearanceDescriptor)
diff --git a/src/web-ui/src/infrastructure/design-system/SetupWizard.appearance.ts b/src/web-ui/src/infrastructure/design-system/SetupWizard.appearance.ts
new file mode 100644
index 0000000000..f2669d5466
--- /dev/null
+++ b/src/web-ui/src/infrastructure/design-system/SetupWizard.appearance.ts
@@ -0,0 +1,14 @@
+import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance/types';
+
+export const setupWizardAppearanceDescriptor: AppearanceSurfaceDescriptor = {
+  id: 'setup-wizard',
+  parts: [
+    { id: 'root', propertyProfile: 'layout' },
+    { id: 'layout', propertyProfile: 'layout' },
+    { id: 'header' }, { id: 'heading' }, { id: 'title' }, { id: 'headerActions' },
+    { id: 'guide' }, { id: 'guideCopy' }, { id: 'progress' }, { id: 'step' },
+    { id: 'content', propertyProfile: 'layout' },
+    { id: 'contentInner', propertyProfile: 'layout' },
+    { id: 'footer' },
+  ],
+};
diff --git a/src/web-ui/src/infrastructure/design-system/SetupWizardIntegration.test.tsx b/src/web-ui/src/infrastructure/design-system/SetupWizardIntegration.test.tsx
new file mode 100644
index 0000000000..a7f78b375b
--- /dev/null
+++ b/src/web-ui/src/infrastructure/design-system/SetupWizardIntegration.test.tsx
@@ -0,0 +1,83 @@
+/** @vitest-environment jsdom */
+import React, { act, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Button, Dialog, SetupWizard } from '@openbitfun/ui';
+
+let container: HTMLDivElement;
+let root: Root;
+beforeEach(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => { act(() => root.unmount()); container.remove(); });
+
+describe('SetupWizard public contract', () => {
+  it('resets scroll only when step identity changes, preserving the editor and its focus', () => {
+    const render = (id: string, description = 'Applies to future runs.') => act(() => root.render(
+      <SetupWizard title="Configure" guideLabel="Guidance" contentMode={id === 'rules' ? 'contained' : 'scroll'}
+        step={{ id, title: 'Execution scope', description, label: id, progress: '2 / 5' }} footer={<Button>Save</Button>}>
+        <textarea defaultValue="An unsaved draft" />
+      </SetupWizard>,
+    ));
+    render('basics');
+    const viewport = container.querySelector<HTMLElement>('[data-openbitfun-component="setup-wizard"][data-openbitfun-part="content"]')!;
+    const editor = container.querySelector('textarea')!;
+    act(() => editor.focus());
+    viewport.scrollTop = 120;
+    render('basics', 'Updated explanation');
+    expect(viewport.scrollTop).toBe(120);
+    render('rules');
+    expect(viewport.scrollTop).toBe(0);
+    expect(container.querySelector('textarea')).toBe(editor);
+    expect(editor.value).toBe('An unsaved draft');
+    expect(document.activeElement).toBe(editor);
+    expect(container.querySelectorAll('[aria-current="step"]')).toHaveLength(1);
+    expect(container.querySelector('[data-content-mode]')?.getAttribute('data-content-mode')).toBe('contained');
+  });
+
+  it('leaves validation and controlled advancement to the host while footer submission reaches the form', () => {
+    const save = vi.fn();
+    function Example() {
+      const [step, setStep] = useState(0);
+      const [error, setError] = useState(false);
+      return <SetupWizard title="Configure" guideLabel="Guidance" step={{ id: String(step), title: 'Scope', description: 'Choose a scope.', label: `Stage ${step + 1}`, progress: `${step + 1} / 4` }}
+        footer={<Button type="submit" form="configuration">Continue</Button>}>
+        <form id="configuration" onSubmit={event => {
+          event.preventDefault();
+          if (!(event.currentTarget.elements.namedItem('name') as HTMLInputElement).value) { setError(true); return; }
+          if (step === 0) { setStep(1); setError(false); } else save();
+        }}>
+          <input name="name" aria-label="Name" />
+          {error && <p role="alert">Enter a name</p>}
+        </form>
+      </SetupWizard>;
+    }
+    act(() => root.render(<Example />));
+    const next = container.querySelector('button')!;
+    act(() => next.click());
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe('Enter a name');
+    expect(container.textContent).toContain('Stage 1');
+    container.querySelector('input')!.value = 'Research';
+    act(() => next.click());
+    expect(container.textContent).toContain('Stage 2');
+    expect(container.querySelector('input')!.value).toBe('Research');
+    expect(save).not.toHaveBeenCalled();
+    act(() => next.click());
+    expect(save).toHaveBeenCalledOnce();
+  });
+
+  it('connects a containing dialog to its visible heading', () => {
+    act(() => root.render(<Dialog open onOpenChange={() => {}} aria-labelledby="setup-title">
+      <SetupWizard titleId="setup-title" title="Configure workflow" guideLabel="Guidance"
+        step={{ id: 'rules', title: 'Consistent output', description: 'Shared rules.', label: 'Rules', progress: '1 / 1' }} footer={<Button>Save</Button>}>
+        <textarea aria-label="Rules" />
+      </SetupWizard>
+    </Dialog>));
+    const dialog = document.querySelector('[role="dialog"]')!;
+    expect(document.getElementById(dialog.getAttribute('aria-labelledby')!)?.textContent).toBe('Configure workflow');
+    expect(dialog.querySelectorAll('[aria-live="polite"]')).toHaveLength(1);
+  });
+});
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 0eb9fd943c..d6db059fa2 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -3325,6 +3325,22 @@
     "projectCowork": "working in the project."
   },
   "modelSelector": {
+    "home": {
+      "context": "Context",
+      "effort": "Effort",
+      "unknownContext": "Unknown",
+      "contextReadOnly": "The context window is managed by the execution target",
+      "editContext": "Edit context window",
+      "contextTokens": "Context window (tokens)",
+      "saveContext": "Save context window",
+      "contextInvalid": "Enter a whole number between {{min}} and {{max}} tokens",
+      "contextSaveFailed": "Could not save. Please try again.",
+      "availablePoolModels": "Available pool models",
+      "mode": "Mode",
+      "currentModel": "Current model",
+      "poolConnections": "Battery connections",
+      "modelPool": "Model pool"
+    },
     "modes": {
       "selection": "Select mode",
       "manual": "Manual selection",
@@ -3339,6 +3355,12 @@
     "modelExplanation": "Model explanation",
     "modelSettings": "Model settings",
     "modelSelection": "Select Model",
+    "searchModels": "Search models",
+    "collapseSearch": "Collapse search",
+    "searchPlaceholder": "Search models or providers",
+    "noSearchResults": "No matching models or providers",
+    "filterProvider": "Filter models by provider",
+    "allProviders": "All providers",
     "primaryModel": "Primary Model",
     "primaryModelDesc": "Uses the configured primary model",
     "fastModel": "Fast Model",
diff --git a/src/web-ui/src/locales/en-US/scenes/agents.json b/src/web-ui/src/locales/en-US/scenes/agents.json
index 6ace3a57c1..2a32517100 100644
--- a/src/web-ui/src/locales/en-US/scenes/agents.json
+++ b/src/web-ui/src/locales/en-US/scenes/agents.json
@@ -282,8 +282,24 @@
     "deleteSuccess": "Deleted \"{{name}}\"",
     "deleteFailed": "Delete failed: ",
     "form": {
+      "wizard": {
+        "navigation": "Creation steps",
+        "progress": "{{current}} / {{total}}",
+        "next": "Next",
+        "back": "Back",
+        "basicsTitle": "Define how it collaborates",
+        "basicsDescription": "You assign work directly to agents; other agents delegate tasks to subagents. User-level agents work across projects, while project-level agents apply only to the current project.",
+        "promptTitle": "Set consistent working rules",
+        "promptDescription": "These instructions guide every task. Clear decision criteria and completion conditions help keep its approach and results consistent.",
+        "toolsTitle": "Set its action boundaries",
+        "toolsDescription": "Tools determine the actions it can perform. Enable only the capabilities needed for its tasks; tool calls remain subject to the current permission policy.",
+        "loadingTools": "Loading available tools…",
+        "toolsLoadFailed": "Could not load tools from the current device. Please retry.",
+        "retry": "Retry",
+        "noTools": "No selectable tools are available. The default tool configuration will be used."
+      },
       "createThroughChatHint": "You can also describe what you need in a conversation and ask an Agent to create a custom Agent for you.",
-      "title": "Create Custom Agent",
+      "title": "Create agent",
       "subtitle": "Create an Agent or SubAgent with its own prompt, tools, and runtime context policy.",
       "titleEdit": "Edit Custom Agent",
       "subtitleEdit": "Change display name, description, system prompt, tools, and runtime context policy.",
@@ -309,7 +325,7 @@
       "descPlaceholder": "Briefly describe what this agent does",
       "descRequired": "Description is required",
       "prompt": "System Prompt",
-      "promptPlaceholder": "Enter the system prompt that defines this agent's behavior...\n\nSupported placeholders\n{PERSONA}: SOUL.md/USER.md/IDENTITY.md\n{LANGUAGE_PREFERENCE}: Language preference\n{FILE_REFERENCES}: File and image reference guidance",
+      "promptPlaceholder": "Enter the agent's system prompt",
       "promptRequired": "System prompt is required",
       "readonly": "Readonly mode",
       "model": "Model",
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index fa50f84504..ea5e6a4471 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -3325,6 +3325,22 @@
     "projectCowork": "项目里工作。"
   },
   "modelSelector": {
+    "home": {
+      "context": "上下文",
+      "effort": "思考强度",
+      "unknownContext": "未提供",
+      "contextReadOnly": "上下文窗口由执行端管理",
+      "editContext": "编辑上下文窗口",
+      "contextTokens": "上下文窗口（Token 数）",
+      "saveContext": "保存上下文窗口",
+      "contextInvalid": "请输入 {{min}} 到 {{max}} 之间的整数 Token 数",
+      "contextSaveFailed": "保存失败，请重试。",
+      "availablePoolModels": "模型池可用模型",
+      "mode": "模式",
+      "currentModel": "当前使用模型",
+      "poolConnections": "电池接入列表",
+      "modelPool": "模型池列表"
+    },
     "modes": {
       "selection": "选择模式",
       "manual": "手动指定",
@@ -3339,6 +3355,12 @@
     "modelExplanation": "模型说明",
     "modelSettings": "模型设置",
     "modelSelection": "选择模型",
+    "searchModels": "搜索模型",
+    "collapseSearch": "收起搜索",
+    "searchPlaceholder": "搜索模型或供应商",
+    "noSearchResults": "没有匹配的模型或供应商",
+    "filterProvider": "按服务商筛选模型",
+    "allProviders": "全部服务商",
     "primaryModel": "主力模型",
     "primaryModelDesc": "使用已配置的主力模型",
     "fastModel": "快速模型",
diff --git a/src/web-ui/src/locales/zh-CN/scenes/agents.json b/src/web-ui/src/locales/zh-CN/scenes/agents.json
index 8010372a22..ae77aa7286 100644
--- a/src/web-ui/src/locales/zh-CN/scenes/agents.json
+++ b/src/web-ui/src/locales/zh-CN/scenes/agents.json
@@ -282,8 +282,24 @@
     "deleteSuccess": "已删除「{{name}}」",
     "deleteFailed": "删除失败：",
     "form": {
+      "wizard": {
+        "navigation": "创建步骤",
+        "progress": "{{current}} / {{total}}",
+        "next": "下一步",
+        "back": "上一步",
+        "basicsTitle": "决定协作方式",
+        "basicsDescription": "智能体由你直接使用，子智能体由其他智能体委派任务。用户级可跨项目复用，项目级仅在当前项目生效。",
+        "promptTitle": "建立稳定的工作规则",
+        "promptDescription": "提示词会在每次任务中作为行为指导。明确判断标准和完成条件，能让执行过程与结果更一致。",
+        "toolsTitle": "界定可执行的操作",
+        "toolsDescription": "工具决定它能实际执行哪些操作。仅开放任务所需的能力；调用时仍受当前权限策略约束。",
+        "loadingTools": "正在加载可用工具…",
+        "toolsLoadFailed": "无法加载当前设备的工具，请重试。",
+        "retry": "重试",
+        "noTools": "当前没有可供选择的工具，将使用默认工具配置。"
+      },
       "createThroughChatHint": "也可以在对话中描述你的需求，让智能体帮你创建自定义智能体。",
-      "title": "新建自定义智能体",
+      "title": "新建智能体",
       "subtitle": "创建智能体或子智能体，定义提示词、工具和运行时上下文策略。",
       "titleEdit": "编辑自定义智能体",
       "subtitleEdit": "可修改显示名称、描述、系统提示词、工具和运行时上下文策略。",
@@ -309,7 +325,7 @@
       "descPlaceholder": "简要描述该智能体的用途",
       "descRequired": "描述不能为空",
       "prompt": "系统提示词",
-      "promptPlaceholder": "输入系统提示词，定义智能体的行为...\n\n支持以下占位符\n{PERSONA}: SOUL.md/USER.md/IDENTITY.md\n{LANGUAGE_PREFERENCE}: 语言偏好\n{FILE_REFERENCES}: 文件和图片引用规范",
+      "promptPlaceholder": "请输入智能体系统提示词",
       "promptRequired": "系统提示词不能为空",
       "readonly": "只读模式",
       "model": "模型",
diff --git a/src/web-ui/src/locales/zh-TW/flow-chat.json b/src/web-ui/src/locales/zh-TW/flow-chat.json
index d131acf573..6eb4f23aa4 100644
--- a/src/web-ui/src/locales/zh-TW/flow-chat.json
+++ b/src/web-ui/src/locales/zh-TW/flow-chat.json
@@ -3325,6 +3325,22 @@
     "projectCowork": "項目裡工作。"
   },
   "modelSelector": {
+    "home": {
+      "context": "上下文",
+      "effort": "思考強度",
+      "unknownContext": "未提供",
+      "contextReadOnly": "上下文視窗由執行端管理",
+      "editContext": "編輯上下文視窗",
+      "contextTokens": "上下文視窗（Token 數）",
+      "saveContext": "儲存上下文視窗",
+      "contextInvalid": "請輸入 {{min}} 到 {{max}} 之間的整數 Token 數",
+      "contextSaveFailed": "儲存失敗，請重試。",
+      "availablePoolModels": "模型池可用模型",
+      "mode": "模式",
+      "currentModel": "目前使用模型",
+      "poolConnections": "電池接入列表",
+      "modelPool": "模型池清單"
+    },
     "modes": {
       "selection": "選擇模式",
       "manual": "手動指定",
@@ -3339,6 +3355,12 @@
     "modelExplanation": "模型說明",
     "modelSettings": "模型設定",
     "modelSelection": "選擇模型",
+    "searchModels": "搜尋模型",
+    "collapseSearch": "收合搜尋",
+    "searchPlaceholder": "搜尋模型或供應商",
+    "noSearchResults": "沒有匹配的模型或供應商",
+    "filterProvider": "依服務商篩選模型",
+    "allProviders": "全部服務商",
     "primaryModel": "主力模型",
     "primaryModelDesc": "使用已設定的主力模型",
     "fastModel": "快速模型",
diff --git a/src/web-ui/src/locales/zh-TW/scenes/agents.json b/src/web-ui/src/locales/zh-TW/scenes/agents.json
index a12038c2c5..79ec9b07f0 100644
--- a/src/web-ui/src/locales/zh-TW/scenes/agents.json
+++ b/src/web-ui/src/locales/zh-TW/scenes/agents.json
@@ -282,8 +282,24 @@
     "deleteSuccess": "已刪除「{{name}}」",
     "deleteFailed": "刪除失敗：",
     "form": {
+      "wizard": {
+        "navigation": "建立步驟",
+        "progress": "{{current}} / {{total}}",
+        "next": "下一步",
+        "back": "上一步",
+        "basicsTitle": "決定協作方式",
+        "basicsDescription": "智能體由你直接使用，子智能體由其他智能體委派任務。使用者層級可跨專案重用，專案層級僅在目前專案生效。",
+        "promptTitle": "建立穩定的工作規則",
+        "promptDescription": "提示詞會在每次任務中作為行為指引。明確的判斷標準和完成條件，能讓執行過程與結果更一致。",
+        "toolsTitle": "界定可執行的操作",
+        "toolsDescription": "工具決定它能實際執行哪些操作。僅開放任務所需的能力；呼叫時仍受目前權限原則約束。",
+        "loadingTools": "正在載入可用工具…",
+        "toolsLoadFailed": "無法載入目前裝置的工具，請重試。",
+        "retry": "重試",
+        "noTools": "目前沒有可供選擇的工具，將使用預設工具設定。"
+      },
       "createThroughChatHint": "也可以在對話中描述你的需求，讓智能體幫你建立自訂智能體。",
-      "title": "新增自定義智能體",
+      "title": "新增智慧體",
       "subtitle": "建立智能體或子智能體，定義提示詞、工具與執行時上下文策略。",
       "titleEdit": "編輯自定義智能體",
       "subtitleEdit": "可修改顯示名稱、描述、系統提示詞、工具和運行時上下文策略。",
@@ -309,7 +325,7 @@
       "descPlaceholder": "簡要描述該智能體的用途",
       "descRequired": "描述不能為空",
       "prompt": "系統提示詞",
-      "promptPlaceholder": "輸入系統提示詞，定義智能體的行為...\n\n支援以下佔位符\n{PERSONA}: SOUL.md/USER.md/IDENTITY.md\n{LANGUAGE_PREFERENCE}: 語言偏好\n{FILE_REFERENCES}: 檔案和圖片引用規範",
+      "promptPlaceholder": "請輸入智能體系統提示詞",
       "promptRequired": "系統提示詞不能為空",
       "readonly": "只讀模式",
       "model": "模型",
diff --git a/src/web-ui/src/tools/editor/AGENTS.md b/src/web-ui/src/tools/editor/AGENTS.md
index eb5df728c8..8f60e18021 100644
--- a/src/web-ui/src/tools/editor/AGENTS.md
+++ b/src/web-ui/src/tools/editor/AGENTS.md
@@ -11,11 +11,18 @@ This directory follows `src/web-ui/AGENTS.md`.
   original Markdown when parsing and serializing. HTML rendering uses the shared
   sanitized Markdown renderer.
 - Markdown serialization uses the parser-matched remark extensions. Preserve link titles, code whitespace, and literal syntax; validate emitted inline ranges and use equivalent inline HTML only when Markdown delimiters cannot preserve them. Unsupported block conversions stay local to their source region.
+- Rich text parses pasted plain-text Markdown with the same document parser.
+  Styled source HTML and Markdown editor clipboard metadata must also reach this
+  parser rather than becoming literal paragraphs or a single code block.
+  Preserve native rich HTML, code-block and explicit plain-text paste behavior.
 - Source-backed reference blocks share document-level definitions, numbering,
   and anchors. Preview context is transient and must not enter saved Markdown.
 - Rich text reuses the existing MarkdownRenderer typography and component styles.
   Preserve the pre-existing preview appearance; do not add an editor-specific
   visual redesign.
+- Embedded consumers can set `emptyDocumentPlaceholder` to keep task-specific
+  guidance visible in an empty document, including while focused. Keep these hints
+  in placeholder decorations; they must not enter saved content or undo history.
 - Outside local editing, embeds keep their original rendered appearance. Show
   additional source-editing labels and completion controls only while that embed
   is being edited.
diff --git a/src/web-ui/src/tools/editor/components/MarkdownEditor.test.tsx b/src/web-ui/src/tools/editor/components/MarkdownEditor.test.tsx
index 1f32eef164..d1a6668b50 100644
--- a/src/web-ui/src/tools/editor/components/MarkdownEditor.test.tsx
+++ b/src/web-ui/src/tools/editor/components/MarkdownEditor.test.tsx
@@ -21,13 +21,13 @@ vi.mock('../services/EditorDocument', () => ({
 }));
 
 vi.mock('../meditor', () => ({
-  MEditor: forwardRef((props: { value?: string; mode?: string }, ref) => {
+  MEditor: forwardRef((props: { value?: string; mode?: string; emptyDocumentPlaceholder?: string }, ref) => {
     useImperativeHandle(ref, () => ({
       destroy: vi.fn(),
       markSaved: vi.fn(),
       setInitialContent: vi.fn(),
     }));
-    return <div data-testid="markdown-body" data-mode={props.mode} />;
+    return <div data-testid="markdown-body" data-mode={props.mode} data-empty-placeholder={props.emptyDocumentPlaceholder} />;
   }),
 }));
 
@@ -83,6 +83,11 @@ vi.mock('@/infrastructure/confirm-dialog', () => ({
 }));
 
 describe('MarkdownEditor', () => {
+  it('forwards task-specific empty-document guidance to the shared editor', () => {
+    const html = renderToStaticMarkup(<MarkdownEditor emptyDocumentPlaceholder="Write the system prompt" />);
+    expect(html).toContain('data-empty-placeholder="Write the system prompt"');
+  });
+
   it('renders a compact copy action in the toolbar', () => {
     const html = renderToStaticMarkup(
       <MarkdownEditor initialContent="# Deep Review\n\nReady." />,
diff --git a/src/web-ui/src/tools/editor/components/MarkdownEditor.tsx b/src/web-ui/src/tools/editor/components/MarkdownEditor.tsx
index 93f8acf646..f21673a7fb 100644
--- a/src/web-ui/src/tools/editor/components/MarkdownEditor.tsx
+++ b/src/web-ui/src/tools/editor/components/MarkdownEditor.tsx
@@ -56,6 +56,8 @@ export interface MarkdownEditorProps {
   filePath?: string;
   /** Initial content - used when no filePath */
   initialContent?: string;
+  /** Task-specific empty-state copy; takes precedence over the focused AI hint. */
+  emptyDocumentPlaceholder?: string;
   /** Owning workspace ID for editors rendered without an EditorDocument. */
   workspaceId?: string;
   /** Workspace root (IO projection only; never identity). */
@@ -84,6 +86,7 @@ export interface MarkdownEditorProps {
 const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
   filePath,
   initialContent = '',
+  emptyDocumentPlaceholder,
   workspaceId,
   workspacePath,
   readOnly = false,
@@ -711,6 +714,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
           height="100%"
           width="100%"
           placeholder={t('editor.markdownEditor.placeholder')}
+          emptyDocumentPlaceholder={emptyDocumentPlaceholder}
           readonly={readOnly}
           toolbar={false}
           filePath={filePath}
diff --git a/src/web-ui/src/tools/editor/meditor/components/MEditor.test.tsx b/src/web-ui/src/tools/editor/meditor/components/MEditor.test.tsx
index 31bb50dc7f..76930a47cd 100644
--- a/src/web-ui/src/tools/editor/meditor/components/MEditor.test.tsx
+++ b/src/web-ui/src/tools/editor/meditor/components/MEditor.test.tsx
@@ -106,6 +106,197 @@ describe('MEditorErrorBoundary', () => {
     return { ref, onDirtyChange, onSave, setDocumentValue: (next: string) => setDocumentValue(next) };
   }
 
+  function pasteClipboard(text: string, html = '', metadata: Record<string, string> = {}) {
+    const event = new Event('paste', { bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'clipboardData', { value: {
+      getData: (type: string) => type === 'text/plain' ? text : type === 'text/html' ? html : metadata[type] ?? '',
+      files: [],
+      types: [...(html ? ['text/plain', 'text/html'] : ['text/plain']), ...Object.keys(metadata)],
+    } });
+    act(() => { getEditor().view.dom.dispatchEvent(event); });
+  }
+
+  function sourceClipboardHtml(source: string): string {
+    const wrapper = document.createElement('div');
+    wrapper.style.whiteSpace = 'pre';
+    for (const line of source.split('\n')) {
+      const row = wrapper.appendChild(document.createElement('div'));
+      const token = row.appendChild(document.createElement('span'));
+      token.textContent = line || '\u00a0';
+    }
+    return wrapper.outerHTML;
+  }
+
+  it.each([
+    { name: 'styled source HTML', withHtml: true, prefix: '', metadata: {} },
+    { name: 'styled source HTML with clipboard headers', withHtml: true, prefix: '<meta charset="utf-8">', metadata: {} },
+    { name: 'Monaco source HTML and Markdown metadata', withHtml: true, prefix: '', metadata: { 'vscode-editor-data': '{"version":1,"mode":"markdown"}' } },
+    { name: 'Markdown editor metadata without HTML', withHtml: false, prefix: '', metadata: { 'vscode-editor-data': '{"version":1,"mode":"markdown"}' } },
+  ])('renders README Markdown copied with $name', async ({ withHtml, prefix, metadata }) => {
+    const readme = '**English** · [中文](README.zh-CN.md)\n\n<div align="center">\n\n<img src="./png/openbitfun-wordmark.png" alt="OpenBitFun" width="520" />\n\n### Built to keep going.\n\nOpenBitFun is an agent workspace.\n\n</div>';
+    const { ref } = await renderEditor('');
+    pasteClipboard(readme, withHtml ? prefix + sourceClipboardHtml(readme) : '', metadata);
+    await act(async () => { await vi.dynamicImportSettled(); });
+    expect(container.querySelector('.ProseMirror strong')?.textContent).toBe('English');
+    expect(container.querySelector('.ProseMirror a')?.getAttribute('href')).toBe('README.zh-CN.md');
+    expect(container.querySelector('.ProseMirror h3')?.textContent).toBe('Built to keep going.');
+    expect(container.querySelector('.ProseMirror > pre')).toBeNull();
+    expect(ref.current?.getValue()).toContain('**English**');
+    act(() => { getEditor().commands.undo(); });
+    expect(ref.current?.getValue()).toBe('');
+  });
+
+  it('keeps non-Markdown source code on the native code-block paste path', async () => {
+    await renderEditor('');
+    const code = '# Python comment\nprint("hello")';
+    pasteClipboard(code, sourceClipboardHtml(code), { 'vscode-editor-data': '{"version":1,"mode":"python"}' });
+    expect(container.querySelector('.ProseMirror pre code')?.textContent).toBe(code);
+    expect(container.querySelector('.ProseMirror h1')).toBeNull();
+  });
+
+  it('honors explicit plain-text paste even when source HTML is present', async () => {
+    await renderEditor('');
+    act(() => { getEditor().view.dom.dispatchEvent(new KeyboardEvent('keydown', { key: 'Shift', keyCode: 16, shiftKey: true, bubbles: true })); });
+    pasteClipboard('# Literal heading', sourceClipboardHtml('# Literal heading'));
+    act(() => { getEditor().view.dom.dispatchEvent(new KeyboardEvent('keyup', { key: 'Shift', keyCode: 16, bubbles: true })); });
+    expect(getEditor().getText()).toBe('# Literal heading');
+    expect(container.querySelector('.ProseMirror h1')).toBeNull();
+  });
+
+  it('renders pasted Markdown as editable blocks and keeps paste in one undo step', async () => {
+    const { ref } = await renderEditor('Original');
+    act(() => { getEditor().commands.selectAll(); });
+    pasteClipboard('# Role\n\n**Be precise.**\n\n- Return evidence.\n\n```js\nconst value = 1;\n```');
+    expect(container.querySelector('.ProseMirror h1')?.textContent).toBe('Role');
+    expect(container.querySelector('.ProseMirror strong')?.textContent).toBe('Be precise.');
+    expect(container.querySelector('.ProseMirror li')?.textContent).toBe('Return evidence.');
+    expect(container.querySelector('.ProseMirror pre code')?.textContent).toBe('const value = 1;');
+    expect(ref.current?.getValue()).toContain('# Role\n\n**Be precise.**');
+    act(() => { getEditor().commands.undo(); });
+    expect(ref.current?.getValue()).toBe('Original');
+    act(() => { getEditor().commands.redo(); });
+    expect(container.querySelector('.ProseMirror h1')?.textContent).toBe('Role');
+  });
+
+  it('inserts pasted inline Markdown at the selection without replacing surrounding text', async () => {
+    const { ref } = await renderEditor('Before after');
+    act(() => { getEditor().commands.setTextSelection({ from: 8, to: 13 }); });
+    pasteClipboard('**replacement**');
+    expect(container.querySelector('.ProseMirror strong')?.textContent).toBe('replacement');
+    expect(ref.current?.getValue()).toBe('Before **replacement**');
+  });
+
+  it('inherits the current formatting when pasted text has no Markdown formatting', async () => {
+    const { ref } = await renderEditor('**Before after**');
+    act(() => { getEditor().commands.setTextSelection({ from: 8, to: 13 }); });
+    pasteClipboard('replacement');
+    expect(ref.current?.getValue()).toBe('**Before replacement**');
+  });
+
+  it('keeps rich HTML clipboard formatting instead of reparsing its text as Markdown', async () => {
+    await renderEditor('');
+    pasteClipboard('# Literal text', '<h2>Rich title</h2><p><em>Rich emphasis</em></p>');
+    expect(container.querySelector('.ProseMirror h2')?.textContent).toBe('Rich title');
+    expect(container.querySelector('.ProseMirror em')?.textContent).toBe('Rich emphasis');
+    expect(container.querySelector('.ProseMirror h1')).toBeNull();
+  });
+
+  it('preserves literal Markdown when copied from an existing rich-text document', async () => {
+    await renderEditor('');
+    pasteClipboard('# Literal heading', '<p data-pm-slice="1 1 []"># Literal heading</p>');
+    expect(getEditor().getText()).toBe('# Literal heading');
+    expect(container.querySelector('.ProseMirror h1')).toBeNull();
+  });
+
+  it('keeps Markdown syntax literal when pasting into a code block', async () => {
+    await renderEditor('```text\noriginal\n```');
+    act(() => { getEditor().commands.setTextSelection({ from: 1, to: 9 }); });
+    pasteClipboard('# Heading\n\n**literal**');
+    expect(container.querySelector('.ProseMirror pre code')?.textContent).toBe('# Heading\n\n**literal**');
+    expect(container.querySelector('.ProseMirror h1, .ProseMirror strong')).toBeNull();
+  });
+
+  it('keeps explicit plain-text paste equivalent to the native editor behavior', async () => {
+    const pastePlain = () => {
+      act(() => { getEditor().view.dom.dispatchEvent(new KeyboardEvent('keydown', { key: 'Shift', keyCode: 16, shiftKey: true, bubbles: true })); });
+      pasteClipboard('# Heading\n\n**literal**');
+      act(() => { getEditor().view.dom.dispatchEvent(new KeyboardEvent('keyup', { key: 'Shift', keyCode: 16, bubbles: true })); });
+    };
+    const native = await renderEditor('');
+    getEditor().view.setProps({ clipboardTextParser: undefined });
+    pastePlain();
+    const nativeMarkdown = native.ref.current?.getValue();
+
+    const configured = await renderEditor('');
+    pastePlain();
+    expect(configured.ref.current?.getValue()).toBe(nativeMarkdown);
+    expect(getEditor().getText()).toContain('# Heading');
+    expect(container.querySelector('.ProseMirror h1')).toBeNull();
+  });
+
+  it('keeps task-specific empty-document guidance visible when focused and restores it after clearing', async () => {
+    const onChange = vi.fn();
+    const onDirtyChange = vi.fn();
+    const ref = createRef<EditorInstance>();
+    await act(async () => root.render(
+      <MEditor ref={ref} defaultValue="" placeholder="Empty block" emptyDocumentPlaceholder="Write the system prompt"
+        onChange={onChange} onDirtyChange={onDirtyChange} />,
+    ));
+    await act(async () => { await new Promise(resolve => setTimeout(resolve, 0)); });
+    onChange.mockClear();
+    onDirtyChange.mockClear();
+    expect(container.querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe('Write the system prompt');
+    act(() => getEditor().view.dom.focus());
+    expect(container.querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe('Write the system prompt');
+    expect(ref.current?.getValue()).toBe('');
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onDirtyChange).not.toHaveBeenCalledWith(true);
+
+    act(() => getEditor().commands.insertContent('Instructions'));
+    expect(container.querySelector('p[data-placeholder]')).toBeNull();
+    act(() => { getEditor().commands.splitBlock(); });
+    expect(container.querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe('editor.meditor.inlineAi.triggerHint');
+    act(() => { getEditor().commands.clearContent(); });
+    expect(container.querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe('Write the system prompt');
+    expect(ref.current?.getValue()).toBe('');
+  });
+
+  it('updates empty-document guidance without replacing the editor, changing content or losing undo', async () => {
+    const onChange = vi.fn();
+    const ref = createRef<EditorInstance>();
+    const renderHint = async (hint: string) => {
+      await act(async () => root.render(<MEditor ref={ref} defaultValue="" emptyDocumentPlaceholder={hint} onChange={onChange} />));
+    };
+    await renderHint('Initial guidance');
+    const editor = getEditor();
+    onChange.mockClear();
+    await renderHint('Updated guidance');
+    expect(getEditor()).toBe(editor);
+    expect(container.querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe('Updated guidance');
+    expect(onChange).not.toHaveBeenCalled();
+
+    act(() => editor.commands.insertContent('Draft'));
+    onChange.mockClear();
+    await renderHint('New task guidance');
+    expect(getEditor()).toBe(editor);
+    expect(ref.current?.getValue()).toBe('Draft');
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => { editor.commands.undo(); });
+    expect(ref.current?.getValue()).toBe('');
+    expect(container.querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe('New task guidance');
+  });
+
+  it('keeps the existing AI hint for consumers without an empty-document override', async () => {
+    await renderEditor('');
+    act(() => getEditor().view.dom.focus());
+    expect(container.querySelector('p[data-placeholder]')?.getAttribute('data-placeholder')).toBe('editor.meditor.inlineAi.triggerHint');
+  });
+
+  it('uses the task-specific hint in source mode too', async () => {
+    await act(async () => root.render(<MEditor defaultValue="" mode="edit" placeholder="Empty block" emptyDocumentPlaceholder="Write the system prompt" />));
+    expect(container.querySelector('textarea')?.placeholder).toBe('Write the system prompt');
+  });
+
   it.each([
     sourceMarkdown,
     '# Before\n\n<div data-custom="yes">HTML</div>\n\nAfter',
diff --git a/src/web-ui/src/tools/editor/meditor/components/MEditor.tsx b/src/web-ui/src/tools/editor/meditor/components/MEditor.tsx
index 0e6601166c..e10665f2d4 100644
--- a/src/web-ui/src/tools/editor/meditor/components/MEditor.tsx
+++ b/src/web-ui/src/tools/editor/meditor/components/MEditor.tsx
@@ -56,6 +56,7 @@ const MEditorSourceFallback = forwardRef<EditorInstance, MEditorProps>((props, r
     readonly = false,
     autofocus = false,
     placeholder,
+    emptyDocumentPlaceholder,
     onChange,
     onSave,
     onFocus,
@@ -154,7 +155,7 @@ const MEditorSourceFallback = forwardRef<EditorInstance, MEditorProps>((props, r
         rows={rows}
         readOnly={readonly}
         autoFocus={autofocus}
-        placeholder={placeholder}
+        placeholder={emptyDocumentPlaceholder ?? placeholder}
         onChange={(event) => updateValue(event.target.value)}
         onFocus={onFocus}
         onBlur={onBlur}
@@ -229,6 +230,7 @@ const MEditorInner = forwardRef<EditorInstance, MEditorProps>((props, ref) => {
     mode: initialMode = 'ir',
     toolbar = false,
     placeholder: placeholderProp,
+    emptyDocumentPlaceholder,
     readonly = false,
     autofocus = false,
     onChange,
@@ -438,7 +440,7 @@ const MEditorInner = forwardRef<EditorInstance, MEditorProps>((props, ref) => {
               onChange={handleEditorChange}
               onFocus={onFocus}
               onBlur={onBlur}
-              placeholder={placeholder}
+              placeholder={emptyDocumentPlaceholder ?? placeholder}
               readonly={readonly}
               autofocus={autofocus}
             />
@@ -454,6 +456,7 @@ const MEditorInner = forwardRef<EditorInstance, MEditorProps>((props, ref) => {
               onFocus={onFocus}
               onBlur={onBlur}
               placeholder={placeholder}
+              emptyDocumentPlaceholder={emptyDocumentPlaceholder}
               readonly={readonly}
               autofocus={autofocus}
               filePath={filePath}
diff --git a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.tsx b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.tsx
index 941e0402fa..f1fd4e43cc 100644
--- a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.tsx
+++ b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.tsx
@@ -51,6 +51,7 @@ import {
 import { getCachedLocalImageDataUrl, loadLocalImages } from '../utils/loadLocalImages';
 import { isLocalPath, resolveImagePath } from '../utils/rehype-local-images';
 import { markdownToEditableTiptapDoc, tiptapDocToMarkdown, tiptapDocToTopLevelMarkdownBlocks } from '../utils/tiptapMarkdown';
+import { handleMarkdownSourcePaste, parseMarkdownClipboardText } from '../utils/markdownClipboard';
 import '@/infrastructure/markdown/Markdown.scss';
 import './TiptapEditor.scss';
 
@@ -75,6 +76,7 @@ interface TiptapEditorProps {
   onFocus?: () => void;
   onBlur?: () => void;
   placeholder?: string;
+  emptyDocumentPlaceholder?: string;
   readonly?: boolean;
   autofocus?: boolean;
   onDirtyChange?: (isDirty: boolean) => void;
@@ -397,6 +399,7 @@ export const TiptapEditor = React.forwardRef<TiptapEditorHandle, TiptapEditorPro
   onFocus,
   onBlur,
   placeholder,
+  emptyDocumentPlaceholder,
   readonly = false,
   autofocus = false,
   onDirtyChange,
@@ -420,10 +423,13 @@ export const TiptapEditor = React.forwardRef<TiptapEditorHandle, TiptapEditorPro
   const targetIdRef = useRef(`markdown-ir-tiptap-${Math.random().toString(36).slice(2, 10)}`);
   const inlineAiInputRef = useRef<HTMLInputElement | null>(null);
   const inlineAiInputComposingRef = useRef(false);
+  const plainTextPasteRef = useRef(false);
   const [inlineAiState, setInlineAiState] = useState<InlineAiState | null>(null);
 
   const [initialContent] = useState(() => markdownToEditableTiptapDoc(value));
   const inlineAiTriggerHint = t('editor.meditor.inlineAi.triggerHint');
+  const placeholderOptionsRef = useRef({ placeholder, emptyDocumentPlaceholder, inlineAiTriggerHint });
+  placeholderOptionsRef.current = { placeholder, emptyDocumentPlaceholder, inlineAiTriggerHint };
 
   useEffect(() => {
     inlineAiStateRef.current = inlineAiState;
@@ -566,12 +572,16 @@ export const TiptapEditor = React.forwardRef<TiptapEditorHandle, TiptapEditorPro
       // Placeholder decorations keep hints outside the document mutation path.
       // Direct paragraph DOM changes can reparse and destroy active embed editors.
       Placeholder.configure({
-        placeholder: ({ node, hasAnchor }) => {
+        placeholder: ({ editor: instance, node, hasAnchor }) => {
+          const hints = placeholderOptionsRef.current;
+          if (instance.isEmpty && hints.emptyDocumentPlaceholder !== undefined) {
+            return hints.emptyDocumentPlaceholder;
+          }
           if (!hasAnchor || node.type.name !== 'paragraph') {
-            return placeholder ?? '';
+            return hints.placeholder ?? '';
           }
 
-          return inlineAiTriggerHint;
+          return hints.inlineAiTriggerHint;
         },
       }),
       MarkdownAlignmentExtension,
@@ -637,6 +647,21 @@ export const TiptapEditor = React.forwardRef<TiptapEditorHandle, TiptapEditorPro
     ],
     editorProps: {
       attributes: { class: 'markdown-renderer' },
+      handleDOMEvents: {
+        paste: () => {
+          plainTextPasteRef.current = false;
+          return false;
+        },
+      },
+      clipboardTextParser: (text, context, plain, view) => {
+        plainTextPasteRef.current = plain;
+        return parseMarkdownClipboardText(text, context, plain, view);
+      },
+      handlePaste: (view, event) => {
+        const plain = plainTextPasteRef.current;
+        plainTextPasteRef.current = false;
+        return handleMarkdownSourcePaste(view, event, plain);
+      },
       handleKeyDown: (_view, event) => {
         if (readonlyRef.current || inlineAiStateRef.current?.isOpen) {
           return false;
@@ -707,6 +732,12 @@ export const TiptapEditor = React.forwardRef<TiptapEditorHandle, TiptapEditorPro
     },
   });
 
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    // Refresh placeholder decorations without changing document content or undo history.
+    editor.view.dispatch(editor.state.tr.setMeta('addToHistory', false));
+  }, [editor, placeholder, emptyDocumentPlaceholder, inlineAiTriggerHint]);
+
   useEffect(() => {
     if (!editor) {
       return;
diff --git a/src/web-ui/src/tools/editor/meditor/types/index.ts b/src/web-ui/src/tools/editor/meditor/types/index.ts
index b5d42b5a7f..45512685b3 100644
--- a/src/web-ui/src/tools/editor/meditor/types/index.ts
+++ b/src/web-ui/src/tools/editor/meditor/types/index.ts
@@ -59,6 +59,8 @@ export interface EditorOptions {
   plugins?: Plugin[]
   upload?: UploadConfig
   placeholder?: string
+  /** Overrides contextual hints while the whole document is empty, including when focused. */
+  emptyDocumentPlaceholder?: string
   readonly?: boolean
   autofocus?: boolean
   onChange?: (value: string) => void
diff --git a/src/web-ui/src/tools/editor/meditor/utils/markdownClipboard.ts b/src/web-ui/src/tools/editor/meditor/utils/markdownClipboard.ts
new file mode 100644
index 0000000000..75c506dd13
--- /dev/null
+++ b/src/web-ui/src/tools/editor/meditor/utils/markdownClipboard.ts
@@ -0,0 +1,79 @@
+import { DOMParser, DOMSerializer, Slice, type ResolvedPos } from '@tiptap/pm/model';
+import type { EditorView } from '@tiptap/pm/view';
+import { createLogger } from '@/shared/utils/logger';
+import { markdownToEditableTiptapDoc } from './tiptapMarkdown';
+
+const log = createLogger('MarkdownClipboard');
+
+function parsePlainClipboardText(text: string, context: ResolvedPos, view: EditorView): Slice {
+  const { schema } = view.state;
+  const serializer = DOMSerializer.fromSchema(schema);
+  const container = document.createElement('div');
+  // Match ProseMirror's ordinary text-paste semantics, including active marks.
+  for (const line of text.split(/(?:\r\n?|\n)+/)) {
+    const paragraph = container.appendChild(document.createElement('p'));
+    if (line) paragraph.appendChild(serializer.serializeNode(schema.text(line, context.marks())));
+  }
+  return DOMParser.fromSchema(schema).parseSlice(container, { preserveWhitespace: true, context });
+}
+
+/** Native clipboard parsing keeps rich HTML and code-block pastes on their existing paths. */
+export function parseMarkdownClipboardText(text: string, context: ResolvedPos, plain: boolean, view: EditorView): Slice {
+  if (plain) return parsePlainClipboardText(text, context, view);
+  try {
+    const parsedDocument = view.state.schema.nodeFromJSON(markdownToEditableTiptapDoc(text));
+    const paragraph = parsedDocument.childCount === 1 ? parsedDocument.firstChild : null;
+    if (paragraph?.type.name === 'paragraph' && paragraph.textContent === text
+      && paragraph.content.content.every(node => node.isText && node.marks.length === 0)) {
+      return parsePlainClipboardText(text, context, view);
+    }
+    return Slice.maxOpen(parsedDocument.content);
+  } catch (error) {
+    log.warn('Failed to parse pasted Markdown, preserving clipboard text', { error });
+    return parsePlainClipboardText(text, context, view);
+  }
+}
+
+const SOURCE_HTML_WRAPPERS = new Set(['DIV', 'SPAN', 'P', 'BR']);
+
+function isSourceTextHtml(html: string, text: string): boolean {
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  if (template.content.querySelector('[data-pm-slice]')) return false;
+  for (const metadata of template.content.querySelectorAll('meta, style, title')) metadata.remove();
+  // Code editors wrap source lines/tokens in styled elements. Actual rich-text
+  // headings, lists, links, images and code blocks keep the native HTML path.
+  if (!Array.from(template.content.querySelectorAll('*')).every(element => SOURCE_HTML_WRAPPERS.has(element.tagName))) return false;
+  const normalize = (value: string) => value.replace(/\s/g, '');
+  return normalize(template.content.textContent ?? '') === normalize(text);
+}
+
+function editorClipboardLanguage(data: DataTransfer): string | undefined {
+  const raw = data.getData('vscode-editor-data');
+  if (!raw) return undefined;
+  try {
+    const metadata: unknown = JSON.parse(raw);
+    if (metadata && typeof metadata === 'object' && 'mode' in metadata && typeof metadata.mode === 'string') return metadata.mode;
+  } catch {
+    // Clipboard metadata is optional; content can still identify source HTML.
+  }
+  return undefined;
+}
+
+/** Handles source Markdown even when the clipboard also contains HTML or editor metadata. */
+export function handleMarkdownSourcePaste(view: EditorView, event: ClipboardEvent, plain: boolean): boolean {
+  const data = event.clipboardData;
+  if (plain || !data || !view.editable || view.state.selection.$from.parent.type.spec.code || data.files.length > 0) return false;
+  const markdown = data.getData('text/markdown');
+  const text = markdown || data.getData('text/plain');
+  if (!text) return false;
+  const language = editorClipboardLanguage(data);
+  if (!markdown && language && language !== 'markdown') return false;
+  const html = data.getData('text/html');
+  if (!markdown && language !== 'markdown' && (!html || !isSourceTextHtml(html, text))) return false;
+
+  // Handle this before the built-in code-block plugin consumes editor metadata.
+  const slice = parseMarkdownClipboardText(text, view.state.selection.$from, false, view);
+  view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView().setMeta('paste', true).setMeta('uiEvent', 'paste'));
+  return true;
+}