From 6968e00d6dbb815d6d40b2e505390acad8608bdc Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Sat, 5 Sep 2026 16:53:58 +0800
Subject: [PATCH] feat(ui): unify picker controls and surface iconography

---
 .../src/pages/ComponentDetailPage.tsx         |  20 +-
 .../vite/component-detail-contract.test.mjs   |  12 +-
 .../theme-openbitfun/src/dark.tokens.json     |   2 +-
 .../theme-openbitfun/src/light.tokens.json    |   2 +-
 .../tests/theme-contract.test.mjs             |  10 +-
 design-system/packages/ui/README.md           |  38 +-
 .../src/components/Combobox/Combobox.meta.ts  |   8 +-
 .../components/Combobox/Combobox.module.css   | 113 ++++-
 .../ui/src/components/Combobox/Combobox.tsx   | 194 ++++----
 .../ui/src/components/Icon/Icon.meta.ts       |   3 +-
 .../ui/src/components/Icon/Icon.module.css    |  10 +
 .../packages/ui/src/components/Icon/Icon.tsx  |  38 +-
 .../packages/ui/src/components/Icon/index.ts  |   1 +
 .../ui/src/components/Input/Input.meta.ts     |   1 -
 .../ui/src/components/Input/Input.module.css  |  12 +-
 .../MultiSelect/MultiSelect.meta.ts           |   8 +-
 .../NumberInput/NumberInput.meta.ts           |   2 +-
 .../NumberInput/NumberInput.module.css        |   8 +-
 .../SearchField/SearchField.meta.ts           |   2 +-
 .../SearchField/SearchField.module.css        |  15 +-
 .../components/SearchField/SearchField.tsx    |   5 +-
 .../ui/src/components/Select/Select.meta.ts   |  27 +-
 .../src/components/Select/Select.module.css   | 260 +++++++++--
 .../ui/src/components/Select/Select.tsx       | 416 ++++++++++++++++--
 .../ui/src/components/Select/index.ts         |   1 +
 .../src/components/Textarea/Textarea.meta.ts  |   2 +-
 .../components/Textarea/Textarea.module.css   |   8 +-
 design-system/packages/ui/src/index.ts        |   1 +
 .../ui/src/internal/useAnchoredLayer.ts       |  42 +-
 .../packages/ui/tests/combobox.test.mjs       |  37 +-
 .../packages/ui/tests/icon-slots.test.mjs     |  14 +
 design-system/packages/ui/tests/icon.test.mjs |  21 +
 .../packages/ui/tests/search-field.test.mjs   |  36 +-
 .../packages/ui/tests/select.test.mjs         |  48 +-
 .../desktop/src/generated/bootstrap_theme.css |   2 +-
 .../generated/default_appearance_style.html   |   4 +-
 .../components/GalleryLayout/GalleryEmpty.tsx |   9 +-
 .../GalleryLayout/GalleryLayout.scss          |  16 +
 .../components/NavBar/NavBar.appearance.ts    |   2 +-
 .../src/app/components/NavBar/NavBar.scss     |  16 +
 .../src/app/components/NavBar/NavBar.tsx      |  22 +-
 .../src/app/components/NavPanel/MainNav.tsx   |  20 +-
 .../components/DeviceStatusControl.tsx        |  16 +-
 .../NavPanel/components/NavItem.tsx           |  10 +-
 .../components/WorkspaceSessionFilterMenu.tsx |   2 +-
 .../WorkspaceSessionGroupingToggle.tsx        |   7 +-
 .../navigationIconIntegration.test.ts         |  24 +-
 .../sections/sessions/SessionsSection.tsx     |   2 +-
 .../workspaces/WorkspaceAcpSessionSubmenu.tsx |   4 +-
 .../sections/workspaces/WorkspaceItem.tsx     |  31 +-
 .../workspaces/WorkspaceListSection.scss      |  21 -
 .../WorkspaceListSectionLayout.test.ts        |  13 +-
 .../WorkspaceProjectPermissionsDialog.scss    |   2 +-
 .../WorkspaceProjectPermissionsDialog.tsx     |   4 +-
 .../WorkspaceRelatedPathsDialog.tsx           |   2 +-
 .../workspaces/WorkspaceSessionBatchModal.tsx |   6 +-
 .../src/app/components/panels/base/types.ts   |   4 +-
 .../src/app/components/panels/base/utils.ts   |  80 ++--
 .../app/global-search/GlobalSearchRoot.tsx    |  84 ++--
 .../globalSearchArchitecture.test.ts          |   2 +-
 .../src/app/scenes/agents/AgentsScene.tsx     |  41 +-
 .../src/app/scenes/agents/agentsIcons.ts      |  51 +--
 .../scenes/agents/components/AgentCard.tsx    |  12 +-
 .../agents/components/CoreAgentCard.tsx       |  12 +-
 .../agents/components/CreateAgentPage.tsx     |  27 +-
 .../EcosystemCompatibilityScene.scss          |   8 +-
 .../EcosystemCompatibilityScene.tsx           |  45 +-
 .../file-viewer/FileViewerNav.appearance.ts   |   2 +-
 .../app/scenes/file-viewer/FileViewerNav.scss |  59 +--
 .../app/scenes/file-viewer/FileViewerNav.tsx  | 112 ++---
 .../scenes/miniapps/utils/miniAppIcons.tsx    |  32 +-
 .../miniapps/views/MiniAppGalleryView.tsx     |   4 +-
 .../miniapps/views/MiniAppLibraryView.tsx     |   2 +-
 .../miniapps/views/MiniAppMarketView.tsx      |   4 +-
 .../miniapps/views/MiniAppSubmissionsView.tsx |   2 +-
 .../app/scenes/my-agent/InsightsScene.scss    |   2 +-
 .../src/app/scenes/my-agent/InsightsScene.tsx |  60 +--
 src/web-ui/src/app/scenes/nav-registry.ts     |  37 +-
 .../src/app/scenes/pages/PagesScene.scss      |   2 +-
 .../src/app/scenes/pages/PagesScene.tsx       |   6 +-
 .../scenes/profile/views/NurseryGallery.tsx   |   8 +-
 .../src/app/scenes/settings/SettingsNav.scss  |  20 -
 .../app/scenes/settings/SettingsNav.test.tsx  |   4 +-
 .../src/app/scenes/settings/SettingsNav.tsx   |  52 +--
 .../settings/SettingsNavTypography.test.ts    |   3 +-
 .../src/app/scenes/skills/SkillsScene.tsx     |  34 +-
 .../scenes/skills/components/SkillCard.tsx    |   2 +-
 .../skills/components/SkillsSuiteView.tsx     |  10 +-
 .../src/infrastructure/config/AGENTS.md       |  27 ++
 .../components/AppearanceMarketWorkflows.tsx  |   1 +
 .../AppearancePackageConfigSection.tsx        |   4 +-
 ...licationSettingsPages.presentation.test.ts |  17 +
 .../components/ApplicationSettingsPages.tsx   |  16 +-
 .../config/components/SkillsConfig.tsx        |   4 +-
 ...WebSearchSettingsPage.presentation.test.ts |   3 +-
 .../components/WebSearchSettingsPage.tsx      |  51 ++-
 .../common/SettingsControlSizing.test.ts      |  63 +++
 .../IconUsageIntegration.test.tsx             |  37 ++
 .../locales/en-US/settings/web-search.json    |  21 +-
 .../locales/zh-CN/settings/web-search.json    |  21 +-
 .../locales/zh-TW/settings/web-search.json    |  21 +-
 .../components/NotificationCenter.test.tsx    |  18 +
 .../components/NotificationCenter.tsx         |   2 +-
 src/web-ui/src/shared/ui/Combobox.test.tsx    |  82 +++-
 src/web-ui/src/shared/ui/Select.test.tsx      | 164 +++++++
 .../editor/components/EditorBreadcrumb.tsx    |  10 +-
 106 files changed, 2177 insertions(+), 860 deletions(-)
 create mode 100644 src/web-ui/src/infrastructure/config/AGENTS.md
 create mode 100644 src/web-ui/src/infrastructure/config/components/common/SettingsControlSizing.test.ts
 create mode 100644 src/web-ui/src/shared/ui/Select.test.tsx

diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
index a702196d25..a691451490 100644
--- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
@@ -313,6 +313,7 @@ export function ComponentDetailPage({
   const [iconSize, setIconSize] = useState<IconSize>("lg");
   const [iconTone, setIconTone] = useState<IconTone>("inherit");
   const [selectValue, setSelectValue] = useState<string>("ask");
+  const [multiSelectValues, setMultiSelectValues] = useState<Array<string | number>>(["ask", "plan"]);
   const [size, setSize] = useState<PreviewSize>("md");
   const [fieldOrientation, setFieldOrientation] = useState<FieldOrientation>("horizontal");
   const [fieldShowLabelAction, setFieldShowLabelAction] = useState(false);
@@ -393,8 +394,9 @@ export function ComponentDetailPage({
         return ["raised", "subtle", "media"] as const;
       case "Input":
       case "SearchField":
-      case "Select":
         return ["default", "hover", "focus-visible", "invalid", "disabled"] as const;
+      case "Select":
+        return ["default", "hover", "focus-visible", "open", "invalid", "disabled"] as const;
       case "Field":
       case "Icon":
       case "KeyHint":
@@ -1126,7 +1128,8 @@ export function ComponentDetailPage({
     if (component.name === "Combobox") {
       return (
         <Combobox
-          defaultOpen={state === "open" || state === "searching"}
+          defaultOpen={state === "open" || state === "searching" || state === "loading" || state === "empty"}
+          clearable
           disabled={state === "disabled"}
           invalid={state === "invalid"}
           key={state}
@@ -1139,6 +1142,7 @@ export function ComponentDetailPage({
           ]}
           onCreateValue={state === "custom" ? value => value : undefined}
           aria-label="Mode"
+          size={size}
           value={selectValue}
         />
       );
@@ -1147,19 +1151,22 @@ export function ComponentDetailPage({
     if (component.name === "MultiSelect") {
       return (
         <MultiSelect
-          defaultOpen={state === "open" || state === "searching"}
+          defaultOpen={state === "open" || state === "searching" || state === "loading" || state === "empty"}
           disabled={state === "disabled"}
           invalid={state === "invalid"}
           key={state}
           loading={state === "loading"}
           onCreateValue={state === "custom" ? value => value : undefined}
-          options={state === "loading" ? [] : [
+          onValueChange={setMultiSelectValues}
+          options={state === "empty" || state === "loading" ? [] : [
             { label: "Ask", value: "ask" },
             { label: "Plan", value: "plan" },
             { disabled: true, label: "Agent", value: "agent" },
           ]}
           aria-label="Modes"
-          value={["ask", "plan"]}
+          showSelectAll
+          size={size}
+          value={multiSelectValues}
         />
       );
     }
@@ -1192,6 +1199,7 @@ export function ComponentDetailPage({
           invalid={state === "invalid"}
           leading={<Icon name="unselected" />}
           onValueChange={(value) => setSelectValue(String(value))}
+          open={state === "open" ? true : undefined}
           options={[
             { label: "Ask", value: "ask" },
             { label: "Plan", value: "plan" },
@@ -2056,7 +2064,7 @@ export function ComponentDetailPage({
                   </span>
                   {renderPreview(previewState)}
                 </div>
-              ) : component.name === "Combobox" ? (
+              ) : component.name === "Combobox" || component.name === "MultiSelect" ? (
                 <div className="component-combobox-preview" data-component="combobox">
                   <span>{stateLabel(previewState)}</span>
                   {renderPreview(previewState)}
diff --git a/design-system/apps/design-lab/vite/component-detail-contract.test.mjs b/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
index 14be137b04..c7940938b1 100644
--- a/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
+++ b/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
@@ -312,18 +312,19 @@ test("StatusPill preview exposes compact indicator anatomy and semantic tones",
   assert.match(detail, /tone=\{state as StatusPillTone\}/);
 });
 
-test("Select preview exposes native grouped selection and independent states", async () => {
+test("Select preview exposes the unified open surface and independent states", async () => {
   const [catalog, detail] = await Promise.all([
     readFile(catalogSource, "utf8"),
     readFile(detailSource, "utf8"),
   ]);
 
   assert.match(catalog, /case "Select"/);
-  assert.match(detail, /case "Select":\s*return \["default", "hover", "focus-visible", "invalid", "disabled"\] as const/);
+  assert.match(detail, /case "Select":\s*return \["default", "hover", "focus-visible", "open", "invalid", "disabled"\] as const/);
   assert.match(detail, /onValueChange=\{\(value\) => setSelectValue\(String\(value\)\)\}/);
   assert.match(detail, /leading=\{<Icon name="unselected" \/>\}/);
   assert.match(detail, /disabled=\{state === "disabled"\}/);
   assert.match(detail, /invalid=\{state === "invalid"\}/);
+  assert.match(detail, /open=\{state === "open" \? true : undefined\}/);
 });
 
 test("ActionItem preview keeps its trigger and end actions as separate contracts", async () => {
@@ -412,7 +413,8 @@ test("ConfirmDialog preview exposes semantic, destructive, preview, and pending
 test("Input, KeyHint, and SearchField previews expose composable slot and state contracts", async () => {
   const source = await readFile(detailSource, "utf8");
 
-  assert.match(source, /case "Input":\s*case "SearchField":\s*case "Select":\s*return \["default", "hover", "focus-visible", "invalid", "disabled"\] as const/);
+  assert.match(source, /case "Input":\s*case "SearchField":\s*return \["default", "hover", "focus-visible", "invalid", "disabled"\] as const/);
+  assert.match(source, /case "Select":\s*return \["default", "hover", "focus-visible", "open", "invalid", "disabled"\] as const/);
   assert.match(source, /component\.name === "Input"/);
   assert.match(source, /component\.name === "KeyHint"/);
   assert.match(source, /component\.name === "SearchField"/);
@@ -579,9 +581,11 @@ test("Toolbar preview keeps leading, centered, trailing, and overflow compositio
 test("Combobox details render their own live state and menus include nested interaction", async () => {
   const detail = await readFile(detailSource, "utf8");
   assert.match(detail, /data-component="combobox"/);
-  assert.match(detail, /defaultOpen=\{state === "open" \|\| state === "searching"\}/);
+  assert.match(detail, /defaultOpen=\{state === "open" \|\| state === "searching" \|\| state === "loading" \|\| state === "empty"\}/);
   assert.match(detail, /onCreateValue=\{state === "custom"/);
   assert.match(detail, /component\.name === "MultiSelect"/);
+  assert.match(detail, /onValueChange=\{setMultiSelectValues\}/);
+  assert.match(detail, /value=\{multiSelectValues\}/);
   assert.match(detail, /<NestedMenuPattern/);
 });
 
diff --git a/design-system/packages/theme-openbitfun/src/dark.tokens.json b/design-system/packages/theme-openbitfun/src/dark.tokens.json
index a2e7c8bf71..8462711907 100644
--- a/design-system/packages/theme-openbitfun/src/dark.tokens.json
+++ b/design-system/packages/theme-openbitfun/src/dark.tokens.json
@@ -161,7 +161,7 @@
       "backgroundHover": { "$type": "color", "$value": "rgba(255, 255, 255, 0.06)" },
       "border": { "$type": "color", "$value": "rgba(255, 255, 255, 0.18)" },
       "borderHover": { "$type": "color", "$value": "rgba(255, 255, 255, 0.24)" },
-      "borderFocus": { "$type": "color", "$value": "{ref.color.blue.400}" }
+      "borderFocus": { "$type": "color", "$value": "{ref.color.neutral.550}" }
     },
     "control": {
       "highlight": {
diff --git a/design-system/packages/theme-openbitfun/src/light.tokens.json b/design-system/packages/theme-openbitfun/src/light.tokens.json
index ce5532031d..788920386d 100644
--- a/design-system/packages/theme-openbitfun/src/light.tokens.json
+++ b/design-system/packages/theme-openbitfun/src/light.tokens.json
@@ -161,7 +161,7 @@
       "backgroundHover": { "$type": "color", "$value": "{color.field.background}" },
       "border": { "$type": "color", "$value": "rgba(16, 26, 39, 0.15)" },
       "borderHover": { "$type": "color", "$value": "rgba(16, 26, 39, 0.24)" },
-      "borderFocus": { "$type": "color", "$value": "{ref.color.navy.950}" }
+      "borderFocus": { "$type": "color", "$value": "{ref.color.neutral.550}" }
     },
     "control": {
       "highlight": {
diff --git a/design-system/packages/theme-openbitfun/tests/theme-contract.test.mjs b/design-system/packages/theme-openbitfun/tests/theme-contract.test.mjs
index 0bfdfaa1d2..9db6acc424 100644
--- a/design-system/packages/theme-openbitfun/tests/theme-contract.test.mjs
+++ b/design-system/packages/theme-openbitfun/tests/theme-contract.test.mjs
@@ -166,7 +166,7 @@ test("all theme variants expose the same semantic theme contract", async () => {
   }
 });
 
-test("primary text and primary action pairs meet normal text contrast", async () => {
+test("text, action, and field focus pairs meet their contrast requirements", async () => {
   const [reference, light, dark, highContrastLight, highContrastDark] = await Promise.all([
     readSource("reference.tokens.json"),
     readSource("light.tokens.json"),
@@ -183,6 +183,14 @@ test("primary text and primary action pairs meet normal text contrast", async ()
 
   for (const [mode, variant] of variants) {
     const backdrop = parseColor(variant["color.surface.canvas"].value);
+    assert.ok(
+      contrastRatio(
+        variant["color.field.background"].value,
+        variant["color.field.borderFocus"].value,
+        backdrop,
+      ) >= 3,
+      `${mode} field focus contrast fell below 3:1`,
+    );
     assert.ok(
       contrastRatio(
         variant["color.surface.canvas"].value,
diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index 0ef28dfccd..cb9a77bb70 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -88,6 +88,23 @@ opacity. Theme colors remain caller-owned through `currentColor`. Asset
 fingerprints are reviewed with intentional resource updates so replacing a
 glyph with a similarly named substitute cannot pass unnoticed.
 
+Prefer a catalog `name` whenever it is an exact semantic match. When the
+catalog has no matching symbol, pass the Lucide component through `glyph` so
+the shared boundary applies the standard 1.6 line weight, semantic sizing,
+tone and accessibility behavior:
+
+```tsx
+import { Icon } from "@openbitfun/ui";
+import { Network } from "lucide-react";
+
+<Icon glyph={Network} size="sm" />
+```
+
+Do not set `strokeWidth` at product call sites. Let a button, menu, tab or
+navigation slot own the final glyph geometry; use `size` only for standalone
+icons. Raw Lucide rendering remains appropriate for intentionally filled
+marks, progress indicators, illustrations, or a reviewed optical exception.
+
 Use `canonicalIconNames` for galleries and pickers. `iconNames` also keeps the
 legacy `download`, `circle` and `turn` entries for compatibility; prefer
 `arrow-down`, `unselected` and `<NumberBadge value={18} />` respectively.
@@ -102,7 +119,8 @@ catalog asset.
 
 ## Advanced selection and menus
 
-Use native `Select` for simple options. `Combobox` adds searchable single
+Use `Select` for simple options; its hidden native control preserves form
+participation. `Combobox` adds searchable single
 selection, grouped options, explicit custom-value creation and async loading
 states. `MultiSelect` owns multiple selection, removable tags and select-all.
 Controlled values are authoritative; option discovery remains host-owned.
@@ -112,6 +130,24 @@ The Web UI's legacy Select implementation is retired. Like retired Button and
 Switch overrides, legacy `components.select` Appearance rules are ignored at
 the existing read-only migration boundary; original packages are not rewritten.
 Selection visuals now come from the public field/menu semantic tokens.
+Choose `size` explicitly when composing form rows: selectors default to `md`,
+while `Input` defaults to `sm`. The shared `control.height.sm/md/lg` tokens and
+active density own the actual heights; consumers must not replace them with
+page-level heights or padding overrides. Picker bodies stay single-line and
+token-sized, with labels and validation messages outside that height. Select
+keeps its in-flow anchor mounted when the unified popup covers it, so opening
+does not change the surrounding layout.
+
+`Combobox` and `MultiSelect` use the same joined-surface pattern: the portalled
+search header covers the closed trigger, with a divider and scrollable options
+inside one border and shadow. Flipping above the field keeps the search header
+beside the anchor. Labels, validation, and the field id follow the active input;
+Escape or selection restores the trigger, and Tab continues from its position
+in the form. Search, typed values, and multiple selection remain component-owned.
+`SearchField variant="embedded"` removes its standalone pill surface for these
+compositions; its container must supply padding, height, and visible focus
+treatment. The default SearchField appearance is unchanged.
+
 `FieldGroup fieldSurface="ambient"` keeps text and picker field borders while
 letting their shells reuse the grouped surface. The default field surface stays
 theme-owned, and portalled menus remain on the opaque panel surface.
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.meta.ts b/design-system/packages/ui/src/components/Combobox/Combobox.meta.ts
index 9a4f3b022f..8c58e4f530 100644
--- a/design-system/packages/ui/src/components/Combobox/Combobox.meta.ts
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.meta.ts
@@ -2,7 +2,7 @@ import type { ComponentMeta } from "../../registry.types";
 
 export const comboboxMeta = {
   category: "form",
-  description: "An anchored searchable single-value selector with grouped, clearable, and explicit value-creation support.",
+  description: "A searchable single-value selector with an embedded search header and grouped options on one anchored surface, plus clearing and explicit value creation.",
   maturity: "stable",
   name: "Combobox",
   props: [
@@ -13,7 +13,7 @@ export const comboboxMeta = {
     { defaultValue: "false", name: "clearable", type: "boolean" },
     { defaultValue: "md", name: "size", type: "sm | md | lg" },
   ],
-  states: ["default", "open", "searching", "custom", "invalid", "disabled", "loading"],
+  states: ["default", "open", "searching", "custom", "invalid", "disabled", "loading", "empty"],
   tokens: [
     "color.field.background",
     "color.field.backgroundHover",
@@ -24,6 +24,7 @@ export const comboboxMeta = {
     "color.content.secondary",
     "color.content.muted",
     "color.content.disabled",
+    "color.control.highlight.background",
     "color.action.neutral.content",
     "color.action.neutral.surface",
     "color.border.subtle",
@@ -37,10 +38,13 @@ export const comboboxMeta = {
     "control.select.radius",
     "control.select.indicatorSize",
     "control.select.contentGap",
+    "control.select.trailingInset",
+    "control.iconButton.xsSize",
     "overlay.menu.inlineSize",
     "overlay.menu.surfacePadding",
     "overlay.menu.surfaceRadius",
     "overlay.menu.itemIconSize",
     "shadow.menu",
+    "type.label.selected.fontWeight",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.module.css b/design-system/packages/ui/src/components/Combobox/Combobox.module.css
index eb3956443c..5519a3c686 100644
--- a/design-system/packages/ui/src/components/Combobox/Combobox.module.css
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.module.css
@@ -13,14 +13,19 @@
   .indicator,
   .popover,
   .search,
+  .divider,
+  .options,
   .message,
   .error {
     box-sizing: border-box;
   }
 
-  .root {
+  .root,
+  .popover {
     --_combobox-height: var(--openbitfun-control-height-md);
+  }
 
+  .root {
     position: relative;
     display: flex;
     inline-size: 100%;
@@ -30,11 +35,13 @@
     color: var(--openbitfun-color-content-primary);
   }
 
-  .root[data-size="sm"] {
+  .root[data-size="sm"],
+  .popover[data-size="sm"] {
     --_combobox-height: var(--openbitfun-control-height-sm);
   }
 
-  .root[data-size="lg"] {
+  .root[data-size="lg"],
+  .popover[data-size="lg"] {
     --_combobox-height: var(--openbitfun-control-height-lg);
   }
 
@@ -59,8 +66,10 @@
   .control {
     position: relative;
     display: grid;
+    grid-template-rows: minmax(0, 1fr);
     inline-size: 100%;
     min-inline-size: 0;
+    block-size: var(--_combobox-height);
   }
 
   .trigger {
@@ -69,9 +78,10 @@
     align-items: center;
     inline-size: 100%;
     min-inline-size: 0;
-    min-block-size: var(--_combobox-height);
+    block-size: 100%;
+    min-block-size: 0;
     margin: 0;
-    padding-block: var(--openbitfun-space-1);
+    padding-block: 0;
     padding-inline-start: var(--openbitfun-control-select-padding-inline);
     padding-inline-end: calc(
       var(--openbitfun-control-select-trailing-inset)
@@ -115,12 +125,16 @@
     background: transparent;
   }
 
-  .trigger:focus-visible,
-  .root[data-open="true"] .trigger {
+  .trigger:focus-visible {
     border-color: var(--openbitfun-color-field-border-focus);
     box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring);
   }
 
+  .root[data-open="true"] .control {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   .root[data-invalid="true"] .trigger {
     border-color: var(--openbitfun-color-status-danger-border);
   }
@@ -275,33 +289,83 @@
     position: fixed;
     z-index: var(--openbitfun-layer-popover);
     display: flex;
-    min-inline-size: var(--openbitfun-overlay-menu-inline-size);
+    min-inline-size: 0;
     max-inline-size: calc(100vw - var(--openbitfun-space-4));
     min-block-size: 0;
     flex-direction: column;
-    gap: var(--openbitfun-space-1);
-    padding: var(--openbitfun-overlay-menu-surface-padding);
+    overflow: hidden;
+    padding: 0;
     border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
     border-radius: var(--openbitfun-overlay-menu-surface-radius);
     color: var(--openbitfun-color-action-neutral-content);
     background: var(--openbitfun-color-surface-panel);
     box-shadow: var(--openbitfun-shadow-menu);
+    animation: openbitfun-combobox-in var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-enter);
+  }
+
+  .popover[data-placement="top"] {
+    flex-direction: column-reverse;
+  }
+
+  .popover:focus-within {
+    border-color: var(--openbitfun-color-field-border-focus);
+  }
+
+  .popover[data-invalid="true"] {
+    border-color: var(--openbitfun-color-status-danger-border);
   }
 
   .search {
-    flex: 0 0 auto;
+    display: flex;
+    flex: 0 0 calc(
+      var(--_combobox-height)
+      - var(--openbitfun-border-width-default)
+      - var(--openbitfun-border-width-default)
+    );
+    block-size: calc(
+      var(--_combobox-height)
+      - var(--openbitfun-border-width-default)
+      - var(--openbitfun-border-width-default)
+    );
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--openbitfun-control-select-content-gap);
+    padding-inline-start: var(--openbitfun-control-select-padding-inline);
+    padding-inline-end: calc(
+      var(--openbitfun-control-select-trailing-inset)
+      - (var(--openbitfun-control-icon-button-xs-size) - var(--openbitfun-control-select-indicator-size)) / 2
+    );
   }
 
   .searchField {
+    flex: 1 1 auto;
     inline-size: 100%;
+    min-inline-size: 0;
+    block-size: 100%;
   }
 
-  .searchField [data-openbitfun-component="input"] {
-    border-radius: var(--openbitfun-control-select-radius);
+  .collapse {
+    flex: 0 0 auto;
+  }
+
+  .divider {
+    flex: 0 0 var(--openbitfun-border-width-default);
+    block-size: var(--openbitfun-border-width-default);
+    background: var(--openbitfun-color-border-subtle);
+  }
+
+  .options {
+    display: flex;
+    flex: 1 1 auto;
+    overflow: hidden;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding: var(--openbitfun-overlay-menu-surface-padding);
   }
 
   .listbox {
     flex: 1 1 auto;
+    min-inline-size: 0;
     min-block-size: 0;
   }
 
@@ -314,6 +378,14 @@
     gap: var(--openbitfun-overlay-menu-section-gap);
   }
 
+  .listbox [data-openbitfun-listbox-option][data-selected="true"] [data-openbitfun-part="label"] {
+    font-weight: var(--openbitfun-type-label-selected-font-weight);
+  }
+
+  .listbox [data-openbitfun-listbox-option][data-selected="true"] [data-openbitfun-part="indicator"] {
+    color: var(--openbitfun-color-control-highlight-background);
+  }
+
   .message {
     display: flex;
     align-items: center;
@@ -339,7 +411,8 @@
       transition: none;
     }
 
-    .spinner {
+    .spinner,
+    .popover {
       animation: none;
     }
   }
@@ -347,14 +420,24 @@
   @media (forced-colors: active) {
     .trigger,
     .popover,
+    .popover[data-invalid="true"],
     .root[data-invalid="true"] .trigger {
       border-color: ButtonText;
     }
 
     .trigger:focus-visible,
-    .root[data-open="true"] .trigger {
+    .popover:focus-within {
       border-color: Highlight;
       box-shadow: 0 0 0 var(--openbitfun-focus-width) Highlight;
     }
+
+    .listbox [data-openbitfun-listbox-option][data-selected="true"] [data-openbitfun-part="indicator"] {
+      color: Highlight;
+    }
+  }
+
+  @keyframes openbitfun-combobox-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 }
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.tsx b/design-system/packages/ui/src/components/Combobox/Combobox.tsx
index a1d0dc7388..80ad78ccdb 100644
--- a/design-system/packages/ui/src/components/Combobox/Combobox.tsx
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.tsx
@@ -3,6 +3,7 @@ import {
   useCallback,
   useEffect,
   useId,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -10,6 +11,7 @@ import {
   type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
 } from "react";
+import { flushSync } from "react-dom";
 import { LoaderCircle } from "lucide-react";
 import { Icon } from "../Icon";
 import { classNames } from "../../internal/classNames";
@@ -29,6 +31,8 @@ import {
 import { SearchField } from "../SearchField";
 import styles from "./Combobox.module.css";
 
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 export type ComboboxValue = ListboxValue;
 export type ComboboxSize = "sm" | "md" | "lg";
 export type ComboboxPlacement = Extract<LayerPlacement, "top" | "bottom">;
@@ -182,9 +186,11 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
   const [keyboardOpen, setKeyboardOpen] = useState(false);
   const rootRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
+  const restoreFocusAfterCloseRef = useRef(false);
   const dismissibleBranches = useMemo(() => [rootRef], []);
-  const resolvedOpen = open ?? uncontrolledOpen;
+  const resolvedOpen = !disabled && (open ?? uncontrolledOpen);
   const selectedValues = useMemo<ComboboxValue[]>(() => {
     if (multiple) {
       const values = controlledValue as readonly ComboboxValue[] | undefined;
@@ -208,6 +214,13 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
     onOpenChange?.(nextOpen);
   }, [onOpenChange, open, resolvedOpen]);
 
+  const closeListbox = useCallback((restoreFocus: boolean) => {
+    restoreFocusAfterCloseRef.current = restoreFocus;
+    updateOpen(false);
+    setQuery("");
+    setActiveIndex(-1);
+  }, [updateOpen]);
+
   const commitValues = useCallback((nextValues: ComboboxValue[]) => {
     if (controlledValue === undefined) setUncontrolledValues(nextValues);
     if (multiple) {
@@ -269,10 +282,8 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
       return;
     }
     commitValues([option.value]);
-    setQuery("");
-    updateOpen(false);
-    triggerRef.current?.focus();
-  }, [commitValues, disabled, loading, multiple, selectedValues, updateOpen]);
+    closeListbox(true);
+  }, [closeListbox, commitValues, disabled, loading, multiple, selectedValues]);
 
   const submitCreateValue = useCallback((candidate: string) => {
     if (!onCreateValue || disabled || loading) return;
@@ -284,11 +295,10 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
       }
     } else {
       commitValues([createdValue]);
-      updateOpen(false);
-      triggerRef.current?.focus();
+      closeListbox(true);
     }
     setQuery("");
-  }, [commitValues, disabled, loading, multiple, onCreateValue, selectedValues, updateOpen]);
+  }, [closeListbox, commitValues, disabled, loading, multiple, onCreateValue, selectedValues]);
 
   const toggleSelectAll = useCallback(() => {
     if (!multiple || disabled || loading) return;
@@ -312,6 +322,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
 
   const openListbox = useCallback((direction: 1 | -1 = 1, keyboard = false) => {
     if (disabled) return;
+    restoreFocusAfterCloseRef.current = false;
     setKeyboardOpen(keyboard);
     updateOpen(true);
     if (!keyboard) {
@@ -328,13 +339,6 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
       : firstEnabledIndex(navigationItems, direction));
   }, [disabled, navigationItems, selectedValues, updateOpen]);
 
-  const closeListbox = useCallback((restoreFocus: boolean) => {
-    updateOpen(false);
-    setQuery("");
-    setActiveIndex(-1);
-    if (restoreFocus) triggerRef.current?.focus();
-  }, [updateOpen]);
-
   const handleTriggerKeyDown = useCallback((event: ReactKeyboardEvent<HTMLButtonElement>) => {
     if (disabled) return;
     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -392,9 +396,13 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
             || option.label.toLocaleLowerCase() === candidate.toLocaleLowerCase()
           ))
         : undefined;
-      if (exactOption && !exactOption.disabled) selectOption(exactOption);
-      else if (createCandidate) submitCreateValue(createCandidate);
-      closeListbox(false);
+      // Restore the in-flow trigger before native Tab/Shift+Tab traversal.
+      // Otherwise removing the focused portal input loses the field's tab position.
+      flushSync(() => {
+        if (exactOption && !exactOption.disabled) selectOption(exactOption);
+        else if (createCandidate) submitCreateValue(createCandidate);
+        closeListbox(true);
+      });
     }
   }, [activateItem, activeIndex, closeListbox, createCandidate, moveActive, navigationItems, options, query, selectOption, submitCreateValue]);
 
@@ -412,9 +420,20 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
     layerRef: popoverRef,
     placement,
     matchWidth: true,
+    overlapAnchor: true,
     revision: `${query}:${filteredOptions.length}:${loading}`,
   });
 
+  const positioned = layout !== null;
+  useIsomorphicLayoutEffect(() => {
+    if (resolvedOpen) {
+      if (positioned) searchRef.current?.focus({ preventScroll: true });
+    } else if (restoreFocusAfterCloseRef.current) {
+      restoreFocusAfterCloseRef.current = false;
+      triggerRef.current?.focus({ preventScroll: true });
+    }
+  }, [positioned, resolvedOpen]);
+
   useEffect(() => {
     if (!resolvedOpen || activeIndex < 0) return;
     document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
@@ -492,7 +511,9 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
       data-openbitfun-component={multiple ? "multi-select-popup" : "combobox-popup"}
       data-openbitfun-part="popover"
       data-keyboard-open={keyboardOpen ? "true" : "false"}
+      data-invalid={invalid ? "true" : "false"}
       data-placement={layout?.placement ?? placement}
+      data-size={size}
       ref={popoverRef}
       style={layout?.style ?? { position: "fixed", visibility: "hidden" }}
     >
@@ -501,12 +522,18 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
           aria-activedescendant={activeDescendant}
           aria-autocomplete="list"
           aria-controls={listboxId}
+          aria-describedby={resolvedDescribedBy}
           aria-expanded={resolvedOpen}
-          aria-label={designSystem.messages.searchOptions}
+          aria-label={resolvedTriggerLabel ?? (providedId || resolvedLabelledBy ? undefined : designSystem.messages.searchOptions)}
+          aria-labelledby={resolvedLabelledBy}
+          aria-required={required || undefined}
+          aria-busy={loading || undefined}
           autoComplete="off"
           className={styles.searchField}
           clearLabel={query ? designSystem.messages.clearSelection : undefined}
-          leadingIcon={<Icon name="search" />}
+          id={id}
+          invalid={invalid}
+          leadingIcon={<Icon name="search" size="sm" />}
           onClear={query
             ? () => {
                 setQuery("");
@@ -519,67 +546,78 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
             setActiveIndex(-1);
           }}
           placeholder={designSystem.messages.searchOptions}
-          ref={(node) => {
-            if (node && resolvedOpen) node.focus();
-          }}
+          ref={searchRef}
           role="combobox"
           size={size}
           value={query}
+          variant="embedded"
+        />
+        <IconButton
+          aria-label={designSystem.messages.dialogClose}
+          className={styles.collapse}
+          data-openbitfun-part="collapse"
+          icon={<Icon name="chevron-up" />}
+          onClick={() => closeListbox(true)}
+          size="xs"
+          variant="quiet"
         />
       </div>
-      <Listbox
-        aria-label={ariaLabel ?? (typeof label === "string" ? label : "Options")}
-        className={styles.listbox}
-        focusMode="virtual"
-        id={listboxId}
-        multiple={multiple}
-      >
-        {loading && filteredOptions.length === 0 ? (
-          <ListboxEmpty className={styles.message}>
-            <LoaderCircle aria-hidden="true" className={styles.spinner} />
-            <span>{designSystem.messages.loading}</span>
-          </ListboxEmpty>
-        ) : navigationItems.length === 0 ? (
-          <ListboxEmpty>{designSystem.messages.noOptions}</ListboxEmpty>
-        ) : (
-          <>
-            {navigationItems[0]?.kind === "all" && (
-              <ListboxOption
-                active={activeIndex === 0}
-                id={optionId(0)}
-                indicator={allFilteredSelected ? <Icon name="check-line" /> : null}
-                onClick={toggleSelectAll}
-                onMouseDown={(event) => event.preventDefault()}
-                selected={allFilteredSelected}
-              >
-                {designSystem.messages.selectAll}
-              </ListboxOption>
-            )}
-            {groupedOptions.ungrouped.map(renderListboxOption)}
-            {[...groupedOptions.groups].map(([groupLabel, groupOptions]) => (
-              <ListboxGroup key={groupLabel} label={groupLabel}>
-                {groupOptions.map(renderListboxOption)}
-              </ListboxGroup>
-            ))}
-            {createCandidate && (() => {
-              const createIndex = navigationItems.findIndex((item) => item.kind === "create");
-              return (
+      <div aria-hidden="true" className={styles.divider} data-openbitfun-part="divider" />
+      <div className={styles.options} data-openbitfun-part="options">
+        <Listbox
+          aria-label={ariaLabel ?? (typeof label === "string" ? label : "Options")}
+          className={styles.listbox}
+          focusMode="virtual"
+          id={listboxId}
+          multiple={multiple}
+        >
+          {loading && filteredOptions.length === 0 ? (
+            <ListboxEmpty className={styles.message}>
+              <LoaderCircle aria-hidden="true" className={styles.spinner} />
+              <span>{designSystem.messages.loading}</span>
+            </ListboxEmpty>
+          ) : navigationItems.length === 0 ? (
+            <ListboxEmpty>{designSystem.messages.noOptions}</ListboxEmpty>
+          ) : (
+            <>
+              {navigationItems[0]?.kind === "all" && (
                 <ListboxOption
-                  active={activeIndex === createIndex}
-                  id={optionId(createIndex)}
-                  leading={<Icon name="plus" />}
-                  onClick={() => submitCreateValue(createCandidate)}
+                  active={activeIndex === 0}
+                  id={optionId(0)}
+                  indicator={allFilteredSelected ? <Icon name="check-line" /> : null}
+                  onClick={toggleSelectAll}
                   onMouseDown={(event) => event.preventDefault()}
-                  selected={selectedValues.includes(createCandidate)}
-                  value={createCandidate}
+                  selected={allFilteredSelected}
                 >
-                  {designSystem.messages.createValue}: {createCandidate}
+                  {designSystem.messages.selectAll}
                 </ListboxOption>
-              );
-            })()}
-          </>
-        )}
-      </Listbox>
+              )}
+              {groupedOptions.ungrouped.map(renderListboxOption)}
+              {[...groupedOptions.groups].map(([groupLabel, groupOptions]) => (
+                <ListboxGroup key={groupLabel} label={groupLabel}>
+                  {groupOptions.map(renderListboxOption)}
+                </ListboxGroup>
+              ))}
+              {createCandidate && (() => {
+                const createIndex = navigationItems.findIndex((item) => item.kind === "create");
+                return (
+                  <ListboxOption
+                    active={activeIndex === createIndex}
+                    id={optionId(createIndex)}
+                    leading={<Icon name="plus" />}
+                    onClick={() => submitCreateValue(createCandidate)}
+                    onMouseDown={(event) => event.preventDefault()}
+                    selected={selectedValues.includes(createCandidate)}
+                    value={createCandidate}
+                  >
+                    {designSystem.messages.createValue}: {createCandidate}
+                  </ListboxOption>
+                );
+              })()}
+            </>
+          )}
+        </Listbox>
+      </div>
     </div>
   ) : null;
 
@@ -603,6 +641,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
         </label>
       )}
       <div
+        aria-hidden={resolvedOpen || undefined}
         className={styles.control}
         data-openbitfun-part="control"
         data-tags={multiple && hasValue ? "true" : "false"}
@@ -623,6 +662,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
                   onMouseDown={(event) => event.preventDefault()}
                   shape="circle"
                   size="xs"
+                  tabIndex={resolvedOpen ? -1 : undefined}
                   variant="quiet"
                 />
               </span>
@@ -633,9 +673,9 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
           </span>
         )}
         <button
-          aria-controls={resolvedOpen ? listboxId : undefined}
+          aria-controls={resolvedOpen ? undefined : listboxId}
           aria-describedby={resolvedDescribedBy}
-          aria-expanded={resolvedOpen}
+          aria-expanded={resolvedOpen ? undefined : false}
           aria-haspopup="listbox"
           aria-invalid={invalid || undefined}
           aria-label={resolvedTriggerLabel}
@@ -645,14 +685,15 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
           className={styles.trigger}
           data-openbitfun-part="trigger"
           disabled={disabled}
-          id={id}
+          id={resolvedOpen ? undefined : id}
           onClick={() => {
             if (resolvedOpen) closeListbox(false);
             else openListbox(1, false);
           }}
           onKeyDown={handleTriggerKeyDown}
           ref={triggerRef}
-          role="combobox"
+          role={resolvedOpen ? undefined : "combobox"}
+          tabIndex={resolvedOpen ? -1 : undefined}
           type="button"
         >
           <span className={styles.value} data-openbitfun-part="value">
@@ -681,6 +722,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
               setQuery("");
             }}
             size="sm"
+            tabIndex={resolvedOpen ? -1 : undefined}
             variant="quiet"
           />
         )}
diff --git a/design-system/packages/ui/src/components/Icon/Icon.meta.ts b/design-system/packages/ui/src/components/Icon/Icon.meta.ts
index 740dea7e8d..07b55d6689 100644
--- a/design-system/packages/ui/src/components/Icon/Icon.meta.ts
+++ b/design-system/packages/ui/src/components/Icon/Icon.meta.ts
@@ -2,11 +2,12 @@ import type { ComponentMeta } from "../../registry.types";
 
 export const iconMeta = {
   category: "primitive",
-  description: "A named, semantic-color icon catalog with explicit sizing and accessible labeling.",
+  description: "A semantic icon boundary for the reviewed catalog and normalized line-glyph fallbacks.",
   maturity: "stable",
   name: "Icon",
   props: [
     { name: "name", type: "IconName" },
+    { name: "glyph", type: "LucideIcon" },
     { defaultValue: "lg", name: "size", type: "2xs | xs | sm | md | lg" },
     { defaultValue: "inherit", name: "tone", type: "inherit | primary | secondary | muted | disabled | info | success | warning | danger" },
     { name: "label", type: "string" },
diff --git a/design-system/packages/ui/src/components/Icon/Icon.module.css b/design-system/packages/ui/src/components/Icon/Icon.module.css
index 8b5f0b8904..3c1174e16e 100644
--- a/design-system/packages/ui/src/components/Icon/Icon.module.css
+++ b/design-system/packages/ui/src/components/Icon/Icon.module.css
@@ -15,6 +15,16 @@
     mask-size: contain;
   }
 
+  .icon[data-openbitfun-source="line"] {
+    background-color: transparent;
+  }
+
+  .icon[data-openbitfun-source="line"] > svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   .icon[data-size="2xs"] {
     --_icon-size: var(--openbitfun-control-icon-size2xs);
   }
diff --git a/design-system/packages/ui/src/components/Icon/Icon.tsx b/design-system/packages/ui/src/components/Icon/Icon.tsx
index add3800d46..7b259d32b1 100644
--- a/design-system/packages/ui/src/components/Icon/Icon.tsx
+++ b/design-system/packages/ui/src/components/Icon/Icon.tsx
@@ -3,6 +3,7 @@ import {
   type CSSProperties,
   type HTMLAttributes,
 } from "react";
+import type { LucideIcon } from "lucide-react";
 import { classNames } from "../../internal/classNames";
 import arrowLeftUrl from "./assets/arrow-left.svg";
 import arrowRightUrl from "./assets/arrow-right.svg";
@@ -156,6 +157,10 @@ export type IconTone =
   | "warning"
   | "danger";
 
+export type IconSource =
+  | { glyph: LucideIcon; name?: never }
+  | { glyph?: never; name: IconName };
+
 const iconSources = {
   "arrow-down": downloadUrl,
   unselected: circleUrl,
@@ -225,16 +230,20 @@ const iconSources = {
   xmark: xmarkUrl,
 } as const satisfies Record<IconName, string>;
 
-export interface IconProps
+interface IconBaseProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "aria-label" | "children"> {
   label?: string;
-  name: IconName;
   size?: IconSize;
   tone?: IconTone;
 }
 
+export type IconProps = IconBaseProps & IconSource;
+
+const LINE_ICON_STROKE_WIDTH = 1.6;
+
 export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon({
   className,
+  glyph: LineGlyph,
   label,
   name,
   size = "lg",
@@ -242,12 +251,14 @@ export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon({
   tone = "inherit",
   ...props
 }, ref) {
-  const iconSource = `url("${iconSources[name]}")`;
-  const iconStyle: CSSProperties = {
-    ...style,
-    WebkitMaskImage: iconSource,
-    maskImage: iconSource,
-  };
+  const catalogSource = name ? `url("${iconSources[name]}")` : undefined;
+  const iconStyle: CSSProperties = catalogSource
+    ? {
+        ...style,
+        WebkitMaskImage: catalogSource,
+        maskImage: catalogSource,
+      }
+    : style ?? {};
 
   return (
     <span
@@ -257,11 +268,20 @@ export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon({
       className={classNames(styles.icon, className)}
       data-openbitfun-component="icon"
       data-openbitfun-name={name}
+      data-openbitfun-source={name ? "catalog" : "line"}
       data-openbitfun-tone={tone}
       data-size={size}
       ref={ref}
       role={label ? "img" : undefined}
       style={iconStyle}
-    />
+    >
+      {LineGlyph ? (
+        <LineGlyph
+          aria-hidden="true"
+          focusable="false"
+          strokeWidth={LINE_ICON_STROKE_WIDTH}
+        />
+      ) : null}
+    </span>
   );
 });
diff --git a/design-system/packages/ui/src/components/Icon/index.ts b/design-system/packages/ui/src/components/Icon/index.ts
index 24df694847..751b091b42 100644
--- a/design-system/packages/ui/src/components/Icon/index.ts
+++ b/design-system/packages/ui/src/components/Icon/index.ts
@@ -6,5 +6,6 @@ export {
   type IconName,
   type IconProps,
   type IconSize,
+  type IconSource,
   type IconTone,
 } from "./Icon";
diff --git a/design-system/packages/ui/src/components/Input/Input.meta.ts b/design-system/packages/ui/src/components/Input/Input.meta.ts
index 3fe09eb07f..a0fbf5b407 100644
--- a/design-system/packages/ui/src/components/Input/Input.meta.ts
+++ b/design-system/packages/ui/src/components/Input/Input.meta.ts
@@ -27,7 +27,6 @@ export const inputMeta = {
     "color.field.borderHover",
     "color.field.borderFocus",
     "color.accent.default",
-    "color.focus.ring",
     "color.status.danger.border",
     "control.height.sm",
     "control.height.md",
diff --git a/design-system/packages/ui/src/components/Input/Input.module.css b/design-system/packages/ui/src/components/Input/Input.module.css
index 7b9a374834..768094b06c 100644
--- a/design-system/packages/ui/src/components/Input/Input.module.css
+++ b/design-system/packages/ui/src/components/Input/Input.module.css
@@ -15,11 +15,10 @@
     background: var(--openbitfun-color-field-background);
     transition:
       background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
-      border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
-      box-shadow var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+      border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
   }
 
-  .field:hover:not([data-disabled="true"]) {
+  .field:hover:where(:not([data-disabled="true"])) {
     border-color: var(--openbitfun-color-field-border-hover);
     background: var(--openbitfun-color-field-background-hover);
   }
@@ -31,17 +30,13 @@
 
   .field:focus-within {
     border-color: var(--openbitfun-color-field-border-focus);
-    box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring);
+    box-shadow: none;
   }
 
   .field[data-invalid="true"] {
     border-color: var(--openbitfun-color-status-danger-border);
   }
 
-  .field[data-invalid="true"]:focus-within {
-    box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-status-danger-surface);
-  }
-
   .field[data-disabled="true"] {
     color: var(--openbitfun-color-content-disabled);
     cursor: not-allowed;
@@ -120,7 +115,6 @@
 
     .field:focus-within {
       border-color: Highlight;
-      box-shadow: 0 0 0 var(--openbitfun-focus-width) Highlight;
     }
   }
 }
diff --git a/design-system/packages/ui/src/components/MultiSelect/MultiSelect.meta.ts b/design-system/packages/ui/src/components/MultiSelect/MultiSelect.meta.ts
index 198169edda..f886fe7a76 100644
--- a/design-system/packages/ui/src/components/MultiSelect/MultiSelect.meta.ts
+++ b/design-system/packages/ui/src/components/MultiSelect/MultiSelect.meta.ts
@@ -2,7 +2,7 @@ import type { ComponentMeta } from "../../registry.types";
 
 export const multiSelectMeta = {
   category: "form",
-  description: "An anchored searchable multi-value selector with structured options, tags, select-all, and explicit value creation.",
+  description: "A searchable multi-value selector with an embedded search header and structured options on one anchored surface, plus tags, select-all, and explicit value creation.",
   maturity: "stable",
   name: "MultiSelect",
   props: [
@@ -15,7 +15,7 @@ export const multiSelectMeta = {
     { defaultValue: "false", name: "showSelectAll", type: "boolean" },
     { defaultValue: "md", name: "size", type: "sm | md | lg" },
   ],
-  states: ["default", "open", "searching", "custom", "invalid", "disabled", "loading"],
+  states: ["default", "open", "searching", "custom", "invalid", "disabled", "loading", "empty"],
   tokens: [
     "color.field.background",
     "color.field.backgroundHover",
@@ -26,6 +26,7 @@ export const multiSelectMeta = {
     "color.content.secondary",
     "color.content.muted",
     "color.content.disabled",
+    "color.control.highlight.background",
     "color.action.neutral.content",
     "color.action.neutral.surface",
     "color.border.subtle",
@@ -39,10 +40,13 @@ export const multiSelectMeta = {
     "control.select.radius",
     "control.select.indicatorSize",
     "control.select.contentGap",
+    "control.select.trailingInset",
+    "control.iconButton.xsSize",
     "overlay.menu.inlineSize",
     "overlay.menu.surfacePadding",
     "overlay.menu.surfaceRadius",
     "overlay.menu.itemIconSize",
     "shadow.menu",
+    "type.label.selected.fontWeight",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/NumberInput/NumberInput.meta.ts b/design-system/packages/ui/src/components/NumberInput/NumberInput.meta.ts
index 1bb2fc5cb9..435b89d2ed 100644
--- a/design-system/packages/ui/src/components/NumberInput/NumberInput.meta.ts
+++ b/design-system/packages/ui/src/components/NumberInput/NumberInput.meta.ts
@@ -11,5 +11,5 @@ export const numberInputMeta = {
     { name: "unit", type: "string" }, { name: "variant", type: "default | compact | stepper", defaultValue: "default" },
   ],
   states: ["default", "hover", "focus-visible", "disabled"],
-  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.field.background", "color.field.border", "color.field.borderFocus", "color.focus.ring", "control.height.sm", "control.height.md", "control.height.lg"],
+  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.field.background", "color.field.border", "color.field.borderFocus", "control.height.sm", "control.height.md", "control.height.lg"],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css b/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css
index 395a3f494a..a75e39ce0c 100644
--- a/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css
+++ b/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css
@@ -3,10 +3,10 @@
   .root[data-size="sm"] { --_height: var(--openbitfun-control-height-sm); }
   .root[data-size="lg"] { --_height: var(--openbitfun-control-height-lg); }
   .label { 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-label-md-line-height); letter-spacing: var(--openbitfun-type-label-md-letter-spacing); }
-  .control { display: inline-flex; align-items: stretch; min-inline-size: 0; block-size: var(--_height); overflow: hidden; border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-field-border); border-radius: var(--openbitfun-radius-base); background: var(--openbitfun-color-field-background); transition: border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), box-shadow var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .control { display: inline-flex; align-items: stretch; min-inline-size: 0; block-size: var(--_height); overflow: hidden; border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-field-border); border-radius: var(--openbitfun-radius-base); background: var(--openbitfun-color-field-background); transition: border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
   .root[data-field-surface="ambient"] .control { background: transparent; }
-  .root:not([data-disabled="true"]) .control:hover { border-color: var(--openbitfun-color-field-border-hover); }
-  .control:focus-within { border-color: var(--openbitfun-color-field-border-focus); box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring); }
+  .root:where(:not([data-disabled="true"])) .control:hover { border-color: var(--openbitfun-color-field-border-hover); }
+  .root .control:focus-within { border-color: var(--openbitfun-color-field-border-focus); box-shadow: none; }
   .input { flex: 1 1 auto; min-inline-size: 0; inline-size: 100%; padding-inline: var(--openbitfun-space-3); border: 0; outline: 0; color: inherit; background: transparent; 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); font-variant-numeric: tabular-nums; line-height: var(--openbitfun-type-label-md-line-height); letter-spacing: var(--openbitfun-type-label-md-letter-spacing); text-align: end; }
   .input:has(+ .unit) { padding-inline-end: var(--openbitfun-space-1); }
   .unit { display: inline-flex; flex: 0 0 auto; box-sizing: content-box; min-inline-size: 2ch; align-items: center; justify-content: flex-end; padding-inline-end: var(--openbitfun-space-2); color: var(--openbitfun-color-content-muted); font-family: var(--openbitfun-type-code-sm-font-family); font-size: var(--openbitfun-type-support-font-size); font-weight: var(--openbitfun-type-support-font-weight); line-height: var(--openbitfun-type-support-line-height); letter-spacing: var(--openbitfun-type-support-letter-spacing); white-space: nowrap; }
@@ -19,5 +19,5 @@
   .root[data-variant="default"] .buttons button { min-inline-size: 20px; font-size: var(--openbitfun-type-meta-font-size); line-height: var(--openbitfun-type-meta-line-height); }
   .root[data-variant="default"] .buttons button + button { border-block-start: var(--openbitfun-border-width-default) solid var(--openbitfun-color-field-border); }
   @media (prefers-reduced-motion: reduce) { .control { transition: none; } }
-  @media (forced-colors: active) { .control { border-color: ButtonText; } .control:focus-within { border-color: Highlight; box-shadow: 0 0 0 var(--openbitfun-focus-width) Highlight; } }
+  @media (forced-colors: active) { .control { border-color: ButtonText; } .root .control:focus-within { border-color: Highlight; } }
 }
diff --git a/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts b/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
index 7efa01f9dd..07701afc54 100644
--- a/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
+++ b/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
@@ -6,6 +6,7 @@ export const searchFieldMeta = {
   maturity: "stable",
   name: "SearchField",
   props: [
+    { defaultValue: "default", name: "variant", type: "default | embedded" },
     { name: "value", type: "string" },
     { name: "defaultValue", type: "string" },
     { name: "placeholder", type: "string" },
@@ -30,7 +31,6 @@ export const searchFieldMeta = {
     "color.field.border",
     "color.field.borderHover",
     "color.field.borderFocus",
-    "color.focus.ring",
     "color.status.danger.border",
     "control.height.sm",
     "control.height.md",
diff --git a/design-system/packages/ui/src/components/SearchField/SearchField.module.css b/design-system/packages/ui/src/components/SearchField/SearchField.module.css
index 3fc397d742..8f64924e13 100644
--- a/design-system/packages/ui/src/components/SearchField/SearchField.module.css
+++ b/design-system/packages/ui/src/components/SearchField/SearchField.module.css
@@ -18,8 +18,13 @@
     background: transparent;
   }
 
-  .root .field:not([data-invalid="true"]):focus-within {
-    border-color: var(--openbitfun-color-content-primary);
+  .root[data-variant="embedded"] .field,
+  .root[data-variant="embedded"] .field:is(:hover, :focus-within, [data-invalid="true"]) {
+    block-size: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
     box-shadow: none;
   }
 
@@ -43,10 +48,4 @@
     white-space: nowrap;
   }
 
-  @media (forced-colors: active) {
-    .root .field:not([data-invalid="true"]):focus-within {
-      border-color: Highlight;
-      box-shadow: none;
-    }
-  }
 }
diff --git a/design-system/packages/ui/src/components/SearchField/SearchField.tsx b/design-system/packages/ui/src/components/SearchField/SearchField.tsx
index 17a852d017..5ab92f3a44 100644
--- a/design-system/packages/ui/src/components/SearchField/SearchField.tsx
+++ b/design-system/packages/ui/src/components/SearchField/SearchField.tsx
@@ -12,6 +12,8 @@ import styles from "./SearchField.module.css";
 
 export interface SearchFieldProps
   extends Omit<InputProps, "leading" | "trailing" | "type"> {
+  /** Embedded fields delegate the surface, padding, height, and focus treatment to their container. */
+  variant?: "default" | "embedded";
   clearLabel?: string;
   leadingIcon?: ReactNode;
   onClear?: MouseEventHandler<HTMLButtonElement>;
@@ -30,6 +32,7 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
   onSearch,
   shortcut,
   trailing,
+  variant = "default",
   ...props
 }, ref) {
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
@@ -65,7 +68,7 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
       );
 
   return (
-    <span className={classNames(styles.root, className)} data-openbitfun-component="search-field">
+    <span className={classNames(styles.root, className)} data-openbitfun-component="search-field" data-variant={variant}>
       <Input
         {...props}
         className={styles.field}
diff --git a/design-system/packages/ui/src/components/Select/Select.meta.ts b/design-system/packages/ui/src/components/Select/Select.meta.ts
index 39617b8b01..70e6668f9a 100644
--- a/design-system/packages/ui/src/components/Select/Select.meta.ts
+++ b/design-system/packages/ui/src/components/Select/Select.meta.ts
@@ -2,7 +2,7 @@ import type { ComponentMeta } from "../../registry.types";
 
 export const selectMeta = {
   category: "form",
-  description: "A native single-value selection control with grouped options, typed values, and independent leading and indicator regions.",
+  description: "A select-only combobox whose expanded header and grouped options share one themed surface, with typed values, native form participation, and keyboard navigation.",
   maturity: "stable",
   name: "Select",
   props: [
@@ -12,10 +12,13 @@ export const selectMeta = {
     { name: "placeholder", type: "string" },
     { name: "leading", type: "ReactNode" },
     { defaultValue: "md", name: "size", type: "sm | md | lg" },
+    { defaultValue: "bottom", name: "placement", type: "top | bottom" },
+    { name: "open / defaultOpen", type: "boolean" },
+    { name: "onOpenChange", type: "(open: boolean) => void" },
     { defaultValue: "false", name: "invalid", type: "boolean" },
     { name: "onValueChange", type: "(value: SelectValue) => void" },
   ],
-  states: ["default", "hover", "focus-visible", "invalid", "disabled"],
+  states: ["default", "hover", "focus-visible", "open", "invalid", "disabled"],
   tokens: [
     "color.field.background",
     "color.field.backgroundHover",
@@ -25,6 +28,13 @@ export const selectMeta = {
     "color.content.primary",
     "color.content.muted",
     "color.content.disabled",
+    "color.control.highlight.background",
+    "color.selection.surface",
+    "color.surface.panel",
+    "color.border.subtle",
+    "color.action.neutral.content",
+    "color.action.neutral.surface",
+    "color.action.neutral.surfacePressed",
     "color.status.danger.border",
     "color.status.danger.surface",
     "color.focus.ring",
@@ -37,6 +47,19 @@ export const selectMeta = {
     "control.select.contentGap",
     "control.select.indicatorSize",
     "control.select.radius",
+    "overlay.menu.inlineSize",
+    "overlay.menu.maxBlockSize",
+    "overlay.menu.surfacePadding",
+    "overlay.menu.surfaceRadius",
+    "overlay.menu.sectionGap",
+    "overlay.menu.headingHeight",
+    "overlay.menu.headingPaddingInline",
+    "overlay.menu.itemHeight",
+    "overlay.menu.itemPaddingInline",
+    "overlay.menu.itemGap",
+    "overlay.menu.itemRadius",
+    "overlay.menu.itemIconSize",
+    "shadow.menu",
     "type.label.md.fontSize",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Select/Select.module.css b/design-system/packages/ui/src/components/Select/Select.module.css
index 6e39cf3f44..a6fd60b183 100644
--- a/design-system/packages/ui/src/components/Select/Select.module.css
+++ b/design-system/packages/ui/src/components/Select/Select.module.css
@@ -1,53 +1,67 @@
 @layer openbitfun.components {
   .root,
-  .select,
+  .native,
+  .trigger,
   .leading,
-  .indicator {
+  .value,
+  .placeholder,
+  .indicator,
+  .popover,
+  .popoverHeader,
+  .divider,
+  .options {
     box-sizing: border-box;
   }
 
-  .root {
+  .root,
+  .popover {
     --_select-height: var(--openbitfun-control-height-md);
-    --_select-leading-space: 0px;
+  }
 
+  .root {
     position: relative;
-    display: inline-grid;
+    /* A full-width field must not add a text line box in wrapper elements. */
+    display: grid;
     min-inline-size: 0;
     inline-size: 100%;
+    block-size: var(--_select-height);
     color: var(--openbitfun-color-content-primary);
   }
 
-  .root[data-size="sm"] {
+  .root[data-size="sm"],
+  .popover[data-size="sm"] {
     --_select-height: var(--openbitfun-control-height-sm);
   }
 
-  .root[data-size="lg"] {
+  .root[data-size="lg"],
+  .popover[data-size="lg"] {
     --_select-height: var(--openbitfun-control-height-lg);
   }
 
-  .root[data-has-leading="true"] {
-    --_select-leading-space: calc(
-      var(--openbitfun-control-select-indicator-size)
-      + var(--openbitfun-control-select-content-gap)
-    );
+  .native {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
   }
 
-  .select {
-    grid-area: 1 / 1;
+  .trigger {
+    display: flex;
+    align-items: center;
     min-inline-size: 0;
     inline-size: 100%;
     block-size: var(--_select-height);
+    gap: var(--openbitfun-control-select-content-gap);
     margin: 0;
     padding-block: 0;
-    padding-inline-start: calc(
-      var(--openbitfun-control-select-padding-inline)
-      + var(--_select-leading-space)
-    );
-    padding-inline-end: calc(
-      var(--openbitfun-control-select-trailing-inset)
-      + var(--openbitfun-control-select-indicator-size)
-      + var(--openbitfun-control-select-content-gap)
-    );
+    padding-inline: var(--openbitfun-control-select-padding-inline);
     border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-field-border);
     border-radius: var(--openbitfun-control-select-radius);
     outline: 0;
@@ -58,7 +72,7 @@
     font-weight: var(--openbitfun-type-label-md-font-weight);
     line-height: var(--openbitfun-type-label-md-line-height);
     letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
-    appearance: none;
+    text-align: start;
     cursor: pointer;
     transition:
       background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
@@ -66,26 +80,31 @@
       box-shadow var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
   }
 
-  .select:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled) {
+  .trigger:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled) {
     border-color: var(--openbitfun-color-field-border-hover);
     background: var(--openbitfun-color-field-background-hover);
   }
 
-  .root[data-field-surface="ambient"] .select,
-  .root[data-field-surface="ambient"] .select:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled) {
+  .root[data-field-surface="ambient"] .trigger,
+  .root[data-field-surface="ambient"] .trigger:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled) {
     background: transparent;
   }
 
-  .select:is(:focus-visible, [data-openbitfun-preview-state="focus-visible"]) {
+  .trigger:is(:focus-visible, [data-openbitfun-preview-state="focus-visible"]) {
     border-color: var(--openbitfun-color-field-border-focus);
     box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring);
   }
 
-  .root[data-invalid="true"] .select {
+  .root[data-open="true"] > .trigger {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .root[data-invalid="true"] .trigger {
     border-color: var(--openbitfun-color-status-danger-border);
   }
 
-  .root[data-invalid="true"] .select:is(:focus-visible, [data-openbitfun-preview-state="focus-visible"]) {
+  .root[data-invalid="true"] .trigger:is(:focus-visible, [data-openbitfun-preview-state="focus-visible"]) {
     box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-status-danger-surface);
   }
 
@@ -94,16 +113,14 @@
     opacity: var(--openbitfun-opacity-disabled);
   }
 
-  .select:disabled {
+  .trigger:disabled {
     cursor: not-allowed;
   }
 
   .leading,
   .indicator {
-    z-index: 1;
-    grid-area: 1 / 1;
     display: inline-flex;
-    align-self: center;
+    flex: 0 0 var(--openbitfun-control-select-indicator-size);
     align-items: center;
     justify-content: center;
     inline-size: var(--openbitfun-control-select-indicator-size);
@@ -112,40 +129,187 @@
     pointer-events: none;
   }
 
-  .leading {
-    justify-self: start;
-    margin-inline-start: var(--openbitfun-control-select-leading-inset);
-  }
-
-  .indicator {
-    justify-self: end;
-    margin-inline-end: var(--openbitfun-control-select-trailing-inset);
-  }
-
   .leading > :where(svg, img),
   .leading > [data-openbitfun-component="icon"],
+  .indicator > :where(svg, img),
   .indicator > [data-openbitfun-component="icon"] {
     display: block;
     inline-size: 100%;
     block-size: 100%;
   }
 
+  .value,
+  .placeholder {
+    overflow: hidden;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .placeholder {
+    color: var(--openbitfun-color-content-muted);
+  }
+
+  .indicator {
+    margin-inline-start: auto;
+    transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+  }
+
+  .popoverHeader .indicator {
+    transform: rotate(180deg);
+  }
+
+  .popover {
+    position: fixed;
+    z-index: var(--openbitfun-layer-popover);
+    display: flex;
+    min-inline-size: 0;
+    max-inline-size: calc(100vw - var(--openbitfun-space-4));
+    min-block-size: 0;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0;
+    border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+    border-radius: var(--openbitfun-overlay-menu-surface-radius);
+    color: var(--openbitfun-color-action-neutral-content);
+    background: var(--openbitfun-color-surface-panel);
+    box-shadow: var(--openbitfun-shadow-menu);
+    transform-origin: top center;
+    animation: openbitfun-select-popover-in var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-enter);
+  }
+
+  .popover[data-invalid="true"] {
+    border-color: var(--openbitfun-color-status-danger-border);
+  }
+
+  .popover[data-placement="top"] {
+    flex-direction: column-reverse;
+    transform-origin: bottom center;
+    animation-name: openbitfun-select-popover-in-top;
+  }
+
+  .popoverHeader {
+    flex: 0 0 calc(
+      var(--_select-height)
+      - var(--openbitfun-border-width-default)
+      - var(--openbitfun-border-width-default)
+    );
+    block-size: calc(
+      var(--_select-height)
+      - var(--openbitfun-border-width-default)
+      - var(--openbitfun-border-width-default)
+    );
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .popoverHeader:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled) {
+    border-color: transparent;
+    background: var(--openbitfun-color-field-background-hover);
+  }
+
+  .popoverHeader:is(:focus-visible, [data-openbitfun-preview-state="focus-visible"]) {
+    border-color: transparent;
+    box-shadow: inset 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring);
+  }
+
+  .divider {
+    flex: 0 0 var(--openbitfun-border-width-default);
+    block-size: var(--openbitfun-border-width-default);
+    background: var(--openbitfun-color-border-subtle);
+  }
+
+  .options {
+    display: flex;
+    overflow: hidden;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding: var(--openbitfun-overlay-menu-surface-padding);
+  }
+
+  .listbox {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  .listbox [data-openbitfun-part="list"],
+  .listbox [data-openbitfun-part="group-options"] {
+    gap: calc(var(--openbitfun-space-1) / 2);
+  }
+
+  .listbox [data-openbitfun-part="group"] {
+    gap: var(--openbitfun-overlay-menu-section-gap);
+  }
+
+  .listbox [data-openbitfun-listbox-option][data-selected="true"] [data-openbitfun-part="label"] {
+    font-weight: var(--openbitfun-type-label-selected-font-weight);
+  }
+
+  .listbox [data-openbitfun-listbox-option][data-selected="true"] {
+    background: var(--openbitfun-color-selection-surface);
+  }
+
+  .listbox [data-openbitfun-listbox-option][data-selected="true"] [data-openbitfun-part="indicator"] {
+    color: var(--openbitfun-color-control-highlight-background);
+  }
+
+  @keyframes openbitfun-select-popover-in {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes openbitfun-select-popover-in-top {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .select {
+    .trigger,
+    .indicator,
+    .popover,
+    .popoverHeader {
       transition: none;
+      animation: none;
     }
   }
 
   @media (forced-colors: active) {
-    .select,
-    .root[data-invalid="true"] .select {
+    .trigger,
+    .popover,
+    .root[data-invalid="true"] .trigger {
       border-color: ButtonText;
       background: Field;
     }
 
-    .select:focus-visible {
+    .popoverHeader {
+      border: 0;
+    }
+
+    .trigger:focus-visible {
       border-color: Highlight;
       box-shadow: 0 0 0 var(--openbitfun-focus-width) Highlight;
     }
+
+    .listbox [data-openbitfun-listbox-option][data-selected="true"] [data-openbitfun-part="indicator"] {
+      color: Highlight;
+    }
   }
 }
diff --git a/design-system/packages/ui/src/components/Select/Select.tsx b/design-system/packages/ui/src/components/Select/Select.tsx
index 139cbab97f..f73d874367 100644
--- a/design-system/packages/ui/src/components/Select/Select.tsx
+++ b/design-system/packages/ui/src/components/Select/Select.tsx
@@ -1,16 +1,39 @@
 import {
   forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
   type ChangeEventHandler,
+  type FocusEventHandler,
+  type ForwardedRef,
+  type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
   type SelectHTMLAttributes,
 } from "react";
 import { classNames } from "../../internal/classNames";
 import { useFieldSurface } from "../../internal/fieldSurface";
+import { useAnchoredLayer, type LayerPlacement } from "../../internal/useAnchoredLayer";
+import { Portal } from "../../overlay/Portal";
+import { useDesignSystem } from "../../overlay/useDesignSystem";
+import { useDismissibleLayer } from "../../overlay/useDismissibleLayer";
 import { Icon } from "../Icon";
+import {
+  Listbox,
+  ListboxEmpty,
+  ListboxGroup,
+  ListboxOption,
+} from "../Listbox";
 import styles from "./Select.module.css";
 
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 export type SelectValue = string | number;
 export type SelectSize = "sm" | "md" | "lg";
+export type SelectPlacement = Extract<LayerPlacement, "top" | "bottom">;
 
 export interface SelectOption {
   disabled?: boolean;
@@ -26,18 +49,41 @@ export interface SelectProps
     SelectHTMLAttributes<HTMLSelectElement>,
     "children" | "defaultValue" | "onChange" | "size" | "value"
   > {
+  defaultOpen?: boolean;
   defaultValue?: SelectValue;
   invalid?: boolean;
   leading?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
   onValueChange?: (value: SelectValue) => void;
+  open?: boolean;
   options: readonly SelectOption[];
+  placement?: SelectPlacement;
   placeholder?: string;
   size?: SelectSize;
   value?: SelectValue;
 }
 
+function assignRef<T>(ref: ForwardedRef<T>, value: T | null) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) (ref as { current: T | null }).current = value;
+}
+
 function toNativeValue(value: SelectValue | undefined) {
-  return value === undefined ? undefined : String(value);
+  return value === undefined ? "" : String(value);
+}
+
+function valuesMatch(left: SelectValue | undefined, right: SelectValue | undefined) {
+  if (left === undefined || right === undefined) return left === right;
+  return String(left) === String(right);
+}
+
+function initialValue(
+  options: readonly SelectOption[],
+  defaultValue: SelectValue | undefined,
+  placeholder: string | undefined,
+) {
+  if (defaultValue !== undefined) return defaultValue;
+  return placeholder === undefined ? options[0]?.value : undefined;
 }
 
 function groupOptions(options: readonly SelectOption[]) {
@@ -57,7 +103,7 @@ function groupOptions(options: readonly SelectOption[]) {
   return { groups, ungrouped };
 }
 
-function renderOption(option: SelectOption) {
+function renderNativeOption(option: SelectOption) {
   return (
     <option
       data-testid={option.testId}
@@ -72,26 +118,305 @@ function renderOption(option: SelectOption) {
 }
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select({
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
+  autoFocus = false,
   className,
+  defaultOpen = false,
   defaultValue,
   disabled = false,
+  id: providedId,
   invalid = false,
   leading,
+  onBlur,
+  onFocus,
+  onOpenChange,
   onValueChange,
+  open,
   options,
+  placement = "bottom",
   placeholder,
+  required = false,
   size = "md",
+  style,
+  tabIndex,
+  title,
   value,
-  ...props
-}, ref) {
-  const { groups, ungrouped } = groupOptions(options);
+  ...nativeProps
+}, forwardedRef) {
+  const designSystem = useDesignSystem();
   const fieldSurface = useFieldSurface();
+  const generatedId = useId();
+  const id = providedId ?? `openbitfun-select-${generatedId}`;
+  const listboxId = `${id}-listbox`;
+  const nativeId = `${id}-native`;
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const nativeRef = useRef<HTMLSelectElement | null>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const restoreFocusAfterCloseRef = useRef(false);
+  const dismissibleBranches = useMemo(() => [rootRef], []);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen && !disabled);
+  const [uncontrolledValue, setUncontrolledValue] = useState<SelectValue | undefined>(() => (
+    initialValue(options, defaultValue, placeholder)
+  ));
+  const resolvedOpen = !disabled && (open ?? uncontrolledOpen);
+  const resolvedValue = value !== undefined ? value : uncontrolledValue;
+  const resolvedInvalid = invalid || ariaInvalid === true || ariaInvalid === "true";
+  const selectedOption = options.find((option) => valuesMatch(option.value, resolvedValue));
+  const { groups, ungrouped } = useMemo(() => groupOptions(options), [options]);
+  const previewState = (nativeProps as Record<string, unknown>)["data-openbitfun-preview-state"];
+
+  const setNativeRef = useCallback((node: HTMLSelectElement | null) => {
+    nativeRef.current = node;
+    assignRef(forwardedRef, node);
+  }, [forwardedRef]);
+
+  const updateOpen = useCallback((nextOpen: boolean) => {
+    if (nextOpen === resolvedOpen) return;
+    if (open === undefined) setUncontrolledOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  }, [onOpenChange, open, resolvedOpen]);
+
+  const closeListbox = useCallback((restoreFocus: boolean) => {
+    if (restoreFocus) restoreFocusAfterCloseRef.current = true;
+    updateOpen(false);
+  }, [updateOpen]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (resolvedOpen || !restoreFocusAfterCloseRef.current) return;
+    restoreFocusAfterCloseRef.current = false;
+    if (triggerRef.current?.isConnected) triggerRef.current.focus();
+  }, [resolvedOpen]);
+
+  const commitOption = useCallback((option: SelectOption, restoreFocus: boolean) => {
+    if (disabled || option.disabled) return;
+    if (!valuesMatch(option.value, resolvedValue)) {
+      if (value === undefined) setUncontrolledValue(option.value);
+      onValueChange?.(option.value);
+    }
+    closeListbox(restoreFocus);
+  }, [closeListbox, disabled, onValueChange, resolvedValue, value]);
+
+  const handleNativeChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
+    const option = options.find((candidate) => (
+      String(candidate.value) === event.currentTarget.value
+    ));
+    if (option) commitOption(option, false);
+  };
 
-  const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
-    const option = options.find((candidate) => String(candidate.value) === event.currentTarget.value);
-    if (option) onValueChange?.(option.value);
+  const handleNativeFocus: FocusEventHandler<HTMLSelectElement> = (event) => {
+    onFocus?.(event);
+    if (!event.defaultPrevented) triggerRef.current?.focus();
   };
 
+  const handleTriggerKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (resolvedOpen) {
+        const enabledOptions = Array.from(
+          popoverRef.current?.querySelectorAll<HTMLButtonElement>(
+            "[data-openbitfun-listbox-option]:not(:disabled)",
+          ) ?? [],
+        );
+        const selectedIndex = enabledOptions.findIndex((option) => (
+          option.getAttribute("aria-selected") === "true"
+        ));
+        const fallbackIndex = event.key === "ArrowUp" ? enabledOptions.length - 1 : 0;
+        enabledOptions[selectedIndex >= 0 ? selectedIndex : fallbackIndex]?.focus();
+        return;
+      }
+      updateOpen(true);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (resolvedOpen) closeListbox(true);
+      else updateOpen(true);
+      return;
+    }
+    if (!resolvedOpen && (event.key === "Home" || event.key === "End")) {
+      const enabledOptions = options.filter((option) => !option.disabled);
+      const option = event.key === "Home"
+        ? enabledOptions[0]
+        : enabledOptions[enabledOptions.length - 1];
+      if (option) {
+        event.preventDefault();
+        commitOption(option, false);
+      }
+      return;
+    }
+    if (
+      !resolvedOpen
+      && event.key.length === 1
+      && !event.altKey
+      && !event.ctrlKey
+      && !event.metaKey
+    ) {
+      const enabledOptions = options.filter((option) => !option.disabled);
+      const currentIndex = enabledOptions.findIndex((option) => (
+        valuesMatch(option.value, resolvedValue)
+      ));
+      const query = event.key.toLocaleLowerCase();
+      for (let offset = 1; offset <= enabledOptions.length; offset += 1) {
+        const option = enabledOptions[(currentIndex + offset) % enabledOptions.length];
+        if (option?.label.trim().toLocaleLowerCase().startsWith(query)) {
+          event.preventDefault();
+          commitOption(option, false);
+          break;
+        }
+      }
+    }
+  };
+
+  const handleListboxKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Tab") {
+      closeListbox(true);
+      return;
+    }
+    if (event.key !== "Enter" && event.key !== " ") return;
+    const target = event.target instanceof Element
+      ? event.target.closest<HTMLButtonElement>("[data-openbitfun-listbox-option]")
+      : null;
+    if (!target || target.disabled) return;
+    event.preventDefault();
+    target.click();
+  };
+
+  useDismissibleLayer({
+    branchRefs: dismissibleBranches,
+    enabled: resolvedOpen,
+    layerRef: popoverRef,
+    onDismiss: (reason) => closeListbox(reason === "escape-key"),
+    ownerDocument: triggerRef.current?.ownerDocument,
+  });
+
+  const layout = useAnchoredLayer({
+    anchorRef: triggerRef,
+    layerRef: popoverRef,
+    matchWidth: true,
+    open: resolvedOpen,
+    overlapAnchor: true,
+    placement,
+    revision: options.length,
+  });
+
+  useEffect(() => {
+    if (value !== undefined) return;
+    if (options.some((option) => valuesMatch(option.value, uncontrolledValue))) return;
+    const nextValue = initialValue(options, defaultValue, placeholder);
+    if (!valuesMatch(nextValue, uncontrolledValue)) setUncontrolledValue(nextValue);
+  }, [defaultValue, options, placeholder, uncontrolledValue, value]);
+
+  useEffect(() => {
+    const select = nativeRef.current;
+    const form = select?.form;
+    if (!form || value !== undefined) return;
+    const handleReset = () => {
+      setUncontrolledValue(initialValue(options, defaultValue, placeholder));
+      updateOpen(false);
+    };
+    form.addEventListener("reset", handleReset);
+    return () => form.removeEventListener("reset", handleReset);
+  }, [defaultValue, options, placeholder, updateOpen, value]);
+
+  const renderListboxOption = (option: SelectOption) => (
+    <ListboxOption
+      {...option.testAttributes}
+      aria-label={option.label}
+      data-testid={option.testId}
+      disabled={option.disabled}
+      key={`${typeof option.value}:${option.value}`}
+      onClick={() => commitOption(option, true)}
+      selected={valuesMatch(option.value, resolvedValue)}
+      value={option.value}
+    >
+      {option.label}
+    </ListboxOption>
+  );
+
+  const renderTriggerContent = () => (
+    <>
+      {leading !== undefined && leading !== null && (
+        <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">
+          {leading}
+        </span>
+      )}
+      <span
+        className={selectedOption ? styles.value : styles.placeholder}
+        data-openbitfun-part="value"
+      >
+        {selectedOption?.label ?? placeholder}
+      </span>
+      <span aria-hidden="true" className={styles.indicator} data-openbitfun-part="indicator">
+        <Icon name="chevron-down" size="sm" />
+      </span>
+    </>
+  );
+
+  const popup = resolvedOpen ? (
+    <div
+      className={styles.popover}
+      data-openbitfun-component="select-popup"
+      data-openbitfun-part="popover"
+      data-invalid={resolvedInvalid ? "true" : "false"}
+      data-placement={layout?.placement ?? placement}
+      data-size={size}
+      ref={popoverRef}
+      style={layout?.style ?? { position: "fixed", visibility: "hidden" }}
+    >
+      <button
+        aria-controls={listboxId}
+        aria-describedby={ariaDescribedBy}
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-invalid={invalid ? true : ariaInvalid}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-required={required || ariaRequired || undefined}
+        className={classNames(styles.trigger, styles.popoverHeader)}
+        data-openbitfun-part="header"
+        data-openbitfun-preview-state={typeof previewState === "string" ? previewState : undefined}
+        id={id}
+        onClick={() => closeListbox(true)}
+        onKeyDown={handleTriggerKeyDown}
+        role="combobox"
+        title={title}
+        type="button"
+      >
+        {renderTriggerContent()}
+      </button>
+      <div aria-hidden="true" className={styles.divider} data-openbitfun-part="divider" />
+      <div className={styles.options} data-openbitfun-part="options">
+        <Listbox
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabel ? undefined : ariaLabelledBy ?? id}
+          autoFocusOption
+          className={styles.listbox}
+          id={listboxId}
+          onKeyDown={handleListboxKeyDown}
+        >
+          {options.length === 0 ? (
+            <ListboxEmpty>{designSystem.messages.noOptions}</ListboxEmpty>
+          ) : (
+            <>
+              {ungrouped.map(renderListboxOption)}
+              {[...groups].map(([label, groupedOptions]) => (
+                <ListboxGroup key={label} label={label}>
+                  {groupedOptions.map(renderListboxOption)}
+                </ListboxGroup>
+              ))}
+            </>
+          )}
+        </Listbox>
+      </div>
+    </div>
+  ) : null;
+
   return (
     <span
       className={classNames(styles.root, className)}
@@ -99,35 +424,72 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
       data-disabled={disabled ? "true" : "false"}
       data-field-surface={fieldSurface}
       data-has-leading={leading !== undefined && leading !== null ? "true" : "false"}
-      data-invalid={invalid ? "true" : "false"}
+      data-invalid={resolvedInvalid ? "true" : "false"}
+      data-open={resolvedOpen ? "true" : "false"}
+      data-placement={layout?.placement ?? placement}
       data-size={size}
+      ref={rootRef}
     >
-      {leading !== undefined && leading !== null && (
-        <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">
-          {leading}
-        </span>
-      )}
       <select
-        {...props}
-        aria-invalid={invalid || undefined}
-        className={styles.select}
-        defaultValue={toNativeValue(defaultValue)}
+        {...nativeProps}
+        aria-describedby={ariaDescribedBy}
+        aria-hidden="true"
+        aria-invalid={invalid ? true : ariaInvalid}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-required={required || ariaRequired || undefined}
+        className={styles.native}
         disabled={disabled}
-        onChange={handleChange}
-        ref={ref}
-        value={toNativeValue(value)}
+        id={nativeId}
+        onBlur={onBlur}
+        onChange={handleNativeChange}
+        onFocus={handleNativeFocus}
+        ref={setNativeRef}
+        required={required}
+        tabIndex={-1}
+        value={toNativeValue(resolvedValue)}
       >
         {placeholder !== undefined && (
           <option disabled value="">{placeholder}</option>
         )}
-        {ungrouped.map(renderOption)}
-        {[...groups].map(([label, group]) => (
-          <optgroup key={label} label={label}>{group.map(renderOption)}</optgroup>
+        {ungrouped.map(renderNativeOption)}
+        {[...groups].map(([label, groupedOptions]) => (
+          <optgroup key={label} label={label}>{groupedOptions.map(renderNativeOption)}</optgroup>
         ))}
       </select>
-      <span aria-hidden="true" className={styles.indicator} data-openbitfun-part="indicator">
-        <Icon name="chevron-down" size="sm" />
-      </span>
+      <button
+        aria-controls={resolvedOpen ? undefined : listboxId}
+        aria-describedby={ariaDescribedBy}
+        aria-expanded={resolvedOpen ? undefined : false}
+        aria-hidden={resolvedOpen || undefined}
+        aria-haspopup="listbox"
+        aria-invalid={invalid ? true : ariaInvalid}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-required={required || ariaRequired || undefined}
+        autoFocus={!resolvedOpen && autoFocus}
+        className={styles.trigger}
+        data-openbitfun-part="trigger"
+        data-openbitfun-preview-state={typeof previewState === "string" ? previewState : undefined}
+        disabled={disabled}
+        id={resolvedOpen ? undefined : id}
+        onClick={() => updateOpen(true)}
+        onKeyDown={handleTriggerKeyDown}
+        ref={triggerRef}
+        role={resolvedOpen ? undefined : "combobox"}
+        style={style}
+        tabIndex={resolvedOpen ? -1 : tabIndex}
+        title={title}
+        type="button"
+      >
+        {/* Keep the in-flow anchor intact while its portalled header is visible. */}
+        {renderTriggerContent()}
+      </button>
+      {popup && (
+        <Portal ownerDocument={triggerRef.current?.ownerDocument}>
+          {popup}
+        </Portal>
+      )}
     </span>
   );
 });
diff --git a/design-system/packages/ui/src/components/Select/index.ts b/design-system/packages/ui/src/components/Select/index.ts
index c0b3d6ee4a..0909a806a1 100644
--- a/design-system/packages/ui/src/components/Select/index.ts
+++ b/design-system/packages/ui/src/components/Select/index.ts
@@ -1,6 +1,7 @@
 export {
   Select,
   type SelectOption,
+  type SelectPlacement,
   type SelectProps,
   type SelectSize,
   type SelectValue,
diff --git a/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts b/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts
index 7f1b079c2a..82c2a7a0e9 100644
--- a/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts
+++ b/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts
@@ -11,5 +11,5 @@ export const textareaMeta = {
     { name: "autoResize", type: "boolean", defaultValue: "false" }, { name: "showCount", type: "boolean", defaultValue: "false" },
   ],
   states: ["default", "hover", "focus-visible", "invalid", "disabled"],
-  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.content.requiredIndicator", "color.field.background", "color.field.border", "color.field.borderFocus", "color.focus.ring", "color.status.danger.border", "color.status.danger.content", "type.label.md.fontSize", "type.body.sm.fontSize", "type.support.fontSize", "type.code.md.fontSize"],
+  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.content.requiredIndicator", "color.field.background", "color.field.border", "color.field.borderFocus", "color.status.danger.border", "color.status.danger.content", "type.label.md.fontSize", "type.body.sm.fontSize", "type.support.fontSize", "type.code.md.fontSize"],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Textarea/Textarea.module.css b/design-system/packages/ui/src/components/Textarea/Textarea.module.css
index 504967b9ca..e493bc9fbc 100644
--- a/design-system/packages/ui/src/components/Textarea/Textarea.module.css
+++ b/design-system/packages/ui/src/components/Textarea/Textarea.module.css
@@ -21,22 +21,22 @@
     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);
-    transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), box-shadow var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+    transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
   }
   .root[data-auto-resize="true"] .textarea { overflow: hidden; resize: none; }
   .root[data-font="mono"] .textarea { font-family: var(--openbitfun-type-code-md-font-family); font-size: var(--openbitfun-type-code-md-font-size); font-weight: var(--openbitfun-type-code-md-font-weight); line-height: var(--openbitfun-type-code-md-line-height); letter-spacing: var(--openbitfun-type-code-md-letter-spacing); }
   .root[data-layout="fill"] .textarea { flex: 1 1 auto; min-block-size: 0; }
   .root[data-resize="none"] .textarea { resize: none; }
   .root[data-variant="filled"] .textarea { border-color: transparent; }
-  .textarea:hover:not(:disabled) { border-color: var(--openbitfun-color-field-border-hover); background: var(--openbitfun-color-field-background-hover); }
+  .textarea:hover:where(:not(:disabled)) { border-color: var(--openbitfun-color-field-border-hover); background: var(--openbitfun-color-field-background-hover); }
   .root[data-field-surface="ambient"] .textarea,
   .root[data-field-surface="ambient"] .textarea:hover:not(:disabled) { background: transparent; }
-  .textarea:focus { border-color: var(--openbitfun-color-field-border-focus); box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring); }
+  .root .textarea:focus { border-color: var(--openbitfun-color-field-border-focus); box-shadow: none; }
   .root[data-invalid="true"] .textarea { border-color: var(--openbitfun-color-status-danger-border); }
   .textarea:disabled { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
   .textarea::placeholder, .hint, .count { color: var(--openbitfun-color-content-muted); }
   .support { display: flex; justify-content: space-between; gap: var(--openbitfun-space-3); font-family: var(--openbitfun-type-support-font-family); font-size: var(--openbitfun-type-support-font-size); font-weight: var(--openbitfun-type-support-font-weight); line-height: var(--openbitfun-type-support-line-height); letter-spacing: var(--openbitfun-type-support-letter-spacing); }
   .count { margin-inline-start: auto; white-space: nowrap; }
   @media (prefers-reduced-motion: reduce) { .textarea { transition: none; } }
-  @media (forced-colors: active) { .textarea { border-color: ButtonText; } .textarea:focus { border-color: Highlight; box-shadow: 0 0 0 var(--openbitfun-focus-width) Highlight; } }
+  @media (forced-colors: active) { .textarea { border-color: ButtonText; } .root .textarea:focus { border-color: Highlight; } }
 }
diff --git a/design-system/packages/ui/src/index.ts b/design-system/packages/ui/src/index.ts
index 2d8d9c3465..6983021cbb 100644
--- a/design-system/packages/ui/src/index.ts
+++ b/design-system/packages/ui/src/index.ts
@@ -116,6 +116,7 @@ export {
   type IconName,
   type IconProps,
   type IconSize,
+  type IconSource,
   type IconTone,
 } from "./components/Icon";
 export { IconButton, type IconButtonProps } from "./components/IconButton";
diff --git a/design-system/packages/ui/src/internal/useAnchoredLayer.ts b/design-system/packages/ui/src/internal/useAnchoredLayer.ts
index 543e480486..a55ff8a5d3 100644
--- a/design-system/packages/ui/src/internal/useAnchoredLayer.ts
+++ b/design-system/packages/ui/src/internal/useAnchoredLayer.ts
@@ -1,4 +1,6 @@
-import { useLayoutEffect, useState, type CSSProperties, type RefObject } from "react";
+import { useEffect, useLayoutEffect, useState, type CSSProperties, type RefObject } from "react";
+
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 
 export type LayerPlacement = "top" | "bottom" | "left" | "right";
 export type PortalTarget = Element | DocumentFragment | (() => Element | DocumentFragment | null) | null;
@@ -9,17 +11,19 @@ export function resolveLayerPortal(target: PortalTarget | undefined, anchor: HTM
   return target ?? anchor?.closest("[data-openbitfun-design-system-root]") ?? anchor?.ownerDocument.body ?? null;
 }
 
-export function useAnchoredLayer({ open, anchorRef, layerRef, placement = "bottom", matchWidth = false, revision, point }: {
+export function useAnchoredLayer({ open, anchorRef, layerRef, placement = "bottom", matchWidth = false, overlapAnchor = false, revision, point }: {
   open: boolean;
   anchorRef: RefObject<HTMLElement | null>;
   layerRef: RefObject<HTMLElement | null>;
   placement?: LayerPlacement;
   matchWidth?: boolean;
+  /** Position the layer over the anchor when the layer visually replaces it. */
+  overlapAnchor?: boolean;
   revision?: unknown;
   point?: { x: number; y: number };
 }) {
   const [layout, setLayout] = useState<{ style: CSSProperties; placement: LayerPlacement } | null>(null);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!open) { setLayout(null); return; }
     const anchor = anchorRef.current;
     const layer = layerRef.current;
@@ -27,9 +31,9 @@ export function useAnchoredLayer({ open, anchorRef, layerRef, placement = "botto
     if (!layer || !view || (!anchor && !point)) return;
     const update = () => {
       const padding = 8;
-      const gap = point ? 0 : 4;
+      const resolvedGap = point ? 0 : 4;
       const rect = point
-        ? { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0 }
+        ? { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0, height: 0 }
         : anchor!.getBoundingClientRect();
       const viewport = view.visualViewport;
       const vx = viewport?.offsetLeft ?? 0;
@@ -43,14 +47,30 @@ export function useAnchoredLayer({ open, anchorRef, layerRef, placement = "botto
       const horizontal = placement === "left" || placement === "right";
       const before = horizontal ? rect.left - vx : rect.top - vy;
       const after = horizontal ? vx + vw - rect.right : vy + vh - rect.bottom;
-      const needs = (horizontal ? box.width : box.height) + gap + padding;
+      const anchorExtent = horizontal ? rect.width : rect.height;
+      const overlapExtent = overlapAnchor ? anchorExtent : -resolvedGap;
+      const beforeCapacity = before + overlapExtent;
+      const afterCapacity = after + overlapExtent;
+      const needs = (horizontal ? box.width : box.height) + padding;
       const preferBefore = placement === "top" || placement === "left";
-      const useBefore = preferBefore ? before >= needs || before > after : after < needs && before > after;
+      const useBefore = preferBefore
+        ? beforeCapacity >= needs || beforeCapacity > afterCapacity
+        : afterCapacity < needs && beforeCapacity > afterCapacity;
       const side: LayerPlacement = horizontal ? (useBefore ? "left" : "right") : (useBefore ? "top" : "bottom");
-      const maxHeight = horizontal ? vh - padding * 2 : Math.max(0, (useBefore ? before : after) - gap - padding);
+      const maxHeight = horizontal
+        ? vh - padding * 2
+        : Math.max(0, (useBefore ? beforeCapacity : afterCapacity) - padding);
       const height = Math.min(box.height, maxHeight);
-      const left = horizontal ? (useBefore ? rect.left - box.width - gap : rect.right + gap) : rect.left;
-      const top = horizontal ? rect.top : (useBefore ? rect.top - height - gap : rect.bottom + gap);
+      const left = horizontal
+        ? overlapAnchor
+          ? (useBefore ? rect.right - box.width : rect.left)
+          : (useBefore ? rect.left - box.width - resolvedGap : rect.right + resolvedGap)
+        : rect.left;
+      const top = horizontal
+        ? rect.top
+        : overlapAnchor
+          ? (useBefore ? rect.bottom - height : rect.top)
+          : (useBefore ? rect.top - height - resolvedGap : rect.bottom + resolvedGap);
       const style: CSSProperties = {
         position: "fixed", width, maxWidth: vw - padding * 2, maxHeight,
         left: Math.max(vx + padding, Math.min(left, vx + vw - box.width - padding)),
@@ -73,6 +93,6 @@ export function useAnchoredLayer({ open, anchorRef, layerRef, placement = "botto
       view.visualViewport?.removeEventListener("resize", update);
       view.visualViewport?.removeEventListener("scroll", update);
     };
-  }, [open, anchorRef, layerRef, placement, matchWidth, revision, point?.x, point?.y]);
+  }, [open, anchorRef, layerRef, placement, matchWidth, overlapAnchor, revision, point?.x, point?.y]);
   return layout;
 }
diff --git a/design-system/packages/ui/tests/combobox.test.mjs b/design-system/packages/ui/tests/combobox.test.mjs
index 50c323a52b..5f59aa5c0f 100644
--- a/design-system/packages/ui/tests/combobox.test.mjs
+++ b/design-system/packages/ui/tests/combobox.test.mjs
@@ -27,7 +27,6 @@ test("Combobox consumes host localization and canonical invalid state", () => {
 
 test("MultiSelect exposes an explicit multi-value trigger contract", () => {
   const markup = renderToStaticMarkup(createElement(MultiSelect, {
-    defaultOpen: true,
     defaultValue: ["one"],
     options: [
       { label: "One", value: "one" },
@@ -39,7 +38,7 @@ test("MultiSelect exposes an explicit multi-value trigger contract", () => {
 
   assert.match(markup, /data-openbitfun-component="multi-select"/);
   assert.match(markup, /role="combobox"/);
-  assert.match(markup, /aria-expanded="true"/);
+  assert.match(markup, /aria-expanded="false"/);
   assert.match(markup, /aria-label="Models"/);
   assert.match(markup, />One</);
 });
@@ -84,7 +83,7 @@ test("Combobox styling uses public field, overlay, action, and motion tokens", a
   assert.doesNotMatch(styles, /#[0-9a-f]{3,8}/i);
 });
 
-test("Combobox search and option geometry follows the standard menu rhythm", async () => {
+test("Combobox embeds search and scrollable options in one token-driven surface", async () => {
   const source = await readFile(
     new URL("../src/components/Combobox/Combobox.tsx", import.meta.url),
     "utf8",
@@ -95,14 +94,40 @@ test("Combobox search and option geometry follows the standard menu rhythm", asy
   );
 
   assert.match(source, /clearLabel=\{query \? designSystem\.messages\.clearSelection : undefined\}/);
-  assert.match(source, /leadingIcon=\{<Icon name="search" \/>\}/);
-  assert.match(styles, /\.popover\s*\{[^}]*gap:\s*var\(--openbitfun-space-1\)/s);
+  assert.match(source, /leadingIcon=\{<Icon name="search" size="sm" \/>\}/);
+  assert.match(source, /variant="embedded"/);
+  assert.match(source, /overlapAnchor: true/);
+  assert.match(source, /data-openbitfun-part="divider"/);
+  assert.match(source, /data-openbitfun-part="options"/);
+  assert.match(styles, /\.popover\s*\{[^}]*min-inline-size:\s*0[^}]*padding:\s*0/s);
   assert.match(
     styles,
-    /\.searchField \[data-openbitfun-component="input"\]\s*\{[^}]*border-radius:\s*var\(--openbitfun-control-select-radius\)/s,
+    /\.popover\[data-placement="top"\]\s*\{[^}]*flex-direction:\s*column-reverse/s,
   );
+  assert.match(styles, /\.search\s*\{[^}]*--_combobox-height[^}]*--openbitfun-border-width-default/s);
+  assert.match(styles, /\.options\s*\{[^}]*min-block-size:\s*0[^}]*--openbitfun-overlay-menu-surface-padding/s);
+  assert.match(styles, /\.root\[data-open="true"\] \.control\s*\{[^}]*visibility:\s*hidden/s);
+  assert.doesNotMatch(styles, /scale\(/);
   assert.match(
     styles,
     /\.listbox \[data-openbitfun-part="list"\],[^}]*gap:\s*calc\(var\(--openbitfun-space-1\) \/ 2\)/s,
   );
 });
+
+test("Combobox and MultiSelect keep the field height independent of text, tags, and clear actions", async () => {
+  const styles = await readFile(
+    new URL("../src/components/Combobox/Combobox.module.css", import.meta.url),
+    "utf8",
+  );
+  const control = styles.match(/\.control\s*\{([^}]+)\}/)?.[1] ?? "";
+  const trigger = styles.match(/\.trigger\s*\{([^}]+)\}/)?.[1] ?? "";
+
+  assert.match(control, /block-size:\s*var\(--_combobox-height\)/);
+  assert.match(control, /grid-template-rows:\s*minmax\(0, 1fr\)/);
+  assert.match(trigger, /block-size:\s*100%/);
+  assert.match(trigger, /min-block-size:\s*0/);
+  assert.match(trigger, /padding-block:\s*0/);
+  for (const size of ["sm", "md", "lg"]) {
+    assert.ok(styles.includes(`var(--openbitfun-control-height-${size})`));
+  }
+});
diff --git a/design-system/packages/ui/tests/icon-slots.test.mjs b/design-system/packages/ui/tests/icon-slots.test.mjs
index f17fb5e390..b178652e81 100644
--- a/design-system/packages/ui/tests/icon-slots.test.mjs
+++ b/design-system/packages/ui/tests/icon-slots.test.mjs
@@ -4,6 +4,7 @@ import test from "node:test";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { Button, Icon, IconButton, SessionIcon, TabGroup } from "../dist/index.js";
+import { Network } from "lucide-react";
 
 const slots = [
   ["Button", "icon", "inline-size", "100%"],
@@ -57,6 +58,19 @@ test("buttons route native and default-size catalog icons through identical slot
   }
 });
 
+test("buttons constrain normalized line fallbacks through the same icon slot", () => {
+  const lineIcon = createElement(Icon, { glyph: Network });
+  for (const [Component, props] of [
+    [Button, { children: "Network", leadingIcon: lineIcon }],
+    [IconButton, { "aria-label": "Network", icon: lineIcon }],
+  ]) {
+    const markup = renderToStaticMarkup(createElement(Component, props));
+    assert.match(markup, /data-openbitfun-component="icon"/);
+    assert.match(markup, /data-openbitfun-source="line"/);
+    assert.match(markup, /<svg[^>]*stroke-width="1.6"/);
+  }
+});
+
 test("tabs keep native session icons and catalog scene icons in the same sized region", () => {
   const markup = renderToStaticMarkup(createElement(TabGroup, {
     "aria-label": "Scenes",
diff --git a/design-system/packages/ui/tests/icon.test.mjs b/design-system/packages/ui/tests/icon.test.mjs
index 81f3b6fa16..c08e6ce54d 100644
--- a/design-system/packages/ui/tests/icon.test.mjs
+++ b/design-system/packages/ui/tests/icon.test.mjs
@@ -5,6 +5,7 @@ import { readFile, readdir } from "node:fs/promises";
 import test from "node:test";
 import { createHash } from "node:crypto";
 import { Icon, iconNames, canonicalIconNames, iconAliases } from "../dist/index.js";
+import { Network } from "lucide-react";
 
 test("Icon exposes the complete named catalog without duplicate names", () => {
   assert.equal(iconNames.length, 66);
@@ -47,6 +48,25 @@ test("Icon exposes semantic size, tone, and accessible label independently", ()
   assert.match(markup, /data-openbitfun-tone="success"/);
 });
 
+test("Icon normalizes Lucide fallbacks without exposing product-owned line weight", () => {
+  const markup = renderToStaticMarkup(createElement(Icon, {
+    glyph: Network,
+    label: "Network",
+    size: "sm",
+    tone: "secondary",
+  }));
+
+  assert.match(markup, /data-openbitfun-component="icon"/);
+  assert.match(markup, /data-openbitfun-source="line"/);
+  assert.match(markup, /data-size="sm"/);
+  assert.match(markup, /data-openbitfun-tone="secondary"/);
+  assert.match(markup, /role="img"/);
+  assert.match(markup, /aria-label="Network"/);
+  assert.match(markup, /<svg[^>]*stroke-width="1.6"/);
+  assert.match(markup, /<svg[^>]*aria-hidden="true"/);
+  assert.doesNotMatch(markup, /mask-image/);
+});
+
 test("Icon styles consume only public geometry and semantic color tokens", async () => {
   const styles = await readFile(new URL("../dist/styles.css", import.meta.url), "utf8");
 
@@ -55,6 +75,7 @@ test("Icon styles consume only public geometry and semantic color tokens", async
   assert.match(styles, /--openbitfun-color-content-primary/);
   assert.match(styles, /--openbitfun-color-status-success-content/);
   assert.match(styles, /mask-size:contain/);
+  assert.match(styles, /data-openbitfun-source=line/);
 });
 
 test("Icon mask assets are color-agnostic", async () => {
diff --git a/design-system/packages/ui/tests/search-field.test.mjs b/design-system/packages/ui/tests/search-field.test.mjs
index 1b040a2561..cf32315ff5 100644
--- a/design-system/packages/ui/tests/search-field.test.mjs
+++ b/design-system/packages/ui/tests/search-field.test.mjs
@@ -33,6 +33,25 @@ test("SearchField source preserves consumer key handling before Enter submission
   assert.match(source, /onSearch\?\.\(event\.currentTarget\.value\)/);
 });
 
+test("SearchField supports embedded composition without leaking its variant onto the input", async () => {
+  const markup = renderToStaticMarkup(createElement(SearchField, {
+    "aria-label": "Search modes",
+    size: "sm",
+    variant: "embedded",
+  }));
+  assert.match(markup, /data-openbitfun-component="search-field" data-variant="embedded"/);
+  assert.doesNotMatch(markup, /<input[^>]*variant=/);
+  assert.match(markup, /type="search"/);
+
+  const styles = await readFile(new URL("../src/components/SearchField/SearchField.module.css", import.meta.url), "utf8");
+  const embedded = styles.match(/\.root\[data-variant="embedded"\][^{]+\{([^}]+)\}/)?.[1] ?? "";
+  assert.match(embedded, /block-size:\s*100%/);
+  assert.match(embedded, /padding:\s*0/);
+  assert.match(embedded, /border:\s*0/);
+  assert.match(embedded, /background:\s*transparent/);
+  assert.match(embedded, /box-shadow:\s*none/);
+});
+
 test("SearchField renders custom trailing content before the clear action", () => {
   const markup = renderToStaticMarkup(
     createElement(SearchField, {
@@ -92,17 +111,18 @@ test("SearchField owns pill composition while reusing Input behavior", async ()
   assert.match(styles, /--openbitfun-type-meta-font-size/);
 });
 
-test("SearchField focus changes only the existing border color", async () => {
-  const styles = await readFile(
-    new URL("../src/components/SearchField/SearchField.module.css", import.meta.url),
-    "utf8",
-  );
-  const focusRule = styles.match(
-    /\.root \.field:not\(\[data-invalid="true"\]\):focus-within\s*\{([^}]+)\}/,
+test("SearchField shares Input's single-border focus presentation", async () => {
+  const [styles, inputStyles] = await Promise.all([
+    readFile(new URL("../src/components/SearchField/SearchField.module.css", import.meta.url), "utf8"),
+    readFile(new URL("../src/components/Input/Input.module.css", import.meta.url), "utf8"),
+  ]);
+  const focusRule = inputStyles.match(
+    /\.field:focus-within\s*\{([^}]+)\}/,
   )?.[1];
 
+  assert.doesNotMatch(styles, /border-color:|\.field[^{}]*:focus-within\s*\{/);
   assert.ok(focusRule);
-  assert.match(focusRule, /border-color: var\(--openbitfun-color-content-primary\)/);
+  assert.match(focusRule, /border-color: var\(--openbitfun-color-field-border-focus\)/);
   assert.match(focusRule, /box-shadow: none/);
   assert.doesNotMatch(focusRule, /border-width|outline/);
 });
diff --git a/design-system/packages/ui/tests/select.test.mjs b/design-system/packages/ui/tests/select.test.mjs
index d443a30271..4b7a88f6c9 100644
--- a/design-system/packages/ui/tests/select.test.mjs
+++ b/design-system/packages/ui/tests/select.test.mjs
@@ -11,14 +11,16 @@ const options = [
   { group: "Advanced", label: "Agent", value: 3 },
 ];
 
-test("Select preserves native selection and grouped option semantics", () => {
+test("Select exposes a select-only combobox and preserves native form semantics", () => {
   const markup = renderToStaticMarkup(createElement(Select, {
     "aria-label": "Mode",
     options,
     value: "ask",
   }));
 
+  assert.match(markup, /data-openbitfun-component="select"/);
   assert.match(markup, /<select/);
+  assert.match(markup, /aria-hidden="true"/);
   assert.match(markup, /aria-label="Mode"/);
   assert.match(markup, /<option[^>]*value="ask"[^>]*selected="">Ask<\/option>/);
   assert.match(markup, /data-testid="ask-option"/);
@@ -26,6 +28,8 @@ test("Select preserves native selection and grouped option semantics", () => {
   assert.match(markup, /<option disabled="" value="plan">Plan<\/option>/);
   assert.match(markup, /<optgroup label="Advanced">/);
   assert.match(markup, /value="3">Agent<\/option>/);
+  assert.match(markup, /<button[^>]*aria-expanded="false"[^>]*role="combobox"/);
+  assert.match(markup, /data-openbitfun-part="value">Ask<\/span>/);
 });
 
 test("Select exposes size, invalid, disabled, and leading regions independently", () => {
@@ -46,14 +50,46 @@ test("Select exposes size, invalid, disabled, and leading regions independently"
   assert.match(markup, /data-openbitfun-part="indicator"/);
 });
 
-test("Select styles theme both the closed field and native option menu", async () => {
-  const styles = await readFile(new URL("../dist/styles.css", import.meta.url), "utf8");
+test("Select styling owns one token-driven surface for the expanded header and listbox", async () => {
+  const source = await readFile(
+    new URL("../src/components/Select/Select.tsx", import.meta.url),
+    "utf8",
+  );
+  const styles = await readFile(
+    new URL("../src/components/Select/Select.module.css", import.meta.url),
+    "utf8",
+  );
 
   assert.match(styles, /--openbitfun-control-select-padding-inline/);
   assert.match(styles, /--openbitfun-control-select-indicator-size/);
   assert.match(styles, /--openbitfun-color-field-border-focus/);
-  assert.match(styles, /option[^}]*color:\s*var\(--openbitfun-color-content-primary\)/s);
-  assert.match(styles, /option[^}]*background-color:\s*var\(--openbitfun-color-surface-panel\)/s);
-  assert.match(styles, /option:disabled[^}]*color:\s*var\(--openbitfun-color-content-disabled\)/s);
+  assert.match(styles, /--openbitfun-overlay-menu-surface-radius/);
+  assert.match(styles, /--openbitfun-color-selection-surface/);
+  assert.match(styles, /--openbitfun-color-control-highlight-background/);
+  assert.match(styles, /--openbitfun-shadow-menu/);
   assert.match(styles, /--openbitfun-color-status-danger-border/);
+  assert.match(styles, /\.popover\s*\{[^}]*flex-direction:\s*column[^}]*padding:\s*0[^}]*border:/s);
+  assert.match(styles, /\.root\s*\{[^}]*block-size:\s*var\(--_select-height\)/s);
+  assert.match(styles, /\.root\s*\{[^}]*display:\s*grid;/s);
+  assert.match(
+    styles,
+    /\.popoverHeader\s*\{[^}]*block-size:\s*calc\([\s\S]*?--_select-height[\s\S]*?--openbitfun-border-width-default/,
+  );
+  assert.match(styles, /\.divider\s*\{[^}]*--openbitfun-border-width-default/s);
+  assert.match(styles, /\.options\s*\{[^}]*--openbitfun-overlay-menu-surface-padding/s);
+  assert.doesNotMatch(styles, /border-block-(?:start|end):\s*0/);
+  assert.doesNotMatch(styles, /scale\(/);
+  assert.match(source, /<Listbox/);
+  assert.match(source, /<ListboxGroup/);
+  assert.match(source, /useDismissibleLayer/);
+  assert.match(source, /useAnchoredLayer\(\{/);
+  assert.match(source, /overlapAnchor:\s*true/);
+  assert.match(source, /data-openbitfun-part="header"/);
+  assert.match(source, /data-openbitfun-part="divider"/);
+  assert.match(source, /data-openbitfun-part="options"/);
+  assert.ok(
+    source.indexOf('data-openbitfun-part="header"')
+      < source.indexOf('data-openbitfun-part="options"'),
+  );
+  assert.doesNotMatch(styles, /#[0-9a-f]{3,8}/i);
 });
diff --git a/src/apps/desktop/src/generated/bootstrap_theme.css b/src/apps/desktop/src/generated/bootstrap_theme.css
index 5eb11414b4..03403cd929 100644
--- a/src/apps/desktop/src/generated/bootstrap_theme.css
+++ b/src/apps/desktop/src/generated/bootstrap_theme.css
@@ -60,7 +60,7 @@
     --openbitfun-color-field-background: #1c1c1f;
     --openbitfun-color-field-background-hover: rgba(255, 255, 255, 0.06);
     --openbitfun-color-field-border: rgba(255, 255, 255, 0.18);
-    --openbitfun-color-field-border-focus: #60a5fa;
+    --openbitfun-color-field-border-focus: #858585;
     --openbitfun-color-field-border-hover: rgba(255, 255, 255, 0.24);
     --openbitfun-color-focus-ring: #60a5fa;
     --openbitfun-color-identity-assistant-border: color-mix(in srgb, #ec4899 15%, transparent);
diff --git a/src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html b/src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html
index 6eacc9683f..5c10260dde 100644
--- a/src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html
+++ b/src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html
@@ -29,7 +29,7 @@
     --openbitfun-link: #60a5fa;
     --openbitfun-field-bg: #1c1c1f;
     --openbitfun-field-border: rgba(255, 255, 255, 0.18);
-    --openbitfun-field-border-focus: #60a5fa;
+    --openbitfun-field-border-focus: #858585;
     --openbitfun-scrollbar-thumb: rgba(255, 255, 255, 0.12);
     --openbitfun-scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
     --openbitfun-overlay-scrim: rgba(0, 0, 0, 0.56);
@@ -65,7 +65,7 @@
     --openbitfun-link: #2563eb;
     --openbitfun-field-bg: #ffffff;
     --openbitfun-field-border: rgba(16, 26, 39, 0.15);
-    --openbitfun-field-border-focus: #101a27;
+    --openbitfun-field-border-focus: #858585;
     --openbitfun-scrollbar-thumb: rgba(0, 0, 0, 0.08);
     --openbitfun-scrollbar-thumb-hover: rgba(0, 0, 0, 0.10);
     --openbitfun-overlay-scrim: rgba(16, 26, 39, 0.20);
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryEmpty.tsx b/src/web-ui/src/app/components/GalleryLayout/GalleryEmpty.tsx
index 4109a5e4bc..fdafaade1e 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryEmpty.tsx
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryEmpty.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { Icon, type IconSource } from '@openbitfun/ui';
 
 interface GalleryEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
-  icon: React.ReactNode;
+  icon: IconSource;
   message: React.ReactNode;
   isError?: boolean;
   action?: React.ReactNode;
@@ -23,8 +24,10 @@ const GalleryEmpty: React.FC<GalleryEmptyProps> = ({
     className={['gallery-empty', isError && 'gallery-empty--error', className].filter(Boolean).join(' ')}
     data-testid={testId}
   >
-    {icon}
-    <span>{message}</span>
+    <span className="gallery-empty__icon" aria-hidden="true">
+      <Icon {...icon} />
+    </span>
+    <span className="gallery-empty__message">{message}</span>
     {action}
   </div>
 );
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
index d757e0a696..f6c954d9e5 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
@@ -203,6 +203,8 @@ $content-max: 936px;
 }
 
 .gallery-empty {
+  --_gallery-empty-icon-size: calc(var(--openbitfun-control-icon-size-lg) + var(--openbitfun-space-2));
+
   min-height: 220px;
   display: flex;
   flex-direction: column;
@@ -224,6 +226,20 @@ $content-max: 936px;
   &--error {
     color: var(--openbitfun-color-status-danger-content);
   }
+
+  &__icon {
+    display: inline-flex;
+    width: var(--_gallery-empty-icon-size);
+    height: var(--_gallery-empty-icon-size);
+    flex: 0 0 var(--_gallery-empty-icon-size);
+    align-items: center;
+    justify-content: center;
+
+    > :where(svg, img, [data-openbitfun-component='icon']) {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .gallery-search-btn,
diff --git a/src/web-ui/src/app/components/NavBar/NavBar.appearance.ts b/src/web-ui/src/app/components/NavBar/NavBar.appearance.ts
index 9d51464c24..f938ec47f5 100644
--- a/src/web-ui/src/app/components/NavBar/NavBar.appearance.ts
+++ b/src/web-ui/src/app/components/NavBar/NavBar.appearance.ts
@@ -2,6 +2,6 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 
 export const navBarAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'nav-bar',
-  parts: [{ id: 'root' }, { id: 'panelToggle' }, { id: 'back' }, { id: 'forward' }],
+  parts: [{ id: 'root' }, { id: 'panelToggle' }, { id: 'back' }, { id: 'forward' }, { id: 'title', visualRole: 'content' }],
   states: [{ id: 'collapsed', selector: { kind: 'self', suffix: '[data-openbitfun-state~="collapsed"]' } }],
 };
diff --git a/src/web-ui/src/app/components/NavBar/NavBar.scss b/src/web-ui/src/app/components/NavBar/NavBar.scss
index cc29a9a539..1aadf56f76 100644
--- a/src/web-ui/src/app/components/NavBar/NavBar.scss
+++ b/src/web-ui/src/app/components/NavBar/NavBar.scss
@@ -10,6 +10,7 @@
   display: flex;
   align-items: center;
   height: var(--openbitfun-layout-toolbar-md-height);
+  min-width: 0;
   flex-shrink: 0;
   padding: 0 var(--openbitfun-space-2);
   gap: var(--openbitfun-space-1);
@@ -33,6 +34,21 @@
     padding-right: 2px;
   }
 
+  &__title {
+    flex: 1 1 0;
+    min-width: 0;
+    margin-inline-start: var(--openbitfun-space-1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: start;
+    color: var(--openbitfun-color-content-primary);
+    font-family: var(--openbitfun-type-body-sm-font-family);
+    font-size: var(--openbitfun-type-label-md-font-size);
+    font-weight: var(--openbitfun-type-label-selected-font-weight);
+    line-height: var(--openbitfun-type-body-sm-line-height);
+  }
+
   &__btn,
   &__panel-toggle {
     display: flex;
diff --git a/src/web-ui/src/app/components/NavBar/NavBar.tsx b/src/web-ui/src/app/components/NavBar/NavBar.tsx
index aa26dbb8ba..a87ce60c17 100644
--- a/src/web-ui/src/app/components/NavBar/NavBar.tsx
+++ b/src/web-ui/src/app/components/NavBar/NavBar.tsx
@@ -1,18 +1,18 @@
 /**
- * NavBar — navigation history controls + window chrome.
+ * NavBar — navigation controls and the current left-panel title.
  *
  * Sits at the top of the left column on the shared 45px workbench chrome row.
- * Layout: [←][→]  <drag-region>  [_][□][×]
+ * Layout: [panel][←][→] [scene title / drag region]
  *
  * - Back/Forward buttons mirror IDE navigation history.
- * - The centre strip is a drag region for moving the window.
- * - WindowControls (minimize/maximize/close) replace the old TitleBar chrome.
+ * - The title follows left-panel navigation, independently of the right scene.
+ * - Non-interactive space remains a drag region for moving the window.
  */
 
 import React, { useCallback, useMemo, useRef } from 'react';
-;
 
 import { useNavSceneStore } from '../../stores/navSceneStore';
+import { getSceneNavTitleKey } from '../../scenes/nav-registry';
 import { useI18n } from '../../../infrastructure/i18n';
 import { createLogger } from '@/shared/utils/logger';
 import { isMacOSDesktopRuntime, supportsNativeWindowDragging } from '@/infrastructure/runtime';
@@ -48,6 +48,8 @@ const NavBar: React.FC<NavBarProps> = ({
   const goForward    = useNavSceneStore(s => s.goForward);
   const canGoBack    = showSceneNav && !!navSceneId;
   const canGoForward = !showSceneNav && !!navSceneId;
+  const titleKey = showSceneNav && navSceneId ? getSceneNavTitleKey(navSceneId) : null;
+  const title = titleKey ? t(titleKey) : null;
   const lastMouseDownTimeRef = useRef<number>(0);
 
   const handleBarMouseDown = useCallback((e: React.MouseEvent) => {
@@ -145,6 +147,16 @@ const NavBar: React.FC<NavBarProps> = ({
         </button>
       </Tooltip>
 
+      {title && (
+        <span
+          className="openbitfun-nav-bar__title"
+          data-openbitfun-component="nav-bar"
+          data-openbitfun-part="title"
+          title={title}
+        >
+          {title}
+        </span>
+      )}
     </div>
   );
 };
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index cface10339..d628dbf258 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -28,7 +28,7 @@ import {
 } from '@openbitfun/ui';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import { FolderOpen, FolderPlus, Users, Network } from 'lucide-react';
+import { FolderOpen, FolderPlus, Network, Server, Users } from 'lucide-react';
 // import { PanelsTopLeft } from 'lucide-react'; // temporarily hidden: Pages nav entry
 import { useSceneManager } from '../../hooks/useSceneManager';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
@@ -275,13 +275,13 @@ const MainNav: React.FC<MainNavProps> = ({
       style={{ top: workspaceMenuPos.top, left: workspaceMenuPos.left }}
     >
       <MenuItem
-        leading={<FolderOpen size={13} />}
+        leading={<Icon glyph={FolderOpen} />}
         onClick={() => { closeWorkspaceMenu(); void handleOpenProject(); }}
       >
         {t('header.openProject')}
       </MenuItem>
       <MenuItem
-        leading={<FolderPlus size={13} />}
+        leading={<Icon glyph={FolderPlus} />}
         onClick={() => { closeWorkspaceMenu(); handleNewProject(); }}
       >
         {t('header.newProject')}
@@ -294,11 +294,7 @@ const MainNav: React.FC<MainNavProps> = ({
         {t('nav.workspaces.actions.newAssistant')}
       </MenuItem>
       <MenuItem
-        leading={(
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-            <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2v-4M9 21H5a2 2 0 0 1-2-2v-4m0-6v6" />
-          </svg>
-        )}
+        leading={<Icon glyph={Server} />}
         onClick={handleOpenRemoteSSH}
       >
         {t('ssh.remote.connect')}
@@ -319,7 +315,7 @@ const MainNav: React.FC<MainNavProps> = ({
             return (
               <MenuItem
                 key={workspace.id}
-                leading={<FolderOpen size={13} aria-hidden="true" />}
+                leading={<Icon glyph={FolderOpen} />}
                 role="menuitemradio"
                 checked={isCurrent}
                 metadata={isCurrent ? <Icon name="check-line" size="xs" /> : undefined}
@@ -534,7 +530,7 @@ const MainNav: React.FC<MainNavProps> = ({
                   data-testid="agent-tab"
                 >
                   <span className="openbitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
-                    <Users size={15} />
+                    <Icon glyph={Users} size="sm" />
                   </span>
                   <span>{t('nav.items.agents')}</span>
                 </button>
@@ -580,7 +576,7 @@ const MainNav: React.FC<MainNavProps> = ({
                   data-testid="ecosystem-compatibility-tab"
                 >
                   <span className="openbitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
-                    <Network size={15} />
+                    <Icon glyph={Network} size="sm" />
                   </span>
                   <span>{t('nav.items.ecosystemCompatibility')}</span>
                   {hasUnseenEcosystemCompatibility ? (
@@ -618,7 +614,7 @@ const MainNav: React.FC<MainNavProps> = ({
                         onClick={toggleWorkspaceMenu}
                         data-testid="nav-workspace-add-btn"
                       >
-                        <FolderPlus size={14} aria-hidden="true" />
+                        <Icon glyph={FolderPlus} size="sm" />
                       </button>
                     </Tooltip>
                   </div>
diff --git a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
index 0c578165fa..3951745d64 100644
--- a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
@@ -47,26 +47,26 @@ function DeviceIcon({
   kind: DeviceOverviewDeviceKind;
   size?: number;
 }) {
-  const catalogSize = size <= 11 ? '2xs' : size <= 13 ? 'xs' : size <= 15 ? 'sm' : size <= 17 ? 'md' : 'lg';
+  const iconStyle = { width: size, height: size };
   switch (kind) {
     case 'mobile':
-      return <Smartphone size={size} aria-hidden="true" />;
+      return <Icon glyph={Smartphone} size="lg" style={iconStyle} />;
     case 'execution-host':
-      return <Server size={size} aria-hidden="true" />;
+      return <Icon glyph={Server} size="lg" style={iconStyle} />;
     case 'message-app': {
       const chatApp = chatAppBrandFromIdentity(identity);
       if (chatApp) return <ChatAppBrandIcon app={chatApp} size={size} />;
-      return <Icon name="side-chat" size={catalogSize} aria-hidden="true" />;
+      return <Icon name="side-chat" size="lg" style={iconStyle} />;
     }
     default:
-      return <Monitor size={size} aria-hidden="true" />;
+      return <Icon glyph={Monitor} size="lg" style={iconStyle} />;
   }
 }
 
 function ConnectionServiceIcon({ service }: { service: DeviceOverviewConnectionService }) {
   return service.kind === 'self-hosted' || service.kind === 'device-service'
-    ? <Server size={15} aria-hidden="true" />
-    : <Cloud size={15} aria-hidden="true" />;
+    ? <Icon glyph={Server} size="sm" />
+    : <Icon glyph={Cloud} size="sm" />;
 }
 
 const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
@@ -377,7 +377,7 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
                   className="openbitfun-device-overview__action"
                   variant="outline"
                   size="sm"
-                  leadingIcon={<Undo2 />}
+                  leadingIcon={<Icon glyph={Undo2} />}
                   onClick={() => { void handleReturnLocal(); }}
                   disabled={returningLocal}
                   data-testid="nav-device-status-return-local"
diff --git a/src/web-ui/src/app/components/NavPanel/components/NavItem.tsx b/src/web-ui/src/app/components/NavPanel/components/NavItem.tsx
index 60a163675f..b51f472640 100644
--- a/src/web-ui/src/app/components/NavPanel/components/NavItem.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/NavItem.tsx
@@ -10,7 +10,7 @@ import React, { useRef } from 'react';
 import type { LucideIcon } from 'lucide-react';
 
 import type { NavItem as NavItemConfig } from '../types';
-import { Tooltip } from '@openbitfun/ui';
+import { Icon, Tooltip } from '@openbitfun/ui';
 
 interface NavItemProps {
   item: NavItemConfig;
@@ -47,7 +47,7 @@ const NavItem: React.FC<NavItemProps> = ({
   renderActions,
   onClick,
 }) => {
-  const { Icon } = item;
+  const { Icon: ItemGlyph } = item;
   const badgeRef = useRef<HTMLSpanElement>(null);
 
   const handleBadgeClick = (e: React.MouseEvent) => {
@@ -75,7 +75,7 @@ const NavItem: React.FC<NavItemProps> = ({
       title={tooltipContent ?? displayLabel}
     >
       <span className="openbitfun-nav-panel__item-icon" aria-hidden="true">
-        <Icon size={15} />
+        <Icon glyph={ItemGlyph} size="sm" />
       </span>
       <span className="openbitfun-nav-panel__item-label">{displayLabel}</span>
 
@@ -105,7 +105,7 @@ const NavItem: React.FC<NavItemProps> = ({
               tabIndex={-1}
               aria-label={actionTitle}
             >
-              <ActionIcon size={13} />
+              <Icon glyph={ActionIcon} size="xs" />
             </span>
           </Tooltip>
         ) : (
@@ -116,7 +116,7 @@ const NavItem: React.FC<NavItemProps> = ({
             role="button"
             tabIndex={-1}
           >
-            <ActionIcon size={13} />
+            <Icon glyph={ActionIcon} size="xs" />
           </span>
         )
       )}
diff --git a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionFilterMenu.tsx b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionFilterMenu.tsx
index ed1f9755ea..e8ff038343 100644
--- a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionFilterMenu.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionFilterMenu.tsx
@@ -249,7 +249,7 @@ const WorkspaceSessionFilterMenu: React.FC = () => {
           actions={[{
             id: 'reset',
             label: t('nav.sessions.viewMenu.filters.reset'),
-            icon: <RotateCcw size={12} aria-hidden="true" />,
+            icon: <Icon glyph={RotateCcw} />,
             onClick: () => {
               setActiveSubmenu(null);
               view.resetFilters();
diff --git a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
index 25c5de1b7f..4153d3ca1a 100644
--- a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useI18n } from '@/infrastructure/i18n';
-import { IconButton, Tooltip } from '@openbitfun/ui';
+import { Icon, IconButton, Tooltip } from '@openbitfun/ui';
 import { List, ListTree } from 'lucide-react';
 import {
   getNextWorkspaceSessionGrouping,
@@ -26,9 +26,8 @@ const WorkspaceSessionGroupingToggle: React.FC = () => {
         aria-label={actionTooltip}
         aria-pressed={isAll}
         icon={(
-          <ViewIcon
-            size={16}
-            aria-hidden="true"
+          <Icon
+            glyph={ViewIcon}
             data-session-view-icon={grouping}
           />
         )}
diff --git a/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts b/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts
index d1eb571421..bcf92bfad3 100644
--- a/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts
@@ -21,6 +21,23 @@ describe('navigation icon integration', () => {
     expect(entryMarkup).toContain('size="sm"');
   });
 
+  it('keeps extension subnavigation icons at one optical weight', () => {
+    const source = readFileSync(
+      fileURLToPath(new URL('./MainNav.tsx', import.meta.url)),
+      'utf8',
+    );
+    const sublistStart = source.indexOf('data-testid="agent-skill-tabs"');
+    const sublistEnd = source.indexOf('</div>', sublistStart);
+    const sublistMarkup = source.slice(sublistStart, sublistEnd);
+
+    expect(sublistStart).toBeGreaterThanOrEqual(0);
+    expect(sublistEnd).toBeGreaterThan(sublistStart);
+    expect(sublistMarkup).toContain('<Icon glyph={Users} size="sm" />');
+    expect(sublistMarkup).toContain('<Icon name="extension" size="sm" />');
+    expect(sublistMarkup).toContain('<Icon glyph={Network} size="sm" />');
+    expect(sublistMarkup).not.toContain('strokeWidth');
+  });
+
   it('uses the reference clock icon for Task Board', () => {
     const source = readFileSync(
       fileURLToPath(new URL('./MainNav.tsx', import.meta.url)),
@@ -44,9 +61,10 @@ describe('navigation icon integration', () => {
 
     expect(source).toContain("import { List, ListTree } from 'lucide-react'");
     expect(source).toContain('const ViewIcon = isAll ? List : ListTree');
-    expect(source).toContain('size={16}');
+    expect(source).toContain('glyph={ViewIcon}');
     expect(source).toContain('data-session-view-icon={grouping}');
     expect(source).toContain('data-testid="nav-workspace-session-view-toggle"');
+    expect(source).not.toContain('strokeWidth');
     expect(source).not.toContain('NavigationSessionView');
   });
 
@@ -61,7 +79,7 @@ describe('navigation icon integration', () => {
 
     expect(actionStart).toBeGreaterThanOrEqual(0);
     expect(actionEnd).toBeGreaterThan(actionStart);
-    expect(actionMarkup).toContain('<FolderPlus size={14}');
+    expect(actionMarkup).toContain('<Icon glyph={FolderPlus} size="sm"');
   });
 
   it('uses stable standard icons for every session-group type', () => {
@@ -80,7 +98,7 @@ describe('navigation icon integration', () => {
     expect(assistantMarkup).not.toContain('SessionGroupAssistant');
 
     expect(workspaceMarkup).toContain('workspaceIsRemote');
-    expect(workspaceMarkup).toContain('<Server size={14} strokeWidth={1.6} />');
+    expect(workspaceMarkup).toContain('<Icon glyph={Server} size="sm" />');
     expect(workspaceMarkup).toContain('<Icon name="folder" size="sm" />');
     expect(workspaceMarkup).not.toContain('SessionGroup');
   });
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
index 0fc248dfe6..e4fd018696 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
@@ -1960,7 +1960,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                           </MenuItem>
                           <MenuItem
                             type="button"
-                            leading={<Archive size={13} />}
+                            leading={<Icon glyph={Archive} />}
                             onClick={e => { closeSessionMenu(); void handleArchive(e, session.sessionId); }}
                             data-testid="nav-session-menu-archive"
                             data-session-id={session.sessionId}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx
index a88dc3bd15..534942b3c3 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx
@@ -172,7 +172,7 @@ const WorkspaceAcpSessionSubmenu = forwardRef<HTMLDivElement, WorkspaceAcpSessio
         <MenuItem
           ref={triggerRef}
           className={`openbitfun-nav-panel__workspace-acp-menu-trigger${open ? ' is-open' : ''}`}
-          leading={<Bot size={13} aria-hidden="true" />}
+          leading={<Icon glyph={Bot} />}
           shortcut={<Icon name="chevron-right" size="sm" aria-hidden="true" />}
           aria-haspopup="menu"
           aria-expanded={open}
@@ -206,7 +206,7 @@ const WorkspaceAcpSessionSubmenu = forwardRef<HTMLDivElement, WorkspaceAcpSessio
               return (
                 <MenuItem
                   key={client.id}
-                  leading={<Bot size={13} aria-hidden="true" />}
+                  leading={<Icon glyph={Bot} />}
                   onClick={() => onSelect(client)}
                   data-testid="nav-workspace-menu-create-acp-session"
                   data-acp-client-id={client.id}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
index 015944c95f..572ccecfc7 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
@@ -129,6 +129,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
   const [isDeletingAssistant, setIsDeletingAssistant] = useState(false);
   const [isResettingWorkspace, setIsResettingWorkspace] = useState(false);
   const [sessionsCollapsed, setSessionsCollapsed] = useState(false);
+  const sessionDisclosureIcon = sessionsCollapsed ? 'chevron-right' : 'chevron-down';
   const collapseAllRequestId = useWorkspaceSessionViewStore(state => state.collapseAllRequestId);
   const [searchIndexModalOpen, setSearchIndexModalOpen] = useState(false);
   const [scheduledJobsModalOpen, setScheduledJobsModalOpen] = useState(false);
@@ -882,8 +883,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
               <span className="openbitfun-nav-panel__assistant-item-group-icon">
                 <Icon name="user" size="sm" />
               </span>
-              <span className={`openbitfun-nav-panel__assistant-item-icon-toggle${sessionsCollapsed ? ' is-collapsed' : ''}`}>
-                <Icon name="chevron-down" size="sm" />
+              <span className="openbitfun-nav-panel__assistant-item-icon-toggle">
+                <Icon name={sessionDisclosureIcon} size="sm" />
               </span>
             </span>
           </button>
@@ -948,7 +949,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.scheduledJobs.open')}
                 </MenuItem>
                 <MenuItem
-                  leading={<ShieldCheck size={13} />}
+                  leading={<Icon glyph={ShieldCheck} />}
                   onClick={handleOpenProjectPermissions}
                   data-testid="nav-workspace-menu-project-permissions"
                 >
@@ -956,7 +957,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 </MenuItem>
                 {portForwardConnectionId ? (
                   <MenuItem
-                    leading={<Network size={13} />}
+                    leading={<Icon glyph={Network} />}
                     onClick={handleOpenPortForward}
                     data-testid="nav-workspace-menu-port-forward"
                   >
@@ -973,7 +974,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.workspaces.actions.copyPath')}
                 </MenuItem>
                 <MenuItem
-                  leading={<FolderSearch size={13} />}
+                  leading={<Icon glyph={FolderSearch} />}
                   onClick={() => { void handleReveal(); }}
                   disabled={isRemoteWorkspace(workspace)}
                   data-testid="nav-workspace-menu-reveal"
@@ -985,7 +986,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                     <MenuSeparator />
                     {isDefaultAssistantWorkspace ? (
                       <MenuItem
-                        leading={<RotateCcw size={13} />}
+                        leading={<Icon glyph={RotateCcw} />}
                         tone="danger"
                         onClick={handleRequestResetWorkspace}
                         disabled={isResettingWorkspace}
@@ -1146,13 +1147,13 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
           <span className="openbitfun-nav-panel__workspace-item-icon" data-openbitfun-component="workspace-item" data-openbitfun-part="icon" aria-hidden="true">
             <span className="openbitfun-nav-panel__workspace-item-icon-default">
               {workspaceIsRemote ? (
-                <Server size={14} strokeWidth={1.6} />
+                <Icon glyph={Server} size="sm" />
               ) : (
                 <Icon name="folder" size="sm" />
               )}
             </span>
-            <span className={`openbitfun-nav-panel__workspace-item-icon-toggle${sessionsCollapsed ? ' is-collapsed' : ''}`}>
-              <Icon name="chevron-down" size="sm" />
+            <span className="openbitfun-nav-panel__workspace-item-icon-toggle">
+              <Icon name={sessionDisclosureIcon} size="sm" />
             </span>
           </span>
         </button>
@@ -1406,7 +1407,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   onSelect={client => { void handleCreateAcpSession(client); }}
                 />
                 <MenuItem
-                  leading={<FileText size={13} />}
+                  leading={<Icon glyph={FileText} />}
                   onClick={() => { void handleCreateInitSession(); }}
                   data-testid="nav-workspace-menu-create-init-session"
                 >
@@ -1423,7 +1424,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.workspaces.actions.manageRelatedPaths')}
                 </MenuItem>
                 <MenuItem
-                  leading={<ShieldCheck size={13} />}
+                  leading={<Icon glyph={ShieldCheck} />}
                   onClick={handleOpenProjectPermissions}
                   data-testid="nav-workspace-menu-project-permissions"
                 >
@@ -1434,7 +1435,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 </MenuItem>
                 {portForwardConnectionId ? (
                   <MenuItem
-                    leading={<Network size={13} />}
+                    leading={<Icon glyph={Network} />}
                     onClick={handleOpenPortForward}
                     data-testid="nav-workspace-menu-port-forward"
                   >
@@ -1458,7 +1459,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.workspaces.actions.copyPath')}
                 </MenuItem>
                 <MenuItem
-                  leading={<FolderSearch size={13} />}
+                  leading={<Icon glyph={FolderSearch} />}
                   onClick={() => { void handleReveal(); }}
                   disabled={isRemoteWorkspace(workspace)}
                   data-testid="nav-workspace-menu-reveal"
@@ -1466,11 +1467,11 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.workspaces.actions.reveal')}
                 </MenuItem>
                 <MenuSeparator />
-                <MenuItem leading={<ListChecks size={13} />} onClick={handleOpenSessionBatchModal}>
+                <MenuItem leading={<Icon glyph={ListChecks} />} onClick={handleOpenSessionBatchModal}>
                   {t('nav.sessions.manage')}
                 </MenuItem>
                 <MenuItem
-                  leading={<FolderOpen size={13} />}
+                  leading={<Icon glyph={FolderOpen} />}
                   tone="danger"
                   onClick={() => { void handleCloseWorkspace(); }}
                   data-testid="nav-workspace-menu-close"
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
index 14bfc68d2e..fe3dd042d2 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
@@ -373,13 +373,6 @@
       transform: scale(0.7);
       color: var(--openbitfun-color-content-primary);
 
-      svg {
-        transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
-      }
-
-      &.is-collapsed svg {
-        transform: rotate(-90deg);
-      }
     }
   }
 
@@ -417,13 +410,6 @@
     transform: scale(0.7);
     color: inherit;
 
-    svg {
-      transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
-    }
-
-    &.is-collapsed svg {
-      transform: rotate(-90deg);
-    }
   }
 
   &__workspace-item-label {
@@ -1203,13 +1189,6 @@
     transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
                 transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 
-    svg {
-      transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
-    }
-
-    &.is-collapsed svg {
-      transform: rotate(-90deg);
-    }
   }
 
   &__assistant-item-name-btn {
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
index f6b69298a2..43042db8a7 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
@@ -167,6 +167,17 @@ describe('WorkspaceListSection layout styles', () => {
     );
   });
 
+  it('uses distinct disclosure icons for collapsed and expanded session groups', () => {
+    const source = readWorkspaceItemSource();
+    const stylesheet = readWorkspaceListStylesheet();
+
+    expect(source).toContain(
+      "const sessionDisclosureIcon = sessionsCollapsed ? 'chevron-right' : 'chevron-down';",
+    );
+    expect(source.match(/<Icon name=\{sessionDisclosureIcon\} size="sm" \/>/g)).toHaveLength(2);
+    expect(stylesheet).not.toContain('&.is-collapsed svg');
+  });
+
   it('keeps remote workspace directory and host metadata on one row with the status dot first', () => {
     const stylesheet = readWorkspaceListStylesheet();
     const remoteChip = extractBlock(stylesheet, '&__workspace-item-remote');
@@ -235,7 +246,7 @@ describe('WorkspaceListSection layout styles', () => {
     const stylesheet = readWorkspaceListStylesheet();
 
     expect(itemSource).toContain('<Icon name="user" size="sm" />');
-    expect(itemSource).toContain('<Server size={14} strokeWidth={1.6} />');
+    expect(itemSource).toContain('<Icon glyph={Server} size="sm" />');
     expect(itemSource).toContain('<Icon name="folder" size="sm" />');
     expect(itemSource).not.toContain('SessionGroup');
     expect(listSource).not.toContain('nav.sessions.viewMenu.grouping.all');
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.scss
index 7182ff6b20..6cf790859a 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.scss
@@ -22,7 +22,7 @@
     font-size: var(--openbitfun-type-label-sm-font-size);
     line-height: var(--openbitfun-type-body-sm-line-height);
 
-    svg {
+    > :where(svg, [data-openbitfun-component='icon']) {
       flex-shrink: 0;
       margin-top: 1px;
       color: var(--openbitfun-color-accent-default);
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.tsx
index 042f4ec280..87bbe8d43a 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.tsx
@@ -257,7 +257,7 @@ export const WorkspaceProjectPermissionsDialog: React.FC<WorkspaceProjectPermiss
         <div className="workspace-project-permissions-dialog__modal">
       <div data-openbitfun-component="workspace-project-permissions-dialog" data-openbitfun-part="root" className="workspace-project-permissions-dialog">
         <div data-openbitfun-component="workspace-project-permissions-dialog" data-openbitfun-part="intro" className="workspace-project-permissions-dialog__intro">
-          <ShieldCheck size={18} aria-hidden="true" />
+          <Icon glyph={ShieldCheck} size="md" />
           <p>{t('projectPermissions.description')}</p>
         </div>
 
@@ -412,7 +412,7 @@ export const WorkspaceProjectPermissionsDialog: React.FC<WorkspaceProjectPermiss
                 loading={rulesSaving}
                 disabled={!rulesValid || rulesRevision === null || isBusy}
                 onClick={() => void handleSaveRules()}
-                leadingIcon={<Save size={14} />}
+                leadingIcon={<Icon glyph={Save} />}
               >
 
                 {t('projectPermissions.saveRules')}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
index 9fc1b3f958..f97771529a 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
@@ -317,7 +317,7 @@ export const WorkspaceRelatedPathsDialog: React.FC<WorkspaceRelatedPathsDialogPr
                       className="workspace-related-paths-dialog__select"
                       variant="outline"
                       size="sm"
-                      leadingIcon={<FolderOpen />}
+                      leadingIcon={<Icon glyph={FolderOpen} />}
                       onClick={() =>
                         remoteWorkspace
                           ? setBrowsingIndex(index)
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
index db66ef48d6..46446ea090 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
@@ -334,7 +334,7 @@ const WorkspaceSessionBatchModal: React.FC<WorkspaceSessionBatchModalProps> = ({
       <div data-openbitfun-component="workspace-session-batch-modal" data-openbitfun-part="root" className="workspace-session-batch-modal">
         <div data-openbitfun-component="workspace-session-batch-modal" data-openbitfun-part="hero" className="workspace-session-batch-modal__hero">
           <div className="workspace-session-batch-modal__hero-icon">
-            <FolderKanban size={18} />
+            <Icon glyph={FolderKanban} size="md" />
           </div>
           <div className="workspace-session-batch-modal__hero-copy">
             <div className="workspace-session-batch-modal__workspace">{workspaceLabel}</div>
@@ -396,7 +396,7 @@ const WorkspaceSessionBatchModal: React.FC<WorkspaceSessionBatchModalProps> = ({
               const isSelected = selectedSessionIds.has(metadata.sessionId);
               const sessionPresentation = resolveSessionPresentation(metadata.agentType);
               const sessionGlyph = sessionPresentation === 'assistant'
-                ? <Bot size={15} />
+                ? <Icon glyph={Bot} size="sm" />
                 : <Icon name="session" size="sm" />;
               return (
                 <label data-openbitfun-component="workspace-session-batch-modal" data-openbitfun-part="row"
@@ -456,7 +456,7 @@ const WorkspaceSessionBatchModal: React.FC<WorkspaceSessionBatchModalProps> = ({
             onClick={() => { void handleArchiveSelected(); }}
             disabled={isBusy || selectedCount === 0}
             loading={actionKind === 'archive'}
-            leadingIcon={<Archive size={14} />}
+            leadingIcon={<Icon glyph={Archive} />}
           >
 
             <span>{t('nav.sessions.archiveSelected')}</span>
diff --git a/src/web-ui/src/app/components/panels/base/types.ts b/src/web-ui/src/app/components/panels/base/types.ts
index 5c9b742ffb..08406a2f3f 100644
--- a/src/web-ui/src/app/components/panels/base/types.ts
+++ b/src/web-ui/src/app/components/panels/base/types.ts
@@ -3,6 +3,8 @@
  * Defines content types, interfaces, and configuration for the panel system.
  */
 
+import type { IconSource } from '@openbitfun/ui';
+
 export type PanelContentType = 
   | 'empty'
   | 'code-preview'
@@ -80,7 +82,7 @@ export interface TabbedFlexiblePanelRef {
 export interface PanelContentConfig {
   type: PanelContentType;
   displayName: string;
-  icon: React.ComponentType<{ size?: string | number }>;
+  icon: IconSource;
   supportsCopy: boolean;
   supportsDownload: boolean;
   showHeader: boolean;
diff --git a/src/web-ui/src/app/components/panels/base/utils.ts b/src/web-ui/src/app/components/panels/base/utils.ts
index 3c85528e00..ef0e9b114f 100644
--- a/src/web-ui/src/app/components/panels/base/utils.ts
+++ b/src/web-ui/src/app/components/panels/base/utils.ts
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Icon, type IconName, type IconSize } from '@openbitfun/ui';
+import { Icon } from '@openbitfun/ui';
 import { 
   Code, 
   FileText, 
@@ -17,20 +17,12 @@ import {
 } from 'lucide-react';
 import { PanelContentType, PanelContentConfig } from './types';
 
-function catalogPanelIcon(name: IconName): React.ComponentType<{ size?: string | number }> {
-  return function CatalogPanelIcon({ size }) {
-    const n = typeof size === 'number' ? size : 16;
-    const mapped: IconSize = n <= 11 ? '2xs' : n <= 13 ? 'xs' : n <= 15 ? 'sm' : n <= 17 ? 'md' : 'lg';
-    return React.createElement(Icon, { name, size: mapped });
-  };
-}
-
 // Configuration mapping for each panel content type
 export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig> = {
   'empty': {
     type: 'empty',
     displayName: 'Empty',
-    icon: FileText,
+    icon: { glyph: FileText },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -38,7 +30,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'code-preview': {
     type: 'code-preview',
     displayName: 'Code Preview',
-    icon: Code,
+    icon: { glyph: Code },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: true
@@ -46,7 +38,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'code-viewer': {
     type: 'code-viewer',
     displayName: 'Code Viewer',
-    icon: Code,
+    icon: { glyph: Code },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: false
@@ -54,7 +46,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'code-editor': {
     type: 'code-editor',
     displayName: 'Code Editor',
-    icon: Code,
+    icon: { glyph: Code },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: false
@@ -62,7 +54,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'markdown-viewer': {
     type: 'markdown-viewer',
     displayName: 'Markdown Viewer',
-    icon: FileText,
+    icon: { glyph: FileText },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: true
@@ -70,7 +62,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'markdown-editor': {
     type: 'markdown-editor',
     displayName: 'Markdown Editor',
-    icon: FileText,
+    icon: { glyph: FileText },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: false
@@ -78,7 +70,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'text-viewer': {
     type: 'text-viewer',
     displayName: 'Text Viewer',
-    icon: catalogPanelIcon('eye'),
+    icon: { name: 'eye' },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: true
@@ -86,7 +78,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'file-viewer': {
     type: 'file-viewer',
     displayName: 'File Viewer',
-    icon: Code,
+    icon: { glyph: Code },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: false
@@ -94,7 +86,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'image-viewer': {
     type: 'image-viewer',
     displayName: 'Image Viewer',
-    icon: catalogPanelIcon('image'),
+    icon: { name: 'image' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -102,7 +94,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'pdf-viewer': {
     type: 'pdf-viewer',
     displayName: 'PDF Viewer',
-    icon: FileText,
+    icon: { glyph: FileText },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -110,7 +102,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'html-preview': {
     type: 'html-preview',
     displayName: 'HTML Preview',
-    icon: catalogPanelIcon('browser'),
+    icon: { name: 'browser' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -118,7 +110,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'diff-code-editor': {
     type: 'diff-code-editor',
     displayName: 'Diff Editor',
-    icon: Code,
+    icon: { glyph: Code },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: false
@@ -126,7 +118,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'git-diff': {
     type: 'git-diff',
     displayName: 'Git Diff',
-    icon: catalogPanelIcon('git'),
+    icon: { name: 'git' },
     supportsCopy: true,
     supportsDownload: true,
     showHeader: false
@@ -134,7 +126,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'git-settings': {
     type: 'git-settings',
     displayName: 'Git Settings',
-    icon: catalogPanelIcon('git'),
+    icon: { name: 'git' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -142,7 +134,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'git-graph': {
     type: 'git-graph',
     displayName: 'Git Graph',
-    icon: catalogPanelIcon('git'),
+    icon: { name: 'git' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -150,7 +142,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'git-branch-history': {
     type: 'git-branch-history',
     displayName: 'Git Branch History',
-    icon: catalogPanelIcon('git'),
+    icon: { name: 'git' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -158,7 +150,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'ai-session': {
     type: 'ai-session',
     displayName: 'AI Session',
-    icon: BookOpen,
+    icon: { glyph: BookOpen },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -166,7 +158,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'planner': {
     type: 'planner',
     displayName: 'Planner',
-    icon: ClipboardList,
+    icon: { glyph: ClipboardList },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -174,7 +166,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'ui-editor': {
     type: 'ui-editor',
     displayName: 'UI Editor',
-    icon: catalogPanelIcon('edit'),
+    icon: { name: 'edit' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -182,7 +174,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'ui-relation-graph': {
     type: 'ui-relation-graph',
     displayName: 'UI Relation Graph',
-    icon: Network,
+    icon: { glyph: Network },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -190,7 +182,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'design-tokens': {
     type: 'design-tokens',
     displayName: 'Design Tokens',
-    icon: catalogPanelIcon('settings'),
+    icon: { name: 'settings' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -198,7 +190,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'task-detail': {
     type: 'task-detail',
     displayName: 'Task Detail',
-    icon: ClipboardList,
+    icon: { glyph: ClipboardList },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -206,7 +198,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'plan-viewer': {
     type: 'plan-viewer',
     displayName: 'Plan Viewer',
-    icon: ClipboardList,
+    icon: { glyph: ClipboardList },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -214,7 +206,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'btw-session': {
     type: 'btw-session',
     displayName: 'Side Session',
-    icon: MessageSquareQuote,
+    icon: { glyph: MessageSquareQuote },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -222,7 +214,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'session-usage': {
     type: 'session-usage',
     displayName: 'Session Usage',
-    icon: Activity,
+    icon: { glyph: Activity },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -230,7 +222,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'background-command-output': {
     type: 'background-command-output',
     displayName: 'Command Output',
-    icon: catalogPanelIcon('terminal'),
+    icon: { name: 'terminal' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -238,7 +230,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'review-platform': {
     type: 'review-platform',
     displayName: 'Pull Requests',
-    icon: GitPullRequest,
+    icon: { glyph: GitPullRequest },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -246,7 +238,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'review-platform-pr-detail': {
     type: 'review-platform-pr-detail',
     displayName: 'Pull Request',
-    icon: GitPullRequest,
+    icon: { glyph: GitPullRequest },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -254,7 +246,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'terminal': {
     type: 'terminal',
     displayName: 'Terminal',
-    icon: Code,
+    icon: { glyph: Code },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -262,7 +254,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'generative-widget': {
     type: 'generative-widget',
     displayName: 'Widget Preview',
-    icon: Network,
+    icon: { glyph: Network },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -270,7 +262,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'openbitfun-canvas': {
     type: 'openbitfun-canvas',
     displayName: 'OpenBitFun Canvas',
-    icon: Network,
+    icon: { glyph: Network },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -278,7 +270,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
   'browser': {
     type: 'browser',
     displayName: 'Browser',
-    icon: catalogPanelIcon('browser'),
+    icon: { name: 'browser' },
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
@@ -293,12 +285,10 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
  */
 export const getContentIcon = (type: PanelContentType): React.ReactElement => {
   if (!type || !PANEL_CONTENT_CONFIGS[type]) {
-    const DefaultIcon = PANEL_CONTENT_CONFIGS.empty.icon;
-    return React.createElement(DefaultIcon, { size: 16 });
+    return React.createElement(Icon, { ...PANEL_CONTENT_CONFIGS.empty.icon, size: 'md' });
   }
   const config = PANEL_CONTENT_CONFIGS[type];
-  const IconComponent = config.icon;
-  return React.createElement(IconComponent, { size: 16 });
+  return React.createElement(Icon, { ...config.icon, size: 'md' });
 };
 
 /**
diff --git a/src/web-ui/src/app/global-search/GlobalSearchRoot.tsx b/src/web-ui/src/app/global-search/GlobalSearchRoot.tsx
index db694e3c9c..db86a6bd50 100644
--- a/src/web-ui/src/app/global-search/GlobalSearchRoot.tsx
+++ b/src/web-ui/src/app/global-search/GlobalSearchRoot.tsx
@@ -14,13 +14,12 @@ import {
   Icon,
   KeyHint,
   SearchField,
-  type IconName,
-  type IconSize,
+  type IconSource,
   ScrollArea,
   Dialog,
   DialogBody,
 } from '@openbitfun/ui';
-import { BarChart3, Blocks, Bot, CheckSquare2, FileText, Keyboard, MessageSquareText, MessagesSquare, Network, Users, type LucideIcon } from 'lucide-react';
+import { BarChart3, Blocks, Bot, CheckSquare2, FileText, Keyboard, MessageSquareText, MessagesSquare, Network, Users } from 'lucide-react';
 import { useShortcut } from '@/infrastructure/hooks/useShortcut';
 import { useI18n } from '@/infrastructure/i18n';
 import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
@@ -56,14 +55,6 @@ import {
 } from './types';
 import './GlobalSearchRoot.scss';
 
-function catalogLucide(name: IconName): LucideIcon {
-  return function CatalogLucide({ size }: { size?: number | string }) {
-    const n = typeof size === 'number' ? size : 20;
-    const mapped: IconSize = n <= 11 ? '2xs' : n <= 13 ? 'xs' : n <= 15 ? 'sm' : n <= 17 ? 'md' : 'lg';
-    return <Icon name={name} size={mapped} style={{ width: n, height: n }} />;
-  } as LucideIcon;
-}
-
 const log = createLogger('GlobalSearch');
 const SEARCH_DEBOUNCE_MS = 90;
 const SEARCH_LIMIT_PER_GROUP = 20;
@@ -77,21 +68,21 @@ const EMPTY_SNAPSHOT: GlobalSearchSnapshot = {
   truncated: false,
 };
 
-const ACTION_ICONS: Record<ProductActionIcon, LucideIcon> = {
-  'message-circle': catalogLucide('side-chat'),
-  folder: catalogLucide('folder'),
-  plus: catalogLucide('plus'),
-  globe: catalogLucide('browser'),
-  terminal: catalogLucide('terminal'),
-  files: FileText,
-  users: Users,
-  puzzle: catalogLucide('extension'),
-  blocks: Blocks,
-  'check-square': CheckSquare2,
-  chart: BarChart3,
-  gear: catalogLucide('gear'),
-  keyboard: Keyboard,
-  network: Network,
+const ACTION_ICONS: Record<ProductActionIcon, IconSource> = {
+  'message-circle': { name: 'side-chat' },
+  folder: { name: 'folder' },
+  plus: { name: 'plus' },
+  globe: { name: 'browser' },
+  terminal: { name: 'terminal' },
+  files: { glyph: FileText },
+  users: { glyph: Users },
+  puzzle: { name: 'extension' },
+  blocks: { glyph: Blocks },
+  'check-square': { glyph: CheckSquare2 },
+  chart: { glyph: BarChart3 },
+  gear: { name: 'gear' },
+  keyboard: { glyph: Keyboard },
+  network: { glyph: Network },
 };
 
 type GlobalSearchActionIconRole =
@@ -115,24 +106,27 @@ const GLOBAL_SEARCH_ACTION_ICON_ROLES: Partial<Record<ProductActionId, GlobalSea
   'surface.files.open': 'open-files',
 };
 
-const GROUP_ICONS: Record<Exclude<GlobalSearchGroupId, 'actions'>, LucideIcon> = {
-  messages: MessageSquareText,
-  sessions: MessagesSquare,
-  files: FileText,
-  workspaces: catalogLucide('folder'),
-  assistants: Bot,
-  capabilities: Blocks,
-  settings: catalogLucide('gear'),
+const GROUP_ICONS: Record<Exclude<GlobalSearchGroupId, 'actions'>, IconSource> = {
+  messages: { glyph: MessageSquareText },
+  sessions: { glyph: MessagesSquare },
+  files: { glyph: FileText },
+  workspaces: { name: 'folder' },
+  assistants: { glyph: Bot },
+  capabilities: { glyph: Blocks },
+  settings: { name: 'gear' },
 };
 
-function iconForItem(item: GlobalSearchItem): LucideIcon {
+const SEARCH_ICON: IconSource = { name: 'search' };
+const USER_ICON: IconSource = { name: 'user' };
+
+function iconForItem(item: GlobalSearchItem): IconSource {
   if (item.target.kind === 'action') {
     const actionId = item.target.actionId;
     const action = PRODUCT_ACTION_CATALOG.find((candidate) => candidate.id === actionId);
-    return action ? ACTION_ICONS[action.icon] : catalogLucide('search');
+    return action ? ACTION_ICONS[action.icon] : SEARCH_ICON;
   }
-  if (item.target.kind === 'assistant') return catalogLucide('user');
-  return GROUP_ICONS[item.group as Exclude<GlobalSearchGroupId, 'actions'>] ?? catalogLucide('search');
+  if (item.target.kind === 'assistant') return USER_ICON;
+  return GROUP_ICONS[item.group as Exclude<GlobalSearchGroupId, 'actions'>] ?? SEARCH_ICON;
 }
 
 function resultVariant(group: GlobalSearchGroupId): 'action' | 'entity' | 'standard' {
@@ -522,7 +516,7 @@ export const GlobalSearchContent: React.FC<GlobalSearchContentProps> = ({
                 )}
                 <div className="global-search__group-items">
                   {groupItems.map((item) => {
-                    const ItemIcon = iconForItem(item);
+                    const itemIcon = iconForItem(item);
                     const selected = item.id === activeId;
                     const itemVariant = resultVariant(item.group);
                     const entity = itemVariant === 'entity';
@@ -554,13 +548,11 @@ export const GlobalSearchContent: React.FC<GlobalSearchContentProps> = ({
                           data-openbitfun-state={selected ? 'selected' : undefined}
                           description={item.subtitle && !defaultActionGroup ? item.subtitle : undefined}
                           leading={(
-                            <span
+                            <Icon
+                              {...itemIcon}
                               className="global-search__action-icon"
                               data-icon-role={actionIconRole}
-                              aria-hidden="true"
-                            >
-                              <ItemIcon size={20} strokeWidth={1.75} />
-                            </span>
+                            />
                           )}
                           selected={selected}
                           size="sm"
@@ -585,7 +577,7 @@ export const GlobalSearchContent: React.FC<GlobalSearchContentProps> = ({
                           onClick={() => void activateItem(item)}
                           data-openbitfun-state={selected ? 'selected' : undefined}
                           description={item.subtitle}
-                          leading={<ItemIcon size={20} strokeWidth={1.65} />}
+                          leading={<Icon {...itemIcon} />}
                           selected={selected}
                           size="md"
                         >
@@ -612,7 +604,7 @@ export const GlobalSearchContent: React.FC<GlobalSearchContentProps> = ({
                         data-openbitfun-state={selected ? 'selected' : undefined}
                       >
                         <span className="global-search__result-icon" aria-hidden="true">
-                          <ItemIcon size={16} strokeWidth={1.65} />
+                          <Icon {...itemIcon} size="md" />
                         </span>
                         {resultCopy}
                         {item.context ? (
diff --git a/src/web-ui/src/app/global-search/globalSearchArchitecture.test.ts b/src/web-ui/src/app/global-search/globalSearchArchitecture.test.ts
index e80b727ad0..7456d0ff06 100644
--- a/src/web-ui/src/app/global-search/globalSearchArchitecture.test.ts
+++ b/src/web-ui/src/app/global-search/globalSearchArchitecture.test.ts
@@ -63,7 +63,7 @@ describe('global search ownership', () => {
     expect(actionCatalog).toMatch(/id: 'project\.open',[\s\S]*?icon: 'folder'/);
     expect(actionCatalog).toMatch(/id: 'project\.new',[\s\S]*?icon: 'plus'/);
     expect(actionCatalog).toMatch(/id: 'settings\.open',[\s\S]*?icon: 'gear'/);
-    expect(globalSearch).toContain("settings: catalogLucide('gear')");
+    expect(globalSearch).toContain("settings: { name: 'gear' }");
     expect(actionCatalog).not.toMatch(/'folder-open'|'folder-plus'/);
 
     expect(globalSearchStyles).toMatch(
diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
index 37f719a063..0f3176ae08 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -1,7 +1,7 @@
-import { Button, Combobox, Icon, IconButton, SearchField, Select, StatusPill, Tooltip, ScrollArea } from '@openbitfun/ui';
+import { Button, Combobox, Icon, IconButton, SearchField, Select, StatusPill, Tooltip, ScrollArea, type IconSource } from '@openbitfun/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { TFunction } from 'i18next';
-import { Bot, Cpu, FileText, MessageSquareText, RotateCcw, Wrench, type LucideIcon } from 'lucide-react';
+import { Bot, Cpu, FileText, MessageSquareText, RotateCcw, Wrench } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { confirmDanger } from '@/infrastructure/confirm-dialog';
@@ -470,7 +470,7 @@ const AgentsHomeView: React.FC = () => {
   const selectedAgentCapabilityTabs = useMemo(() => {
     const tabs: Array<{
       key: CapabilityTab;
-      icon: LucideIcon;
+      icon: IconSource;
       label: string;
       count?: string;
     }> = [];
@@ -478,7 +478,7 @@ const AgentsHomeView: React.FC = () => {
     if (selectedAgent?.agentKind === 'subagent' && !selectedAgentIsExternal) {
       tabs.push({
         key: 'model',
-        icon: Cpu,
+        icon: { glyph: Cpu },
         label: t('agentCard.modelSelector.label'),
       });
     }
@@ -495,7 +495,7 @@ const AgentsHomeView: React.FC = () => {
 
       tabs.push({
         key: 'tools',
-        icon: Wrench,
+        icon: { glyph: Wrench },
         label: t('agentsOverview.tools'),
         count: selectedAgent?.agentKind === 'mode'
           ? `${currentToolCount}/${totalToolCount}`
@@ -511,11 +511,7 @@ const AgentsHomeView: React.FC = () => {
           : selectedAgentSkills.length;
       tabs.push({
         key: 'skills',
-        icon: (({ size = 14 }: { size?: number | string }) => {
-          const n = typeof size === 'number' ? size : 14;
-          const mapped = n <= 11 ? '2xs' : n <= 13 ? 'xs' : n <= 15 ? 'sm' : n <= 17 ? 'md' : 'lg';
-          return <Icon name="extension" size={mapped} />;
-        }) as LucideIcon,
+        icon: { name: 'extension' },
         label: t('agentsOverview.skills'),
         count: `${currentSkillCount}/${selectedAgentSkillConfigs.length}`,
       });
@@ -527,7 +523,7 @@ const AgentsHomeView: React.FC = () => {
         : selectedAgentEnabledSubagentIds;
       tabs.push({
         key: 'subagents',
-        icon: Bot,
+        icon: { glyph: Bot },
         label: t('agentsOverview.subagents'),
         count: `${currentSubagentIds.length}/${selectedAgentManageableSubagents.length}`,
       });
@@ -741,7 +737,7 @@ const AgentsHomeView: React.FC = () => {
 
           {!loading && catalogAgents.length === 0 ? (
             <GalleryEmpty
-              icon={<Bot size={32} strokeWidth={1.5} />}
+              icon={{ glyph: Bot }}
               message={allAgents.length === 0 ? t('agentsZone.empty.noAgents') : t('agentsZone.empty.noMatch')}
               testId="agent-list-empty"
             />
@@ -791,10 +787,9 @@ const AgentsHomeView: React.FC = () => {
       <GalleryDetailModal
         isOpen={Boolean(selectedAgent)}
         onClose={closeAgentDetails}
-        icon={selectedAgent ? React.createElement(
-          AGENT_ICON_MAP[(selectedAgent.iconKey ?? 'bot') as keyof typeof AGENT_ICON_MAP] ?? Bot,
-          { size: 24, strokeWidth: 1.7 },
-        ) : <Bot size={24} />}
+        icon={selectedAgent
+          ? <Icon {...(AGENT_ICON_MAP[(selectedAgent.iconKey ?? 'bot') as keyof typeof AGENT_ICON_MAP] ?? { glyph: Bot })} size="lg" />
+          : <Icon glyph={Bot} size="lg" />}
         iconGradient={selectedAgent ? getCardGradient(selectedAgent.id || selectedAgent.name) : undefined}
         title={selectedAgent?.name ?? ''}
         titlePlacement="hero"
@@ -804,7 +799,7 @@ const AgentsHomeView: React.FC = () => {
           <>
             <StatusPill
               tone={selectedAgentBadge?.variant ?? 'neutral'}
-              leading={selectedAgent.agentKind === 'mode' ? <Cpu size={10} /> : <Bot size={10} />}
+              leading={<Icon glyph={selectedAgent.agentKind === 'mode' ? Cpu : Bot} />}
             >
               {selectedAgentBadge?.label}
             </StatusPill>
@@ -875,7 +870,7 @@ const AgentsHomeView: React.FC = () => {
                     aria-current={activeDetailSection === 'basic' ? 'page' : undefined}
                     onClick={() => setActiveDetailSection('basic')}
                   >
-                    <FileText size={14} />
+                    <Icon glyph={FileText} size="sm" />
                     <span>{t('agentsOverview.detail.basicInfo')}</span>
                   </button>
                   <button
@@ -884,13 +879,13 @@ const AgentsHomeView: React.FC = () => {
                     aria-current={activeDetailSection === 'behavior' ? 'page' : undefined}
                     onClick={() => setActiveDetailSection('behavior')}
                   >
-                    <MessageSquareText size={14} />
+                    <Icon glyph={MessageSquareText} size="sm" />
                     <span>{t('agentsOverview.detail.behaviorContext')}</span>
                     <span className="agent-card__config-nav-count">{selectedAgent.capabilities.length}</span>
                   </button>
                   <div className="agent-card__config-nav-divider" />
                   {selectedAgentCapabilityTabs.map((tab) => {
-                    const TabIcon = tab.icon;
+                    const tabIcon = tab.icon;
                     const isActive = activeDetailSection === tab.key;
                     return (
                       <button
@@ -901,7 +896,7 @@ const AgentsHomeView: React.FC = () => {
                         data-detail-section={tab.key}
                         onClick={() => setActiveDetailSection(tab.key)}
                       >
-                        <TabIcon size={14} />
+                        <Icon {...tabIcon} size="sm" />
                         <span>{tab.label}</span>
                         {tab.count ? <span className="agent-card__config-nav-count">{tab.count}</span> : null}
                       </button>
@@ -1017,7 +1012,7 @@ const AgentsHomeView: React.FC = () => {
               <div className="agent-card__section" data-testid="agent-detail-tools-section">
                 <div className="agent-card__section-head agent-card__section-head--tabs">
                   <div className="agent-card__section-title">
-                    {currentCapabilityMeta ? React.createElement(currentCapabilityMeta.icon, { size: 14 }) : null}
+                    {currentCapabilityMeta ? <Icon {...currentCapabilityMeta.icon} size="sm" /> : null}
                     <span>{currentCapabilityMeta?.label}</span>
                     {currentCapabilityMeta?.count ? (
                       <span className="agent-card__section-count">{currentCapabilityMeta.count}</span>
@@ -1082,7 +1077,7 @@ const AgentsHomeView: React.FC = () => {
                                   setPendingSubagentIds(null);
                                 }
                               }}
-                              icon={<RotateCcw size={12} />}
+                              icon={<Icon glyph={RotateCcw} />}
                             />
                           </Tooltip>
                           <Button
diff --git a/src/web-ui/src/app/scenes/agents/agentsIcons.ts b/src/web-ui/src/app/scenes/agents/agentsIcons.ts
index 988984f358..40c07590f1 100644
--- a/src/web-ui/src/app/scenes/agents/agentsIcons.ts
+++ b/src/web-ui/src/app/scenes/agents/agentsIcons.ts
@@ -1,8 +1,8 @@
 /**
  * Icon and color mapping for the agents scene
- * Catalog-mapped glyphs render through @openbitfun/ui Icon; the rest stay lucide.
+ * Shared icon sources for agent identity. Rendering stays owned by @openbitfun/ui Icon.
  */
-import { Icon, type IconName, type IconSize } from '@openbitfun/ui';
+import type { IconSource } from '@openbitfun/ui';
 import {
   Code2,
   FlaskConical,
@@ -14,44 +14,27 @@ import {
   Bot,
   Cpu,
   Microscope,
-  type LucideProps,
 } from 'lucide-react';
-import React from 'react';
 export { CAPABILITY_ACCENT } from './agentAppearance';
 
-function catalogSize(size?: number | string): IconSize {
-  const n = typeof size === 'number' ? size : 21;
-  if (n <= 11) return '2xs';
-  if (n <= 13) return 'xs';
-  if (n <= 15) return 'sm';
-  if (n <= 17) return 'md';
-  return 'lg';
-}
-
-function catalogIcon(name: IconName): React.FC<LucideProps> {
-  return function CatalogIcon({ size }) {
-    return React.createElement(Icon, { name, size: catalogSize(size) });
-  };
-}
-
 export type AgentIconKey =
   | 'code2' | 'eye' | 'flask' | 'bug' | 'filetext'
   | 'globe' | 'barchart' | 'layers' | 'penline' | 'server'
   | 'bot' | 'terminal' | 'microscope' | 'cpu';
 
-export const AGENT_ICON_MAP: Record<AgentIconKey, React.FC<LucideProps>> = {
-  code2: Code2,
-  eye: catalogIcon('eye'),
-  flask: FlaskConical,
-  bug: Bug,
-  filetext: FileText,
-  globe: catalogIcon('browser'),
-  barchart: BarChart2,
-  layers: Layers,
-  penline: catalogIcon('edit'),
-  server: Server,
-  bot: Bot,
-  terminal: catalogIcon('terminal'),
-  microscope: Microscope,
-  cpu: Cpu,
+export const AGENT_ICON_MAP: Record<AgentIconKey, IconSource> = {
+  code2: { glyph: Code2 },
+  eye: { name: 'eye' },
+  flask: { glyph: FlaskConical },
+  bug: { glyph: Bug },
+  filetext: { glyph: FileText },
+  globe: { name: 'browser' },
+  barchart: { glyph: BarChart2 },
+  layers: { glyph: Layers },
+  penline: { name: 'edit' },
+  server: { glyph: Server },
+  bot: { glyph: Bot },
+  terminal: { name: 'terminal' },
+  microscope: { glyph: Microscope },
+  cpu: { glyph: Cpu },
 };
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
index 6e33c96299..5798c328d3 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
@@ -26,7 +26,7 @@ const AgentCard: React.FC<AgentCardProps> = ({
 }) => {
   const { t } = useTranslation('scenes/agents');
   const badge = getAgentBadge(t, agent.agentKind, agent.source ?? agent.subagentSource);
-  const AgentGlyph = AGENT_ICON_MAP[(agent.iconKey ?? 'bot') as keyof typeof AGENT_ICON_MAP] ?? Bot;
+  const agentIcon = AGENT_ICON_MAP[(agent.iconKey ?? 'bot') as keyof typeof AGENT_ICON_MAP] ?? { glyph: Bot };
   const totalTools = toolCount ?? agent.toolCount ?? agent.defaultTools?.length ?? 0;
   const capabilityCount = agent.capabilities.length;
   const openDetails = () => onOpenDetails(agent);
@@ -56,7 +56,7 @@ const AgentCard: React.FC<AgentCardProps> = ({
       <div className="agent-card__icon-area" data-openbitfun-component="agent-card" data-openbitfun-part="iconArea">
         <div className="agent-card__icon-tile">
           <div className="agent-card__icon" data-openbitfun-component="agent-card" data-openbitfun-part="icon">
-            <AgentGlyph size={21} strokeWidth={1.6} />
+            <Icon {...agentIcon} size="lg" />
           </div>
         </div>
         <span className="agent-card__dot-field" aria-hidden="true" />
@@ -95,19 +95,19 @@ const AgentCard: React.FC<AgentCardProps> = ({
         <div className="agent-card__footer" data-openbitfun-component="agent-card" data-openbitfun-part="footer">
           <div className="agent-card__meta" data-openbitfun-component="agent-card" data-openbitfun-part="meta">
             <span className="agent-card__meta-item">
-              <span className="agent-card__meta-icon"><Wrench size={11} /></span>
+              <span className="agent-card__meta-icon"><Icon glyph={Wrench} size="xs" /></span>
               <span className="agent-card__meta-label">{t('agentCard.metrics.tools')}</span>
               <strong>{totalTools}</strong>
             </span>
             {agent.agentKind === 'mode' ? (
               <>
                 <span className="agent-card__meta-item">
-                  <span className="agent-card__meta-icon"><Icon name="extension" size="2xs" /></span>
+                  <span className="agent-card__meta-icon"><Icon name="extension" size="xs" /></span>
                   <span className="agent-card__meta-label">{t('agentCard.metrics.skills')}</span>
                   <strong>{skillCount}</strong>
                 </span>
                 <span className="agent-card__meta-item">
-                  <span className="agent-card__meta-icon"><UsersRound size={11} /></span>
+                  <span className="agent-card__meta-icon"><Icon glyph={UsersRound} size="xs" /></span>
                   <span className="agent-card__meta-label">{t('agentCard.metrics.collaboration')}</span>
                   <strong>{subagentCount}</strong>
                 </span>
@@ -121,7 +121,7 @@ const AgentCard: React.FC<AgentCardProps> = ({
             )}
             {agent.agentKind === 'subagent' && agent.subagentModelDisplayName ? (
               <span className="agent-card__meta-item">
-                <span className="agent-card__meta-icon"><Cpu size={11} /></span>
+                <span className="agent-card__meta-icon"><Icon glyph={Cpu} size="xs" /></span>
                 <span className="agent-card__meta-label">{t('agentCard.metrics.model')}</span>
                 <strong className="agent-card__meta-value--text" title={agent.subagentModelDisplayName}>
                   {agent.subagentModelDisplayName}
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
index e4ab09e5b9..6e75a81d8f 100644
--- a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
@@ -36,7 +36,7 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
   disabledReason,
 }) => {
   const { t } = useTranslation('scenes/agents');
-  const AgentGlyph = AGENT_ICON_MAP[(agent.iconKey ?? 'bot') as keyof typeof AGENT_ICON_MAP] ?? Bot;
+  const agentIcon = AGENT_ICON_MAP[(agent.iconKey ?? 'bot') as keyof typeof AGENT_ICON_MAP] ?? { glyph: Bot };
   const totalTools = toolCount ?? agent.toolCount ?? agent.defaultTools?.length ?? 0;
   const openDetails = () => onOpenDetails(agent);
   const statusLabel = disabledReason ?? t('agentCard.status.connected');
@@ -64,7 +64,7 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
     >
       <div className="core-agent-card__icon-rail">
         <div className="core-agent-card__icon-wrap" data-openbitfun-component="core-agent-card" data-openbitfun-part="icon">
-          <AgentGlyph size={21} strokeWidth={1.6} />
+          <Icon {...agentIcon} size="lg" />
         </div>
         <span className="core-agent-card__dot-field" aria-hidden="true" />
       </div>
@@ -100,19 +100,19 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
         <div className="core-agent-card__footer" data-openbitfun-component="core-agent-card" data-openbitfun-part="footer">
           <div className="core-agent-card__meta" data-openbitfun-component="core-agent-card" data-openbitfun-part="meta">
             <span className="core-agent-card__meta-item">
-              <span className="core-agent-card__meta-icon"><Wrench size={11} /></span>
+              <span className="core-agent-card__meta-icon"><Icon glyph={Wrench} size="xs" /></span>
               <span className="core-agent-card__meta-label">{t('agentCard.metrics.tools')}</span>
               <strong>{totalTools}</strong>
             </span>
             {agent.agentKind === 'mode' ? (
               <>
                 <span className="core-agent-card__meta-item">
-                  <span className="core-agent-card__meta-icon"><Icon name="extension" size="2xs" /></span>
+                  <span className="core-agent-card__meta-icon"><Icon name="extension" size="xs" /></span>
                   <span className="core-agent-card__meta-label">{t('agentCard.metrics.skills')}</span>
                   <strong>{skillCount}</strong>
                 </span>
                 <span className="core-agent-card__meta-item">
-                  <span className="core-agent-card__meta-icon"><UsersRound size={11} /></span>
+                  <span className="core-agent-card__meta-icon"><Icon glyph={UsersRound} size="xs" /></span>
                   <span className="core-agent-card__meta-label">{t('agentCard.metrics.collaboration')}</span>
                   <strong>{subagentCount}</strong>
                 </span>
@@ -120,7 +120,7 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
             ) : null}
             {agent.agentKind === 'subagent' && agent.subagentModelDisplayName ? (
               <span className="core-agent-card__meta-item">
-                <span className="core-agent-card__meta-icon"><Cpu size={11} /></span>
+                <span className="core-agent-card__meta-icon"><Icon glyph={Cpu} size="xs" /></span>
                 <span className="core-agent-card__meta-label">{t('agentCard.metrics.model')}</span>
                 <strong className="core-agent-card__meta-value--text" title={agent.subagentModelDisplayName}>
                   {agent.subagentModelDisplayName}
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 7956f72449..116fc040df 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.tsx
@@ -1,10 +1,9 @@
-import { Button, Icon, Input, ScrollArea, Switch, Textarea, Tooltip, type IconName, type IconSize } from '@openbitfun/ui';
+import { Button, Icon, Input, ScrollArea, Switch, Textarea, Tooltip, type IconSource } from '@openbitfun/ui';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   FileText,
   FolderTree,
   Minus,
-  type LucideIcon,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -28,14 +27,6 @@ import { useUserToolGroups } from './useUserToolGroups';
 import '../AgentsView.scss';
 import './CreateAgentPage.scss';
 
-function catalogLucide(name: IconName): LucideIcon {
-  return function CatalogLucide({ size }: { size?: number | string }) {
-    const n = typeof size === 'number' ? size : 14;
-    const mapped: IconSize = n <= 11 ? '2xs' : n <= 13 ? 'xs' : n <= 15 ? 'sm' : n <= 17 ? 'md' : 'lg';
-    return <Icon name={name} size={mapped} />;
-  } as LucideIcon;
-}
-
 const ID_REGEX = /^[a-zA-Z][a-zA-Z0-9_-]*$/;
 const DEFAULT_MODE_POLICY: UserContextSection[] = [
   'workspace_context',
@@ -71,10 +62,10 @@ const VISIBLE_CONTEXT_SECTIONS: UserContextSection[] = [
   'workspace_instructions',
   'project_layout',
 ];
-const CONTEXT_SECTION_ICONS: Record<UserContextSection, LucideIcon> = {
-  workspace_context: catalogLucide('terminal'),
-  workspace_instructions: FileText,
-  project_layout: FolderTree,
+const CONTEXT_SECTION_ICONS: Record<UserContextSection, IconSource> = {
+  workspace_context: { name: 'terminal' },
+  workspace_instructions: { glyph: FileText },
+  project_layout: { glyph: FolderTree },
 };
 const TOOL_SUMMARY_MIN_HEIGHT = 96;
 const TOOL_SUMMARY_MAX_HEIGHT = 360;
@@ -863,7 +854,7 @@ const CreateAgentPage: React.FC = () => {
                     {VISIBLE_CONTEXT_SECTIONS.map((section) => {
                       const label = contextSectionLabels[section];
                       const tooltipContent = contextSectionTooltips[section];
-                      const ContextIcon = CONTEXT_SECTION_ICONS[section];
+                      const contextIcon = CONTEXT_SECTION_ICONS[section];
                       const isSelected = userContextPolicy.has(section);
                       return (
                         <Tooltip
@@ -882,7 +873,7 @@ const CreateAgentPage: React.FC = () => {
                             aria-label={`${label}: ${tooltipContent}`}
                             aria-pressed={isSelected}
                           >
-                            <ContextIcon size={14} strokeWidth={1.9} aria-hidden="true" />
+                            <Icon {...contextIcon} size="sm" />
                             <span>{label}</span>
                           </button>
                         </Tooltip>
@@ -913,13 +904,13 @@ const CreateAgentPage: React.FC = () => {
                       {selectedContextSections.length > 0 ? (
                         <span className="th-create-panel__prompt-context-items">
                           {selectedContextSections.map((section) => {
-                            const ContextIcon = CONTEXT_SECTION_ICONS[section];
+                            const contextIcon = CONTEXT_SECTION_ICONS[section];
                             return (
                               <span
                                 key={section}
                                 className="th-create-panel__prompt-context-item"
                               >
-                                <ContextIcon size={12} strokeWidth={1.9} aria-hidden="true" />
+                                <Icon {...contextIcon} size="xs" />
                                 <span>{contextSectionLabels[section]}</span>
                               </span>
                             );
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
index 060e6be794..9993cd5442 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
@@ -65,7 +65,7 @@ $compatibility-sidebar-width: 236px;
       white-space: nowrap;
     }
 
-    > svg {
+    > :where(svg, [data-openbitfun-component='icon']) {
       color: var(--openbitfun-color-content-muted);
     }
   }
@@ -127,7 +127,7 @@ $compatibility-sidebar-width: 236px;
       outline-offset: -2px;
     }
 
-    > svg {
+    > :where(svg, [data-openbitfun-component='icon']) {
       color: var(--openbitfun-color-content-muted);
     }
   }
@@ -228,7 +228,7 @@ $compatibility-sidebar-width: 236px;
     font-size: var(--openbitfun-type-micro-font-size);
     line-height: var(--openbitfun-type-body-lg-line-height);
 
-    svg {
+    > :where(svg, [data-openbitfun-component='icon']) {
       margin-top: 1px;
       flex: none;
     }
@@ -479,7 +479,7 @@ $compatibility-sidebar-width: 236px;
     border-radius: var(--openbitfun-radius-base);
     background: var(--openbitfun-color-surface-subtle);
 
-    > svg {
+    > :where(svg, [data-openbitfun-component='icon']) {
       flex: none;
       color: var(--openbitfun-color-content-muted);
     }
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx
index 75943233f4..e9d3918eb1 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx
@@ -1,6 +1,5 @@
-import { Button, Icon, ScrollArea, SearchField, Switch, Textarea, type IconName, type IconSize } from '@openbitfun/ui';
+import { Button, Icon, ScrollArea, SearchField, Switch, Textarea, type IconSource } from '@openbitfun/ui';
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import { Bot, CircleUserRound, Network, Package, PawPrint, Server, Webhook, Wrench } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
@@ -28,14 +27,6 @@ import {
 import { useEcosystemCompatibilityStore } from './ecosystemCompatibilityStore';
 import './EcosystemCompatibilityScene.scss';
 
-function catalogLucide(name: IconName): LucideIcon {
-  return function CatalogLucide({ size }: { size?: number | string }) {
-    const n = typeof size === 'number' ? size : 15;
-    const mapped: IconSize = n <= 11 ? '2xs' : n <= 13 ? 'xs' : n <= 15 ? 'sm' : n <= 17 ? 'md' : 'lg';
-    return <Icon name={name} size={mapped} />;
-  } as LucideIcon;
-}
-
 const AcpAgentsConfig = lazy(
   () => import('@/infrastructure/config/components/AcpAgentsConfig'),
 );
@@ -68,18 +59,18 @@ function EcosystemProductIcon({ productId, size }: {
   );
 }
 
-const IMPORT_ITEM_ICONS: Record<EcosystemImportItemKind, LucideIcon> = {
-  account: CircleUserRound,
-  settings: catalogLucide('settings'),
-  command: catalogLucide('command-mac'),
-  tool: Wrench,
-  subagent: Bot,
-  skill: Package,
-  mcp: Server,
-  hook: Webhook,
-  memory: catalogLucide('thinking'),
-  plugin: catalogLucide('extension'),
-  pet: PawPrint,
+const IMPORT_ITEM_ICONS: Record<EcosystemImportItemKind, IconSource> = {
+  account: { glyph: CircleUserRound },
+  settings: { name: 'settings' },
+  command: { name: 'command-mac' },
+  tool: { glyph: Wrench },
+  subagent: { glyph: Bot },
+  skill: { glyph: Package },
+  mcp: { glyph: Server },
+  hook: { glyph: Webhook },
+  memory: { name: 'thinking' },
+  plugin: { name: 'extension' },
+  pet: { glyph: PawPrint },
 };
 
 const GROUP_ORDER = ['connected', 'available', 'other'] as const;
@@ -444,7 +435,7 @@ const EcosystemCompatibilityScene: React.FC = () => {
           </div>
           {importItems.map((item) => {
             const state = importItemState(item);
-            const ItemIcon = IMPORT_ITEM_ICONS[item.kind];
+            const itemIcon = IMPORT_ITEM_ICONS[item.kind];
             const ready = state === 'ready' || state === 'readyRename';
             const dimmed = [
               'notDetected',
@@ -481,7 +472,7 @@ const EcosystemCompatibilityScene: React.FC = () => {
               >
                 <span className="ecosystem-compatibility__import-item" role="cell">
                   <span className="ecosystem-compatibility__import-item-icon" aria-hidden="true">
-                    <ItemIcon size={15} />
+                    <Icon {...itemIcon} size="sm" />
                   </span>
                   <span className="ecosystem-compatibility__import-item-copy">
                     <strong title={itemName}>{itemName}</strong>
@@ -598,7 +589,7 @@ const EcosystemCompatibilityScene: React.FC = () => {
 
                     <div className="ecosystem-compatibility__runtime-mode">
                       <span className="ecosystem-compatibility__runtime-mode-icon" aria-hidden="true">
-                        <Bot size={16} />
+                        <Icon glyph={Bot} size="md" />
                       </span>
                       <div className="ecosystem-compatibility__runtime-mode-copy">
                         <div className="ecosystem-compatibility__runtime-mode-title">
@@ -715,7 +706,7 @@ const EcosystemCompatibilityScene: React.FC = () => {
           </div>
         ) : (
           <div className="ecosystem-compatibility__empty-card">
-            <Network size={18} aria-hidden="true" />
+            <Icon glyph={Network} size="md" />
             <div>
               <strong>{t('run.notConfiguredTitle', { name: selectedRuntime.spec.name })}</strong>
               <p>{t('run.notConfiguredDescription', { name: selectedRuntime.spec.name })}</p>
@@ -927,7 +918,7 @@ const EcosystemCompatibilityScene: React.FC = () => {
             <div className="ecosystem-compatibility__unified-stack">
               {selectedRuntime.spec.development ? (
                 <div className="ecosystem-compatibility__development-card" role="status">
-                  <Bot size={20} aria-hidden="true" />
+                  <Icon glyph={Bot} size="lg" />
                   <div>
                     <strong>{t('comingSoon.title')}</strong>
                     <p>{t('comingSoon.notice', { name: selectedRuntime.spec.name })}</p>
diff --git a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.appearance.ts b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.appearance.ts
index 50b48ce706..5d1e0eb4e5 100644
--- a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.appearance.ts
+++ b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.appearance.ts
@@ -1,2 +1,2 @@
 import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
-export const fileViewerNavAppearanceDescriptor: AppearanceSurfaceDescriptor = { id: 'file-viewer-nav', parts: [{ id: 'root' }, { id: 'header' }, { id: 'icon' }, { id: 'label' }, { id: 'actions' }] };
+export const fileViewerNavAppearanceDescriptor: AppearanceSurfaceDescriptor = { id: 'file-viewer-nav', parts: [{ id: 'root' }, { id: 'header' }, { id: 'actions' }] };
diff --git a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
index 1100b11409..4e0c51073c 100644
--- a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
+++ b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
@@ -27,63 +27,10 @@
   &__header {
     display: flex;
     align-items: center;
-    gap: var(--openbitfun-space-2);
-    height: 32px;
-    padding: 0 var(--openbitfun-space-2) 0 var(--openbitfun-space-3);
-    border: none;
-    cursor: pointer;
-    width: calc(100% - var(--openbitfun-space-2) * 2);
-    text-align: left;
-    transition: background var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
-  &__back-icon {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    opacity: 1;
-    color: var(--openbitfun-color-content-muted);
-    opacity: 0.7;
-    transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
-
-    .openbitfun-file-viewer-nav__header:hover & {
-      opacity: 1;
-    }
-  }
-
-
-    &:hover {
-      background: var(--openbitfun-color-action-neutral-surface-hover);
-    }
-
-    &:active {
-      background: var(--openbitfun-color-action-neutral-surface-pressed);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--openbitfun-color-accent-default);
-      outline-offset: -1px;
-    }
-    border-radius: var(--openbitfun-radius-base);
-    background: var(--openbitfun-color-action-quiet-hover);
-    margin: 0 var(--openbitfun-space-2);
-    color: var(--openbitfun-color-content-primary);
-    font-size: var(--openbitfun-type-label-md-font-size);
-    font-weight: var(--openbitfun-type-label-sm-font-weight);
+    justify-content: flex-end;
     flex-shrink: 0;
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    color: var(--openbitfun-color-accent-default);
-  }
-
-  &__label {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: var(--openbitfun-type-modifier-leading-none-line-height);
+    height: 32px;
+    padding: 0 var(--openbitfun-space-2);
   }
 
   &__actions {
diff --git a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx
index 840df9cd16..ed5f0bfc9e 100644
--- a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx
+++ b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx
@@ -1,9 +1,8 @@
 /**
  * FileViewerNav — scene-specific navigation for the file viewer scene.
  *
- * Header mirrors the directory NavItem (Folder icon + label, same font-size /
- * height / padding) so the transition from MainNav feels like the item
- * "expanded in-place". Navigation back is handled by NavBar's back button.
+ * NavBar owns the scene title and navigation controls. This panel keeps the
+ * workspace-specific file actions above the file tree or search results.
  */
 
 import React, { useState, useCallback } from 'react';
@@ -42,60 +41,61 @@ const FileViewerNav: React.FC = () => {
       data-openbitfun-component="file-viewer-nav"
       data-openbitfun-part="root"
       className="openbitfun-file-viewer-nav"
+      aria-label={t('nav.items.project')}
     >
-      <NavigationPanelHeader className="openbitfun-file-viewer-nav__panel-header">
-        <div className="openbitfun-file-viewer-nav__header" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="header">
-        <span className="openbitfun-file-viewer-nav__icon" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="icon" aria-hidden="true">
-          <Icon name="folder" size="sm" />
-        </span>
-        <span className="openbitfun-file-viewer-nav__label" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="label">
-          {t('nav.items.project')}
-        </span>
-        {currentWorkspace?.rootPath && (
-        <span className="openbitfun-file-viewer-nav__actions" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="actions">
-            {viewMode === 'tree' && explorerToolbar && (
-              <>
-                <Tooltip content={tTools('fileTree.newFile')} placement="bottom">
-                  <IconButton
-                    size="sm"
-                    aria-label={tTools('fileTree.newFile')}
-                    icon={<FilePlus />}
-                    onClick={explorerToolbar.onNewFile}
-                  />
-                </Tooltip>
-                <Tooltip content={tTools('fileTree.newFolder')} placement="bottom">
-                  <IconButton
-                    size="sm"
-                    aria-label={tTools('fileTree.newFolder')}
-                    icon={<FolderPlus />}
-                    onClick={explorerToolbar.onNewFolder}
-                  />
-                </Tooltip>
-                <Tooltip content={tTools('fileTree.refresh')} placement="bottom">
-                  <IconButton
-                    size="sm"
-                    aria-label={tTools('fileTree.refresh')}
-                    icon={<Icon name="refresh" size="lg" />}
-                    onClick={explorerToolbar.onRefresh}
-                  />
-                </Tooltip>
-              </>
-            )}
-            <Tooltip
-              content={viewMode === 'tree' ? tFiles('actions.switchToSearch') : tFiles('actions.switchToTree')}
-              placement="bottom"
-            >
-              <IconButton
-                size="sm"
-                aria-label={viewMode === 'tree' ? tFiles('actions.switchToSearch') : tFiles('actions.switchToTree')}
-                icon={viewMode === 'tree' ? <Icon name="search" size="sm" /> : <List />}
-                onClick={handleToggleViewMode}
-              />
-            </Tooltip>
-          </span>
-        )}
-        </div>
-      </NavigationPanelHeader>
+      {currentWorkspace?.rootPath && (
+        <NavigationPanelHeader className="openbitfun-file-viewer-nav__panel-header">
+          <div
+            className="openbitfun-file-viewer-nav__header"
+            data-openbitfun-component="file-viewer-nav"
+            data-openbitfun-part="header"
+            role="toolbar"
+            aria-label={t('nav.items.project')}
+          >
+            <span className="openbitfun-file-viewer-nav__actions" data-openbitfun-component="file-viewer-nav" data-openbitfun-part="actions">
+              {viewMode === 'tree' && explorerToolbar && (
+                <>
+                  <Tooltip content={tTools('fileTree.newFile')} placement="bottom">
+                    <IconButton
+                      size="sm"
+                      aria-label={tTools('fileTree.newFile')}
+                      icon={<FilePlus />}
+                      onClick={explorerToolbar.onNewFile}
+                    />
+                  </Tooltip>
+                  <Tooltip content={tTools('fileTree.newFolder')} placement="bottom">
+                    <IconButton
+                      size="sm"
+                      aria-label={tTools('fileTree.newFolder')}
+                      icon={<FolderPlus />}
+                      onClick={explorerToolbar.onNewFolder}
+                    />
+                  </Tooltip>
+                  <Tooltip content={tTools('fileTree.refresh')} placement="bottom">
+                    <IconButton
+                      size="sm"
+                      aria-label={tTools('fileTree.refresh')}
+                      icon={<Icon name="refresh" size="lg" />}
+                      onClick={explorerToolbar.onRefresh}
+                    />
+                  </Tooltip>
+                </>
+              )}
+              <Tooltip
+                content={viewMode === 'tree' ? tFiles('actions.switchToSearch') : tFiles('actions.switchToTree')}
+                placement="bottom"
+              >
+                <IconButton
+                  size="sm"
+                  aria-label={viewMode === 'tree' ? tFiles('actions.switchToSearch') : tFiles('actions.switchToTree')}
+                  icon={viewMode === 'tree' ? <Icon name="search" size="sm" /> : <List />}
+                  onClick={handleToggleViewMode}
+                />
+              </Tooltip>
+            </span>
+          </div>
+        </NavigationPanelHeader>
+      )}
       <NavigationPanelBody className="openbitfun-file-viewer-nav__body">
         <NavigationPanelContent className="openbitfun-file-viewer-nav__content">
           <FilesPanel
diff --git a/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx b/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
index bc2333ee93..7323ef4814 100644
--- a/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, type IconName, type IconSize } from '@openbitfun/ui';
+import { Icon, type IconName, type IconSource } from '@openbitfun/ui';
 import codingFootprintIcon from '@/assets/miniapps/catalog/coding-footprint.png';
 import dailyDivinationIcon from '@/assets/miniapps/catalog/daily-divination.png';
 import gomokuIcon from '@/assets/miniapps/catalog/gomoku.png';
@@ -37,14 +37,6 @@ const MINI_APP_CATALOG: Record<string, IconName> = {
   Terminal: 'terminal',
 };
 
-function catalogSize(size: number): IconSize {
-  if (size <= 11) return '2xs';
-  if (size <= 13) return 'xs';
-  if (size <= 15) return 'sm';
-  if (size <= 17) return 'md';
-  return 'lg';
-}
-
 const ICON_GRADIENTS = [
   'linear-gradient(135deg, color-mix(in srgb, var(--openbitfun-color-accent-hover) 35%, transparent) 0%, color-mix(in srgb, var(--openbitfun-color-accent-secondary) 25%, transparent) 100%)',
   'linear-gradient(135deg, color-mix(in srgb, var(--openbitfun-color-status-success-content) 30%, transparent) 0%, color-mix(in srgb, var(--openbitfun-color-accent-hover) 25%, transparent) 100%)',
@@ -101,20 +93,18 @@ export function renderMiniAppIcon(name: string, size = 28): React.ReactNode {
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join('') as keyof typeof MINI_APP_ICONS;
   const catalogName = MINI_APP_CATALOG[key];
-  if (catalogName) {
-    return (
-      <Icon
-        name={catalogName}
-        size={catalogSize(size)}
-        style={{ width: size, height: size }}
-      />
-    );
-  }
   const LucideGlyph = MINI_APP_ICONS[key];
+  const iconSource: IconSource = catalogName
+    ? { name: catalogName }
+    : { glyph: LucideGlyph ?? Box };
 
-  return LucideGlyph
-    ? <LucideGlyph size={size} strokeWidth={1.5} />
-    : <Box size={size} strokeWidth={1.5} />;
+  return (
+    <Icon
+      {...iconSource}
+      size="lg"
+      style={{ width: size, height: size }}
+    />
+  );
 }
 
 export function getMiniAppIconGradient(icon: string): string {
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
index c49217df2e..61b567a546 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
@@ -394,8 +394,8 @@ const MiniAppGalleryView: React.FC<MiniAppGalleryViewProps> = ({ tabs }) => {
         <GalleryEmpty
           icon={
             apps.length === 0
-              ? <Icon name="spark" size="lg" />
-              : <LayoutGrid size={36} strokeWidth={1.2} />
+              ? { name: 'spark' }
+              : { glyph: LayoutGrid }
           }
           message={apps.length === 0
             ? t('empty.generate')
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
index 993879be8b..c5482d2fba 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
@@ -635,7 +635,7 @@ const MiniAppLibraryView: React.FC<MiniAppLibraryViewProps> = ({ tabs }) => {
     if (libraryItems.length === 0 && !catalogLoading) {
       return (
         <GalleryEmpty
-          icon={<PackageCheck size={34} strokeWidth={1.35} />}
+          icon={{ glyph: PackageCheck }}
           message={query || category !== 'all'
             ? t('empty.noMatch')
             : t('market.library.empty')}
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
index f59807814c..750dd5dc7b 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
@@ -332,7 +332,7 @@ const MiniAppMarketView: React.FC<MiniAppMarketViewProps> = ({ tabs }) => {
           ) : null}
           {!loading && error ? (
             <GalleryEmpty
-              icon={<AlertTriangle size={34} />}
+              icon={{ glyph: AlertTriangle }}
               isError
               message={t('market.messages.catalogFailed', { error })}
               action={(
@@ -344,7 +344,7 @@ const MiniAppMarketView: React.FC<MiniAppMarketViewProps> = ({ tabs }) => {
             />
           ) : null}
           {!loading && !error && items.length === 0 ? (
-            <GalleryEmpty icon={<PackageCheck size={34} />} message={t('market.empty')} />
+            <GalleryEmpty icon={{ glyph: PackageCheck }} message={t('market.empty')} />
           ) : null}
           {!loading && items.length > 0 ? (
             <>
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
index 58ddbc2f99..3d89dc81a3 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
@@ -264,7 +264,7 @@ const MiniAppSubmissionsView: React.FC<MiniAppSubmissionsViewProps> = ({ tabs })
         />
         {tabs}
         <GalleryEmpty
-          icon={<Github size={36} />}
+          icon={{ glyph: Github }}
           message={t('market.submissions.signInRequired')}
           action={<MarketAccountControls />}
         />
diff --git a/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss b/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
index 946606d4bd..e4fac1768d 100644
--- a/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
+++ b/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
@@ -836,7 +836,7 @@ $ins-r-lg: 12px;
       opacity: 0;
     }
 
-    svg { display: none; }
+    > :where(svg, [data-openbitfun-component='icon']) { display: none; }
 
     &:hover {
       color: var(--openbitfun-color-content-secondary);
diff --git a/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx b/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx
index 6284abc630..a382d0ef1d 100644
--- a/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx
+++ b/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
-import { Button, Combobox, Icon, IconButton, ScrollArea, type ComboboxOption } from '@openbitfun/ui';
+import { Button, Combobox, Icon, IconButton, ScrollArea, type ComboboxOption, type IconSource } from '@openbitfun/ui';
 import { Loader2, AlertTriangle, BarChart3, Calendar, Target, Zap, Trophy, AlertCircle, Lightbulb, Rocket, Database, ScanSearch, Layers3, FileCheck2, Gauge } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { insightsApi, type InsightsReport, type InsightsReportMeta, type InsightsStats } from '@/infrastructure/api/insightsApi';
@@ -20,15 +20,15 @@ const log = createLogger('InsightsScene');
 
 // Report section ids for TOC / scroll targets
 const SECTIONS = [
-  { id: 'overview', labelKey: 'overview', icon: Target },
-  { id: 'stats', labelKey: 'stats', icon: BarChart3 },
-  { id: 'work-on', labelKey: 'workOn', icon: Target },
-  { id: 'usage', labelKey: 'usage', icon: Zap },
-  { id: 'wins', labelKey: 'wins', icon: Trophy },
-  { id: 'friction', labelKey: 'friction', icon: AlertCircle },
-  { id: 'suggestions', labelKey: 'suggestions', icon: Lightbulb },
-  { id: 'horizon', labelKey: 'horizon', icon: Rocket },
-] as const;
+  { id: 'overview', labelKey: 'overview', icon: { glyph: Target } },
+  { id: 'stats', labelKey: 'stats', icon: { glyph: BarChart3 } },
+  { id: 'work-on', labelKey: 'workOn', icon: { glyph: Target } },
+  { id: 'usage', labelKey: 'usage', icon: { glyph: Zap } },
+  { id: 'wins', labelKey: 'wins', icon: { glyph: Trophy } },
+  { id: 'friction', labelKey: 'friction', icon: { glyph: AlertCircle } },
+  { id: 'suggestions', labelKey: 'suggestions', icon: { glyph: Lightbulb } },
+  { id: 'horizon', labelKey: 'horizon', icon: { glyph: Rocket } },
+] as const satisfies ReadonlyArray<{ id: string; labelKey: string; icon: IconSource }>;
 
 const DAY_OPTIONS = [7, 14, 30, 90] as const;
 
@@ -37,41 +37,44 @@ const GENERATION_STEPS = [
     id: 'collect',
     titleKey: 'insights.generationStageCollect',
     detailKey: 'insights.generationStageCollectDetail',
-    icon: Database,
+    icon: { glyph: Database },
     stages: ['starting', 'data_collection'],
   },
   {
     id: 'sessions',
     titleKey: 'insights.generationStageSessions',
     detailKey: 'insights.generationStageSessionsDetail',
-    icon: ScanSearch,
+    icon: { glyph: ScanSearch },
     stages: ['facet_extraction', 'facet_retry'],
   },
   {
     id: 'patterns',
     titleKey: 'insights.generationStagePatterns',
     detailKey: 'insights.generationStagePatternsDetail',
-    icon: Layers3,
+    icon: { glyph: Layers3 },
     stages: ['aggregation', 'analysis', 'analysis_retry'],
   },
   {
     id: 'summary',
     titleKey: 'insights.generationStageSummary',
     detailKey: 'insights.generationStageSummaryDetail',
-    icon: function SparkIcon({ size }: { size?: number }) {
-      const n = typeof size === 'number' ? size : 13;
-      return <Icon name="spark" size={n <= 11 ? '2xs' : n <= 13 ? 'xs' : n <= 15 ? 'sm' : n <= 17 ? 'md' : 'lg'} />;
-    },
+    icon: { name: 'spark' },
     stages: ['synthesis'],
   },
   {
     id: 'save',
     titleKey: 'insights.generationStageSave',
     detailKey: 'insights.generationStageSaveDetail',
-    icon: FileCheck2,
+    icon: { glyph: FileCheck2 },
     stages: ['assembly', 'complete'],
   },
-] as const;
+] as const satisfies ReadonlyArray<{
+  id: string;
+  titleKey: string;
+  detailKey: string;
+  icon: IconSource;
+  stages: readonly string[];
+}>;
 
 interface GenerationProgress {
   stage: string;
@@ -135,12 +138,11 @@ const GenerationPanel: React.FC<{ progress: GenerationProgress }> = ({ progress
 
       <div className="insights-generation__steps">
         {GENERATION_STEPS.map((step, index) => {
-          const StepIcon = step.icon;
           const state = index < activeIndex ? 'complete' : index === activeIndex ? 'active' : 'pending';
           return (
             <div key={step.id} className={`insights-generation__step insights-generation__step--${state}`}>
               <span className="insights-generation__step-icon">
-                {state === 'complete' ? <Icon name="check-line" size="xs" /> : <StepIcon size={13} />}
+                {state === 'complete' ? <Icon name="check-line" size="xs" /> : <Icon {...step.icon} size="xs" />}
               </span>
               <span className="insights-generation__step-label">{t(step.titleKey)}</span>
             </div>
@@ -269,7 +271,7 @@ const InsightsScene: React.FC = () => {
 
       {error && (
         <div className="insights-scene__error" data-openbitfun-scene="insights" data-openbitfun-part="error">
-          <AlertTriangle size={14} />
+          <Icon glyph={AlertTriangle} size="sm" />
           <span>{error}</span>
           <IconButton
             size="sm"
@@ -360,7 +362,7 @@ const ReportMetaCard: React.FC<{
           className={`insights-meta-card__metric insights-meta-card__metric--session-tokens${sessionUsagePartial ? ' insights-meta-card__metric--partial' : ''}`}
           title={sessionTokenTitle}
         >
-          <Gauge size={14} />
+          <Icon glyph={Gauge} size="sm" />
           <span>
             <strong>
               {hasSessionUsage
@@ -371,7 +373,7 @@ const ReportMetaCard: React.FC<{
           </span>
         </span>
         <span className="insights-meta-card__metric">
-          <BarChart3 size={14} />
+          <Icon glyph={BarChart3} size="sm" />
           <span>
             <strong>{formatNumber(meta.analyzed_sessions)} / {formatNumber(meta.total_sessions)}</strong>
             {t('insights.analyzedSessions')}
@@ -387,7 +389,7 @@ const ReportMetaCard: React.FC<{
           <Icon name="clock" size="2xs" /> {meta.total_hours.toFixed(1)} {t('insights.hours')}
         </span>
         <span>
-          <Calendar size={11} /> {formatNumber(meta.days_covered)} {t('insights.days')}
+          <Icon glyph={Calendar} size="2xs" /> {formatNumber(meta.days_covered)} {t('insights.days')}
         </span>
       </div>
       {(meta.top_goals?.length > 0 || meta.languages?.length > 0) && (
@@ -504,7 +506,7 @@ const ReportNav: React.FC<{ report: InsightsReport; scrollContainerRef: React.Re
   return (
     <nav className="insights-report-nav">
       {visibleSections.map((section) => {
-        const SectionIcon = SECTIONS.find(s => s.id === section.id)?.icon || Target;
+        const sectionIcon = SECTIONS.find(s => s.id === section.id)?.icon ?? { glyph: Target };
         return (
           <button
             key={section.id}
@@ -512,7 +514,7 @@ const ReportNav: React.FC<{ report: InsightsReport; scrollContainerRef: React.Re
             onClick={() => scrollToSection(section.id)}
             title={section.label}
           >
-            <SectionIcon size={14} />
+            <Icon {...sectionIcon} size="sm" />
             <span className="insights-report-nav__label">{section.label}</span>
           </button>
         );
@@ -555,8 +557,8 @@ const ReportView: React.FC<{ report: InsightsReport; onBack: () => void }> = ({
         </Button>
         <div className="insights-report-header__meta">
           <span><Icon name="side-chat" size="2xs" /> {report.total_messages} {t('insights.messages')}</span>
-          <span><BarChart3 size={11} /> {report.total_sessions} {t('insights.sessions')}</span>
-          <span><Calendar size={11} /> {dateStart} ~ {dateEnd}</span>
+          <span><Icon glyph={BarChart3} size="2xs" /> {report.total_sessions} {t('insights.sessions')}</span>
+          <span><Icon glyph={Calendar} size="2xs" /> {dateStart} ~ {dateEnd}</span>
         </div>
         <div className="insights-report-header__actions">
           <Button
diff --git a/src/web-ui/src/app/scenes/nav-registry.ts b/src/web-ui/src/app/scenes/nav-registry.ts
index 6e45dfc395..8c78eb0e03 100644
--- a/src/web-ui/src/app/scenes/nav-registry.ts
+++ b/src/web-ui/src/app/scenes/nav-registry.ts
@@ -3,7 +3,7 @@
  *
  * Extension pattern:
  *   1. Create `src/app/scenes/<scene>/XxxNav.tsx`
- *   2. Add one entry to SCENE_NAV_REGISTRY below
+ *   2. Register its component, bootstrap title key, and preloader below
  *
  * Scenes without a registered nav component fall back to MainNav (the default sidebar).
  */
@@ -14,6 +14,13 @@ import type { SceneTabId } from '../components/SceneBar/types';
 
 type LazyNavComponent = ReturnType<typeof lazy<ComponentType>>;
 
+interface SceneNavRegistration {
+  component: LazyNavComponent;
+  /** Resolved by NavBar through the bootstrap common/shared namespaces. */
+  titleKey: string;
+  preload: () => Promise<unknown>;
+}
+
 /**
  * The settings nav renders every label from the lazy `settings` namespace, so the
  * chunk and that namespace are loaded together — mounting before it resolves
@@ -28,15 +35,17 @@ const loadSettingsNav = async () => {
 };
 const loadFileViewerNav = () => import('./file-viewer/FileViewerNav');
 
-const SCENE_NAV_REGISTRY: Partial<Record<SceneTabId, LazyNavComponent>> = {
-  settings: lazy(loadSettingsNav),
-  'file-viewer': lazy(loadFileViewerNav),
-  // terminal: lazy(() => import('./terminal/TerminalNav')),
-};
-
-const SCENE_NAV_LOADERS: Partial<Record<SceneTabId, () => Promise<unknown>>> = {
-  settings: loadSettingsNav,
-  'file-viewer': loadFileViewerNav,
+const SCENE_NAV_REGISTRY: Partial<Record<SceneTabId, SceneNavRegistration>> = {
+  settings: {
+    component: lazy(loadSettingsNav),
+    titleKey: 'shared:features.settings',
+    preload: loadSettingsNav,
+  },
+  'file-viewer': {
+    component: lazy(loadFileViewerNav),
+    titleKey: 'nav.items.project',
+    preload: loadFileViewerNav,
+  },
 };
 
 /**
@@ -44,9 +53,13 @@ const SCENE_NAV_LOADERS: Partial<Record<SceneTabId, () => Promise<unknown>>> = {
  * or `null` if the scene uses the default MainNav.
  */
 export function getSceneNav(sceneId: SceneTabId): LazyNavComponent | null {
-  return SCENE_NAV_REGISTRY[sceneId] ?? null;
+  return SCENE_NAV_REGISTRY[sceneId]?.component ?? null;
+}
+
+export function getSceneNavTitleKey(sceneId: SceneTabId): string | null {
+  return SCENE_NAV_REGISTRY[sceneId]?.titleKey ?? null;
 }
 
 export async function preloadSceneNav(sceneId: SceneTabId): Promise<void> {
-  await SCENE_NAV_LOADERS[sceneId]?.();
+  await SCENE_NAV_REGISTRY[sceneId]?.preload();
 }
diff --git a/src/web-ui/src/app/scenes/pages/PagesScene.scss b/src/web-ui/src/app/scenes/pages/PagesScene.scss
index d58040970c..c3c26311a8 100644
--- a/src/web-ui/src/app/scenes/pages/PagesScene.scss
+++ b/src/web-ui/src/app/scenes/pages/PagesScene.scss
@@ -16,7 +16,7 @@ $pages-gutter: clamp(24px, 4vw, 56px);
   .gallery-empty {
     min-height: 280px;
 
-    > span {
+    > .gallery-empty__message {
       display: flex;
       flex-direction: column;
       align-items: center;
diff --git a/src/web-ui/src/app/scenes/pages/PagesScene.tsx b/src/web-ui/src/app/scenes/pages/PagesScene.tsx
index 4c76b9a328..f38facfc4a 100644
--- a/src/web-ui/src/app/scenes/pages/PagesScene.tsx
+++ b/src/web-ui/src/app/scenes/pages/PagesScene.tsx
@@ -751,7 +751,7 @@ const PagesScene: React.FC<PagesSceneProps> = ({ isActive = true }) => {
           <GalleryEmpty
             data-openbitfun-scene="pages"
             data-openbitfun-part="empty"
-            icon={<PanelsTopLeft size={36} />}
+            icon={{ glyph: PanelsTopLeft }}
             message={<>{t('signInRequired')}<small>{t('signInHint')}</small></>}
             action={(
               <Button variant="fill" size="sm" onClick={() => setShowAccountDialog(true)}>
@@ -764,7 +764,7 @@ const PagesScene: React.FC<PagesSceneProps> = ({ isActive = true }) => {
           <GalleryEmpty
             data-openbitfun-scene="pages"
             data-openbitfun-part="error"
-            icon={<PanelsTopLeft size={36} />}
+            icon={{ glyph: PanelsTopLeft }}
             message={<>{t('loadFailed')}<small>{loadError}</small></>}
             isError
             action={<Button variant="outline" size="sm" onClick={() => void loadPages()}>{t('actions.retry')}</Button>}
@@ -774,7 +774,7 @@ const PagesScene: React.FC<PagesSceneProps> = ({ isActive = true }) => {
           <GalleryEmpty
             data-openbitfun-scene="pages"
             data-openbitfun-part="empty"
-            icon={<PanelsTopLeft size={36} />}
+            icon={{ glyph: PanelsTopLeft }}
             message={<>{t('empty')}<small>{t('emptyHint')}</small></>}
             testId="pages-empty"
           />
diff --git a/src/web-ui/src/app/scenes/profile/views/NurseryGallery.tsx b/src/web-ui/src/app/scenes/profile/views/NurseryGallery.tsx
index a108359d7d..96ee4d4c3e 100644
--- a/src/web-ui/src/app/scenes/profile/views/NurseryGallery.tsx
+++ b/src/web-ui/src/app/scenes/profile/views/NurseryGallery.tsx
@@ -236,13 +236,13 @@ const NurseryGallery: React.FC = () => {
                 </>
               ) : templateStatsStatus === 'error' ? (
                 <span className="nursery-defaults__stat nursery-defaults__stat--error">
-                  <CircleAlert size={13} strokeWidth={1.8} aria-hidden="true" />
+                  <Icon glyph={CircleAlert} size="xs" />
                   {t('nursery.template.statsUnavailable')}
                 </span>
               ) : templateStats ? (
                 <>
                   <span className="nursery-defaults__stat">
-                    <Wrench size={13} strokeWidth={1.8} aria-hidden="true" />
+                    <Icon glyph={Wrench} size="xs" />
                     {t('nursery.template.stats.tools', { count: templateStats.enabledToolCount })}
                   </span>
                   <span className="nursery-defaults__stat">
@@ -284,7 +284,7 @@ const NurseryGallery: React.FC = () => {
             />
           ) : workspaceError && sortedAssistantWorkspacesList.length === 0 ? (
             <GalleryEmpty
-              icon={<CircleAlert size={32} strokeWidth={1.5} aria-hidden="true" />}
+              icon={{ glyph: CircleAlert }}
               message={t('nursery.gallery.loadFailed')}
               isError
               className="nursery-gallery__empty"
@@ -292,7 +292,7 @@ const NurseryGallery: React.FC = () => {
             />
           ) : sortedAssistantWorkspacesList.length === 0 ? (
             <GalleryEmpty
-              icon={<Bot size={32} strokeWidth={1.5} aria-hidden="true" />}
+              icon={{ glyph: Bot }}
               message={(
                 <>
                   <strong>{t('nursery.gallery.emptyTitle')}</strong>
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.scss b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
index 53d236cd10..7667ebc4d8 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.scss
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
@@ -40,26 +40,6 @@
     padding-inline-end: var(--openbitfun-space-2);
   }
 
-  // ── Header: title (back/forward lives in NavBar) ──────
-
-  &__header {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    min-height: 18px;
-  }
-
-  &__title {
-    @include nav-font.nav-panel-text-heading;
-
-    font-size: var(--openbitfun-type-body-lg-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-    line-height: var(--openbitfun-type-modifier-leading-dense-line-height);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   // ── Search ───────────────────────────────────────────────
 
   &__search {
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx b/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx
index 2ff57b98c8..11235ccbef 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.test.tsx
@@ -78,12 +78,12 @@ describe('SettingsNav shared component composition', () => {
     target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
   }
 
-  it('keeps the header outside the scroll area and applies content styles to the real content slot', () => {
+  it('keeps search outside the scroll area and applies content styles to the real content slot', () => {
     const nav = container.querySelector('nav')!;
     const header = nav.querySelector(':scope > [data-openbitfun-part="header"]')!;
     const viewport = nav.querySelector('[data-openbitfun-component="scroll-area"]')!;
     const content = viewport.querySelector('[data-openbitfun-part="content"]')!;
-    expect(header.querySelector('.openbitfun-settings-nav__title')).not.toBeNull();
+    expect(nav.getAttribute('aria-label')).toBe('shared:features.settings');
     expect(header.querySelector('input')).not.toBeNull();
     expect(viewport.contains(header)).toBe(false);
     expect(content.classList.contains('openbitfun-settings-nav__content')).toBe(true);
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
index 8f784dfa2a..66463e07e6 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
@@ -233,35 +233,35 @@ const SettingsNav: React.FC = () => {
     <NavigationPanel
       className="openbitfun-settings-nav"
       data-testid="settings-nav"
+      aria-label={t('shared:features.settings')}
       data-openbitfun-component="settings-nav"
       data-openbitfun-part="root"
     >
-      <NavigationPanelHeader className="openbitfun-settings-nav__panel-header">
-        <>
-          <div className="openbitfun-settings-nav__header" data-openbitfun-component="settings-nav" data-openbitfun-part="header">
-            <span className="openbitfun-settings-nav__title">{t('shared:features.settings')}</span>
-          </div>
-          <div className="openbitfun-settings-nav__search" data-openbitfun-component="settings-nav" data-openbitfun-part="search">
-            <SearchField
-              ref={searchInputRef}
-              className="openbitfun-settings-nav__search-field"
-              size="sm"
-              value={draftQuery}
-              onValueChange={setDraftQuery}
-              onClear={draftQuery ? () => {
-                clearSearch();
-                searchInputRef.current?.focus();
-              } : undefined}
-              clearLabel={draftQuery ? tComponents('search.clear') : undefined}
-              onKeyDown={handleSearchKeyDown}
-              leadingIcon={<Icon name="search" size="sm" />}
-              placeholder={t('navigation.search.placeholder')}
-              aria-label={t('navigation.search.placeholder')}
-              aria-controls="settings-nav-results"
-              aria-expanded={isSearchMode}
-            />
-          </div>
-        </>
+      <NavigationPanelHeader
+        className="openbitfun-settings-nav__panel-header"
+        data-openbitfun-component="settings-nav"
+        data-openbitfun-part="header"
+      >
+        <div className="openbitfun-settings-nav__search" data-openbitfun-component="settings-nav" data-openbitfun-part="search">
+          <SearchField
+            ref={searchInputRef}
+            className="openbitfun-settings-nav__search-field"
+            size="sm"
+            value={draftQuery}
+            onValueChange={setDraftQuery}
+            onClear={draftQuery ? () => {
+              clearSearch();
+              searchInputRef.current?.focus();
+            } : undefined}
+            clearLabel={draftQuery ? tComponents('search.clear') : undefined}
+            onKeyDown={handleSearchKeyDown}
+            leadingIcon={<Icon name="search" size="sm" />}
+            placeholder={t('navigation.search.placeholder')}
+            aria-label={t('navigation.search.placeholder')}
+            aria-controls="settings-nav-results"
+            aria-expanded={isSearchMode}
+          />
+        </div>
       </NavigationPanelHeader>
       <NavigationPanelBody>
         <NavigationPanelContent className="openbitfun-settings-nav__content">
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts b/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
index 4048281c49..0466ca7d8f 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
+++ b/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
@@ -39,7 +39,6 @@ describe('SettingsNav typography and layout ownership', () => {
     expect(stylesheet).toContain("@use '../../styles/nav-panel-font-scope.scss' as nav-font;");
     expect(stylesheet).not.toContain('nav-panel-font-token-scope');
     expect(stylesheet).toContain('@include nav-font.nav-panel-text-body;');
-    expect(stylesheet).toContain('@include nav-font.nav-panel-text-heading;');
     expect(stylesheet).toContain('@include nav-font.nav-panel-text-meta;');
     // typography-audit: negative-test-start -- verifies Appearance no longer owns the navigation font scale
     expect(stylesheet).not.toContain('--openbitfun-appearance-token-font-size-');
@@ -49,7 +48,7 @@ describe('SettingsNav typography and layout ownership', () => {
     expect(stylesheet).not.toContain('text-transform: uppercase;');
   });
 
-  it('keeps title, search, and body separated by the navigation spacing token', () => {
+  it('keeps search and body separated by the navigation spacing token', () => {
     const root = declarations('.openbitfun-settings-nav');
     const header = declarations('.openbitfun-settings-nav__panel-header');
     expect(root.getPropertyValue('gap')).toBe('var(--openbitfun-layout-navigation-panel-content-gap)');
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
index cd5c60b3b6..7f31b89a92 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
@@ -61,14 +61,14 @@ interface CategoryInfo {
 const CATEGORIES: CategoryInfo[] = [
   {
     id: 'all',
-    icon: <Layers size={15} strokeWidth={1.6} />,
+    icon: <Icon glyph={Layers} size="sm" />,
     labelKey: 'filters.all',
     titleKey: 'installed.titleListAll',
     descKey: 'categories.all',
   },
   {
     id: 'builtin',
-    icon: <ShieldCheck size={15} strokeWidth={1.6} />,
+    icon: <Icon glyph={ShieldCheck} size="sm" />,
     labelKey: 'filters.builtin',
     titleKey: 'installed.titleBuiltin',
     descKey: 'categories.builtin',
@@ -82,14 +82,14 @@ const CATEGORIES: CategoryInfo[] = [
   },
   {
     id: 'project',
-    icon: <FolderOpen size={15} strokeWidth={1.6} />,
+    icon: <Icon glyph={FolderOpen} size="sm" />,
     labelKey: 'filters.project',
     titleKey: 'installed.titleProject',
     descKey: 'categories.project',
   },
   {
     id: 'suite',
-    icon: <Zap size={15} strokeWidth={1.6} />,
+    icon: <Icon glyph={Zap} size="sm" />,
     labelKey: 'filters.suite',
     titleKey: 'suite.title',
     descKey: 'categories.suite',
@@ -319,7 +319,7 @@ const SkillsScene: React.FC = () => {
             <div className="skills-main" data-openbitfun-scene="skills" data-openbitfun-part="main">
               {!desktopConfigAvailable ? (
                 <div className="skills-main__empty" data-testid="skills-management-unavailable" data-openbitfun-scene="skills" data-openbitfun-part="empty">
-                  <Package size={28} strokeWidth={1.2} />
+                  <Icon glyph={Package} size="lg" />
                   <span>{t(remoteConnectionActive ? 'list.remoteUnavailable' : 'list.desktopUnavailable')}</span>
                 </div>
               ) : installedFilter === 'suite' ? (
@@ -408,7 +408,7 @@ const SkillsScene: React.FC = () => {
 
                     {!installed.loading && installed.error && (
                       <div className="skills-main__empty skills-main__empty--error" data-openbitfun-scene="skills" data-openbitfun-part="error">
-                        <Package size={28} strokeWidth={1.2} />
+                        <Icon glyph={Package} size="lg" />
                         <span>{t('list.loadFailed')}</span>
                         <Button
                           variant="outline"
@@ -422,7 +422,7 @@ const SkillsScene: React.FC = () => {
 
                     {!installed.loading && !installed.error && installedFiltered.length === 0 && (
                       <div className="skills-main__empty" data-testid="skill-list-empty" data-openbitfun-scene="skills" data-openbitfun-part="empty">
-                        <Package size={28} strokeWidth={1.2} />
+                        <Icon glyph={Package} size="lg" />
                         <span>
                           {installed.skills.length === 0
                             ? t('list.empty.noSkills')
@@ -485,7 +485,7 @@ const SkillsScene: React.FC = () => {
                               </div>
                               <div className="skills-card__status-badges">
                                 {skill.isBuiltin && (
-                                  <StatusPill tone="accent" leading={<ShieldCheck size={10} />}>
+                                  <StatusPill tone="accent" leading={<Icon glyph={ShieldCheck} />}>
                                     {t('list.item.builtin')}
                                   </StatusPill>
                                 )}
@@ -500,7 +500,7 @@ const SkillsScene: React.FC = () => {
                                     source: coverageSourceBySkillKey.get(skill.key)
                                       ?? t('list.item.unknownSource'),
                                   })}>
-                                    <StatusPill tone="warning" leading={<ShieldAlert size={10} />}>
+                                    <StatusPill tone="warning" leading={<Icon glyph={ShieldAlert} />}>
                                       {t('list.item.shadowed')}
                                     </StatusPill>
                                   </span>
@@ -531,7 +531,7 @@ const SkillsScene: React.FC = () => {
                             >
                               {skill.level === 'user'
                                 ? <Icon name="user" size="xs" />
-                                : <FolderOpen size={12} strokeWidth={1.6} />}
+                                : <Icon glyph={FolderOpen} size="xs" />}
                               <span>
                                 {market.isRemoteWorkspace
                                   ? skill.level === 'user'
@@ -651,7 +651,7 @@ const SkillsScene: React.FC = () => {
 
               {!market.marketLoading && market.marketError && (
                 <div className="skills-discover__empty skills-discover__empty--error" data-openbitfun-scene="skills" data-openbitfun-part="error">
-                  <Package size={28} strokeWidth={1.5} />
+                  <Icon glyph={Package} size="lg" />
                   <span>{market.marketError}</span>
                 </div>
               )}
@@ -672,7 +672,7 @@ const SkillsScene: React.FC = () => {
 
               {!market.marketLoading && !market.marketError && !market.loadingMore && market.marketSkills.length === 0 && (
                 <div className="skills-discover__empty" data-testid="skill-list-empty" data-openbitfun-scene="skills" data-openbitfun-part="empty">
-                  <Package size={28} strokeWidth={1.5} />
+                  <Icon glyph={Package} size="lg" />
                   <span>{marketQuery ? t('market.empty.noMatch') : t('market.empty.noSkills')}</span>
                 </div>
               )}
@@ -711,7 +711,7 @@ const SkillsScene: React.FC = () => {
                           ) : null}
                           meta={(
                             <span className="openbitfun-skills-scene__market-meta">
-                              <TrendingUp size={12} />
+                              <Icon glyph={TrendingUp} size="xs" />
                               {skill.installs ?? 0}
                             </span>
                           )}
@@ -779,7 +779,7 @@ const SkillsScene: React.FC = () => {
       <GalleryDetailModal
         isOpen={desktopConfigAvailable && Boolean(selectedDetail)}
         onClose={() => setSelectedDetail(null)}
-        icon={selectedMarketSkill ? <Package size={24} strokeWidth={1.6} /> : <Icon name="extension" size="lg" />}
+        icon={selectedMarketSkill ? <Icon glyph={Package} size="lg" /> : <Icon name="extension" size="lg" />}
         iconGradient={getCardGradient(
           selectedInstalledSkill?.name
           ?? selectedMarketSkill?.installId
@@ -794,7 +794,7 @@ const SkillsScene: React.FC = () => {
                 source: coverageSourceBySkillKey.get(selectedInstalledSkill.key)
                   ?? t('list.item.unknownSource'),
               })}>
-                <StatusPill tone="warning" leading={<ShieldAlert size={11} />}>
+                <StatusPill tone="warning" leading={<Icon glyph={ShieldAlert} />}>
                   {t('list.item.shadowed')}
                 </StatusPill>
               </span>
@@ -827,7 +827,7 @@ const SkillsScene: React.FC = () => {
         closeButtonTestId="skill-detail-close"
         meta={selectedMarketSkill ? (
           <span className="openbitfun-skills-scene__market-meta">
-            <TrendingUp size={12} />
+            <Icon glyph={TrendingUp} size="xs" />
             {selectedMarketSkill.installs ?? 0}
           </span>
         ) : null}
@@ -997,7 +997,7 @@ const SkillsScene: React.FC = () => {
               onClick={installed.handleBrowse}
               aria-label={t('form.path.browseTooltip')}
               title={t('form.path.browseTooltip')}
-              icon={<FolderOpen size={15} />}
+              icon={<Icon glyph={FolderOpen} size="sm" />}
             />
           </div>
           <div className="openbitfun-skills-scene__path-hint">
diff --git a/src/web-ui/src/app/scenes/skills/components/SkillCard.tsx b/src/web-ui/src/app/scenes/skills/components/SkillCard.tsx
index 5b38700499..5fe1d4bfb3 100644
--- a/src/web-ui/src/app/scenes/skills/components/SkillCard.tsx
+++ b/src/web-ui/src/app/scenes/skills/components/SkillCard.tsx
@@ -42,7 +42,7 @@ const SkillCard: React.FC<SkillCardProps> = ({
   ...rootProps
 }) => {
   const glyph = iconKind === 'market'
-    ? <Package size={20} strokeWidth={1.6} />
+    ? <Icon glyph={Package} size="lg" />
     : <Icon name="extension" size="lg" />;
   const openDetails = () => onOpenDetails?.();
 
diff --git a/src/web-ui/src/app/scenes/skills/components/SkillsSuiteView.tsx b/src/web-ui/src/app/scenes/skills/components/SkillsSuiteView.tsx
index c3eeb84a97..1e47de92c4 100644
--- a/src/web-ui/src/app/scenes/skills/components/SkillsSuiteView.tsx
+++ b/src/web-ui/src/app/scenes/skills/components/SkillsSuiteView.tsx
@@ -466,7 +466,7 @@ const SkillsSuiteView: React.FC = () => {
           onClick={() => { void resetMode(currentMode); }}
           title={t('suite.modeActions.reset', { mode: t(currentMode.labelKey) })}
           aria-label={t('suite.modeActions.reset', { mode: t(currentMode.labelKey) })}
-          icon={<RotateCcw size={13} />}
+          icon={<Icon glyph={RotateCcw} />}
         />
       </div>
 
@@ -479,14 +479,14 @@ const SkillsSuiteView: React.FC = () => {
 
       {!loading && error && (
         <div className="skills-main__empty skills-main__empty--error" data-openbitfun-scene="skills" data-openbitfun-part="error">
-          <Package size={28} strokeWidth={1.2} />
+          <Icon glyph={Package} size="lg" />
           <span>{error}</span>
         </div>
       )}
 
       {!loading && !error && suiteGroups.length === 0 && (
         <div className="skills-main__empty" data-openbitfun-scene="skills" data-openbitfun-part="empty">
-          <Package size={28} strokeWidth={1.2} />
+          <Icon glyph={Package} size="lg" />
           <span>{t('suite.empty')}</span>
         </div>
       )}
@@ -612,9 +612,9 @@ const SkillsSuiteView: React.FC = () => {
                             >
                               <span className="skills-suite__skill-chip-name" data-openbitfun-scene="skills" data-openbitfun-part="suiteSkillName">{skill.name}</span>
                               {draftEnabled && !shadowed ? (
-                                <ShieldCheck size={11} />
+                                <Icon glyph={ShieldCheck} size="xs" />
                               ) : (
-                                <ShieldAlert size={11} />
+                                <Icon glyph={ShieldAlert} size="xs" />
                               )}
                               {shadowed && (
                                 <span className="skills-suite__skill-chip-status" data-openbitfun-scene="skills" data-openbitfun-part="suiteSkillStatus">
diff --git a/src/web-ui/src/infrastructure/config/AGENTS.md b/src/web-ui/src/infrastructure/config/AGENTS.md
new file mode 100644
index 0000000000..8892866762
--- /dev/null
+++ b/src/web-ui/src/infrastructure/config/AGENTS.md
@@ -0,0 +1,27 @@
+# Settings UI
+
+Follow `src/web-ui/AGENTS.md` for shared frontend rules.
+
+## Field sizing
+
+- Settings selection fields (`Select`, `Combobox`, `MultiSelect`) use
+  `@openbitfun/ui` with explicit `size="sm"`, including filters and dialogs.
+  The application chooses the size; the design system owns its height through
+  `control.height.sm` and the active density. Do not assume every form component
+  has the same default size.
+- Keep height, padding, and open/closed geometry in the public component owner.
+  Settings CSS owns layout and width, not private picker variables or pixel
+  height overrides. Do not resize Switches, multiline editors, or entire rows
+  to compensate for a field mismatch.
+
+## Focused verification
+
+For settings selection sizing, run:
+
+```bash
+pnpm --dir src/web-ui run test:run src/infrastructure/config/components/common/SettingsControlSizing.test.ts src/shared/ui/Select.test.tsx src/shared/ui/Combobox.test.tsx
+```
+
+These source and DOM checks do not establish rendered visual fidelity. Follow
+the parent guide for `check:web`; do not use browser automation or mock
+screenshots as visual proof.
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
index da3ea54e0b..4044c69dd2 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceMarketWorkflows.tsx
@@ -251,6 +251,7 @@ export function AppearanceMarketWorkflows({ workflow }: AppearanceMarketWorkflow
         </Field>
         <Field label={t('package.market.submissions.manual.licenseType')} controlWidth="fill">
           <Select
+            size="sm"
             value={manualDraft.licenseKind}
             options={[
               { value: 'spdx', label: t('package.market.submissions.manual.spdx') },
diff --git a/src/web-ui/src/infrastructure/config/components/AppearancePackageConfigSection.tsx b/src/web-ui/src/infrastructure/config/components/AppearancePackageConfigSection.tsx
index 5a2e79ddc2..76fb2eff96 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearancePackageConfigSection.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearancePackageConfigSection.tsx
@@ -303,16 +303,18 @@ export function AppearancePackageConfigSection() {
     {
       value: SYSTEM_APPEARANCE_ID,
       label: tApplication('appearance.systemAppearance'),
+      group: t('package.builtinTheme'),
       testId: 'appearance-builtin-theme-option',
       testAttributes: { 'data-appearance-id': SYSTEM_APPEARANCE_ID },
     },
     ...builtinAppearances.map(appearance => ({
       value: appearance.id,
       label: builtinAppearanceDisplayName(appearance, tApplication),
+      group: t('package.builtinTheme'),
       testId: 'appearance-builtin-theme-option',
       testAttributes: { 'data-appearance-id': appearance.id },
     })),
-  ], [builtinAppearances, tApplication]);
+  ], [builtinAppearances, t, tApplication]);
   const selectedBuiltinThemeId = defaultPackageSelected ? selectedAppearanceId : '';
   const busy = loading || !initialized || status === 'applying';
 
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.presentation.test.ts b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.presentation.test.ts
index 74670c0fe1..d07e7e9520 100644
--- a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.presentation.test.ts
+++ b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.presentation.test.ts
@@ -42,4 +42,21 @@ describe('Application settings presentation', () => {
       loggingSection.slice(settingsSectionStart, settingsSectionEnd),
     ).not.toContain('previousUnexpectedExit');
   });
+
+  it('keeps the command-shell fallback notice outside the terminal settings section', () => {
+    const terminalSection = source.match(
+      /function TerminalSection\(\)[\s\S]*?\r?\n}\r?\n\r?\nfunction WindowBehaviorSetting/,
+    )?.[0] ?? '';
+    const noticeStart = terminalSection.indexOf('{shouldShowCmdFallbackNotice && (');
+    const settingsSectionStart = terminalSection.indexOf('<ConfigPageSection');
+    const settingsSectionEnd = terminalSection.indexOf('</ConfigPageSection>');
+
+    expect(terminalSection).not.toBe('');
+    expect(noticeStart).toBeGreaterThanOrEqual(0);
+    expect(settingsSectionStart).toBeGreaterThan(noticeStart);
+    expect(settingsSectionEnd).toBeGreaterThan(settingsSectionStart);
+    expect(
+      terminalSection.slice(settingsSectionStart, settingsSectionEnd),
+    ).not.toContain('cmdFallbackMessage');
+  });
 });
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
index 47d821c09e..b48c6e5b0a 100644
--- a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
+++ b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.tsx
@@ -732,16 +732,17 @@ function TerminalSection() {
       <div className="openbitfun-terminal-config__content">
         <ConfigMessage message={message} />
 
+        {shouldShowCmdFallbackNotice && (
+          <Alert
+            tone="info"
+            message={t('terminal.controls.cmdFallbackMessage')}
+          />
+        )}
+
         <ConfigPageSection
           title={t('terminal.sections.terminal')}
           description={t('terminal.sections.terminalHint')}
         >
-          {shouldShowCmdFallbackNotice && (
-            <Alert
-              tone="info"
-              message={t('terminal.controls.cmdFallbackMessage')}
-            />
-          )}
           <ConfigPageRow
             label={t('terminal.sections.defaultTerminal')}
             description={t('terminal.controls.description')}
@@ -749,6 +750,7 @@ function TerminalSection() {
           >
             {availableShells.length > 0 ? (
               <Combobox
+                size="sm"
                 value={selectedShellValue}
                 onValueChange={(v) => handleShellChange(v === AUTO_DETECT_SHELL_VALUE ? '' : v as string)}
                 options={shellOptions}
@@ -766,6 +768,7 @@ function TerminalSection() {
             align="center"
           >
             <Select
+              size="sm"
               value={terminalPanelPosition}
               onValueChange={(v) => handleTerminalPanelPositionChange(v as TerminalPanelPosition)}
               options={terminalPanelPositionOptions}
@@ -872,6 +875,7 @@ function WindowBehaviorSetting() {
       >
         <div data-openbitfun-component="application-settings" data-openbitfun-part="windowBehavior">
           <Select
+            size="sm"
             value={behavior}
             onValueChange={(v) => { void handleChange(v as string); }}
             options={behaviorOptions}
diff --git a/src/web-ui/src/infrastructure/config/components/SkillsConfig.tsx b/src/web-ui/src/infrastructure/config/components/SkillsConfig.tsx
index 28be548a4a..f8448245af 100644
--- a/src/web-ui/src/infrastructure/config/components/SkillsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/SkillsConfig.tsx
@@ -246,7 +246,7 @@ const SkillsConfig: React.FC = () => {
               ]}
               value={formLevel}
               onValueChange={(value) => setFormLevel(value as SkillLevel)}
-              size="md"
+              size="sm"
             />
           </Field>
           {formLevel === 'project' && hasWorkspace && (
@@ -265,7 +265,7 @@ const SkillsConfig: React.FC = () => {
             <Tooltip content={t('form.path.browseTooltip')}>
               <IconButton
                 aria-label={t('form.path.browseTooltip')}
-                size="md"
+                size="sm"
                 onClick={handleBrowse}
                 icon={<FolderOpen size={16} />}
               />
diff --git a/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.presentation.test.ts b/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.presentation.test.ts
index ebb6ec16e8..32acbb3c74 100644
--- a/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.presentation.test.ts
+++ b/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.presentation.test.ts
@@ -10,7 +10,7 @@ function readSource(): string {
 }
 
 describe('WebSearch settings presentation', () => {
-  it('keeps secrets out of generic config writes and places provider selection in the section header', () => {
+  it('keeps secrets out of generic config writes and preserves the settings draft lifecycle', () => {
     const source = readSource();
 
     expect(source).toContain("configAPI.setConfig('ai.web_search', config)");
@@ -41,7 +41,6 @@ describe('WebSearch settings presentation', () => {
     expect(source).toContain('OPENBITFUN_PROTOCOL_ERROR_EXAMPLE');
     expect(source).toContain('OPENBITFUN_PROTOCOL_ERROR_CODES');
     expect(source).not.toContain('<code>{OPENBITFUN_PROTOCOL_ERROR_CODES}</code>');
-    expect(source).not.toContain("t('fields.provider.");
     expect(source).not.toContain("t('fields.fallback.");
     expect(source).not.toContain("t('fields.apply.");
     expect(source).not.toContain("t('sections.apply.");
diff --git a/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.tsx b/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.tsx
index 076b2d7c45..d763b66d22 100644
--- a/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.tsx
+++ b/src/web-ui/src/infrastructure/config/components/WebSearchSettingsPage.tsx
@@ -168,11 +168,27 @@ const WebSearchSettingsPage: React.FC = () => {
   const [draftMessage, setDraftMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
   const [operationMessage, setOperationMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
 
-  const providerOptions = useMemo<SelectOption[]>(() => [
-    { value: 'exa_mcp_free', label: t('providers.exaMcpFree') },
-    { value: 'exa_search_api', label: t('providers.exaSearchApi') },
-    { value: 'tavily', label: t('providers.tavily') },
-    { value: 'openbitfun_search_http', label: t('providers.openbitfunSearchHttp') },
+  const providerOptions = useMemo<(SelectOption & { description: string })[]>(() => [
+    {
+      value: 'exa_mcp_free',
+      label: t('providers.exaMcpFree'),
+      description: t('providerDescriptions.exaMcpFree'),
+    },
+    {
+      value: 'exa_search_api',
+      label: t('providers.exaSearchApi'),
+      description: t('providerDescriptions.exaSearchApi'),
+    },
+    {
+      value: 'tavily',
+      label: t('providers.tavily'),
+      description: t('providerDescriptions.tavily'),
+    },
+    {
+      value: 'openbitfun_search_http',
+      label: t('providers.openbitfunSearchHttp'),
+      description: t('providerDescriptions.openbitfunSearchHttp'),
+    },
   ], [t]);
   const authOptions = useMemo<SelectOption[]>(() => [
     { value: 'none', label: t('auth.none') },
@@ -417,20 +433,37 @@ const WebSearchSettingsPage: React.FC = () => {
         />
         <ConfigPageSection
           title={t('sections.provider.title')}
-          extra={(
+        >
+          <ConfigPageRow
+            label={t('fields.provider.label')}
+            description={t('fields.provider.description')}
+            align="center"
+          >
             <Select
               value={config.provider}
               options={providerOptions}
               size="sm"
+              aria-label={t('fields.provider.label')}
+              aria-describedby="web-search-provider-help"
+              placeholder={t('fields.provider.placeholder')}
               disabled={mutationBusy}
               onValueChange={(value) => setConfig(previous => ({
                 ...previous,
                 provider: normalizeSelectValue(value),
               }))}
             />
-          )}
-        >
-          {null}
+          </ConfigPageRow>
+          <ConfigPageRow
+            label={t('fields.providerHelp.label')}
+            description={(
+              <span id="web-search-provider-help">
+                {providerOptions.find(option => option.value === selectedProvider)?.description
+                  ?? t('fields.providerHelp.description')}
+              </span>
+            )}
+          >
+            {null}
+          </ConfigPageRow>
         </ConfigPageSection>
 
         {selectedProvider === 'openbitfun_search_http' ? (
diff --git a/src/web-ui/src/infrastructure/config/components/common/SettingsControlSizing.test.ts b/src/web-ui/src/infrastructure/config/components/common/SettingsControlSizing.test.ts
new file mode 100644
index 0000000000..e19f19b094
--- /dev/null
+++ b/src/web-ui/src/infrastructure/config/components/common/SettingsControlSizing.test.ts
@@ -0,0 +1,63 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+import { expect, it } from 'vitest';
+
+const pickerNames = new Set(['Select', 'Combobox', 'MultiSelect']);
+const settingsRoots = [
+  new URL('../../', import.meta.url),
+  new URL('../../../font-preference/', import.meta.url),
+  new URL('../../../../app/scenes/settings/', import.meta.url),
+];
+
+function sourceFiles(directory: string): string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap(entry => {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) return sourceFiles(path);
+    return path.endsWith('.tsx') && !/\.(test|spec)\.tsx$/.test(path) ? [path] : [];
+  });
+}
+
+it('uses the design-system small size consistently across settings selection fields', () => {
+  const violations: string[] = [];
+  const seen = new Set<string>();
+
+  for (const path of settingsRoots.flatMap(url => sourceFiles(fileURLToPath(url)))) {
+    const source = ts.createSourceFile(path, readFileSync(path, 'utf8'), ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const imports = new Map<string, string>();
+
+    for (const statement of source.statements) {
+      if (!ts.isImportDeclaration(statement)
+        || !ts.isStringLiteral(statement.moduleSpecifier)
+        || statement.moduleSpecifier.text !== '@openbitfun/ui') continue;
+      const bindings = statement.importClause?.namedBindings;
+      if (!bindings || !ts.isNamedImports(bindings)) continue;
+      for (const binding of bindings.elements) {
+        const name = (binding.propertyName ?? binding.name).text;
+        if (pickerNames.has(name)) imports.set(binding.name.text, name);
+      }
+    }
+
+    const visit = (node: ts.Node) => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        const name = imports.get(node.tagName.getText(source));
+        if (name) {
+          seen.add(name);
+          const size = node.attributes.properties.find(
+            (attribute): attribute is ts.JsxAttribute => ts.isJsxAttribute(attribute) && attribute.name.getText(source) === 'size',
+          )?.initializer;
+          if (!size || !ts.isStringLiteral(size) || size.text !== 'sm') {
+            const line = source.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+            violations.push(`${relative(process.cwd(), path)}:${line} ${name} must use size="sm"`);
+          }
+        }
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(source);
+  }
+
+  expect(seen).toEqual(pickerNames);
+  expect(violations).toEqual([]);
+});
diff --git a/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx b/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx
index f96be8f000..80199957da 100644
--- a/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx
+++ b/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx
@@ -134,6 +134,43 @@ describe('catalog icon consumer integration', () => {
     expect(leftovers).toEqual([]);
   });
 
+  it('keeps pixel-to-token and Lucide line-weight adaptation inside the shared Icon boundary', () => {
+    const localAdapters = filesIn(sourceRoot).flatMap(file => {
+      const contents = readFileSync(file, 'utf8');
+      const hasPixelMapping = contents.includes("<= 11")
+        && contents.includes("'2xs'")
+        && contents.includes("'xs'")
+        && contents.includes("'sm'")
+        && contents.includes("'md'")
+        && contents.includes("'lg'");
+      return hasPixelMapping
+        ? [path.relative(sourceRoot, file).replaceAll('\\', '/')]
+        : [];
+    });
+
+    expect(localAdapters).toEqual([]);
+    expect(source('app/components/NavPanel/MainNav.tsx')).toContain('<Icon glyph={Users} size="sm" />');
+    expect(source('app/components/NavPanel/MainNav.tsx')).toContain('<Icon glyph={Network} size="sm" />');
+    expect(source('app/scenes/agents/agentsIcons.ts')).toContain('Record<AgentIconKey, IconSource>');
+    expect(source('app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx'))
+      .toContain('Record<EcosystemImportItemKind, IconSource>');
+
+    const galleryEmpty = source('app/components/GalleryLayout/GalleryEmpty.tsx');
+    expect(galleryEmpty).toContain('icon: IconSource');
+    expect(galleryEmpty).toContain('<Icon {...icon} />');
+    expect(source('app/components/GalleryLayout/GalleryLayout.scss'))
+      .toContain('--_gallery-empty-icon-size:');
+
+    for (const normalizedSurface of [
+      'app/components/NavPanel/MainNav.tsx',
+      'app/scenes/agents/AgentsScene.tsx',
+      'app/scenes/skills/SkillsScene.tsx',
+      'app/scenes/skills/components/SkillsSuiteView.tsx',
+    ]) {
+      expect(source(normalizedSurface)).not.toContain('strokeWidth=');
+    }
+  });
+
   it('keeps the shared refresh action compact and disables it while loading', () => {
     const props = { tooltip: 'Refresh', onClick: () => {} };
     const idle = renderToStaticMarkup(createElement(ConfigRefreshButton, props));
diff --git a/src/web-ui/src/locales/en-US/settings/web-search.json b/src/web-ui/src/locales/en-US/settings/web-search.json
index 3c7647db80..e1a12f5ed6 100644
--- a/src/web-ui/src/locales/en-US/settings/web-search.json
+++ b/src/web-ui/src/locales/en-US/settings/web-search.json
@@ -1,11 +1,17 @@
 {
   "title": "Web Search",
-  "subtitle": "Configure the search provider used by the WebSearch tool at runtime.",
+  "subtitle": "Choose the service your Agent uses to find information on the web.",
   "providers": {
-    "exaMcpFree": "Exa MCP (free, no API key)",
+    "exaMcpFree": "Exa MCP (free)",
     "exaSearchApi": "Exa Search API",
     "tavily": "Tavily Search API",
-    "openbitfunSearchHttp": "OpenBitFun Search HTTP Protocol"
+    "openbitfunSearchHttp": "Custom HTTP service"
+  },
+  "providerDescriptions": {
+    "exaMcpFree": "Use Exa's free search service without an API key or additional setup.",
+    "exaSearchApi": "Use your Exa API key to access the search service. Enter and save your credential below.",
+    "tavily": "Use your Tavily API key to access the search service. Enter and save your credential below.",
+    "openbitfunSearchHttp": "Connect a self-hosted or enterprise service that implements the OpenBitFun search protocol. Enter its address below and configure authentication if needed."
   },
   "auth": {
     "none": "No authentication",
@@ -30,6 +36,15 @@
     }
   },
   "fields": {
+    "provider": {
+      "label": "Provider",
+      "description": "Save the configuration to apply a provider change.",
+      "placeholder": "Choose a search service"
+    },
+    "providerHelp": {
+      "label": "Setup requirements",
+      "description": "Choose a search service to see its setup requirements."
+    },
     "endpoint": {
       "label": "Endpoint",
       "description": "HTTPS is required. Plain HTTP is accepted only for localhost or a loopback IP.",
diff --git a/src/web-ui/src/locales/zh-CN/settings/web-search.json b/src/web-ui/src/locales/zh-CN/settings/web-search.json
index a13a042f28..c6d714c23c 100644
--- a/src/web-ui/src/locales/zh-CN/settings/web-search.json
+++ b/src/web-ui/src/locales/zh-CN/settings/web-search.json
@@ -1,11 +1,17 @@
 {
   "title": "网页搜索",
-  "subtitle": "配置 WebSearch 工具运行时使用的搜索服务",
+  "subtitle": "选择 Agent 联网查找资料时使用的搜索服务",
   "providers": {
-    "exaMcpFree": "Exa MCP（免费，无需 API Key）",
+    "exaMcpFree": "Exa MCP（免费）",
     "exaSearchApi": "Exa Search API",
     "tavily": "Tavily Search API",
-    "openbitfunSearchHttp": "OpenBitFun Search HTTP Protocol"
+    "openbitfunSearchHttp": "自定义 HTTP 服务"
+  },
+  "providerDescriptions": {
+    "exaMcpFree": "使用 Exa 提供的免费搜索服务，无需 API Key 或额外配置。",
+    "exaSearchApi": "使用你的 Exa API Key 访问搜索服务，请在下方填写并保存凭据。",
+    "tavily": "使用你的 Tavily API Key 访问搜索服务，请在下方填写并保存凭据。",
+    "openbitfunSearchHttp": "连接实现 OpenBitFun 搜索协议的自建或企业内部服务，请在下方填写服务地址，并按需配置认证。"
   },
   "auth": {
     "none": "无需认证",
@@ -30,6 +36,15 @@
     }
   },
   "fields": {
+    "provider": {
+      "label": "服务提供方",
+      "description": "切换服务后，保存配置即可生效",
+      "placeholder": "选择搜索服务"
+    },
+    "providerHelp": {
+      "label": "接入说明",
+      "description": "选择搜索服务后，这里会显示所需的配置。"
+    },
     "endpoint": {
       "label": "端点",
       "description": "必须使用 HTTPS；仅 localhost 或回环 IP 可使用明文 HTTP",
diff --git a/src/web-ui/src/locales/zh-TW/settings/web-search.json b/src/web-ui/src/locales/zh-TW/settings/web-search.json
index 35b6baef4f..9db53cd1db 100644
--- a/src/web-ui/src/locales/zh-TW/settings/web-search.json
+++ b/src/web-ui/src/locales/zh-TW/settings/web-search.json
@@ -1,11 +1,17 @@
 {
   "title": "網頁搜尋",
-  "subtitle": "設定 WebSearch 工具執行時期使用的搜尋服務",
+  "subtitle": "選擇 Agent 連網查找資料時使用的搜尋服務",
   "providers": {
-    "exaMcpFree": "Exa MCP（免費，無需 API Key）",
+    "exaMcpFree": "Exa MCP（免費）",
     "exaSearchApi": "Exa Search API",
     "tavily": "Tavily Search API",
-    "openbitfunSearchHttp": "OpenBitFun Search HTTP Protocol"
+    "openbitfunSearchHttp": "自訂 HTTP 服務"
+  },
+  "providerDescriptions": {
+    "exaMcpFree": "使用 Exa 提供的免費搜尋服務，無需 API Key 或額外設定。",
+    "exaSearchApi": "使用你的 Exa API Key 存取搜尋服務，請在下方填寫並儲存憑據。",
+    "tavily": "使用你的 Tavily API Key 存取搜尋服務，請在下方填寫並儲存憑據。",
+    "openbitfunSearchHttp": "連接實作 OpenBitFun 搜尋協定的自建或企業內部服務，請在下方填寫服務位址，並視需要設定驗證。"
   },
   "auth": {
     "none": "無需驗證",
@@ -30,6 +36,15 @@
     }
   },
   "fields": {
+    "provider": {
+      "label": "服務提供者",
+      "description": "切換服務後，儲存設定即可生效",
+      "placeholder": "選擇搜尋服務"
+    },
+    "providerHelp": {
+      "label": "設定說明",
+      "description": "選擇搜尋服務後，這裡會顯示所需的設定。"
+    },
     "endpoint": {
       "label": "端點",
       "description": "必須使用 HTTPS；僅 localhost 或迴環 IP 可使用明文 HTTP",
diff --git a/src/web-ui/src/shared/notification-system/components/NotificationCenter.test.tsx b/src/web-ui/src/shared/notification-system/components/NotificationCenter.test.tsx
index 3fd0530f25..c44b12e264 100644
--- a/src/web-ui/src/shared/notification-system/components/NotificationCenter.test.tsx
+++ b/src/web-ui/src/shared/notification-system/components/NotificationCenter.test.tsx
@@ -88,4 +88,22 @@ describe('NotificationCenter header', () => {
     }
     expect(service.toggleCenter).toHaveBeenCalledWith(false);
   });
+
+  it('moves the message preview into the details when expanded', () => {
+    const trigger = document.querySelector<HTMLButtonElement>(
+      '.notification-center__item-disclosure button[aria-expanded]',
+    );
+
+    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
+    expect(
+      document.querySelector('[data-openbitfun-part="description"]')?.textContent,
+    ).toBe('Notification message');
+
+    act(() => trigger!.click());
+
+    expect(trigger?.getAttribute('aria-expanded')).toBe('true');
+    expect(document.querySelector('[data-openbitfun-part="description"]')).toBeNull();
+    expect(document.querySelector('.notification-center__item-detail-message')?.textContent)
+      .toBe('Notification message');
+  });
 });
diff --git a/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx b/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
index fb791fba9c..fc21f260bf 100644
--- a/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
+++ b/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
@@ -138,7 +138,7 @@ export const NotificationCenter: React.FC = () => {
             open={isExpanded}
             onOpenChange={open => handleNotificationOpenChange(notification, open)}
             summary={<span title={title}>{title}</span>}
-            description={!usesMessageAsTitle && messageText
+            description={!isExpanded && !usesMessageAsTitle && messageText
               ? <OverflowText>{messageText}</OverflowText>
               : undefined}
             leading={
diff --git a/src/web-ui/src/shared/ui/Combobox.test.tsx b/src/web-ui/src/shared/ui/Combobox.test.tsx
index ff7ed2572e..ef5a9be598 100644
--- a/src/web-ui/src/shared/ui/Combobox.test.tsx
+++ b/src/web-ui/src/shared/ui/Combobox.test.tsx
@@ -23,7 +23,7 @@ describe('public Combobox product integration', () => {
   const options = [{ value: 'a', label: 'Alpha', group: 'First' }, { value: 'b', label: 'Beta', disabled: true }, { value: 'c', label: 'Gamma', group: 'First' }];
   const render = (props: ComboboxProps = {}) => act(() => root.render(<Combobox label="Models" options={options} onValueChange={change} {...props} />));
   const renderMultiSelect = (props: MultiSelectProps = {}) => act(() => root.render(<MultiSelect label="Models" options={options} onValueChange={change} {...props} />));
-  const trigger = () => host.querySelector<HTMLButtonElement>('button[role="combobox"]')!;
+  const trigger = () => host.querySelector<HTMLButtonElement>('button[data-openbitfun-part="trigger"]')!;
   const key = (element: Element, value: string, composing = false) => act(() => { element.dispatchEvent(new KeyboardEvent('keydown', { key: value, isComposing: composing, bubbles: true })); });
   const input = () => document.querySelector<HTMLInputElement>('input[role="combobox"]')!;
   const type = (value: string) => act(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input(), value); input().dispatchEvent(new Event('input', { bubbles: true })); });
@@ -41,6 +41,84 @@ describe('public Combobox product integration', () => {
     expect(change).not.toHaveBeenCalled();
     key(input(), 'Enter'); expect(change).toHaveBeenLastCalledWith('custom');
   });
+  it.each(['sm', 'md', 'lg'] as const)('keeps one active %s combobox and preserves Field semantics in the search header', (size) => {
+    act(() => root.render(
+      <Field label="Default terminal" description="Choose a shell" error="Required" required>
+        <Combobox size={size} options={options} defaultValue="a" />
+      </Field>,
+    ));
+    const anchor = trigger();
+    const fieldId = anchor.id;
+    const contents = [...anchor.childNodes];
+    const describedBy = anchor.getAttribute('aria-describedby');
+    act(() => anchor.click());
+
+    const popup = document.querySelector<HTMLElement>('[data-openbitfun-component="combobox-popup"]')!;
+    const search = input();
+    expect(popup.parentElement).toBe(document.body);
+    expect(popup.children[0]?.getAttribute('data-openbitfun-part')).toBe('search');
+    expect(popup.children[1]?.getAttribute('data-openbitfun-part')).toBe('divider');
+    expect(popup.children[2]?.getAttribute('data-openbitfun-part')).toBe('options');
+    expect(popup.dataset.size).toBe(size);
+    expect(popup.querySelector('[data-openbitfun-component="search-field"]')?.getAttribute('data-variant')).toBe('embedded');
+    expect(document.querySelectorAll('[role="combobox"]')).toHaveLength(1);
+    expect(search.id).toBe(fieldId);
+    expect(host.querySelector('label')?.htmlFor).toBe(search.id);
+    expect(search.getAttribute('aria-describedby')).toBe(describedBy);
+    expect(search.getAttribute('aria-required')).toBe('true');
+    expect(search.getAttribute('aria-invalid')).toBe('true');
+    expect(document.activeElement).toBe(search);
+    expect([...anchor.childNodes]).toEqual(contents);
+    expect(anchor.id).toBe('');
+    expect(anchor.tabIndex).toBe(-1);
+
+    act(() => popup.querySelector<HTMLButtonElement>('[data-openbitfun-part="collapse"]')!.click());
+    expect(document.querySelector('[role="listbox"]')).toBeNull();
+    expect(document.activeElement).toBe(anchor);
+    expect(anchor.id).toBe(fieldId);
+    expect([...anchor.childNodes]).toEqual(contents);
+  });
+
+  it('clears only the search query and leaves multi-value tags mounted outside the popup', () => {
+    renderMultiSelect({ defaultValue: ['a', 'c'], clearable: true, size: 'sm' });
+    const anchor = trigger();
+    const control = anchor.parentElement!;
+    const tags = control.querySelector('[data-openbitfun-part="tags"]');
+    act(() => anchor.click());
+    type('gam');
+    expect(document.querySelectorAll('[role="option"]')).toHaveLength(1);
+    expect(control.getAttribute('aria-hidden')).toBe('true');
+    expect(control.querySelector('[data-openbitfun-part="tags"]')).toBe(tags);
+    expect([...control.querySelectorAll('button')].every(button => button.tabIndex === -1)).toBe(true);
+    const popup = document.querySelector('[data-openbitfun-component="multi-select-popup"]')!;
+    const clear = popup.querySelector<HTMLButtonElement>('button[aria-label="Clear selection"]')!;
+    act(() => clear.click());
+    expect(input().value).toBe('');
+    expect(document.querySelectorAll('[role="option"]')).toHaveLength(3);
+    expect(change).not.toHaveBeenCalled();
+    key(input(), 'Escape');
+    expect(document.activeElement).toBe(anchor);
+    expect(control.querySelector('[data-openbitfun-part="tags"]')).toBe(tags);
+  });
+
+  it.each([false, true])('restores the native tab starting position before leaving the popup (shift=%s)', (shiftKey) => {
+    render();
+    const anchor = trigger();
+    act(() => anchor.click());
+    const tab = new KeyboardEvent('keydown', { key: 'Tab', shiftKey, bubbles: true, cancelable: true });
+    act(() => {
+      input().dispatchEvent(tab);
+      expect(document.activeElement).toBe(anchor);
+    });
+    expect(tab.defaultPrevented).toBe(false);
+    expect(document.querySelector('[role="listbox"]')).toBeNull();
+  });
+
+  it('does not open a disabled picker even when its controlled open prop is true', () => {
+    render({ disabled: true, open: true });
+    expect(trigger().disabled).toBe(true);
+    expect(document.querySelector('[role="listbox"]')).toBeNull();
+  });
   it('keeps controlled values authoritative and preserves numeric zero', () => {
     render({ value: 0, options: [{ value: 0, label: 'Zero' }, { value: 1, label: 'One' }] });
     act(() => trigger().click()); key(input(), 'ArrowDown'); key(input(), 'ArrowDown'); key(input(), 'Enter');
@@ -114,7 +192,7 @@ describe('public Combobox product integration', () => {
     top = 20;
     act(() => host.dispatchEvent(new Event('scroll', { bubbles: true })));
     expect(popup.dataset.placement).toBe('bottom');
-    expect(popup.style.top).toBe('64px');
+    expect(popup.style.top).toBe('20px');
     expect(popup.style.width).toBe('240px');
   });
   it('reports controlled open requests without mutating controlled state', () => {
diff --git a/src/web-ui/src/shared/ui/Select.test.tsx b/src/web-ui/src/shared/ui/Select.test.tsx
new file mode 100644
index 0000000000..00bf08709f
--- /dev/null
+++ b/src/web-ui/src/shared/ui/Select.test.tsx
@@ -0,0 +1,164 @@
+// @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 { Field, Select, type SelectProps } from '@openbitfun/ui';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('public Select product integration', () => {
+  let host: HTMLDivElement;
+  let root: Root;
+  const change = vi.fn();
+  const options = [
+    { label: 'Ask', value: 'ask', group: 'Built in' },
+    { label: 'Plan', value: 'plan', disabled: true, group: 'Built in' },
+    { label: 'Agent', value: 3, group: 'Advanced' },
+  ];
+  const render = (props: Partial<SelectProps> = {}) => act(() => root.render(
+    <Select
+      aria-label="Mode"
+      defaultValue="ask"
+      onValueChange={change}
+      options={options}
+      {...props}
+    />,
+  ));
+  const trigger = () => host.querySelector<HTMLButtonElement>('[data-openbitfun-part="trigger"]')!;
+  const activeCombobox = () => document.querySelector<HTMLButtonElement>('button[role="combobox"]')!;
+  const key = (element: Element, value: string) => act(() => {
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: value }));
+  });
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    document.body.append(host);
+    root = createRoot(host);
+    change.mockClear();
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+    vi.restoreAllMocks();
+  });
+
+  it('opens a grouped portalled listbox with a selected row and check indicator', () => {
+    render();
+    const anchor = trigger();
+    const comboboxId = anchor.id;
+    act(() => anchor.click());
+
+    const popup = document.querySelector<HTMLElement>('[data-openbitfun-component="select-popup"]')!;
+    const header = popup.querySelector<HTMLButtonElement>('[data-openbitfun-part="header"]')!;
+    const listbox = document.querySelector<HTMLElement>('[role="listbox"]')!;
+    const selected = listbox.querySelector<HTMLElement>('[role="option"][aria-selected="true"]')!;
+    expect(popup.parentElement).toBe(document.body);
+    expect(host.querySelector('[role="listbox"]')).toBeNull();
+    expect(popup.contains(header)).toBe(true);
+    expect(popup.contains(listbox)).toBe(true);
+    expect(popup.children[0]).toBe(header);
+    expect(popup.children[1]?.getAttribute('data-openbitfun-part')).toBe('divider');
+    expect(popup.children[2]?.getAttribute('data-openbitfun-part')).toBe('options');
+    expect(listbox.querySelectorAll('[role="group"]')).toHaveLength(2);
+    expect(selected.textContent).toContain('Ask');
+    expect(selected.querySelector('[data-openbitfun-part="indicator"]')).not.toBeNull();
+    expect(anchor.getAttribute('aria-hidden')).toBe('true');
+    expect(anchor.getAttribute('role')).toBeNull();
+    expect(anchor.id).toBe('');
+    expect(header.id).toBe(comboboxId);
+    expect(activeCombobox()).toBe(header);
+    expect(header.getAttribute('aria-expanded')).toBe('true');
+    expect(document.querySelectorAll('button[role="combobox"]')).toHaveLength(1);
+  });
+
+  it('skips disabled options, commits typed values, closes, and restores focus', () => {
+    render();
+    const anchor = trigger();
+    key(anchor, 'ArrowDown');
+    expect(document.activeElement?.textContent).toContain('Ask');
+    key(document.activeElement!, 'ArrowDown');
+    expect(document.activeElement?.textContent).toContain('Agent');
+    key(document.activeElement!, 'Enter');
+
+    expect(change).toHaveBeenLastCalledWith(3);
+    expect(document.querySelector('[role="listbox"]')).toBeNull();
+    expect(document.activeElement).toBe(anchor);
+    expect(anchor.textContent).toContain('Agent');
+  });
+
+  it.each(['sm', 'md', 'lg'] as const)('preserves the %s anchor contents and size while its popup is open', (size) => {
+    render({ size });
+    const anchor = trigger();
+    const field = anchor.parentElement!;
+    const content = [...anchor.childNodes];
+
+    act(() => anchor.click());
+    const popup = document.querySelector<HTMLElement>('[data-openbitfun-component="select-popup"]')!;
+    expect(field.dataset.size).toBe(size);
+    expect(popup.dataset.size).toBe(size);
+    expect([...anchor.childNodes]).toEqual(content);
+    expect(anchor.getAttribute('aria-hidden')).toBe('true');
+    expect(anchor.tabIndex).toBe(-1);
+
+    key(document.activeElement!, 'Escape');
+    expect(document.querySelector('[data-openbitfun-component="select-popup"]')).toBeNull();
+    expect([...anchor.childNodes]).toEqual(content);
+    expect(field.dataset.size).toBe(size);
+    expect(document.activeElement).toBe(anchor);
+  });
+
+  it('keeps controlled values authoritative while reporting the requested option', () => {
+    render({ value: 'ask' });
+    const anchor = trigger();
+    act(() => anchor.click());
+    const agent = document.querySelector<HTMLButtonElement>('[role="option"][data-value="3"]')!;
+    act(() => agent.click());
+
+    expect(change).toHaveBeenLastCalledWith(3);
+    expect(anchor.textContent).toContain('Ask');
+  });
+
+  it('keeps the native form control synchronized for existing product integrations', () => {
+    render();
+    const native = host.querySelector<HTMLSelectElement>('select')!;
+    expect(native.getAttribute('aria-hidden')).toBe('true');
+    expect(native.value).toBe('ask');
+
+    act(() => {
+      native.value = '3';
+      native.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    expect(change).toHaveBeenLastCalledWith(3);
+    expect(trigger().textContent).toContain('Agent');
+  });
+
+  it('moves Field semantics to a unified popup that exactly covers the anchor rectangle', () => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.dataset.openbitfunComponent === 'select-popup') return new DOMRect(0, 0, 240, 180);
+      return new DOMRect(40, 20, 240, 32);
+    });
+    act(() => root.render(
+      <Field description="Choose a mode" label="Mode" required>
+        <Select options={options} />
+      </Field>,
+    ));
+    const button = trigger();
+    const comboboxId = button.id;
+    expect(host.querySelector('label')?.htmlFor).toBe(button.id);
+    expect(button.getAttribute('aria-required')).toBe('true');
+    expect(button.getAttribute('aria-describedby')).not.toBeNull();
+
+    act(() => button.click());
+    const popup = document.querySelector<HTMLElement>('[data-openbitfun-component="select-popup"]')!;
+    const header = popup.querySelector<HTMLButtonElement>('[data-openbitfun-part="header"]')!;
+    expect(popup.style.left).toBe('40px');
+    expect(popup.style.top).toBe('20px');
+    expect(popup.style.width).toBe('240px');
+    expect(popup.dataset.placement).toBe('bottom');
+    expect(header.id).toBe(comboboxId);
+    expect(host.querySelector('label')?.htmlFor).toBe(header.id);
+    expect(header.getAttribute('aria-required')).toBe('true');
+    expect(header.getAttribute('aria-describedby')).not.toBeNull();
+  });
+});
diff --git a/src/web-ui/src/tools/editor/components/EditorBreadcrumb.tsx b/src/web-ui/src/tools/editor/components/EditorBreadcrumb.tsx
index 31f78efe95..bf79e0902e 100644
--- a/src/web-ui/src/tools/editor/components/EditorBreadcrumb.tsx
+++ b/src/web-ui/src/tools/editor/components/EditorBreadcrumb.tsx
@@ -10,7 +10,7 @@ import { createLogger } from '@/shared/utils/logger';
 import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition';
 
 import './EditorBreadcrumb.scss';
-import { Icon, Menu, MenuItem, MenuSection, Tooltip } from '@openbitfun/ui';
+import { Icon, Menu, MenuItem, MenuSection, Tooltip, type IconSize } from '@openbitfun/ui';
 
 const log = createLogger('EditorBreadcrumb');
 
@@ -36,7 +36,7 @@ interface FileItem {
 }
 
 /** Get icon component based on file name */
-const getFileIconComponent = (fileName: string, size: number = 12): React.ReactElement => {
+const getFileIconComponent = (fileName: string, size: IconSize = 'xs'): React.ReactElement => {
   const iconType = getFileIconType({ name: fileName, isDirectory: false } as any);
   
   switch (iconType) {
@@ -53,9 +53,9 @@ const getFileIconComponent = (fileName: string, size: number = 12): React.ReactE
     case 'css':
     case 'sass':
     case 'code':
-      return <Code size={size} />;
+      return <Icon glyph={Code} size={size} />;
     default:
-      return <Icon name="files" size={size <= 11 ? '2xs' : size <= 13 ? 'xs' : size <= 15 ? 'sm' : size <= 17 ? 'md' : 'lg'} />;
+      return <Icon name="files" size={size} />;
   }
 };
 
@@ -218,7 +218,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
                 key={item.path}
                 leading={item.isDirectory
                   ? <Icon name="folder" size="sm" />
-                  : getFileIconComponent(item.name, 14)}
+                  : getFileIconComponent(item.name, 'sm')}
                 onClick={(event) => {
                   event.stopPropagation();
                   onSelect(item);