From e6c6383c01985fdaa16610bca276765bdbc8c18c Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Fri, 30 Oct 2026 15:31:56 +0800
Subject: [PATCH 1/3] feat(web-ui): customize navigation and add session
 trajectory

---
 .../packages/ui/src/components/Icon/Icon.tsx  |   3 +
 design-system/packages/ui/tests/icon.test.mjs |   5 +-
 .../product-customization-blueprint.md        |  24 ++
 docs/interactive-capabilities/README.md       |   8 +-
 .../capabilities.json                         |  68 +--
 .../feature.ecosystem-compatibility.md        |  14 +-
 .../technical/product-control-open-audit.json |  46 +--
 .../technical/tauri-command-map.json          |  24 +-
 src/apps/cli/src/peer_host/commands/mod.rs    |   2 +
 .../cli/src/peer_host/commands/session.rs     |  72 +++-
 src/apps/desktop/Cargo.toml                   |   2 +-
 src/apps/desktop/src/api/agentic_api.rs       |  66 +++
 src/apps/desktop/src/lib.rs                   |   1 +
 .../generated/product-control-catalog.json    |  68 +--
 .../generated/remote-surface-registry.json    |  16 +-
 .../src/remote_surface/capabilities.rs        |   5 +
 .../src/remote_surface/table.rs               |   1 +
 src/crates/services/services-core/AGENTS.md   |   1 +
 .../services/services-core/src/session/mod.rs |   1 +
 .../services-core/src/session/trajectory.rs   | 348 ++++++++++++++++
 .../interactive-capabilities/catalog.json     |  15 +-
 src/web-ui/README.md                          |  50 ++-
 .../NavPanel/MainNav.projectCreation.test.tsx |  13 +
 .../src/app/components/NavPanel/MainNav.tsx   |  37 +-
 .../src/app/components/NavPanel/NavPanel.scss |  34 +-
 .../src/app/components/NavPanel/appearance.ts |   1 -
 .../AppearanceQuickSwitchMenuItem.test.tsx    | 165 --------
 .../AppearanceQuickSwitchMenuItem.tsx         | 301 --------------
 .../components/PersistentFooterActions.tsx    |  61 +--
 .../components/PinnedNavigationItems.tsx      |  45 ++
 .../navigationIconIntegration.test.ts         |  26 +-
 .../NavPanel/unifiedSessionCreation.test.ts   |  34 +-
 .../components/panels/base/FlexiblePanel.tsx  |   6 +
 .../src/app/components/panels/base/utils.ts   |   1 +
 .../generated/interactive-capabilities.json   |  68 +--
 .../interactiveCapabilityActivator.test.ts    |   6 +
 .../app/navigation/sidebarContributions.ts    |  74 ++++
 .../app/navigation/sidebarPreferences.test.ts |  72 ++++
 .../src/app/navigation/sidebarPreferences.ts  |  72 ++++
 .../app/navigation/sidebarRegistry.test.ts    |  38 ++
 .../src/app/navigation/sidebarRegistry.ts     |  63 +++
 .../app/navigation/useSidebarNavigation.ts    |  24 ++
 src/web-ui/src/app/scenes/SceneViewport.tsx   |   5 -
 ...ystemCompatibilityScene.discovery.test.tsx |   4 +-
 ...temCompatibilityScene.presentation.test.ts |  29 +-
 .../EcosystemCompatibilityScene.scss          |  47 +--
 .../EcosystemCompatibilityScene.tsx           | 391 +++++++++---------
 .../ExternalAgentContent.test.tsx             |   1 +
 .../ExternalAgentContent.tsx                  |   6 +-
 .../ecosystemCompatibilityStore.ts            |   6 +-
 src/web-ui/src/app/scenes/settings/AGENTS.md  |  10 +
 .../application/AppearanceSettingsPage.scss   |  84 ++++
 .../application/AppearanceSettingsPage.tsx    |   2 +
 .../SidebarSettingsSection.test.tsx           | 126 ++++++
 .../application/SidebarSettingsSection.tsx    |  82 ++++
 .../tools/ExternalImportSettingsPage.tsx      |  10 +
 .../scenes/settings/settingsDestination.ts    |   2 +-
 .../settingsDestinationMigrations.json        |   6 +
 .../scenes/settings/settingsRegistry.test.ts  |  11 +-
 .../app/scenes/settings/settingsRegistry.ts   |  22 +
 .../src/app/scenes/settings/settingsTypes.ts  |   2 +
 .../src/app/scenes/skills/SkillsScene.tsx     |   9 +-
 .../scenes/skills/skillsSceneStore.test.ts    |   7 +
 .../src/app/scenes/skills/skillsSceneStore.ts |   5 +
 src/web-ui/src/app/stores/sceneStore.test.ts  |   8 +
 src/web-ui/src/app/stores/sceneStore.ts       |   7 +
 .../src/flow_chat/_detail-disclosure.scss     |  12 +
 .../modern/FLOWCHAT_VERIFICATION.md           |  10 +-
 .../modern/FLOWCHAT_VIEWPORT_REGISTER.md      |  21 +
 .../components/modern/FlowChatHeader.test.tsx |  25 ++
 .../components/modern/FlowChatHeader.tsx      |  27 +-
 .../modern/ModernFlowChatContainer.tsx        | 139 ++++---
 .../modern/VirtualItemRenderer.appearance.ts  |   1 +
 .../modern/VirtualItemRenderer.scss           |  17 +-
 .../components/modern/VirtualItemRenderer.tsx |  11 +-
 ...rtualMessageList.session-boundary.test.tsx | 145 ++++++-
 .../components/modern/VirtualMessageList.tsx  | 109 ++++-
 .../modern/flowChatSearchPresentation.test.ts |  29 ++
 .../modern/flowChatSearchPresentation.ts      |  30 ++
 .../useFlowChatSearchPresentation.test.tsx    |  21 +-
 .../modern/useFlowChatSearchPresentation.ts   |  40 +-
 .../components/usage/ContextUsagePopover.scss |  25 +-
 .../components/usage/ContextUsagePopover.tsx  |  83 ++--
 .../usage/ToolDefinitionsPreview.scss         |  10 +-
 .../flow_chat/components/usage/appearance.ts  |   3 +-
 .../src/flow_chat/timeline/document.test.ts   |  10 +
 src/web-ui/src/flow_chat/timeline/document.ts |   7 +-
 .../trajectory/Trajectory.appearance.ts       |   7 +
 .../src/flow_chat/trajectory/Trajectory.scss  | 128 ++++++
 .../trajectory/TrajectoryDetails.test.tsx     | 170 ++++++++
 .../trajectory/TrajectoryDetails.tsx          | 261 ++++++++++++
 .../trajectory/TrajectoryExplorer.test.tsx    | 224 ++++++++++
 .../trajectory/TrajectoryExplorer.tsx         | 316 ++++++++++++++
 .../trajectory/trajectoryApi.test.ts          |  22 +
 .../src/flow_chat/trajectory/trajectoryApi.ts |  21 +
 .../trajectory/trajectoryModel.test.ts        |  58 +++
 .../flow_chat/trajectory/trajectoryModel.ts   |  97 +++++
 .../trajectory/trajectoryPanel.test.ts        |  30 ++
 .../flow_chat/trajectory/trajectoryPanel.ts   |  46 +++
 .../trajectory/trajectoryPresentation.ts      |   9 +
 .../flow_chat/trajectory/trajectoryRange.ts   |  27 ++
 .../trajectory/useTrajectory.test.tsx         |  56 +++
 .../src/flow_chat/trajectory/useTrajectory.ts |  77 ++++
 .../useTrajectoryNavigation.test.tsx          | 122 ++++++
 .../trajectory/useTrajectoryNavigation.ts     | 136 ++++++
 .../api/adapters/peer-device-adapter.ts       |   2 +
 .../api/generated/productControl.ts           |   2 +-
 .../api/generated/remoteSurface.ts            |   5 +-
 .../registry/defaultAppearanceRegistry.ts     |   2 +
 .../peer-device/PeerConnectionManager.test.ts |   3 +
 .../peer-device/PeerConnectionManager.ts      |   4 +
 src/web-ui/src/locales/en-US/common.json      |  11 +-
 src/web-ui/src/locales/en-US/flow-chat.json   |  45 ++
 src/web-ui/src/locales/en-US/settings.json    |   7 +-
 .../locales/en-US/settings/appearance.json    |  15 +
 src/web-ui/src/locales/zh-CN/common.json      |  11 +-
 src/web-ui/src/locales/zh-CN/flow-chat.json   |  45 ++
 src/web-ui/src/locales/zh-CN/settings.json    |   7 +-
 .../locales/zh-CN/settings/appearance.json    |  15 +
 src/web-ui/src/locales/zh-TW/common.json      |  11 +-
 src/web-ui/src/locales/zh-TW/flow-chat.json   |  45 ++
 src/web-ui/src/locales/zh-TW/settings.json    |   7 +-
 .../locales/zh-TW/settings/appearance.json    |  15 +
 src/web-ui/src/shared/types/panelContent.ts   |   1 +
 124 files changed, 4444 insertions(+), 1254 deletions(-)
 create mode 100644 src/crates/services/services-core/src/session/trajectory.rs
 delete mode 100644 src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.test.tsx
 delete mode 100644 src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.tsx
 create mode 100644 src/web-ui/src/app/components/NavPanel/components/PinnedNavigationItems.tsx
 create mode 100644 src/web-ui/src/app/navigation/sidebarContributions.ts
 create mode 100644 src/web-ui/src/app/navigation/sidebarPreferences.test.ts
 create mode 100644 src/web-ui/src/app/navigation/sidebarPreferences.ts
 create mode 100644 src/web-ui/src/app/navigation/sidebarRegistry.test.ts
 create mode 100644 src/web-ui/src/app/navigation/sidebarRegistry.ts
 create mode 100644 src/web-ui/src/app/navigation/useSidebarNavigation.ts
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/SidebarSettingsSection.test.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/application/SidebarSettingsSection.tsx
 create mode 100644 src/web-ui/src/app/scenes/settings/pages/tools/ExternalImportSettingsPage.tsx
 create mode 100644 src/web-ui/src/flow_chat/_detail-disclosure.scss
 create mode 100644 src/web-ui/src/flow_chat/trajectory/Trajectory.appearance.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/Trajectory.scss
 create mode 100644 src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.tsx
 create mode 100644 src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.tsx
 create mode 100644 src/web-ui/src/flow_chat/trajectory/trajectoryApi.test.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/trajectoryApi.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/trajectoryModel.test.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/trajectoryModel.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/trajectoryPanel.test.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/trajectoryPanel.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/trajectoryPresentation.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/trajectoryRange.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/useTrajectory.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/trajectory/useTrajectory.ts
 create mode 100644 src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.test.tsx
 create mode 100644 src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.ts

diff --git a/design-system/packages/ui/src/components/Icon/Icon.tsx b/design-system/packages/ui/src/components/Icon/Icon.tsx
index 0769568425..3426667028 100644
--- a/design-system/packages/ui/src/components/Icon/Icon.tsx
+++ b/design-system/packages/ui/src/components/Icon/Icon.tsx
@@ -16,6 +16,7 @@ import {
   BookOpen,
   BookSearch,
   CalendarClock,
+  ChartSpline,
   Check,
   ChevronDown,
   ChevronLeft,
@@ -128,6 +129,7 @@ export const iconNames = [
   "book-search",
   "browser",
   "calendar-clock",
+  "chart-spline",
   "check-circle",
   "check-fill",
   "check-line",
@@ -260,6 +262,7 @@ const lineGlyphs = {
   "book-search": BookSearch,
   "browser": Globe,
   "calendar-clock": CalendarClock,
+  "chart-spline": ChartSpline,
   "check-circle": CircleCheck,
   "check-fill": CircleCheck,
   "check-line": Check,
diff --git a/design-system/packages/ui/tests/icon.test.mjs b/design-system/packages/ui/tests/icon.test.mjs
index 124ea63720..3aea68f9b6 100644
--- a/design-system/packages/ui/tests/icon.test.mjs
+++ b/design-system/packages/ui/tests/icon.test.mjs
@@ -8,14 +8,15 @@ import { Icon, iconNames, canonicalIconNames, iconAliases } from "../dist/index.
 import { Network } from "lucide-react";
 
 test("Icon exposes the complete named catalog without duplicate names", () => {
-  assert.equal(iconNames.length, 102);
-  assert.equal(canonicalIconNames.length, 99);
+  assert.equal(iconNames.length, 103);
+  assert.equal(canonicalIconNames.length, 100);
   assert.deepEqual(Object.keys(iconAliases).sort(), ["circle", "download"]);
   for (const name of ["thinking", "git", "duplicate", "chevron-left", "selected", "delete", "waitlist-message", "creative", "ultimate", "standard", "minimal", "arrow-down", "unselected"]) {
     assert.ok(canonicalIconNames.includes(name), name);
   }
   assert.equal(new Set(iconNames).size, iconNames.length);
   assert.ok(iconNames.includes("search"));
+  assert.match(renderToStaticMarkup(createElement(Icon, { name: "chart-spline" })), /lucide-chart-spline/);
   assert.ok(canonicalIconNames.includes("list-todo"));
   assert.match(renderToStaticMarkup(createElement(Icon, { name: "list-todo" })), /lucide-list-todo/);
   assert.ok(iconNames.includes("book-open"));
diff --git a/docs/architecture/product-customization-blueprint.md b/docs/architecture/product-customization-blueprint.md
index 785d061f4c..f626e050bc 100644
--- a/docs/architecture/product-customization-blueprint.md
+++ b/docs/architecture/product-customization-blueprint.md
@@ -227,6 +227,30 @@ GUI 主题由 Web/TS 主题模块定义，TUI 主题由 CLI/TUI 宿主定义，I
 界面宿主负责焦点、键盘导航、屏幕阅读器、窄终端、ANSI/truecolor、无鼠标和无 Unicode 等降级。无合法组合时
 构建失败；运行时插件贡献无法渲染时使用可退出的降级界面。
 
+### 7.1 用户侧导航偏好与入口贡献
+
+Web UI 的左侧导航定制属于控制端运行时展示偏好，不进入产品定义或远端配置。
+`src/web-ui/src/app/navigation/sidebarRegistry.ts` 定义可信前端模块的贡献接口：稳定的 owner 限定 ID、
+bootstrap 文案键、设计系统图标、当前页面匹配、不可用原因和按需打开动作。
+`sidebarContributions.ts` 注册现有页面并复用页面 owner / Product Action；设置与导航共同消费同一份注册表。
+注册返回注销函数，冲突 ID 拒绝注册，新入口只进入可选列表，由用户决定是否固定。
+
+`sidebarPreferences.ts` 只持久化版本和有序入口 ID，不保存回调、组件、工作区路径或权限。
+默认保留首页与任务板，首页固定存在；用户可添加、排序、移除其他入口并恢复默认。
+未知或暂时不可用的入口保留原位置、显式禁用，重新注册或能力恢复后自动复用偏好。
+未知附加字段随写入保留；无法读取的数据和更新版本的记录不自动覆盖；写入失败保留原布局并报错。
+单个 MiniApp 仍由已有的按设备固定机制管理，不能把主机资源 ID 当作跨设备页面 ID。
+
+导航贡献不会获得额外权限：页面 owner 继续承担 SSH、Peer 能力判断与数据访问，延迟准备后必须检查
+捕获的 surface scope；不支持的技能页面在非本机桌面显式禁用。Mobile / IM Remote Control 与 Detached
+Dispatch 不消费这份 GUI 布局，也不因固定入口获得新协议能力。此接口尚不是第三方插件 API：以后接入插件
+必须由受控适配层把已授权的声明投影为可信贡献，不得从偏好文件执行代码或任意地址。
+
+入口声明与用户布局分离、按需加载、可恢复布局参考
+[VS Code View Contributions](https://code.visualstudio.com/api/extension-guides/tree-view) 和
+[Custom Layout](https://code.visualstudio.com/docs/configure/custom-layout)；这里只采用适合现有 GUI owner 的部分，
+不引入通用组件协议或跨 GUI/TUI 布局 schema。
+
 ## 8. 产品内置扩展与用户插件
 
 产品内置扩展只表示“随产品交付”，不表示更高运行权限，也不表示同名用户插件必须被拒绝。三类来源的生命周期
diff --git a/docs/interactive-capabilities/README.md b/docs/interactive-capabilities/README.md
index a21d37a511..f068f2592f 100644
--- a/docs/interactive-capabilities/README.md
+++ b/docs/interactive-capabilities/README.md
@@ -1,9 +1,9 @@
 <!-- generated by scripts/generate-interactive-capabilities.mjs; do not edit -->
 # OpenBitFun 功能与设置目录 / OpenBitFun Features & Settings
 
-OpenBitFun Playbook 当前包含 **23 个功能**和 **21 个设置页**，共 **44 个**用户可理解的条目、**336 项**有源码证据的子能力。每个条目有独立 Markdown，并直接服务于说明书网站、OpenBitFun 全局搜索和 `OpenBitFunControl` 智能体工具。
+OpenBitFun Playbook 当前包含 **22 个功能**和 **22 个设置页**，共 **44 个**用户可理解的条目、**336 项**有源码证据的子能力。每个条目有独立 Markdown，并直接服务于说明书网站、OpenBitFun 全局搜索和 `OpenBitFunControl` 智能体工具。
 
-OpenBitFun Playbook currently contains **23 features**, **21 settings pages**, and **336** source-backed sub-capabilities across **44** user-facing entries. Every entry has its own Markdown page and directly powers the website, in-app global search, and the `OpenBitFunControl` agent tool.
+OpenBitFun Playbook currently contains **22 features**, **22 settings pages**, and **336** source-backed sub-capabilities across **44** user-facing entries. Every entry has its own Markdown page and directly powers the website, in-app global search, and the `OpenBitFunControl` agent tool.
 
 ## 唯一事实源 / Single source of truth
 
@@ -27,9 +27,9 @@ OpenBitFun Playbook currently contains **23 features**, **21 settings pages**, a
 - Generated per-item interaction audit: `docs/interactive-capabilities/technical/product-control-open-audit.json`
 - Generated low-level audit map: `docs/interactive-capabilities/technical/tauri-command-map.json`
 
-说明书、网站、搜索和智能体只看“功能 + 设置 + 子能力”。每项子能力都必须引用已注册 Tauri Command 或可解析的源码标记；这些证据不会进入公开目录。当前 **706** 个 Tauri 命令只用于实现覆盖审计。产品 UI 交互源码会在生成和检查时扫描并校验，但不会保存成随普通 UI 改动频繁变化的版本化快照。
+说明书、网站、搜索和智能体只看“功能 + 设置 + 子能力”。每项子能力都必须引用已注册 Tauri Command 或可解析的源码标记；这些证据不会进入公开目录。当前 **707** 个 Tauri 命令只用于实现覆盖审计。产品 UI 交互源码会在生成和检查时扫描并校验，但不会保存成随普通 UI 改动频繁变化的版本化快照。
 
-Docs, website, search, and agents see only features, settings, and documented sub-capabilities. Every sub-capability must reference a registered Tauri command or a resolvable source marker; evidence is stripped from public projections. The **706** Tauri commands remain implementation-audit evidence only. Product UI interaction sources are scanned and validated during generation and checks, but are not stored as a versioned snapshot that churns with ordinary UI changes.
+Docs, website, search, and agents see only features, settings, and documented sub-capabilities. Every sub-capability must reference a registered Tauri command or a resolvable source marker; evidence is stripped from public projections. The **707** Tauri commands remain implementation-audit evidence only. Product UI interaction sources are scanned and validated during generation and checks, but are not stored as a versioned snapshot that churns with ordinary UI changes.
 
 ## 控制边界 / Control boundary
 
diff --git a/docs/interactive-capabilities/capabilities.json b/docs/interactive-capabilities/capabilities.json
index 4c33f27459..ce4e55a988 100644
--- a/docs/interactive-capabilities/capabilities.json
+++ b/docs/interactive-capabilities/capabilities.json
@@ -4,7 +4,7 @@
   "title": "OpenBitFun Playbook",
   "origin": "https://playbook.openbitfun.com",
   "source": "src/shared/interactive-capabilities/catalog.json",
-  "digest": "9ec82305067852766c79ed3d802c3a16f1c4dd992f7d3195f91a2989da32f544",
+  "digest": "cda0c1805851b3488a613c44f6848376dd9093cf08325257d88cd9ab16d85fae",
   "ownerDigest": "f27c231da2e536e4f2123910f34f862b55d21feb0528bc915d4d13edbd528af9",
   "searchAcceptance": [
     {
@@ -172,8 +172,8 @@
     }
   ],
   "counts": {
-    "features": 23,
-    "settings": 21,
+    "features": 22,
+    "settings": 22,
     "userFacing": 44,
     "documentedItems": 336,
     "controlCoverage": {
@@ -8046,8 +8046,8 @@
         "kind": "static"
       },
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8092,8 +8092,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8138,8 +8138,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8184,8 +8184,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8230,8 +8230,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8276,8 +8276,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8322,8 +8322,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8368,8 +8368,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8414,8 +8414,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8460,8 +8460,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8506,8 +8506,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8552,8 +8552,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -24420,7 +24420,7 @@
     },
     {
       "id": "feature.ecosystem-compatibility",
-      "kind": "feature",
+      "kind": "setting",
       "categoryId": "automation",
       "titleZh": "外部导入",
       "titleEn": "External Import",
@@ -24591,15 +24591,15 @@
         }
       ],
       "stepsZh": [
-        "打开“外部导入”并选择应用",
-        "在左侧导航搜索框上方切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留",
+        "打开“设置 → 工具与集成 → 外部导入”并选择应用",
+        "在外部应用标题旁切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留",
         "查看分类状态，打开分类弹窗浏览、搜索并选择内容",
         "审阅可导入项目并确认创建副本；Command、Tool、子智能体按已有兼容功能使用",
         "前往对应管理页确认副本启用或连接；当前页不将“已导入”视为可用"
       ],
       "stepsEn": [
-        "Open External Import and choose an app",
-        "Toggle automatic discovery above the sidebar search and hover for details; disabling immediately hides source-following sessions while local forks remain visible",
+        "Open Settings → Tools & integrations → External import and choose an app",
+        "Toggle automatic discovery beside the External apps heading and hover for details; disabling immediately hides source-following sessions while local forks remain visible",
         "Inspect category status, then open a category dialog to browse, search, and select content",
         "Review importable items and confirm copies; use commands, tools and subagents through existing compatibility features",
         "Confirm copy activation or connection in the relevant settings; Imported does not mean available"
@@ -24613,8 +24613,8 @@
         "I want to migrate my Claude Code configuration"
       ],
       "destination": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "operations": [],
       "options": [],
diff --git a/docs/interactive-capabilities/capabilities/feature.ecosystem-compatibility.md b/docs/interactive-capabilities/capabilities/feature.ecosystem-compatibility.md
index 7bb44638a7..afaf07dae9 100644
--- a/docs/interactive-capabilities/capabilities/feature.ecosystem-compatibility.md
+++ b/docs/interactive-capabilities/capabilities/feature.ecosystem-compatibility.md
@@ -1,7 +1,7 @@
 <!-- generated by scripts/generate-interactive-capabilities.mjs; do not edit -->
 ---
 id: feature.ecosystem-compatibility
-kind: feature
+kind: setting
 category: automation
 title_zh: "外部导入"
 title_en: "External Import"
@@ -9,7 +9,7 @@ title_en: "External Import"
 
 # 外部导入 / External Import
 
-> 功能 / Feature
+> 设置 / Setting
 
 查看外部 AI 生态的内容与状态，导入受支持的 Skill、MCP、Hook，以及 Codex、Zcode 会话，并在 OpenBitFun 中继续对话。
 
@@ -42,10 +42,10 @@ Inspect external AI content and status, import supported Skills, MCP, Hooks, and
 
 ## 怎么用 / How to use it
 
-1. 打开“外部导入”并选择应用
-   Open External Import and choose an app
-2. 在左侧导航搜索框上方切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留
-   Toggle automatic discovery above the sidebar search and hover for details; disabling immediately hides source-following sessions while local forks remain visible
+1. 打开“设置 → 工具与集成 → 外部导入”并选择应用
+   Open Settings → Tools & integrations → External import and choose an app
+2. 在外部应用标题旁切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留
+   Toggle automatic discovery beside the External apps heading and hover for details; disabling immediately hides source-following sessions while local forks remain visible
 3. 查看分类状态，打开分类弹窗浏览、搜索并选择内容
    Inspect category status, then open a category dialog to browse, search, and select content
 4. 审阅可导入项目并确认创建副本；Command、Tool、子智能体按已有兼容功能使用
@@ -53,7 +53,7 @@ Inspect external AI content and status, import supported Skills, MCP, Hooks, and
 5. 前往对应管理页确认副本启用或连接；当前页不将“已导入”视为可用
    Confirm copy activation or connection in the relevant settings; Imported does not mean available
 
-入口 / Entry: OpenBitFun 功能入口
+入口 / Entry: OpenBitFun 设置
 
 ## 智能体可替你做什么 / What an agent can do for you
 
diff --git a/docs/interactive-capabilities/technical/product-control-open-audit.json b/docs/interactive-capabilities/technical/product-control-open-audit.json
index 2247e29765..902957a79c 100644
--- a/docs/interactive-capabilities/technical/product-control-open-audit.json
+++ b/docs/interactive-capabilities/technical/product-control-open-audit.json
@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "generatedFrom": "src/shared/interactive-capabilities/catalog.json",
-  "catalogDigest": "9ec82305067852766c79ed3d802c3a16f1c4dd992f7d3195f91a2989da32f544",
+  "catalogDigest": "cda0c1805851b3488a613c44f6848376dd9093cf08325257d88cd9ab16d85fae",
   "count": 213,
   "reasonCounts": {
     "externalAuth": 4,
@@ -1626,8 +1626,8 @@
       "reasonZh": "“发现 OpenCode、Claude Code、Codex 等外部 AI 来源与可用内容”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Discover OpenCode, Claude Code, Codex, and other external AI sources and content” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:get_external_ecosystem_awareness_command",
@@ -1646,8 +1646,8 @@
       "reasonZh": "“按来源启用或停用集成，并选择管理、预览或只读策略”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Enable or disable each source and choose managed, preview, or read-only policy” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:set_external_source_enabled_command",
@@ -1664,8 +1664,8 @@
       "reasonZh": "“发现、移除和重新添加 Codex 来源会话，并在 OpenBitFun 分支中续聊”由用户在生态兼容页开启发现或选择已移除的来源。打开来源时刷新历史，首次发送创建独立分支。归档、移除和分支删除各自独立，原应用历史保持不变。智能体打开入口，由用户选择具体会话。",
       "reasonEn": "“Discover, remove and restore Codex source sessions, then continue in OpenBitFun branches” requires the user to enable discovery or select a removed source in ecosystem compatibility. Opening a source refreshes its history and first send creates an independent branch. Archives, source removal and branch deletion stay independent; original history is preserved. The Agent opens the entry for the user to choose a session.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:list_removed_external_sessions",
@@ -1683,8 +1683,8 @@
       "reasonZh": "“发现、移除和重新添加 Zcode 来源会话，并在 OpenBitFun 分支中续聊”由用户在生态兼容页开启发现或选择已移除的来源。打开来源时刷新历史，首次发送创建独立分支。归档、移除和分支删除各自独立，原应用历史保持不变。智能体打开入口，由用户选择具体会话。",
       "reasonEn": "“Discover, remove and restore Zcode source sessions, then continue in OpenBitFun branches” requires the user to enable discovery or select a removed source in ecosystem compatibility. Opening a source refreshes its history and first send creates an independent branch. Archives, source removal and branch deletion stay independent; original history is preserved. The Agent opens the entry for the user to choose a session.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:list_removed_external_sessions",
@@ -1702,8 +1702,8 @@
       "reasonZh": "“展开外部 Prompt/Command 内容并处理与原生命令的冲突”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Expand external prompt/command content and resolve conflicts with native commands” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:expand_external_prompt_command_command",
@@ -1720,8 +1720,8 @@
       "reasonZh": "“启用外部智能体，处理同名冲突并绑定模型”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Enable external agents, resolve naming conflicts, and bind models” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:choose_external_subagent_conflict_command",
@@ -1739,8 +1739,8 @@
       "reasonZh": "“预览 MCP 导入计划，逐个处理服务器冲突并应用”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Preview MCP import plans, resolve server conflicts individually, and apply them” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:plan_external_mcp_import_command",
@@ -1759,8 +1759,8 @@
       "reasonZh": "“选择外部工具目标、解决冲突并控制是否启用”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Choose external tool targets, resolve conflicts, and control activation” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:set_external_tool_target_decision_command",
@@ -1777,8 +1777,8 @@
       "reasonZh": "“查看外部 Hooks 目录、规划导入、修改选择并应用”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Inspect external hook catalogs, plan imports, edit selections, and apply” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:get_external_hook_catalog",
@@ -1796,8 +1796,8 @@
       "reasonZh": "“在迁移前查看冲突、安全影响和来源控制快照”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Review conflicts, security impact, and source-control snapshots before migration” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:get_external_source_control_snapshot",
@@ -1814,8 +1814,8 @@
       "reasonZh": "“在文件管理器或远程环境中定位外部配置来源”由多个实时状态相关步骤组成，目前没有一个能确定完成整个流程的单一结构化 Command；智能体会打开精确入口，并把后续交互保留在用户可见界面。",
       "reasonEn": "“Reveal external configuration sources in the file manager or remote environment” spans multiple live-state-dependent steps and currently has no single structured Command that can deterministically complete the whole workflow; the Agent opens the exact entry and keeps the remaining interaction visible to the user.",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "evidence": [
         "command:reveal_external_source_location",
diff --git a/docs/interactive-capabilities/technical/tauri-command-map.json b/docs/interactive-capabilities/technical/tauri-command-map.json
index 232541ab0d..94a611580e 100644
--- a/docs/interactive-capabilities/technical/tauri-command-map.json
+++ b/docs/interactive-capabilities/technical/tauri-command-map.json
@@ -1,11 +1,11 @@
 {
   "schemaVersion": 2,
   "generatedFrom": "src/shared/interactive-capabilities/catalog.json",
-  "catalogDigest": "9ec82305067852766c79ed3d802c3a16f1c4dd992f7d3195f91a2989da32f544",
-  "commandCount": 706,
+  "catalogDigest": "cda0c1805851b3488a613c44f6848376dd9093cf08325257d88cd9ab16d85fae",
+  "commandCount": 707,
   "coverage": {
-    "commandCount": 706,
-    "documentedCommandCount": 646,
+    "commandCount": 707,
+    "documentedCommandCount": 647,
     "implementationCommandCount": 60,
     "implementationDigest": "5047b674e890f899e65baf9235e9df4bd912fa28f44eb10a656e079a1b89974d"
   },
@@ -5815,6 +5815,22 @@
       "signature": "fn load_session_event_backfill( runtime: State<'_, DesktopRuntimeContext>, request: LoadSessionEventBackfillRequest, ) -> Result<serde_json::Value, String>",
       "remoteWorkspacePolicy": "WorkspaceAgnostic"
     },
+    {
+      "id": "load_session_trajectory",
+      "moduleId": "agentic",
+      "capabilityId": "feature.ai-assistant",
+      "capabilityIds": [
+        "feature.ai-assistant"
+      ],
+      "documentedItemIds": [
+        "feature.ai-assistant:history-search"
+      ],
+      "visibility": "documented",
+      "rustPath": "api::agentic_api::load_session_trajectory",
+      "sourceFile": "src/apps/desktop/src/api/agentic_api.rs",
+      "signature": "fn load_session_trajectory( runtime: State<'_, DesktopRuntimeContext>, request: LoadSessionTrajectoryRequest, ) -> Result<openbitfun_services_core::session::trajectory::SessionTrajectoryPage, String>",
+      "remoteWorkspacePolicy": "RemoteRouted"
+    },
     {
       "id": "load_session_turn_window",
       "moduleId": "agentic",
diff --git a/src/apps/cli/src/peer_host/commands/mod.rs b/src/apps/cli/src/peer_host/commands/mod.rs
index ad404ea726..025b0924b7 100644
--- a/src/apps/cli/src/peer_host/commands/mod.rs
+++ b/src/apps/cli/src/peer_host/commands/mod.rs
@@ -146,6 +146,7 @@ pub(crate) fn dispatch<'a>(
             Box::pin(session::list_persisted_sessions_count(state, args))
         }
         "search_session_content" => Box::pin(session::search_session_content(state, args)),
+        "load_session_trajectory" => Box::pin(session::load_session_trajectory(state, args)),
         "load_session_turn_window" => Box::pin(session::load_session_turn_window(state, args)),
         "load_session_turns" => Box::pin(session::load_session_turns(state, args)),
         "load_session_event_backfill" => Box::pin(std::future::ready(session::load_session_event_backfill(state, args))),
@@ -332,6 +333,7 @@ pub(crate) const HANDLED_COMMANDS: &[&str] = &[
     "list_project_permission_grants",
     "load_session_event_backfill",
     "load_session_turn_window",
+    "load_session_trajectory",
     "load_session_turns",
     "open_workspace",
     "product_control_invoke",
diff --git a/src/apps/cli/src/peer_host/commands/session.rs b/src/apps/cli/src/peer_host/commands/session.rs
index ab758e4975..ba3853aabc 100644
--- a/src/apps/cli/src/peer_host/commands/session.rs
+++ b/src/apps/cli/src/peer_host/commands/session.rs
@@ -453,6 +453,21 @@ pub(crate) async fn load_session_turns(
 pub(crate) async fn load_session_turn_window(
     state: &PeerHostState,
     args: &Value,
+) -> Result<Value, String> {
+    read_session_turn_window(state, args, false).await
+}
+
+pub(crate) async fn load_session_trajectory(
+    state: &PeerHostState,
+    args: &Value,
+) -> Result<Value, String> {
+    read_session_turn_window(state, args, true).await
+}
+
+async fn read_session_turn_window(
+    state: &PeerHostState,
+    args: &Value,
+    trajectory: bool,
 ) -> Result<Value, String> {
     let request = request_value(args);
     let session_id = validated_session_id(request)?;
@@ -465,19 +480,62 @@ pub(crate) async fn load_session_turn_window(
                 workspace_path: workspace_path.clone(),
                 session_id,
                 include_internal: optional_bool(request, "includeInternal").unwrap_or(false),
-                target_storage_turn_index: request
-                    .get("targetStorageTurnIndex")
-                    .and_then(Value::as_u64)
-                    .ok_or_else(|| "targetStorageTurnIndex is required".to_string())?
-                    as usize,
+                target_storage_turn_index: if trajectory
+                    && optional_bool(request, "catalogOnly").unwrap_or(false)
+                {
+                    usize::MAX
+                } else {
+                    request
+                        .get("targetStorageTurnIndex")
+                        .and_then(Value::as_u64)
+                        .ok_or_else(|| "targetStorageTurnIndex is required".to_string())?
+                        as usize
+                },
                 expected_turn_id: optional_string(request, "expectedTurnId"),
                 expected_catalog_revision: optional_string(request, "expectedCatalogRevision"),
-                before: request.get("before").and_then(Value::as_u64).unwrap_or(4) as usize,
-                after: request.get("after").and_then(Value::as_u64).unwrap_or(12) as usize,
+                before: if trajectory {
+                    0
+                } else {
+                    request.get("before").and_then(Value::as_u64).unwrap_or(4) as usize
+                },
+                after: if trajectory {
+                    request
+                        .get("after")
+                        .and_then(Value::as_u64)
+                        .unwrap_or(8)
+                        .clamp(1, 8) as usize
+                } else {
+                    request.get("after").and_then(Value::as_u64).unwrap_or(12) as usize
+                },
             },
         )
         .await
         .map_err(|e| format!("Failed to load session Turn window: {e}"))?;
+    if trajectory && optional_bool(request, "catalogOnly").unwrap_or(false) {
+        if let openbitfun_services_core::session::SessionTurnWindowResponse::NotFound { catalog }
+        | openbitfun_services_core::session::SessionTurnWindowResponse::Stale { catalog } =
+            response
+        {
+            return serde_json::to_value(
+                openbitfun_services_core::session::trajectory::SessionTrajectoryPage::Catalog {
+                    catalog,
+                },
+            )
+            .map_err(|e| format!("serialize trajectory catalog: {e}"));
+        }
+        return Err("Unexpected trajectory catalog response".into());
+    }
+    if trajectory {
+        let page = openbitfun_services_core::session::trajectory::project_session_trajectory(
+            response,
+            request.get("query").and_then(Value::as_str).unwrap_or(""),
+            request
+                .get("nodeOffset")
+                .and_then(Value::as_u64)
+                .unwrap_or(0) as usize,
+        );
+        return serde_json::to_value(page).map_err(|e| format!("serialize trajectory: {e}"));
+    }
     serde_json::to_value(response).map_err(|e| format!("serialize Turn window: {e}"))
 }
 
diff --git a/src/apps/desktop/Cargo.toml b/src/apps/desktop/Cargo.toml
index cf817297af..58cca30e76 100644
--- a/src/apps/desktop/Cargo.toml
+++ b/src/apps/desktop/Cargo.toml
@@ -20,7 +20,7 @@ serde_json = { workspace = true }
 
 [dependencies]
 openbitfun-miniapp-ipc = { path = "../../crates/adapters/miniapp-ipc" }
-openbitfun-services-core = { path = "../../crates/services/services-core", features = ["pet-packages"] }
+openbitfun-services-core = { path = "../../crates/services/services-core", features = ["pet-packages", "local-storage"] }
 # Internal crates
 openbitfun-core = { path = "../../crates/assembly/core", features = ["product-full"] }
 openbitfun-relay-service = { path = "../../crates/services/relay-service" }
diff --git a/src/apps/desktop/src/api/agentic_api.rs b/src/apps/desktop/src/api/agentic_api.rs
index 02f67d7355..ec55df8892 100644
--- a/src/apps/desktop/src/api/agentic_api.rs
+++ b/src/apps/desktop/src/api/agentic_api.rs
@@ -3887,6 +3887,72 @@ pub async fn load_session_event_backfill(
     ))
 }
 
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct LoadSessionTrajectoryRequest {
+    #[serde(default)]
+    pub catalog_only: bool,
+    #[serde(flatten)]
+    pub window: LoadSessionTurnWindowRequest,
+    #[serde(default)]
+    pub query: String,
+    #[serde(default)]
+    pub node_offset: usize,
+}
+
+#[tauri::command]
+pub async fn load_session_trajectory(
+    runtime: State<'_, DesktopRuntimeContext>,
+    request: LoadSessionTrajectoryRequest,
+) -> Result<openbitfun_services_core::session::trajectory::SessionTrajectoryPage, String> {
+    let window = request.window;
+    let response = runtime
+        .session_application()
+        .load_session_turn_window(
+            desktop_session_scope(
+                window.workspace_id,
+                window.workspace_path.clone(),
+                window.remote_connection_id,
+                window.remote_ssh_host,
+            ),
+            SessionTurnWindowRequest {
+                workspace_path: PathBuf::from(window.workspace_path),
+                session_id: window.session_id,
+                include_internal: window.include_internal,
+                target_storage_turn_index: if request.catalog_only {
+                    usize::MAX
+                } else {
+                    window.target_storage_turn_index
+                },
+                expected_turn_id: window.expected_turn_id,
+                expected_catalog_revision: window.expected_catalog_revision,
+                before: 0,
+                after: window.after.unwrap_or(8).clamp(1, 8),
+            },
+        )
+        .await
+        .map_err(|error| error.to_string())?;
+    if request.catalog_only {
+        if let SessionTurnWindowResponse::NotFound { catalog }
+        | SessionTurnWindowResponse::Stale { catalog } = response
+        {
+            return Ok(
+                openbitfun_services_core::session::trajectory::SessionTrajectoryPage::Catalog {
+                    catalog,
+                },
+            );
+        }
+        return Err("Unexpected trajectory catalog response".into());
+    }
+    Ok(
+        openbitfun_services_core::session::trajectory::project_session_trajectory(
+            response,
+            &request.query,
+            request.node_offset,
+        ),
+    )
+}
+
 #[tauri::command]
 pub async fn load_session_turn_window(
     runtime: State<'_, DesktopRuntimeContext>,
diff --git a/src/apps/desktop/src/lib.rs b/src/apps/desktop/src/lib.rs
index 129455f32f..6ed7aa8a7b 100644
--- a/src/apps/desktop/src/lib.rs
+++ b/src/apps/desktop/src/lib.rs
@@ -1419,6 +1419,7 @@ pub async fn run() {
             api::agentic_api::restore_session_view,
             api::agentic_api::load_session_event_backfill,
             api::agentic_api::load_session_turn_window,
+            api::agentic_api::load_session_trajectory,
             api::agentic_api::restore_session_with_turns,
             api::agentic_api::reset_memory,
             api::agentic_api::get_memory_paths,
diff --git a/src/crates/contracts/product-domains/src/generated/product-control-catalog.json b/src/crates/contracts/product-domains/src/generated/product-control-catalog.json
index a632771ff9..281cd57b28 100644
--- a/src/crates/contracts/product-domains/src/generated/product-control-catalog.json
+++ b/src/crates/contracts/product-domains/src/generated/product-control-catalog.json
@@ -4,7 +4,7 @@
   "title": "OpenBitFun Playbook",
   "origin": "https://playbook.openbitfun.com",
   "source": "src/shared/interactive-capabilities/catalog.json",
-  "digest": "9ec82305067852766c79ed3d802c3a16f1c4dd992f7d3195f91a2989da32f544",
+  "digest": "cda0c1805851b3488a613c44f6848376dd9093cf08325257d88cd9ab16d85fae",
   "ownerDigest": "f27c231da2e536e4f2123910f34f862b55d21feb0528bc915d4d13edbd528af9",
   "searchAcceptance": [
     {
@@ -172,8 +172,8 @@
     }
   ],
   "counts": {
-    "features": 23,
-    "settings": 21,
+    "features": 22,
+    "settings": 22,
     "userFacing": 44,
     "documentedItems": 336,
     "controlCoverage": {
@@ -8046,8 +8046,8 @@
         "kind": "static"
       },
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8092,8 +8092,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8138,8 +8138,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8184,8 +8184,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8230,8 +8230,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8276,8 +8276,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8322,8 +8322,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8368,8 +8368,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8414,8 +8414,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8460,8 +8460,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8506,8 +8506,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8552,8 +8552,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -24461,7 +24461,7 @@
     },
     {
       "id": "feature.ecosystem-compatibility",
-      "kind": "feature",
+      "kind": "setting",
       "categoryId": "automation",
       "titleZh": "外部导入",
       "titleEn": "External Import",
@@ -24632,15 +24632,15 @@
         }
       ],
       "stepsZh": [
-        "打开“外部导入”并选择应用",
-        "在左侧导航搜索框上方切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留",
+        "打开“设置 → 工具与集成 → 外部导入”并选择应用",
+        "在外部应用标题旁切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留",
         "查看分类状态，打开分类弹窗浏览、搜索并选择内容",
         "审阅可导入项目并确认创建副本；Command、Tool、子智能体按已有兼容功能使用",
         "前往对应管理页确认副本启用或连接；当前页不将“已导入”视为可用"
       ],
       "stepsEn": [
-        "Open External Import and choose an app",
-        "Toggle automatic discovery above the sidebar search and hover for details; disabling immediately hides source-following sessions while local forks remain visible",
+        "Open Settings → Tools & integrations → External import and choose an app",
+        "Toggle automatic discovery beside the External apps heading and hover for details; disabling immediately hides source-following sessions while local forks remain visible",
         "Inspect category status, then open a category dialog to browse, search, and select content",
         "Review importable items and confirm copies; use commands, tools and subagents through existing compatibility features",
         "Confirm copy activation or connection in the relevant settings; Imported does not mean available"
@@ -24654,8 +24654,8 @@
         "I want to migrate my Claude Code configuration"
       ],
       "destination": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "operations": [],
       "options": [],
diff --git a/src/crates/contracts/product-domains/src/generated/remote-surface-registry.json b/src/crates/contracts/product-domains/src/generated/remote-surface-registry.json
index 7538a8b440..c6348b5cba 100644
--- a/src/crates/contracts/product-domains/src/generated/remote-surface-registry.json
+++ b/src/crates/contracts/product-domains/src/generated/remote-surface-registry.json
@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "digest": "fnv1a64:99d567cb0f1aa0ad",
+  "digest": "fnv1a64:96fc351cf4dd6568",
   "retiredCommandPrefixes": [
     {
       "prefix": "lsp_",
@@ -44,6 +44,7 @@
       "workspace_id_references_v1",
       "workspace_html_preview_v1",
       "whole_session_copy_v1",
+      "session_trajectory_v1",
       "user_question_response",
       "user_question_interaction_v1"
     ],
@@ -83,6 +84,7 @@
       "workspace_id_references_v1",
       "workspace_html_preview_v1",
       "whole_session_copy_v1",
+      "session_trajectory_v1",
       "user_question_response",
       "user_question_interaction_v1"
     ],
@@ -101,6 +103,7 @@
       "product_control_v1",
       "cancel_tool",
       "tool_catalog",
+      "session_trajectory_v1",
       "chat_mcp_catalog_v1",
       "workspace_id_references_v1",
       "workspace_html_preview_v1",
@@ -4595,6 +4598,17 @@
         "kind": "handled"
       }
     },
+    {
+      "id": "load_session_trajectory",
+      "surface": "tauri_command",
+      "remoteWorkspace": "RemoteRouted",
+      "peer": {
+        "kind": "proxied"
+      },
+      "cliPeer": {
+        "kind": "handled"
+      }
+    },
     {
       "id": "load_session_turn_window",
       "surface": "tauri_command",
diff --git a/src/crates/contracts/product-domains/src/remote_surface/capabilities.rs b/src/crates/contracts/product-domains/src/remote_surface/capabilities.rs
index 1c5c432e9f..b2b33d1b4a 100644
--- a/src/crates/contracts/product-domains/src/remote_surface/capabilities.rs
+++ b/src/crates/contracts/product-domains/src/remote_surface/capabilities.rs
@@ -91,6 +91,8 @@ pub enum PeerHostCapability {
     WorkspaceHtmlPreviewV1,
     /// `copy_session` copies a whole session without a caller-selected turn id.
     WholeSessionCopyV1,
+    /// Bounded session trajectory summaries and host-side body search.
+    SessionTrajectoryV1,
     /// `submit_user_answers` is implemented for Runtime-owned questions.
     UserQuestionResponse,
     /// First human interaction disables the unattended question timeout.
@@ -135,6 +137,7 @@ impl PeerHostCapability {
         Self::WorkspaceIdReferencesV1,
         Self::WorkspaceHtmlPreviewV1,
         Self::WholeSessionCopyV1,
+        Self::SessionTrajectoryV1,
         Self::UserQuestionResponse,
         Self::UserQuestionInteractionV1,
     ];
@@ -176,6 +179,7 @@ impl PeerHostCapability {
             Self::ChatMcpCatalogV1 => "chat_mcp_catalog_v1",
             Self::WorkspaceIdReferencesV1 => "workspace_id_references_v1",
             Self::WorkspaceHtmlPreviewV1 => "workspace_html_preview_v1",
+            Self::SessionTrajectoryV1 => "session_trajectory_v1",
             Self::WholeSessionCopyV1 => "whole_session_copy_v1",
             Self::UserQuestionResponse => "user_question_response",
             Self::UserQuestionInteractionV1 => "user_question_interaction_v1",
@@ -207,6 +211,7 @@ const CLI_CAPABILITIES: &[PeerHostCapability] = &[
     PeerHostCapability::ProductControlV1,
     PeerHostCapability::CancelTool,
     PeerHostCapability::ToolCatalog,
+    PeerHostCapability::SessionTrajectoryV1,
     PeerHostCapability::ChatMcpCatalogV1,
     PeerHostCapability::WorkspaceIdReferencesV1,
     PeerHostCapability::WorkspaceHtmlPreviewV1,
diff --git a/src/crates/contracts/product-domains/src/remote_surface/table.rs b/src/crates/contracts/product-domains/src/remote_surface/table.rs
index aed4c41da7..596a57580c 100644
--- a/src/crates/contracts/product-domains/src/remote_surface/table.rs
+++ b/src/crates/contracts/product-domains/src/remote_surface/table.rs
@@ -469,6 +469,7 @@ pub(super) const OPERATIONS: &[OperationDefinition] = &[
     op("load_mcp_json_config",                                       Unaudited,   Proxied,          CLI_NOT_IMPLEMENTED),
     op("load_persisted_session_metadata",                            Unaudited,   Proxied,          CLI_NOT_IMPLEMENTED),
     op("load_session_event_backfill",                                Agnostic,    Proxied,          HANDLED),
+    op("load_session_trajectory",                                    Routed,      Proxied,          HANDLED),
     op("load_session_turn_window",                                   Routed,      Proxied,          HANDLED),
     op("load_session_turns",                                         Unaudited,   Proxied,          HANDLED),
     op("local_file_download",                                       Agnostic,    ControllerLocal,  REFUSED),
diff --git a/src/crates/services/services-core/AGENTS.md b/src/crates/services/services-core/AGENTS.md
index 9c3f91c5ce..e920b035b6 100644
--- a/src/crates/services/services-core/AGENTS.md
+++ b/src/crates/services/services-core/AGENTS.md
@@ -99,6 +99,7 @@ cargo test -p openbitfun-services-core --no-default-features --features diff --l
 cargo test -p openbitfun-services-core --no-default-features --features workspace-text-runtime --lib workspace_text::tests::
 cargo test -p openbitfun-services-core --no-default-features --features workspace-runtime --lib workspace::tests::
 cargo test -p openbitfun-services-core --no-default-features --features local-storage --test session_contracts session_metadata_contracts::
+cargo test -p openbitfun-services-core --no-default-features --features local-storage --lib session::trajectory
 cargo test -p openbitfun-services-core --no-default-features --features local-storage --lib session::metadata
 cargo test -p openbitfun-services-core --no-default-features --features local-storage --lib session::page::tests
 cargo test -p openbitfun-services-core --no-default-features --features local-storage --lib session::offline_import
diff --git a/src/crates/services/services-core/src/session/mod.rs b/src/crates/services/services-core/src/session/mod.rs
index 059cd50b58..4a95bde9b5 100644
--- a/src/crates/services/services-core/src/session/mod.rs
+++ b/src/crates/services/services-core/src/session/mod.rs
@@ -8,6 +8,7 @@ pub mod naming;
 mod offline_import;
 mod ordinal;
 pub mod page;
+pub mod trajectory;
 pub mod types;
 mod write_lock;
 
diff --git a/src/crates/services/services-core/src/session/trajectory.rs b/src/crates/services/services-core/src/session/trajectory.rs
new file mode 100644
index 0000000000..6fe309873f
--- /dev/null
+++ b/src/crates/services/services-core/src/session/trajectory.rs
@@ -0,0 +1,348 @@
+//! Bounded read-only projections of persisted conversation windows. Bodies stay
+//! in the existing history reader; this response never transports tool results.
+use super::{DialogTurnData, SessionTurnCatalog, SessionTurnWindowResponse};
+use serde::{Deserialize, Serialize};
+
+pub const TRAJECTORY_PAGE_SIZE: usize = 256;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct TrajectoryNode {
+    pub id: String,
+    pub turn_id: String,
+    pub turn_ordinal: usize,
+    pub kind: String,
+    pub round_id: Option<String>,
+    pub focus_item_id: Option<String>,
+    pub label: String,
+    pub preview: String,
+    pub status: String,
+    pub timestamp: u64,
+    pub duration_ms: Option<u64>,
+    pub matched: bool,
+    pub match_field: Option<String>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(
+    tag = "status",
+    rename_all = "kebab-case",
+    rename_all_fields = "camelCase"
+)]
+pub enum SessionTrajectoryPage {
+    Ready {
+        catalog_revision: String,
+        start_ordinal: usize,
+        end_ordinal_exclusive: usize,
+        total_turn_count: usize,
+        nodes: Vec<TrajectoryNode>,
+        next_node_offset: Option<usize>,
+    },
+    Catalog {
+        catalog: SessionTurnCatalog,
+    },
+    Stale {
+        catalog: SessionTurnCatalog,
+    },
+    NotFound {
+        catalog: SessionTurnCatalog,
+    },
+}
+
+fn preview(value: &str) -> String {
+    value.chars().take(160).collect()
+}
+fn contains(value: &str, query: &str) -> bool {
+    !query.is_empty() && value.to_lowercase().contains(query)
+}
+fn json_contains(value: &serde_json::Value, query: &str) -> bool {
+    if query.is_empty() {
+        return false;
+    }
+    match value {
+        serde_json::Value::String(value) => contains(value, query),
+        serde_json::Value::Array(values) => values.iter().any(|v| json_contains(v, query)),
+        serde_json::Value::Object(values) => values
+            .iter()
+            .any(|(k, v)| contains(k, query) || json_contains(v, query)),
+        value => contains(&value.to_string(), query),
+    }
+}
+
+fn project_turn(
+    turn: &DialogTurnData,
+    ordinal: usize,
+    query: &str,
+    accept: &mut impl FnMut() -> bool,
+    emit: &mut impl FnMut(TrajectoryNode),
+) {
+    if !turn.kind.is_transcript_visible() {
+        return;
+    }
+    if accept() {
+        emit(TrajectoryNode {
+            id: turn.user_message.id.clone(),
+            turn_id: turn.turn_id.clone(),
+            turn_ordinal: ordinal,
+            kind: "user".into(),
+            round_id: None,
+            focus_item_id: None,
+            label: String::new(),
+            preview: preview(&turn.user_message.content),
+            status: "completed".into(),
+            timestamp: turn.user_message.timestamp,
+            duration_ms: None,
+            matched: contains(&turn.user_message.content, query),
+            match_field: Some("content".into()),
+        });
+    }
+    for round in &turn.model_rounds {
+        if accept() {
+            let label = round
+                .effective_model_name
+                .as_deref()
+                .or(round.model_config_id.as_deref())
+                .unwrap_or("");
+            let text = round
+                .text_items
+                .iter()
+                .find(|item| contains(&item.content, query));
+            let thinking = round
+                .thinking_items
+                .iter()
+                .find(|item| contains(&item.content, query));
+            let focus = text
+                .map(|item| item.id.clone())
+                .or_else(|| thinking.map(|item| item.id.clone()))
+                .or_else(|| round.text_items.first().map(|item| item.id.clone()))
+                .or_else(|| round.thinking_items.first().map(|item| item.id.clone()))
+                .or_else(|| round.tool_items.first().map(|item| item.id.clone()));
+            emit(TrajectoryNode {
+                id: round.id.clone(),
+                turn_id: turn.turn_id.clone(),
+                turn_ordinal: ordinal,
+                kind: "model".into(),
+                round_id: Some(round.id.clone()),
+                focus_item_id: focus,
+                label: preview(label),
+                preview: preview(
+                    text.map(|item| item.content.as_str())
+                        .or_else(|| round.text_items.first().map(|item| item.content.as_str()))
+                        .unwrap_or(""),
+                ),
+                status: round.status.clone(),
+                timestamp: round.start_time,
+                duration_ms: round.duration_ms,
+                matched: contains(label, query) || text.is_some() || thinking.is_some(),
+                match_field: if text.is_some() || thinking.is_some() {
+                    Some("content".into())
+                } else {
+                    None
+                },
+            });
+        }
+        for tool in &round.tool_items {
+            if !accept() {
+                continue;
+            }
+            let field = if contains(&tool.tool_name, query) {
+                Some("name")
+            } else if json_contains(&tool.tool_call.input, query) {
+                Some("parameters")
+            } else if tool.tool_result.as_ref().is_some_and(|result| {
+                json_contains(&result.result, query)
+                    || result
+                        .result_for_assistant
+                        .as_ref()
+                        .is_some_and(|s| contains(s, query))
+                    || result.error.as_ref().is_some_and(|s| contains(s, query))
+            }) {
+                Some("result")
+            } else {
+                None
+            };
+            emit(TrajectoryNode {
+                id: tool.id.clone(),
+                turn_id: turn.turn_id.clone(),
+                turn_ordinal: ordinal,
+                kind: "tool".into(),
+                round_id: Some(round.id.clone()),
+                focus_item_id: Some(tool.id.clone()),
+                label: preview(&tool.tool_name),
+                preview: String::new(),
+                status: tool.status.clone().unwrap_or_else(|| {
+                    if tool.tool_result.as_ref().is_some_and(|r| r.success) {
+                        "completed"
+                    } else {
+                        "unknown"
+                    }
+                    .into()
+                }),
+                timestamp: tool.start_time,
+                duration_ms: tool.duration_ms,
+                matched: field.is_some(),
+                match_field: field.map(str::to_owned),
+            });
+        }
+    }
+}
+
+pub fn project_session_trajectory(
+    window: SessionTurnWindowResponse,
+    query: &str,
+    offset: usize,
+) -> SessionTrajectoryPage {
+    match window {
+        SessionTurnWindowResponse::Ready {
+            catalog_revision,
+            start_ordinal,
+            end_ordinal_exclusive,
+            total_turn_count,
+            turns,
+            ..
+        } => {
+            let query = query.trim().to_lowercase();
+            let mut nodes = Vec::with_capacity(TRAJECTORY_PAGE_SIZE);
+            let mut count = 0usize;
+            for (index, turn) in turns.iter().enumerate() {
+                project_turn(
+                    turn,
+                    start_ordinal + index,
+                    &query,
+                    &mut || {
+                        let include = count >= offset && count - offset < TRAJECTORY_PAGE_SIZE;
+                        count += 1;
+                        include
+                    },
+                    &mut |node| nodes.push(node),
+                );
+            }
+            SessionTrajectoryPage::Ready {
+                catalog_revision,
+                start_ordinal,
+                end_ordinal_exclusive,
+                total_turn_count,
+                next_node_offset: (count > offset.saturating_add(nodes.len()))
+                    .then_some(offset.saturating_add(nodes.len())),
+                nodes,
+            }
+        }
+        SessionTurnWindowResponse::Stale { catalog } => SessionTrajectoryPage::Stale { catalog },
+        SessionTurnWindowResponse::NotFound { catalog } => {
+            SessionTrajectoryPage::NotFound { catalog }
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use serde_json::json;
+
+    fn turn() -> DialogTurnData {
+        serde_json::from_value(json!({
+            "turnId":"turn", "turnIndex":7, "sessionId":"session", "timestamp":100,
+            "userMessage":{"id":"user","content":"Find the needle","timestamp":100},
+            "modelRounds":[{"id":"round","turnId":"turn","roundIndex":0,"timestamp":100,
+                "startTime":100,"status":"completed",
+                "textItems":[{"id":"text","content":"A needle","isStreaming":false,"timestamp":110}],
+                "toolItems":[{"id":"tool","toolName":"Read","startTime":120,
+                    "toolCall":{"id":"call","input":{"path":"/NEEDLE"}},
+                    "toolResult":{"result":{"output":"FOUND"},"success":true}}]}],
+            "startTime":100,"status":"completed"
+        })).unwrap()
+    }
+    fn page(turns: Vec<DialogTurnData>, query: &str, offset: usize) -> SessionTrajectoryPage {
+        project_session_trajectory(
+            SessionTurnWindowResponse::Ready {
+                catalog_revision: "revision".into(),
+                total_turn_count: turns.len(),
+                start_ordinal: 4,
+                end_ordinal_exclusive: 4 + turns.len(),
+                target_turn_id: "turn".into(),
+                turns,
+            },
+            query,
+            offset,
+        )
+    }
+    #[test]
+    fn legacy_records_keep_unknown_timing_and_search_concrete_sources() {
+        let original = turn();
+        let serialized = serde_json::to_value(&original).unwrap();
+        let restored: DialogTurnData = serde_json::from_value(serialized).unwrap();
+        let SessionTrajectoryPage::Ready { nodes, .. } = page(vec![restored], "needle", 0) else {
+            panic!()
+        };
+        assert_eq!(nodes.len(), 3);
+        assert!(nodes
+            .iter()
+            .all(|node| node.matched && node.turn_ordinal == 4));
+        assert_eq!(nodes[1].focus_item_id.as_deref(), Some("text"));
+        assert_eq!(nodes[2].match_field.as_deref(), Some("parameters"));
+        assert!(nodes[2].duration_ms.is_none());
+        let wire = serde_json::to_string(&nodes).unwrap();
+        assert!(!wire.contains("/NEEDLE"));
+        assert!(!wire.contains("FOUND"));
+        let SessionTrajectoryPage::Ready { nodes, .. } = page(vec![original], "found", 0) else {
+            panic!()
+        };
+        assert_eq!(nodes[2].match_field.as_deref(), Some("result"));
+    }
+    #[test]
+    fn large_single_turn_is_bounded_and_cursor_continues_without_dropping_nodes() {
+        let mut turn = turn();
+        let template = turn.model_rounds[0].tool_items[0].clone();
+        turn.model_rounds[0].tool_items = (0..600)
+            .map(|i| {
+                let mut tool = template.clone();
+                tool.id = format!("tool-{i}");
+                tool
+            })
+            .collect();
+        let mut offset = 0;
+        let mut ids = Vec::new();
+        loop {
+            let SessionTrajectoryPage::Ready {
+                nodes,
+                next_node_offset,
+                ..
+            } = page(vec![turn.clone()], "", offset)
+            else {
+                panic!()
+            };
+            assert!(nodes.len() <= TRAJECTORY_PAGE_SIZE);
+            ids.extend(nodes.into_iter().map(|node| node.id));
+            match next_node_offset {
+                Some(next) => {
+                    assert!(next > offset);
+                    offset = next;
+                }
+                None => break,
+            }
+        }
+        assert_eq!(ids.len(), 602);
+        assert_eq!(
+            ids.into_iter()
+                .collect::<std::collections::HashSet<_>>()
+                .len(),
+            602
+        );
+    }
+    #[test]
+    fn stale_catalog_is_preserved_instead_of_returning_empty_success() {
+        let catalog = SessionTurnCatalog {
+            schema_version: 1,
+            session_id: "session".into(),
+            revision: "new".into(),
+            total_turn_count: 0,
+            complete: true,
+            entries: vec![],
+        };
+        let response =
+            project_session_trajectory(SessionTurnWindowResponse::Stale { catalog }, "", 0);
+        assert!(
+            matches!(response, SessionTrajectoryPage::Stale { catalog } if catalog.revision == "new")
+        );
+    }
+}
diff --git a/src/shared/interactive-capabilities/catalog.json b/src/shared/interactive-capabilities/catalog.json
index af0b246aa4..a895c18f11 100644
--- a/src/shared/interactive-capabilities/catalog.json
+++ b/src/shared/interactive-capabilities/catalog.json
@@ -535,6 +535,7 @@
           },
           "evidence": [
             "command:load_session_turn_window",
+            "command:load_session_trajectory",
             "command:search_session_content",
             "command:load_session_event_backfill",
             "command:list_persisted_sessions_page",
@@ -3958,7 +3959,7 @@
     },
     {
       "id": "feature.ecosystem-compatibility",
-      "kind": "feature",
+      "kind": "setting",
       "categoryId": "automation",
       "titleZh": "外部导入",
       "titleEn": "External Import",
@@ -4191,15 +4192,15 @@
         }
       ],
       "stepsZh": [
-        "打开“外部导入”并选择应用",
-        "在左侧导航搜索框上方切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留",
+        "打开“设置 → 工具与集成 → 外部导入”并选择应用",
+        "在外部应用标题旁切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留",
         "查看分类状态，打开分类弹窗浏览、搜索并选择内容",
         "审阅可导入项目并确认创建副本；Command、Tool、子智能体按已有兼容功能使用",
         "前往对应管理页确认副本启用或连接；当前页不将“已导入”视为可用"
       ],
       "stepsEn": [
-        "Open External Import and choose an app",
-        "Toggle automatic discovery above the sidebar search and hover for details; disabling immediately hides source-following sessions while local forks remain visible",
+        "Open Settings → Tools & integrations → External import and choose an app",
+        "Toggle automatic discovery beside the External apps heading and hover for details; disabling immediately hides source-following sessions while local forks remain visible",
         "Inspect category status, then open a category dialog to browse, search, and select content",
         "Review importable items and confirm copies; use commands, tools and subagents through existing compatibility features",
         "Confirm copy activation or connection in the relevant settings; Imported does not mean available"
@@ -4213,8 +4214,8 @@
         "I want to migrate my Claude Code configuration"
       ],
       "destination": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "operations": []
     },
diff --git a/src/web-ui/README.md b/src/web-ui/README.md
index 367edb0871..1b5a1dc0f5 100644
--- a/src/web-ui/README.md
+++ b/src/web-ui/README.md
@@ -77,11 +77,25 @@ still wait for the current turn; Detached Dispatch sessions keep appending
 messages to the target task. In Peer Device Mode, the preference belongs to the
 active host, as do the other conversation settings.
 
+## Sidebar customization
+
+Open **Settings → Appearance → Left sidebar** to pin Agents,
+assistants, MiniApps, installed/discoverable Skills, or Insights. Available pages
+use capsules; select one to pin it. Move pinned pages up/down, remove
+them, or restore the default Home + Task Board layout. Home remains available.
+The selected pinned subpage gets its own highlight instead of also highlighting Home.
+
+Changes apply immediately and persist on this controller across workspaces and
+device switches. An unsupported or temporarily missing destination keeps its
+position with an unavailable state; returning to a supported device or restoring
+the contribution makes it usable again. This layout preference does not enable
+host capabilities. Skill management/discovery currently requires the local Desktop.
+
 ## MiniApp navigation shortcuts
 
 In **MiniApps → Installed**, open an app's **More actions** menu and choose
 **Add to left navigation**. The same action is available on installed-app detail
-pages. Shortcuts appear after **Task Board**, in the order added, and open the
+pages. Shortcuts appear after the customized page entries, in the order added, and open the
 app in a tab. Each shortcut shows only the app icon and name. Its remove button
 appears on hover or keyboard focus within the same navigation row. Use that
 button or the app's navigation action to remove it without uninstalling the app.
@@ -380,7 +394,8 @@ ControlHub, while native apps and OS dialogs use ComputerUse.
 
 ## External Import status checks
 
-Open a disposable local workspace in Desktop and select an app under External Import.
+Open a disposable local workspace in Desktop and select an app under **Settings → Tools & integrations → External import**.
+The page retains application selection and import tables inside the settings layout; it no longer has a separate menu entry.
 Use test content or reversible imported copies. Category discovery coverage is independent of copy import and execution support.
 
 For Codex, Zcode, Claude Code, OpenCode, Pi, DeepSeek Harness and Cursor, enable **Automatically discover sessions** in Ecosystem
@@ -477,3 +492,34 @@ pnpm run capabilities:test
 
 Fixtures cover scan failures, legacy hosts with missing facts, and conflicts without damaging real configuration.
 Remote/Peer frontend fixtures verify presentation and import gates; actual SSH, cross-device, IM remote control and Detached Dispatch require separate environment testing.
+
+### Session trajectory
+
+The chart icon in the conversation header opens a three-lane trajectory for user
+input, model rounds and tool calls. Search, previous/next result and close controls
+share the session's top tab bar. Blank clicks clear selections while keeping the
+trajectory and search open; the close button or Escape dismisses them.
+Hover or keyboard focus previews one node while dimming the others; clicking or
+pressing Enter locates its FlowChat item and opens the reusable details panel.
+The reference line highlights the crossed node without dimming its neighbors.
+Selected nodes retain their emphasis until another selection or a blank click.
+Details use the shared PageHeader, FieldGroup, Disclosure and ScrollArea components.
+Timing appears in the header, followed by parameter and result chapters without
+inner tabs. Search reveals its matched chapter within the panel. Large output is
+disclosed incrementally, and missing timing remains unknown rather than a measured zero.
+Read-only fields align labels and values, stack on narrow panels, and give long
+values the full row width. Nested data expands within its field group.
+
+Drag across the rail, Shift-select, or adjust the range handles with the arrow
+keys to select an inclusive range. Search navigation stays within that range;
+the details panel shows counts, recorded cumulative durations and endpoint actions.
+Parallel model/tool durations are sums, not elapsed wall time.
+
+Only visible trajectory markers are mounted. History summaries are read in
+bounded pages without materializing the whole transcript; selected bodies use
+existing scoped history readers. SSH workspace requests retain the owning workspace
+identity. Peer hosts negotiate `session_trajectory_v1`; older hosts expose an explicit
+partial view of available events. Peer detail bodies remain owned by the canonical
+record replica. This observer UI adds no runtime or filesystem dependency for
+Remote Control or Detached Dispatch jobs. Automated fixtures simulate these routing
+and device-switch contracts; live remote and native visual checks remain manual.
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.projectCreation.test.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.projectCreation.test.tsx
index 08ab474d1b..5cbd7bfb11 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.projectCreation.test.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.projectCreation.test.tsx
@@ -23,6 +23,7 @@ vi.mock('react-i18next', () => ({ useTranslation: () => ({ t }) }));
 vi.mock('@/infrastructure/i18n/hooks/useI18n', () => ({ useI18n: () => ({ t }) }));
 vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t }) }));
 vi.mock('@/shared/utils/logger', () => ({ createLogger: () => ({ error: vi.fn() }) }));
+vi.mock('@/shared/notification-system', () => ({ notificationService: { error: vi.fn() } }));
 vi.mock('@/infrastructure/peer-device/pickWorkspaceDirectory', () => ({ pickWorkspaceDirectory: state.pickDirectory }));
 vi.mock('@/infrastructure/api', () => ({ globalAPI: {}, workspaceAPI: {} }));
 vi.mock('@/app/services/createProject', () => ({ createProject: state.createProject }));
@@ -72,6 +73,7 @@ vi.mock('@/features/ssh-remote', () => ({
 import MainNav from './MainNav';
 import { useWorkspaceSessionViewStore } from './workspaceSessionView';
 import { useMiniAppNavigationStore } from '@/app/scenes/miniapps/miniAppNavigationStore';
+import { sidebarPreferences } from '@/app/navigation/sidebarPreferences';
 
 describe('project creation entry points', () => {
   let root: Root;
@@ -111,6 +113,7 @@ describe('project creation entry points', () => {
     resetDeviceSurfaceForTest();
     useMiniAppNavigationStore.setState({ pinnedAppIdsBySurface: {} });
     state.activeTabId = 'personal-overview';
+    sidebarPreferences.setState({ pinnedIds: ['builtin.todos'], storageIssue: null });
     state.createProject.mockResolvedValue(true);
     state.options = {};
     for (const source of ['ssh', 'wsl', 'localDocker', 'remoteDocker']) {
@@ -148,6 +151,16 @@ describe('project creation entry points', () => {
     expect(host.querySelector('[data-testid="nav-personal-overview"]')!.getAttribute('data-openbitfun-state')).toBe('');
   });
 
+  it('highlights a pinned Home child instead of Home, and falls back after unpinning', async () => {
+    state.activeTabId = 'agents';
+    act(() => sidebarPreferences.getState().setPinned('builtin.agents', true));
+    await render();
+    expect(host.querySelector('[data-testid="nav-personal-overview"]')!.getAttribute('data-openbitfun-state')).toBe('');
+    expect(host.querySelector('[data-testid="nav-builtin.agents"]')!.getAttribute('data-openbitfun-state')).toBe('active');
+    act(() => sidebarPreferences.getState().setPinned('builtin.agents', false));
+    expect(host.querySelector('[data-testid="nav-personal-overview"]')!.getAttribute('data-openbitfun-state')).toBe('active');
+  });
+
   it.each([true, false])('reveals project groups only after successful creation (success=%s)', async succeeded => {
     useWorkspaceSessionViewStore.getState().setGrouping('all');
     state.createProject.mockResolvedValueOnce(succeeded);
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index c003366b81..8d4607b681 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -42,7 +42,8 @@ import { workspacePresetHost } from '@/features/ssh-remote/useWorkspaceSourceOpt
 import { isSshAuthenticationError, workspaceSourceErrorKey } from '@/features/ssh-remote/workspaceSourceError';
 import type { WorkspaceConnectionTarget } from '@/features/ssh-remote/types';
 import { openGlobalSearch } from '@/app/global-search/globalSearchStore';
-import { activateProductAction } from '@/app/global-search/productActionActivator';
+import { useSidebarNavigation } from '@/app/navigation/useSidebarNavigation';
+import PinnedNavigationItems from './components/PinnedNavigationItems';
 import { createProject, type ProjectDraft, type ProjectFolder } from '@/app/services/createProject';
 import { useWorkspaceSessionViewStore } from './workspaceSessionView';
 import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
@@ -76,7 +77,8 @@ const MainNav: React.FC = () => {
   const { openScene } = useSceneManager();
   const activeTabId = useSceneStore(s => s.activeTabId);
   const { pinnedAppIds } = useMiniAppNavigation();
-  const isOverviewActive = typeof activeTabId === 'string' && (
+  const sidebarNavigation = useSidebarNavigation();
+  const isOverviewActive = !sidebarNavigation.selectedId && typeof activeTabId === 'string' && (
     ['personal-overview', 'assistant', 'profile', 'agents', 'skills', 'miniapps'].includes(activeTabId)
     || (activeTabId.startsWith('miniapp:') && !pinnedAppIds.includes(activeTabId.slice('miniapp:'.length)))
   );
@@ -212,13 +214,7 @@ const MainNav: React.FC = () => {
     }
   }, [sshRemote, remoteFolderTarget, finishRemoteFolderPick]);
 
-  const handleOpenTodos = useCallback(() => {
-    void activateProductAction('surface.todos.open');
-  }, []);
-
   const addSessionGroupTooltip = t('nav.tooltips.addSessionGroup');
-  const taskBoardLabel = t('nav.items.todos');
-  const isTaskBoardActive = activeTabId === 'todos';
   return (
     <>
     <NavigationPanel
@@ -281,30 +277,7 @@ const MainNav: React.FC = () => {
             </NavigationPanelItem>
           </Tooltip>
 
-          <Tooltip content={t('nav.tooltips.todos')} placement="right" followCursor>
-            <NavigationPanelItem
-              className="openbitfun-nav-panel__top-action-item openbitfun-nav-panel__top-action-item--root"
-              triggerClassName={[
-                'openbitfun-nav-panel__top-action-btn',
-                isTaskBoardActive ? 'is-active' : '',
-              ].filter(Boolean).join(' ')}
-              data-openbitfun-component="nav-panel"
-              data-openbitfun-part="todoEntry"
-              data-openbitfun-action="todos"
-              data-openbitfun-state={isTaskBoardActive ? 'active' : ''}
-              onClick={handleOpenTodos}
-              aria-label={taskBoardLabel}
-              data-testid="nav-todos-btn"
-              leading={(
-                <span className="openbitfun-nav-panel__top-action-icon-slot">
-                  <Icon name="clock" size="sm" />
-                </span>
-              )}
-              selected={isTaskBoardActive}
-            >
-              {taskBoardLabel}
-            </NavigationPanelItem>
-          </Tooltip>
+          <PinnedNavigationItems navigation={sidebarNavigation} />
           {pinnedAppIds.length > 0 && <Suspense fallback={null}><MiniAppShortcuts /></Suspense>}
         </div>
 
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 2509557248..510cfe2903 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -1557,36 +1557,6 @@ $_section-header-height: 22px;
   }
 }
 
-.openbitfun-nav-panel__appearance-menu-trigger {
-  &.is-open {
-    background: var(--openbitfun-color-action-neutral-surface);
-  }
-}
-
-.openbitfun-nav-panel__appearance-menu-current {
-  display: block;
-  max-width: 82px;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-/* Positioning and open-state composition only; the design-system Menu owns chrome. */
-.openbitfun-nav-panel__appearance-submenu {
-  position: fixed;
-  max-width: calc(100vw - 16px);
-  max-height: calc(100vh - 16px);
-  z-index: calc(var(--openbitfun-layer-popover) + 1);
-  animation: openbitfun-nav-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
-
-  &[data-placement='right'] {
-    transform-origin: top left;
-  }
-
-  &[data-placement='left'] {
-    transform-origin: top right;
-  }
-}
-
 // ──────────────────────────────────────────────
 // Device overview — one compact model, local and connected states
 // ──────────────────────────────────────────────
@@ -2819,8 +2789,7 @@ $_section-header-height: 22px;
     color 120ms ease;
 }
 
-.openbitfun-nav-panel__footer-menu,
-.openbitfun-nav-panel__appearance-submenu {
+.openbitfun-nav-panel__footer-menu {
   animation: openbitfun-nav-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
 
   &.is-closing {
@@ -2874,7 +2843,6 @@ $_section-header-height: 22px;
 
 @media (prefers-reduced-motion: reduce) {
   .openbitfun-nav-panel__footer-menu,
-  .openbitfun-nav-panel__appearance-submenu,
   .openbitfun-device-overview {
     animation: none;
   }
diff --git a/src/web-ui/src/app/components/NavPanel/appearance.ts b/src/web-ui/src/app/components/NavPanel/appearance.ts
index d117ced1af..f81c097564 100644
--- a/src/web-ui/src/app/components/NavPanel/appearance.ts
+++ b/src/web-ui/src/app/components/NavPanel/appearance.ts
@@ -15,7 +15,6 @@ export const navPanelAppearanceDescriptor: AppearanceSurfaceDescriptor = {
     { id: 'todoEntry', propertyProfile: 'control', visualRole: 'control' },
     { id: 'topActions', visualRole: 'toolbar' },
     { id: 'topAction', propertyProfile: 'control', visualRole: 'control' },
-    { id: 'topActionUnseen', propertyProfile: 'paint', visualRole: 'decoration' },
     { id: 'section', visualRole: 'content' },
     { id: 'stickySectionHeader', visualRole: 'toolbar', continuityGroup: 'nav-panel' },
     { id: 'sectionContent', visualRole: 'content' },
diff --git a/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.test.tsx b/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.test.tsx
deleted file mode 100644
index 4f07a9f780..0000000000
--- a/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.test.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-// @vitest-environment jsdom
-
-import React, { act, useState } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-const selectAppearance = vi.hoisted(() => vi.fn());
-const notifyError = vi.hoisted(() => vi.fn());
-
-vi.mock('@/infrastructure/appearance', () => ({
-  SYSTEM_APPEARANCE_ID: 'system',
-  useAppearance: () => ({
-    appearances: [
-      {
-        id: 'openbitfun-light',
-        name: 'OpenBitFun Light',
-        version: '1.0.0',
-        mode: 'light',
-        source: 'builtin',
-      },
-      {
-        id: 'custom-ocean',
-        name: 'Ocean',
-        version: '1.0.0',
-        mode: 'dark',
-        source: 'imported',
-      },
-    ],
-    current: { id: 'openbitfun-light', name: 'OpenBitFun Light' },
-    initialized: true,
-    select: selectAppearance,
-    selectedAppearanceId: 'openbitfun-light',
-    status: 'ready',
-  }),
-}));
-
-vi.mock('@/infrastructure/i18n/hooks/useI18n', () => ({
-  useI18n: (namespace: string) => ({
-    t: (key: string, options?: { defaultValue?: string }) => {
-      const translations: Record<string, string> = namespace === 'settings/application'
-        ? {
-            'appearance.systemAppearance': 'Match system',
-            'appearance.presets.openbitfun-light.name': 'Light',
-          }
-        : {
-            'nav.settingsMenu.theme': 'Theme',
-            'nav.settingsMenu.themeConfiguration': 'Theme configuration',
-            'nav.settingsMenu.appearanceSwitchFailed': 'Could not switch the theme. Try again.',
-          };
-      return translations[key] ?? options?.defaultValue ?? key;
-    },
-  }),
-}));
-
-vi.mock('@/infrastructure/appearance/runtime/AppearanceOverlayHost', () => ({
-  getAppearanceOverlayHost: () => document.body,
-}));
-
-vi.mock('@/shared/notification-system', () => ({
-  useNotification: () => ({ error: notifyError }),
-}));
-
-import AppearanceQuickSwitchMenuItem from './AppearanceQuickSwitchMenuItem';
-
-describe('AppearanceQuickSwitchMenuItem', () => {
-  let container: HTMLDivElement;
-  let root: Root;
-  let closeParentMenu: ReturnType<typeof vi.fn>;
-  let openAppearanceSettings: ReturnType<typeof vi.fn>;
-
-  const Harness = () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AppearanceQuickSwitchMenuItem
-        open={open}
-        onOpenChange={setOpen}
-        onCloseParentMenu={closeParentMenu}
-        onOpenAppearanceSettings={openAppearanceSettings}
-      />
-    );
-  };
-
-  beforeEach(() => {
-    selectAppearance.mockReset().mockResolvedValue(undefined);
-    notifyError.mockReset();
-    closeParentMenu = vi.fn();
-    openAppearanceSettings = vi.fn();
-    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
-      callback(0);
-      return 1;
-    });
-    vi.stubGlobal('cancelAnimationFrame', vi.fn());
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-    act(() => root.render(<Harness />));
-  });
-
-  afterEach(() => {
-    act(() => root.unmount());
-    container.remove();
-    vi.unstubAllGlobals();
-  });
-
-  it('shows the current theme and opens the checked quick-switch submenu only on click', () => {
-    const trigger = container.querySelector<HTMLButtonElement>(
-      '[data-testid="nav-settings-appearance-item"]',
-    );
-    expect(trigger).not.toBeNull();
-    expect(trigger?.textContent).toContain('Theme');
-    expect(trigger?.textContent).toContain('Light');
-    expect(trigger?.getAttribute('aria-haspopup')).toBe('menu');
-
-    act(() => {
-      trigger!.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    });
-    expect(document.querySelector('[data-testid="nav-settings-appearance-menu"]')).toBeNull();
-
-    act(() => trigger!.click());
-
-    const submenu = document.querySelector('[data-testid="nav-settings-appearance-menu"]');
-    const selected = document.querySelector(
-      '[data-testid="nav-settings-appearance-option"][data-appearance-id="openbitfun-light"]',
-    );
-    expect(submenu).not.toBeNull();
-    expect(selected?.getAttribute('role')).toBe('menuitemradio');
-    expect(selected?.getAttribute('aria-checked')).toBe('true');
-    expect(submenu?.textContent).toContain('Match system');
-    expect(submenu?.textContent).toContain('Ocean');
-
-    act(() => trigger!.click());
-    expect(document.querySelector('[data-testid="nav-settings-appearance-menu"]')).toBeNull();
-  });
-
-  it('applies a selected theme immediately and closes the parent menu', async () => {
-    const trigger = container.querySelector<HTMLButtonElement>(
-      '[data-testid="nav-settings-appearance-item"]',
-    );
-    act(() => trigger!.click());
-    const ocean = document.querySelector<HTMLButtonElement>(
-      '[data-testid="nav-settings-appearance-option"][data-appearance-id="custom-ocean"]',
-    );
-
-    await act(async () => {
-      ocean!.click();
-      await Promise.resolve();
-    });
-
-    expect(selectAppearance).toHaveBeenCalledWith('custom-ocean');
-    expect(closeParentMenu).toHaveBeenCalledOnce();
-  });
-
-  it('keeps full theme configuration available from the submenu', () => {
-    const trigger = container.querySelector<HTMLButtonElement>(
-      '[data-testid="nav-settings-appearance-item"]',
-    );
-    act(() => trigger!.click());
-    const configure = document.querySelector<HTMLButtonElement>(
-      '[data-testid="nav-settings-appearance-settings"]',
-    );
-    act(() => configure!.click());
-
-    expect(openAppearanceSettings).toHaveBeenCalledOnce();
-  });
-});
diff --git a/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.tsx b/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.tsx
deleted file mode 100644
index 969e7244e3..0000000000
--- a/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type RefObject,
-} from 'react';
-import { createOverlayPortal, OverflowText, Icon, Menu, MenuItem, MenuSeparator } from '@openbitfun/ui';
-
-import {
-  SYSTEM_APPEARANCE_ID,
-  useAppearance,
-  type AppearanceCatalogEntry,
-  type AppearanceSelectionId,
-} from '@/infrastructure/appearance';
-import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
-import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
-import { useNotification } from '@/shared/notification-system';
-
-interface AppearanceQuickSwitchMenuItemProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onCloseParentMenu: () => void;
-  onOpenAppearanceSettings: () => void;
-}
-
-interface SubmenuLayout {
-  left: number;
-  placement: 'left' | 'right';
-  top: number;
-}
-
-const SUBMENU_GAP = 5;
-const SUBMENU_FALLBACK_WIDTH = 228;
-const SUBMENU_FALLBACK_HEIGHT = 360;
-const VIEWPORT_PADDING = 8;
-
-const clamp = (value: number, min: number, max: number): number => (
-  Math.min(Math.max(value, min), Math.max(min, max))
-);
-
-function useSubmenuLayout(
-  open: boolean,
-  anchorRef: RefObject<HTMLButtonElement | null>,
-  submenuRef: RefObject<HTMLDivElement | null>,
-  layoutRevision: unknown,
-): SubmenuLayout | null {
-  const [layout, setLayout] = useState<SubmenuLayout | null>(null);
-
-  const updateLayout = useCallback(() => {
-    const anchor = anchorRef.current;
-    const submenu = submenuRef.current;
-    if (!anchor || !submenu) return;
-
-    const anchorRect = anchor.getBoundingClientRect();
-    const submenuRect = submenu.getBoundingClientRect();
-    const submenuWidth = submenuRect.width
-      || submenu.offsetWidth
-      || submenu.scrollWidth
-      || SUBMENU_FALLBACK_WIDTH;
-    const submenuHeight = submenuRect.height
-      || submenu.offsetHeight
-      || submenu.scrollHeight
-      || SUBMENU_FALLBACK_HEIGHT;
-    const preferredLeft = anchorRect.right + SUBMENU_GAP;
-    const opensRight = preferredLeft + submenuWidth <= window.innerWidth - VIEWPORT_PADDING;
-    const nextLayout: SubmenuLayout = {
-      left: clamp(
-        opensRight ? preferredLeft : anchorRect.left - SUBMENU_GAP - submenuWidth,
-        VIEWPORT_PADDING,
-        window.innerWidth - submenuWidth - VIEWPORT_PADDING,
-      ),
-      placement: opensRight ? 'right' : 'left',
-      top: clamp(
-        anchorRect.top - 4,
-        VIEWPORT_PADDING,
-        window.innerHeight - submenuHeight - VIEWPORT_PADDING,
-      ),
-    };
-
-    setLayout(current => current?.left === nextLayout.left
-      && current.top === nextLayout.top
-      && current.placement === nextLayout.placement
-      ? current
-      : nextLayout);
-  }, [anchorRef, submenuRef]);
-
-  useLayoutEffect(() => {
-    if (!open) {
-      setLayout(null);
-      return;
-    }
-
-    updateLayout();
-    window.addEventListener('resize', updateLayout);
-    window.addEventListener('scroll', updateLayout, true);
-    const resizeObserver = typeof ResizeObserver === 'undefined'
-      ? null
-      : new ResizeObserver(updateLayout);
-    if (anchorRef.current) resizeObserver?.observe(anchorRef.current);
-    if (submenuRef.current) resizeObserver?.observe(submenuRef.current);
-
-    return () => {
-      window.removeEventListener('resize', updateLayout);
-      window.removeEventListener('scroll', updateLayout, true);
-      resizeObserver?.disconnect();
-    };
-  }, [anchorRef, open, submenuRef, updateLayout]);
-
-  useLayoutEffect(() => {
-    if (open) updateLayout();
-  }, [layoutRevision, open, updateLayout]);
-
-  return layout;
-}
-
-const AppearanceQuickSwitchMenuItem: React.FC<AppearanceQuickSwitchMenuItemProps> = ({
-  open,
-  onOpenChange,
-  onCloseParentMenu,
-  onOpenAppearanceSettings,
-}) => {
-  const { t } = useI18n('common');
-  const { t: tApplication } = useI18n('settings/application');
-  const { error: notifyError } = useNotification();
-  const {
-    appearances,
-    current,
-    initialized,
-    select,
-    selectedAppearanceId,
-    status,
-  } = useAppearance();
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const submenuRef = useRef<HTMLDivElement>(null);
-  const focusSubmenuOnOpenRef = useRef(false);
-
-  const getAppearanceDisplayName = useCallback((appearance: AppearanceCatalogEntry) => {
-    if (appearance.source !== 'builtin') return appearance.name;
-    const presetId = appearance.id.replace(/^builtin\./, '');
-    return tApplication(`appearance.presets.${presetId}.name`, {
-      defaultValue: appearance.name,
-    });
-  }, [tApplication]);
-
-  const selectedDisplayName = useMemo(() => {
-    if (selectedAppearanceId === SYSTEM_APPEARANCE_ID) {
-      return tApplication('appearance.systemAppearance');
-    }
-    const selected = appearances.find(appearance => appearance.id === selectedAppearanceId);
-    if (selected) return getAppearanceDisplayName(selected);
-    return current?.name ?? t('nav.settingsMenu.theme');
-  }, [appearances, current?.name, getAppearanceDisplayName, selectedAppearanceId, t, tApplication]);
-
-  const submenuLayout = useSubmenuLayout(
-    open,
-    triggerRef,
-    submenuRef,
-    `${appearances.length}:${selectedAppearanceId}`,
-  );
-
-  const focusFirstSubmenuItem = useCallback(() => {
-    const firstItem = submenuRef.current?.querySelector<HTMLButtonElement>(
-      '[data-openbitfun-menu-item]:not(:disabled)',
-    );
-    firstItem?.focus();
-  }, []);
-
-  useEffect(() => {
-    if (!open || !focusSubmenuOnOpenRef.current) return;
-    focusSubmenuOnOpenRef.current = false;
-    const frame = window.requestAnimationFrame(focusFirstSubmenuItem);
-    return () => window.cancelAnimationFrame(frame);
-  }, [focusFirstSubmenuItem, open]);
-
-  const openFromKeyboard = useCallback(() => {
-    focusSubmenuOnOpenRef.current = true;
-    if (open) {
-      window.requestAnimationFrame(focusFirstSubmenuItem);
-    } else {
-      onOpenChange(true);
-    }
-  }, [focusFirstSubmenuItem, onOpenChange, open]);
-
-  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      event.stopPropagation();
-      openFromKeyboard();
-    }
-  };
-
-  const handleSubmenuKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key !== 'ArrowLeft' && event.key !== 'Escape') return;
-    event.preventDefault();
-    event.stopPropagation();
-    onOpenChange(false);
-    triggerRef.current?.focus();
-  };
-
-  const handleSelect = useCallback(async (id: AppearanceSelectionId) => {
-    try {
-      await select(id);
-      onCloseParentMenu();
-    } catch {
-      notifyError(t('nav.settingsMenu.appearanceSwitchFailed'), { duration: 4000 });
-    }
-  }, [notifyError, onCloseParentMenu, select, t]);
-
-  const selectionDisabled = !initialized || status === 'applying';
-
-  return (
-    <>
-      <MenuItem data-overflow-trigger
-        ref={triggerRef}
-        className={`openbitfun-nav-panel__appearance-menu-trigger${open ? ' is-open' : ''}`}
-        leading={<Icon name="palette" size="sm" aria-hidden="true" />}
-        metadata={(
-          <OverflowText className="openbitfun-nav-panel__appearance-menu-current" title={selectedDisplayName}>
-            {selectedDisplayName}
-          </OverflowText>
-        )}
-        shortcut={<Icon name="chevron-right" size="sm" aria-hidden="true" />}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        onClick={() => onOpenChange(!open)}
-        onKeyDown={handleTriggerKeyDown}
-        data-testid="nav-settings-appearance-item"
-      >
-        {t('nav.settingsMenu.theme')}
-      </MenuItem>
-
-      {open && createOverlayPortal(
-        <Menu
-          ref={submenuRef}
-          className="openbitfun-nav-panel__appearance-submenu"
-          inlineSize="content"
-          aria-label={t('nav.settingsMenu.theme')}
-          data-placement={submenuLayout?.placement}
-          data-testid="nav-settings-appearance-menu"
-          onKeyDown={handleSubmenuKeyDown}
-          style={{
-            left: `${submenuLayout?.left ?? 0}px`,
-            top: `${submenuLayout?.top ?? 0}px`,
-            visibility: submenuLayout ? 'visible' : 'hidden',
-          }}
-        >
-          <MenuItem
-            checked={selectedAppearanceId === SYSTEM_APPEARANCE_ID}
-            disabled={selectionDisabled}
-            leading={selectedAppearanceId === SYSTEM_APPEARANCE_ID
-              ? <Icon name="check-line" size="sm" aria-hidden="true" />
-              : undefined}
-            reserveLeadingSpace
-            role="menuitemradio"
-            onClick={() => void handleSelect(SYSTEM_APPEARANCE_ID)}
-            data-appearance-id={SYSTEM_APPEARANCE_ID}
-            data-testid="nav-settings-appearance-option"
-          >
-            {tApplication('appearance.systemAppearance')}
-          </MenuItem>
-          <MenuSeparator />
-          {appearances.map(appearance => {
-            const selected = appearance.id === selectedAppearanceId;
-            return (
-              <MenuItem
-                key={appearance.id}
-                checked={selected}
-                disabled={selectionDisabled}
-                leading={selected
-                  ? <Icon name="check-line" size="sm" aria-hidden="true" />
-                  : undefined}
-                reserveLeadingSpace
-                role="menuitemradio"
-                onClick={() => void handleSelect(appearance.id)}
-                data-appearance-id={appearance.id}
-                data-testid="nav-settings-appearance-option"
-              >
-                {getAppearanceDisplayName(appearance)}
-              </MenuItem>
-            );
-          })}
-          <MenuSeparator />
-          <MenuItem
-            leading={<Icon name="gear" size="sm" aria-hidden="true" />}
-            onClick={onOpenAppearanceSettings}
-            data-testid="nav-settings-appearance-settings"
-          >
-            {t('nav.settingsMenu.themeConfiguration')}
-          </MenuItem>
-        </Menu>,
-        getAppearanceOverlayHost(),
-      )}
-    </>
-  );
-};
-
-export default AppearanceQuickSwitchMenuItem;
diff --git a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
index 7c35f3c5c5..e7c20fd3a8 100644
--- a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
@@ -1,13 +1,11 @@
 import { lazyWithRecovery } from '@/shared/utils/lazyWithRecovery';
 import React, { Suspense, useState, useCallback, useEffect, useRef } from 'react';
-import { Cable } from 'lucide-react';
 
 import { createOverlayPortal,
   Icon,
   IconButton,
   Menu,
   MenuItem,
-  MenuSection,
   MenuSeparator,
   Tooltip,
   Dialog,
@@ -19,8 +17,6 @@ import { createOverlayPortal,
 import { RetainedMountBoundary } from '@/shared/presence';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { activateProductAction } from '@/app/global-search/productActionActivator';
-import { useSceneStore } from '@/app/stores/sceneStore';
-import { useExternalAppAwareness } from '@/infrastructure/config/components/external-sources/useExternalAppAwareness';
 import { useToolbarModeContext } from '@/flow_chat/components/toolbar-mode/ToolbarModeContext';
 import { remoteConnectAPI } from '@/infrastructure/api/service-api/RemoteConnectAPI';
 import NotificationButton from '../../TitleBar/NotificationButton';
@@ -31,10 +27,8 @@ import {
 } from '../../RemoteConnectDialog/remoteConnectDisclaimerStorage';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition';
-import { useSettingsStore } from '@/app/scenes/settings/settingsStore';
 import { PeerConnectionStatus } from '@/infrastructure/peer-device/PeerConnectionStatus';
 import DeviceStatusControl from './DeviceStatusControl';
-import AppearanceQuickSwitchMenuItem from './AppearanceQuickSwitchMenuItem';
 import { UpdateIndicator } from '@/infrastructure/update/UpdateIndicator';
 import { useHasAppUpdate } from '@/infrastructure/update/useHasAppUpdate';
 import { UpdateDownloadIndicator } from '@/infrastructure/update/UpdateDownloadIndicator';
@@ -50,16 +44,10 @@ const RemoteConnectDialog = lazyWithRecovery(() => import('../../RemoteConnectDi
 
 const PersistentFooterActions: React.FC = () => {
   const { t } = useI18n('common');
-  const isEcosystemCompatibilityActive = useSceneStore(state => state.activeTabId === 'ecosystem-compatibility');
-  const hasUnseenEcosystemCompatibility = useExternalAppAwareness(isEcosystemCompatibilityActive);
-  const ecosystemCompatibilityTooltip = hasUnseenEcosystemCompatibility
-    ? t('nav.tooltips.ecosystemCompatibilityUnseen')
-    : t('nav.tooltips.ecosystemCompatibility');
   const { enableToolbarMode } = useToolbarModeContext();
   const accountIdentity = useAccountIdentity();
   const [menuOpen, setMenuOpen] = useState(false);
   const [menuClosing, setMenuClosing] = useState(false);
-  const [appearanceSubmenuOpen, setAppearanceSubmenuOpen] = useState(false);
   const [deviceOverviewOpen, setDeviceOverviewOpen] = useState(false);
   const menuTriggerRef = useRef<HTMLButtonElement>(null);
   const menuPopoverRef = useRef<HTMLDivElement>(null);
@@ -96,7 +84,6 @@ const PersistentFooterActions: React.FC = () => {
   }, []);
 
   const closeMenu = useCallback(() => {
-    setAppearanceSubmenuOpen(false);
     setMenuClosing(true);
     setTimeout(() => {
       setMenuOpen(false);
@@ -109,7 +96,6 @@ const PersistentFooterActions: React.FC = () => {
       closeMenu();
     } else {
       setDeviceOverviewOpen(false);
-      setAppearanceSubmenuOpen(false);
       setMenuOpen(true);
     }
   };
@@ -126,17 +112,6 @@ const PersistentFooterActions: React.FC = () => {
     void activateProductAction('settings.open');
   }, [closeMenu]);
 
-  const handleOpenEcosystemCompatibility = useCallback(() => {
-    closeMenu();
-    void activateProductAction('surface.ecosystemCompatibility.open');
-  }, [closeMenu]);
-
-  const handleOpenAppearanceSettings = useCallback(() => {
-    closeMenu();
-    useSettingsStore.getState().openPage('application.appearance');
-    void activateProductAction('settings.open');
-  }, [closeMenu]);
-
   const handleShowAbout = () => {
     closeMenu();
     window.dispatchEvent(new Event('nav:show-about'));
@@ -250,12 +225,8 @@ const PersistentFooterActions: React.FC = () => {
                   onKeyDown={(event) => {
                     if (event.key !== 'Escape') return;
                     event.preventDefault();
-                    if (appearanceSubmenuOpen) {
-                      setAppearanceSubmenuOpen(false);
-                    } else {
-                      closeMenu();
-                      menuTriggerRef.current?.focus();
-                    }
+                    closeMenu();
+                    menuTriggerRef.current?.focus();
                   }}
                   style={{
                     top: `${menuLayout?.top ?? 0}px`,
@@ -271,33 +242,6 @@ const PersistentFooterActions: React.FC = () => {
                     {t('nav.settingsMenu.floatingWindow')}
                   </MenuItem>
                   <NotificationButton menuItem onActivate={closeMenu} />
-                  <AppearanceQuickSwitchMenuItem
-                    open={appearanceSubmenuOpen}
-                    onOpenChange={setAppearanceSubmenuOpen}
-                    onCloseParentMenu={closeMenu}
-                    onOpenAppearanceSettings={handleOpenAppearanceSettings}
-                  />
-                  <MenuSeparator />
-                  <MenuSection aria-label={t('nav.items.ecosystemCompatibility')}>
-                    <Tooltip content={ecosystemCompatibilityTooltip} placement="right">
-                      <MenuItem
-                        leading={<Icon glyph={Cable} size="sm" aria-hidden="true" />}
-                        onClick={handleOpenEcosystemCompatibility}
-                        aria-current={isEcosystemCompatibilityActive ? 'page' : undefined}
-                        data-testid="ecosystem-compatibility-tab"
-                        metadata={hasUnseenEcosystemCompatibility ? (
-                          <span
-                            className="openbitfun-nav-panel__top-action-unseen"
-                            data-openbitfun-component="nav-panel"
-                            data-openbitfun-part="topActionUnseen"
-                            aria-hidden="true"
-                          />
-                        ) : null}
-                      >
-                        {t('nav.items.ecosystemCompatibility')}
-                      </MenuItem>
-                    </Tooltip>
-                  </MenuSection>
                   <MenuSeparator />
                   <UpdateMenuItems onCloseMenu={closeMenu} />
                   <MenuItem
@@ -307,6 +251,7 @@ const PersistentFooterActions: React.FC = () => {
                   >
                     {t('nav.settingsMenu.feedback')}
                   </MenuItem>
+                  <MenuSeparator />
                   <MenuItem
                     leading={<Icon name="gear" size="sm" aria-hidden="true" />}
                     onClick={handleOpenSettings}
diff --git a/src/web-ui/src/app/components/NavPanel/components/PinnedNavigationItems.tsx b/src/web-ui/src/app/components/NavPanel/components/PinnedNavigationItems.tsx
new file mode 100644
index 0000000000..7399e23e1c
--- /dev/null
+++ b/src/web-ui/src/app/components/NavPanel/components/PinnedNavigationItems.tsx
@@ -0,0 +1,45 @@
+import { Icon, NavigationPanelItem, Tooltip } from '@openbitfun/ui';
+import { useI18n } from '@/infrastructure/i18n';
+import type { useSidebarNavigation } from '@/app/navigation/useSidebarNavigation';
+import { notificationService } from '@/shared/notification-system';
+import { createLogger } from '@/shared/utils/logger';
+
+const log = createLogger('PinnedNavigationItems');
+
+export default function PinnedNavigationItems({ navigation }: { navigation: ReturnType<typeof useSidebarNavigation> }) {
+  const { t } = useI18n('common');
+  const { entries, pinnedIds, selectedId, context, scope } = navigation;
+  return <>{pinnedIds.map(id => {
+    const entry = entries.find(candidate => candidate.id === id);
+    const label = entry ? t(entry.labelKey) : t('nav.customization.unavailableEntry', { id });
+    const reason = entry?.unavailableReason?.(context);
+    const selected = selectedId === id;
+    const unavailable = !entry || Boolean(reason);
+    const itemProps = {
+      className: 'openbitfun-nav-panel__top-action-item openbitfun-nav-panel__top-action-item--root',
+      triggerClassName: `openbitfun-nav-panel__top-action-btn${selected ? ' is-active' : ''}`,
+      'data-openbitfun-state': selected ? 'active' : '',
+      'aria-label': label,
+      selected,
+      disabled: unavailable,
+      onClick: () => {
+        if (!entry || unavailable || !scope.isCurrent()) return;
+        void Promise.resolve().then(() => {
+          if (scope.isCurrent()) return entry.open(scope);
+        }).catch(error => {
+          if (!scope.isCurrent()) return;
+          log.error('Failed to open sidebar destination', { id, error });
+          notificationService.error(t('nav.customization.openFailed', { name: label }));
+        });
+      },
+      leading: <span className="openbitfun-nav-panel__top-action-icon-slot"><Icon name={entry?.icon ?? 'pin'} size="sm" /></span>,
+    };
+    return <Tooltip key={id} content={reason ? t(reason) : label} placement="right" followCursor>
+      {id === 'builtin.todos'
+        ? <NavigationPanelItem {...itemProps} data-openbitfun-component="nav-panel" data-openbitfun-part="todoEntry"
+            data-openbitfun-action="todos" data-testid="nav-todos-btn">{label}</NavigationPanelItem>
+        : <NavigationPanelItem {...itemProps} data-openbitfun-component="nav-panel" data-openbitfun-part="topAction"
+            data-openbitfun-action={id} data-testid={`nav-${id}`}>{label}</NavigationPanelItem>}
+    </Tooltip>;
+  })}</>;
+}
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 381938cd58..c06fc63369 100644
--- a/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts
@@ -3,22 +3,6 @@ import { fileURLToPath } from 'node:url';
 import { describe, expect, it } from 'vitest';
 
 describe('navigation icon integration', () => {
-  it('uses the standard cable icon in the ecosystem menu entry', () => {
-    const source = readFileSync(
-      fileURLToPath(new URL('./components/PersistentFooterActions.tsx', import.meta.url)),
-      'utf8',
-    );
-    const entryStart = source.lastIndexOf('<MenuItem', source.indexOf('data-testid="ecosystem-compatibility-tab"'));
-    const entryEnd = source.indexOf('</MenuItem>', entryStart);
-    const entryMarkup = source.slice(entryStart, entryEnd);
-
-    expect(entryStart).toBeGreaterThanOrEqual(0);
-    expect(entryEnd).toBeGreaterThan(entryStart);
-    expect(entryMarkup).toContain('glyph={Cable}');
-    expect(entryMarkup).not.toContain('chevron-down');
-    expect(entryMarkup).toContain('size="sm"');
-  });
-
   it('uses each MiniApp icon and the standard Skill discovery icon in the overview', () => {
     const source = readFileSync(
       fileURLToPath(new URL('../../scenes/personal-overview/PersonalOverviewScene.tsx', import.meta.url)),
@@ -41,16 +25,10 @@ describe('navigation icon integration', () => {
 
   it('uses the reference clock icon for Task Board', () => {
     const source = readFileSync(
-      fileURLToPath(new URL('./MainNav.tsx', import.meta.url)),
+      fileURLToPath(new URL('../../navigation/sidebarContributions.ts', import.meta.url)),
       'utf8',
     );
-    const entryStart = source.indexOf('data-testid="nav-todos-btn"');
-    const entryEnd = source.indexOf('</NavigationPanelItem>', entryStart);
-    const entryMarkup = source.slice(entryStart, entryEnd);
-
-    expect(entryStart).toBeGreaterThanOrEqual(0);
-    expect(entryEnd).toBeGreaterThan(entryStart);
-    expect(entryMarkup).toContain('<Icon name="clock" size="sm" />');
+    expect(source).toContain("productPage('builtin.todos', 'common:nav.items.todos', 'clock'");
     expect(source).not.toContain('CalendarClock');
   });
 
diff --git a/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts b/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
index e2d2ce90f4..d590705a97 100644
--- a/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
@@ -89,10 +89,12 @@ describe('unified project session creation', () => {
 
     expect(mainNav).not.toContain('data-testid="nav-smart-members-btn"');
     expect(mainNav).not.toContain('data-testid="nav-long-term-tracking-btn"');
-    expect(mainNav).toContain('data-testid="nav-todos-btn"');
+    const pinnedNav = source('./components/PinnedNavigationItems.tsx');
+    expect(mainNav).toContain('<PinnedNavigationItems');
+    expect(pinnedNav).toContain('data-testid="nav-todos-btn"');
     expect(footerActions).not.toContain('data-testid="nav-todos-btn"');
-    expect(mainNav).toContain('data-openbitfun-part="todoEntry"');
-    expect(mainNav).toContain("activateProductAction('surface.todos.open')");
+    expect(pinnedNav).toContain('data-openbitfun-part="todoEntry"');
+    expect(source('../../navigation/sidebarContributions.ts')).toContain("'todos', 'surface.todos.open'");
     expect(mainNav).not.toContain("new Set(['sessions'])");
     expect(mainNav).toContain('label={t(\'nav.items.sessions\')}');
     const sessionLists = mainNav.match(/<WorkspaceListSection\b[^>]*\/>/g) ?? [];
@@ -106,11 +108,11 @@ describe('unified project session creation', () => {
     expect(projection).toContain("WorkspaceBackedSessionGroupKind = 'assistant' | 'project'");
   });
 
-  it('keeps Personal Overview and Task Board as direct entries and External Import in More', () => {
+  it('keeps Home before customizable pins and retains External Import in More', () => {
     const mainNav = source('./MainNav.tsx');
     const footerActions = source('./components/PersistentFooterActions.tsx');
     const overviewIndex = mainNav.indexOf('data-testid="nav-personal-overview"');
-    const taskBoardIndex = mainNav.indexOf('data-testid="nav-todos-btn"');
+    const taskBoardIndex = mainNav.indexOf('<PinnedNavigationItems');
     const sessionsIndex = mainNav.indexOf('data-openbitfun-section="sessions"');
 
     expect(overviewIndex).toBeGreaterThanOrEqual(0);
@@ -121,22 +123,19 @@ describe('unified project session creation', () => {
     expect(mainNav).not.toContain('<MiniAppEntry');
     expect(mainNav).not.toContain('data-testid="skill-tab"');
     expect(mainNav).not.toContain('data-testid="agent-skill-entry"');
-    expect(mainNav).toContain("t('nav.items.todos')");
+    expect(source('../../navigation/sidebarPreferences.ts')).toContain("DEFAULT_SIDEBAR_PINS = ['builtin.todos']");
     expect(mainNav).not.toContain('data-testid="nav-bottom-bar"');
     expect(mainNav).not.toContain('className="openbitfun-nav-panel__top-action-expand"');
     expect(mainNav).not.toContain('data-testid="ecosystem-compatibility-tab"');
-    expect(footerActions).toContain('data-testid="ecosystem-compatibility-tab"');
-    expect(footerActions).toContain("activateProductAction('surface.ecosystemCompatibility.open')");
+    expect(footerActions).not.toContain('data-testid="ecosystem-compatibility-tab"');
+    expect(footerActions).not.toContain("activateProductAction('surface.ecosystemCompatibility.open')");
     expect(footerActions).not.toContain("activateProductAction('settings.external-sources.open')");
   });
 
   it('keeps the settings gear and places update checks before Settings in its utility menu, independently of About', () => {
     const footerActions = source('./components/PersistentFooterActions.tsx');
-    const appearanceQuickSwitch = source('./components/AppearanceQuickSwitchMenuItem.tsx');
     const floatingIndex = footerActions.indexOf('data-testid="nav-settings-floating-item"');
     const notificationIndex = footerActions.indexOf('<NotificationButton menuItem');
-    const appearanceIndex = footerActions.indexOf('<AppearanceQuickSwitchMenuItem');
-    const ecosystemIndex = footerActions.indexOf('data-testid="ecosystem-compatibility-tab"');
     const updateIndex = footerActions.indexOf('<UpdateMenuItems');
     const openSettingsIndex = footerActions.indexOf('data-testid="nav-settings-open-item"');
     const aboutIndex = footerActions.indexOf('data-testid="nav-settings-about-item"');
@@ -150,23 +149,12 @@ describe('unified project session creation', () => {
     expect(footerActions).toContain('data-testid="nav-settings-menu"');
     expect(floatingIndex).toBeGreaterThan(-1);
     expect(notificationIndex).toBeGreaterThan(floatingIndex);
-    expect(appearanceIndex).toBeGreaterThan(notificationIndex);
-    expect(ecosystemIndex).toBeGreaterThan(appearanceIndex);
-    expect(updateIndex).toBeGreaterThan(ecosystemIndex);
-    expect(footerActions).toMatch(/<MenuSeparator \/>\s*<MenuSection aria-label=\{t\('nav.items.ecosystemCompatibility'\)\}>[\s\S]*?<\/MenuSection>\s*<MenuSeparator \/>\s*<UpdateMenuItems/);
+    expect(updateIndex).toBeGreaterThan(notificationIndex);
     expect(openSettingsIndex).toBeGreaterThan(updateIndex);
     expect(aboutIndex).toBeGreaterThan(openSettingsIndex);
     expect(footerActions.slice(footerActions.indexOf('onClick={handleShowAbout}'), aboutIndex)).not.toContain('UpdateIndicator');
-    expect(footerActions).toContain("useSettingsStore.getState().openPage('application.appearance')");
     expect(footerActions).not.toContain('GithubStarButton');
     expect(footerActions).not.toContain('nav-footer-github-star-btn');
-    expect(appearanceQuickSwitch).toContain('data-testid="nav-settings-appearance-item"');
-    expect(appearanceQuickSwitch).toContain('data-testid="nav-settings-appearance-menu"');
-    expect(appearanceQuickSwitch).toMatch(
-      /leading=\{<Icon name="gear" size="sm" aria-hidden="true" \/>\}[\s\S]*?data-testid="nav-settings-appearance-settings"/,
-    );
-    expect(appearanceQuickSwitch).toContain('role="menuitemradio"');
-    expect(appearanceQuickSwitch).toContain('selectedDisplayName');
     expect(footerActions).not.toContain('onMouseMove=');
     expect(footerActions).not.toContain('onFocusCapture=');
     expect(footerActions).not.toContain('data-testid="nav-footer-more-btn"');
diff --git a/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx b/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
index b564e3b187..073fa72b55 100644
--- a/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
+++ b/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
@@ -142,6 +142,9 @@ const ThinkingDetailPanel = lazyWithRecovery(() =>
   }))
 );
 
+const TrajectoryRangeDetails = lazyWithRecovery(() => import('@/flow_chat/trajectory/TrajectoryDetails').then(module => ({ default: module.TrajectoryRangeDetails })));
+const TrajectoryDetails = lazyWithRecovery(() => import('@/flow_chat/trajectory/TrajectoryDetails').then(module => ({ default: module.TrajectoryDetails })));
+
 const SessionUsagePanel = lazyWithRecovery(() =>
   import('@/flow_chat/components/usage/SessionUsagePanel').then(module => ({
     default: module.SessionUsagePanel
@@ -890,6 +893,9 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
       case 'tool-definitions':
         return renderLazyEditor(<ToolDefinitionsPreview content={typeof content.data?.content === 'string' ? content.data.content : ''} />);
 
+      case 'session-trajectory':
+        return renderLazyEditor(content.data?.range ? <TrajectoryRangeDetails {...content.data} /> : <TrajectoryDetails {...content.data} />);
+
       case 'session-usage':
         return (
           <React.Suspense fallback={<div className="openbitfun-flexible-panel__loading" data-openbitfun-component="flexible-panel" data-openbitfun-part="loading" data-openbitfun-state="loading">{t('flexiblePanel.loading.taskDetail')}</div>}>
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 04c962f594..57d7e7e7f3 100644
--- a/src/web-ui/src/app/components/panels/base/utils.ts
+++ b/src/web-ui/src/app/components/panels/base/utils.ts
@@ -219,6 +219,7 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
     supportsDownload: false,
     showHeader: false
   },
+  'session-trajectory': { type: 'session-trajectory', displayName: 'Session Trajectory', icon: { glyph: Activity }, supportsCopy: false, supportsDownload: false, showHeader: false },
   'session-usage': {
     type: 'session-usage',
     displayName: 'Context Usage Report',
diff --git a/src/web-ui/src/app/global-search/generated/interactive-capabilities.json b/src/web-ui/src/app/global-search/generated/interactive-capabilities.json
index 4c33f27459..ce4e55a988 100644
--- a/src/web-ui/src/app/global-search/generated/interactive-capabilities.json
+++ b/src/web-ui/src/app/global-search/generated/interactive-capabilities.json
@@ -4,7 +4,7 @@
   "title": "OpenBitFun Playbook",
   "origin": "https://playbook.openbitfun.com",
   "source": "src/shared/interactive-capabilities/catalog.json",
-  "digest": "9ec82305067852766c79ed3d802c3a16f1c4dd992f7d3195f91a2989da32f544",
+  "digest": "cda0c1805851b3488a613c44f6848376dd9093cf08325257d88cd9ab16d85fae",
   "ownerDigest": "f27c231da2e536e4f2123910f34f862b55d21feb0528bc915d4d13edbd528af9",
   "searchAcceptance": [
     {
@@ -172,8 +172,8 @@
     }
   ],
   "counts": {
-    "features": 23,
-    "settings": 21,
+    "features": 22,
+    "settings": 22,
     "userFacing": 44,
     "documentedItems": 336,
     "controlCoverage": {
@@ -8046,8 +8046,8 @@
         "kind": "static"
       },
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8092,8 +8092,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8138,8 +8138,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8184,8 +8184,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8230,8 +8230,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8276,8 +8276,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8322,8 +8322,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8368,8 +8368,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8414,8 +8414,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8460,8 +8460,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8506,8 +8506,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -8552,8 +8552,8 @@
       },
       "openReason": "unstructuredInteraction",
       "presentationTarget": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       }
     },
     {
@@ -24420,7 +24420,7 @@
     },
     {
       "id": "feature.ecosystem-compatibility",
-      "kind": "feature",
+      "kind": "setting",
       "categoryId": "automation",
       "titleZh": "外部导入",
       "titleEn": "External Import",
@@ -24591,15 +24591,15 @@
         }
       ],
       "stepsZh": [
-        "打开“外部导入”并选择应用",
-        "在左侧导航搜索框上方切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留",
+        "打开“设置 → 工具与集成 → 外部导入”并选择应用",
+        "在外部应用标题旁切换自动发现，悬停查看说明；关闭后立即隐藏对应来源的跟随会话，已分叉副本继续保留",
         "查看分类状态，打开分类弹窗浏览、搜索并选择内容",
         "审阅可导入项目并确认创建副本；Command、Tool、子智能体按已有兼容功能使用",
         "前往对应管理页确认副本启用或连接；当前页不将“已导入”视为可用"
       ],
       "stepsEn": [
-        "Open External Import and choose an app",
-        "Toggle automatic discovery above the sidebar search and hover for details; disabling immediately hides source-following sessions while local forks remain visible",
+        "Open Settings → Tools & integrations → External import and choose an app",
+        "Toggle automatic discovery beside the External apps heading and hover for details; disabling immediately hides source-following sessions while local forks remain visible",
         "Inspect category status, then open a category dialog to browse, search, and select content",
         "Review importable items and confirm copies; use commands, tools and subagents through existing compatibility features",
         "Confirm copy activation or connection in the relevant settings; Imported does not mean available"
@@ -24613,8 +24613,8 @@
         "I want to migrate my Claude Code configuration"
       ],
       "destination": {
-        "kind": "action",
-        "actionId": "surface.ecosystemCompatibility.open"
+        "kind": "settings",
+        "pageId": "tools.external-import"
       },
       "operations": [],
       "options": [],
diff --git a/src/web-ui/src/app/global-search/interactiveCapabilityActivator.test.ts b/src/web-ui/src/app/global-search/interactiveCapabilityActivator.test.ts
index aa1f4bfa77..da32dddc36 100644
--- a/src/web-ui/src/app/global-search/interactiveCapabilityActivator.test.ts
+++ b/src/web-ui/src/app/global-search/interactiveCapabilityActivator.test.ts
@@ -87,6 +87,12 @@ describe('activateInteractiveCapability', () => {
     expect(mocks.openDestination).toHaveBeenCalledWith({ kind: 'settings', pageId: 'ai.models' });
   });
 
+  it('opens external import in Settings using its stable capability ID', async () => {
+    await activateInteractiveCapability('feature.ecosystem-compatibility');
+    expect(mocks.openDestination).toHaveBeenCalledWith({ kind: 'settings', pageId: 'tools.external-import' });
+    expect(mocks.openScene).toHaveBeenCalledWith('settings');
+  });
+
   it('rejects Git panel requests, including documented items, without opening a scene', async () => {
     for (const itemId of [undefined, 'commit', 'status-diff']) {
       await expect(activateInteractiveCapability('feature.git', { itemId }))
diff --git a/src/web-ui/src/app/navigation/sidebarContributions.ts b/src/web-ui/src/app/navigation/sidebarContributions.ts
new file mode 100644
index 0000000000..a266ddef3e
--- /dev/null
+++ b/src/web-ui/src/app/navigation/sidebarContributions.ts
@@ -0,0 +1,74 @@
+import { createSidebarRegistry, type SidebarContribution, type SidebarContext } from './sidebarRegistry';
+import type { ProductActionId } from '@/app/global-search/productActionCatalog';
+import type { SceneTabId } from '@/app/components/SceneBar/types';
+
+const localDesktopOnly = (context: SidebarContext) => context.isDesktop && !context.isPeer
+  ? null : 'common:nav.customization.localDesktopOnly' as const;
+
+function productPage(
+  id: string, labelKey: SidebarContribution['labelKey'], icon: SidebarContribution['icon'],
+  sceneId: SceneTabId, actionId: ProductActionId,
+): SidebarContribution {
+  return {
+    id, labelKey, icon,
+    isActive: context => context.activeSceneId === sceneId,
+    open: async scope => {
+      const { activateProductAction } = await import('@/app/global-search/productActionActivator');
+      if (scope.isCurrent()) await activateProductAction(actionId);
+    },
+  };
+}
+
+function skillsPage(tab: 'installed' | 'discover'): SidebarContribution {
+  return {
+    id: `builtin.skills.${tab}`,
+    labelKey: tab === 'installed' ? 'common:nav.items.skills' : 'common:nav.items.discoverSkills',
+    icon: tab === 'installed' ? 'book-open' : 'search',
+    isActive: context => context.activeSceneId === 'skills' && context.skillsTab === tab,
+    unavailableReason: localDesktopOnly,
+    open: async scope => {
+      const [{ useSkillsSceneStore }, { useSceneStore }] = await Promise.all([
+        import('@/app/scenes/skills/skillsSceneStore'), import('@/app/stores/sceneStore'),
+      ]);
+      if (!scope.isCurrent()) return;
+      useSkillsSceneStore.getState().openNativeSkills(tab);
+      useSceneStore.getState().openScene('skills');
+    },
+  };
+}
+
+export const sidebarRegistry = createSidebarRegistry([
+  productPage('builtin.todos', 'common:nav.items.todos', 'clock', 'todos', 'surface.todos.open'),
+  {
+    id: 'builtin.agents', labelKey: 'common:nav.items.agents', icon: 'users',
+    isActive: context => context.activeSceneId === 'agents',
+    open: async scope => {
+      const [{ useAgentsStore }, { useSceneStore }] = await Promise.all([
+        import('@/app/scenes/agents/agentsStore'), import('@/app/stores/sceneStore'),
+      ]);
+      if (!scope.isCurrent()) return;
+      const agents = useAgentsStore.getState();
+      agents.openHome();
+      agents.setSearchQuery('');
+      agents.setAgentFilterLevel('all');
+      agents.setAgentFilterType('all');
+      useSceneStore.getState().openScene('agents');
+    },
+  },
+  {
+    id: 'builtin.assistants', labelKey: 'shared:agents.Claw', icon: 'message-square',
+    isActive: context => context.activeSceneId === 'assistant' || context.activeSceneId === 'profile',
+    open: async scope => {
+      const [{ useNurseryStore }, { useSceneStore }] = await Promise.all([
+        import('@/app/scenes/profile/nurseryStore'), import('@/app/stores/sceneStore'),
+      ]);
+      if (!scope.isCurrent()) return;
+      useNurseryStore.getState().openGallery();
+      useSceneStore.getState().openScene('assistant');
+    },
+  },
+  productPage('builtin.miniapps', 'common:nav.items.miniApps', 'mini-app', 'miniapps', 'surface.miniapps.open'),
+  skillsPage('installed'),
+  skillsPage('discover'),
+  productPage('builtin.insights', 'common:scenes.insights', 'chart-spline', 'insights', 'surface.insights.open'),
+]);
diff --git a/src/web-ui/src/app/navigation/sidebarPreferences.test.ts b/src/web-ui/src/app/navigation/sidebarPreferences.test.ts
new file mode 100644
index 0000000000..1d440ddd7a
--- /dev/null
+++ b/src/web-ui/src/app/navigation/sidebarPreferences.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+import { createSidebarPreferences, isVisibleSidebarPin, SIDEBAR_PREFERENCES_KEY } from './sidebarPreferences';
+
+function memoryStorage(initial: string | null = null) {
+  let value = initial;
+  return {
+    getItem: (_key: string) => value,
+    setItem: (key: string, next: string) => { expect(key).toBe(SIDEBAR_PREFERENCES_KEY); value = next; },
+  };
+}
+
+describe('controller sidebar preferences', () => {
+  it('retains the retired import pin on disk without interrupting visible ordering', () => {
+    const storage = memoryStorage(JSON.stringify({ version: 1, pinnedIds: ['builtin.todos', 'builtin.external-import', 'builtin.miniapps'] }));
+    const store = createSidebarPreferences(storage);
+    store.getState().move('builtin.miniapps', -1);
+    expect(store.getState().pinnedIds.filter(isVisibleSidebarPin)).toEqual(['builtin.miniapps', 'builtin.todos']);
+    expect(createSidebarPreferences(storage).getState().pinnedIds).toEqual(['builtin.miniapps', 'builtin.external-import', 'builtin.todos']);
+  });
+
+  it('keeps the existing default layout and persists an intentionally empty selection', () => {
+    const storage = memoryStorage();
+    const store = createSidebarPreferences(storage);
+    expect(store.getState().pinnedIds).toEqual(['builtin.todos']);
+    store.getState().setPinned('builtin.todos', false);
+    expect(createSidebarPreferences(storage).getState().pinnedIds).toEqual([]);
+    store.getState().reset();
+    expect(createSidebarPreferences(storage).getState().pinnedIds).toEqual(['builtin.todos']);
+  });
+
+  it('round-trips older payloads, unknown entries and additive fields without dropping them', () => {
+    const storage = memoryStorage(JSON.stringify({ pinnedIds: ['extension.future', 'builtin.todos', 'builtin.todos'], extra: { retained: true } }));
+    const store = createSidebarPreferences(storage);
+    store.getState().setPinned('builtin.external-import', true);
+    store.getState().move('builtin.external-import', -1);
+    expect(createSidebarPreferences(storage).getState().pinnedIds)
+      .toEqual(['extension.future', 'builtin.external-import', 'builtin.todos']);
+    expect(JSON.parse(storage.getItem('')!)).toEqual({
+      version: 1, pinnedIds: ['extension.future', 'builtin.external-import', 'builtin.todos'], extra: { retained: true },
+    });
+  });
+
+  it.each(['{broken', JSON.stringify({ version: 9, pinnedIds: ['extension.future'] }), JSON.stringify({ version: 1, pinnedIds: [42] })])(
+    'preserves unreadable data until an explicit reset: %s', saved => {
+      const storage = memoryStorage(saved);
+      const store = createSidebarPreferences(storage);
+      expect(store.getState().storageIssue).not.toBeNull();
+      store.getState().setPinned('builtin.external-import', true);
+      expect(storage.getItem('')).toBe(saved);
+      store.getState().reset();
+      expect(store.getState().storageIssue).toBeNull();
+      expect(createSidebarPreferences(storage).getState().pinnedIds).toEqual(['builtin.todos']);
+    },
+  );
+
+  it('reports a failed write without claiming the changed layout was saved', () => {
+    const storage = memoryStorage();
+    const store = createSidebarPreferences({ ...storage, setItem: () => { throw new Error('full'); } });
+    store.getState().setPinned('builtin.external-import', true);
+    expect(store.getState()).toMatchObject({ pinnedIds: ['builtin.todos'], storageIssue: 'write' });
+    expect(storage.getItem('')).toBeNull();
+  });
+
+  it('does not wrap ordering at either boundary or duplicate pins', () => {
+    const store = createSidebarPreferences(memoryStorage());
+    store.getState().setPinned('builtin.todos', true);
+    store.getState().move('builtin.todos', -1);
+    store.getState().move('builtin.todos', 1);
+    store.getState().move('missing', 1);
+    expect(store.getState().pinnedIds).toEqual(['builtin.todos']);
+  });
+});
diff --git a/src/web-ui/src/app/navigation/sidebarPreferences.ts b/src/web-ui/src/app/navigation/sidebarPreferences.ts
new file mode 100644
index 0000000000..af86aa59ef
--- /dev/null
+++ b/src/web-ui/src/app/navigation/sidebarPreferences.ts
@@ -0,0 +1,72 @@
+import { createStore } from 'zustand/vanilla';
+
+export const SIDEBAR_PREFERENCES_KEY = 'openbitfun:appearance:sidebar';
+export const DEFAULT_SIDEBAR_PINS = ['builtin.todos'];
+// The old standalone import page moved into Settings. Keep its saved ID for
+// older installs, but exclude it from the current sidebar and visible ordering.
+export const isVisibleSidebarPin = (id: string) => id !== 'builtin.external-import';
+type PreferenceStorage = Pick<Storage, 'getItem' | 'setItem'>;
+type StorageIssue = 'read' | 'version' | 'write' | null;
+
+function browserStorage(): PreferenceStorage | undefined {
+  try { return typeof window === 'undefined' ? undefined : window.localStorage; }
+  catch { return undefined; }
+}
+
+/** Controller presentation only: no host config writes or surface-owned resource IDs. */
+export function createSidebarPreferences(storage = browserStorage()) {
+  let record: Record<string, unknown> = { version: 1, pinnedIds: DEFAULT_SIDEBAR_PINS };
+  let storageIssue: StorageIssue = null;
+  try {
+    const raw = storage?.getItem(SIDEBAR_PREFERENCES_KEY);
+    if (raw !== null && raw !== undefined) {
+      const saved: unknown = JSON.parse(raw);
+      if (!saved || typeof saved !== 'object' || Array.isArray(saved)) throw new Error('Invalid sidebar preferences');
+      const candidate = saved as Record<string, unknown>;
+      if (candidate.version !== undefined && candidate.version !== 1) storageIssue = 'version';
+      else if (!Array.isArray(candidate.pinnedIds) || candidate.pinnedIds.some(id => typeof id !== 'string' || !id.trim())) {
+        throw new Error('Invalid sidebar pins');
+      } else record = { ...candidate, version: 1, pinnedIds: [...new Set(candidate.pinnedIds)] };
+    }
+  } catch { storageIssue = 'read'; }
+
+  return createStore<{
+    pinnedIds: string[];
+    storageIssue: StorageIssue;
+    setPinned: (id: string, pinned: boolean) => void;
+    move: (id: string, direction: -1 | 1) => void;
+    reset: () => void;
+  }>((set, get) => {
+    const save = (pinnedIds: string[], reset = false) => {
+      if (!reset && (get().storageIssue === 'read' || get().storageIssue === 'version')) return;
+      const next = { ...record, version: 1, pinnedIds };
+      try {
+        if (!storage) throw new Error('Storage unavailable');
+        storage.setItem(SIDEBAR_PREFERENCES_KEY, JSON.stringify(next));
+        record = next;
+        set({ pinnedIds, storageIssue: null });
+      } catch { set({ storageIssue: 'write' }); }
+    };
+    return {
+      pinnedIds: [...record.pinnedIds as string[]],
+      storageIssue,
+      setPinned: (id, pinned) => {
+        const ids = get().pinnedIds;
+        if (!id.trim() || ids.includes(id) === pinned) return;
+        save(pinned ? [...ids, id] : ids.filter(current => current !== id));
+      },
+      move: (id, direction) => {
+        const ids = [...get().pinnedIds];
+        const index = ids.indexOf(id);
+        let target = index + direction;
+        while (target >= 0 && target < ids.length && !isVisibleSidebarPin(ids[target])) target += direction;
+        if (index < 0 || target < 0 || target >= ids.length) return;
+        [ids[index], ids[target]] = [ids[target], ids[index]];
+        save(ids);
+      },
+      reset: () => save([...DEFAULT_SIDEBAR_PINS], true),
+    };
+  });
+}
+
+export const sidebarPreferences = createSidebarPreferences();
diff --git a/src/web-ui/src/app/navigation/sidebarRegistry.test.ts b/src/web-ui/src/app/navigation/sidebarRegistry.test.ts
new file mode 100644
index 0000000000..9dcd51d874
--- /dev/null
+++ b/src/web-ui/src/app/navigation/sidebarRegistry.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createSidebarRegistry, selectedSidebarEntry, type SidebarContribution, type SidebarContext } from './sidebarRegistry';
+import { sidebarRegistry } from './sidebarContributions';
+
+const context: SidebarContext = { activeSceneId: 'skills', skillsTab: 'discover', isDesktop: true, isPeer: false, surfaceId: 'local' };
+const contribution: SidebarContribution = {
+  id: 'example.page', labelKey: 'common:scenes.skills', icon: 'book-open',
+  isActive: current => current.activeSceneId === 'skills', open: vi.fn(),
+};
+
+describe('sidebar contribution lifecycle', () => {
+  it('publishes stable snapshots, rejects collisions, and supports unload/re-registration', () => {
+    const registry = createSidebarRegistry();
+    const changed = vi.fn();
+    const stop = registry.subscribe(changed);
+    const initial = registry.getSnapshot();
+    expect(registry.getSnapshot()).toBe(initial);
+    const dispose = registry.register(contribution);
+    expect(changed).toHaveBeenCalledTimes(1);
+    expect(() => registry.register(contribution)).toThrow('duplicate');
+    expect(selectedSidebarEntry(registry.getSnapshot(), ['example.page'], context)).toBe('example.page');
+    dispose();
+    expect(selectedSidebarEntry(registry.getSnapshot(), ['example.page'], context)).toBeUndefined();
+    registry.register(contribution);
+    dispose(); // An old disposer must not unregister a newer contribution.
+    expect(registry.getSnapshot()).toHaveLength(1);
+    stop();
+  });
+
+  it('selects the exact skills subpage and keeps unavailable remote entries inactive', () => {
+    const entries = sidebarRegistry.getSnapshot();
+    const pins = ['builtin.skills.installed', 'builtin.skills.discover'];
+    expect(selectedSidebarEntry(entries, pins, context)).toBe('builtin.skills.discover');
+    expect(selectedSidebarEntry(entries, pins, { ...context, skillsTab: 'installed' })).toBe('builtin.skills.installed');
+    expect(selectedSidebarEntry(entries, pins, { ...context, isPeer: true, surfaceId: 'peer-a' })).toBeUndefined();
+    expect(selectedSidebarEntry(entries, pins, { ...context, isDesktop: false })).toBeUndefined();
+  });
+});
diff --git a/src/web-ui/src/app/navigation/sidebarRegistry.ts b/src/web-ui/src/app/navigation/sidebarRegistry.ts
new file mode 100644
index 0000000000..62fc3877fd
--- /dev/null
+++ b/src/web-ui/src/app/navigation/sidebarRegistry.ts
@@ -0,0 +1,63 @@
+import type { IconName } from '@openbitfun/ui';
+import type { SceneTabId } from '@/app/components/SceneBar/types';
+
+/** Bootstrap labels keep sidebar rendering independent of feature chunks. */
+export type SidebarLabelKey = `common:${string}` | `shared:${string}`;
+
+export interface SidebarContext {
+  activeSceneId: SceneTabId | null;
+  skillsTab: 'installed' | 'discover';
+  isDesktop: boolean;
+  isPeer: boolean;
+  surfaceId: string;
+}
+
+export interface SidebarContribution {
+  /** Stable, owner-namespaced identity. Never persist a label, callback or path. */
+  id: string;
+  labelKey: SidebarLabelKey;
+  icon: IconName;
+  isActive: (context: SidebarContext) => boolean;
+  unavailableReason?: (context: SidebarContext) => SidebarLabelKey | null;
+  /** Lazy preparation must check the captured surface before opening a destination. */
+  open: (scope: { isCurrent: () => boolean }) => void | Promise<void>;
+}
+
+/** Trusted frontend contributions only; this is not a plugin execution boundary. */
+export function createSidebarRegistry(initial: readonly SidebarContribution[] = []) {
+  let entries: readonly SidebarContribution[] = [];
+  const listeners = new Set<() => void>();
+  const notify = () => listeners.forEach(listener => listener());
+  const registry = {
+    getSnapshot: () => entries,
+    subscribe: (listener: () => void) => {
+      listeners.add(listener);
+      return () => { listeners.delete(listener); };
+    },
+    register: (entry: SidebarContribution) => {
+      if (!entry.id.includes('.') || entries.some(current => current.id === entry.id)) {
+        throw new Error(`Invalid or duplicate sidebar contribution: ${entry.id}`);
+      }
+      const registered = Object.freeze({ ...entry });
+      entries = [...entries, registered];
+      notify();
+      return () => {
+        if (!entries.includes(registered)) return;
+        entries = entries.filter(current => current !== registered);
+        notify();
+      };
+    },
+  };
+  initial.forEach(registry.register);
+  return registry;
+}
+
+/** One exact pinned destination wins; callers may then fall back to Home. */
+export function selectedSidebarEntry(
+  entries: readonly SidebarContribution[], pinnedIds: readonly string[], context: SidebarContext,
+): string | undefined {
+  return pinnedIds.find(id => {
+    const entry = entries.find(candidate => candidate.id === id);
+    return entry && !entry.unavailableReason?.(context) && entry.isActive(context);
+  });
+}
diff --git a/src/web-ui/src/app/navigation/useSidebarNavigation.ts b/src/web-ui/src/app/navigation/useSidebarNavigation.ts
new file mode 100644
index 0000000000..0b9bec1452
--- /dev/null
+++ b/src/web-ui/src/app/navigation/useSidebarNavigation.ts
@@ -0,0 +1,24 @@
+import { useSyncExternalStore } from 'react';
+import { useStore } from 'zustand';
+import { useSceneStore } from '@/app/stores/sceneStore';
+import { useSkillsSceneStore } from '@/app/scenes/skills/skillsSceneStore';
+import { getActiveSurfaceScope, isLocalSurface, onSurfaceActivated } from '@/infrastructure/peer-device/deviceSurface';
+import { isTauriRuntime } from '@/infrastructure/runtime';
+import { isVisibleSidebarPin, sidebarPreferences } from './sidebarPreferences';
+import { sidebarRegistry } from './sidebarContributions';
+import { selectedSidebarEntry, type SidebarContext } from './sidebarRegistry';
+
+export function useSidebarNavigation() {
+  const entries = useSyncExternalStore(sidebarRegistry.subscribe, sidebarRegistry.getSnapshot, sidebarRegistry.getSnapshot);
+  const pinnedIds = useStore(sidebarPreferences, state => state.pinnedIds);
+  const scope = useSyncExternalStore(onSurfaceActivated, getActiveSurfaceScope, getActiveSurfaceScope);
+  const activeSceneId = useSceneStore(state => state.activeTabId);
+  const skillsTab = useSkillsSceneStore(state => state.activeTab);
+  const context: SidebarContext = {
+    activeSceneId, skillsTab, isDesktop: isTauriRuntime(),
+    isPeer: !isLocalSurface(scope.surfaceId), surfaceId: scope.surfaceId,
+  };
+  // Retain old preferences on disk while retiring the former standalone page pin.
+  const visiblePinnedIds = pinnedIds.filter(isVisibleSidebarPin);
+  return { entries, pinnedIds: visiblePinnedIds, context, scope, selectedId: selectedSidebarEntry(entries, visiblePinnedIds, context) };
+}
diff --git a/src/web-ui/src/app/scenes/SceneViewport.tsx b/src/web-ui/src/app/scenes/SceneViewport.tsx
index f9422f3c5c..014dd6b169 100644
--- a/src/web-ui/src/app/scenes/SceneViewport.tsx
+++ b/src/web-ui/src/app/scenes/SceneViewport.tsx
@@ -43,9 +43,6 @@ const ProfileScene    = lazyWithRecovery(() => import('./profile/ProfileScene'))
 const PersonalOverviewScene = lazyWithRecovery(() => import('./personal-overview/PersonalOverviewScene'));
 const AgentsScene       = lazyWithRecovery(() => import('./agents/AgentsScene'));
 const SkillsScene     = lazyWithRecovery(() => import('./skills/SkillsScene'));
-const EcosystemCompatibilityScene = lazyWithRecovery(
-  () => import('./ecosystem-compatibility/EcosystemCompatibilityScene'),
-);
 const MiniAppGalleryScene = lazyWithRecovery(() => import('./miniapps/MiniAppGalleryScene'));
 const PagesScene      = lazyWithRecovery(() => import('./pages/PagesScene'));
 const BrowserScene    = lazyWithRecovery(() => import('./browser/BrowserScene'));
@@ -349,8 +346,6 @@ function renderScene(
       return <AgentsScene />;
     case 'skills':
       return <SkillsScene />;
-    case 'ecosystem-compatibility':
-      return <EcosystemCompatibilityScene />;
     case 'miniapps':
       return <MiniAppGalleryScene />;
     case 'pages':
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.discovery.test.tsx b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.discovery.test.tsx
index 7f3ffb9793..9cc33be392 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.discovery.test.tsx
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.discovery.test.tsx
@@ -37,12 +37,12 @@ vi.mock('./ecosystemCompatibilityStore', () => ({
 }));
 vi.mock('@openbitfun/ui', async () => {
   const { createElement, forwardRef } = await import('react');
-  const { Alert, Button, SegmentedControl, Switch, ToolbarGroup, ToolbarSeparator, Tooltip } = await vi.importActual<typeof import('@openbitfun/ui')>('@openbitfun/ui');
+  const { Alert, Button, FieldGroup, FormSection, SegmentedControl, Switch, ToolbarGroup, ToolbarSeparator, Tooltip } = await vi.importActual<typeof import('@openbitfun/ui')>('@openbitfun/ui');
   const Wrapper = forwardRef<HTMLDivElement, { children?: React.ReactNode }>(
     ({ children }, ref) => createElement('div', { ref }, children),
   );
   return {
-    Alert, Button, SegmentedControl,
+    Alert, Button, FieldGroup, FormSection, SegmentedControl,
     ...Object.fromEntries(['LoadingState',
       'OverflowText', 'ScrollArea', 'SearchField', 'Select', 'StatusPill', 'Textarea', 'DialogBody', 'DialogFooter', 'DialogHeader', 'DialogHeaderActions', 'DialogDescription', 'DialogHeading', 'DialogTitle'].map((name) => [name, Wrapper])),
     Switch, ToolbarGroup, ToolbarSeparator, Tooltip,
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.presentation.test.ts b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.presentation.test.ts
index 46af34f2bf..b8ffa9f155 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.presentation.test.ts
@@ -15,21 +15,20 @@ function source(relativePath: string): string {
 }
 
 describe('ecosystem compatibility scene presentation contract', () => {
-  it('opens as a standalone scene instead of a settings destination', () => {
+  it('opens inside Settings and removes the standalone menu entry', () => {
     const footerActions = source('../../components/NavPanel/components/PersistentFooterActions.tsx');
-    const activator = source('../../global-search/productActionActivator.ts');
     const navigation = source('./ecosystemCompatibilityStore.ts');
-    const viewport = source('../SceneViewport.tsx');
-
-    expect(footerActions).toContain("activateProductAction('surface.ecosystemCompatibility.open')");
-    expect(footerActions).not.toContain("activateProductAction('settings.external-sources.open')");
-    expect(footerActions).toContain('useExternalAppAwareness(');
-    expect(footerActions).toContain('openbitfun-nav-panel__top-action-unseen');
-    expect(activator).toContain("case 'surface.ecosystemCompatibility.open':");
-    expect(activator).toContain('openEcosystemCompatibility();');
-    expect(navigation).toContain("openScene('ecosystem-compatibility')");
-    expect(viewport).toContain("case 'ecosystem-compatibility':");
-    expect(viewport).toContain('<EcosystemCompatibilityScene />');
+    const page = source('../settings/pages/tools/ExternalImportSettingsPage.tsx');
+    const scene = source('./EcosystemCompatibilityScene.tsx');
+    const content = source('./ExternalAgentContent.tsx');
+
+    expect(footerActions).not.toContain('data-testid="ecosystem-compatibility-tab"');
+    expect(navigation).toContain("openPage('tools.external-import')");
+    expect(navigation).toContain("openScene('settings')");
+    expect(page).toContain('<SettingsPage pageId="tools.external-import">');
+    expect(scene).not.toContain('ecosystem-compatibility__scroll');
+    expect(scene).toContain('<ConfigPageSection');
+    expect(content).toContain('<FieldGroup appearance="subtle" fieldSurface="ambient" dividers={false}');
   });
 
   it('uses real external-source import and ACP owners while keeping unfinished actions explicit', () => {
@@ -64,7 +63,7 @@ describe('ecosystem compatibility scene presentation contract', () => {
     expect(model).toContain("dsh: ['skill', 'hook', 'mcp']");
   });
 
-  it('retires the duplicate Settings page and redirects legacy management links', () => {
+  it('preserves legacy management links while registering the settings destination', () => {
     const registry = source('../settings/settingsRegistry.ts');
     const settingsTypes = source('../settings/settingsTypes.ts');
     const destination = source('../settings/settingsDestination.ts');
@@ -72,7 +71,7 @@ describe('ecosystem compatibility scene presentation contract', () => {
     const agents = source('../agents/AgentsScene.tsx');
     const externalMcp = source('../../../infrastructure/config/components/ExternalMcpOverview.tsx');
 
-    expect(registry).not.toContain("id: 'tools.integrations'");
+    expect(registry).toContain("id: 'tools.external-import'");
     expect(settingsTypes).not.toContain("| 'tools.integrations'");
     expect(destination).toContain("'external-sources'");
     expect(destination).toContain("'tools.integrations'");
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 e98dbdb047..fa06730960 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
@@ -1,34 +1,12 @@
-@use '@/infrastructure/config/components/common/config-page-layout.tokens' as configLayout;
-
 .ecosystem-compatibility {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
-  block-size: 100%;
   min-inline-size: 0;
   min-block-size: 0;
-  overflow: hidden;
   color: var(--openbitfun-color-content-primary);
 
-  &__page-actions {
-    display: flex;
-    justify-content: flex-end;
-    flex-shrink: 0;
-    padding: var(--openbitfun-space-4) configLayout.$config-page-content-inline-padding 0;
-  }
-
-  &__scroll {
-    flex: 1;
-    min-block-size: 0;
-    scrollbar-gutter: stable both-edges;
-  }
-
   &__content {
-    @include configLayout.content-frame;
-    display: flex;
-    flex-direction: column;
-    gap: var(--openbitfun-space-12);
-    padding-block: var(--openbitfun-space-5) var(--openbitfun-space-16);
     container: ecosystem-content / inline-size;
   }
 
@@ -39,19 +17,6 @@
     min-inline-size: 0;
   }
 
-  &__applications-header {
-    text-align: center;
-
-    h1 {
-      margin: 0 0 var(--openbitfun-space-2);
-      font-family: var(--openbitfun-type-heading-page-font-family);
-      font-size: var(--openbitfun-type-heading-page-font-size);
-      font-weight: var(--openbitfun-type-heading-page-font-weight);
-      line-height: var(--openbitfun-type-heading-page-line-height);
-      letter-spacing: var(--openbitfun-type-heading-page-letter-spacing);
-    }
-  }
-
   &__product-pills {
     flex-wrap: wrap;
     max-inline-size: 100%;
@@ -353,7 +318,7 @@
     display: grid;
     grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(9rem, max-content);
     border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
-    border-radius: var(--openbitfun-radius-lg);
+    border-radius: var(--openbitfun-layout-field-group-radius);
     overflow: hidden;
   }
 
@@ -364,7 +329,8 @@
     align-items: center;
     gap: var(--openbitfun-space-4);
     min-inline-size: 0;
-    padding: var(--openbitfun-space-4);
+    padding-block: var(--openbitfun-layout-field-group-row-padding-block);
+    padding-inline: var(--openbitfun-layout-field-group-row-padding-inline);
     font-size: var(--openbitfun-type-body-sm-font-size);
     line-height: var(--openbitfun-type-body-sm-line-height);
 
@@ -478,8 +444,7 @@
     gap: var(--openbitfun-space-4);
   }
 
-  &__runtime-agent,
-  &__content-overview {
+  &__runtime-agent {
     min-inline-size: 0;
     overflow: hidden;
     border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
@@ -721,7 +686,8 @@
     grid-template-columns: minmax(0, 1fr) 9rem;
     align-items: center;
     gap: var(--openbitfun-space-4);
-    padding: var(--openbitfun-space-5) var(--openbitfun-space-4);
+    padding-block: var(--openbitfun-layout-field-group-row-padding-block);
+    padding-inline: var(--openbitfun-layout-field-group-row-padding-inline);
     font-size: var(--openbitfun-type-body-sm-font-size);
     line-height: var(--openbitfun-type-body-sm-line-height);
 
@@ -732,7 +698,6 @@
 
     &--header {
       padding-block: var(--openbitfun-space-3);
-      background: var(--openbitfun-color-surface-tertiary);
       color: var(--openbitfun-color-content-muted);
       border-block-end: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
       font-size: var(--openbitfun-type-meta-font-size);
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 b53d4cae3b..2f88b3a0df 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.tsx
@@ -20,6 +20,7 @@ import {
 } from '@openbitfun/ui';
 import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
+import { ConfigPageSection, ConfigPageSectionStack } from '@/infrastructure/config/components/common';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import {
   externalSourcesAPI,
@@ -66,7 +67,7 @@ function OwnerSurfaceLoading({ label }: { label: string }) {
   );
 }
 
-const EcosystemCompatibilityScene: React.FC = () => {
+const ExternalImportSection: React.FC = () => {
   const { t, formatNumber } = useI18n([
     'scenes/ecosystem-compatibility',
     'settings/external-apps',
@@ -81,6 +82,10 @@ const EcosystemCompatibilityScene: React.FC = () => {
   const requestScope = JSON.stringify([peerDeviceId, workspace?.id]);
   const requestSequence = useRef(0);
   const contentRef = useRef<HTMLDivElement>(null);
+  const resetContentScroll = useCallback(() => {
+    const scrollOwner = contentRef.current?.closest('.openbitfun-config-page-layout');
+    if (scrollOwner) scrollOwner.scrollTop = 0;
+  }, []);
   const acpManagerRef = useRef<React.ComponentRef<typeof AcpAgentsConfig>>(null);
   const discoveryControlRef = useRef<HTMLDivElement>(null);
   const externalContentRef = useRef<ExternalAgentContentHandle>(null);
@@ -108,15 +113,16 @@ const EcosystemCompatibilityScene: React.FC = () => {
   const [loadIssues, setLoadIssues] = useState<LoadIssue[]>([]);
   const [loading, setLoading] = useState(true);
   const selectedProductId = useEcosystemCompatibilityStore((state) => state.selectedProductId);
+  const previousProductId = useRef(selectedProductId);
   const ownerSurface = useEcosystemCompatibilityStore((state) => state.ownerSurface);
   const selectProduct = useEcosystemCompatibilityStore((state) => state.selectProduct);
   const setOwnerSurface = useEcosystemCompatibilityStore((state) => state.setOwnerSurface);
   useEffect(() => {
     if (ownerSurface !== 'external-sources') return;
-    if (contentRef.current) contentRef.current.scrollTop = 0;
+    resetContentScroll();
     discoveryControlRef.current?.focus();
     setOwnerSurface(null);
-  }, [ownerSurface, setOwnerSurface]);
+  }, [ownerSurface, resetContentScroll, setOwnerSurface]);
   const [editingSubagentClientId, setEditingSubagentClientId] = useState<string | null>(null);
   const [savingSubagentClientId, setSavingSubagentClientId] = useState<string | null>(null);
   const [subagentDraft, setSubagentDraft] = useState<AcpSubagentDraft>({
@@ -213,8 +219,9 @@ const EcosystemCompatibilityScene: React.FC = () => {
   useEffect(() => {
     setEditingSubagentClientId(null);
     setSavingSubagentClientId(null);
-    if (contentRef.current) contentRef.current.scrollTop = 0;
-  }, [selectedProductId]);
+    if (previousProductId.current !== selectedProductId) resetContentScroll();
+    previousProductId.current = selectedProductId;
+  }, [resetContentScroll, selectedProductId]);
 
   const showDevelopmentNotice = useCallback((name: string) => {
     notification.info(t('comingSoon.notice', { name }), {
@@ -473,214 +480,208 @@ const EcosystemCompatibilityScene: React.FC = () => {
 
   return (
     <div
+      ref={contentRef}
       className="ecosystem-compatibility"
       data-testid="ecosystem-compatibility-scene"
       data-openbitfun-scene="ecosystem-compatibility"
       data-openbitfun-part="root"
     >
-      <div className="ecosystem-compatibility__page-actions">
-        <ExternalDiscoveryToggle
-          key={requestScope}
-          snapshot={snapshot}
-          onSnapshotChange={setSnapshot}
-          controlRef={discoveryControlRef}
-        />
-      </div>
-      <ScrollArea
-        ref={contentRef}
-        className="ecosystem-compatibility__scroll"
+      <ConfigPageSectionStack
+        className="ecosystem-compatibility__content"
         data-openbitfun-scene="ecosystem-compatibility"
         data-openbitfun-part="content"
       >
-        <div className="ecosystem-compatibility__content">
-          <section
-            className="ecosystem-compatibility__applications"
-            aria-labelledby="ecosystem-applications-title"
+        <ConfigPageSection
+          className="ecosystem-compatibility__applications"
+          title={t('applications.title')}
+          bodySurface={false}
+          extra={(
+            <ExternalDiscoveryToggle
+              key={requestScope}
+              snapshot={snapshot}
+              onSnapshotChange={setSnapshot}
+              controlRef={discoveryControlRef}
+            />
+          )}
+          data-openbitfun-scene="ecosystem-compatibility"
+          data-openbitfun-part="sidebar"
+        >
+          <div
             data-openbitfun-scene="ecosystem-compatibility"
-            data-openbitfun-part="sidebar"
+            data-openbitfun-part="productList"
           >
-            <header
-              className="ecosystem-compatibility__applications-header"
-              data-openbitfun-scene="ecosystem-compatibility"
-              data-openbitfun-part="header"
-            >
-              <h1 id="ecosystem-applications-title">{t('applications.title')}</h1>
-            </header>
-            <div
-              data-openbitfun-scene="ecosystem-compatibility"
-              data-openbitfun-part="productList"
-            >
-              <SegmentedControl
-                className="ecosystem-compatibility__product-pills"
-                variant="pills"
-                tone="neutral"
-                size="md"
-                aria-labelledby="ecosystem-applications-title"
-                aria-controls="ecosystem-selected-agent"
-                value={selectedRuntime.spec.id}
-                onValueChange={(productId) => {
-                  const runtime = productRuntimes.find((candidate) => candidate.spec.id === productId);
-                  if (runtime) handleSelectProduct(runtime);
-                }}
-                options={productRuntimes.map((runtime) => ({
-                  value: runtime.spec.id,
-                  icon: <ProductBrandIcon productId={runtime.spec.id} size="100%" />,
-                  label: (
-                    <span
-                      data-product-id={runtime.spec.id}
-                      title={`${runtime.spec.name} · ${renderProductSummary(runtime)}`}
-                    >
-                      {runtime.spec.name}
-                    </span>
-                  ),
-                }))}
-              />
-            </div>
-          </section>
-
-          <main
-            id="ecosystem-selected-agent"
-            className="ecosystem-compatibility__main"
-            aria-labelledby="ecosystem-selected-agent-title"
+            <SegmentedControl
+              className="ecosystem-compatibility__product-pills"
+              variant="pills"
+              tone="neutral"
+              size="md"
+              aria-label={t('applications.title')}
+              aria-controls="ecosystem-selected-agent"
+              value={selectedRuntime.spec.id}
+              onValueChange={(productId) => {
+                const runtime = productRuntimes.find((candidate) => candidate.spec.id === productId);
+                if (runtime) handleSelectProduct(runtime);
+              }}
+              options={productRuntimes.map((runtime) => ({
+                value: runtime.spec.id,
+                icon: <ProductBrandIcon productId={runtime.spec.id} size="100%" />,
+                label: (
+                  <span
+                    data-product-id={runtime.spec.id}
+                    title={`${runtime.spec.name} · ${renderProductSummary(runtime)}`}
+                  >
+                    {runtime.spec.name}
+                  </span>
+                ),
+              }))}
+            />
+          </div>
+        </ConfigPageSection>
+
+        <section
+          id="ecosystem-selected-agent"
+          className="ecosystem-compatibility__main"
+          aria-labelledby="ecosystem-selected-agent-title"
+          data-openbitfun-scene="ecosystem-compatibility"
+          data-openbitfun-part="main"
+        >
+          <header
+            className="ecosystem-compatibility__product-header"
             data-openbitfun-scene="ecosystem-compatibility"
-            data-openbitfun-part="main"
+            data-openbitfun-part="header"
           >
-            <header
-              className="ecosystem-compatibility__product-header"
-            >
-              <div className="ecosystem-compatibility__header-top">
-                <div className="ecosystem-compatibility__product-identity">
-                  <span className="ecosystem-compatibility__product-logo" aria-hidden="true">
-                    <ProductBrandIcon productId={selectedRuntime.spec.id} size={38} />
-                  </span>
-                  <div className="ecosystem-compatibility__header-details">
-                    <div className="ecosystem-compatibility__product-title-row">
-                      <h2 id="ecosystem-selected-agent-title"><OverflowText>{selectedRuntime.spec.name}</OverflowText></h2>
-                    </div>
-                    <dl className="ecosystem-compatibility__header-source">
-                      <dt>{t('header.sourceLocation')}</dt>
-                      <dd title={selectedRuntime.sourceLocation}>
-                        <OverflowText>{selectedRuntime.sourceLocation ?? sourceLocationFallback}</OverflowText>
-                      </dd>
-                    </dl>
+            <div className="ecosystem-compatibility__header-top">
+              <div className="ecosystem-compatibility__product-identity">
+                <span className="ecosystem-compatibility__product-logo" aria-hidden="true">
+                  <ProductBrandIcon productId={selectedRuntime.spec.id} size={38} />
+                </span>
+                <div className="ecosystem-compatibility__header-details">
+                  <div className="ecosystem-compatibility__product-title-row">
+                    <h2 id="ecosystem-selected-agent-title"><OverflowText>{selectedRuntime.spec.name}</OverflowText></h2>
                   </div>
+                  <dl className="ecosystem-compatibility__header-source">
+                    <dt>{t('header.sourceLocation')}</dt>
+                    <dd title={selectedRuntime.sourceLocation}>
+                      <OverflowText>{selectedRuntime.sourceLocation ?? sourceLocationFallback}</OverflowText>
+                    </dd>
+                  </dl>
                 </div>
-                <ScrollArea className="ecosystem-compatibility__header-actions" orientation="horizontal">
-                  <ToolbarGroup role="group" aria-labelledby="ecosystem-selected-agent-title">
-                    {selectedRuntime.spec.acpClientId || selectedRuntime.acpClients.length > 0 ? (
-                      <>
-                        <Button
-                          className="ecosystem-compatibility__header-action"
-                          size="sm"
-                          variant="outline"
-                          labelBehavior="static"
-                          aria-haspopup="dialog"
-                          aria-controls="ecosystem-acp-manager"
-                          onClick={() => setOwnerSurface('acp')}
-                        >
-                          {t('run.openManager')}
-                        </Button>
-                        <ToolbarSeparator />
-                      </>
-                    ) : null}
-                    {contentActions?.canImport ? (
-                      <>
-                        <Button
-                          className="ecosystem-compatibility__header-action"
-                          size="sm"
-                          variant="outline"
-                          labelBehavior="static"
-                          aria-haspopup="dialog"
-                          disabled={loading || contentActions.importDisabled}
-                          onClick={() => void externalContentRef.current?.importAll()}
-                        >
-                          {t('content.importAll')}
-                        </Button>
-                        <ToolbarSeparator />
-                        <Button
-                          className="ecosystem-compatibility__header-action"
-                          size="sm"
-                          variant="outline"
-                          labelBehavior="static"
-                          aria-haspopup="dialog"
-                          disabled={loading || contentActions.undoDisabled}
-                          onClick={() => void externalContentRef.current?.undoAll()}
-                        >
-                          {t('content.undoAll')}
-                        </Button>
-                        <ToolbarSeparator />
-                      </>
-                    ) : null}
-                    <Button
-                      className="ecosystem-compatibility__header-action"
-                      size="sm"
-                      variant="outline"
-                      labelBehavior="static"
-                      aria-label={t('content.refresh')}
-                      disabled={loading || !contentActions || contentActions.refreshDisabled || sessionImportBusy}
-                      onClick={() => {
-                        setSessionRefreshVersion((value) => value + 1);
-                        void externalContentRef.current?.refresh();
-                      }}
-                    >
-                      {t('content.refresh')}
-                    </Button>
-                  </ToolbarGroup>
-                </ScrollArea>
               </div>
-            </header>
-
-            <div className="ecosystem-compatibility__body">
-              {loading ? (
-                <LoadingState className="ecosystem-compatibility__loading" role="status" size="sm">
-                  {t('loading')}
-                </LoadingState>
-              ) : null}
-              {loadIssues.length > 0 ? (
-                <div className="ecosystem-compatibility__load-notice" role="status">
-                  <Icon name="info" size="sm" aria-hidden="true" />
-                  <span>{t('partialLoad', {
-                    sources: loadIssues.includes('externalSources') ? t('loadAreas.externalSources') : '',
-                    acp: loadIssues.includes('acpClients') ? t('loadAreas.acpClients') : '',
-                  })}</span>
-                  <Button className="ecosystem-compatibility__load-retry" variant="outline" size="sm" onClick={() => void loadCompatibility(true)}>
-                    {t('retry')}
+              <ScrollArea className="ecosystem-compatibility__header-actions" orientation="horizontal">
+                <ToolbarGroup role="group" aria-labelledby="ecosystem-selected-agent-title">
+                  {selectedRuntime.spec.acpClientId || selectedRuntime.acpClients.length > 0 ? (
+                    <>
+                      <Button
+                        className="ecosystem-compatibility__header-action"
+                        size="sm"
+                        variant="outline"
+                        labelBehavior="static"
+                        aria-haspopup="dialog"
+                        aria-controls="ecosystem-acp-manager"
+                        onClick={() => setOwnerSurface('acp')}
+                      >
+                        {t('run.openManager')}
+                      </Button>
+                      <ToolbarSeparator />
+                    </>
+                  ) : null}
+                  {contentActions?.canImport ? (
+                    <>
+                      <Button
+                        className="ecosystem-compatibility__header-action"
+                        size="sm"
+                        variant="outline"
+                        labelBehavior="static"
+                        aria-haspopup="dialog"
+                        disabled={loading || contentActions.importDisabled}
+                        onClick={() => void externalContentRef.current?.importAll()}
+                      >
+                        {t('content.importAll')}
+                      </Button>
+                      <ToolbarSeparator />
+                      <Button
+                        className="ecosystem-compatibility__header-action"
+                        size="sm"
+                        variant="outline"
+                        labelBehavior="static"
+                        aria-haspopup="dialog"
+                        disabled={loading || contentActions.undoDisabled}
+                        onClick={() => void externalContentRef.current?.undoAll()}
+                      >
+                        {t('content.undoAll')}
+                      </Button>
+                      <ToolbarSeparator />
+                    </>
+                  ) : null}
+                  <Button
+                    className="ecosystem-compatibility__header-action"
+                    size="sm"
+                    variant="outline"
+                    labelBehavior="static"
+                    aria-label={t('content.refresh')}
+                    disabled={loading || !contentActions || contentActions.refreshDisabled || sessionImportBusy}
+                    onClick={() => {
+                      setSessionRefreshVersion((value) => value + 1);
+                      void externalContentRef.current?.refresh();
+                    }}
+                  >
+                    {t('content.refresh')}
                   </Button>
+                </ToolbarGroup>
+              </ScrollArea>
+            </div>
+          </header>
+
+          <div className="ecosystem-compatibility__body">
+            {loading ? (
+              <LoadingState className="ecosystem-compatibility__loading" role="status" size="sm">
+                {t('loading')}
+              </LoadingState>
+            ) : null}
+            {loadIssues.length > 0 ? (
+              <div className="ecosystem-compatibility__load-notice" role="status">
+                <Icon name="info" size="sm" aria-hidden="true" />
+                <span>{t('partialLoad', {
+                  sources: loadIssues.includes('externalSources') ? t('loadAreas.externalSources') : '',
+                  acp: loadIssues.includes('acpClients') ? t('loadAreas.acpClients') : '',
+                })}</span>
+                <Button className="ecosystem-compatibility__load-retry" variant="outline" size="sm" onClick={() => void loadCompatibility(true)}>
+                  {t('retry')}
+                </Button>
+              </div>
+            ) : null}
+            <div className="ecosystem-compatibility__unified-stack">
+              {selectedRuntime.spec.development ? (
+                <div className="ecosystem-compatibility__development-card" role="status">
+                  <Icon name="user" size="lg" />
+                  <div>
+                    <strong>{t('comingSoon.title')}</strong>
+                    <p>{t('comingSoon.notice', { name: selectedRuntime.spec.name })}</p>
+                  </div>
                 </div>
               ) : null}
-              <div className="ecosystem-compatibility__unified-stack">
-                {selectedRuntime.spec.development ? (
-                  <div className="ecosystem-compatibility__development-card" role="status">
-                    <Icon name="user" size="lg" />
-                    <div>
-                      <strong>{t('comingSoon.title')}</strong>
-                      <p>{t('comingSoon.notice', { name: selectedRuntime.spec.name })}</p>
-                    </div>
-                  </div>
-                ) : null}
-                {selectedRuntime.acpClients.length > 0 ? renderRun() : null}
-                {selectedRuntime.spec.sessionImport ? <ExternalAgentSessions
-                  key={JSON.stringify([peerDeviceId, selectedRuntime.spec.id])}
-                  ecosystemId={selectedRuntime.spec.sessionImport}
-                  onBusyChange={setSessionImportBusy}
-                  refreshVersion={sessionRefreshVersion}
-                /> : null}
-                <ExternalAgentContent
-                  key={JSON.stringify([requestScope, selectedRuntime.spec.id])}
-                  scopeKey={requestScope}
-                  actionsRef={externalContentRef}
-                  onActionStateChange={onContentActionStateChange}
-                  runtime={selectedRuntime}
-                  snapshot={snapshot}
-                  catalogFailed={loadIssues.includes('externalSources')}
-                  onSupplementalCounts={onSupplementalCounts}
-                  onRefresh={() => loadCompatibility(true)}
-                />
-              </div>
+              {selectedRuntime.acpClients.length > 0 ? renderRun() : null}
+              {selectedRuntime.spec.sessionImport ? <ExternalAgentSessions
+                key={JSON.stringify([peerDeviceId, selectedRuntime.spec.id])}
+                ecosystemId={selectedRuntime.spec.sessionImport}
+                onBusyChange={setSessionImportBusy}
+                refreshVersion={sessionRefreshVersion}
+              /> : null}
+              <ExternalAgentContent
+                key={JSON.stringify([requestScope, selectedRuntime.spec.id])}
+                scopeKey={requestScope}
+                actionsRef={externalContentRef}
+                onActionStateChange={onContentActionStateChange}
+                runtime={selectedRuntime}
+                snapshot={snapshot}
+                catalogFailed={loadIssues.includes('externalSources')}
+                onSupplementalCounts={onSupplementalCounts}
+                onRefresh={() => loadCompatibility(true)}
+              />
             </div>
-          </main>
-        </div>
-      </ScrollArea>
+          </div>
+        </section>
+      </ConfigPageSectionStack>
       <Dialog
         id="ecosystem-acp-manager"
         className="ecosystem-compatibility__acp-dialog"
@@ -713,4 +714,4 @@ const EcosystemCompatibilityScene: React.FC = () => {
   );
 };
 
-export default EcosystemCompatibilityScene;
+export default ExternalImportSection;
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.test.tsx b/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.test.tsx
index 2e0c050158..c4d24b08d3 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.test.tsx
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.test.tsx
@@ -47,6 +47,7 @@ vi.mock('@openbitfun/ui', async (importOriginal) => {
   const Wrapper = ({ children }: React.PropsWithChildren) => <div>{children}</div>;
   return {
     Alert: (await importOriginal<typeof import('@openbitfun/ui')>()).Alert,
+    FieldGroup: (await importOriginal<typeof import('@openbitfun/ui')>()).FieldGroup,
     Input: ({ size: _size, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
     Switch: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input type="checkbox" role="switch" {...props} />,
     Checkbox: ({ size: _size, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => <input type="checkbox" {...props} />,
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx b/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx
index a65fe08c30..b183e75565 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, type Ref } from 'react';
-import { Alert, Button, Checkbox, DialogBody, DialogClose, DialogFooter, DialogHeader, DialogHeaderActions, DialogHeading, DialogTitle, Icon, IconButton, LoadingState, OverflowText, ScrollArea, SearchField, Switch, StatusPill, type IconSource } from '@openbitfun/ui';
+import { Alert, Button, Checkbox, DialogBody, DialogClose, DialogFooter, DialogHeader, DialogHeaderActions, DialogHeading, DialogTitle, FieldGroup, Icon, IconButton, LoadingState, OverflowText, ScrollArea, SearchField, Switch, StatusPill, type IconSource } from '@openbitfun/ui';
 import { EcosystemDialog as Dialog } from './EcosystemDialog';
 import { EcosystemBatchLayout } from './EcosystemBatchLayout';
 import EcosystemPets from './EcosystemPets';
@@ -615,7 +615,7 @@ export default function ExternalAgentContent({ scopeKey, actionsRef, onActionSta
     <section className="ecosystem-compatibility__section" data-external-agent-content={runtime.spec.ecosystemId}>
       {notice && !kind && !review && !undo && !batch && !batchUndo ? <Alert className="ecosystem-compatibility__notice ecosystem-compatibility__feedback" role="status" showIcon={false} message={notice} /> : null}
       {loading ? <LoadingState size="sm">{t('loading')}</LoadingState> : null}
-      <div className="ecosystem-compatibility__content-overview" role="table" aria-label={t('content.title', { name: runtime.spec.name })}>
+      <FieldGroup appearance="subtle" fieldSurface="ambient" dividers={false} className="ecosystem-compatibility__content-overview" role="table" aria-label={t('content.title', { name: runtime.spec.name })}>
         <div className="ecosystem-compatibility__content-summary ecosystem-compatibility__content-summary--header" role="row">
           <span role="columnheader">{t('import.columns.item')}</span>
           <span role="columnheader">{t('import.columns.state')}</span>
@@ -653,7 +653,7 @@ export default function ExternalAgentContent({ scopeKey, actionsRef, onActionSta
           </div>
         </div>;
       })}
-      </div>
+      </FieldGroup>
       <Dialog
         id={categoryDialogId}
         className="ecosystem-compatibility__catalog-dialog"
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/ecosystemCompatibilityStore.ts b/src/web-ui/src/app/scenes/ecosystem-compatibility/ecosystemCompatibilityStore.ts
index af985179ef..e3b9554948 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/ecosystemCompatibilityStore.ts
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/ecosystemCompatibilityStore.ts
@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { useSceneStore } from '@/app/stores/sceneStore';
+import { useSettingsStore } from '@/app/scenes/settings/settingsStore';
 import type { EcosystemProductId } from './ecosystemCompatibilityModel';
 
 /** Legacy external-sources destinations focus the discovery switch in the header. */
@@ -32,12 +33,13 @@ export const useEcosystemCompatibilityStore = create<EcosystemCompatibilityState
   })),
 }));
 
-/** Opens the product surface and optionally selects one of its real owner views. */
+/** Opens the settings destination while preserving product and owner deep links. */
 export function openEcosystemCompatibility(
   destination?: EcosystemCompatibilityDestination,
 ): void {
   if (destination) {
     useEcosystemCompatibilityStore.getState().openDestination(destination);
   }
-  useSceneStore.getState().openScene('ecosystem-compatibility');
+  useSettingsStore.getState().openPage('tools.external-import');
+  useSceneStore.getState().openScene('settings');
 }
diff --git a/src/web-ui/src/app/scenes/settings/AGENTS.md b/src/web-ui/src/app/scenes/settings/AGENTS.md
index c31762abaa..cfdcbb0caf 100644
--- a/src/web-ui/src/app/scenes/settings/AGENTS.md
+++ b/src/web-ui/src/app/scenes/settings/AGENTS.md
@@ -51,6 +51,16 @@ pnpm --dir src/web-ui run test:run src/app/scenes/settings/pages/application/Flo
 
 These local DOM/storage fixtures do not establish rendered visuals or live remote behavior.
 
+For Appearance sidebar pinning, capsule selection, ordering, persistence and contribution lifecycle:
+
+```bash
+pnpm --dir src/web-ui run test:run src/app/navigation/sidebarPreferences.test.ts src/app/navigation/sidebarRegistry.test.ts src/app/scenes/settings/pages/application/SidebarSettingsSection.test.tsx src/app/scenes/settings/settingsRegistry.test.ts src/app/components/NavPanel/MainNav.projectCreation.test.tsx src/app/scenes/skills/skillsSceneStore.test.ts
+```
+
+Keep trusted navigation contributions separate from controller-local preferences and
+device-scoped MiniApp pins. These tests simulate Peer activation and capability gates;
+they do not establish live SSH, Remote Control, Peer Device or Detached Dispatch behavior.
+
 For model-pool strategy selection, member search/multi-selection, nested-dialog
 dismissal, preserved records and device-switch isolation, run:
 
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.scss b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.scss
index 5ca6947943..b252cdb3d4 100644
--- a/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.scss
+++ b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.scss
@@ -1,4 +1,88 @@
 // Appearance settings page presentation.
+.sidebar-settings__pinned {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: var(--openbitfun-space-2) 0;
+  list-style: none;
+}
+
+.sidebar-settings__pinned-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--openbitfun-space-2);
+  min-width: 0;
+  min-height: var(--openbitfun-control-height-sm);
+  padding-inline: var(--openbitfun-space-5);
+  font-size: var(--openbitfun-type-label-sm-font-size);
+  line-height: var(--openbitfun-type-label-sm-line-height);
+
+  &:focus-within {
+    background: var(--openbitfun-component-config-page-row-hover-background);
+  }
+}
+
+.sidebar-settings__label {
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar-settings__fixed {
+  color: var(--openbitfun-color-content-muted);
+}
+
+.sidebar-settings__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .sidebar-settings__pinned-item:hover {
+    background: var(--openbitfun-component-config-page-row-hover-background);
+  }
+
+  .sidebar-settings__actions {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .sidebar-settings__pinned-item:is(:hover, :focus-within) .sidebar-settings__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.sidebar-settings__add {
+  border-top: 1px solid var(--openbitfun-component-config-page-divider);
+}
+
+.sidebar-settings__add > .sidebar-settings__available-heading:hover {
+  background: transparent;
+}
+
+.sidebar-settings__available-page:hover:not(:active):not(:disabled) {
+  border-color: var(--openbitfun-component-button-outline-border);
+
+  &::before {
+    background: transparent;
+  }
+}
+
+.sidebar-settings__available {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--openbitfun-space-2);
+  padding: 0 var(--openbitfun-space-5) var(--openbitfun-space-4);
+  min-width: 0;
+
+  > [data-openbitfun-component='button'] {
+    max-inline-size: 100%;
+  }
+}
+
 .openbitfun-appearance-settings__content {
   display: flex;
   flex-direction: column;
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
index ee3f8f0910..a5386de00f 100644
--- a/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
+++ b/src/web-ui/src/app/scenes/settings/pages/application/AppearanceSettingsPage.tsx
@@ -9,6 +9,7 @@ import {
 import { FontPreferencePanel } from '@/infrastructure/font-preference';
 import SessionPanelSettingsSection from './SessionPanelSettingsSection';
 import FlowChatWidthSettingsSection from './FlowChatWidthSettingsSection';
+import SidebarSettingsSection from './SidebarSettingsSection';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -30,6 +31,7 @@ const AppearanceSettingsPage: React.FC = () => {
         <ConfigPageSectionStack data-testid="appearance-settings">
           <AppearancePackageConfigSection />
           <FontPreferencePanel />
+          <SidebarSettingsSection />
           <FlowChatWidthSettingsSection />
           <SessionPanelSettingsSection />
         </ConfigPageSectionStack>
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/SidebarSettingsSection.test.tsx b/src/web-ui/src/app/scenes/settings/pages/application/SidebarSettingsSection.test.tsx
new file mode 100644
index 0000000000..51d3097f2a
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/SidebarSettingsSection.test.tsx
@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { activateSurface, resetDeviceSurfaceForTest } from '@/infrastructure/peer-device/deviceSurface';
+import { sidebarPreferences } from '@/app/navigation/sidebarPreferences';
+import { sidebarRegistry } from '@/app/navigation/sidebarContributions';
+import { useSidebarNavigation } from '@/app/navigation/useSidebarNavigation';
+import { useSkillsSceneStore } from '@/app/scenes/skills/skillsSceneStore';
+import { useSceneStore } from '@/app/stores/sceneStore';
+import PinnedNavigationItems from '@/app/components/NavPanel/components/PinnedNavigationItems';
+import SidebarSettingsSection from './SidebarSettingsSection';
+
+const mocks = vi.hoisted(() => ({ openScene: vi.fn(), desktop: true }));
+vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({
+  t: (key: string, options?: { name?: string; id?: string }) => `${key}${options?.name ? `:${options.name}` : options?.id ? `:${options.id}` : ''}`,
+}) }));
+vi.mock('@/infrastructure/runtime', () => ({ isTauriRuntime: () => mocks.desktop }));
+vi.mock('@/shared/notification-system', () => ({ notificationService: { error: vi.fn() } }));
+vi.mock('@/app/stores/sceneStore', async () => {
+  const { create } = await import('zustand');
+  return { useSceneStore: create(() => ({ activeTabId: 'personal-overview', openScene: mocks.openScene })) };
+});
+vi.mock('@/app/global-search/productActionActivator', () => ({ activateProductAction: vi.fn() }));
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root: Root;
+let host: HTMLDivElement;
+let dispose: (() => void) | undefined;
+function Navigation() { return <aside><PinnedNavigationItems navigation={useSidebarNavigation()} /></aside>; }
+const button = (name: string) => host.querySelector<HTMLButtonElement>(`button[aria-label="${name}"]`)!;
+const pinIds = () => [...host.querySelectorAll('aside [data-testid]')].map(item => item.getAttribute('data-testid'));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  resetDeviceSurfaceForTest();
+  mocks.desktop = true;
+  localStorage.clear();
+  sidebarPreferences.setState({ pinnedIds: ['builtin.todos'], storageIssue: null });
+  useSkillsSceneStore.setState(useSkillsSceneStore.getInitialState(), true);
+  useSceneStore.setState({ activeTabId: 'personal-overview' });
+  host = document.createElement('div');
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => root.render(<><SidebarSettingsSection /><Navigation /></>));
+});
+afterEach(() => {
+  act(() => { root.unmount(); dispose?.(); });
+  dispose = undefined;
+  host.remove();
+  resetDeviceSurfaceForTest();
+});
+
+it('applies pinning, keyboard-accessible ordering, removal and reset immediately', async () => {
+  const capsules = [...host.querySelectorAll<HTMLButtonElement>('[data-testid="sidebar-available-page"]')];
+  expect(capsules).toHaveLength(6);
+  expect(host.querySelector('#sidebar-navigation input')).toBeNull();
+  expect(capsules.every(item => item.getAttribute('data-openbitfun-variant') === 'outline')).toBe(true);
+  expect(host.querySelector('#sidebar-navigation [data-openbitfun-part="sectionDescription"]')).toBeNull();
+  capsules[0].focus();
+  act(() => button('sidebar.addEntry:common:nav.items.miniApps').click());
+  expect(document.activeElement).toBe(button('sidebar.addEntry:common:nav.items.skills'));
+  expect(pinIds()).toEqual(['nav-todos-btn', 'nav-builtin.miniapps']);
+  act(() => button('sidebar.moveUp:common:nav.items.miniApps').click());
+  expect(pinIds()).toEqual(['nav-builtin.miniapps', 'nav-todos-btn']);
+  await act(async () => button('common:nav.items.miniApps').click());
+  const { activateProductAction } = await import('@/app/global-search/productActionActivator');
+  expect(activateProductAction).toHaveBeenCalledWith('surface.miniapps.open');
+  act(() => button('sidebar.remove:common:nav.items.todos').click());
+  expect(pinIds()).toEqual(['nav-builtin.miniapps']);
+  act(() => [...host.querySelectorAll('button')].find(item => item.textContent === 'sidebar.reset')!.click());
+  expect(pinIds()).toEqual(['nav-todos-btn']);
+  for (const capsule of host.querySelectorAll<HTMLButtonElement>('[data-testid="sidebar-available-page"]')) {
+    act(() => capsule.click());
+  }
+  expect(host.querySelector('[data-testid="sidebar-available-page"]')).toBeNull();
+  expect(document.activeElement?.textContent).toBe('sidebar.reset');
+});
+
+it('retains unavailable contributions, then restores them in the same position on registration', () => {
+  act(() => sidebarPreferences.getState().setPinned('example.page', true));
+  expect(button('nav.customization.unavailableEntry:example.page').disabled).toBe(true);
+  act(() => { dispose = sidebarRegistry.register({
+    id: 'example.page', labelKey: 'common:scenes.browser', icon: 'browser', isActive: () => false, open: vi.fn(),
+  }); });
+  expect(button('common:scenes.browser').disabled).toBe(false);
+  expect(pinIds()).toEqual(['nav-todos-btn', 'nav-example.page']);
+  act(() => dispose?.());
+  expect(sidebarPreferences.getState().pinnedIds).toContain('example.page');
+  expect(button('nav.customization.unavailableEntry:example.page').disabled).toBe(true);
+});
+
+it('hides the retired external import shortcut while retaining saved preferences', () => {
+  act(() => sidebarPreferences.getState().setPinned('builtin.external-import', true));
+  expect(pinIds()).toEqual(['nav-todos-btn']);
+  expect(host.textContent).not.toContain('builtin.external-import');
+  expect(sidebarPreferences.getState().pinnedIds).toContain('builtin.external-import');
+});
+
+it('follows skills subpage changes and retains disabled pins across simulated peer switches', async () => {
+  act(() => {
+    sidebarPreferences.getState().setPinned('builtin.skills.installed', true);
+    sidebarPreferences.getState().setPinned('builtin.skills.discover', true);
+    useSceneStore.setState({ activeTabId: 'skills' });
+  });
+  expect(button('common:nav.items.skills').getAttribute('data-openbitfun-state')).toBe('active');
+  await act(async () => button('common:nav.items.discoverSkills').click());
+  expect(useSkillsSceneStore.getState().activeTab).toBe('discover');
+  expect(mocks.openScene).toHaveBeenCalledWith('skills');
+  expect(button('common:nav.items.discoverSkills').getAttribute('data-openbitfun-state')).toBe('active');
+  act(() => activateSurface('peer-a'));
+  expect(button('common:nav.items.discoverSkills').disabled).toBe(true);
+  expect(sidebarPreferences.getState().pinnedIds).toContain('builtin.skills.discover');
+  act(() => activateSurface('local'));
+  expect(button('common:nav.items.discoverSkills').disabled).toBe(false);
+});
+
+it('does not open a destination on a different device after lazy preparation', async () => {
+  const entry = sidebarRegistry.getSnapshot().find(item => item.id === 'builtin.skills.discover')!;
+  let current = true;
+  const pending = entry.open({ isCurrent: () => current });
+  current = false;
+  await pending;
+  expect(mocks.openScene).not.toHaveBeenCalled();
+  expect(useSkillsSceneStore.getState().activeTab).toBe('installed');
+});
diff --git a/src/web-ui/src/app/scenes/settings/pages/application/SidebarSettingsSection.tsx b/src/web-ui/src/app/scenes/settings/pages/application/SidebarSettingsSection.tsx
new file mode 100644
index 0000000000..6dff912b2b
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/application/SidebarSettingsSection.tsx
@@ -0,0 +1,82 @@
+import { useLayoutEffect, useRef } from 'react';
+import { useStore } from 'zustand';
+import { Button, Icon, IconButton, OverflowText, Tooltip } from '@openbitfun/ui';
+import { useI18n } from '@/infrastructure/i18n';
+import { ConfigPageRow, ConfigPageSection } from '@/infrastructure/config/components/common';
+import { useSidebarNavigation } from '@/app/navigation/useSidebarNavigation';
+import { sidebarPreferences } from '@/app/navigation/sidebarPreferences';
+
+export default function SidebarSettingsSection() {
+  const { t } = useI18n('settings/appearance');
+  const { t: tCommon } = useI18n('common');
+  const navigation = useSidebarNavigation();
+  const { pinnedIds, entries, context } = navigation;
+  const { setPinned, move, reset, storageIssue } = useStore(sidebarPreferences);
+  const resetRef = useRef<HTMLButtonElement>(null);
+  const capsuleRefs = useRef(new Map<string, HTMLButtonElement>());
+  const nextFocus = useRef<string | null | undefined>(undefined);
+  const readOnly = storageIssue === 'read' || storageIssue === 'version';
+  const available = entries.filter(entry => !pinnedIds.includes(entry.id));
+  useLayoutEffect(() => {
+    if (nextFocus.current === undefined) return;
+    const next = nextFocus.current && capsuleRefs.current.get(nextFocus.current);
+    (next || resetRef.current)?.focus();
+    nextFocus.current = undefined;
+  }, [pinnedIds]);
+
+  return <ConfigPageSection id="sidebar-navigation" title={t('sidebar.title')}
+    extra={<Button ref={resetRef} size="sm" variant="quiet" onClick={reset}>{t('sidebar.reset')}</Button>}>
+    {storageIssue && <p role="alert">{t(storageIssue === 'write' ? 'sidebar.saveFailed' : 'sidebar.readFailed')}</p>}
+    <ul className="sidebar-settings__pinned" aria-label={t('sidebar.pinned')}>
+      <li className="sidebar-settings__pinned-item">
+        <OverflowText className="sidebar-settings__label">{tCommon('nav.items.personalOverview')}</OverflowText>
+        <span className="sidebar-settings__fixed">{t('sidebar.alwaysVisible')}</span>
+      </li>
+      {pinnedIds.map((id, index) => {
+        const entry = entries.find(candidate => candidate.id === id);
+        const name = entry ? tCommon(entry.labelKey) : tCommon('nav.customization.unavailableEntry', { id });
+        const reason = entry?.unavailableReason?.(context);
+        return <li key={id} className="sidebar-settings__pinned-item" title={reason ? tCommon(reason) : undefined}>
+          <OverflowText className="sidebar-settings__label">{name}</OverflowText>
+          <div className="sidebar-settings__actions">
+            <IconButton size="xs" variant="quiet" icon={<Icon name="arrow-up" size="xs" />}
+              aria-label={t('sidebar.moveUp', { name })} disabled={readOnly || index === 0} onClick={() => move(id, -1)} />
+            <IconButton size="xs" variant="quiet" icon={<Icon name="arrow-down" size="xs" />}
+              aria-label={t('sidebar.moveDown', { name })} disabled={readOnly || index === pinnedIds.length - 1} onClick={() => move(id, 1)} />
+            <IconButton size="xs" variant="quiet" icon={<Icon name="xmark" size="xs" />}
+              aria-label={t('sidebar.remove', { name })} disabled={readOnly} onClick={() => {
+                nextFocus.current = id;
+                setPinned(id, false);
+                if (sidebarPreferences.getState().pinnedIds.includes(id)) nextFocus.current = undefined;
+              }} />
+          </div>
+        </li>;
+      })}
+    </ul>
+    <div className="sidebar-settings__add">
+      <ConfigPageRow className="sidebar-settings__available-heading" label={t('sidebar.available')}>{null}</ConfigPageRow>
+      <div className="sidebar-settings__available" role="group" aria-label={t('sidebar.available')}>
+        {available.map((entry, index) => {
+          const name = tCommon(entry.labelKey);
+          const reason = entry.unavailableReason?.(context);
+          return <Tooltip key={entry.id} content={reason ? tCommon(reason) : t('sidebar.addEntry', { name })}>
+            <Button className="sidebar-settings__available-page" size="xs" variant="outline" leadingIcon={<Icon name="plus" size="xs" />}
+              ref={element => {
+                if (element) capsuleRefs.current.set(entry.id, element);
+                else capsuleRefs.current.delete(entry.id);
+              }}
+              data-testid="sidebar-available-page"
+              aria-label={t('sidebar.addEntry', { name })} disabled={readOnly} onClick={() => {
+                nextFocus.current = available[index + 1]?.id ?? available[index - 1]?.id ?? null;
+                setPinned(entry.id, true);
+                if (!sidebarPreferences.getState().pinnedIds.includes(entry.id)) nextFocus.current = undefined;
+              }}>
+              {name}
+            </Button>
+          </Tooltip>;
+        })}
+        {available.length === 0 && <span role="status">{t('sidebar.noResults')}</span>}
+      </div>
+    </div>
+  </ConfigPageSection>;
+}
diff --git a/src/web-ui/src/app/scenes/settings/pages/tools/ExternalImportSettingsPage.tsx b/src/web-ui/src/app/scenes/settings/pages/tools/ExternalImportSettingsPage.tsx
new file mode 100644
index 0000000000..9641d3be5e
--- /dev/null
+++ b/src/web-ui/src/app/scenes/settings/pages/tools/ExternalImportSettingsPage.tsx
@@ -0,0 +1,10 @@
+import ExternalImportSection from '../../../ecosystem-compatibility/EcosystemCompatibilityScene';
+import { SettingsPage } from '../shared/SettingsPage';
+
+export default function ExternalImportSettingsPage() {
+  return (
+    <SettingsPage pageId="tools.external-import">
+      <ExternalImportSection />
+    </SettingsPage>
+  );
+}
diff --git a/src/web-ui/src/app/scenes/settings/settingsDestination.ts b/src/web-ui/src/app/scenes/settings/settingsDestination.ts
index e379b63e29..adcc242fa0 100644
--- a/src/web-ui/src/app/scenes/settings/settingsDestination.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsDestination.ts
@@ -7,7 +7,7 @@ const LEGACY_ECOSYSTEM_COMPATIBILITY_IDS = new Set([
   'tools.integrations',
 ]);
 
-/** Old Settings links now redirect to the owning product surface. */
+/** Old management links additionally focus the discovery control in External import. */
 export function isLegacyEcosystemCompatibilityDestination(value: unknown): boolean {
   if (typeof value === 'string') {
     return LEGACY_ECOSYSTEM_COMPATIBILITY_IDS.has(value);
diff --git a/src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json b/src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json
index cd4139e599..6ff2563faa 100644
--- a/src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json
+++ b/src/web-ui/src/app/scenes/settings/settingsDestinationMigrations.json
@@ -1,5 +1,11 @@
 {
   "pages": {
+    "external-sources": {
+      "pageId": "tools.external-import"
+    },
+    "tools.integrations": {
+      "pageId": "tools.external-import"
+    },
     "basics": {
       "pageId": "application.general"
     },
diff --git a/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts b/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts
index 0fc86b8cea..8ed368871b 100644
--- a/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsRegistry.test.ts
@@ -25,14 +25,16 @@ describe('settings information architecture', () => {
       application: ['application.general', 'application.appearance', 'application.pet', 'application.input'],
       ai: ['ai.models', 'ai.session-memory', 'ai.execution', 'ai.permissions'],
       development: ['development.editor', 'development.terminal', 'development.workspace'],
-      tools: ['tools.web-search', 'tools.desktop-control', 'tools.mcp', 'tools.external-agents', 'tools.automation'],
+      tools: ['tools.external-import', 'tools.web-search', 'tools.desktop-control', 'tools.mcp', 'tools.external-agents', 'tools.automation'],
       data: ['data.usage', 'data.archived', 'data.diagnostics'],
     });
-    expect(new Set(SETTINGS_PAGE_MANIFESTS.map(page => page.id)).size).toBe(19);
+    expect(new Set(SETTINGS_PAGE_MANIFESTS.map(page => page.id)).size).toBe(20);
     expect(SETTINGS_PAGE_MANIFESTS.filter(page => page.views?.length).map(page => page.id)).toEqual(['tools.external-agents']);
     expect(getSettingsPageManifest('tools.external-agents').views?.map(view => view.id)).toEqual(['local', 'ssh', 'json']);
     expect(getSettingsPageManifest('application.input').sections?.map(section => section.id)).toEqual(['voice', 'message-sending', 'text-selection', 'shortcuts']);
     expect(getSettingsPageManifest('application.pet').sections?.map(section => section.id)).toEqual(['voice-call', 'pet', 'desktop-cards']);
+    expect(resolveSettingsDestination({ pageId: 'application.appearance', sectionId: 'sidebar-navigation' }))
+      .toEqual({ pageId: 'application.appearance', sectionId: 'sidebar-navigation' });
     expect(getSettingsPageManifest('tools.automation').sections?.map(section => section.id)).toEqual(['quick-actions', 'hooks']);
   });
 
@@ -46,17 +48,20 @@ describe('settings information architecture', () => {
     ]));
   });
 
-  it('keeps models with network settings and external-source governance outside Settings', () => {
+  it('keeps models with network settings and external import under tools', () => {
     expect(getSettingsPageManifest('ai.models').searchPhrases).toEqual(expect.arrayContaining([
       { namespace: 'settings/default-model', key: 'sections.defaults' },
       { namespace: 'settings/default-model', key: 'sections.proxy' },
     ]));
     expect(SETTINGS_PAGE_MANIFESTS.some(page => /assistant|integrations|review/.test(page.id))).toBe(false);
+    expect(getSettingsPageManifest('tools.external-import').categoryId).toBe('tools');
     expect(isLegacyEcosystemCompatibilityDestination('external-sources')).toBe(true);
     expect(isLegacyEcosystemCompatibilityDestination({ pageId: 'tools.integrations' })).toBe(true);
   });
 
   it.each([
+    ['external-sources', { pageId: 'tools.external-import' }],
+    ['tools.integrations', { pageId: 'tools.external-import' }],
     ['application.voice', { pageId: 'application.input', sectionId: 'voice' }],
     ['shortcuts', { pageId: 'application.input', sectionId: 'shortcuts' }],
     ['application.shortcuts', { pageId: 'application.input', sectionId: 'shortcuts' }],
diff --git a/src/web-ui/src/app/scenes/settings/settingsRegistry.ts b/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
index b83309acf2..f096255f12 100644
--- a/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsRegistry.ts
@@ -89,6 +89,7 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       'appearance pack', 'skin', 'import',
       'session', 'panel', 'layout', 'overlay',
       'chat', 'content', 'width', 'resize',
+      'sidebar', 'navigation', 'pin', 'order',
     ],
     namespaces: ['settings/appearance', 'settings/application'],
     searchPhrases: [
@@ -103,7 +104,15 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
       phrase('settings/appearance', 'sessionPanel.overlay'),
       phrase('settings/appearance', 'contentWidth.title'),
       phrase('settings/appearance', 'contentWidth.label'),
+      phrase('settings/appearance', 'sidebar.title'),
+      phrase('settings/appearance', 'sidebar.available'),
     ],
+    sections: [{
+      id: 'sidebar-navigation',
+      labelKey: 'navigation.sections.sidebar-navigation',
+      keywords: ['sidebar', 'navigation', 'pin', 'order'],
+      searchPhrases: [phrase('settings/appearance', 'sidebar.title'), phrase('settings/appearance', 'sidebar.available')],
+    }],
     load: () => import('./pages/application/AppearanceSettingsPage'),
   }),
   definePage({
@@ -318,6 +327,19 @@ export const SETTINGS_PAGE_MANIFESTS: readonly SettingsPageManifest[] = [
     ],
     load: () => import('./pages/development/WorkspaceGitSettingsPage'),
   }),
+  definePage({
+    id: 'tools.external-import',
+    categoryId: 'tools',
+    labelKey: 'navigation.pages.externalImport.label',
+    descriptionKey: 'navigation.pages.externalImport.description',
+    keywords: ['external import', 'integrations', 'ecosystem', 'opencode', 'claude code', 'codex', 'zcode'],
+    namespaces: ['scenes/ecosystem-compatibility', 'settings/external-apps', 'settings/acp-agents'],
+    searchPhrases: [
+      phrase('scenes/ecosystem-compatibility', 'title'),
+      phrase('scenes/ecosystem-compatibility', 'applications.title'),
+    ],
+    load: () => import('./pages/tools/ExternalImportSettingsPage'),
+  }),
   definePage({
     id: 'tools.web-search',
     categoryId: 'tools',
diff --git a/src/web-ui/src/app/scenes/settings/settingsTypes.ts b/src/web-ui/src/app/scenes/settings/settingsTypes.ts
index bfa3e8f525..325ce8bccd 100644
--- a/src/web-ui/src/app/scenes/settings/settingsTypes.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsTypes.ts
@@ -22,6 +22,7 @@ export type SettingsPageId =
   | 'tools.web-search'
   | 'tools.mcp'
   | 'tools.external-agents'
+  | 'tools.external-import'
   | 'data.usage'
   | 'data.archived'
   | 'data.diagnostics';
@@ -33,6 +34,7 @@ export type SettingsViewId =
 
 /** Anchors in a single settings page, not nested pages or tab panels. */
 export type SettingsSectionId =
+  | 'sidebar-navigation'
   | 'message-sending'
   | 'text-selection'
   | 'pet'
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
index ce1d667a4c..6e63ab40e0 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
@@ -53,7 +53,7 @@ import SkillGroupsView from './components/SkillGroupsView';
 import { useUserSkillGroups } from '@/features/skill-groups/useUserSkillGroups';
 import { resolveSkillGroups } from '@/features/skill-groups/skillGroups';
 import './SkillsScene.scss';
-import { useSkillsSceneStore, type SkillsView, type SkillTab } from './skillsSceneStore';
+import { useSkillsSceneStore, type SkillsView } from './skillsSceneStore';
 import { formatSkillDetailPath } from './skillDetailPath';
 import { useGallerySceneAutoRefresh } from '@/app/hooks/useGallerySceneAutoRefresh';
 
@@ -104,6 +104,8 @@ const SkillsScene: React.FC = () => {
   const [marketPageSize, setMarketPageSize] = useState(10);
   const focusPage = useRef(false);
   const {
+    activeTab,
+    setActiveTab,
     nativeNavigationRequest,
     nativeNavigationTarget,
     searchDraft,
@@ -119,7 +121,6 @@ const SkillsScene: React.FC = () => {
 
   const [marketSettingsOpen, setMarketSettingsOpen] = useState(false);
   useEffect(() => { if (!desktopConfigAvailable) setMarketSettingsOpen(false); }, [desktopConfigAvailable]);
-  const [activeTab, setActiveTab] = useState<SkillTab>('installed');
   const [deleteTarget, setDeleteTarget] = useState<SkillInfo | null>(null);
   const [installedSearch, setInstalledSearch] = useState('');
   const [groupSearch, setGroupSearch] = useState('');
@@ -135,7 +136,7 @@ const SkillsScene: React.FC = () => {
     setActiveTab(desktopConfigAvailable ? nativeNavigationTarget : 'installed');
     setInstalledSearch('');
     setSelectedDetail(null);
-  }, [nativeNavigationRequest, nativeNavigationTarget, desktopConfigAvailable]);
+  }, [nativeNavigationRequest, nativeNavigationTarget, desktopConfigAvailable, setActiveTab]);
 
   const installed = useInstalledSkills({
     searchQuery: installedSearch,
@@ -196,7 +197,7 @@ const SkillsScene: React.FC = () => {
     setAddFormOpen(false);
     setDeleteTarget(null);
     setSelectedDetail(null);
-  }, [desktopConfigAvailable, setAddFormOpen]);
+  }, [desktopConfigAvailable, setAddFormOpen, setActiveTab]);
 
   const market = useSkillMarket({
     searchQuery: marketQuery,
diff --git a/src/web-ui/src/app/scenes/skills/skillsSceneStore.test.ts b/src/web-ui/src/app/scenes/skills/skillsSceneStore.test.ts
index 018b04cd87..741e77d8bc 100644
--- a/src/web-ui/src/app/scenes/skills/skillsSceneStore.test.ts
+++ b/src/web-ui/src/app/scenes/skills/skillsSceneStore.test.ts
@@ -12,6 +12,7 @@ describe('Skills entry navigation', () => {
     expect(useSkillsSceneStore.getState()).toMatchObject({
       nativeNavigationTarget: 'discover',
       nativeNavigationRequest: 1,
+      activeTab: 'discover',
       searchDraft: '',
       marketQuery: '',
     });
@@ -24,6 +25,7 @@ describe('Skills entry navigation', () => {
     expect(useSkillsSceneStore.getState()).toMatchObject({
       nativeNavigationTarget: 'installed',
       nativeNavigationRequest: 2,
+      activeTab: 'installed',
       installedView: 'all',
     });
   });
@@ -40,4 +42,9 @@ describe('Skills entry navigation', () => {
       marketQuery: '',
     });
   });
+
+  it('publishes in-page tab changes without issuing a new navigation request', () => {
+    useSkillsSceneStore.getState().setActiveTab('discover');
+    expect(useSkillsSceneStore.getState()).toMatchObject({ activeTab: 'discover', nativeNavigationRequest: 0 });
+  });
 });
diff --git a/src/web-ui/src/app/scenes/skills/skillsSceneStore.ts b/src/web-ui/src/app/scenes/skills/skillsSceneStore.ts
index 21d12d96d4..8440936451 100644
--- a/src/web-ui/src/app/scenes/skills/skillsSceneStore.ts
+++ b/src/web-ui/src/app/scenes/skills/skillsSceneStore.ts
@@ -5,6 +5,8 @@ export type SkillsView = InstalledFilter | 'groups';
 export type SkillTab = 'installed' | 'discover';
 
 interface SkillsSceneState {
+  activeTab: SkillTab;
+  setActiveTab: (tab: SkillTab) => void;
   nativeNavigationRequest: number;
   nativeNavigationTarget: SkillTab;
   openNativeSkills: (target?: SkillTab) => void;
@@ -20,9 +22,12 @@ interface SkillsSceneState {
 }
 
 export const useSkillsSceneStore = create<SkillsSceneState>((set) => ({
+  activeTab: 'installed',
+  setActiveTab: activeTab => set({ activeTab }),
   nativeNavigationRequest: 0,
   nativeNavigationTarget: 'installed',
   openNativeSkills: (target = 'installed') => set((state) => ({
+    activeTab: target,
     nativeNavigationRequest: state.nativeNavigationRequest + 1,
     nativeNavigationTarget: target,
     installedView: 'all',
diff --git a/src/web-ui/src/app/stores/sceneStore.test.ts b/src/web-ui/src/app/stores/sceneStore.test.ts
index 17494db725..fac3af05bb 100644
--- a/src/web-ui/src/app/stores/sceneStore.test.ts
+++ b/src/web-ui/src/app/stores/sceneStore.test.ts
@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { recordInteractionModality } from '@/shared/utils/motionPreference';
 import { registerSessionSceneNavigation, useSceneStore } from './sceneStore';
 import { getSessionSceneTabId } from '../components/SceneBar/types';
+import { useSettingsStore } from '../scenes/settings/settingsStore';
 const sessionTarget = { surfaceId: 'local', workspaceKey: 'project', sessionId: 'current' };
 const sessionTabId = getSessionSceneTabId(sessionTarget);
 import {
@@ -32,6 +33,13 @@ describe('sceneStore transition snapshots', () => {
     expect(state.navCursor).toBe(-1);
   });
 
+  it('redirects legacy external-import scenes into the settings destination', () => {
+    useSceneStore.getState().openScene('ecosystem-compatibility');
+    expect(useSettingsStore.getState().activePageId).toBe('tools.external-import');
+    expect(useSceneStore.getState().activeTabId).toBe('settings');
+    expect(useSceneStore.getState().openTabs.map(tab => tab.id)).toEqual(['settings']);
+  });
+
   it('keeps the five most recently opened sessions per workspace, moving repeats to the front', () => {
     const scenes = useSceneStore.getState();
     for (let index = 1; index <= 7; index++) {
diff --git a/src/web-ui/src/app/stores/sceneStore.ts b/src/web-ui/src/app/stores/sceneStore.ts
index 0a790f6b50..482934a45e 100644
--- a/src/web-ui/src/app/stores/sceneStore.ts
+++ b/src/web-ui/src/app/stores/sceneStore.ts
@@ -49,6 +49,7 @@ import {
 } from '../scenes/registry';
 import { getSceneNav } from '../scenes/nav-registry';
 import { useNavSceneStore } from './navSceneStore';
+import { useSettingsStore } from '../scenes/settings/settingsStore';
 import {
   getInteractionMotion,
   type InteractionMotion,
@@ -238,6 +239,12 @@ export const useSceneStore = create<SceneState>((set, get) => ({
   },
 
   openScene: (requestedId) => {
+    // Keep scene destinations sent by older clients on the owning settings page.
+    if (requestedId === 'ecosystem-compatibility') {
+      useSettingsStore.getState().openPage('tools.external-import');
+      openSceneTarget('settings');
+      return;
+    }
     if (requestedId === 'file-viewer') {
       useNavSceneStore.getState().openNavScene('file-viewer');
       return;
diff --git a/src/web-ui/src/flow_chat/_detail-disclosure.scss b/src/web-ui/src/flow_chat/_detail-disclosure.scss
new file mode 100644
index 0000000000..92b757338c
--- /dev/null
+++ b/src/web-ui/src/flow_chat/_detail-disclosure.scss
@@ -0,0 +1,12 @@
+// Shared disclosure treatment for tool definitions and recorded trajectory data.
+@mixin header-tone($color) {
+  background: color-mix(in srgb, #{$color} 10%, var(--openbitfun-color-surface-scene));
+
+  &:is(:hover, :focus-within) {
+    background: color-mix(in srgb, #{$color} 16%, var(--openbitfun-color-surface-scene));
+  }
+}
+
+@mixin content-inset {
+  padding-inline: var(--openbitfun-layout-disclosure-trigger-padding-inline);
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
index 9b9dae2b13..43d3deb783 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VERIFICATION.md
@@ -16,6 +16,7 @@ each missing what the other had.
 
 | Test | Contract it holds |
 |---|---|
+| `../../trajectory` | bounded long-session rail, stable range identities, keyboard preview vs selection, searchable summary pagination, legacy-peer gating, stale device/query rejection, canonical peer body navigation, shared detail components and bounded output; local DOM/transport fixtures, not native rendering or live remote evidence |
 | `../FlowChatWidthBoundary.test.tsx`, `../../../infrastructure/appearance/preferences/flowChatWidthStore.test.ts`, `../../../app/scenes/settings/pages/application/FlowChatWidthSettingsSection.test.tsx` | symmetric pointer/keyboard column resizing, token-derived bounds, cancellation/cleanup, narrow-pane restoration, persisted preference compatibility and settings/reset synchronization; supplied DOM geometry, not visual or live remote evidence |
 | `../../timeline/hostQueueProjection.test.ts`, `../../timeline/useHostQueueTimeline.test.tsx`, `../HostPendingQueuePanel.test.tsx` | host-accepted preview, canonical handoff/event ordering, stable keys, blocked recovery, old-host fallback, history-window visibility and device lease cleanup; fixtures only, no live remote transport evidence |
 | `TurnFooter.test.tsx`, `modelRoundItemMemo.test.ts` | latest-turn identity, hover/focus across virtual rows, lease cleanup, no projection churn and the existing completion reveal gate; behavior only, not visual proof |
@@ -48,7 +49,7 @@ each missing what the other had.
 | `flowChatLiveTailWindow.test.ts` | "does the transcript still reach the newest Turn" |
 | `flowChatViewportAnchor.test.ts` | anchor geometry and the DOM contract |
 | `useFlowChatViewportAnchor.test.tsx` | capture, restore, carry, the settle window |
-| `VirtualMessageList.session-boundary.test.tsx` | prepend compensation, consecutive paging with/without queued input, passive scroll suppression, navigation-target current Turn with gesture/follow/session handoff, and search placement only outside the readable viewport |
+| `VirtualMessageList.session-boundary.test.tsx` | prepend compensation, consecutive paging with/without queued input, passive scroll suppression, navigation-target current Turn with gesture/follow/session handoff, search placement only outside the readable viewport, and real viewport-register acknowledgement before trajectory details/highlights commit for user/search/model/folded-tool/history targets |
 | `flowChatScrollbarMask.test.ts`, `VirtualMessageList.session-boundary.test.tsx` | idle gutter masking with symmetric, one-sided and overlay scrollbars; overflow restoration and content/viewport resizing without scroll writes; supplied DOM geometry, not native rendering or live remote evidence |
 | `FlowChatOpeningBoundary.test.tsx` | opening-only activation/scroll isolation, bidirectional focus skipping, programmatic focus return, and reveal cleanup; DOM contracts only |
 | `ModernFlowChatContainer.history-state.test.tsx` | history presentation and the submission event |
@@ -331,6 +332,13 @@ checks; mobile Remote Control uses its own message renderer.
 
 ### Turn navigation
 
+For trajectory navigation, check user, model, folded-tool and historical-round
+targets in light/dark themes. The target receives a temporary full-item accent
+fill; the short tool marker sits left of its icon. Rail selection and right-panel
+content change only after successful positioning. These native visual checks
+remain manual; DOM geometry and transport fixtures do not establish native or
+live-remote rendering behavior.
+
 At rest the rail's dark emphasis belongs only to its current step
 (`aria-current`), not to every Turn visible in the transcript. Hover temporarily
 emphasizes just the pointed marker, with a symmetric fan of muted neighbors;
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIEWPORT_REGISTER.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIEWPORT_REGISTER.md
index bec6741583..8ea6c2359e 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIEWPORT_REGISTER.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIEWPORT_REGISTER.md
@@ -118,6 +118,27 @@ text on another frame, while the row aim could still reassert itself later.
 Gestures, a superseding search request, and session teardown abandon pending
 search resolution. Search styling owns no viewport writes.
 
+**Trajectory selection uses the same one-shot owner.** The header trajectory keeps
+only bounded event summaries; hover, range brushing and search indexing never
+activate a history window or write the transcript viewport. Selection resolves a
+stable Turn/item identity, expands its group and uses `focusItem` or
+`scrollToSearchMatch`. `prepareItemNavigation` releases follow/old aims without
+claiming a reader gesture, which would outrank and refuse the requested placement.
+Both paths acknowledge a mounted target only after the viewport register permits
+positioning; trajectory selection and detail content commit on that acknowledgement.
+Item focus carries its source row/round when needed: retry
+history opens through reader state, group filters clear before materializing the
+member, and a visible collapsed card can anchor even if its body text is hidden.
+A local history window is presented before the item is aimed;
+there is no intermediate Turn scroll. Peer bodies come from the canonical record
+replica, paging only until the selected Turn is present. Device/session changes,
+a later selection and reader gestures invalidate pending navigation. Right-panel
+range endpoint actions include the originating viewport ID to isolate split chats.
+The passive item overlay covers the full target with the semantic accent surface;
+its short marker aligns to the leading tool icon, including icons in the gutter.
+Text search retains its word highlights and current-line presentation. Repeated
+focus requests have independent lifetimes, so an older timeout cannot clear a new one.
+
 **The current Turn is not always the first visible Turn.** The top alignment
 gap can leave a sliver of the preceding Turn on screen; the content-end clamp
 can leave several earlier Turns visible. `VirtualMessageList` remembers the
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx
index b53b8a1d0f..452c662c77 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.test.tsx
@@ -208,6 +208,31 @@ describe('FlowChatHeader', () => {
     expect(container.querySelector('[data-testid="flowchat-header-turn-next"]')).toBeNull();
   });
 
+  it('hosts trajectory search and its navigation in the shared scene top bar', () => {
+    const onTrajectoryOpen = vi.fn(); const onSearchNext = vi.fn(); const onSearchClose = vi.fn();
+    const render = (trajectoryOpen: boolean) => root.render(
+      <SceneChromeProvider activeSceneId="session">
+        <SceneChromeHost data-testid="scene-actions-host" />
+        <FlowChatHeader {...createProps({ onTrajectoryOpen, trajectoryOpen, searchQuery: 'needle',
+          searchMatchCount: 3, searchCurrentMatch: 1, onSearchNext, onSearchClose })} />
+      </SceneChromeProvider>,
+    );
+    act(() => render(false));
+    const host = container.querySelector('[data-testid="scene-actions-host"]')!;
+    expect(host.querySelector('[data-openbitfun-name="chart-spline"]')).not.toBeNull();
+    act(() => host.querySelector<HTMLButtonElement>('[data-testid="flowchat-header-search"]')!.click());
+    expect(onTrajectoryOpen).toHaveBeenCalledTimes(1);
+    act(() => render(true));
+    const search = host.querySelector('[data-testid="flowchat-header-search-bar"]')!;
+    expect(search.querySelector('input')?.value).toBe('needle');
+    act(() => search.querySelector<HTMLButtonElement>('[aria-label="flowChatHeader.searchNext"]')!.click());
+    expect(onSearchNext).toHaveBeenCalledTimes(1);
+    act(() => search.querySelector<HTMLButtonElement>('.flowchat-header__search-close')!.click());
+    expect(onSearchClose).toHaveBeenCalledTimes(1);
+    act(() => render(false));
+    expect(host.querySelector('[data-testid="flowchat-header-search-bar"]')).toBeNull();
+  });
+
   it('toggles the host-owned right panel from the session header', () => {
     const onToggleRightPanel = vi.fn();
     const onSearchClose = vi.fn();
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx
index 7b2bf98538..669274f4f9 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.tsx
@@ -54,6 +54,8 @@ export interface FlowChatHeaderProps {
   sessionId?: string;
   /** Current search query string. */
   searchQuery?: string;
+  onTrajectoryOpen?: () => void;
+  trajectoryOpen?: boolean;
   /** Called when the user types in the search box. */
   onSearchChange?: (query: string) => void;
   /** Total number of search matches. */
@@ -94,6 +96,8 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
   visible,
   sessionId,
   searchQuery = '',
+  onTrajectoryOpen,
+  trajectoryOpen = false,
   onSearchChange,
   searchMatchCount = 0,
   searchCurrentMatch = 0,
@@ -171,7 +175,7 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
         current: searchCurrentMatch,
         total: searchMatchCount,
       });
-  const isSearchMode = visible && isSearchOpen;
+  const isSearchMode = visible && (onTrajectoryOpen ? trajectoryOpen : isSearchOpen);
   const hasOpenBackgroundCommandMenu =
     isBackgroundCommandSectionMenuOpen ||
     openBackgroundCommandMenuId !== null;
@@ -333,9 +337,10 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
     if (searchOpenRequest > 0 && searchOpenRequest !== prevSearchOpenRequestRef.current) {
       prevSearchOpenRequestRef.current = searchOpenRequest;
       closeSessionOverview(false);
-      setIsSearchOpen(true);
+      if (onTrajectoryOpen) onTrajectoryOpen();
+      else setIsSearchOpen(true);
     }
-  }, [closeSessionOverview, searchOpenRequest]);
+  }, [closeSessionOverview, searchOpenRequest, onTrajectoryOpen]);
 
   useEffect(() => {
     if (hasBackgroundCommands) return;
@@ -346,7 +351,7 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
   }, [hasBackgroundCommands]);
 
   useEffect(() => {
-    if (!isSearchOpen) return;
+    if (!isSearchMode) return;
 
     const frameId = requestAnimationFrame(() => {
       searchInputRef.current?.focus();
@@ -356,12 +361,13 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
     return () => {
       cancelAnimationFrame(frameId);
     };
-  }, [isSceneChromeActive, isSearchOpen, visible]);
+  }, [isSceneChromeActive, isSearchMode, searchOpenRequest]);
 
   const handleOpenSearch = useCallback(() => {
     closeSessionOverview(false);
-    setIsSearchOpen(true);
-  }, [closeSessionOverview]);
+    if (onTrajectoryOpen) onTrajectoryOpen();
+    else setIsSearchOpen(true);
+  }, [closeSessionOverview, onTrajectoryOpen]);
 
   const handleCloseSearch = useCallback(() => {
     setIsSearchOpen(false);
@@ -695,14 +701,15 @@ export const FlowChatHeader: React.FC<FlowChatHeaderProps> = ({
             </span>
           </div>
         ) : visible ? (
-          <Tooltip content={t('flowChatHeader.searchOpen')}>
+          <Tooltip content={onTrajectoryOpen ? t('trajectory.title') : t('flowChatHeader.searchOpen')}>
             <IconButton
               className="flowchat-header__search-btn"
               size="xs"
               onClick={handleOpenSearch}
-              aria-label={t('flowChatHeader.searchOpen')}
+              aria-label={onTrajectoryOpen ? t('trajectory.title') : t('flowChatHeader.searchOpen')}
               data-testid="flowchat-header-search"
-              icon={<Icon name="search" size="sm" />}
+              aria-expanded={onTrajectoryOpen ? trajectoryOpen : undefined}
+              icon={<Icon name={onTrajectoryOpen ? "chart-spline" : "search"} size="sm" />}
             />
           </Tooltip>
         ) : null}
diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
index 696cb700fc..ca544e63c6 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
@@ -1,10 +1,11 @@
+import { globalEventBus } from '@/infrastructure/event-bus';
 import { requireSessionOwningWorkspaceId } from '../../utils/sessionOrdering';
 /**
  * Modern FlowChat container.
  * Uses virtual scrolling with Zustand and syncs legacy store state.
  */
 
-import React, { useMemo, useCallback, useRef, useEffect, useLayoutEffect, useState, useSyncExternalStore } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect, useLayoutEffect, useState, useSyncExternalStore, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useShortcut } from '@/infrastructure/hooks/useShortcut';
 import { FlowChatManager } from '@/flow_chat/services/FlowChatManager';
@@ -38,6 +39,11 @@ import { useFlowChatCopyDialog } from './useFlowChatCopyDialog';
 import { useFlowChatSync } from './useFlowChatSync';
 import { useFlowChatToolActions } from './useFlowChatToolActions';
 import { useFlowChatSearch } from './useFlowChatSearch';
+import { TrajectoryExplorer, type TrajectoryExplorerRef, type TrajectorySearchState, type TrajectorySelection } from '../../trajectory/TrajectoryExplorer';
+import { trajectoryNodeKey } from '../../trajectory/trajectoryModel';
+import { TRAJECTORY_NAVIGATE_EVENT, type TrajectoryPanelData, showTrajectoryRange } from '../../trajectory/trajectoryPanel';
+import type { TrajectoryRangeSummary } from '../../trajectory/trajectoryRange';
+import { useTrajectoryNavigation } from '../../trajectory/useTrajectoryNavigation';
 import {
   sessionToVirtualItems,
   useVirtualItems,
@@ -525,7 +531,14 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
   const turnSummariesRef = useRef<FlowChatTurnSummary[]>([]);
   const turnRailTurnIdsRef = useRef<Set<string>>(new Set());
   const requestTurnNavigationRef = useRef<((turnId: string) => FlowChatTurnNavigationStatus) | null>(null);
-  const searchFullHistorySessionIdRef = useRef<string | null>(null);
+  const trajectoryViewId = useId();
+  const [trajectoryOpen, setTrajectoryOpen] = useState(false);
+  const [trajectorySelection, setTrajectorySelection] = useState<TrajectorySelection>();
+  const [trajectorySelectionClearRequest, setTrajectorySelectionClearRequest] = useState(0);
+  const [trajectorySearchInput, setTrajectorySearchInput] = useState('');
+  const [trajectorySearchState, setTrajectorySearchState] = useState<TrajectorySearchState>({ count: 0, current: 0 });
+  const trajectoryRef = useRef<TrajectoryExplorerRef>(null);
+  const openTrajectory = useCallback(() => setTrajectoryOpen(true), []);
   const virtualListRef = useRef<VirtualMessageListRef>(null);
   const chatScopeRef = useRef<HTMLDivElement>(null);
   const activeSessionIdRef = useRef<string | null>(null);
@@ -669,17 +682,19 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     onSearchChange: setSearchQuery,
     matches: searchMatches,
     matchesByVirtualIndex: searchMatchesByVirtualIndex,
-    currentMatchIndex: searchCurrentMatchIndex,
-    goToNext: handleSearchNext,
-    goToPrev: handleSearchPrev,
     clearSearch,
   } = useFlowChatSearch(virtualItems);
-  const searchCurrentMatch = searchMatches[searchCurrentMatchIndex];
-  const searchCurrentMatchFlowItemId = searchCurrentMatch?.flowItemId;
-  const searchCurrentMatchTurnId = searchCurrentMatch?.turnId;
-  const searchCurrentMatchVirtualItemIndex = searchCurrentMatch?.virtualItemIndex ?? -1;
-  const searchCurrentMatchOccurrenceIndex = searchCurrentMatch?.occurrenceIndex ?? 0;
-  const searchCurrentMatchExpandableKey = searchCurrentMatch?.expandableIds?.join('\u0000') ?? '';
+  const searchCurrentMatch = trajectorySelection ? searchMatches.find(match =>
+    match.turnId === trajectorySelection.node.turnId && (trajectorySelection.node.focusItemId
+      ? match.flowItemId === trajectorySelection.node.focusItemId : match.type === 'user-message')) : undefined;
+  const closeTrajectory = useCallback(() => {
+    setTrajectoryOpen(false); setTrajectorySelection(undefined); clearSearch();
+    setTrajectorySearchInput(''); setTrajectorySearchState({ count: 0, current: 0 });
+    setTrajectorySelectionClearRequest(value => value + 1);
+    virtualListRef.current?.clearSearchMatch();
+  }, [clearSearch]);
+
+  useEffect(() => { virtualListRef.current?.clearSearchMatch(); }, [searchQuery]);
 
   useFlowChatSync();
   useFlowChatCopyDialog();
@@ -1411,8 +1426,12 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
   useLayoutEffect(() => {
     autoTailTurnKeyRef.current = null;
     releasedHistoryCompletionKeyRef.current = null;
-    searchFullHistorySessionIdRef.current = null;
-  }, [activeSession?.sessionId]);
+    setTrajectoryOpen(false);
+    setTrajectorySelection(undefined);
+    setTrajectorySearchInput(''); setTrajectorySearchState({ count: 0, current: 0 });
+    clearSearch();
+    virtualListRef.current?.clearSearchMatch();
+  }, [activeSession?.sessionId, surfaceScope.epoch, clearSearch]);
 
   useEffect(() => {
     setHistoryInitialContentReadyKey(null);
@@ -1561,35 +1580,6 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     turnSummaries.length,
   ]);
 
-  useEffect(() => {
-    if (searchCurrentMatchVirtualItemIndex < 0 || !searchQuery.trim()) {
-      virtualListRef.current?.clearSearchMatch();
-      return;
-    }
-
-    const frameId = requestAnimationFrame(() => {
-      virtualListRef.current?.scrollToSearchMatch({
-        virtualItemIndex: searchCurrentMatchVirtualItemIndex,
-        query: searchQuery,
-        flowItemId: searchCurrentMatchFlowItemId,
-        occurrenceIndex: searchCurrentMatchOccurrenceIndex,
-        expandableIds: searchCurrentMatchExpandableKey
-          ? searchCurrentMatchExpandableKey.split('\u0000')
-          : undefined,
-      });
-    });
-    return () => {
-      cancelAnimationFrame(frameId);
-    };
-  }, [
-    searchCurrentMatchFlowItemId,
-    searchCurrentMatchTurnId,
-    searchCurrentMatchExpandableKey,
-    searchCurrentMatchVirtualItemIndex,
-    searchCurrentMatchOccurrenceIndex,
-    searchQuery,
-  ]);
-
   const applyHistoryPresentation = useCallback((
     sessionId: string,
     presentation: SessionHistoryPresentation,
@@ -1756,27 +1746,33 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
     restoreTailPresentation,
   ]);
 
-  const handleSearchChange = useCallback((query: string) => {
-    setSearchQuery(query);
-    const sessionId = activeSession?.sessionId;
-    if (
-      !query.trim()
-      || !sessionId
-      || activeSession.isPartial !== true
-      || searchFullHistorySessionIdRef.current === sessionId
-    ) {
-      return;
-    }
+  const handleTrajectoryRange = useCallback((range: TrajectoryRangeSummary | null, activate: boolean) => {
+    const session = flowChatStore.getState().sessions.get(activeSessionIdRef.current ?? '');
+    if (session) showTrajectoryRange(session, range, t('trajectory.rangeDetails'), activate, trajectoryViewId);
+  }, [t, trajectoryViewId]);
 
-    searchFullHistorySessionIdRef.current = sessionId;
-    void flowChatStore.ensureSessionFullHistory(sessionId, 'flowchat-search').then(ready => {
-      if (ready && activeSessionIdRef.current === sessionId) {
-        restoreTailPresentation({ discardRecentHistory: true });
-      } else if (activeSessionIdRef.current === sessionId) {
-        searchFullHistorySessionIdRef.current = null;
-      }
+  const navigateTrajectory = useTrajectoryNavigation({
+    session: activeSession, items: virtualItems, listRef: virtualListRef, rootRef: chatScopeRef,
+    present: applyHistoryPresentation, expand: handleExpandGroup, viewId: trajectoryViewId,
+    selectionClearRequest: trajectorySelectionClearRequest,
+  });
+  const clearTrajectorySelection = useCallback(() => {
+    setTrajectorySelection(undefined);
+    setTrajectorySelectionClearRequest(value => value + 1);
+    virtualListRef.current?.clearSearchMatch();
+  }, []);
+  const selectTrajectory = useCallback(async (selection: TrajectorySelection) => {
+    const located = await navigateTrajectory(selection);
+    if (located) setTrajectorySelection(selection);
+    return located;
+  }, [navigateTrajectory]);
+  useEffect(() => globalEventBus.on<TrajectoryPanelData>(TRAJECTORY_NAVIGATE_EVENT, request => {
+    if (!isViewportActive || request.viewId !== trajectoryViewId || request.surfaceId !== getActiveSurfaceScope().surfaceId
+      || request.sessionId !== activeSessionIdRef.current) return;
+    void selectTrajectory({ node: request.node, query: request.query }).catch(error => {
+      log.warn('Failed to locate trajectory endpoint', { error });
     });
-  }, [activeSession?.isPartial, activeSession?.sessionId, restoreTailPresentation, setSearchQuery]);
+  }), [isViewportActive, trajectoryViewId, selectTrajectory]);
 
   const navigateToTurn = useCallback(async (target: FlowChatTurnRailItem | string) => {
     const targetItem = typeof target === 'string'
@@ -2726,13 +2722,12 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
           sessionId={activeSession?.sessionId}
           isRightPanelOpen={isRightPanelOpen}
           onToggleRightPanel={onToggleRightPanel}
-          searchQuery={searchQuery}
-          onSearchChange={handleSearchChange}
-          searchMatchCount={searchMatches.length}
-          searchCurrentMatch={searchMatches.length > 0 ? searchCurrentMatchIndex + 1 : 0}
-          onSearchNext={handleSearchNext}
-          onSearchPrev={handleSearchPrev}
-          onSearchClose={clearSearch}
+          onTrajectoryOpen={openTrajectory}
+          trajectoryOpen={trajectoryOpen}
+          searchQuery={trajectorySearchInput} onSearchChange={setTrajectorySearchInput}
+          searchMatchCount={trajectorySearchState.count} searchCurrentMatch={trajectorySearchState.current}
+          onSearchNext={() => trajectoryRef.current?.next()} onSearchPrev={() => trajectoryRef.current?.previous()}
+          onSearchClose={closeTrajectory}
           searchOpenRequest={searchOpenRequest}
           backgroundCommands={headerBackgroundCommands}
           onOpenSessionTreeSession={handleOpenSessionTreeSession}
@@ -2745,6 +2740,14 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
           onStopAllBackgroundCommands={handleStopAllBackgroundCommands}
         />
 
+        {trajectoryOpen && activeSession && <TrajectoryExplorer
+          ref={trajectoryRef}
+          key={surfaceScope.key('trajectory', activeSession.sessionId)} session={activeSession}
+          searchInput={trajectorySearchInput} onQueryChange={setSearchQuery} onSearchStateChange={setTrajectorySearchState}
+          onSelect={selectTrajectory} onClose={closeTrajectory} onRangeChange={handleTrajectoryRange}
+          onClearSelection={clearTrajectorySelection}
+          selectedNodeKey={trajectorySelection ? trajectoryNodeKey(trajectorySelection.node) : undefined} />}
+
         <BackgroundCommandInputDialog
           command={backgroundCommandInputTarget}
           isSending={isSendingBackgroundCommandInput}
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.appearance.ts b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.appearance.ts
index f11242fe63..bb3243f577 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.appearance.ts
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.appearance.ts
@@ -4,6 +4,7 @@ export const virtualItemAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'virtual-item',
   parts: [{ id: 'root' }, { id: 'imageAnalyzing' }, { id: 'placeholder' }, { id: 'searchLine' }],
   states: [
+    { id: 'itemFocus', selector: { kind: 'self', suffix: '[data-openbitfun-state~="itemFocus"]' } },
     { id: 'searchMatch', selector: { kind: 'self', suffix: '[data-openbitfun-state~="searchMatch"]' } },
     { id: 'searchCurrent', selector: { kind: 'self', suffix: '[data-openbitfun-state~="searchCurrent"]' } },
   ],
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
index 74aeae1cdb..a283960936 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
@@ -125,7 +125,7 @@
   }
 }
 
-// The current text line is a passive overlay, never a new transcript surface.
+// Search follows the current text line; item navigation covers the target card.
 .flowchat-search-line {
   position: absolute;
   pointer-events: none;
@@ -138,6 +138,18 @@
     inset-inline-start: calc(-1 * var(--openbitfun-space-2));
     border-inline-start: var(--openbitfun-focus-width) solid var(--openbitfun-color-control-switch-track-checked);
   }
+
+  &[data-openbitfun-state~='itemFocus'] {
+    background: var(--openbitfun-color-accent-surface);
+    border-radius: var(--openbitfun-radius-sm);
+
+    &::before {
+      inset-block: var(--_flowchat-focus-marker-top) auto;
+      inset-inline-start: calc(var(--_flowchat-focus-marker-left) - var(--openbitfun-space-2));
+      block-size: var(--_flowchat-focus-marker-height);
+      border-color: var(--openbitfun-color-accent-default);
+    }
+  }
 }
 
 [data-flowchat-highlight-search-current]::highlight(openbitfun-flowchat-search-current) {
@@ -151,7 +163,8 @@
 }
 
 @media (forced-colors: active) {
-  .flowchat-search-line {
+  .flowchat-search-line,
+  .flowchat-search-line[data-openbitfun-state~='itemFocus'] {
     background: transparent;
 
     &::before {
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
index 357da28fab..3f221788cd 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
@@ -56,6 +56,7 @@ export const VirtualItemRenderer = React.memo<VirtualItemRendererProps>(
       measureRef?.(element);
     }, [measureRef]);
     const searchLine = useFlowChatSearchPresentation(wrapper, searchQuery, matches, currentMatch);
+    const itemFocus = searchLine && 'markerTop' in searchLine ? searchLine : null;
 
     const content = (() => {
       switch (item.type) {
@@ -173,7 +174,15 @@ export const VirtualItemRenderer = React.memo<VirtualItemRendererProps>(
           className="flowchat-search-line"
           data-openbitfun-component="virtual-item"
           data-openbitfun-part="searchLine"
-          style={searchLine ?? undefined}
+          data-openbitfun-state={itemFocus ? 'itemFocus' : undefined}
+          style={searchLine ? {
+            top: searchLine.top, left: searchLine.left, width: searchLine.width, height: searchLine.height,
+            ...(itemFocus ? {
+              '--_flowchat-focus-marker-top': `${itemFocus.markerTop}px`,
+              '--_flowchat-focus-marker-left': `${itemFocus.markerLeft}px`,
+              '--_flowchat-focus-marker-height': `${itemFocus.markerHeight}px`,
+            } : {}),
+          } as React.CSSProperties : undefined}
         />
       </div>
     );
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
index 41624020fa..03e7ddb1b5 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx
@@ -12,12 +12,20 @@ import { readingLinePxForViewport, tailSpacerPxForViewport } from './flowChatTai
 import { ONE_SHOT_NAVIGATION_HOLD_MS } from './flowChatViewportOwnership';
 import { VirtualMessageList, type VirtualMessageListRef } from './VirtualMessageList';
 import type { FlowChatViewportOwnerApi } from './useFlowChatViewportOwner';
+import { FlowChatVolatileContext } from './FlowChatContext';
+import { useFlowGroupState } from './useFlowGroupState';
+import { useTrajectoryNavigation } from '../../trajectory/useTrajectoryNavigation';
+import type { TrajectorySelection } from '../../trajectory/TrajectoryExplorer';
+import type { Session } from '../../types/flow-chat';
 import { useFlowChatReaderValue } from '../../timeline/readerState';
+import { projectAdjacentFlowGroups } from '../../grouping/groupProjection';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 const mocks = vi.hoisted(() => ({
   items: [] as Array<Record<string, unknown>>,
+  trajectoryPanel: vi.fn(),
+  renderTimelineMembers: false,
   activeSession: null as Record<string, unknown> | null,
   scrollItemIntoView: vi.fn(),
   scrollToOffset: vi.fn(),
@@ -195,6 +203,8 @@ vi.mock('../../store/modernFlowChatStore', () => {
   };
 });
 
+vi.mock('../../trajectory/trajectoryPanel', () => ({ openTrajectoryPanel: mocks.trajectoryPanel }));
+
 vi.mock('../../hooks/useActiveSessionState', () => ({
   useActiveSessionState: () => ({ isProcessing: false }),
 }));
@@ -254,7 +264,10 @@ vi.mock('./VirtualItemRenderer', () => ({
       data-virtual-item-key={`${item.type}:${item.turnId}:${item.data?.id ?? item.data?.groupId ?? ''}`}
       data-virtual-index={index}
     >
-      {item.data?.content ?? item.turnId}
+      {mocks.renderTimelineMembers && item.type === 'model-round'
+        ? item.timeline?.kind === 'round-header' ? item.data.content : item.timeline?.kind === 'round-footer' ? null
+          : item.data.items.map((member: any) => <div key={member.id} data-flow-item-id={member.id}>{member.content ?? member.toolName}</div>)
+        : item.data?.content ?? item.turnId}
     </div>
   ),
 }));
@@ -359,6 +372,7 @@ describe('VirtualMessageList natural scroll contract', () => {
     };
     mocks.isFollowingOutput = false;
     mocks.followsNow = false;
+    mocks.trajectoryPanel.mockReset();
     mocks.scrollItemIntoView.mockReset();
     mocks.scrollToOffset.mockReset();
     mocks.cancelAim.mockReset();
@@ -374,6 +388,7 @@ describe('VirtualMessageList natural scroll contract', () => {
     mocks.viewportOwner = null;
     mocks.setVisibleTurnInfo.mockReset();
     mocks.renderItemMetadata = true;
+    mocks.renderTimelineMembers = false;
     vi.stubGlobal('ResizeObserver', TestResizeObserver);
     vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
       nextAnimationFrameId += 1;
@@ -870,6 +885,134 @@ describe('VirtualMessageList natural scroll contract', () => {
     } finally { restoreRanges(); restoreLayout(); }
   });
 
+  it.each(['item', 'search'] as const)('commits trajectory user-message details after real %s positioning and highlighting', async mode => {
+    const restoreLayout = fakeLayout({ clientHeight: 600, scrollHeight: 2400, turnTopFromScrollerTop: 100 });
+    const restoreRanges = searchRangeLayout(() => new DOMRect(100, 800, 200, 20));
+    let select!: (selection: TrajectorySelection) => Promise<boolean>;
+    const listRef = React.createRef<VirtualMessageListRef>();
+    const rootRef = React.createRef<HTMLDivElement>();
+    function Harness() {
+      select = useTrajectoryNavigation({ session: mocks.activeSession as unknown as Session, items: mocks.items as any,
+        listRef, rootRef, present: vi.fn(), expand: vi.fn(), viewId: 'test-view' });
+      return <div ref={rootRef}><VirtualMessageList ref={listRef} /></div>;
+    }
+    try {
+      act(() => root.render(<Harness />));
+      await settleOpenReveal();
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      const wrapper = scroller.querySelector<HTMLElement>('.virtual-item-wrapper')!;
+      wrapper.getBoundingClientRect = () => new DOMRect(0, 800, 600, 40);
+      const highlight = vi.fn(); wrapper.addEventListener('flowchat:focus-line', highlight);
+      const owner = mocks.viewportOwner as FlowChatViewportOwnerApi;
+      mocks.scrollToOffset.mockImplementation((topPx, options) => owner.write({ ...options, topPx }));
+      mocks.scrollItemIntoView.mockImplementation((_index, options) => owner.write({ ...options, topPx: 700 }));
+      scroller.scrollTop = 10;
+      let pending!: Promise<boolean>;
+      act(() => { pending = select({ node: { id: 'message-1', turnId: 'turn-1', turnOrdinal: 0,
+        kind: 'user', label: '', preview: '', timestamp: 1, status: 'completed', matched: mode === 'search',
+        matchField: mode === 'search' ? 'content' : undefined }, query: mode === 'search' ? 'First' : '' }); });
+      expect(mocks.trajectoryPanel).not.toHaveBeenCalled();
+      await settleOpenReveal();
+      expect(await pending).toBe(true);
+      expect(scroller.scrollTop).toBeGreaterThan(10);
+      expect(highlight).toHaveBeenCalled();
+      expect(mocks.trajectoryPanel).toHaveBeenCalledTimes(1);
+    } finally { restoreRanges(); restoreLayout(); }
+  });
+
+  it.each(['model', 'collapsed-tool', 'historical-round'] as const)('synchronizes a %s trajectory through projection, positioning and panel acknowledgement', async kind => {
+    mocks.activeSession = { ...mocks.activeSession, sessionId: `trajectory-${kind}` };
+    const tool = (id: string) => ({ id, type: 'tool', toolName: 'Read', timestamp: 1, status: 'completed',
+      toolCall: { id, input: { file_path: `/src/${id}.ts` } }, toolResult: { success: true, result: {} } });
+    const text = { id: 'text', type: 'text', timestamp: 1, status: 'completed', isStreaming: false, content: 'Model text' };
+    function HistoricalSource() {
+      const [open] = useFlowChatReaderValue('round:turn-1:current:history', false);
+      return open ? <div data-flow-item-id="old-tool">Earlier result</div> : <button>Earlier rounds</button>;
+    }
+    const round = { id: kind === 'historical-round' ? 'current' : 'round', index: 0, startTime: 1,
+      status: 'completed', isStreaming: false, isComplete: true,
+      items: kind === 'collapsed-tool' ? [tool('first'), tool('tool')] : kind === 'model' ? [text] : [],
+      ...(kind === 'historical-round' ? { historyRounds: [{ id: 'old', items: [tool('old-tool')] }], content: <HistoricalSource /> } : {}) };
+    mocks.items = projectAdjacentFlowGroups([{ type: 'model-round', turnId: 'turn-1', data: round, isLastRound: true, isTurnComplete: true }] as any);
+    mocks.renderTimelineMembers = true;
+    const restoreLayout = fakeLayout({ clientHeight: 600, scrollHeight: 2400, turnTopFromScrollerTop: 100 });
+    const restoreRanges = searchRangeLayout(() => new DOMRect(100, 800, 200, 20));
+    let select!: (selection: TrajectorySelection) => Promise<boolean>;
+    const listRef = React.createRef<VirtualMessageListRef>(); const rootRef = React.createRef<HTMLDivElement>();
+    function Harness() {
+      const groups = useFlowGroupState(mocks.items as any, new Map([['round:explore:first', false]]), `trajectory-${kind}`);
+      select = useTrajectoryNavigation({ session: mocks.activeSession as unknown as Session, items: mocks.items as any,
+        listRef, rootRef, present: vi.fn(), expand: groups.onExpandGroup, viewId: 'test-view' });
+      return <FlowChatVolatileContext.Provider value={{ groupStates: groups.groupStates }}>
+        <div ref={rootRef}><VirtualMessageList ref={listRef} /></div>
+      </FlowChatVolatileContext.Provider>;
+    }
+    try {
+      act(() => root.render(<Harness />)); await settleOpenReveal();
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      const owner = mocks.viewportOwner as FlowChatViewportOwnerApi;
+      const itemId = kind === 'model' ? 'text' : kind === 'historical-round' ? 'old-tool' : 'tool';
+      const highlight = vi.fn();
+      rootRef.current!.addEventListener('flowchat:focus-line', highlight, true);
+      if (kind !== 'model') expect(container.querySelector(`[data-flow-item-id="${itemId}"]`)).toBeNull();
+      mocks.scrollToOffset.mockImplementation((topPx, options) => owner.write({ ...options, topPx }));
+      mocks.scrollItemIntoView.mockImplementation((_index, options) => owner.write({ ...options, topPx: 700 }));
+      scroller.scrollTop = 400;
+      let pending!: Promise<boolean>;
+      act(() => { pending = select({ node: { id: kind === 'model' ? 'round' : itemId, turnId: 'turn-1', turnOrdinal: 0,
+        roundId: kind === 'historical-round' ? 'old' : 'round', focusItemId: itemId,
+        kind: kind === 'model' ? 'model' : 'tool', label: '', preview: '', timestamp: 1, status: 'completed', matched: false }, query: '' }); });
+      expect(mocks.trajectoryPanel).not.toHaveBeenCalled();
+      await settleOpenReveal();
+      expect(await pending).toBe(true);
+      expect(container.querySelector(`[data-flow-item-id="${itemId}"]`)).not.toBeNull();
+      expect(scroller.scrollTop).not.toBe(400);
+      expect(highlight).toHaveBeenCalled();
+      expect(mocks.trajectoryPanel).toHaveBeenCalledTimes(1);
+      expect(mocks.trajectoryPanel.mock.calls[0][1].focusItemId).toBe(itemId);
+    } finally { restoreRanges(); restoreLayout(); }
+  });
+
+  it('opens the owning history disclosure before focusing a superseded model round tool', async () => {
+    function HistoryTool() {
+      const [open] = useFlowChatReaderValue('round:turn-1:current:history', false);
+      return open ? <div data-flow-item-id="older-tool">Historical result</div> : <button>History</button>;
+    }
+    const item = modelRound('turn-1', 'current', <HistoryTool />);
+    mocks.items = [{ ...item, data: { ...item.data, historyRounds: [{ id: 'older', items: [{ id: 'older-tool', type: 'tool' }] }] } }];
+    const restoreLayout = fakeLayout({ clientHeight: 600, scrollHeight: 2400, turnTopFromScrollerTop: 100 });
+    const restoreRanges = searchRangeLayout(() => new DOMRect(0, 160, 200, 20));
+    try {
+      const listRef = React.createRef<VirtualMessageListRef>();
+      act(() => root.render(<VirtualMessageList ref={listRef} />));
+      await settleOpenReveal();
+      mocks.scrollToOffset.mockClear();
+      act(() => expect(listRef.current?.focusFlowItem('older-tool', { sourceIndex: 0, roundId: 'older' })).toBe(false));
+      expect(container.querySelector('[data-flow-item-id="older-tool"]')).not.toBeNull();
+      act(() => expect(listRef.current?.focusFlowItem('older-tool', { sourceIndex: 0, roundId: 'older' })).toBe(true));
+      expect(mocks.scrollToOffset).toHaveBeenCalledTimes(1);
+    } finally { restoreRanges(); restoreLayout(); }
+  });
+
+  it('focuses a visible collapsed card even when its first text range is hidden', async () => {
+    mocks.items = [userMessage('turn-1', 'message-1', 'Source')];
+    const restoreLayout = fakeLayout({ clientHeight: 600, scrollHeight: 2400, turnTopFromScrollerTop: 100 });
+    const restoreRanges = searchRangeLayout(() => new DOMRect(0, 0, 0, 0));
+    try {
+      const listRef = React.createRef<VirtualMessageListRef>();
+      act(() => root.render(<VirtualMessageList ref={listRef} />));
+      await settleOpenReveal();
+      const scroller = container.querySelector<HTMLElement>('[data-flowchat-scroller]')!;
+      const card = document.createElement('div');
+      card.dataset.flowItemId = 'collapsed-tool'; card.textContent = 'Hidden tool output';
+      card.getBoundingClientRect = () => new DOMRect(0, 160, 300, 28);
+      scroller.querySelector('.virtual-item-wrapper')!.append(card);
+      mocks.scrollToOffset.mockClear();
+      act(() => expect(listRef.current?.focusFlowItem('collapsed-tool')).toBe(true));
+      expect(mocks.scrollToOffset).toHaveBeenCalledTimes(1);
+    } finally { restoreRanges(); restoreLayout(); }
+  });
+
   it.each(['explore', 'context', 'interface'].flatMap(category => [
     { category, streaming: false }, { category, streaming: true },
   ]))('opens collected thinking before a search hit: %j', async ({ category, streaming }) => {
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
index 307ab9f62c..f66861fb56 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
@@ -187,6 +187,14 @@ export interface FlowChatTextNavigationTarget {
   excerpt?: ConversationExcerptContext;
   onUnavailable?: () => void;
   isCurrent?: () => boolean;
+  onLocated?: (element: HTMLElement) => void;
+}
+
+export interface FlowChatItemFocusTarget {
+  virtualItemIndex: number;
+  turnId: string;
+  flowItemId?: string;
+  roundId?: string;
 }
 
 export interface VirtualMessageListRef {
@@ -213,7 +221,11 @@ export interface VirtualMessageListRef {
    * Place a flow item in the readable viewport, clear of fades and the composer.
    * `false` means it is not rendered yet, so the caller should ask again.
    */
-  focusFlowItem: (flowItemId: string) => boolean;
+  /** Stop follow/old aims without pretending the reader is dragging the transcript. */
+  prepareItemNavigation: () => void;
+  /** Return the concrete source only after positioning is permitted; null means retry. */
+  focusItem: (target: FlowChatItemFocusTarget) => HTMLElement | null;
+  focusFlowItem: (flowItemId: string, source?: { sourceIndex: number; roundId?: string }) => boolean;
   captureViewportSnapshot: () => FlowChatViewportSnapshot | null;
   restoreViewportSnapshot: (snapshot: FlowChatViewportSnapshot) => boolean;
 }
@@ -1775,15 +1787,56 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
    * Returns whether the item was there to aim at. A focus request arriving
    * before its Turn has rendered asks again on the next frame.
    */
-  const focusFlowItem = useCallback((flowItemId: string): boolean => {
+  const focusItemElement = useCallback((flowItemId: string | undefined, source?: { sourceIndex: number; roundId?: string }): HTMLElement | null => {
     const scroller = scrollerElementRef.current;
-    if (!scroller || !flowItemId) return false;
-    if (requestDeferredContentItem(scroller, flowItemId)) return false;
-    const element = findFlowChatFocusElement(scroller, flowItemId);
+    if (!scroller || !isUsableFlowChatViewportRect({ width: scroller.clientWidth, height: scroller.clientHeight })) return null;
+    exitFollowOutput('scroll-to-index');
+    if (!viewportOwner.claim('one-shot-navigation', { holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS })) return null;
+    const owner = source && sourceItems[source.sourceIndex];
+    if (owner?.type === 'model-round') {
+      const historyRound = owner.data.historyRounds?.find(round => round.id === source?.roundId);
+      const key = `round:${owner.turnId}:${owner.data.id}`;
+      if (historyRound && !reader.get(`${key}:history`, false)) {
+        reader.set(`${key}:history`, true); return null;
+      }
+      const round = historyRound ?? owner.data;
+      const activeAttempt = round.attempts?.filter(attempt => historyRound || !attempt.diagnostic)
+        .reduce<typeof round.attempts[number] | undefined>((latest, attempt) => !latest || attempt.index > latest.index ? attempt : latest, undefined);
+      const focusMember = round.items.find(item => item.id === flowItemId)
+        ?? round.attempts?.flatMap(attempt => attempt.items).find(item => item.id === flowItemId);
+      if (flowItemId && focusMember?.type === 'thinking' && reader.get('navigation:thinking', '') !== flowItemId) {
+        reader.set('navigation:thinking', flowItemId); return null;
+      }
+      if (round.attempts?.some(attempt => attempt !== activeAttempt && attempt.items.some(item => item.id === flowItemId))) {
+        if (historyRound) {
+          const choices = JSON.parse(reader.get(`${key}:attempts`, '{}'));
+          if (!choices[historyRound.id]) { reader.set(`${key}:attempts`, JSON.stringify({ ...choices, [historyRound.id]: true })); return null; }
+        } else if (!reader.get(`${key}:retries`, false)) { reader.set(`${key}:retries`, true); return null; }
+      }
+    }
+    const blockIndex = findTimelineBlockIndex(virtualItems, source?.sourceIndex ?? -1, flowItemId);
+    const block = virtualItems[blockIndex]?.timeline;
+    if (block?.kind === 'group-header' && block.group) {
+      const key = `group:${block.group.groupId}:`;
+      if (reader.get(`${key}query`, '') || reader.get(`${key}tool`, 'all') !== 'all' || reader.get(`${key}status`, 'all') !== 'all') {
+        reader.set(`${key}query`, ''); reader.set(`${key}tool`, 'all'); reader.set(`${key}status`, 'all'); return null;
+      }
+    }
+    if (owner?.type === 'background-run') {
+      const wrapper = Array.from(scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper'))
+        .find(element => Number(element.dataset.virtualIndex) === blockIndex);
+      const disclosure = wrapper?.querySelector<HTMLDetailsElement>('details.background-run');
+      if (disclosure && !disclosure.open) { disclosure.open = true; return null; }
+    }
+    const wrapper = Array.from(scroller.querySelectorAll<HTMLElement>('.virtual-item-wrapper'))
+      .find(element => Number(element.dataset.virtualIndex) === blockIndex);
+    const focusRoot = source ? wrapper : scroller;
+    if (focusRoot && flowItemId && requestDeferredContentItem(focusRoot, flowItemId)) return null;
+    const element = !focusRoot ? null : flowItemId ? findFlowChatFocusElement(focusRoot, flowItemId)
+      : getFlowChatSearchTextRoot(focusRoot);
     if (!element) {
-      const blockIndex = findTimelineBlockIndex(virtualItems, -1, flowItemId);
-      if (blockIndex >= 0) virtualizer.scrollItemIntoView(blockIndex, { align: 'center', owner: 'one-shot-navigation' });
-      return false;
+      if (blockIndex >= 0 && !wrapper) virtualizer.scrollItemIntoView(blockIndex, { align: 'center', owner: 'one-shot-navigation' });
+      return null;
     }
 
     exitFollowOutput('scroll-to-index');
@@ -1793,11 +1846,12 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     const range = findFlowChatFocusTextRange(element);
     if (range) revealContainedRange(range, scroller);
     const line = range && Array.from(range.getClientRects()).find(rect => rect.width > 0 && rect.height > 0);
-    if (range && !line) return false;
+    const elementRect = element.getBoundingClientRect();
+    // Collapsed cards may contain hidden text. Their visible header is still a valid focus target.
+    if (elementRect.height <= 0) return null;
     const readable = readableViewportBounds(scroller, inputOverlayInsetPx);
     const readableHeight = readable.bottom - readable.top;
-    if (readableHeight <= 0) return false;
-    const elementRect = element.getBoundingClientRect();
+    if (readableHeight <= 0) return null;
     // Long sources need reading room below their opening line. Short items can
     // fit at the center, but both use the same fade/input-safe area as search.
     const longSource = elementRect.height > readableHeight;
@@ -1814,8 +1868,17 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       owner: 'one-shot-navigation',
       holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
     });
-    return true;
-  }, [exitFollowOutput, inputOverlayInsetPx, setNavigatedTurn, viewportAnchor, virtualItems, virtualizer]);
+    return element;
+  }, [exitFollowOutput, inputOverlayInsetPx, setNavigatedTurn, viewportAnchor, sourceItems, reader, virtualItems, virtualizer, viewportOwner]);
+
+  const focusFlowItem = useCallback((flowItemId: string, source?: { sourceIndex: number; roundId?: string }) => (
+    focusItemElement(flowItemId, source) !== null
+  ), [focusItemElement]);
+
+  const focusItem = useCallback((target: FlowChatItemFocusTarget) => {
+    if (sourceItems[target.virtualItemIndex]?.turnId !== target.turnId) return null;
+    return focusItemElement(target.flowItemId, { sourceIndex: target.virtualItemIndex, roundId: target.roundId });
+  }, [focusItemElement, sourceItems]);
 
   const prepareTurnNavigation = useCallback((
     turnId: string,
@@ -1927,7 +1990,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     let materializing: number | null = null;
     const resolve = () => {
       if (searchNavigationRequestIdRef.current !== requestId) return;
-      if (target.isCurrent && !target.isCurrent()) { virtualizer.cancelAim(); return; }
+      if (target.isCurrent && !target.isCurrent()) { virtualizer.cancelAim(); target.onUnavailable?.(); return; }
       attempts += 1;
       const retry = () => {
         if (attempts < SEARCH_NAVIGATION_MAX_ATTEMPTS) requestAnimationFrame(resolve);
@@ -2008,6 +2071,9 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         retry();
         return;
       }
+      if (!viewportOwner.claim('one-shot-navigation', { holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS })) {
+        retry(); return;
+      }
       // Read the design-system spacing used by the scroller's edge masks.
       // The floating input and its fade are outside the readable viewport.
       const { top: readableTop, bottom: readableBottom } = readableViewportBounds(scroller, inputOverlayInsetPx);
@@ -2021,6 +2087,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
       }
       if (rangeRect.top >= readableTop && rangeRect.bottom <= readableBottom) {
         if (materializing !== null) virtualizer.cancelAim();
+        target.onLocated?.(root);
         return;
       }
 
@@ -2036,9 +2103,10 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         owner: 'one-shot-navigation',
         holdForMs: ONE_SHOT_NAVIGATION_HOLD_MS,
       });
+      target.onLocated?.(root);
     };
     resolve();
-  }, [clearSearchMatch, exitFollowOutput, inputOverlayInsetPx, setNavigatedTurn, viewportAnchor, sourceItems, reader, virtualizer]);
+  }, [clearSearchMatch, exitFollowOutput, inputOverlayInsetPx, setNavigatedTurn, viewportAnchor, sourceItems, reader, virtualizer, viewportOwner]);
 
   const requestHistoryBoundary = useCallback((direction: SessionHistoryWindowDirection, synchronizeHistory = false) => {
     if (synchronizeHistory) {
@@ -2221,6 +2289,13 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     updateIsAtBottom();
   }, [enterFollowOutput, historyPager, onUserScrollIntent, setNavigatedTurn, updateIsAtBottom]);
 
+  const prepareItemNavigation = useCallback(() => {
+    historyPager.reset();
+    clearSearchMatch();
+    virtualizer.cancelAim();
+    exitFollowOutput('scroll-to-index');
+  }, [historyPager, clearSearchMatch, virtualizer, exitFollowOutput]);
+
   useImperativeHandle(ref, () => ({
     scrollToTurn,
     scrollToIndex,
@@ -2236,12 +2311,16 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     navigateToTurnWithStatus,
     prepareTurnNavigation,
     focusFlowItem,
+    focusItem,
+    prepareItemNavigation,
     captureViewportSnapshot,
     restoreViewportSnapshot,
   }), [
     captureViewportSnapshot,
     clearSearchMatch,
     focusFlowItem,
+    focusItem,
+    prepareItemNavigation,
     isTurnRenderedInViewport,
     isTurnTextRenderedInViewport,
     navigateToTurn,
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatSearchPresentation.test.ts b/src/web-ui/src/flow_chat/components/modern/flowChatSearchPresentation.test.ts
index 94173f1975..db409c36c2 100644
--- a/src/web-ui/src/flow_chat/components/modern/flowChatSearchPresentation.test.ts
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatSearchPresentation.test.ts
@@ -3,6 +3,7 @@
 import { describe, expect, it } from 'vitest';
 import {
   computeFlowChatSearchLineBox,
+  measureFlowChatFocusItem,
   resolveFlowChatSearchPresentation,
 } from './flowChatSearchPresentation';
 import type { SearchMatch } from './useFlowChatSearch';
@@ -53,6 +54,34 @@ describe('FlowChat search text presentation', () => {
   });
 });
 
+describe('FlowChat item navigation geometry', () => {
+  it('covers the whole tool and anchors the short marker to its leading icon, including gutter icons', () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = '<div data-flow-item-id="tool"><span data-openbitfun-component="flow-chat-tool-card" data-openbitfun-part="icon"></span><button>Tool name</button></div>';
+    const item = wrapper.firstElementChild as HTMLElement;
+    const icon = item.firstElementChild as HTMLElement;
+    wrapper.getBoundingClientRect = () => new DOMRect(100, 100, 800, 300);
+    item.getBoundingClientRect = () => new DOMRect(132, 120, 700, 180);
+    icon.getBoundingClientRect = () => new DOMRect(108, 124, 16, 16);
+    expect(measureFlowChatFocusItem(wrapper, item)).toEqual({
+      left: 8, top: 20, width: 724, height: 180, markerLeft: 0, markerTop: 4, markerHeight: 16,
+    });
+  });
+
+  it('covers the user message bubble when navigation resolves its inner text content', () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = '<div class="user-message-item"><div class="user-message-item__content"></div></div>';
+    const item = wrapper.firstElementChild as HTMLElement;
+    wrapper.getBoundingClientRect = () => new DOMRect(100, 100, 800, 300);
+    item.getBoundingClientRect = () => new DOMRect(120, 140, 500, 80);
+    expect(measureFlowChatFocusItem(wrapper, item.firstElementChild as HTMLElement)).toMatchObject({
+      left: 20, top: 40, width: 500, height: 80,
+    });
+    item.getBoundingClientRect = () => new DOMRect();
+    expect(measureFlowChatFocusItem(wrapper, item)).toBeNull();
+  });
+});
+
 describe('FlowChat current search line geometry', () => {
   const wrapper = new DOMRect(100, 200, 900, 600);
   const source = new DOMRect(148, 230, 804, 480);
diff --git a/src/web-ui/src/flow_chat/components/modern/flowChatSearchPresentation.ts b/src/web-ui/src/flow_chat/components/modern/flowChatSearchPresentation.ts
index f1547c84a3..b5873821d2 100644
--- a/src/web-ui/src/flow_chat/components/modern/flowChatSearchPresentation.ts
+++ b/src/web-ui/src/flow_chat/components/modern/flowChatSearchPresentation.ts
@@ -1,4 +1,5 @@
 import {
+  findFlowChatFocusTextRange,
   findFlowChatSearchTextRanges,
   getFlowChatSearchTextRoot,
 } from './flowChatSearchDom';
@@ -11,6 +12,35 @@ export interface FlowChatSearchLineBox {
   height: number;
 }
 
+export interface FlowChatFocusBox extends FlowChatSearchLineBox {
+  markerTop: number;
+  markerLeft: number;
+  markerHeight: number;
+}
+
+/** Item navigation covers the whole item; its short marker follows the leading icon. */
+export function measureFlowChatFocusItem(wrapper: HTMLElement, source: HTMLElement): FlowChatFocusBox | null {
+  const item = source.closest<HTMLElement>('[data-flow-item-id], [data-tool-card-id], .user-message-item') ?? source;
+  if (!wrapper.contains(item)) return null;
+  const itemRect = item.getBoundingClientRect();
+  if (itemRect.width <= 0 || itemRect.height <= 0) return null;
+  const icon = item.querySelector<HTMLElement>('[data-openbitfun-component="flow-chat-tool-card"][data-openbitfun-part="icon"]');
+  const iconRect = icon?.getBoundingClientRect();
+  const visibleIcon = iconRect && iconRect.width > 0 && iconRect.height > 0 ? iconRect : undefined;
+  const leading = visibleIcon ?? Array.from(findFlowChatFocusTextRange(source)?.getClientRects() ?? [])
+    .find(rect => rect.width > 0 && rect.height > 0) ?? itemRect;
+  const wrapperRect = wrapper.getBoundingClientRect();
+  // Tool icons can sit in the reading gutter, outside the item's text bounds.
+  const left = Math.min(itemRect.left, leading.left);
+  const right = Math.max(itemRect.right, leading.right);
+  const top = Math.min(itemRect.top, leading.top);
+  const bottom = Math.max(itemRect.bottom, leading.bottom);
+  return {
+    top: top - wrapperRect.top, left: left - wrapperRect.left, width: right - left, height: bottom - top,
+    markerTop: leading.top - top, markerLeft: visibleIcon ? leading.left - left : 0, markerHeight: leading.height,
+  };
+}
+
 type Rect = Pick<DOMRectReadOnly, 'top' | 'bottom' | 'left' | 'right' | 'width' | 'height'>;
 
 interface SearchPresentation {
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatSearchPresentation.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatSearchPresentation.test.tsx
index 73622787ff..e6d95ecefc 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatSearchPresentation.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatSearchPresentation.test.tsx
@@ -3,7 +3,7 @@ import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { highlightFlowChatFocusTarget, useFlowChatSearchPresentation } from './useFlowChatSearchPresentation';
-import { measureFlowChatSearchLine } from './flowChatSearchPresentation';
+import { measureFlowChatFocusItem } from './flowChatSearchPresentation';
 import type { SearchMatch } from './useFlowChatSearch';
 
 vi.mock('./flowChatSearchPresentation', async importOriginal => ({
@@ -12,6 +12,9 @@ vi.mock('./flowChatSearchPresentation', async importOriginal => ({
   measureFlowChatSearchLine: vi.fn((_wrapper, source: HTMLElement) => ({
     top: source.dataset.flowItemId === 'located' ? 40 : 10, left: 0, width: 100, height: 20,
   })),
+  measureFlowChatFocusItem: vi.fn(() => ({
+    top: 40, left: 0, width: 100, height: 80, markerTop: 0, markerLeft: 0, markerHeight: 20,
+  })),
 }));
 
 const match: SearchMatch = { type: 'model-round', turnId: 'turn', virtualItemIndex: 0, flowItemId: 'searched', occurrenceIndex: 0 };
@@ -44,13 +47,13 @@ describe('shared search and source-navigation presentation', () => {
     vi.useRealTimers(); vi.unstubAllGlobals(); vi.clearAllMocks();
   });
 
-  it('uses the search line without a query and clears it after the navigation timeout', () => {
+  it('uses the full item without a query and clears it after the navigation timeout', () => {
     act(() => root.render(<Harness wrapper={wrapper} search={false} />));
     expect(host.textContent).toBe('none');
     const source = wrapper.children[1] as HTMLElement;
     act(() => { clears.push(highlightFlowChatFocusTarget(source)); });
     expect(host.textContent).toBe('40');
-    expect(measureFlowChatSearchLine).toHaveBeenLastCalledWith(wrapper, source, expect.any(Range));
+    expect(measureFlowChatFocusItem).toHaveBeenLastCalledWith(wrapper, source);
     expect(wrapper.textContent).toBe('needleSource line');
     act(() => vi.advanceTimersByTime(1600));
     expect(host.textContent).toBe('none');
@@ -64,4 +67,16 @@ describe('shared search and source-navigation presentation', () => {
     act(() => clears[0]());
     expect(host.textContent).toBe('10');
   });
+
+  it('keeps a repeated item focus active when the older request expires', () => {
+    act(() => root.render(<Harness wrapper={wrapper} search={false} />));
+    const source = wrapper.children[1] as HTMLElement;
+    act(() => { clears.push(highlightFlowChatFocusTarget(source)); });
+    act(() => vi.advanceTimersByTime(800));
+    act(() => { clears.push(highlightFlowChatFocusTarget(source)); });
+    act(() => vi.advanceTimersByTime(800));
+    expect(host.textContent).toBe('40');
+    act(() => vi.advanceTimersByTime(800));
+    expect(host.textContent).toBe('none');
+  });
 });
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatSearchPresentation.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatSearchPresentation.ts
index 22b7f4656f..5d5b01f4a8 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatSearchPresentation.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatSearchPresentation.ts
@@ -1,21 +1,25 @@
 import { useLayoutEffect, useState } from 'react';
-import { createFlowChatSearchHighlightOwner, findFlowChatFocusTextRange } from './flowChatSearchDom';
+import { createFlowChatSearchHighlightOwner } from './flowChatSearchDom';
 import {
+  measureFlowChatFocusItem,
   measureFlowChatSearchLine,
   resolveFlowChatSearchPresentation,
   type FlowChatSearchLineBox,
+  type FlowChatFocusBox,
 } from './flowChatSearchPresentation';
 import type { SearchMatch } from './useFlowChatSearch';
 
 const FOCUS_LINE_EVENT = 'flowchat:focus-line';
-interface FocusLineRequest { element: HTMLElement; active: boolean }
+interface FocusLineRequest { element: HTMLElement; active: boolean; id: symbol }
+type PresentationBox = FlowChatSearchLineBox | FlowChatFocusBox;
 
-/** Reuse the row's passive search line instead of outlining the entire item. */
+/** Passive item navigation feedback; never changes the measured row geometry. */
 export function highlightFlowChatFocusTarget(element: HTMLElement): () => void {
   const wrapper = element.closest<HTMLElement>('.virtual-item-wrapper');
   if (!wrapper) return () => {};
+  const id = Symbol('item-focus');
   const publish = (active: boolean) => wrapper.dispatchEvent(new CustomEvent<FocusLineRequest>(
-    FOCUS_LINE_EVENT, { detail: { element, active } },
+    FOCUS_LINE_EVENT, { detail: { element, active, id } },
   ));
   publish(true);
   const timer = window.setTimeout(() => publish(false), 1600);
@@ -23,9 +27,11 @@ export function highlightFlowChatFocusTarget(element: HTMLElement): () => void {
   return clear;
 }
 
-function sameLine(a: FlowChatSearchLineBox | null, b: FlowChatSearchLineBox | null): boolean {
+function sameLine(a: PresentationBox | null, b: PresentationBox | null): boolean {
   return a === b || Boolean(a && b
-    && a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height);
+    && a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height
+    && ('markerTop' in a ? 'markerTop' in b && a.markerTop === b.markerTop
+      && a.markerLeft === b.markerLeft && a.markerHeight === b.markerHeight : !('markerTop' in b)));
 }
 
 /** Passive row presentation. It never scrolls, expands content, or reserves space. */
@@ -34,16 +40,18 @@ export function useFlowChatSearchPresentation(
   query: string | undefined,
   matches: readonly SearchMatch[] | undefined,
   currentMatch: SearchMatch | undefined,
-): FlowChatSearchLineBox | null {
-  const [line, setLine] = useState<FlowChatSearchLineBox | null>(null);
-  const [focusSource, setFocusSource] = useState<HTMLElement | null>(null);
+): PresentationBox | null {
+  const [line, setLine] = useState<PresentationBox | null>(null);
+  const [focus, setFocus] = useState<FocusLineRequest | null>(null);
+  const focusSource = focus?.element;
 
   useLayoutEffect(() => {
     if (!wrapper) return;
     const handleFocus = (event: Event) => {
-      const { element, active } = (event as CustomEvent<FocusLineRequest>).detail;
+      const request = (event as CustomEvent<FocusLineRequest>).detail;
+      const { element, active, id } = request;
       if (active && !wrapper.contains(element)) return;
-      setFocusSource(previous => active ? element : previous === element ? null : previous);
+      setFocus(previous => active ? request : previous?.id === id ? null : previous);
     };
     wrapper.addEventListener(FOCUS_LINE_EVENT, handleFocus);
     return () => wrapper.removeEventListener(FOCUS_LINE_EVENT, handleFocus);
@@ -65,13 +73,9 @@ export function useFlowChatSearchPresentation(
         wrapper, query ?? '', matches ?? [], currentMatch,
       );
       owner.update(currentRange, otherRanges);
-      const focusRange = focusSource && wrapper.contains(focusSource)
-        ? findFlowChatFocusTextRange(focusSource) : null;
-      const range = focusRange ?? currentRange;
-      const source = focusRange ? focusSource : currentRoot;
-      const next = range && source
-        ? measureFlowChatSearchLine(wrapper, source, range)
-        : null;
+      const next = focusSource && wrapper.contains(focusSource)
+        ? measureFlowChatFocusItem(wrapper, focusSource)
+        : currentRange && currentRoot ? measureFlowChatSearchLine(wrapper, currentRoot, currentRange) : null;
       setLine(previous => sameLine(previous, next) ? previous : next);
     };
     const scheduleRefresh = () => {
diff --git a/src/web-ui/src/flow_chat/components/usage/ContextUsagePopover.scss b/src/web-ui/src/flow_chat/components/usage/ContextUsagePopover.scss
index cfeb5d2487..be0a21d5db 100644
--- a/src/web-ui/src/flow_chat/components/usage/ContextUsagePopover.scss
+++ b/src/web-ui/src/flow_chat/components/usage/ContextUsagePopover.scss
@@ -3,6 +3,8 @@
 .context-usage-popover {
   @include surfaces.floating;
 
+  --_context-usage-row-height: calc(var(--openbitfun-control-icon-button-xs-size) + var(--openbitfun-space-1));
+
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -56,6 +58,27 @@
     overflow: hidden;
   }
 
+  &__body {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    gap: var(--openbitfun-space-2);
+    // Reserve the normal seven-category chart even before a host reports a breakdown.
+    min-block-size: calc(7 * var(--_context-usage-row-height) + 2 * var(--openbitfun-space-2));
+  }
+
+  &__empty {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    [data-openbitfun-component='empty'] [data-openbitfun-part='title'] {
+      font: inherit;
+      letter-spacing: inherit;
+    }
+  }
+
   &__segment {
     flex-basis: 0;
     min-inline-size: var(--openbitfun-border-width-default);
@@ -74,7 +97,7 @@
     align-items: center;
     justify-content: space-between;
     box-sizing: border-box;
-    min-block-size: calc(var(--openbitfun-control-icon-button-xs-size) + var(--openbitfun-space-1));
+    min-block-size: var(--_context-usage-row-height);
     gap: var(--openbitfun-space-3);
     padding: calc(var(--openbitfun-space-1) / 2) var(--openbitfun-space-1);
     border-radius: var(--openbitfun-radius-md);
diff --git a/src/web-ui/src/flow_chat/components/usage/ContextUsagePopover.tsx b/src/web-ui/src/flow_chat/components/usage/ContextUsagePopover.tsx
index b1e38ad847..9f84923b37 100644
--- a/src/web-ui/src/flow_chat/components/usage/ContextUsagePopover.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/ContextUsagePopover.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type RefObject } from 'react';
-import { Card, Icon, IconButton, OverflowText, Tooltip, createOverlayPortal, useDismissibleLayer } from '@openbitfun/ui';
+import { Card, Empty, Icon, IconButton, OverflowText, Tooltip, createOverlayPortal, useDismissibleLayer } from '@openbitfun/ui';
 import { ChartPie, ExternalLink, Minus } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
@@ -116,44 +116,49 @@ export function ContextUsagePopover({
           size: formatTokenCount(capacity, t),
         })}</span>
       </div>
-      {hasDistribution && <div className="context-usage-popover__bar" role="img"
-        data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="bar"
-        aria-label={t('usage.context.full', { value: formatUsagePercent(percentage!, t) })}>
-        {series.filter(row => row.value > 0).map(row => (
-          <span key={row.key} className={`context-usage-popover__segment context-usage-popover__series--${row.key}`}
-            data-usage-category={row.key} style={{ flexGrow: row.value }} {...highlight(row)} />
-        ))}
-      </div>}
-      {hasTotal ? <>
-        <dl className="context-usage-popover__legend"
-          data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="legend">
-          {rows.map(key => <div key={key} className="context-usage-popover__row" data-usage-category={key}
-            data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="item"
-            tabIndex={0} {...highlight(series.find(row => row.key === key) ?? { key })}>
-            <dt><span aria-hidden="true" className={`context-usage-popover__swatch context-usage-popover__series--${key}`} />
-              <OverflowText>{t(`usage.context.categories.${key}`)}</OverflowText>
-              {previewSession && key !== 'summarizedConversation' && key !== 'conversation' && (
-                <Tooltip content={t('usage.context.previewCategory', { category: t(`usage.context.categories.${key}`) })}>
-                  <IconButton size="xs" className="context-usage-popover__preview" icon={<Icon glyph={ExternalLink} size="xs" />}
-                    aria-label={t('usage.context.previewCategory', { category: t(`usage.context.categories.${key}`) })}
-                    loading={previewLoading === key} disabled={previewLoading !== null && previewLoading !== key}
-                    onClick={() => { void previewContext(key); }} />
-                </Tooltip>
-              )}
-            </dt>
-            <dd>{formatTokenCount(context![key], t)}</dd>
-          </div>)}
-        </dl>
-        {!hasDistribution && <p className="context-usage-popover__status" role="status">
-          <span data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="status">
-            {t(capacity === undefined ? 'usage.context.capacityUnavailable' : 'usage.context.exceedsCapacity')}
-          </span>
-        </p>}
-      </> : <p className="context-usage-popover__status" role="status" aria-live="polite">
-        <span data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="status">
-          {t(status === 'loading' ? 'usage.context.loading' : status === 'error' ? 'usage.context.loadFailed' : 'usage.context.unavailable')}
-        </span>
-      </p>}
+      <div className="context-usage-popover__body"
+        data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="body">
+        {hasDistribution && <div className="context-usage-popover__bar" role="img"
+          data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="bar"
+          aria-label={t('usage.context.full', { value: formatUsagePercent(percentage!, t) })}>
+          {series.filter(row => row.value > 0).map(row => (
+            <span key={row.key} className={`context-usage-popover__segment context-usage-popover__series--${row.key}`}
+              data-usage-category={row.key} style={{ flexGrow: row.value }} {...highlight(row)} />
+          ))}
+        </div>}
+        {hasTotal ? <>
+          <dl className="context-usage-popover__legend"
+            data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="legend">
+            {rows.map(key => <div key={key} className="context-usage-popover__row" data-usage-category={key}
+              data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="item"
+              tabIndex={0} {...highlight(series.find(row => row.key === key) ?? { key })}>
+              <dt><span aria-hidden="true" className={`context-usage-popover__swatch context-usage-popover__series--${key}`} />
+                <OverflowText>{t(`usage.context.categories.${key}`)}</OverflowText>
+                {previewSession && key !== 'summarizedConversation' && key !== 'conversation' && (
+                  <Tooltip content={t('usage.context.previewCategory', { category: t(`usage.context.categories.${key}`) })}>
+                    <IconButton size="xs" className="context-usage-popover__preview" icon={<Icon glyph={ExternalLink} size="xs" />}
+                      aria-label={t('usage.context.previewCategory', { category: t(`usage.context.categories.${key}`) })}
+                      loading={previewLoading === key} disabled={previewLoading !== null && previewLoading !== key}
+                      onClick={() => { void previewContext(key); }} />
+                  </Tooltip>
+                )}
+              </dt>
+              <dd>{formatTokenCount(context![key], t)}</dd>
+            </div>)}
+          </dl>
+          {!hasDistribution && <p className="context-usage-popover__status" role="status">
+            <span data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="status">
+              {t(capacity === undefined ? 'usage.context.capacityUnavailable' : 'usage.context.exceedsCapacity')}
+            </span>
+          </p>}
+        </> : <div className="context-usage-popover__empty" role="status" aria-live="polite" aria-busy={status === 'loading'}>
+          <Empty icon={<Icon glyph={ChartPie} />} imageSize="sm" title={
+            <span data-openbitfun-product-component="context-usage-popover" data-openbitfun-product-part="status">
+              {t(status === 'loading' ? 'usage.context.loading' : status === 'error' ? 'usage.context.loadFailed' : 'usage.context.unavailable')}
+            </span>
+          } />
+        </div>}
+      </div>
     </Card>,
     getAppearanceOverlayHost(), undefined, { ownerRef: triggerRef },
   );
diff --git a/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.scss b/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.scss
index 58357087bb..d72430c0e7 100644
--- a/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.scss
+++ b/src/web-ui/src/flow_chat/components/usage/ToolDefinitionsPreview.scss
@@ -1,3 +1,5 @@
+@use '../../detail-disclosure' as detailDisclosure;
+
 .tool-definitions-preview {
   display: flex;
   flex-direction: column;
@@ -52,7 +54,7 @@
 
   // Match the header indicator's inset once; nested schemas keep the same content edge.
   &__content { padding-inline: 0; }
-  &__content--tool { padding-inline: var(--openbitfun-layout-disclosure-trigger-padding-inline); }
+  &__content--tool { @include detailDisclosure.content-inset; }
   &__nested-trigger { padding-inline: 0; }
 
   &__header {
@@ -68,11 +70,7 @@
       'rose': var(--openbitfun-color-status-danger-emphasis)
     ) {
       &--#{$tone} {
-        background: color-mix(in srgb, #{$color} 10%, var(--openbitfun-color-surface-scene));
-
-        &:is(:hover, :focus-within) {
-          background: color-mix(in srgb, #{$color} 16%, var(--openbitfun-color-surface-scene));
-        }
+        @include detailDisclosure.header-tone($color);
       }
     }
   }
diff --git a/src/web-ui/src/flow_chat/components/usage/appearance.ts b/src/web-ui/src/flow_chat/components/usage/appearance.ts
index 6924c52780..a115f4567f 100644
--- a/src/web-ui/src/flow_chat/components/usage/appearance.ts
+++ b/src/web-ui/src/flow_chat/components/usage/appearance.ts
@@ -4,7 +4,8 @@ export const contextUsagePopoverAppearanceDescriptor: AppearanceSurfaceDescripto
   id: 'context-usage-popover',
   componentAttribute: 'data-openbitfun-product-component',
   parts: [
-    { id: 'root' }, { id: 'header' }, { id: 'totals' }, { id: 'bar', propertyProfile: 'layout' },
+    { id: 'root' }, { id: 'header' }, { id: 'totals' }, { id: 'body', propertyProfile: 'layout' },
+    { id: 'bar', propertyProfile: 'layout' },
     { id: 'legend' }, { id: 'item' }, { id: 'status', propertyProfile: 'paint', visualRole: 'content' },
   ],
 };
diff --git a/src/web-ui/src/flow_chat/timeline/document.test.ts b/src/web-ui/src/flow_chat/timeline/document.test.ts
index a7f78eb609..6d2c42bd7f 100644
--- a/src/web-ui/src/flow_chat/timeline/document.test.ts
+++ b/src/web-ui/src/flow_chat/timeline/document.test.ts
@@ -33,6 +33,16 @@ describe('desktop conversation document', () => {
     expect(JSON.stringify(input)).toBe(before);
   });
 
+  it('resolves repeated member ids within the requested source row', () => {
+    const projection = new ConversationDocumentProjection();
+    const first = source([agent('reused')]);
+    const second = { ...source([agent('reused')]), turnId: 'another-turn' };
+    const rows = projection.project([first, second], options());
+    const index = findTimelineBlockIndex(rows, 1, 'reused');
+    expect(rows[index].turnId).toBe('another-turn');
+    expect(rows[index].timeline?.sourceIndex).toBe(1);
+  });
+
   it('packs adjacent launch cards independently of execution status or timing', () => {
     const projection = new ConversationDocumentProjection();
     const launches = [agent('a', 'Task', 'running'), agent('b', 'AgentSpawn', 'cancelled'), agent('c', 'LaunchReviewAgent', 'error')];
diff --git a/src/web-ui/src/flow_chat/timeline/document.ts b/src/web-ui/src/flow_chat/timeline/document.ts
index d4a9904d64..6bfc68d757 100644
--- a/src/web-ui/src/flow_chat/timeline/document.ts
+++ b/src/web-ui/src/flow_chat/timeline/document.ts
@@ -261,10 +261,11 @@ export class ConversationDocumentProjection {
 /** Source/search indexes never leak into the virtualizer's block index space. */
 export function findTimelineBlockIndex(items: readonly VirtualItem[], sourceIndex: number, memberId?: string): number {
   if (memberId) {
-    const member = items.findIndex(item => item.timeline?.memberIds.includes(memberId)
-      || (item.type === 'model-round' && item.canvasArtifactItems?.some(candidate => candidate.id === memberId)));
+    const ownsSource = (item: VirtualItem, index: number) => sourceIndex < 0 || (item.timeline?.sourceIndex ?? index) === sourceIndex;
+    const member = items.findIndex((item, index) => ownsSource(item, index) && (item.timeline?.memberIds.includes(memberId)
+      || (item.type === 'model-round' && item.canvasArtifactItems?.some(candidate => candidate.id === memberId))));
     if (member >= 0) return member;
-    const group = items.findIndex(item => item.timeline?.kind === 'group-header'
+    const group = items.findIndex((item, index) => ownsSource(item, index) && item.timeline?.kind === 'group-header'
       && item.timeline.group?.allItems.some(candidate => candidate.id === memberId));
     if (group >= 0) return group;
   }
diff --git a/src/web-ui/src/flow_chat/trajectory/Trajectory.appearance.ts b/src/web-ui/src/flow_chat/trajectory/Trajectory.appearance.ts
new file mode 100644
index 0000000000..fdac8ea0be
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/Trajectory.appearance.ts
@@ -0,0 +1,7 @@
+import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
+
+export const trajectoryAppearanceDescriptor: AppearanceSurfaceDescriptor = {
+  id: 'session-trajectory',
+  componentAttribute: 'data-openbitfun-product-component',
+  parts: [{ id: 'root' }, { id: 'body' }, { id: 'rail' }, { id: 'node' }, { id: 'referenceLine' }, { id: 'status' }, { id: 'details' }, { id: 'range' }, { id: 'tree' }, { id: 'value' }, { id: 'label' }, { id: 'viewport' }, { id: 'tooltip' }, { id: 'header' }, { id: 'timing' }, { id: 'fact' }, { id: 'attribute' }, { id: 'factValue' }, { id: 'section' }, { id: 'name' }, { id: 'type' }, { id: 'inlineValue' }, { id: 'fieldLabel' }, { id: 'field' }, { id: 'branch' }, { id: 'sectionTitle' }, { id: 'heading' }, { id: 'turn' }],
+};
diff --git a/src/web-ui/src/flow_chat/trajectory/Trajectory.scss b/src/web-ui/src/flow_chat/trajectory/Trajectory.scss
new file mode 100644
index 0000000000..9b3be12415
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/Trajectory.scss
@@ -0,0 +1,128 @@
+.trajectory {
+  flex: 0 0 auto;
+  min-width: 0;
+  padding: var(--openbitfun-space-2) var(--openbitfun-space-4);
+  color: var(--openbitfun-color-content-secondary);
+  background: var(--openbitfun-color-surface-scene);
+  border-bottom: 1px solid var(--openbitfun-color-border-subtle);
+  font-family: var(--openbitfun-type-meta-font-family);
+  font-size: var(--openbitfun-type-meta-font-size);
+  line-height: var(--openbitfun-type-meta-line-height);
+
+  &__tooltip { max-width: 320px; overflow-wrap: anywhere; }
+  &__body { display: flex; gap: var(--openbitfun-space-2); }
+  &__labels { display: flex; flex-direction: column; flex-shrink: 0; width: 3em; color: var(--openbitfun-color-content-primary); }
+  &__labels > span { height: 20px; display: flex; align-items: center; }
+  &__rail { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; cursor: crosshair; }
+  &__track { height: 60px; position: relative; }
+  &__reference-line { position: absolute; inset-block: 0; left: 0; z-index: 2;
+    width: var(--openbitfun-border-width-default); background: var(--openbitfun-color-accent-border);
+    pointer-events: none; }
+  &__node { z-index: 1; position: absolute; height: 20px; display: flex; align-items: center; justify-content: center;
+    padding: 0; border: 0; background: transparent; cursor: inherit; color: var(--openbitfun-color-content-secondary); }
+  &__node > span { width: 8px; height: 10px; border-radius: 2px; background: currentColor; }
+  &__node[data-kind='user'] { color: var(--openbitfun-color-status-success-emphasis); }
+  &__node[data-kind='model'] { color: var(--openbitfun-color-status-info-emphasis); }
+  &__node[data-kind='tool'] { color: var(--openbitfun-color-status-warning-emphasis); }
+  &__node[data-status='error'] > span { outline: 1px solid var(--openbitfun-color-status-danger-emphasis); }
+  &__node[data-muted='true'] { opacity: 0.3; }
+  &__node { touch-action: none; border-radius: var(--openbitfun-radius-sm);
+    transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
+      background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  &__node > span { transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  &__node:is(:hover, :focus-visible, [data-focused='true'], [data-reference-hit='true'], [data-selected='true']) { opacity: 1; z-index: 3;
+    background: var(--openbitfun-color-accent-surface); outline: none; }
+  &__node:is(:hover, :focus-visible, [data-focused='true'], [data-reference-hit='true'], [data-selected='true']) > span { transform: scale(1.125);
+    outline: var(--openbitfun-border-width-default) solid var(--openbitfun-color-content-primary); outline-offset: 0; }
+  @media (prefers-reduced-motion: reduce) { &__node, &__node > span { transition: none; } }
+  &__rail:has(.trajectory__node:hover) .trajectory__node:not(:hover):not([data-reference-hit='true']),
+  &__rail[data-keyboard-preview='true']:not(:has(.trajectory__node:is(:hover, [data-reference-hit='true']))) .trajectory__node:not([data-focused='true']) {
+    opacity: 0.22; filter: grayscale(1);
+  }
+  &__rail:focus-visible { outline: 1px solid var(--openbitfun-color-accent-default); outline-offset: 1px; }
+  &__status { min-height: 22px; display: flex; align-items: center; gap: var(--openbitfun-space-2); }
+}
+.trajectory-details {
+  display: flex; flex-direction: column; gap: var(--openbitfun-space-4);
+  height: 100%; min-height: 0; min-width: 0; box-sizing: border-box;
+  padding: var(--openbitfun-space-4);
+  color: var(--openbitfun-color-content-primary);
+  background: var(--openbitfun-color-surface-scene);
+  font-family: var(--openbitfun-type-body-xs-font-family);
+  font-size: var(--openbitfun-type-body-xs-font-size);
+  line-height: var(--openbitfun-type-body-xs-line-height);
+  &__header { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 0; gap: var(--openbitfun-space-2);
+    padding-bottom: var(--openbitfun-space-3); border-bottom: 1px solid var(--openbitfun-color-border-subtle); }
+  &__identity { align-items: center; gap: var(--openbitfun-space-2); }
+  &__heading { display: flex; align-items: baseline; gap: var(--openbitfun-space-2); min-width: 0; }
+  &__turn { flex: 0 0 auto; color: var(--openbitfun-color-content-muted);
+    font-family: var(--openbitfun-type-meta-font-family); font-size: var(--openbitfun-type-meta-font-size);
+    line-height: var(--openbitfun-type-meta-line-height); font-weight: var(--openbitfun-type-meta-font-weight); }
+  &__timing { display: flex; flex-wrap: wrap; gap: var(--openbitfun-space-2) var(--openbitfun-space-4); margin: 0;
+    font-family: var(--openbitfun-type-meta-font-family); font-size: var(--openbitfun-type-meta-font-size);
+    line-height: var(--openbitfun-type-meta-line-height); }
+  &__timing-item { display: flex; align-items: baseline; gap: var(--openbitfun-space-2); min-width: 0; max-width: 100%; }
+  &__timing-item > dt, &__timing-item > dd { margin: 0; }
+  &__viewport { flex: 1; min-height: 0; min-width: 0; padding-inline-end: var(--openbitfun-space-2);
+    container: trajectory-details-content / inline-size; }
+  &__section { min-width: 0; }
+  &__section-header, &__nested-header {
+    min-block-size: var(--openbitfun-control-height-sm); background: transparent;
+    &:is(:hover, :focus-within) { background: var(--openbitfun-color-action-neutral-surface); }
+  }
+  &__section-header { border-radius: 0; border-bottom: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); }
+  &__section-trigger, &__nested-trigger { padding: var(--openbitfun-space-1) 0; gap: var(--openbitfun-space-1); }
+  &__section-title { font-family: var(--openbitfun-type-body-xs-font-family); font-size: var(--openbitfun-type-body-xs-font-size);
+    line-height: var(--openbitfun-type-body-xs-line-height); font-weight: var(--openbitfun-type-label-selected-font-weight); }
+  &__section-content, &__nested-content { padding: 0; }
+  &__section[data-open='true'] > [data-openbitfun-part='content'] > .trajectory-details__section-content { padding-block: var(--openbitfun-space-2) 0; }
+  &__branch[data-open='true'] > [data-openbitfun-part='content'] > .trajectory-details__nested-content {
+    padding-block: var(--openbitfun-space-1); padding-inline-start: var(--openbitfun-space-3);
+    border-inline-start: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+  }
+  &__tree { border-radius: 0; }
+  &__fact { padding-block: var(--openbitfun-space-2); }
+  &__fact-content { display: grid; width: 100%; grid-template-columns: minmax(72px, 0.6fr) minmax(0, 1fr);
+    align-items: start; gap: var(--openbitfun-space-3); }
+  &__fact-value { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+  &__attribute { padding-block: var(--openbitfun-space-1); }
+  &__field { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline;
+    gap: var(--openbitfun-space-1) var(--openbitfun-space-3); margin: 0;
+    padding-inline-start: calc(var(--openbitfun-layout-disclosure-indicator-size) + var(--openbitfun-space-1)); }
+  &__field > dt, &__field > dd { min-width: 0; margin: 0; }
+  &__field[data-layout='stacked'] { grid-template-columns: minmax(0, 1fr); }
+  &__field-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--openbitfun-space-1) var(--openbitfun-space-2); min-width: 0; }
+  &__label { color: var(--openbitfun-color-content-secondary); overflow-wrap: anywhere; }
+  // Recorded fields are plain data, not inline Markdown code chips.
+  &__name, &__type, &__inline-value, &__value {
+    margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
+    overflow-wrap: anywhere;
+    font-family: var(--openbitfun-type-code-meta-font-family);
+    font-size: var(--openbitfun-type-code-meta-font-size); line-height: var(--openbitfun-type-code-meta-line-height);
+    font-weight: var(--openbitfun-type-code-meta-font-weight);
+  }
+  &__name { color: var(--openbitfun-color-content-secondary); }
+  &__type { color: var(--openbitfun-color-content-muted); font-family: var(--openbitfun-type-meta-font-family);
+    font-size: var(--openbitfun-type-meta-font-size); line-height: var(--openbitfun-type-meta-line-height); }
+  &__inline-value, &__value { white-space: pre-wrap; color: var(--openbitfun-color-content-primary); }
+  mark { color: inherit; background: var(--openbitfun-color-selection-surface); }
+
+  @container trajectory-details-content (max-width: 300px) {
+    &__field, &__fact-content { grid-template-columns: minmax(0, 1fr); gap: var(--openbitfun-space-1); }
+  }
+}
+
+.trajectory__range {
+  position: absolute; inset-block: 0; pointer-events: none;
+  box-sizing: border-box;
+  background: var(--openbitfun-color-status-info-surface);
+  border-inline: var(--openbitfun-border-width-default) solid var(--openbitfun-color-status-info-emphasis);
+}
+.trajectory__range-handle {
+  position: absolute; inset-block: 0; width: 8px; z-index: 2; pointer-events: auto;
+  cursor: ew-resize; touch-action: none;
+  border: 0;
+  &--start { left: 0; }
+  &--end { right: 0; }
+  &:focus-visible { outline: 2px solid var(--openbitfun-color-content-primary); }
+}
diff --git a/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.test.tsx b/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.test.tsx
new file mode 100644
index 0000000000..ec42718583
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.test.tsx
@@ -0,0 +1,170 @@
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { resolve } from 'node:path';
+import { compile } from 'sass';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { DialogTurn, Session } from '../types/flow-chat';
+import type { TrajectoryPanelData } from './trajectoryPanel';
+const mocks = vi.hoisted(() => ({ state: { sessions: new Map<string, Session>() }, surface: { surfaceId: 'local', epoch: 1, isCurrent: () => true },
+  window: vi.fn(), older: vi.fn() }));
+vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: (key: string) => key,
+  formatNumber: (value: number) => `${value}s`, formatDate: (value: number) => String(value) }) }));
+vi.mock('@/infrastructure/peer-device/deviceSurface', () => ({ getActiveSurfaceScope: () => mocks.surface, onSurfaceActivated: () => () => {} }));
+vi.mock('../store/FlowChatStore', () => ({ flowChatStore: { subscribe: () => () => {}, getState: () => mocks.state,
+  getSessionHistoryViewState: () => undefined, loadSessionTurnWindow: mocks.window, loadOlderRelaySessionHistory: mocks.older } }));
+vi.mock('./trajectoryPanel', () => ({ TRAJECTORY_NAVIGATE_EVENT: 'trajectory-test' }));
+vi.mock('@/infrastructure/event-bus', () => ({ globalEventBus: { emit: vi.fn() } }));
+import { TrajectoryDetails } from './TrajectoryDetails';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root: Root; let container: HTMLDivElement; let turn: DialogTurn;
+const node: TrajectoryPanelData['node'] = { id: 'tool', turnId: 'turn', turnOrdinal: 0, roundId: 'round', kind: 'tool', label: 'Read',
+  status: 'completed', timestamp: 1, preview: '', matched: false };
+beforeEach(() => {
+  mocks.surface = { surfaceId: 'local', epoch: 1, isCurrent: () => true };
+  mocks.window.mockReset(); mocks.older.mockReset();
+  turn = { id: 'turn', userMessage: { id: 'u', content: 'USER', timestamp: 1 }, modelRounds: [{ id: 'round', items: [{
+    id: 'tool', type: 'tool', toolName: 'Read', durationMs: 0, toolCall: { id: 'call', input: { path: '/remote/path' } },
+    toolResult: { success: true, result: 'x'.repeat(12000) + 'NEEDLE', duration_ms: 0 }, status: 'completed',
+  }] }] } as DialogTurn;
+  mocks.state = { sessions: new Map([['s', { sessionId: 's', dialogTurns: [turn] } as Session]]) };
+  vi.stubGlobal('ResizeObserver', class { observe() {} disconnect() {} });
+  vi.stubGlobal('matchMedia', () => ({ matches: false, addEventListener() {}, removeEventListener() {} }));
+  container = document.createElement('div'); document.body.append(container); root = createRoot(container);
+});
+afterEach(async () => { await act(async () => root.unmount()); container.remove(); vi.unstubAllGlobals(); vi.restoreAllMocks(); vi.useRealTimers(); });
+async function render(query = '', surfaceId = 'local', selectedNode = node) { await act(async () => root.render(<TrajectoryDetails
+  sessionId="s" surfaceId={surfaceId} viewId="v" node={selectedNode} query={query} />)); }
+
+describe('trajectory detail composition', () => {
+  it('shows timing in the header and bounded parameter/result chapters without tabs', async () => {
+    (turn.modelRounds[0].items[0] as any).queueWaitMs = 0;
+    (turn.modelRounds[0].items[0] as any).executionMs = 1234;
+    await render();
+    expect(container.querySelector('[data-openbitfun-component="page-header"]')).not.toBeNull();
+    expect(container.querySelectorAll('[role="tab"], [role="tablist"], [role="tabpanel"]')).toHaveLength(0);
+    expect(container.querySelectorAll('.trajectory-details__section[data-openbitfun-component="disclosure"]')).toHaveLength(2);
+    expect(container.querySelector('.trajectory-details__name')?.textContent).toBe('path');
+    expect(container.querySelector('.trajectory-details__type')?.textContent).toBe('string');
+    expect(container.querySelector('.trajectory-details__field dd')?.textContent).toBe('/remote/path');
+    expect(container.querySelectorAll('[data-openbitfun-component="status-pill"]')).toHaveLength(1);
+    const timing = container.querySelector('.trajectory-details__header .trajectory-details__timing')!;
+    expect([...timing.querySelectorAll('dt')].map(label => label.textContent))
+      .toEqual(['trajectory.started', 'trajectory.duration', 'trajectory.queue', 'trajectory.execution']);
+    expect([...timing.querySelectorAll('dd')].map(value => value.textContent)).toEqual(['1', '0s', '0s', '1.234s']);
+    expect(container.textContent).not.toContain('NEEDLE');
+    expect(container.textContent).not.toContain('trajectory.firstOutput');
+    expect(mocks.window).not.toHaveBeenCalled();
+  });
+  it('keeps unknown timing distinct from zero and avoids elapsed time for user messages', async () => {
+    (turn.modelRounds[0].items[0] as any).durationMs = undefined;
+    await render();
+    expect(container.querySelector('.trajectory-details__timing')?.textContent).toContain('trajectory.notRecorded');
+    expect(container.querySelector('.trajectory-details__timing')?.textContent).not.toContain('0s');
+    await render('', 'local', { ...node, id: 'u', kind: 'user', roundId: undefined });
+    expect(container.querySelectorAll('.trajectory-details__timing dt')).toHaveLength(1);
+    expect(container.querySelector('[data-trajectory-section="parameters"]')).toBeNull();
+    expect(container.querySelector('[data-trajectory-section="result"] pre')?.textContent).toBe('USER');
+  });
+  it('shows a distant search hit without mounting the entire tool result', async () => {
+    await render('needle');
+    expect(container.querySelector('mark')?.textContent).toBe('NEEDLE');
+    expect(container.textContent!.length).toBeLessThan(5000);
+  });
+  it('preserves path search hits when presenting short parameter values', async () => {
+    (turn.modelRounds[0].items[0] as any).toolCall.input = { path: String.raw`C:\workspace\file.ts` };
+    await render(String.raw`C:\workspace`);
+    expect(container.querySelector('.trajectory-details__field dd mark')?.textContent).toBe(String.raw`C:\workspace`);
+  });
+  it('reveals the matched chapter inside the details viewport without scrolling ancestors', async () => {
+    (turn.modelRounds[0].items[0] as any).toolCall.input = { path: 'NEEDLE' };
+    await render('needle');
+    const viewport = container.querySelector<HTMLDivElement>('.trajectory-details__viewport')!;
+    const result = container.querySelector<HTMLElement>('[data-trajectory-section="result"] mark')!;
+    vi.spyOn(viewport, 'getBoundingClientRect').mockReturnValue({ top: 10 } as DOMRect);
+    vi.spyOn(result, 'getBoundingClientRect').mockReturnValue({ top: 310 } as DOMRect);
+    container.scrollTop = 21;
+    viewport.scrollTop = 20;
+    await render('needle', 'local', { ...node, matchField: 'result' });
+    expect(viewport.scrollTop).toBe(320);
+    expect(container.scrollTop).toBe(21);
+    expect(container.querySelectorAll('.trajectory-details__section')).toHaveLength(2);
+  });
+  it('unmounts collapsed output and reopens it for a new search hit', async () => {
+    vi.useFakeTimers();
+    await render();
+    const outputHeader = container.querySelector<HTMLButtonElement>('[data-trajectory-section="result"] .trajectory-details__section-header button')!;
+    await act(async () => outputHeader.click());
+    await act(async () => { vi.advanceTimersByTime(200); });
+    expect(container.querySelector('pre')).toBeNull();
+    await render('needle');
+    expect(container.querySelector('mark')?.textContent).toBe('NEEDLE');
+    expect(container.textContent!.length).toBeLessThan(5000);
+  });
+  it('pages large parameter objects and opens only the branch containing a search hit', async () => {
+    const tool = turn.modelRounds[0].items[0] as any;
+    tool.toolCall.input = Object.fromEntries(Array.from({ length: 120 }, (_, index) => [`field-${index}`, { value: `entry-${index}` }]));
+    await render();
+    expect(container.querySelectorAll('.trajectory-details__name')).toHaveLength(50);
+    expect(container.textContent).not.toContain('entry-');
+    const more = [...container.querySelectorAll<HTMLButtonElement>('.trajectory-details__tree button')]
+      .find(button => button.textContent === 'trajectory.showMore')!;
+    await act(async () => more.click());
+    expect(container.querySelectorAll('.trajectory-details__name')).toHaveLength(100);
+    await render('entry-119');
+    expect(container.querySelector('mark')?.textContent).toBe('entry-119');
+    expect(container.querySelectorAll('.trajectory-details__name')).toHaveLength(51);
+    expect(container.textContent).not.toContain('entry-118');
+  });
+  it('does not replace a removed tool with unrelated user content', async () => {
+    turn.modelRounds[0].items = [];
+    await render();
+    expect(container.textContent).toContain('trajectory.unavailable');
+    expect(container.textContent).not.toContain('USER');
+  });
+  it('keeps recorded fields plain when the app global code styles are present', async () => {
+    const style = document.createElement('style');
+    style.textContent = compile(resolve(__dirname, '../../app/styles/global.scss')).css;
+    document.head.append(style);
+    // jsdom parses cascade layers but does not apply them to computed styles.
+    // Flatten the actual base rules before adding the component overrides.
+    const baseRules = [...style.sheet!.cssRules].flatMap(rule => 'name' in rule && rule.name === 'openbitfun.base'
+      ? [...(rule as CSSGroupingRule).cssRules] : [rule]);
+    style.textContent = baseRules.map(rule => rule.cssText).join('\n') + compile(resolve(__dirname, 'Trajectory.scss')).css;
+    const outsideCode = document.createElement('code'); outsideCode.textContent = 'outside'; document.body.append(outsideCode);
+    try {
+      await render();
+      expect(getComputedStyle(outsideCode).padding).toBe('2px 4px');
+      for (const field of container.querySelectorAll('.trajectory-details__name, .trajectory-details__type, .trajectory-details__inline-value, .trajectory-details__value')) {
+        const computed = getComputedStyle(field);
+        expect(computed.padding).toBe('0px');
+        expect(computed.borderTopWidth).toBe('0px');
+        expect(computed.backgroundColor).toBe('rgba(0, 0, 0, 0)');
+      }
+    } finally { style.remove(); outsideCode.remove(); }
+  });
+  it('keeps long paths readable and expands nested results without losing zero or false values', async () => {
+    const path = '/Users/gcwing/WorkSpace/OpenBitFun-WorkSpace/OpenBitFun/docs/features/miniapp.md';
+    (turn.modelRounds[0].items[0] as any).toolResult.result = { match_count: 0, matches: [path], path, truncated: false };
+    await render();
+    const result = container.querySelector('[data-trajectory-section="result"]')!;
+    expect(result.querySelector('[data-layout="stacked"] dd')?.textContent).toBe(path);
+    expect([...result.querySelectorAll('.trajectory-details__field dd')].map(value => value.textContent)).toEqual(['0', path, 'false']);
+    const nested = result.querySelector<HTMLButtonElement>('.trajectory-details__nested-trigger')!;
+    expect(nested.getAttribute('aria-expanded')).toBe('false');
+    await act(async () => nested.click());
+    expect(result.querySelector('.trajectory-details__nested-content dd')?.textContent).toBe(path);
+  });
+  it('retains explicit null output and rejects retained bodies from another device', async () => {
+    (turn.modelRounds[0].items[0] as any).toolResult.result = null;
+    await render();
+    expect(container.querySelector('.trajectory-details__inline-value')?.textContent).toBe('/remote/path');
+    expect(container.querySelector('pre')?.textContent).toBe('null');
+    mocks.surface = { surfaceId: 'peer:b', epoch: 2, isCurrent: () => true };
+    mocks.state = { sessions: new Map([['s', { sessionId: 's', dialogTurns: [], isPartial: false } as unknown as Session]]) };
+    await render('', 'peer:b');
+    expect(container.textContent).toContain('trajectory.unavailable');
+    expect(container.textContent).not.toContain('/remote/path');
+    expect(mocks.window).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.tsx b/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.tsx
new file mode 100644
index 0000000000..5a6c5fe595
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.tsx
@@ -0,0 +1,261 @@
+import { createContext, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { Alert, Button, Disclosure, Empty, FieldGroup, FieldRow, Icon, LoadingState, OverflowText, PageHeader, ScrollArea, Stack, StatusPill } from '@openbitfun/ui';
+import { useI18n } from '@/infrastructure/i18n';
+import { getActiveSurfaceScope, onSurfaceActivated } from '@/infrastructure/peer-device/deviceSurface';
+import { flowChatStore } from '../store/FlowChatStore';
+import type { DialogTurn, FlowToolItem } from '../types/flow-chat';
+import { globalEventBus } from '@/infrastructure/event-bus';
+import type { TrajectoryRangeSummary } from './trajectoryRange';
+import { TRAJECTORY_NAVIGATE_EVENT, type TrajectoryPanelData } from './trajectoryPanel';
+import { trajectoryValueMatches } from './trajectoryModel';
+import { trajectoryStatus } from './trajectoryPresentation';
+import './Trajectory.scss';
+
+const subscribe = (listener: () => void) => flowChatStore.subscribe(listener);
+const getState = () => flowChatStore.getState();
+
+const QueryContext = createContext('');
+function HighlightedText({ text }: { text: string }) {
+  const query = useContext(QueryContext).trim().toLowerCase();
+  if (!query) return text;
+  const parts: ReactNode[] = []; let offset = 0;
+  for (;;) {
+    const index = text.toLowerCase().indexOf(query, offset);
+    if (index < 0) { parts.push(text.slice(offset)); break; }
+    parts.push(text.slice(offset, index), <mark key={index}>{text.slice(index, index + query.length)}</mark>);
+    offset = index + query.length;
+  }
+  return <>{parts}</>;
+}
+
+/** Strings and object branches are independently paged; never stringify a whole result. */
+function ValueView({ value }: { value: unknown }) {
+  const { t } = useI18n('flow-chat');
+  const query = useContext(QueryContext).trim().toLowerCase();
+  const [limit, setLimit] = useState(4000);
+  if (value === undefined) return <span>{t('trajectory.notRecorded')}</span>;
+  if (value === null || typeof value !== 'object') {
+    const text = String(value);
+    const hit = query ? text.toLowerCase().indexOf(query) : -1;
+    const start = hit >= limit ? Math.max(0, hit - 200) : 0;
+    return <Stack gap="2"><pre className="trajectory-details__value" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="value">
+      {start > 0 && '…'}<HighlightedText text={text.slice(start, start + limit)} />
+    </pre>{text.length > start + limit && <Button size="xs" variant="text"
+      onClick={() => setLimit(amount => amount + 16000)}>{t('trajectory.showMore')}</Button>}</Stack>;
+  }
+  return <ValueTree value={value} />;
+}
+function ValueTree({ value }: { value: object }) {
+  const { t } = useI18n('flow-chat');
+  const query = useContext(QueryContext).trim().toLowerCase();
+  const [limit, setLimit] = useState(50);
+  const keys = useMemo(() => {
+    const keys = Object.keys(value);
+    if (!query) return keys;
+    const matching = keys.filter(key => key.toLowerCase().includes(query) || trajectoryValueMatches((value as Record<string, unknown>)[key], query));
+    const found = new Set(matching);
+    return [...matching, ...keys.filter(key => !found.has(key))];
+  }, [value, query]);
+  if (!keys.length) return <code className="trajectory-details__inline-value" data-openbitfun-product-component="session-trajectory"
+    data-openbitfun-product-part="inlineValue">{Array.isArray(value) ? '[]' : '{}'}</code>;
+  return <FieldGroup appearance="plain" dividers className="trajectory-details__tree" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="tree">
+    {keys.slice(0, limit).map(key => <ValueBranch key={key} name={key} value={(value as Record<string, unknown>)[key]} />)}
+    {keys.length > limit && <Button size="xs" variant="text" onClick={() => setLimit(count => count + 50)}>{t('trajectory.showMore')}</Button>}
+  </FieldGroup>;
+}
+function ValueBranch({ name, value }: { name: string; value: unknown }) {
+  const { t } = useI18n('flow-chat');
+  const query = useContext(QueryContext).trim().toLowerCase();
+  const short = value === null || typeof value !== 'object' && String(value).length <= 160;
+  const type = value === null ? 'null' : Array.isArray(value) ? 'array' : typeof value;
+  const label = <span className="trajectory-details__field-label" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="fieldLabel">
+    <code className="trajectory-details__name" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="name"><HighlightedText text={name} /></code>
+    {value !== undefined && <code className="trajectory-details__type" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="type">{type}</code>}
+  </span>;
+  if (short) return <FieldRow align="start" padding="none" className="trajectory-details__attribute"
+    data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="attribute">
+    <dl className="trajectory-details__field" data-layout={typeof value === 'string' && (value.length > 64 || value.includes('\n')) ? 'stacked' : 'inline'}
+      data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="field">
+      <dt>{label}</dt>
+      <dd><code className="trajectory-details__inline-value" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="inlineValue">
+        <HighlightedText text={value === undefined ? t('trajectory.notRecorded') : value === '' ? '""' : String(value)} />
+      </code></dd>
+    </dl>
+  </FieldRow>;
+  return <FieldRow align="start" padding="none" className="trajectory-details__attribute"
+    data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="attribute">
+    <Disclosure summary={label} defaultOpen={!!query && (name.toLowerCase().includes(query) || trajectoryValueMatches(value, query))}
+      className="trajectory-details__branch" headerClassName="trajectory-details__nested-header"
+      triggerClassName="trajectory-details__nested-trigger" contentInnerClassName="trajectory-details__nested-content"
+      data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="branch"
+      unmountOnClose><ValueView value={value} /></Disclosure>
+  </FieldRow>;
+}
+function DetailSection({ title, section, children }: {
+  title: string; section?: 'parameters' | 'result'; children: ReactNode;
+}) {
+  return <Disclosure summary={<span className="trajectory-details__section-title" data-openbitfun-product-component="session-trajectory"
+    data-openbitfun-product-part="sectionTitle">{title}</span>} defaultOpen unmountOnClose className="trajectory-details__section"
+    headerClassName="trajectory-details__section-header" triggerClassName="trajectory-details__section-trigger"
+    contentInnerClassName="trajectory-details__section-content"
+    data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="section" data-trajectory-section={section}>
+    <Stack gap="2">{children}</Stack>
+  </Disclosure>;
+}
+function TimingSummary({ values }: { values: string[][] }) {
+  return <dl className="trajectory-details__timing" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="timing">
+    {values.map(([label, value]) => <div key={label} className="trajectory-details__timing-item">
+      <dt className="trajectory-details__label" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="label">{label}</dt>
+      <dd className="trajectory-details__fact-value" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="factValue">{value}</dd>
+    </div>)}
+  </dl>;
+}
+function DetailFields({ values }: { values: string[][] }) {
+  return <FieldGroup appearance="plain" dividers>{values.map(([label, value]) => <FieldRow key={label} align="start" padding="none"
+    className="trajectory-details__fact" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="fact">
+    <div className="trajectory-details__fact-content">
+      <span className="trajectory-details__label" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="label">{label}</span>
+      <span className="trajectory-details__fact-value" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="factValue">{value}</span>
+    </div>
+  </FieldRow>)}</FieldGroup>;
+}
+
+export function TrajectoryDetails({ sessionId, surfaceId, node, query }: TrajectoryPanelData) {
+  const { t, formatNumber, formatDate } = useI18n(['flow-chat', 'shared']);
+  const state = useSyncExternalStore(subscribe, getState, getState);
+  const surface = useSyncExternalStore(onSurfaceActivated, getActiveSurfaceScope, getActiveSurfaceScope);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const [retained, setRetained] = useState<{ owner: string; turn: DialogTurn }>();
+  const owner = JSON.stringify([surfaceId, surface.epoch, sessionId]);
+  const [loading, setLoading] = useState(false);
+  const [retry, setRetry] = useState(0);
+  const session = surface.surfaceId === surfaceId ? state.sessions.get(sessionId) : undefined;
+  const live = session?.dialogTurns.find(turn => turn.id === node.turnId);
+  const cached = !live && session ? flowChatStore.getSessionHistoryViewState(sessionId)?.loadedRanges
+    .flatMap(range => range.turns).find(turn => turn.id === node.turnId) : undefined;
+  const retired = session?.turnCatalog?.complete === true && !session.turnCatalog.entries.some(entry => entry.turnId === node.turnId)
+    && !live;
+  const turn = retired ? undefined : live ?? cached ?? (surface.surfaceId === surfaceId && retained?.owner === owner && retained.turn.id === node.turnId ? retained.turn : undefined);
+  useEffect(() => { const turn = live ?? cached; if (turn) setRetained({ owner, turn }); }, [live, cached, owner]);
+  useEffect(() => {
+    if (turn || retired || !session || surface.surfaceId !== surfaceId) return;
+    let cancelled = false;
+    setLoading(true);
+    const current = () => !cancelled && surface.isCurrent();
+    const read = async () => {
+      if (surfaceId !== 'local') {
+        let snapshot = flowChatStore.getState().sessions.get(sessionId);
+        while (current() && snapshot?.isPartial && !snapshot.dialogTurns.some(turn => turn.id === node.turnId)) {
+          const advanced = await flowChatStore.loadOlderRelaySessionHistory(sessionId);
+          if (!current()) return;
+          snapshot = flowChatStore.getState().sessions.get(sessionId);
+          if (!advanced) break;
+        }
+        return snapshot?.dialogTurns.find(turn => turn.id === node.turnId);
+      }
+      const result = await flowChatStore.loadSessionTurnWindow(sessionId, node.turnOrdinal, { before: 0, after: 1, source: 'target' });
+      return result.isCurrent && result.status === 'ready' ? result.range?.turns.find(item => item.id === node.turnId) : undefined;
+    };
+    void read().then(turn => {
+      if (current() && turn) setRetained({ owner, turn });
+    }).catch(() => {}).finally(() => { if (current()) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [node.turnId, sessionId, surfaceId, surface.epoch, retry, !!turn, !!session, retired, owner]);
+  const round = turn?.modelRounds.find(item => item.id === node.roundId);
+  const item = round?.items.find(item => item.id === node.id);
+  const tool = item?.type === 'tool' ? item as FlowToolItem : undefined;
+  const user = node.focusItemId && item?.type === 'user-steering' ? item : turn?.userMessage;
+  const output = useMemo(() => tool?.toolResult ? (tool.toolResult.result !== undefined ? tool.toolResult.result : tool.toolResult.resultForAssistant)
+    : (node.kind === 'model' ? round?.items.filter(item => item.type === 'text' || item.type === 'thinking')
+      .map(item => ({ id: item.id, content: item.content })) : user?.content), [tool, round, user, node.kind]);
+  const available = !!turn && (node.kind === 'tool' ? !!tool : node.kind === 'model' ? !!round : !!user);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const section = node.matchField === 'parameters' ? 'parameters' : 'result';
+    const match = query && available ? viewport.querySelector<HTMLElement>(`[data-trajectory-section="${section}"] mark`)
+      ?? viewport.querySelector<HTMLElement>('mark') : null;
+    // Keep search navigation inside this panel; do not scroll the conversation or its ancestors.
+    viewport.scrollTop = match ? Math.max(0, viewport.scrollTop + match.getBoundingClientRect().top - viewport.getBoundingClientRect().top) : 0;
+  }, [owner, node.id, node.turnId, node.matchField, query, available]);
+  const missing = t('trajectory.notRecorded');
+  const duration = (value?: number | null) => typeof value === 'number' && Number.isFinite(value)
+    ? formatNumber(value / 1000, { style: 'unit', unit: 'second', maximumFractionDigits: 3 }) : missing;
+  const status = tool?.status ?? (node.kind === 'model' ? round?.status : node.status) ?? node.status;
+  const statusPresentation = trajectoryStatus(status, t);
+  const source = node.kind === 'user' ? undefined : tool ?? round;
+  const timing = [
+    [t('trajectory.duration'), duration(source?.durationMs ?? node.durationMs)],
+    [t('trajectory.queue'), duration(tool?.queueWaitMs)], [t('trajectory.preflight'), duration(tool?.preflightMs)],
+    [t('trajectory.confirmation'), duration(tool?.confirmationWaitMs)], [t('trajectory.execution'), duration(tool?.executionMs)],
+    [t('trajectory.firstOutput'), duration(round?.ttftMs)], [t('trajectory.streaming'), duration(round?.streamDurationMs)],
+  ];
+  const parameters = tool?.toolCall.input ?? (round && { providerId: round.providerId, model: round.effectiveModelName,
+    modelConfigId: round.modelConfigId, routing: round.routing, attempts: round.attemptDiagnostics, tokenDetails: round.tokenDetails });
+  const fields = [[t('trajectory.started'), node.timestamp ? formatDate(node.timestamp, { dateStyle: 'medium', timeStyle: 'medium' }) : missing],
+    ...timing.filter(([, value], index) => node.kind !== 'user' && (index === 0 || value !== missing
+      && (node.kind === 'tool' ? index <= 4 : index >= 5)))];
+  return <div className="trajectory-details" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="details">
+    <div className="trajectory-details__header" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="header">
+    <PageHeader level={2} size="sm" className="trajectory-details__identity" title={<span className="trajectory-details__heading"
+      data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="heading">
+      <OverflowText>{node.label || (node.kind === 'user' ? t('trajectory.user') : t('trajectory.model'))}</OverflowText>
+      <span className="trajectory-details__turn" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="turn">{t('trajectory.turn', { turn: node.turnOrdinal + 1 })}</span>
+    </span>}
+      leading={<Icon size="sm" name={node.kind === 'tool' ? 'terminal' : node.kind === 'user' ? 'user' : 'message-square'} />}
+      action={<StatusPill tone={statusPresentation.tone}>{statusPresentation.label}</StatusPill>} />
+    <TimingSummary values={fields} />
+    </div>
+    <ScrollArea ref={viewportRef} className="trajectory-details__viewport" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="viewport">
+      <QueryContext.Provider value={query}>
+      <Stack gap="4">
+        {query && <Alert tone="info" message={t('trajectory.query', { query })} />}
+        {!available ? !turn && loading ? <LoadingState>{t('trajectory.loading')}</LoadingState>
+          : <Empty title={t('trajectory.unavailable')} actions={!turn && !retired && session
+            ? <Button size="sm" variant="secondary" onClick={() => setRetry(value => value + 1)}>{t('trajectory.retry')}</Button> : undefined} />
+          : <>
+            {node.kind !== 'user' && <DetailSection title={t('trajectory.parameters')} section="parameters"
+              key={`${node.turnId}:${node.id}:parameters:${query}`}>
+              <ValueView value={parameters} />
+            </DetailSection>}
+            <DetailSection title={t('trajectory.result')} section="result"
+              key={`${node.turnId}:${node.id}:output:${query}`}>
+              {tool?.toolResult?.error && <Alert tone="error" message={tool.toolResult.error} />}
+              <ValueView value={output} />
+            </DetailSection>
+          </>}
+      </Stack>
+      </QueryContext.Provider>
+    </ScrollArea>
+  </div>;
+}
+
+
+export function TrajectoryRangeDetails({ sessionId, surfaceId, range, viewId }: {
+  sessionId: string; surfaceId: string; range: TrajectoryRangeSummary; viewId: string;
+}) {
+  const { t, formatNumber } = useI18n('flow-chat');
+  const scope = useSyncExternalStore(onSurfaceActivated, getActiveSurfaceScope, getActiveSurfaceScope);
+  const duration = (value?: number) => value === undefined ? t('trajectory.notRecorded')
+    : formatNumber(value / 1000, { style: 'unit', unit: 'second', maximumFractionDigits: 3 });
+  const metrics = [[t('trajectory.user'), formatNumber(range.counts.user)], [t('trajectory.model'), formatNumber(range.counts.model)],
+    [t('trajectory.tool'), formatNumber(range.counts.tool)], [t('trajectory.errors'), formatNumber(range.counts.errors)],
+    [t('trajectory.modelTotal'), duration(range.modelMs)], [t('trajectory.toolTotal'), duration(range.toolMs)]];
+  return <div className="trajectory-details" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="details">
+    <div className="trajectory-details__header" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="header">
+    <PageHeader level={2} size="sm" title={t('trajectory.rangeDetails')}
+      description={t('trajectory.rangeTurns', { start: range.start.turnOrdinal + 1, end: range.end.turnOrdinal + 1 })} />
+    <TimingSummary values={metrics.slice(4)} />
+    </div>
+    <ScrollArea className="trajectory-details__viewport" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="viewport">
+      <Stack gap="4">
+        <DetailSection title={t('trajectory.overview')}><DetailFields values={metrics.slice(0, 4)} /></DetailSection>
+        <Alert tone="info" message={t('trajectory.parallelTime')} />
+        <Stack direction="horizontal" gap="2" wrap>{[range.start, range.end].map((node, index) => <Button key={index}
+          size="sm" variant="secondary" disabled={scope.surfaceId !== surfaceId}
+          onClick={() => void globalEventBus.emit<TrajectoryPanelData>(TRAJECTORY_NAVIGATE_EVENT, { sessionId, surfaceId, viewId, node, query: '' })}>
+          {index === 0 ? t('trajectory.locateStart') : t('trajectory.locateEnd')}</Button>)}</Stack>
+      </Stack>
+    </ScrollArea>
+  </div>;
+}
diff --git a/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.test.tsx b/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.test.tsx
new file mode 100644
index 0000000000..5049b77ccf
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.test.tsx
@@ -0,0 +1,224 @@
+// @vitest-environment jsdom
+import { act, createRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Session } from '../types/flow-chat';
+import type { TrajectoryNode } from './trajectoryModel';
+const mocks = vi.hoisted(() => ({ nodes: [] as TrajectoryNode[], select: vi.fn(), clearSelection: vi.fn(), range: vi.fn(), close: vi.fn(), query: vi.fn(), searchState: vi.fn() }));
+vi.mock('./useTrajectory', () => ({ useTrajectory: () => ({ nodes: mocks.nodes, complete: true, supported: true, loading: false, error: false, retry: vi.fn() }) }));
+vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: (key: string) => key, formatNumber: (value: number) => String(value) }) }));
+vi.mock('@openbitfun/ui', async () => {
+  const { forwardRef } = await import('react');
+  return {
+    Button: ({ children, variant: _v, size: _s, ...props }: any) => <button {...props}>{children}</button>,
+    IconButton: ({ icon, size: _s, ...props }: any) => <button {...props}>{icon}</button>, Icon: () => null,
+    SearchField: forwardRef<HTMLInputElement, any>((props, ref) => <input ref={ref} {...props} />),
+    Stack: ({ children }: any) => <div>{children}</div>, StatusPill: ({ children }: any) => <span>{children}</span>,
+    Tooltip: ({ children }: any) => children,
+  };
+});
+import { TrajectoryExplorer, type TrajectoryExplorerRef } from './TrajectoryExplorer';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root: Root; let container: HTMLDivElement;
+let explorer: ReturnType<typeof createRef<TrajectoryExplorerRef>>;
+beforeEach(() => {
+  explorer = createRef<TrajectoryExplorerRef>();
+  mocks.nodes = Array.from({ length: 10000 }, (_, i) => ({ id: `${i}`, turnId: `${Math.floor(i / 3)}`, turnOrdinal: Math.floor(i / 3),
+    kind: (['user', 'model', 'tool'] as const)[i % 3], label: '', preview: '', status: 'completed', timestamp: i, matched: i % 2 === 0 }));
+  mocks.select.mockReset().mockResolvedValue(true); mocks.range.mockReset(); mocks.clearSelection.mockReset();
+  mocks.close.mockReset(); mocks.query.mockReset(); mocks.searchState.mockReset();
+  vi.stubGlobal('ResizeObserver', class { observe() {} disconnect() {} });
+  HTMLElement.prototype.setPointerCapture = () => {}; HTMLElement.prototype.hasPointerCapture = () => true; HTMLElement.prototype.releasePointerCapture = () => {};
+  container = document.createElement('div'); document.body.append(container); root = createRoot(container);
+});
+afterEach(async () => { await act(async () => root.unmount()); container.remove(); vi.useRealTimers(); vi.unstubAllGlobals(); });
+async function mount(searchInput = '') { await act(async () => root.render(<TrajectoryExplorer ref={explorer} session={{ sessionId: 's' } as Session} searchInput={searchInput}
+  onSelect={mocks.select} onClose={mocks.close} onRangeChange={mocks.range} onQueryChange={mocks.query} onSearchStateChange={mocks.searchState} onClearSelection={mocks.clearSelection} />));
+  const rail = container.querySelector('[role="listbox"]') as HTMLElement;
+  Object.defineProperty(rail, 'clientHeight', { configurable: true, value: 60 });
+  rail.getBoundingClientRect = () => ({ left: 0, right: 400, width: 400, top: 0, bottom: 72, height: 72, x: 0, y: 0, toJSON: () => ({}) });
+}
+function pointer(target: Element, type: string, x: number, pointerType = 'mouse', y = 30) {
+  const event = new MouseEvent(type, { bubbles: true, button: 0, clientX: x, clientY: y });
+  Object.defineProperty(event, 'pointerType', { value: pointerType });
+  Object.defineProperty(event, 'pointerId', { value: 1 }); target.dispatchEvent(event);
+}
+describe('trajectory rail', () => {
+  it('tracks the pointer across lanes and horizontal scrolling without selecting or opening details', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]') as HTMLElement;
+    const line = container.querySelector('.trajectory__reference-line') as HTMLElement;
+    expect(line.hidden).toBe(true);
+    await act(async () => pointer(rail, 'pointermove', 35));
+    expect(line.hidden).toBe(false);
+    expect(line.style.transform).toBe('translateX(35px)');
+    // The mouse is in the model lane; the reference line hits the tool below it.
+    expect(container.querySelector('[data-reference-hit="true"]')?.getAttribute('data-kind')).toBe('tool');
+    expect(container.querySelector('[data-reference-hit="true"]')?.getAttribute('aria-posinset')).toBe('3');
+    await act(async () => { rail.scrollLeft = 1400; rail.dispatchEvent(new Event('scroll')); });
+    expect(line.style.transform).toBe('translateX(1435px)');
+    expect(container.querySelector('[data-reference-hit="true"]')?.getAttribute('aria-posinset')).toBe('120');
+    await act(async () => pointer(rail, 'pointermove', 50, 'mouse', 50));
+    expect(line.style.transform).toBe('translateX(1450px)');
+    expect(container.querySelectorAll('[data-reference-hit="true"]')).toHaveLength(1);
+    expect(container.querySelector('[data-reference-hit="true"]')?.getAttribute('aria-posinset')).toBe('121');
+    expect(mocks.select).not.toHaveBeenCalled();
+    expect(mocks.range).not.toHaveBeenCalled();
+    await act(async () => pointer(rail, 'pointerout', 420));
+    expect(line.hidden).toBe(true);
+    expect(container.querySelector('[data-reference-hit="true"]')).toBeNull();
+  });
+  it('hides the reference line for touch, cancellation and the scrollbar', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]')!;
+    const line = container.querySelector('.trajectory__reference-line') as HTMLElement;
+    await act(async () => pointer(rail, 'pointermove', 35));
+    await act(async () => pointer(rail, 'pointermove', 35, 'touch'));
+    expect(line.hidden).toBe(true);
+    await act(async () => pointer(rail, 'pointermove', 35));
+    await act(async () => pointer(rail, 'pointercancel', 35));
+    expect(line.hidden).toBe(true);
+    await act(async () => pointer(rail, 'pointermove', 35, 'mouse', 65));
+    expect(line.hidden).toBe(true);
+  });
+  it('bounds mounted nodes for a long session while retaining the complete horizontal extent', async () => {
+    await mount(); expect(container.querySelectorAll('[role="option"]').length).toBeLessThan(100);
+    expect((container.querySelector('.trajectory__track') as HTMLElement).style.width).toBe('120000px');
+  });
+  it('drag-selects a range, exposes keyboard handles and reports the inclusive event counts', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]')!;
+    await act(async () => { pointer(rail, 'pointerdown', 2); pointer(rail, 'pointermove', 35); pointer(rail, 'pointerup', 35); });
+    expect(mocks.select).not.toHaveBeenCalled();
+    expect(mocks.range).toHaveBeenCalledWith(expect.objectContaining({ counts: { user: 1, model: 1, tool: 1, errors: 0 } }), true);
+    const end = container.querySelector('[aria-label="trajectory.rangeEnd"]')!;
+    await act(async () => end.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })));
+    expect(end.getAttribute('aria-valuenow')).toBe('4');
+  });
+  it('dismisses a range on an outside click after the clicked control receives its action', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]')!;
+    await act(async () => { pointer(rail, 'pointerdown', 2); pointer(rail, 'pointermove', 35); pointer(rail, 'pointerup', 35); });
+    const outside = document.createElement('button'); document.body.append(outside);
+    const action = vi.fn(() => expect(container.querySelector('.trajectory__range')).not.toBeNull());
+    outside.addEventListener('click', action);
+    try {
+      mocks.range.mockClear();
+      await act(async () => outside.click());
+      expect(action).toHaveBeenCalledTimes(1);
+      expect(container.querySelector('.trajectory__range')).toBeNull();
+      expect(mocks.range).toHaveBeenCalledExactlyOnceWith(null, false);
+      expect(mocks.select).not.toHaveBeenCalled();
+    } finally { outside.remove(); }
+  });
+  it('replaces a range with a single-node selection while preserving range handle interactions', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]')!;
+    await act(async () => { pointer(rail, 'pointerdown', 2); pointer(rail, 'pointermove', 35); pointer(rail, 'pointerup', 35); });
+    const handle = container.querySelector('[data-range-edge="end"]')!;
+    await act(async () => { pointer(handle, 'pointerdown', 35); pointer(handle, 'pointerup', 35); });
+    expect(container.querySelector('.trajectory__range')).not.toBeNull();
+    expect(mocks.select).not.toHaveBeenCalled();
+    await act(async () => { pointer(rail, 'pointerdown', 50); pointer(rail, 'pointerup', 50); });
+    expect(container.querySelector('.trajectory__range')).toBeNull();
+    expect(mocks.range).toHaveBeenLastCalledWith(null, false);
+    expect(mocks.select).toHaveBeenCalledWith(expect.objectContaining({ node: mocks.nodes[4] }));
+  });
+  it('a click selects a node without creating a range and keyboard movement alone does not navigate', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]')!;
+    await act(async () => { pointer(rail, 'pointerdown', 18); pointer(rail, 'pointerup', 18); });
+    expect(mocks.select).toHaveBeenCalledWith(expect.objectContaining({ node: mocks.nodes[1] }));
+    mocks.select.mockClear();
+    await act(async () => rail.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })));
+    expect(mocks.select).not.toHaveBeenCalled();
+  });
+  it('retains node selection after leaving, waiting and scrolling, until a blank click clears it', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]') as HTMLElement;
+    await act(async () => { pointer(rail, 'pointerdown', 18); pointer(rail, 'pointerup', 18); });
+    await act(async () => { pointer(rail, 'pointerout', 420); rail.blur(); rail.dispatchEvent(new Event('scroll')); });
+    vi.useFakeTimers();
+    act(() => vi.advanceTimersByTime(5000));
+    expect(container.querySelector('[aria-selected="true"]')?.getAttribute('aria-posinset')).toBe('2');
+    const control = document.createElement('button'); const blank = document.createElement('div');
+    document.body.append(control, blank);
+    try {
+      act(() => control.click());
+      expect(container.querySelector('[aria-selected="true"]')).not.toBeNull();
+      act(() => blank.click());
+      expect(container.querySelector('[aria-selected="true"]')).toBeNull();
+      expect(mocks.clearSelection).toHaveBeenCalledTimes(1);
+      expect(mocks.close).not.toHaveBeenCalled();
+    } finally { control.remove(); blank.remove(); }
+  });
+  it('clears selection in trailing rail whitespace without selecting the last node or focusing the first', async () => {
+    mocks.nodes = mocks.nodes.slice(0, 3);
+    await mount(); const rail = container.querySelector('[role="listbox"]')!;
+    await act(async () => { pointer(rail, 'pointerdown', 18); pointer(rail, 'pointerup', 18); });
+    mocks.select.mockClear();
+    await act(async () => { pointer(rail, 'pointerdown', 80); pointer(rail, 'pointerup', 80); });
+    expect(container.querySelector('[aria-selected="true"]')).toBeNull();
+    expect(container.querySelector('[data-focused="true"]')).toBeNull();
+    expect(mocks.select).not.toHaveBeenCalled();
+    expect(mocks.clearSelection).toHaveBeenCalledTimes(1);
+    expect(mocks.close).not.toHaveBeenCalled();
+  });
+  it('omits the title row, duplicate search controls and event count from the trajectory', async () => {
+    await mount();
+    expect(container.querySelector('input')).toBeNull();
+    expect(container.querySelector('.trajectory__toolbar')).toBeNull();
+    expect(container.querySelector('.trajectory__summary')).toBeNull();
+    expect(container.querySelector('[role="listbox"]')).not.toBeNull();
+    expect(container.querySelector('.trajectory__status')).toBeNull();
+  });
+  it('drives search navigation and counts from controls hosted in the top bar', async () => {
+    vi.useFakeTimers();
+    await mount('needle');
+    await act(async () => { vi.advanceTimersByTime(200); });
+    expect(mocks.query).toHaveBeenLastCalledWith('needle');
+    await act(async () => explorer.current?.next());
+    expect(mocks.select).toHaveBeenLastCalledWith({ node: mocks.nodes[0], query: 'needle' });
+    expect(mocks.searchState).toHaveBeenLastCalledWith({ count: 5000, current: 1 });
+    await act(async () => explorer.current?.next());
+    expect(mocks.select).toHaveBeenLastCalledWith({ node: mocks.nodes[2], query: 'needle' });
+    await act(async () => explorer.current?.previous());
+    expect(mocks.select).toHaveBeenLastCalledWith({ node: mocks.nodes[0], query: 'needle' });
+  });
+  it('keeps top-bar search navigation inside the selected range', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]')!;
+    await act(async () => { pointer(rail, 'pointerdown', 2); pointer(rail, 'pointermove', 35); pointer(rail, 'pointerup', 35); });
+    await act(async () => explorer.current?.next());
+    expect(mocks.select).toHaveBeenLastCalledWith(expect.objectContaining({ node: mocks.nodes[0] }));
+    await act(async () => explorer.current?.next());
+    expect(mocks.select).toHaveBeenLastCalledWith(expect.objectContaining({ node: mocks.nodes[2] }));
+    expect(container.querySelector('.trajectory__range')).not.toBeNull();
+    expect(mocks.searchState).toHaveBeenLastCalledWith({ count: 2, current: 2 });
+  });
+  it('keeps the trajectory and top search open after an outside blank click', async () => {
+    await mount();
+    const search = document.createElement('div'); search.setAttribute('role', 'search');
+    search.innerHTML = '<input /><span>Search results</span>';
+    const blank = document.createElement('div'); document.body.append(search, blank);
+    try {
+      await act(async () => { search.querySelector('input')!.click(); search.querySelector('span')!.click(); });
+      expect(mocks.close).not.toHaveBeenCalled();
+      await act(async () => blank.click());
+      expect(mocks.close).not.toHaveBeenCalled();
+    } finally { search.remove(); blank.remove(); }
+  });
+  it('keyboard preview keeps the selected node until activation', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]') as HTMLElement;
+    await act(async () => { pointer(rail, 'pointerdown', 18); pointer(rail, 'pointerup', 18); });
+    mocks.select.mockClear();
+    await act(async () => rail.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })));
+    expect(container.querySelector('[aria-selected="true"]')?.getAttribute('aria-posinset')).toBe('2');
+    expect(container.querySelector('[data-focused="true"]')?.getAttribute('aria-posinset')).toBe('3');
+    await act(async () => rail.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })));
+    expect(mocks.select).toHaveBeenCalledWith(expect.objectContaining({ node: mocks.nodes[2] }));
+  });
+  it('keeps the committed selection while another node is resolving or cannot be located', async () => {
+    await mount(); const rail = container.querySelector('[role="listbox"]')!;
+    await act(async () => { pointer(rail, 'pointerdown', 18); pointer(rail, 'pointerup', 18); });
+    let finish!: (located: boolean) => void;
+    mocks.select.mockImplementation(() => new Promise(resolve => { finish = resolve; }));
+    await act(async () => { pointer(rail, 'pointerdown', 35); pointer(rail, 'pointerup', 35); });
+    expect(container.querySelector('[aria-selected="true"]')?.getAttribute('aria-posinset')).toBe('2');
+    await act(async () => finish(false));
+    expect(container.querySelector('[aria-selected="true"]')?.getAttribute('aria-posinset')).toBe('2');
+    expect(container.querySelector('.trajectory__status')?.textContent).toContain('trajectory.locateFailed');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.tsx b/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.tsx
new file mode 100644
index 0000000000..b026b1ee6f
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.tsx
@@ -0,0 +1,316 @@
+import type React from 'react';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Button, Stack, StatusPill, Tooltip } from '@openbitfun/ui';
+import { useI18n } from '@/infrastructure/i18n';
+import type { Session } from '../types/flow-chat';
+import { useTrajectory } from './useTrajectory';
+import { trajectoryNodeKey, type TrajectoryNode } from './trajectoryModel';
+import { resolveTrajectoryRange, summarizeTrajectoryRange, type TrajectoryRange, type TrajectoryRangeSummary } from './trajectoryRange';
+import { trajectoryStatus } from './trajectoryPresentation';
+import './Trajectory.scss';
+
+const NODE_WIDTH = 12;
+const OVERSCAN = 8;
+const lanes = ['user', 'model', 'tool'] as const;
+
+export interface TrajectorySelection { node: TrajectoryNode; query: string }
+export interface TrajectorySearchState { count: number; current: number }
+export interface TrajectoryExplorerRef { next(): void; previous(): void }
+interface TrajectoryExplorerProps {
+  session: Session; searchInput: string; onQueryChange: (value: string) => void;
+  onSearchStateChange?: (state: TrajectorySearchState) => void;
+  onSelect: (selection: TrajectorySelection) => Promise<boolean>; onClose: () => void;
+  selectedNodeKey?: string;
+  onClearSelection?: () => void;
+  onRangeChange: (range: TrajectoryRangeSummary | null, activate: boolean) => void;
+}
+export const TrajectoryExplorer = forwardRef<TrajectoryExplorerRef, TrajectoryExplorerProps>(function TrajectoryExplorer({
+  session, searchInput, onQueryChange, onSearchStateChange, onSelect, onClose, onRangeChange, selectedNodeKey, onClearSelection,
+}, ref) {
+  const { t, formatNumber } = useI18n(['flow-chat', 'shared']);
+  const railId = useId();
+  const [query, setQuery] = useState('');
+  const [range, setRange] = useState<TrajectoryRange | null>(null);
+  const rangeRef = useRef(range);
+  rangeRef.current = range;
+  const clearRange = useCallback(() => {
+    if (!rangeRef.current) return;
+    rangeRef.current = null;
+    setRange(null);
+    onRangeChange(null, false);
+  }, [onRangeChange]);
+  const drag = useRef<{ anchor: string; focus: string; moved: boolean; pointerId: number } | null>(null);
+  const suppressClick = useRef(false);
+  const [selected, setSelected] = useState<string>();
+  const [focused, setFocused] = useState<string>();
+  const [keyboardPreview, setKeyboardPreview] = useState(false);
+  const [railFocused, setRailFocused] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const generation = useRef(0);
+  const clearNodeSelection = useCallback(() => {
+    generation.current++;
+    setSelected(undefined);
+    setFocused(undefined);
+    setKeyboardPreview(false);
+    setBusy(false);
+    setFailed(false);
+    onClearSelection?.();
+  }, [onClearSelection]);
+  const rail = useRef<HTMLDivElement>(null);
+  const referenceLine = useRef<HTMLDivElement>(null);
+  const referenceNode = useRef<HTMLElement | null>(null);
+  const hoverPointer = useRef<{ x: number; y: number } | null>(null);
+  const [viewport, setViewport] = useState({ left: 0, width: 800 });
+  const { nodes, loading, complete, error, supported, retry } = useTrajectory(session, query);
+  const highlightReferenceNode = (node: HTMLElement | null) => {
+    if (referenceNode.current === node) return;
+    referenceNode.current?.removeAttribute('data-reference-hit');
+    referenceNode.current = node;
+    node?.setAttribute('data-reference-hit', 'true');
+  };
+  const hideReferenceLine = () => {
+    hoverPointer.current = null;
+    if (referenceLine.current) referenceLine.current.hidden = true;
+    highlightReferenceNode(null);
+  };
+  const positionReferenceLine = () => {
+    const element = rail.current;
+    const line = referenceLine.current;
+    const pointer = hoverPointer.current;
+    if (!element || !line || !pointer) return;
+    const rect = element.getBoundingClientRect();
+    const x = pointer.x - rect.left + element.scrollLeft;
+    line.hidden = !nodes.length || pointer.x < rect.left || pointer.x >= rect.right
+      || pointer.y < rect.top || pointer.y >= rect.top + element.clientHeight
+      || x < 0 || x >= nodes.length * NODE_WIDTH;
+    // Only the overlay and the two affected mounted nodes change on pointer motion.
+    if (!line.hidden) line.style.transform = `translateX(${x}px)`;
+    highlightReferenceNode(line.hidden ? null : element.querySelector<HTMLElement>(
+      `[data-trajectory-index="${Math.floor(x / NODE_WIDTH)}"]`,
+    ));
+  };
+  const previewPointer = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.pointerType === 'touch') { hideReferenceLine(); return; }
+    hoverPointer.current = { x: event.clientX, y: event.clientY };
+    positionReferenceLine();
+  };
+  useEffect(() => { if (!nodes.length) hideReferenceLine(); }, [nodes.length]);
+  // A horizontal scroll can mount the hit node after the scroll handler runs.
+  useLayoutEffect(() => { positionReferenceLine(); }, [viewport, nodes]);
+  useEffect(() => {
+    if (!range && !selected && !busy) return;
+    const element = rail.current;
+    const document = element?.ownerDocument;
+    const dismiss = (event: MouseEvent) => {
+      if (!(event.target instanceof Element) || element?.contains(event.target)) return;
+      if (event.target.closest('[role="search"]')) return;
+      clearRange();
+      if (!event.target.closest('button, a, input, textarea, select, label, [role="button"], [role="tab"], [role="menuitem"], [role="slider"], [contenteditable="true"]')) {
+        clearNodeSelection();
+      }
+    };
+    // Let endpoint buttons finish their click before range details are replaced.
+    document?.addEventListener('click', dismiss);
+    return () => document?.removeEventListener('click', dismiss);
+  }, [!!range, !!selected, busy, clearRange, clearNodeSelection]);
+  const bounds = useMemo(() => resolveTrajectoryRange(nodes, range), [nodes, range]);
+  const matches = useMemo(() => nodes.filter((node, index) => node.matched
+    && (!bounds || index >= bounds[0] && index <= bounds[1])), [nodes, bounds]);
+  useEffect(() => {
+    if (range && !bounds && !loading) { setRange(null); onRangeChange(null, false); }
+    if (bounds) onRangeChange(summarizeTrajectoryRange(nodes, bounds), false);
+  }, [nodes, bounds, onRangeChange]);
+  const commitRange = (anchor: number, focus: number) => {
+    if (!nodes[anchor] || !nodes[focus]) return;
+    setRange({ anchor: trajectoryNodeKey(nodes[anchor]), focus: trajectoryNodeKey(nodes[focus]) });
+    onRangeChange(summarizeTrajectoryRange(nodes, [Math.min(anchor, focus), Math.max(anchor, focus)]), true);
+  };
+  const pointerIndex = (clientX: number) => Math.max(0, Math.min(nodes.length - 1,
+    Math.floor((clientX - (rail.current?.getBoundingClientRect().left ?? 0) + (rail.current?.scrollLeft ?? 0)) / NODE_WIDTH)));
+  const beginDrag = (event: React.PointerEvent<HTMLDivElement>) => {
+    previewPointer(event);
+    setKeyboardPreview(false);
+    if (event.button !== 0 || !nodes.length || event.shiftKey) return;
+    const handle = (event.target as HTMLElement).closest<HTMLElement>('[data-range-edge]')?.dataset.rangeEdge;
+    const index = pointerIndex(event.clientX);
+    const anchor = handle && bounds ? (handle === 'start' ? bounds[1] : bounds[0]) : index;
+    drag.current = { anchor: trajectoryNodeKey(nodes[anchor]), focus: trajectoryNodeKey(nodes[index]), moved: !!handle, pointerId: event.pointerId };
+    suppressClick.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const matchIndex = matches.findIndex(node => trajectoryNodeKey(node) === selected);
+  useEffect(() => {
+    onSearchStateChange?.({ count: matches.length, current: matchIndex + 1 });
+  }, [matches.length, matchIndex, onSearchStateChange]);
+  useEffect(() => { setSelected(selectedNodeKey); }, [selectedNodeKey]);
+  const selectedIndex = nodes.findIndex(node => trajectoryNodeKey(node) === selected);
+  const focusedIndex = Math.max(0, nodes.findIndex(node => trajectoryNodeKey(node) === focused));
+  const revealIndex = railFocused ? focusedIndex : selectedIndex;
+  useEffect(() => {
+    const timer = setTimeout(() => { setQuery(searchInput); onQueryChange(searchInput); }, 200);
+    return () => clearTimeout(timer);
+  }, [searchInput, onQueryChange]);
+  useEffect(() => () => { generation.current++; }, []);
+  useLayoutEffect(() => {
+    const element = rail.current;
+    if (!element) return;
+    const update = () => {
+      hideReferenceLine();
+      setViewport({ left: element.scrollLeft, width: element.clientWidth });
+    };
+    update();
+    const observer = new ResizeObserver(update); observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    const element = rail.current;
+    if (!element || revealIndex < 0) return;
+    const left = revealIndex * NODE_WIDTH;
+    if (left < element.scrollLeft || left + NODE_WIDTH > element.scrollLeft + element.clientWidth) {
+      element.scrollLeft = Math.max(0, left - element.clientWidth / 2);
+      setViewport({ left: element.scrollLeft, width: element.clientWidth });
+    }
+  }, [revealIndex]);
+  const select = async (node: TrajectoryNode, keepRange = false) => {
+    if (!keepRange) clearRange();
+    const request = ++generation.current;
+    setFocused(trajectoryNodeKey(node)); setFailed(false); setBusy(true);
+    try {
+      const located = await onSelect({ node, query });
+      if (request === generation.current) {
+        setFailed(!located);
+        if (located) setSelected(trajectoryNodeKey(node));
+      }
+    } catch { if (request === generation.current) setFailed(true); }
+    finally { if (request === generation.current) setBusy(false); }
+  };
+  const advance = (direction: number) => {
+    if (!matches.length) return;
+    const index = matchIndex < 0 ? (direction > 0 ? 0 : matches.length - 1)
+      : (matchIndex + direction + matches.length) % matches.length;
+    void select(matches[index], true);
+  };
+  useImperativeHandle(ref, () => ({ next: () => advance(1), previous: () => advance(-1) }));
+  const start = Math.max(0, Math.floor(viewport.left / NODE_WIDTH) - OVERSCAN);
+  const end = Math.min(nodes.length, Math.ceil((viewport.left + viewport.width) / NODE_WIDTH) + OVERSCAN);
+  const mounted = nodes.slice(start, end);
+  const kindLabel = (node: TrajectoryNode) => node.kind === 'tool' ? t('trajectory.tool')
+    : node.kind === 'model' ? t('trajectory.model') : t('trajectory.user');
+  const status = failed ? t('trajectory.locateFailed') : error ? t('trajectory.loadFailed')
+    : loading ? t('trajectory.loading') : !supported || !complete ? t('trajectory.partial') : null;
+  return <section className="trajectory" aria-label={t('trajectory.title')}
+    data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="root"
+    onKeyDown={event => {
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+      if (event.key === 'Escape') { event.stopPropagation(); onClose(); }
+    }}>
+    <div className="trajectory__body" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="body">
+      <div className="trajectory__labels"><span>{t('trajectory.user')}</span><span>{t('trajectory.model')}</span><span>{t('trajectory.tool')}</span></div>
+      <div ref={rail} className="trajectory__rail" role="listbox" aria-label={t('trajectory.title')}
+        aria-busy={busy} tabIndex={0} data-keyboard-preview={railFocused && keyboardPreview}
+        aria-activedescendant={railFocused && nodes.length ? `${railId}-${focusedIndex}` : undefined}
+        onFocus={event => { if (event.target === event.currentTarget) setRailFocused(true); }}
+        onBlur={() => setRailFocused(false)} data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="rail"
+        onPointerDown={beginDrag}
+        onPointerEnter={previewPointer}
+        onPointerLeave={hideReferenceLine}
+        onPointerMove={event => {
+          previewPointer(event);
+          const active = drag.current;
+          if (!active || active.pointerId !== event.pointerId) return;
+          const element = event.currentTarget;
+          const rect = element.getBoundingClientRect();
+          if (event.clientX < rect.left + NODE_WIDTH) element.scrollLeft -= NODE_WIDTH;
+          if (event.clientX > rect.right - NODE_WIDTH) element.scrollLeft += NODE_WIDTH;
+          positionReferenceLine();
+          const index = pointerIndex(event.clientX);
+          const key = trajectoryNodeKey(nodes[index]);
+          active.moved ||= key !== active.anchor;
+          active.focus = key;
+          if (active.moved) setRange({ anchor: active.anchor, focus: key });
+        }}
+        onPointerUp={event => {
+          const active = drag.current; if (!active || active.pointerId !== event.pointerId) return;
+          drag.current = null; suppressClick.current = active.moved;
+          const anchor = nodes.findIndex(node => trajectoryNodeKey(node) === active.anchor);
+          const focus = nodes.findIndex(node => trajectoryNodeKey(node) === active.focus);
+          const x = event.clientX - event.currentTarget.getBoundingClientRect().left + event.currentTarget.scrollLeft;
+          if (active.moved) commitRange(anchor, focus);
+          else if (x < 0 || x >= nodes.length * NODE_WIDTH) {
+            suppressClick.current = true; clearRange(); clearNodeSelection();
+          }
+          else if (nodes[focus]) { suppressClick.current = true; void select(nodes[focus]); }
+          event.currentTarget.focus({ preventScroll: true });
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+        }}
+        onPointerCancel={() => { drag.current = null; suppressClick.current = true; hideReferenceLine(); }}
+        onScroll={event => {
+          positionReferenceLine();
+          setViewport({ left: event.currentTarget.scrollLeft, width: event.currentTarget.clientWidth });
+        }}
+        onKeyDown={event => {
+          if (!['ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter', ' '].includes(event.key) || !nodes.length) return;
+          hideReferenceLine();
+          event.preventDefault(); event.stopPropagation(); setKeyboardPreview(true);
+          if (event.key === 'Enter' || event.key === ' ') { void select(nodes[focusedIndex]); return; }
+          const index = event.key === 'Home' ? 0 : event.key === 'End' ? nodes.length - 1
+            : Math.min(nodes.length - 1, Math.max(0, focusedIndex + (event.key === 'ArrowLeft' ? -1 : 1)));
+          if (event.shiftKey) commitRange(bounds?.[0] ?? focusedIndex, index);
+          setFocused(trajectoryNodeKey(nodes[index]));
+        }}>
+        <div className="trajectory__track" style={{ width: nodes.length * NODE_WIDTH }}>
+          <div ref={referenceLine} hidden aria-hidden="true" className="trajectory__reference-line"
+            data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="referenceLine" />
+          {bounds && <div className="trajectory__range" style={{ left: bounds[0] * NODE_WIDTH, width: (bounds[1] - bounds[0] + 1) * NODE_WIDTH }}
+            data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="range">
+            {(['start', 'end'] as const).map(edge => <div key={edge} className={`trajectory__range-handle trajectory__range-handle--${edge}`}
+              role="slider" tabIndex={0} data-range-edge={edge} aria-label={edge === 'start' ? t('trajectory.rangeStart') : t('trajectory.rangeEnd')}
+              aria-valuemin={1} aria-valuemax={nodes.length} aria-valuenow={(edge === 'start' ? bounds[0] : bounds[1]) + 1}
+              onKeyDown={event => {
+                if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+                event.preventDefault(); event.stopPropagation();
+                const current = edge === 'start' ? bounds[0] : bounds[1];
+                const next = event.key === 'Home' ? 0 : event.key === 'End' ? nodes.length - 1
+                  : Math.max(0, Math.min(nodes.length - 1, current + (event.key === 'ArrowLeft' ? -1 : 1)));
+                commitRange(edge === 'start' ? bounds[1] : bounds[0], next);
+              }} />)}
+          </div>}
+          {mounted.map((node, index) => {
+            const key = trajectoryNodeKey(node);
+            const label = t('trajectory.node', { turn: node.turnOrdinal + 1, name: node.label || kindLabel(node) });
+            const nodeStatus = trajectoryStatus(node.status, t);
+            return <Tooltip key={key} placement="bottom" active={railFocused && focused !== undefined && start + index === focusedIndex} content={
+              <Stack gap="2" className="trajectory__tooltip" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="tooltip">
+                <strong>{node.label || kindLabel(node)}</strong>
+                <Stack direction="horizontal" align="center" gap="2" wrap>
+                  <span>{kindLabel(node)} · {t('trajectory.turn', { turn: node.turnOrdinal + 1 })}</span>
+                  <StatusPill tone={nodeStatus.tone}>{nodeStatus.label}</StatusPill>
+                </Stack>
+                {node.kind !== 'user' && <span>{t('trajectory.duration')}: {node.durationMs == null ? t('trajectory.notRecorded')
+                  : formatNumber(node.durationMs / 1000, { style: 'unit', unit: 'second', maximumFractionDigits: 3 })}</span>}
+                {node.preview && <span>{node.preview}</span>}
+              </Stack>}>
+
+              <button id={`${railId}-${start + index}`} type="button" role="option" aria-selected={key === selected} aria-label={label} tabIndex={-1}
+                aria-posinset={start + index + 1} aria-setsize={nodes.length}
+                className="trajectory__node" data-focused={railFocused && focused !== undefined && start + index === focusedIndex} data-kind={node.kind} data-status={node.status}
+                data-trajectory-index={start + index}
+                data-muted={(!!query.trim() && !node.matched) || !!bounds && (start + index < bounds[0] || start + index > bounds[1])} data-selected={key === selected}
+                data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="node"
+                style={{ width: NODE_WIDTH, left: (start + index) * NODE_WIDTH, top: lanes.indexOf(node.kind) * 20 }}
+                onClick={event => {
+                  if (suppressClick.current) { suppressClick.current = false; return; }
+                  if (event.shiftKey) { commitRange(Math.max(0, selectedIndex), start + index); return; }
+                  void select(node);
+                }}><span /></button>
+            </Tooltip>;
+          })}
+        </div>
+      </div>
+    </div>
+    {status && <div className="trajectory__status" role="status" data-openbitfun-product-component="session-trajectory" data-openbitfun-product-part="status">
+      {status}{error && <Button size="xs" variant="text" onClick={retry}>{t('trajectory.retry')}</Button>}
+    </div>}
+  </section>;
+});
diff --git a/src/web-ui/src/flow_chat/trajectory/trajectoryApi.test.ts b/src/web-ui/src/flow_chat/trajectory/trajectoryApi.test.ts
new file mode 100644
index 0000000000..730bc1fe53
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/trajectoryApi.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { Session } from '../types/flow-chat';
+const invoke = vi.hoisted(() => vi.fn(async (_command, prepare) => prepare()));
+vi.mock('@/infrastructure/api/service-api/invokePrepared', () => ({ invokePrepared: invoke }));
+import { loadTrajectoryCatalog, loadTrajectoryPage } from './trajectoryApi';
+const session = { sessionId: 's', workspaceId: 'ssh-workspace', workspacePath: '/home/remote/project', remoteConnectionId: 'ssh-host',
+  turnCatalog: { sessionId: 's', revision: 'rev', entries: [{ ordinal: 9, storageTurnIndex: 42, turnId: 'stable' }] },
+} as unknown as Session;
+describe('trajectory transport scope', () => {
+  it('retains SSH ownership and stable host identities in bounded page requests', async () => {
+    const payload = await loadTrajectoryPage(session, 9, 'needle', 256);
+    expect(invoke).toHaveBeenCalledWith('load_session_trajectory', expect.any(Function));
+    expect(payload).toEqual({ request: { sessionId: 's', workspaceId: 'ssh-workspace', workspacePath: '/home/remote/project',
+      remoteConnectionId: 'ssh-host', expectedCatalogRevision: 'rev', expectedTurnId: 'stable', targetStorageTurnIndex: 42,
+      before: 0, after: 8, nodeOffset: 256, query: 'needle' } });
+  });
+  it('discovers a host catalog without adopting a peer replica revision or controller path', async () => {
+    expect(await loadTrajectoryCatalog(session)).toEqual({ request: { sessionId: 's', workspaceId: 'ssh-workspace',
+      workspacePath: '/home/remote/project', remoteConnectionId: 'ssh-host', targetStorageTurnIndex: 0, catalogOnly: true } });
+    await expect(loadTrajectoryPage(session, 1, '')).rejects.toThrow('unavailable');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/trajectory/trajectoryApi.ts b/src/web-ui/src/flow_chat/trajectory/trajectoryApi.ts
new file mode 100644
index 0000000000..a38c731c48
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/trajectoryApi.ts
@@ -0,0 +1,21 @@
+import { invokePrepared } from '@/infrastructure/api/service-api/invokePrepared';
+import type { Session } from '../types/flow-chat';
+import type { TrajectoryPage } from './trajectoryModel';
+
+export function loadTrajectoryPage(session: Session, ordinal: number, query: string, nodeOffset = 0): Promise<TrajectoryPage> {
+  const entry = session.turnCatalog?.entries.find(item => item.ordinal === ordinal);
+  if (!entry || !session.workspaceId) return Promise.reject(new Error('Session trajectory history is unavailable'));
+  return invokePrepared('load_session_trajectory', async () => ({ request: {
+    sessionId: session.sessionId, workspaceId: session.workspaceId, workspacePath: session.workspacePath ?? '',
+    remoteConnectionId: session.remoteConnectionId, targetStorageTurnIndex: entry.storageTurnIndex,
+    expectedTurnId: entry.turnId, expectedCatalogRevision: session.turnCatalog?.revision,
+    before: 0, after: 8, query, nodeOffset,
+  } }));
+}
+
+export function loadTrajectoryCatalog(session: Session): Promise<TrajectoryPage> {
+  return invokePrepared('load_session_trajectory', async () => ({ request: {
+    sessionId: session.sessionId, workspaceId: session.workspaceId, workspacePath: session.workspacePath ?? '',
+    remoteConnectionId: session.remoteConnectionId, targetStorageTurnIndex: 0, catalogOnly: true,
+  } }));
+}
diff --git a/src/web-ui/src/flow_chat/trajectory/trajectoryModel.test.ts b/src/web-ui/src/flow_chat/trajectory/trajectoryModel.test.ts
new file mode 100644
index 0000000000..089202f83c
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/trajectoryModel.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { mergeTrajectoryNodes, projectTrajectoryTurn, trajectoryNodeKey, trajectoryValueMatches } from './trajectoryModel';
+import { resolveTrajectoryRange, summarizeTrajectoryRange } from './trajectoryRange';
+import type { DialogTurn } from '../types/flow-chat';
+
+export const turn = (): DialogTurn => ({
+  id: 'turn', sessionId: 'session', userMessage: { id: 'user', content: 'Find Needle', timestamp: 1 },
+  modelRounds: [{ id: 'round', index: 0, startTime: 2, status: 'completed', isComplete: true, isStreaming: false,
+    items: [{ id: 'text', type: 'text', content: 'A needle', isStreaming: false, timestamp: 2, status: 'completed' },
+      { id: 'tool', type: 'tool', toolName: 'Read', timestamp: 3, status: 'completed',
+        toolCall: { id: 'call', input: { path: '/NEEDLE' } }, toolResult: { success: true, result: { content: 'Found it' } } }] }],
+  startTime: 1, status: 'completed',
+} as DialogTurn);
+
+describe('trajectory projection and range identity', () => {
+  it('searches concrete model text, tool arguments and nested output without copying bodies into nodes', () => {
+    const nodes = projectTrajectoryTurn(turn(), 4, 'NEEDLE');
+    expect(nodes.map(node => node.matched)).toEqual([true, true, true]);
+    expect(nodes[1].focusItemId).toBe('text');
+    expect(nodes[2].matchField).toBe('parameters');
+    expect(JSON.stringify(nodes)).not.toContain('/NEEDLE');
+    expect(projectTrajectoryTurn(turn(), 4, 'found')[2].matchField).toBe('result');
+    expect(trajectoryValueMatches({ count: 0 }, '0')).toBe(true);
+  });
+  it('replaces a loaded turn as a unit so removed retry tools do not survive in history summaries', () => {
+    const historical = projectTrajectoryTurn(turn(), 4);
+    const edited = turn(); edited.modelRounds[0].items.pop();
+    const live = projectTrajectoryTurn(edited, 4);
+    expect(mergeTrajectoryNodes(historical, live)).toEqual(live);
+    expect(trajectoryNodeKey(live[1])).toBe(trajectoryNodeKey(historical[1]));
+  });
+  it('retains range endpoints across prepends and rejects missing identities after a rollback', () => {
+    const nodes = projectTrajectoryTurn(turn(), 4);
+    const range = { anchor: trajectoryNodeKey(nodes[2]), focus: trajectoryNodeKey(nodes[1]) };
+    expect(resolveTrajectoryRange(nodes, range)).toEqual([1, 2]);
+    const older = turn(); older.id = 'older';
+    expect(resolveTrajectoryRange([...projectTrajectoryTurn(older, 0), ...nodes], range)).toEqual([4, 5]);
+    expect(resolveTrajectoryRange(nodes.slice(0, 2), range)).toBeNull();
+  });
+  it('keeps missing durations distinct from measured zero and sums parallel calls explicitly', () => {
+    const nodes = projectTrajectoryTurn(turn(), 4);
+    expect(summarizeTrajectoryRange(nodes, [0, 2]).toolMs).toBeUndefined();
+    nodes[2].durationMs = 0; nodes[1].durationMs = 15;
+    const summary = summarizeTrajectoryRange(nodes, [0, 2]);
+    expect(summary).toMatchObject({ counts: { user: 1, model: 1, tool: 1, errors: 0 }, toolMs: 0, modelMs: 15 });
+  });
+  it('uses host ordinals when a partial peer replica numbers the same turn differently', () => {
+    const historical = projectTrajectoryTurn(turn(), 50);
+    const live = projectTrajectoryTurn(turn(), 0);
+    expect(mergeTrajectoryNodes(historical, live).every(node => node.turnOrdinal === 50)).toBe(true);
+  });
+  it('anchors a model to visible prose before collapsed reasoning when there is no search hit', () => {
+    const value = turn();
+    value.modelRounds[0].items.unshift({ id: 'thinking', type: 'thinking', content: 'Reasoning', timestamp: 1, status: 'completed', isStreaming: false });
+    expect(projectTrajectoryTurn(value, 0)[1].focusItemId).toBe('text');
+    expect(projectTrajectoryTurn(value, 0, 'Reasoning')[1].focusItemId).toBe('thinking');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/trajectory/trajectoryModel.ts b/src/web-ui/src/flow_chat/trajectory/trajectoryModel.ts
new file mode 100644
index 0000000000..bd195ff206
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/trajectoryModel.ts
@@ -0,0 +1,97 @@
+import type { DialogTurn, Session } from '../types/flow-chat';
+import { createAbsoluteSessionTurnIndexResolver } from '../utils/flowChatTurnOrdinal';
+import type { SessionTurnCatalog } from '@/shared/types/session-history';
+
+export type TrajectoryKind = 'user' | 'model' | 'tool';
+export interface TrajectoryNode {
+  id: string;
+  turnId: string;
+  turnOrdinal: number;
+  kind: TrajectoryKind;
+  roundId?: string | null;
+  focusItemId?: string | null;
+  label: string;
+  preview: string;
+  status: string;
+  timestamp: number;
+  durationMs?: number | null;
+  matched: boolean;
+  matchField?: 'content' | 'name' | 'parameters' | 'result' | null;
+}
+export type TrajectoryPage = {
+  status: 'ready'; catalogRevision: string; startOrdinal: number; endOrdinalExclusive: number;
+  totalTurnCount: number; nodes: TrajectoryNode[]; nextNodeOffset: number | null;
+} | { status: 'catalog' | 'stale' | 'not-found'; catalog: SessionTurnCatalog };
+
+export const trajectoryNodeKey = (node: TrajectoryNode): string => JSON.stringify([node.turnId, node.kind, node.id]);
+const preview = (value: string) => value.slice(0, 160);
+const contains = (value: string | undefined, query: string) => !!query && !!value?.toLowerCase().includes(query);
+/** Search values without serializing large tool output or image attachments. */
+export function trajectoryValueMatches(value: unknown, query: string): boolean {
+  if (!query || value === undefined || value === null) return false;
+  if (typeof value === 'string') return contains(value, query);
+  if (Array.isArray(value)) return value.some(item => trajectoryValueMatches(item, query));
+  if (typeof value === 'object') return Object.entries(value).some(([key, child]) => contains(key, query) || trajectoryValueMatches(child, query));
+  return contains(String(value), query);
+}
+
+export function projectTrajectoryTurn(turn: DialogTurn, ordinal: number, search = ''): TrajectoryNode[] {
+  if (turn.kind === 'local_command') return [];
+  const query = search.trim().toLowerCase();
+  const base = { turnId: turn.id, turnOrdinal: ordinal };
+  const nodes: TrajectoryNode[] = [{ ...base, kind: 'user', id: turn.userMessage.id,
+    label: '', preview: preview(turn.userMessage.content), timestamp: turn.userMessage.timestamp,
+    status: 'completed', matched: contains(turn.userMessage.content, query), matchField: 'content' }];
+  for (const round of turn.modelRounds) {
+    const texts = round.items.filter(item => item.type === 'text' || item.type === 'thinking');
+    const hit = texts.find(item => contains(item.content, query));
+    const preferred = texts.find(item => item.type === 'text' && item.content.trim()) ?? texts[0];
+    const label = round.effectiveModelName ?? round.modelConfigId ?? '';
+    nodes.push({ ...base, kind: 'model', id: round.id, roundId: round.id,
+      focusItemId: hit?.id ?? preferred?.id ?? round.items.find(item => item.type === 'tool')?.id, label, preview: preview(hit?.content ?? preferred?.content ?? ''),
+      timestamp: round.startTime, durationMs: round.durationMs, status: round.status,
+      matched: !!hit || contains(label, query), matchField: hit ? 'content' : null });
+    for (const item of round.items) {
+      if (item.type === 'user-steering') {
+        nodes.push({ ...base, kind: 'user', id: item.id, roundId: round.id, focusItemId: `user_steering_${item.steeringId}`,
+          label: '', preview: preview(item.content), timestamp: item.timestamp, status: item.status,
+          matched: contains(item.content, query), matchField: 'content' });
+      }
+      if (item.type !== 'tool') continue;
+      const matchField = contains(item.toolName, query) ? 'name'
+        : trajectoryValueMatches(item.toolCall.input, query) ? 'parameters'
+        : trajectoryValueMatches(item.toolResult?.result, query) || contains(item.toolResult?.resultForAssistant, query)
+          || contains(item.toolResult?.error, query) ? 'result' : null;
+      nodes.push({ ...base, kind: 'tool', id: item.id, roundId: round.id, focusItemId: item.id,
+        label: item.toolName, preview: '', timestamp: item.startTime ?? item.timestamp,
+        durationMs: item.durationMs ?? item.toolResult?.duration_ms, status: item.status,
+        matched: matchField !== null, matchField });
+    }
+  }
+  return nodes;
+}
+
+export type TrajectoryProjectionCache = WeakMap<DialogTurn, { ordinal: number; query: string; nodes: TrajectoryNode[] }>;
+export function projectLoadedTrajectory(session: Session, query: string, cache?: TrajectoryProjectionCache): TrajectoryNode[] {
+  const ordinalForIndex = createAbsoluteSessionTurnIndexResolver(session);
+  return session.dialogTurns.flatMap((turn, index) => {
+    const ordinal = ordinalForIndex(index) - 1;
+    const previous = cache?.get(turn);
+    if (previous?.ordinal === ordinal && previous.query === query) return previous.nodes;
+    const nodes = projectTrajectoryTurn(turn, ordinal, query);
+    cache?.set(turn, { ordinal, query, nodes });
+    return nodes;
+  });
+}
+
+/** Loaded authoritative Turns replace persisted summaries, including removed attempts. */
+export function mergeTrajectoryNodes(history: readonly TrajectoryNode[], live: readonly TrajectoryNode[]): TrajectoryNode[] {
+  const liveTurns = new Set(live.map(node => node.turnId));
+  const ordinals = new Map(history.map(node => [node.turnId, node.turnOrdinal]));
+  const positioned = live.map(node => {
+    const ordinal = ordinals.get(node.turnId);
+    return ordinal === undefined || ordinal === node.turnOrdinal ? node : { ...node, turnOrdinal: ordinal };
+  });
+  return [...history.filter(node => !liveTurns.has(node.turnId)), ...positioned]
+    .sort((a, b) => a.turnOrdinal - b.turnOrdinal);
+}
diff --git a/src/web-ui/src/flow_chat/trajectory/trajectoryPanel.test.ts b/src/web-ui/src/flow_chat/trajectory/trajectoryPanel.test.ts
new file mode 100644
index 0000000000..52962a22b7
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/trajectoryPanel.test.ts
@@ -0,0 +1,30 @@
+// @vitest-environment jsdom
+import { beforeEach, expect, it, vi } from 'vitest';
+import type { Session } from '../types/flow-chat';
+import type { PanelContent } from '@/shared/types/panelContent';
+import type { TrajectoryRangeSummary } from './trajectoryRange';
+const mocks = vi.hoisted(() => ({ open: vi.fn(), updateTabs: vi.fn(), update: vi.fn(), resources: {} as Record<string, any> }));
+vi.mock('@/infrastructure/peer-device/deviceSurface', () => ({ getActiveSurfaceScope: () => ({ surfaceId: 'peer:a' }) }));
+vi.mock('@/app/components/panels/content-canvas/stores/canvasStore', () => ({ openAgentCanvasTabForSession: mocks.open, updateAgentCanvasTabsForSession: mocks.updateTabs }));
+vi.mock('@/app/workbench/contentResourceStore', () => ({ useContentResourceStore: { getState: () => ({ resources: mocks.resources, update: mocks.update }) } }));
+import { openTrajectoryPanel, showTrajectoryRange } from './trajectoryPanel';
+const session = { sessionId: 's', workspaceId: 'remote', workspacePath: '/project' } as Session;
+const range = { start: { id: 'a' }, end: { id: 'b' }, counts: { user: 1, model: 1, tool: 1, errors: 0 } } as TrajectoryRangeSummary;
+beforeEach(() => { mocks.open.mockClear(); mocks.update.mockClear(); mocks.resources = {}; });
+it('reuses the same session-scoped panel key for node and range selection', () => {
+  openTrajectoryPanel(session, range.start, '', 'Details', 'v');
+  showTrajectoryRange(session, range, 'Range', true, 'v');
+  const first = mocks.open.mock.calls[0][1] as PanelContent;
+  const second = mocks.open.mock.calls[1][1] as PanelContent;
+  expect(first.metadata?.duplicateCheckKey).toBe(second.metadata?.duplicateCheckKey);
+  expect(first.metadata?.resourceScope).toMatchObject({ surfaceId: 'peer:a', workspaceId: 'remote', workspacePath: '/project' });
+});
+it('passive range changes never modify another session or device resource', () => {
+  for (const [id, sessionId, surfaceId] of [['own', 's', 'peer:a'], ['other-session', 'other', 'peer:a'], ['other-device', 's', 'peer:b']]) {
+    mocks.resources[id] = { id, scope: { surfaceId }, content: { type: 'session-trajectory', title: 'Range', data: { sessionId, surfaceId, range } } };
+  }
+  showTrajectoryRange(session, range, 'Range', false, 'v');
+  expect(mocks.open).not.toHaveBeenCalled();
+  expect(mocks.update).toHaveBeenCalledTimes(1);
+  expect(mocks.update.mock.calls[0][0]).toBe('own');
+});
diff --git a/src/web-ui/src/flow_chat/trajectory/trajectoryPanel.ts b/src/web-ui/src/flow_chat/trajectory/trajectoryPanel.ts
new file mode 100644
index 0000000000..5323686f7c
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/trajectoryPanel.ts
@@ -0,0 +1,46 @@
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import { useContentResourceStore } from '@/app/workbench/contentResourceStore';
+import { openAgentCanvasTabForSession, updateAgentCanvasTabsForSession } from '@/app/components/panels/content-canvas/stores/canvasStore';
+import type { Session } from '../types/flow-chat';
+import type { TrajectoryNode } from './trajectoryModel';
+
+export const TRAJECTORY_NAVIGATE_EVENT = 'flowchat:trajectory-navigate';
+export interface TrajectoryPanelData { viewId: string; sessionId: string; surfaceId: string; node: TrajectoryNode; query: string }
+export function openTrajectoryPanel(session: Session, node: TrajectoryNode, query: string, title: string, viewId: string): void {
+  const surface = getActiveSurfaceScope();
+  openAgentCanvasTabForSession(session.sessionId, {
+    type: 'session-trajectory', title,
+    data: { sessionId: session.sessionId, surfaceId: surface.surfaceId, node, query, viewId } satisfies TrajectoryPanelData,
+    metadata: { duplicateCheckKey: `session-trajectory:${surface.surfaceId}:${session.sessionId}`,
+      sessionId: session.sessionId, contentRole: 'session-trajectory', resourceScope: {
+        surfaceId: surface.surfaceId, workspaceId: session.workspaceId, workspacePath: session.workspacePath,
+      } },
+  });
+  window.dispatchEvent(new CustomEvent('expand-right-panel'));
+}
+
+export function showTrajectoryRange(session: Session, range: import('./trajectoryRange').TrajectoryRangeSummary | null, title: string, activate: boolean, viewId: string): void {
+  const surface = getActiveSurfaceScope();
+  const update = (content: import('@/shared/types/panelContent').PanelContent) => {
+    if (content.type !== 'session-trajectory' || !content.data?.range || content.data.sessionId !== session.sessionId || content.data.surfaceId !== surface.surfaceId) return undefined;
+    return range ? { ...content, data: { sessionId: session.sessionId, surfaceId: surface.surfaceId, range, viewId } }
+      : { ...content, data: { sessionId: session.sessionId, surfaceId: surface.surfaceId, node: content.data.range.start, query: '', viewId } };
+  };
+  if (!activate || !range) {
+    updateAgentCanvasTabsForSession(session.sessionId, update);
+    const resources = useContentResourceStore.getState();
+    for (const resource of Object.values(resources.resources)) {
+      if (resource.scope.surfaceId !== surface.surfaceId) continue;
+      const next = update(resource.content); if (next) resources.update(resource.id, { content: next });
+    }
+    return;
+  }
+  openAgentCanvasTabForSession(session.sessionId, { type: 'session-trajectory', title,
+    data: { sessionId: session.sessionId, surfaceId: surface.surfaceId, range, viewId },
+    metadata: { duplicateCheckKey: `session-trajectory:${surface.surfaceId}:${session.sessionId}`,
+      sessionId: session.sessionId, contentRole: 'session-trajectory', resourceScope: {
+        surfaceId: surface.surfaceId, workspaceId: session.workspaceId, workspacePath: session.workspacePath,
+      } },
+  });
+  window.dispatchEvent(new CustomEvent('expand-right-panel'));
+}
diff --git a/src/web-ui/src/flow_chat/trajectory/trajectoryPresentation.ts b/src/web-ui/src/flow_chat/trajectory/trajectoryPresentation.ts
new file mode 100644
index 0000000000..aab37b2475
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/trajectoryPresentation.ts
@@ -0,0 +1,9 @@
+import type { StatusPillTone } from '@openbitfun/ui';
+export function trajectoryStatus(status: string, t: (key: string) => string): { label: string; tone: StatusPillTone } {
+  if (status === 'completed') return { label: t('shared:statuses.done'), tone: 'success' };
+  if (status === 'error') return { label: t('shared:statuses.failed'), tone: 'danger' };
+  if (status === 'cancelled' || status === 'rejected') return { label: t('shared:statuses.cancelled'), tone: 'neutral' };
+  if (['running', 'streaming', 'receiving'].includes(status)) return { label: t('shared:statuses.running'), tone: 'accent' };
+  if (status === 'unknown') return { label: t('trajectory.notRecorded'), tone: 'neutral' };
+  return { label: t('trajectory.waiting'), tone: 'warning' };
+}
diff --git a/src/web-ui/src/flow_chat/trajectory/trajectoryRange.ts b/src/web-ui/src/flow_chat/trajectory/trajectoryRange.ts
new file mode 100644
index 0000000000..d839f4f3d8
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/trajectoryRange.ts
@@ -0,0 +1,27 @@
+import { trajectoryNodeKey, type TrajectoryNode } from './trajectoryModel';
+
+export interface TrajectoryRange { anchor: string; focus: string }
+export interface TrajectoryRangeSummary {
+  start: TrajectoryNode; end: TrajectoryNode;
+  counts: { user: number; model: number; tool: number; errors: number };
+  modelMs?: number; toolMs?: number;
+}
+/** Endpoints use stable identities so loading older pages cannot move a range. */
+export function resolveTrajectoryRange(nodes: readonly TrajectoryNode[], range: TrajectoryRange | null): [number, number] | null {
+  if (!range) return null;
+  const anchor = nodes.findIndex(node => trajectoryNodeKey(node) === range.anchor);
+  const focus = nodes.findIndex(node => trajectoryNodeKey(node) === range.focus);
+  return anchor < 0 || focus < 0 ? null : [Math.min(anchor, focus), Math.max(anchor, focus)];
+}
+export function summarizeTrajectoryRange(nodes: readonly TrajectoryNode[], bounds: [number, number]): TrajectoryRangeSummary {
+  const selected = nodes.slice(bounds[0], bounds[1] + 1);
+  const sum = (kind: 'model' | 'tool') => {
+    const values = selected.filter(node => node.kind === kind);
+    return values.length && values.every(node => typeof node.durationMs === 'number')
+      ? values.reduce((sum, node) => sum + node.durationMs!, 0) : undefined;
+  };
+  return { start: selected[0], end: selected[selected.length - 1],
+    counts: { user: selected.filter(node => node.kind === 'user').length,
+      model: selected.filter(node => node.kind === 'model').length, tool: selected.filter(node => node.kind === 'tool').length,
+      errors: selected.filter(node => node.status === 'error').length }, modelMs: sum('model'), toolMs: sum('tool') };
+}
diff --git a/src/web-ui/src/flow_chat/trajectory/useTrajectory.test.tsx b/src/web-ui/src/flow_chat/trajectory/useTrajectory.test.tsx
new file mode 100644
index 0000000000..3c6fd33b51
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/useTrajectory.test.tsx
@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
+import type { Session } from '../types/flow-chat';
+const mocks = vi.hoisted(() => ({ page: vi.fn(), catalog: vi.fn(), peer: false, supported: false, current: true }));
+vi.mock('./trajectoryApi', () => ({ loadTrajectoryPage: mocks.page, loadTrajectoryCatalog: mocks.catalog }));
+vi.mock('@/infrastructure/peer-device/peerDeviceContextState', () => ({ usePeerDeviceModeOptional: () => ({
+  peerMode: { active: mocks.peer }, currentPeerCapabilities: { sessionTrajectoryV1: mocks.supported },
+}) }));
+vi.mock('@/infrastructure/peer-device/deviceSurface', () => ({ getActiveSurfaceScope: () => ({ epoch: 1, isCurrent: () => mocks.current }) }));
+import { useTrajectory } from './useTrajectory';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const catalog = { schemaVersion: 1, sessionId: 'session', revision: 'host', totalTurnCount: 2, complete: true,
+  entries: [{ ordinal: 0, storageTurnIndex: 5, turnId: 'a' }, { ordinal: 1, storageTurnIndex: 9, turnId: 'b' }] };
+const session = { sessionId: 'session', workspaceId: 'workspace', workspacePath: '/remote', dialogTurns: [], isPartial: true } as unknown as Session;
+let result: ReturnType<typeof useTrajectory>;
+function Harness({ query = '' }: { query?: string }) { result = useTrajectory(session, query); return null; }
+let root: Root;
+beforeEach(() => {
+  vi.useFakeTimers(); mocks.page.mockReset(); mocks.catalog.mockReset(); mocks.current = true; mocks.peer = false; mocks.supported = true;
+  mocks.catalog.mockResolvedValue({ status: 'catalog', catalog });
+  root = createRoot(document.createElement('div'));
+});
+afterEach(async () => { await act(async () => root.unmount()); vi.useRealTimers(); });
+
+describe('trajectory history reader', () => {
+  it('leaves old peers on an explicit partial view without invoking a new command', async () => {
+    mocks.peer = true; mocks.supported = false;
+    await act(async () => { root.render(<Harness />); });
+    await act(async () => { await vi.advanceTimersByTimeAsync(500); });
+    expect(mocks.catalog).not.toHaveBeenCalled(); expect(mocks.page).not.toHaveBeenCalled();
+    expect(result.supported).toBe(false); expect(result.complete).toBe(false);
+  });
+  it('discovers the host catalog independently of a partial peer replica and respects node pagination', async () => {
+    mocks.peer = true;
+    mocks.page.mockResolvedValueOnce({ status: 'ready', nodes: [{ id: 'a', turnId: 'a', turnOrdinal: 0 }], nextNodeOffset: 256, endOrdinalExclusive: 2 })
+      .mockResolvedValueOnce({ status: 'ready', nodes: [{ id: 'b', turnId: 'b', turnOrdinal: 1 }], nextNodeOffset: null, endOrdinalExclusive: 2 });
+    await act(async () => root.render(<Harness />));
+    await act(async () => { await vi.advanceTimersByTimeAsync(500); });
+    expect(mocks.page).toHaveBeenNthCalledWith(1, expect.objectContaining({ turnCatalog: catalog }), 0, '', 0);
+    expect(mocks.page).toHaveBeenNthCalledWith(2, expect.anything(), 0, '', 256);
+    expect(result.nodes).toHaveLength(2); expect(result.complete).toBe(true);
+  });
+  it('ignores a delayed old query and stops paging after a surface change', async () => {
+    let finish!: (value: unknown) => void;
+    mocks.page.mockImplementationOnce(() => new Promise(resolve => { finish = resolve; }));
+    await act(async () => root.render(<Harness query="old" />));
+    await act(async () => { await vi.advanceTimersByTimeAsync(200); });
+    await act(async () => root.render(<Harness query="new" />));
+    mocks.current = false;
+    await act(async () => finish({ status: 'ready', nodes: [{ id: 'old' }], nextNodeOffset: null, endOrdinalExclusive: 1 }));
+    expect(result.nodes).toHaveLength(0); expect(mocks.page).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/web-ui/src/flow_chat/trajectory/useTrajectory.ts b/src/web-ui/src/flow_chat/trajectory/useTrajectory.ts
new file mode 100644
index 0000000000..c42007c76a
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/useTrajectory.ts
@@ -0,0 +1,77 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePeerDeviceModeOptional } from '@/infrastructure/peer-device/peerDeviceContextState';
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import type { Session } from '../types/flow-chat';
+import { loadTrajectoryCatalog, loadTrajectoryPage } from './trajectoryApi';
+import { mergeTrajectoryNodes, projectLoadedTrajectory, type TrajectoryNode, type TrajectoryProjectionCache } from './trajectoryModel';
+
+/** Summaries are pageable independently of the rendered transcript. No history
+ * window is activated by browsing/searching this index. One read is in flight. */
+export function useTrajectory(session: Session, query: string) {
+  const peer = usePeerDeviceModeOptional();
+  const supported = !peer?.peerMode.active || peer.currentPeerCapabilities?.sessionTrajectoryV1 === true;
+  const scope = getActiveSurfaceScope();
+  const [history, setHistory] = useState<TrajectoryNode[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [complete, setComplete] = useState(false);
+  const [revision, setRevision] = useState(0);
+  const sessionRef = useRef(session);
+  sessionRef.current = session;
+  // Search text is debounced by the caller; stable catalog revisions fence
+  // rollbacks and external source rewrites, without restarting on every token.
+  const catalogRevision = session.turnCatalog?.revision;
+  useEffect(() => {
+    let cancelled = false;
+    let snapshot = sessionRef.current;
+    setHistory([]); setError(false); setComplete(false);
+    if (!supported || !snapshot.workspaceId) {
+      setLoading(false);
+      setComplete(!snapshot.isPartial);
+      return;
+    }
+    const current = () => !cancelled && scope.isCurrent();
+    setLoading(true);
+    const read = async () => {
+      try {
+        // Replica catalogs have a different revision namespace. Discover the
+        // owning host's persisted index without replacing the content replica.
+        const catalog = await loadTrajectoryCatalog(snapshot);
+        if (!current()) return;
+        if (catalog.status === 'ready') throw new Error('Missing trajectory catalog');
+        snapshot = { ...snapshot, turnCatalog: catalog.catalog };
+        let ordinal = snapshot.turnCatalog!.entries[0]?.ordinal ?? 0;
+        let offset = 0;
+        const end = (snapshot.turnCatalog!.entries.at(-1)?.ordinal ?? -1) + 1;
+        while (current() && ordinal < end) {
+          const page = await loadTrajectoryPage(snapshot, ordinal, query, offset);
+          if (!current()) return;
+          if (page.status !== 'ready') throw new Error('Session trajectory revision changed');
+          // Keep the light index only. Full bodies are read only on selection.
+          setHistory(previous => [...previous, ...page.nodes]);
+          if (page.nextNodeOffset !== null) {
+            if (page.nextNodeOffset <= offset) throw new Error('Trajectory cursor did not advance');
+            offset = page.nextNodeOffset;
+          } else {
+            if (page.endOrdinalExclusive <= ordinal) throw new Error('Trajectory window did not advance');
+            ordinal = page.endOrdinalExclusive; offset = 0;
+          }
+          // Yield between pages so large sessions remain interactive and a new
+          // query/close/surface switch can abandon the next request.
+          await new Promise<void>(resolve => setTimeout(resolve, 0));
+        }
+        if (current()) setComplete(true);
+      } catch {
+        if (current()) setError(true);
+      } finally {
+        if (current()) setLoading(false);
+      }
+    };
+    const timer = setTimeout(() => void read(), 150);
+    return () => { cancelled = true; clearTimeout(timer); };
+  }, [session.sessionId, catalogRevision, scope.epoch, supported, query, revision]);
+  const projectionCache = useMemo<TrajectoryProjectionCache>(() => new WeakMap(), [session.sessionId, scope.epoch]);
+  const live = useMemo(() => projectLoadedTrajectory(session, query, projectionCache), [session.dialogTurns, session.turnCatalog, query]);
+  const nodes = useMemo(() => mergeTrajectoryNodes(history, live), [history, live]);
+  return { nodes, loading, error, complete, supported, retry: () => setRevision(value => value + 1) };
+}
diff --git a/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.test.tsx b/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.test.tsx
new file mode 100644
index 0000000000..262c858bf7
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.test.tsx
@@ -0,0 +1,122 @@
+// @vitest-environment jsdom
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Session } from '../types/flow-chat';
+const mocks = vi.hoisted(() => ({
+  scope: 'local', current: true, load: vi.fn(), older: vi.fn(), activate: vi.fn(), panel: vi.fn(), present: vi.fn(),
+  session: { sessionId: 'session', dialogTurns: [] } as any, items: [] as any[],
+}));
+vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }));
+vi.mock('@/infrastructure/peer-device/deviceSurface', () => ({ getActiveSurfaceScope: () => ({ surfaceId: mocks.scope, isCurrent: () => mocks.current }) }));
+vi.mock('../store/FlowChatStore', () => ({ flowChatStore: {
+  getState: () => ({ sessions: new Map([['session', mocks.session]]) }),
+  loadSessionTurnWindow: mocks.load, loadOlderRelaySessionHistory: mocks.older, activateSessionHistoryWindow: mocks.activate,
+} }));
+vi.mock('./trajectoryPanel', () => ({ openTrajectoryPanel: mocks.panel }));
+vi.mock('../components/modern/flowChatFocusTarget', () => ({ resolveFlowChatFocusTarget: () => ({}), findFlowChatFocusElement: () => null }));
+import { useTrajectoryNavigation } from './useTrajectoryNavigation';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root: Root; let navigate: ReturnType<typeof useTrajectoryNavigation>;
+const focusElement = document.createElement('div');
+const list = { focusItem: vi.fn().mockReturnValue(focusElement), prepareItemNavigation: vi.fn(), scrollToIndex: vi.fn(), clearSearchMatch: vi.fn(), notifyUserSelectionIntent: vi.fn() };
+const rootRef = { current: document.createElement('div') };
+const listRef = { current: list as any };
+const selected = { node: { id: 'tool', turnId: 'wanted', turnOrdinal: 3, roundId: 'round', kind: 'tool', focusItemId: 'tool',
+  label: 'Read', preview: '', timestamp: 1, status: 'completed', matched: false }, query: '' } as const;
+function Harness({ selectionClearRequest = 0 }: { selectionClearRequest?: number }) {
+  navigate = useTrajectoryNavigation({ session: mocks.session as Session, items: mocks.items, listRef, rootRef,
+    present: mocks.present, expand: vi.fn(), viewId: 'view', selectionClearRequest }); return null;
+}
+beforeEach(() => {
+  vi.useFakeTimers(); vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => setTimeout(() => callback(performance.now()), 0));
+  vi.stubGlobal('cancelAnimationFrame', (id: number) => clearTimeout(id));
+  mocks.scope = 'local'; mocks.current = true; mocks.session = { sessionId: 'session', dialogTurns: [] };
+  mocks.items = [{ turnId: 'wanted', type: 'model-round', data: { id: 'round' } }]; mocks.load.mockReset(); mocks.older.mockReset(); mocks.panel.mockReset(); mocks.present.mockReset();
+  list.focusItem.mockReset().mockReturnValue(focusElement); list.scrollToIndex.mockClear(); root = createRoot(document.createElement('div'));
+});
+afterEach(async () => { await act(async () => root.unmount()); vi.useRealTimers(); vi.unstubAllGlobals(); });
+it('focuses a mounted tool through the virtual list without an earlier whole-turn placement', async () => {
+  await act(async () => root.render(<Harness />));
+  let pending!: Promise<boolean>;
+  await act(async () => { pending = navigate(selected); await vi.advanceTimersByTimeAsync(20); });
+  expect(await pending).toBe(true); expect(mocks.load).not.toHaveBeenCalled();
+  expect(list.focusItem).toHaveBeenCalledWith({ flowItemId: 'tool', virtualItemIndex: 0, roundId: 'round', turnId: 'wanted' }); expect(list.scrollToIndex).not.toHaveBeenCalled();
+});
+it('rejects an old device completion before committing a history presentation or opening its panel', async () => {
+  mocks.items = []; let finish!: (value: unknown) => void;
+  mocks.load.mockImplementation(() => new Promise(resolve => { finish = resolve; }));
+  await act(async () => root.render(<Harness />));
+  const pending = navigate(selected); mocks.current = false;
+  await act(async () => finish({ status: 'ready', isCurrent: true, targetTurnId: 'wanted' }));
+  expect(await pending).toBe(false); expect(mocks.activate).not.toHaveBeenCalled(); expect(mocks.panel).not.toHaveBeenCalled();
+});
+it('reads peer canonical pages only until the stable target appears, without a persisted-body RPC', async () => {
+  mocks.scope = 'peer'; mocks.items = []; mocks.session = { sessionId: 'session', isPartial: true, dialogTurns: [{ id: 'latest' }] };
+  mocks.older.mockImplementation(async () => { mocks.session = { ...mocks.session, dialogTurns: [{ id: 'wanted' }, { id: 'latest' }] }; return true; });
+  mocks.present.mockImplementation(() => { mocks.items = [{ turnId: 'wanted', type: 'model-round', data: { id: 'round' } }]; root.render(<Harness />); });
+  await act(async () => root.render(<Harness />));
+  let pending!: Promise<boolean>;
+  await act(async () => { pending = navigate(selected); });
+  // Commit the presented history window before the next navigation animation frame.
+  await act(async () => { await vi.advanceTimersByTimeAsync(20); });
+  expect(await pending).toBe(true); expect(mocks.older).toHaveBeenCalledTimes(1); expect(mocks.load).not.toHaveBeenCalled();
+});
+
+it('locates a superseded round through the visible retry owner', async () => {
+  mocks.items = [{ turnId: 'wanted', type: 'user-message', data: { id: 'u' } },
+    { turnId: 'wanted', type: 'model-round', data: { id: 'current', historyRounds: [{ id: 'old-round' }] } }];
+  await act(async () => root.render(<Harness />));
+  let pending!: Promise<boolean>;
+  await act(async () => { pending = navigate({ ...selected, node: { ...selected.node, roundId: 'old-round' } }); await vi.advanceTimersByTimeAsync(20); });
+  expect(await pending).toBe(true);
+  expect(list.focusItem).toHaveBeenCalledWith({ flowItemId: 'tool', virtualItemIndex: 1, roundId: 'old-round', turnId: 'wanted' });
+});
+it('locates a steering message by its projected row identity without aiming at a nonexistent tool element', async () => {
+  mocks.items = [{ turnId: 'wanted', type: 'user-message', data: { id: 'u' } },
+    { turnId: 'wanted', type: 'user-steering-message', data: { id: 'user_steering_followup' } }];
+  await act(async () => root.render(<Harness />));
+  let pending!: Promise<boolean>;
+  await act(async () => { pending = navigate({ ...selected, node: { ...selected.node, kind: 'user', focusItemId: 'user_steering_followup' } }); await vi.advanceTimersByTimeAsync(20); });
+  expect(await pending).toBe(true); expect(list.focusItem).toHaveBeenCalledWith({ flowItemId: undefined, virtualItemIndex: 1, roundId: 'round', turnId: 'wanted' });
+  expect(list.scrollToIndex).not.toHaveBeenCalled();
+});
+
+it('waits for a mounted, permitted target before committing details and discards a superseded aim', async () => {
+  list.focusItem.mockReturnValue(null);
+  await act(async () => root.render(<Harness />));
+  let first!: Promise<boolean>;
+  await act(async () => { first = navigate(selected); await vi.advanceTimersByTimeAsync(20); });
+  expect(mocks.panel).not.toHaveBeenCalled();
+  let second!: Promise<boolean>;
+  await act(async () => { second = navigate({ ...selected, node: { ...selected.node, id: 'next', focusItemId: 'next' } }); });
+  expect(await first).toBe(false);
+  list.focusItem.mockReturnValue(focusElement);
+  await act(async () => { await vi.advanceTimersByTimeAsync(20); });
+  expect(await second).toBe(true);
+  expect(mocks.panel).toHaveBeenCalledTimes(1);
+  expect(mocks.panel.mock.calls[0][1].id).toBe('next');
+});
+it('does not commit a panel when a user gesture cancels an unresolved target', async () => {
+  list.focusItem.mockReturnValue(null);
+  await act(async () => root.render(<Harness />));
+  let pending!: Promise<boolean>;
+  await act(async () => { pending = navigate(selected); await vi.advanceTimersByTimeAsync(20); });
+  rootRef.current.dispatchEvent(new WheelEvent('wheel', { deltaY: 20 }));
+  expect(await pending).toBe(false);
+  list.focusItem.mockReturnValue(focusElement);
+  await act(async () => { await vi.advanceTimersByTimeAsync(100); });
+  expect(mocks.panel).not.toHaveBeenCalled();
+});
+
+it('cancels pending positioning when a blank click clears the owning trajectory selection', async () => {
+  list.focusItem.mockReturnValue(null);
+  await act(async () => root.render(<Harness />));
+  let pending!: Promise<boolean>;
+  await act(async () => { pending = navigate(selected); await vi.advanceTimersByTimeAsync(20); });
+  await act(async () => root.render(<Harness selectionClearRequest={1} />));
+  expect(await pending).toBe(false);
+  list.focusItem.mockReturnValue(focusElement);
+  await act(async () => { await vi.advanceTimersByTimeAsync(100); });
+  expect(mocks.panel).not.toHaveBeenCalled();
+});
diff --git a/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.ts b/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.ts
new file mode 100644
index 0000000000..29c8291d69
--- /dev/null
+++ b/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.ts
@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, type RefObject } from 'react';
+import { getActiveSurfaceScope } from '@/infrastructure/peer-device/deviceSurface';
+import { useI18n } from '@/infrastructure/i18n';
+import { flowChatStore } from '../store/FlowChatStore';
+import type { VirtualItem } from '../store/modernFlowChatStore';
+import type { Session, SessionHistoryPresentation } from '../types/flow-chat';
+import type { VirtualMessageListRef } from '../components/modern/VirtualMessageList';
+import { resolveFlowChatFocusTarget } from '../components/modern/flowChatFocusTarget';
+import { highlightFlowChatFocusTarget } from '../components/modern/useFlowChatSearchPresentation';
+import { buildFlowChatSearchMatches } from '../components/modern/useFlowChatSearch';
+import { openTrajectoryPanel } from './trajectoryPanel';
+import type { TrajectorySelection } from './TrajectoryExplorer';
+
+export function useTrajectoryNavigation({ session, items, listRef, rootRef, present, expand, viewId, selectionClearRequest = 0 }: {
+  session: Session | null; items: VirtualItem[]; listRef: RefObject<VirtualMessageListRef | null>;
+  rootRef: RefObject<HTMLElement | null>; present: (sessionId: string, presentation: SessionHistoryPresentation) => void;
+  expand: (id: string) => void; viewId: string;
+  selectionClearRequest?: number;
+}) {
+  const { t } = useI18n('flow-chat');
+  const generation = useRef(0);
+  const latest = useRef({ session, items, present, expand });
+  const cancelPending = useRef<(() => void) | undefined>(undefined);
+  const clearHighlight = useRef<(() => void) | undefined>(undefined);
+  useLayoutEffect(() => { latest.current = { session, items, present, expand }; });
+  useEffect(() => {
+    const cancel = () => { generation.current++; cancelPending.current?.(); clearHighlight.current?.(); };
+    const root = rootRef.current;
+    root?.addEventListener('wheel', cancel, { passive: true });
+    root?.addEventListener('touchstart', cancel, { passive: true });
+    root?.addEventListener('pointerdown', cancel);
+    root?.addEventListener('keydown', cancel);
+    return () => {
+      cancel(); root?.removeEventListener('wheel', cancel); root?.removeEventListener('touchstart', cancel);
+      root?.removeEventListener('pointerdown', cancel); root?.removeEventListener('keydown', cancel);
+    };
+  }, [rootRef, session?.sessionId, selectionClearRequest]);
+  return useCallback(async ({ node, query }: TrajectorySelection): Promise<boolean> => {
+    const source = latest.current.session;
+    if (!source) return false;
+    const scope = getActiveSurfaceScope();
+    cancelPending.current?.();
+    const ticket = ++generation.current;
+    const current = () => scope.isCurrent() && generation.current === ticket
+      && latest.current.session?.sessionId === source.sessionId;
+    clearHighlight.current?.();
+    listRef.current?.prepareItemNavigation();
+    if (!latest.current.items.some(item => item.turnId === node.turnId)) {
+      if (scope.surfaceId !== 'local') {
+        // Peer transcript content remains owned by the canonical record replica.
+        // Read only until the requested stable Turn appears, never a second
+        // persisted-body RPC or an unconditional full-history drain.
+        let peerSession = flowChatStore.getState().sessions.get(source.sessionId);
+        while (current() && !peerSession?.dialogTurns.some(turn => turn.id === node.turnId) && peerSession?.isPartial) {
+          const advanced = await flowChatStore.loadOlderRelaySessionHistory(source.sessionId);
+          if (!current()) return false;
+          peerSession = flowChatStore.getState().sessions.get(source.sessionId);
+          if (!advanced) break;
+        }
+        if (!current()) return false;
+        const index = peerSession?.dialogTurns.findIndex(turn => turn.id === node.turnId) ?? -1;
+        if (!peerSession || index < 0) return false;
+        const start = Math.max(0, index - 4);
+        const turns = peerSession.dialogTurns.slice(start, index + 9);
+        const ordinal = Math.max(0, node.turnOrdinal - (index - start));
+        latest.current.present(source.sessionId, { turns, range: {
+          mode: 'history-window', targetTurnId: node.turnId, startOrdinal: ordinal,
+          endOrdinalExclusive: ordinal + turns.length,
+        } });
+      } else {
+        const result = await flowChatStore.loadSessionTurnWindow(source.sessionId, node.turnOrdinal, { source: 'target' });
+        if (!current() || result.status !== 'ready' || !result.isCurrent || result.targetTurnId !== node.turnId) return false;
+        const presentation = flowChatStore.activateSessionHistoryWindow(source.sessionId, result.targetOrdinal, result.navigationGeneration);
+        if (!presentation) return false;
+        latest.current.present(source.sessionId, presentation);
+      }
+    }
+    if (!current()) return false;
+    // Let the pane resize before measuring the target; commit its content on success.
+    window.dispatchEvent(new CustomEvent('expand-right-panel'));
+    const started = performance.now();
+    return new Promise<boolean>(resolve => {
+      let settled = false;
+      let frame: number | undefined;
+      const timeout = setTimeout(() => finish(false), 5000);
+      const finish = (value: boolean) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timeout);
+        if (frame !== undefined) cancelAnimationFrame(frame);
+        if (cancelPending.current === cancel) cancelPending.current = undefined;
+        const accepted = value && current();
+        if (!accepted) listRef.current?.clearSearchMatch();
+        if (accepted) openTrajectoryPanel(source, node, query, t('trajectory.details'), viewId);
+        resolve(accepted);
+      };
+      const cancel = () => finish(false);
+      cancelPending.current = cancel;
+      const retry = () => { frame = requestAnimationFrame(attempt); };
+      const attempt = () => {
+        if (settled) return;
+        if (!current() || performance.now() - started > 5000) { finish(false); return; }
+        const values = latest.current.items;
+        const turnSources = values.flatMap((item, index) => item.turnId === node.turnId ? [{ item, index }] : []);
+        const target = resolveFlowChatFocusTarget({ sessionId: source.sessionId, turnId: node.turnId,
+          itemId: node.focusItemId ?? undefined }, turnSources.map(source => source.item));
+        if (target.expandExploreGroupId) latest.current.expand(target.expandExploreGroupId);
+        const ownerIndex = values.findIndex(item => item.turnId === node.turnId && (
+          item.type === 'background-run'
+          || node.kind === 'user' && (node.focusItemId ? item.type === 'user-steering-message' && item.data.id === node.focusItemId : item.type === 'user-message')
+          || item.type === 'model-round' && (item.data.id === node.roundId || item.data.historyRounds?.some(round => round.id === node.roundId))
+        ));
+        const resolved = target.resolvedVirtualIndex !== undefined ? turnSources[target.resolvedVirtualIndex]?.index : undefined;
+        const index = resolved ?? ownerIndex;
+        if (index < 0 || !listRef.current) { retry(); return; }
+        const match = node.matchField === 'content' && query.trim()
+          ? buildFlowChatSearchMatches(values, query).find(match => match.turnId === node.turnId
+            && (node.kind === 'user' ? match.virtualItemIndex === index : match.flowItemId === node.focusItemId)) : undefined;
+        if (match) {
+          listRef.current.scrollToSearchMatch({ ...match, query, isCurrent: () => !settled && current(),
+            onLocated: element => {
+              if (!settled && current()) clearHighlight.current = highlightFlowChatFocusTarget(element);
+              finish(current());
+            }, onUnavailable: () => finish(false) });
+          return;
+        }
+        const element = listRef.current.focusItem({ virtualItemIndex: index, turnId: node.turnId,
+          flowItemId: node.kind === 'user' ? undefined : node.focusItemId ?? undefined, roundId: node.roundId ?? undefined });
+        if (!element) { retry(); return; }
+        clearHighlight.current = highlightFlowChatFocusTarget(element);
+        finish(true);
+      };
+      retry();
+    });
+  }, [listRef, rootRef, t, viewId]);
+}
diff --git a/src/web-ui/src/infrastructure/api/adapters/peer-device-adapter.ts b/src/web-ui/src/infrastructure/api/adapters/peer-device-adapter.ts
index 61d61c7b14..52103dd085 100644
--- a/src/web-ui/src/infrastructure/api/adapters/peer-device-adapter.ts
+++ b/src/web-ui/src/infrastructure/api/adapters/peer-device-adapter.ts
@@ -40,6 +40,7 @@ const HIGH_PRIORITY_COMMANDS = new Set([
   'restore_session_with_turns',
   'restore_session',
   'load_session_turn_window',
+  'load_session_trajectory',
   'load_session_turns',
   'list_persisted_sessions',
   'list_persisted_sessions_page',
@@ -103,6 +104,7 @@ const RETRYABLE_READ_COMMANDS = new Set([
   'load_session_event_backfill',
   'restore_session_with_turns',
   'load_session_turn_window',
+  'load_session_trajectory',
   'load_session_turns',
   'list_persisted_sessions',
   'list_persisted_sessions_page',
diff --git a/src/web-ui/src/infrastructure/api/generated/productControl.ts b/src/web-ui/src/infrastructure/api/generated/productControl.ts
index 33d46c8957..fcf038f349 100644
--- a/src/web-ui/src/infrastructure/api/generated/productControl.ts
+++ b/src/web-ui/src/infrastructure/api/generated/productControl.ts
@@ -1,5 +1,5 @@
 // Generated by scripts/generate-interactive-capabilities.mjs; do not edit.
-export const PRODUCT_CONTROL_GRAPH_DIGEST = "9ec82305067852766c79ed3d802c3a16f1c4dd992f7d3195f91a2989da32f544" as const;
+export const PRODUCT_CONTROL_GRAPH_DIGEST = "cda0c1805851b3488a613c44f6848376dd9093cf08325257d88cd9ab16d85fae" as const;
 
 export type ProductControlCapabilityId = "feature.ai-assistant" | "feature.agents" | "feature.personal-assistants" | "feature.projects" | "feature.files-editor" | "feature.terminal" | "feature.git" | "feature.code-review" | "feature.browser" | "feature.computer-use" | "feature.skills" | "feature.miniapps" | "feature.canvas" | "feature.tasks-automation" | "feature.insights" | "feature.ecosystem-compatibility" | "feature.remote-workspaces" | "feature.remote-connect" | "feature.detached-dispatch" | "feature.pages" | "feature.voice-input" | "feature.desktop-pet" | "feature.desktop-cards" | "setting.application.general" | "setting.application.appearance" | "setting.application.pet" | "setting.application.input" | "setting.application.shortcuts" | "setting.application.development" | "setting.ai.models" | "setting.ai.memory" | "setting.workspace.session" | "setting.workspace.worktrees" | "setting.tools.execution" | "setting.application.terminal" | "setting.tools.desktop-control" | "setting.tools.browser-control" | "setting.tools.automation" | "setting.tools.web-search" | "setting.tools.mcp" | "setting.tools.acp" | "setting.data.usage" | "setting.data.archived" | "setting.data.diagnostics";
 
diff --git a/src/web-ui/src/infrastructure/api/generated/remoteSurface.ts b/src/web-ui/src/infrastructure/api/generated/remoteSurface.ts
index 541035dc5f..c5b6d118e9 100644
--- a/src/web-ui/src/infrastructure/api/generated/remoteSurface.ts
+++ b/src/web-ui/src/infrastructure/api/generated/remoteSurface.ts
@@ -1,6 +1,6 @@
 // Generated by scripts/generate-interactive-capabilities.mjs; do not edit.
 // Source: openbitfun_product_domains::remote_surface (Product Operation Registry).
-export const REMOTE_SURFACE_REGISTRY_DIGEST = "fnv1a64:99d567cb0f1aa0ad" as const;
+export const REMOTE_SURFACE_REGISTRY_DIGEST = "fnv1a64:96fc351cf4dd6568" as const;
 
 /**
  * Registered Tauri commands the Peer Device controller keeps on the controller
@@ -205,6 +205,7 @@ export const PEER_HOST_CAPABILITY_IDS = [
   "workspace_id_references_v1",
   "workspace_html_preview_v1",
   "whole_session_copy_v1",
+  "session_trajectory_v1",
   "user_question_response",
   "user_question_interaction_v1",
 ] as const;
@@ -251,6 +252,7 @@ export const PEER_HOST_ADVERTISED_CAPABILITIES: Readonly<
     "workspace_id_references_v1",
     "workspace_html_preview_v1",
     "whole_session_copy_v1",
+    "session_trajectory_v1",
     "user_question_response",
     "user_question_interaction_v1",
   ],
@@ -269,6 +271,7 @@ export const PEER_HOST_ADVERTISED_CAPABILITIES: Readonly<
     "product_control_v1",
     "cancel_tool",
     "tool_catalog",
+    "session_trajectory_v1",
     "chat_mcp_catalog_v1",
     "workspace_id_references_v1",
     "workspace_html_preview_v1",
diff --git a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
index 765a42724c..4dafa4f87d 100644
--- a/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
+++ b/src/web-ui/src/infrastructure/appearance/registry/defaultAppearanceRegistry.ts
@@ -18,6 +18,7 @@ import { modelSelectorAppearanceDescriptor } from '@/flow_chat/components/ModelS
 import { reasoningPresetSelectorAppearanceDescriptor } from '@/flow_chat/components/ReasoningPresetSelector.appearance';
 import { acpModeSelectorAppearanceDescriptor } from '@/flow_chat/components/AcpModeSelector.appearance';
 import { flowChatHeaderAppearanceDescriptor } from '@/flow_chat/components/modern/FlowChatHeader.appearance';
+import { trajectoryAppearanceDescriptor } from '@/flow_chat/trajectory/Trajectory.appearance';
 import { flowChatTurnRailAppearanceDescriptor } from '@/flow_chat/components/modern/FlowChatTurnRail.appearance';
 import { sessionFilesBadgeAppearanceDescriptor } from '@/flow_chat/components/modern/SessionFilesBadge.appearance';
 import { codeReviewToolCardAppearanceDescriptor } from '@/flow_chat/tool-cards/CodeReviewToolCard.appearance';
@@ -283,6 +284,7 @@ export function createDefaultAppearanceRegistry(): AppearanceRegistry {
     .registerComponent(acpModeSelectorAppearanceDescriptor)
     .registerComponent(flowChatHeaderAppearanceDescriptor)
     .registerComponent(flowChatTurnRailAppearanceDescriptor)
+    .registerComponent(trajectoryAppearanceDescriptor)
     .registerComponent(sessionFilesBadgeAppearanceDescriptor)
     .registerComponent(codeReviewToolCardAppearanceDescriptor)
     .registerComponent(createAgentPageAppearanceDescriptor)
diff --git a/src/web-ui/src/infrastructure/peer-device/PeerConnectionManager.test.ts b/src/web-ui/src/infrastructure/peer-device/PeerConnectionManager.test.ts
index 5ab817d225..620ff7dd7e 100644
--- a/src/web-ui/src/infrastructure/peer-device/PeerConnectionManager.test.ts
+++ b/src/web-ui/src/infrastructure/peer-device/PeerConnectionManager.test.ts
@@ -95,6 +95,7 @@ describe('PeerConnectionManager attach', () => {
             miniapp_agent_images_v1: true,
             wsl_workspaces_v1: true,
             whole_session_copy_v1: true,
+            session_trajectory_v1: true,
             btw_initial_model_selection_v1: true,
             btw_model_pool_selection_v1: true,
           },
@@ -113,6 +114,7 @@ describe('PeerConnectionManager attach', () => {
     expect(caps.miniAppAgentImagesV1).toBe(true);
     expect(caps.wslWorkspacesV1).toBe(true);
     expect(caps.wholeSessionCopyV1).toBe(true);
+    expect(caps.sessionTrajectoryV1).toBe(true);
     expect(caps.btwInitialModelSelectionV1).toBe(true);
     expect(caps.btwModelPoolSelectionV1).toBe(true);
   });
@@ -144,6 +146,7 @@ describe('PeerConnectionManager attach', () => {
     expect(desktop.getState().capabilities.reviewPlatformV1).toBeNull();
     expect(desktop.getState().capabilities.inlineImageAttachmentsV1).toBe(false);
     expect(desktop.getState().capabilities.wholeSessionCopyV1).toBe(false);
+    expect(desktop.getState().capabilities.sessionTrajectoryV1).toBe(false);
     expect(desktop.getState().capabilities.btwInitialModelSelectionV1).toBe(false);
     expect(desktop.getState().capabilities.btwModelPoolSelectionV1).toBe(false);
     expect(desktop.getState().capabilities.chatMcpCatalogV1).toBe(false);
diff --git a/src/web-ui/src/infrastructure/peer-device/PeerConnectionManager.ts b/src/web-ui/src/infrastructure/peer-device/PeerConnectionManager.ts
index 93401c1bad..0b0bd916f2 100644
--- a/src/web-ui/src/infrastructure/peer-device/PeerConnectionManager.ts
+++ b/src/web-ui/src/infrastructure/peer-device/PeerConnectionManager.ts
@@ -62,6 +62,7 @@ export interface PeerHostCapabilities {
   /** Host routes a model to its configured backup channels. */
   readonly modelChannelRoutingV1?: boolean;
   readonly wholeSessionCopyV1?: boolean;
+  readonly sessionTrajectoryV1?: boolean;
   readonly modelRoutingV1?: boolean;
   readonly modelPoolSelectionV1?: boolean;
   readonly computerUseSharingV1?: boolean;
@@ -200,6 +201,7 @@ const NO_CAPABILITIES: PeerHostCapabilities = {
   subscriptionModelQuotaV1: false,
   modelChannelRoutingV1: false,
   wholeSessionCopyV1: false,
+  sessionTrajectoryV1: false,
   modelRoutingV1: false,
   modelPoolSelectionV1: false,
   computerUseSharingV1: false,
@@ -557,6 +559,7 @@ export class PeerConnectionManager {
       subscriptionModelQuotaV1: caps?.subscription_model_quota_v1 === true,
       modelChannelRoutingV1: caps?.model_channel_routing_v1 === true,
       wholeSessionCopyV1: caps?.whole_session_copy_v1 === true,
+      sessionTrajectoryV1: caps?.session_trajectory_v1 === true,
       modelRoutingV1: caps?.model_routing_v1 === true,
       modelPoolSelectionV1: caps?.model_pool_selection_v1 === true,
       computerUseSharingV1: caps?.computer_use_sharing_v1 === true,
@@ -814,6 +817,7 @@ function capabilitiesEqual(
     a.subscriptionModelQuotaV1 === b.subscriptionModelQuotaV1 &&
     a.modelChannelRoutingV1 === b.modelChannelRoutingV1 &&
     a.wholeSessionCopyV1 === b.wholeSessionCopyV1 &&
+    a.sessionTrajectoryV1 === b.sessionTrajectoryV1 &&
     a.modelRoutingV1 === b.modelRoutingV1 &&
     a.modelPoolSelectionV1 === b.modelPoolSelectionV1 &&
     a.computerUseSharingV1 === b.computerUseSharingV1 &&
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index fb7facdb87..32cbaf9016 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -87,7 +87,8 @@
       "terminal": "Shell",
       "git": "Git",
       "miniApps": "Mini App",
-      "insights": "Insights"
+      "insights": "Insights",
+      "discoverSkills": "Discover skills"
     },
     "tooltips": {
       "persona": "Smart Members — expand role- and memory-based member sessions",
@@ -737,14 +738,16 @@
     "notifications": "Notifications",
     "settingsMenu": {
       "floatingWindow": "Floating Window",
-      "theme": "Theme",
-      "themeConfiguration": "Theme Settings",
-      "appearanceSwitchFailed": "Could not switch the theme. Try again.",
       "feedback": "Feedback",
       "feedbackUnavailable": "Feedback form is not configured.",
       "feedbackOpenFailed": "Could not open the feedback form.",
       "openSettings": "$t(shared:features.settings)",
       "about": "About OpenBitFun"
+    },
+    "customization": {
+      "localDesktopOnly": "Available on the local desktop only. Your pin is kept when switching devices.",
+      "unavailableEntry": "Unavailable entry ({{id}})",
+      "openFailed": "Could not open {{name}}. Try again."
     }
   },
   "window": {
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 22bf4314cb..ac690dd1c2 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -3860,5 +3860,50 @@
     "quiet": "Background task completed · No report needed",
     "running": "Background task running",
     "executionDetails": "Execution details"
+  },
+  "trajectory": {
+    "title": "Trajectory",
+    "user": "Input",
+    "model": "Model",
+    "tool": "Tool",
+    "details": "Trajectory details",
+    "count": "{{count}} events",
+    "search": "Search messages, tools, parameters and results",
+    "matches": "{{current}} / {{count}} matches",
+    "node": "Turn {{turn}} · {{name}}",
+    "turn": "Turn {{turn}}",
+    "locateFailed": "The source could not be located. Select it again to retry.",
+    "loadFailed": "History could not be indexed. Results are incomplete.",
+    "loading": "Reading history…",
+    "partial": "Showing loaded content. Full history search is unavailable on this host.",
+    "retry": "Retry",
+    "notRecorded": "Not recorded",
+    "showMore": "Show more",
+    "waiting": "Waiting",
+    "duration": "Duration",
+    "queue": "Queue wait",
+    "preflight": "Preparation",
+    "confirmation": "Confirmation wait",
+    "execution": "Execution",
+    "firstOutput": "Time to first output",
+    "streaming": "Streaming",
+    "overview": "Overview",
+    "parameters": "Parameters",
+    "result": "Result",
+    "timing": "Timing",
+    "query": "Search: {{query}}",
+    "unavailable": "This source is unavailable. Its history may have changed.",
+    "started": "Started",
+    "clearRange": "Clear range",
+    "rangeStart": "Range start",
+    "rangeEnd": "Range end",
+    "rangeDetails": "Selected range",
+    "rangeTurns": "Turns {{start}}–{{end}}",
+    "errors": "Failed events",
+    "modelTotal": "Summed model duration",
+    "toolTotal": "Summed tool duration",
+    "parallelTime": "Durations are summed by event. Parallel calls overlap; these totals are not elapsed time.",
+    "locateStart": "Go to range start",
+    "locateEnd": "Go to range end"
   }
 }
diff --git a/src/web-ui/src/locales/en-US/settings.json b/src/web-ui/src/locales/en-US/settings.json
index c19d33ccfc..93fee1d160 100644
--- a/src/web-ui/src/locales/en-US/settings.json
+++ b/src/web-ui/src/locales/en-US/settings.json
@@ -87,6 +87,10 @@
       "workspaceGit": {
         "label": "Workspace & Git",
         "description": "Configure file search, commit attribution, and worktrees, and manage isolated working directories"
+      },
+      "externalImport": {
+        "label": "External import",
+        "description": "Import and manage content from other AI applications"
       }
     },
     "views": {
@@ -108,7 +112,8 @@
       "hooks": "Event Hooks",
       "pet": "Pet",
       "voice-call": "Real-time voice calls",
-      "desktop-cards": "Desktop cards"
+      "desktop-cards": "Desktop cards",
+      "sidebar-navigation": "Left sidebar"
     }
   },
   "changeGuard": {
diff --git a/src/web-ui/src/locales/en-US/settings/appearance.json b/src/web-ui/src/locales/en-US/settings/appearance.json
index a4b0b32ece..950ae243ad 100644
--- a/src/web-ui/src/locales/en-US/settings/appearance.json
+++ b/src/web-ui/src/locales/en-US/settings/appearance.json
@@ -176,5 +176,20 @@
       "allowedParts": "Show currently available parts",
       "dismiss": "Dismiss issue details"
     }
+  },
+  "sidebar": {
+    "title": "Left sidebar",
+    "reset": "Restore defaults",
+    "alwaysVisible": "Always visible",
+    "pinned": "Pinned pages",
+    "empty": "No additional pages pinned",
+    "available": "Available pages",
+    "moveUp": "Move {{name}} up",
+    "moveDown": "Move {{name}} down",
+    "remove": "Unpin {{name}}",
+    "addEntry": "Pin {{name}}",
+    "noResults": "No more pages to add",
+    "saveFailed": "Changes could not be saved. Your previous layout is still in use. Try again.",
+    "readFailed": "Saved navigation preferences could not be read by this version. They have been kept. Restore defaults to replace them."
   }
 }
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index 7cffa61d5a..3ea8457f3c 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -87,7 +87,8 @@
       "terminal": "Shell",
       "git": "Git",
       "miniApps": "小应用",
-      "insights": "洞察"
+      "insights": "洞察",
+      "discoverSkills": "发现技能"
     },
     "tooltips": {
       "persona": "智能成员 — 展开查看基于角色和记忆的成员会话",
@@ -737,14 +738,16 @@
     "notifications": "通知",
     "settingsMenu": {
       "floatingWindow": "悬浮窗",
-      "theme": "主题",
-      "themeConfiguration": "主题配置",
-      "appearanceSwitchFailed": "主题切换失败，请重试。",
       "feedback": "意见反馈",
       "feedbackUnavailable": "反馈问卷尚未配置。",
       "feedbackOpenFailed": "无法打开反馈问卷。",
       "openSettings": "$t(shared:features.settings)",
       "about": "关于"
+    },
+    "customization": {
+      "localDesktopOnly": "仅支持本机桌面。切换设备时会保留固定设置。",
+      "unavailableEntry": "暂不可用的入口（{{id}}）",
+      "openFailed": "无法打开{{name}}，请重试。"
     }
   },
   "window": {
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index db050d59ae..24518e9ac4 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -3860,5 +3860,50 @@
     "quiet": "后台任务已完成 · 无需汇报",
     "running": "后台任务执行中",
     "executionDetails": "执行记录"
+  },
+  "trajectory": {
+    "title": "轨迹",
+    "user": "输入",
+    "model": "模型",
+    "tool": "工具",
+    "details": "轨迹详情",
+    "count": "{{count}} 个事件",
+    "search": "搜索消息、工具、参数和结果",
+    "matches": "{{current}} / {{count}} 个匹配",
+    "node": "第 {{turn}} 轮 · {{name}}",
+    "turn": "第 {{turn}} 轮",
+    "locateFailed": "无法定位原始内容，请重新选择以重试。",
+    "loadFailed": "历史索引加载失败，当前结果不完整。",
+    "loading": "正在读取历史…",
+    "partial": "当前显示已加载内容，此宿主不支持完整历史搜索。",
+    "retry": "重试",
+    "notRecorded": "未记录",
+    "showMore": "显示更多",
+    "waiting": "等待中",
+    "duration": "耗时",
+    "queue": "排队等待",
+    "preflight": "准备",
+    "confirmation": "确认等待",
+    "execution": "执行",
+    "firstOutput": "首输出耗时",
+    "streaming": "流式输出",
+    "overview": "概述",
+    "parameters": "参数",
+    "result": "结果",
+    "timing": "计时",
+    "query": "搜索：{{query}}",
+    "unavailable": "原始内容暂不可用，历史记录可能已发生变化。",
+    "started": "开始时间",
+    "clearRange": "清除范围",
+    "rangeStart": "范围起点",
+    "rangeEnd": "范围终点",
+    "rangeDetails": "所选范围",
+    "rangeTurns": "第 {{start}}–{{end}} 轮",
+    "errors": "失败事件",
+    "modelTotal": "模型累计耗时",
+    "toolTotal": "工具累计耗时",
+    "parallelTime": "耗时按事件累计，并行调用可能重叠，不代表实际经过时间。",
+    "locateStart": "定位到范围起点",
+    "locateEnd": "定位到范围终点"
   }
 }
diff --git a/src/web-ui/src/locales/zh-CN/settings.json b/src/web-ui/src/locales/zh-CN/settings.json
index 86d14dc3e5..9685a796b3 100644
--- a/src/web-ui/src/locales/zh-CN/settings.json
+++ b/src/web-ui/src/locales/zh-CN/settings.json
@@ -87,6 +87,10 @@
       "workspaceGit": {
         "label": "工作区与 Git",
         "description": "设置文件搜索、Git 提交署名与 Worktree，管理隔离工作目录"
+      },
+      "externalImport": {
+        "label": "外部导入",
+        "description": "导入并管理其他 AI 应用中的内容"
       }
     },
     "views": {
@@ -108,7 +112,8 @@
       "hooks": "事件 Hooks",
       "pet": "宠物",
       "voice-call": "实时语音通话",
-      "desktop-cards": "小卡片"
+      "desktop-cards": "小卡片",
+      "sidebar-navigation": "左侧导航栏"
     }
   },
   "changeGuard": {
diff --git a/src/web-ui/src/locales/zh-CN/settings/appearance.json b/src/web-ui/src/locales/zh-CN/settings/appearance.json
index afcf82ebb7..9fdae98840 100644
--- a/src/web-ui/src/locales/zh-CN/settings/appearance.json
+++ b/src/web-ui/src/locales/zh-CN/settings/appearance.json
@@ -176,5 +176,20 @@
       "allowedParts": "查看当前可用部件",
       "dismiss": "关闭问题详情"
     }
+  },
+  "sidebar": {
+    "title": "左侧导航栏",
+    "reset": "恢复默认",
+    "alwaysVisible": "始终显示",
+    "pinned": "已固定页面",
+    "empty": "尚未固定其他页面",
+    "available": "可添加页面",
+    "moveUp": "上移{{name}}",
+    "moveDown": "下移{{name}}",
+    "remove": "取消固定{{name}}",
+    "addEntry": "固定{{name}}",
+    "noResults": "没有其他可添加的页面",
+    "saveFailed": "保存失败，仍使用之前的导航布局，请重试。",
+    "readFailed": "当前版本无法读取已保存的导航偏好，原数据已保留。可通过恢复默认来替换。"
   }
 }
diff --git a/src/web-ui/src/locales/zh-TW/common.json b/src/web-ui/src/locales/zh-TW/common.json
index 0ab1a68cef..bdf99a8921 100644
--- a/src/web-ui/src/locales/zh-TW/common.json
+++ b/src/web-ui/src/locales/zh-TW/common.json
@@ -87,7 +87,8 @@
       "terminal": "Shell",
       "git": "Git",
       "miniApps": "小應用",
-      "insights": "洞察"
+      "insights": "洞察",
+      "discoverSkills": "探索技能"
     },
     "tooltips": {
       "persona": "智能成員 — 展開查看基於角色和記憶的成員會話",
@@ -737,14 +738,16 @@
     "notifications": "通知",
     "settingsMenu": {
       "floatingWindow": "懸浮窗",
-      "theme": "主題",
-      "themeConfiguration": "主題配置",
-      "appearanceSwitchFailed": "主題切換失敗，請重試。",
       "feedback": "意見回饋",
       "feedbackUnavailable": "回饋問卷尚未設定。",
       "feedbackOpenFailed": "無法開啟回饋問卷。",
       "openSettings": "開啟設定",
       "about": "關於"
+    },
+    "customization": {
+      "localDesktopOnly": "僅支援本機桌面。切換裝置時會保留固定設定。",
+      "unavailableEntry": "暫不可用的入口（{{id}}）",
+      "openFailed": "無法開啟{{name}}，請重試。"
     }
   },
   "window": {
diff --git a/src/web-ui/src/locales/zh-TW/flow-chat.json b/src/web-ui/src/locales/zh-TW/flow-chat.json
index e805f3834e..d154332b16 100644
--- a/src/web-ui/src/locales/zh-TW/flow-chat.json
+++ b/src/web-ui/src/locales/zh-TW/flow-chat.json
@@ -3860,5 +3860,50 @@
     "quiet": "背景任務已完成 · 無需回報",
     "running": "背景任務執行中",
     "executionDetails": "執行記錄"
+  },
+  "trajectory": {
+    "title": "軌跡",
+    "user": "輸入",
+    "model": "模型",
+    "tool": "工具",
+    "details": "軌跡詳情",
+    "count": "{{count}} 個事件",
+    "search": "搜尋訊息、工具、參數和結果",
+    "matches": "{{current}} / {{count}} 個符合項目",
+    "node": "第 {{turn}} 輪 · {{name}}",
+    "turn": "第 {{turn}} 輪",
+    "locateFailed": "無法定位原始內容，請重新選取以重試。",
+    "loadFailed": "歷史索引載入失敗，目前結果不完整。",
+    "loading": "正在讀取歷史…",
+    "partial": "目前顯示已載入內容，此主機不支援完整歷史搜尋。",
+    "retry": "重試",
+    "notRecorded": "未記錄",
+    "showMore": "顯示更多",
+    "waiting": "等待中",
+    "duration": "耗時",
+    "queue": "排隊等待",
+    "preflight": "準備",
+    "confirmation": "確認等待",
+    "execution": "執行",
+    "firstOutput": "首輸出耗時",
+    "streaming": "串流輸出",
+    "overview": "概述",
+    "parameters": "參數",
+    "result": "結果",
+    "timing": "計時",
+    "query": "搜尋：{{query}}",
+    "unavailable": "原始內容暫時無法使用，歷史記錄可能已變更。",
+    "started": "開始時間",
+    "clearRange": "清除範圍",
+    "rangeStart": "範圍起點",
+    "rangeEnd": "範圍終點",
+    "rangeDetails": "所選範圍",
+    "rangeTurns": "第 {{start}}–{{end}} 輪",
+    "errors": "失敗事件",
+    "modelTotal": "模型累計耗時",
+    "toolTotal": "工具累計耗時",
+    "parallelTime": "耗時按事件累計，並行呼叫可能重疊，不代表實際經過時間。",
+    "locateStart": "定位到範圍起點",
+    "locateEnd": "定位到範圍終點"
   }
 }
diff --git a/src/web-ui/src/locales/zh-TW/settings.json b/src/web-ui/src/locales/zh-TW/settings.json
index 6d8d0a05d1..14ae4b344c 100644
--- a/src/web-ui/src/locales/zh-TW/settings.json
+++ b/src/web-ui/src/locales/zh-TW/settings.json
@@ -87,6 +87,10 @@
       "workspaceGit": {
         "label": "工作區與 Git",
         "description": "設定檔案搜尋、Git 提交署名與 Worktree，管理隔離工作目錄"
+      },
+      "externalImport": {
+        "label": "外部匯入",
+        "description": "匯入並管理其他 AI 應用程式中的內容"
       }
     },
     "views": {
@@ -108,7 +112,8 @@
       "hooks": "事件 Hooks",
       "pet": "寵物",
       "voice-call": "即時語音通話",
-      "desktop-cards": "小卡片"
+      "desktop-cards": "小卡片",
+      "sidebar-navigation": "左側導覽列"
     }
   },
   "changeGuard": {
diff --git a/src/web-ui/src/locales/zh-TW/settings/appearance.json b/src/web-ui/src/locales/zh-TW/settings/appearance.json
index c42d6952de..bd0ccf4e57 100644
--- a/src/web-ui/src/locales/zh-TW/settings/appearance.json
+++ b/src/web-ui/src/locales/zh-TW/settings/appearance.json
@@ -176,5 +176,20 @@
       "allowedParts": "查看目前可用部件",
       "dismiss": "關閉問題詳情"
     }
+  },
+  "sidebar": {
+    "title": "左側導覽列",
+    "reset": "還原預設",
+    "alwaysVisible": "始終顯示",
+    "pinned": "已固定頁面",
+    "empty": "尚未固定其他頁面",
+    "available": "可新增頁面",
+    "moveUp": "上移{{name}}",
+    "moveDown": "下移{{name}}",
+    "remove": "取消固定{{name}}",
+    "addEntry": "固定{{name}}",
+    "noResults": "沒有其他可新增的頁面",
+    "saveFailed": "儲存失敗，仍使用先前的導覽配置，請重試。",
+    "readFailed": "目前版本無法讀取已儲存的導覽偏好，原資料已保留。可透過還原預設來替換。"
   }
 }
diff --git a/src/web-ui/src/shared/types/panelContent.ts b/src/web-ui/src/shared/types/panelContent.ts
index 5d45f1ba72..03a18a3226 100644
--- a/src/web-ui/src/shared/types/panelContent.ts
+++ b/src/web-ui/src/shared/types/panelContent.ts
@@ -23,6 +23,7 @@ export type PanelContentType =
   | 'plan-viewer'
   | 'btw-session'
   | 'session-usage'
+  | 'session-trajectory'
   | 'tool-definitions'
   | 'thinking-detail'
   | 'background-command-output'

From ca77218abf1ae5b1751e83e64fbd2f779c76895d Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Fri, 30 Oct 2026 16:25:50 +0800
Subject: [PATCH 2/3] fix(web-ui): stabilize trajectory hook dependencies

---
 .../trajectory/TrajectoryDetails.tsx          |  6 +++--
 .../trajectory/TrajectoryExplorer.tsx         | 26 ++++++++++---------
 .../trajectory/useTrajectory.test.tsx         | 17 ++++++++++--
 .../src/flow_chat/trajectory/useTrajectory.ts |  7 ++---
 .../trajectory/useTrajectoryNavigation.ts     | 19 +++++++-------
 5 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.tsx b/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.tsx
index 5a6c5fe595..899838fecf 100644
--- a/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.tsx
+++ b/src/web-ui/src/flow_chat/trajectory/TrajectoryDetails.tsx
@@ -136,9 +136,11 @@ export function TrajectoryDetails({ sessionId, surfaceId, node, query }: Traject
   const retired = session?.turnCatalog?.complete === true && !session.turnCatalog.entries.some(entry => entry.turnId === node.turnId)
     && !live;
   const turn = retired ? undefined : live ?? cached ?? (surface.surfaceId === surfaceId && retained?.owner === owner && retained.turn.id === node.turnId ? retained.turn : undefined);
+  const hasTurn = !!turn;
+  const hasSession = !!session;
   useEffect(() => { const turn = live ?? cached; if (turn) setRetained({ owner, turn }); }, [live, cached, owner]);
   useEffect(() => {
-    if (turn || retired || !session || surface.surfaceId !== surfaceId) return;
+    if (hasTurn || retired || !hasSession || surface.surfaceId !== surfaceId) return;
     let cancelled = false;
     setLoading(true);
     const current = () => !cancelled && surface.isCurrent();
@@ -160,7 +162,7 @@ export function TrajectoryDetails({ sessionId, surfaceId, node, query }: Traject
       if (current() && turn) setRetained({ owner, turn });
     }).catch(() => {}).finally(() => { if (current()) setLoading(false); });
     return () => { cancelled = true; };
-  }, [node.turnId, sessionId, surfaceId, surface.epoch, retry, !!turn, !!session, retired, owner]);
+  }, [node.turnId, node.turnOrdinal, sessionId, surfaceId, surface, retry, hasTurn, hasSession, retired, owner]);
   const round = turn?.modelRounds.find(item => item.id === node.roundId);
   const item = round?.items.find(item => item.id === node.id);
   const tool = item?.type === 'tool' ? item as FlowToolItem : undefined;
diff --git a/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.tsx b/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.tsx
index b026b1ee6f..c577267dbc 100644
--- a/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.tsx
+++ b/src/web-ui/src/flow_chat/trajectory/TrajectoryExplorer.tsx
@@ -63,18 +63,18 @@ export const TrajectoryExplorer = forwardRef<TrajectoryExplorerRef, TrajectoryEx
   const hoverPointer = useRef<{ x: number; y: number } | null>(null);
   const [viewport, setViewport] = useState({ left: 0, width: 800 });
   const { nodes, loading, complete, error, supported, retry } = useTrajectory(session, query);
-  const highlightReferenceNode = (node: HTMLElement | null) => {
+  const highlightReferenceNode = useCallback((node: HTMLElement | null) => {
     if (referenceNode.current === node) return;
     referenceNode.current?.removeAttribute('data-reference-hit');
     referenceNode.current = node;
     node?.setAttribute('data-reference-hit', 'true');
-  };
-  const hideReferenceLine = () => {
+  }, []);
+  const hideReferenceLine = useCallback(() => {
     hoverPointer.current = null;
     if (referenceLine.current) referenceLine.current.hidden = true;
     highlightReferenceNode(null);
-  };
-  const positionReferenceLine = () => {
+  }, [highlightReferenceNode]);
+  const positionReferenceLine = useCallback(() => {
     const element = rail.current;
     const line = referenceLine.current;
     const pointer = hoverPointer.current;
@@ -89,17 +89,19 @@ export const TrajectoryExplorer = forwardRef<TrajectoryExplorerRef, TrajectoryEx
     highlightReferenceNode(line.hidden ? null : element.querySelector<HTMLElement>(
       `[data-trajectory-index="${Math.floor(x / NODE_WIDTH)}"]`,
     ));
-  };
+  }, [nodes.length, highlightReferenceNode]);
   const previewPointer = (event: React.PointerEvent<HTMLDivElement>) => {
     if (event.pointerType === 'touch') { hideReferenceLine(); return; }
     hoverPointer.current = { x: event.clientX, y: event.clientY };
     positionReferenceLine();
   };
-  useEffect(() => { if (!nodes.length) hideReferenceLine(); }, [nodes.length]);
+  useEffect(() => { if (!nodes.length) hideReferenceLine(); }, [nodes.length, hideReferenceLine]);
   // A horizontal scroll can mount the hit node after the scroll handler runs.
-  useLayoutEffect(() => { positionReferenceLine(); }, [viewport, nodes]);
+  useLayoutEffect(() => { positionReferenceLine(); }, [viewport, nodes, positionReferenceLine]);
+  const hasRange = !!range;
+  const hasSelection = !!selected;
   useEffect(() => {
-    if (!range && !selected && !busy) return;
+    if (!hasRange && !hasSelection && !busy) return;
     const element = rail.current;
     const document = element?.ownerDocument;
     const dismiss = (event: MouseEvent) => {
@@ -113,14 +115,14 @@ export const TrajectoryExplorer = forwardRef<TrajectoryExplorerRef, TrajectoryEx
     // Let endpoint buttons finish their click before range details are replaced.
     document?.addEventListener('click', dismiss);
     return () => document?.removeEventListener('click', dismiss);
-  }, [!!range, !!selected, busy, clearRange, clearNodeSelection]);
+  }, [hasRange, hasSelection, busy, clearRange, clearNodeSelection]);
   const bounds = useMemo(() => resolveTrajectoryRange(nodes, range), [nodes, range]);
   const matches = useMemo(() => nodes.filter((node, index) => node.matched
     && (!bounds || index >= bounds[0] && index <= bounds[1])), [nodes, bounds]);
   useEffect(() => {
     if (range && !bounds && !loading) { setRange(null); onRangeChange(null, false); }
     if (bounds) onRangeChange(summarizeTrajectoryRange(nodes, bounds), false);
-  }, [nodes, bounds, onRangeChange]);
+  }, [nodes, bounds, onRangeChange, range, loading]);
   const commitRange = (anchor: number, focus: number) => {
     if (!nodes[anchor] || !nodes[focus]) return;
     setRange({ anchor: trajectoryNodeKey(nodes[anchor]), focus: trajectoryNodeKey(nodes[focus]) });
@@ -162,7 +164,7 @@ export const TrajectoryExplorer = forwardRef<TrajectoryExplorerRef, TrajectoryEx
     update();
     const observer = new ResizeObserver(update); observer.observe(element);
     return () => observer.disconnect();
-  }, []);
+  }, [hideReferenceLine]);
   useLayoutEffect(() => {
     const element = rail.current;
     if (!element || revealIndex < 0) return;
diff --git a/src/web-ui/src/flow_chat/trajectory/useTrajectory.test.tsx b/src/web-ui/src/flow_chat/trajectory/useTrajectory.test.tsx
index 3c6fd33b51..e6ede23b6c 100644
--- a/src/web-ui/src/flow_chat/trajectory/useTrajectory.test.tsx
+++ b/src/web-ui/src/flow_chat/trajectory/useTrajectory.test.tsx
@@ -8,7 +8,10 @@ vi.mock('./trajectoryApi', () => ({ loadTrajectoryPage: mocks.page, loadTrajecto
 vi.mock('@/infrastructure/peer-device/peerDeviceContextState', () => ({ usePeerDeviceModeOptional: () => ({
   peerMode: { active: mocks.peer }, currentPeerCapabilities: { sessionTrajectoryV1: mocks.supported },
 }) }));
-vi.mock('@/infrastructure/peer-device/deviceSurface', () => ({ getActiveSurfaceScope: () => ({ epoch: 1, isCurrent: () => mocks.current }) }));
+vi.mock('@/infrastructure/peer-device/deviceSurface', () => {
+  const scope = { epoch: 1, isCurrent: () => mocks.current };
+  return { getActiveSurfaceScope: () => scope };
+});
 import { useTrajectory } from './useTrajectory';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -16,7 +19,7 @@ const catalog = { schemaVersion: 1, sessionId: 'session', revision: 'host', tota
   entries: [{ ordinal: 0, storageTurnIndex: 5, turnId: 'a' }, { ordinal: 1, storageTurnIndex: 9, turnId: 'b' }] };
 const session = { sessionId: 'session', workspaceId: 'workspace', workspacePath: '/remote', dialogTurns: [], isPartial: true } as unknown as Session;
 let result: ReturnType<typeof useTrajectory>;
-function Harness({ query = '' }: { query?: string }) { result = useTrajectory(session, query); return null; }
+function Harness({ query = '', value = session }: { query?: string; value?: Session }) { result = useTrajectory(value, query); return null; }
 let root: Root;
 beforeEach(() => {
   vi.useFakeTimers(); mocks.page.mockReset(); mocks.catalog.mockReset(); mocks.current = true; mocks.peer = false; mocks.supported = true;
@@ -53,4 +56,14 @@ describe('trajectory history reader', () => {
     await act(async () => finish({ status: 'ready', nodes: [{ id: 'old' }], nextNodeOffset: null, endOrdinalExclusive: 1 }));
     expect(result.nodes).toHaveLength(0); expect(mocks.page).toHaveBeenCalledTimes(1);
   });
+  it('keeps summary reads stable when the live session snapshot changes', async () => {
+    mocks.page.mockResolvedValue({ status: 'ready', nodes: [], nextNodeOffset: null, endOrdinalExclusive: 2 });
+    await act(async () => root.render(<Harness />));
+    await act(async () => { await vi.advanceTimersByTimeAsync(500); });
+    await act(async () => root.render(<Harness value={{ ...session, dialogTurns: [...session.dialogTurns] }} />));
+    await act(async () => { await vi.advanceTimersByTimeAsync(500); });
+    expect(mocks.catalog).toHaveBeenCalledTimes(1);
+    expect(mocks.page).toHaveBeenCalledTimes(1);
+    expect(result.complete).toBe(true);
+  });
 });
diff --git a/src/web-ui/src/flow_chat/trajectory/useTrajectory.ts b/src/web-ui/src/flow_chat/trajectory/useTrajectory.ts
index c42007c76a..c1e2dba8c9 100644
--- a/src/web-ui/src/flow_chat/trajectory/useTrajectory.ts
+++ b/src/web-ui/src/flow_chat/trajectory/useTrajectory.ts
@@ -69,9 +69,10 @@ export function useTrajectory(session: Session, query: string) {
     };
     const timer = setTimeout(() => void read(), 150);
     return () => { cancelled = true; clearTimeout(timer); };
-  }, [session.sessionId, catalogRevision, scope.epoch, supported, query, revision]);
-  const projectionCache = useMemo<TrajectoryProjectionCache>(() => new WeakMap(), [session.sessionId, scope.epoch]);
-  const live = useMemo(() => projectLoadedTrajectory(session, query, projectionCache), [session.dialogTurns, session.turnCatalog, query]);
+  }, [session.sessionId, catalogRevision, scope, supported, query, revision]);
+  // Immutable Turn identity, ordinal and query fully determine cached nodes.
+  const projectionCache = useMemo<TrajectoryProjectionCache>(() => new WeakMap(), []);
+  const live = useMemo(() => projectLoadedTrajectory(session, query, projectionCache), [session, query, projectionCache]);
   const nodes = useMemo(() => mergeTrajectoryNodes(history, live), [history, live]);
   return { nodes, loading, error, complete, supported, retry: () => setRevision(value => value + 1) };
 }
diff --git a/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.ts b/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.ts
index 29c8291d69..f1d6803689 100644
--- a/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.ts
+++ b/src/web-ui/src/flow_chat/trajectory/useTrajectoryNavigation.ts
@@ -36,8 +36,9 @@ export function useTrajectoryNavigation({ session, items, listRef, rootRef, pres
     };
   }, [rootRef, session?.sessionId, selectionClearRequest]);
   return useCallback(async ({ node, query }: TrajectorySelection): Promise<boolean> => {
-    const source = latest.current.session;
-    if (!source) return false;
+    const activeSession = latest.current.session;
+    if (!activeSession) return false;
+    const source = activeSession;
     const scope = getActiveSurfaceScope();
     cancelPending.current?.();
     const ticket = ++generation.current;
@@ -83,7 +84,7 @@ export function useTrajectoryNavigation({ session, items, listRef, rootRef, pres
       let settled = false;
       let frame: number | undefined;
       const timeout = setTimeout(() => finish(false), 5000);
-      const finish = (value: boolean) => {
+      function finish(value: boolean) {
         if (settled) return;
         settled = true;
         clearTimeout(timeout);
@@ -93,11 +94,11 @@ export function useTrajectoryNavigation({ session, items, listRef, rootRef, pres
         if (!accepted) listRef.current?.clearSearchMatch();
         if (accepted) openTrajectoryPanel(source, node, query, t('trajectory.details'), viewId);
         resolve(accepted);
-      };
-      const cancel = () => finish(false);
+      }
+      function cancel() { finish(false); }
       cancelPending.current = cancel;
-      const retry = () => { frame = requestAnimationFrame(attempt); };
-      const attempt = () => {
+      function retry() { frame = requestAnimationFrame(attempt); }
+      function attempt() {
         if (settled) return;
         if (!current() || performance.now() - started > 5000) { finish(false); return; }
         const values = latest.current.items;
@@ -129,8 +130,8 @@ export function useTrajectoryNavigation({ session, items, listRef, rootRef, pres
         if (!element) { retry(); return; }
         clearHighlight.current = highlightFlowChatFocusTarget(element);
         finish(true);
-      };
+      }
       retry();
     });
-  }, [listRef, rootRef, t, viewId]);
+  }, [listRef, t, viewId]);
 }

From 076496a044cc48e51394b1d0569fcfb5df974a69 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Fri, 30 Oct 2026 16:40:39 +0800
Subject: [PATCH 3/3] test(web-ui): align navigation and icon integration
 contracts

---
 .../modern/useFlowChatNavigation.focus.test.tsx           | 8 +++++---
 .../design-system/IconUsageIntegration.test.tsx           | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.focus.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.focus.test.tsx
index 0296d8796e..c188ddab2f 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.focus.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatNavigation.focus.test.tsx
@@ -157,7 +157,7 @@ describe('useFlowChatNavigation focus placement', () => {
     document.body.prepend(other);
     const owned = renderItem();
     await dispatchFocusRequest();
-    expect(focusLine.mock.lastCall?.[0].detail).toEqual({ element: owned, active: true });
+    expect(focusLine.mock.lastCall?.[0].detail).toEqual({ element: owned, active: true, id: expect.any(Symbol) });
     expect(owned.classList.contains('flowchat-flow-item--focused')).toBe(false);
     expect(other.classList.contains('flowchat-flow-item--focused')).toBe(false);
   });
@@ -184,7 +184,7 @@ describe('useFlowChatNavigation focus placement', () => {
     container.append(successor);
     await dispatchFocusRequest();
     expect(thought.classList.contains('flowchat-flow-item--focused')).toBe(false);
-    expect(focusLine.mock.lastCall?.[0].detail).toEqual({ element: successor, active: true });
+    expect(focusLine.mock.lastCall?.[0].detail).toEqual({ element: successor, active: true, id: expect.any(Symbol) });
     expect(successor.classList.contains('flowchat-flow-item--focused')).toBe(false);
     expect(thought.dataset.thinkingAttachment).toBe('side');
   });
@@ -192,8 +192,10 @@ describe('useFlowChatNavigation focus placement', () => {
   it('releases the passive search-line marker on reader interaction', async () => {
     const element = renderItem();
     await dispatchFocusRequest();
+    const id = focusLine.mock.lastCall?.[0].detail.id;
+    expect(typeof id).toBe('symbol');
     window.dispatchEvent(new Event('wheel'));
-    expect(focusLine.mock.lastCall?.[0].detail).toEqual({ element, active: false });
+    expect(focusLine.mock.lastCall?.[0].detail).toEqual({ element, active: false, id });
   });
 
   it('delegates exact excerpts to the text navigator and cancels on reader intent', async () => {
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 84305af9db..65ddb29bdf 100644
--- a/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx
+++ b/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx
@@ -82,7 +82,7 @@ describe('catalog icon consumer integration', () => {
     expect(localAdapters).toEqual([]);
     expect(source('app/components/NavPanel/MainNav.tsx')).toContain('<Icon glyph={House} size="sm" />');
     expect(source('app/components/NavPanel/components/PersistentFooterActions.tsx'))
-      .toContain('<Icon glyph={Cable} size="sm" aria-hidden="true" />');
+      .toContain('<Icon name="gear" size="sm" aria-hidden="true" />');
     expect(source('app/scenes/agents/agentsIcons.ts')).toContain('Record<AgentIconKey, IconSource>');
     expect(source('app/scenes/ecosystem-compatibility/ExternalAgentContent.tsx'))
       .toContain('Record<EcosystemImportItemKind, IconSource>');