From 94a09dc76fb9383e34bdb2a63a183e6baeee1fca Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 23 Jun 2026 17:30:15 +0800
Subject: [PATCH 01/13] test: add stable UI test ids

---
 docs/development/ui-testids.md                | 68 +++++++++++++++++++
 .../src/app/components/NavPanel/NavPanel.tsx  |  2 +-
 .../components/PersistentFooterActions.tsx    |  5 ++
 .../src/app/scenes/settings/SettingsNav.tsx   |  4 +-
 .../src/app/scenes/settings/SettingsScene.tsx |  8 ++-
 .../components/NotificationCenter.tsx         |  1 +
 6 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 docs/development/ui-testids.md

diff --git a/docs/development/ui-testids.md b/docs/development/ui-testids.md
new file mode 100644
index 0000000000..78e61b4fd3
--- /dev/null
+++ b/docs/development/ui-testids.md
@@ -0,0 +1,68 @@
+# UI Test IDs
+
+This document records stable `data-testid` values used by BitFun UI automation.
+Test IDs are grouped by product area and should be added only when an automated
+workflow needs a stable locator.
+
+Rules:
+
+- Use `data-testid` only as a test locator. Do not branch product logic on it.
+- Prefer the real interactive element: `button`, `input`, editable region, or dialog root.
+- Keep `data-testid` values stable, lowercase, and hyphen-separated.
+- For repeated items, use one shared `data-testid` plus a stable data attribute.
+- Do not use visible text, CSS classes, coordinates, screenshots, or XPath paths as primary locators.
+
+## App Shell
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| App layout root | `app-layout` | App load-ready anchor. |
+| Main content area | `app-main-content` | Primary scene content container. |
+| Navigation panel | `nav-panel` | Left navigation container. |
+
+## Navigation
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Footer more button | `nav-footer-more-btn` | Opens the footer overflow menu. |
+| Footer menu | `nav-footer-menu` | Overflow menu opened from the footer more button. |
+| Footer settings item | `nav-footer-settings-item` | Opens the Settings scene from the footer menu. |
+| Footer shell button | `nav-footer-shell-btn` | Opens or closes the shell scene nav. |
+| Footer browser button | `nav-footer-browser-btn` | Opens browser scene or browser panel depending on active context. |
+
+## Chat
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Chat input container | `chat-input-container` | Root container for the composer. |
+| Chat input editable region | `chat-input-textarea` | Rich text editable region. |
+| Chat send button | `chat-input-send-btn` | Send action when input is valid. |
+
+## Settings
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Settings scene root | `settings-scene` | Root content area for the Settings scene. Includes `data-settings-tab`. |
+| Settings scene content | `settings-scene-content` | Active settings tab content wrapper. |
+| Settings navigation root | `settings-nav` | Left-side settings navigation. |
+| Settings navigation tab | `settings-nav-tab` | Repeated item. Pair with `data-settings-tab`. |
+
+## Notifications
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Notification button | `notification-button` | Opens or toggles the notification center. |
+| Notification center dialog | `notification-center` | Notification center modal root. |
+| Notification center close button | `notification-center-close-btn` | Closes the notification center. |
+| Notification center active section | `notification-center-active-section` | Present only when active task notifications exist. |
+
+## Flow Chat Header
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Background subagents button | `flowchat-header-background-subagents` | Opens background subagent activity state. |
+| Pull requests button | `flowchat-header-pull-requests` | Opens pull request related UI. |
+| Turn list | `flowchat-header-turn-list` | Turn navigation list. |
+| Previous turn button | `flowchat-header-turn-prev` | Moves to previous visible turn. |
+| Next turn button | `flowchat-header-turn-next` | Moves to next visible turn. |
+
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.tsx b/src/web-ui/src/app/components/NavPanel/NavPanel.tsx
index ae365f60b8..b3dd43c9ac 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.tsx
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.tsx
@@ -81,7 +81,7 @@ const NavPanel: React.FC<NavPanelProps> = ({ className = '' }) => {
   ].filter(Boolean).join(' ');
 
   return (
-    <nav className={`bitfun-nav-panel ${className}`} aria-label={t('nav.aria.mainNav')}>
+    <nav className={`bitfun-nav-panel ${className}`} aria-label={t('nav.aria.mainNav')} data-testid="nav-panel">
       <div ref={contentRef} className={contentCls}>
 
         <div className="bitfun-nav-panel__layer bitfun-nav-panel__layer--main">
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 a2f4e1d2bf..10e293d574 100644
--- a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
@@ -160,6 +160,7 @@ const PersistentFooterActions: React.FC = () => {
                 aria-label={t('nav.moreOptions')}
                 aria-expanded={menuOpen}
                 onClick={toggleMenu}
+                data-testid="nav-footer-more-btn"
               >
                 {menuOpen ? (
                   <MoreVertical size={15} aria-hidden="true" />
@@ -181,6 +182,7 @@ const PersistentFooterActions: React.FC = () => {
                 <div
                   className={`bitfun-nav-panel__footer-menu${menuClosing ? ' is-closing' : ''}`}
                   role="menu"
+                  data-testid="nav-footer-menu"
                 >
                   <Tooltip
                     content={t('header.remoteConnectRequiresWorkspace')}
@@ -223,6 +225,7 @@ const PersistentFooterActions: React.FC = () => {
                     className="bitfun-nav-panel__footer-menu-item"
                     role="menuitem"
                     onClick={handleOpenSettings}
+                    data-testid="nav-footer-settings-item"
                   >
                     <Settings size={14} />
                     <span>{t('shared:features.settings')}</span>
@@ -248,6 +251,7 @@ const PersistentFooterActions: React.FC = () => {
               aria-label={t('scenes.shell')}
               aria-pressed={showSceneNav && navSceneId === 'shell'}
               onClick={handleOpenShell}
+              data-testid="nav-footer-shell-btn"
             >
               <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
                 <SquareTerminal size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
@@ -263,6 +267,7 @@ const PersistentFooterActions: React.FC = () => {
               aria-label={t('scenes.browser')}
               aria-pressed={isBrowserActive}
               onClick={handleOpenBrowser}
+              data-testid="nav-footer-browser-btn"
             >
               <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
                 <Globe size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
index ff6c521d21..d9be9216c1 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.tsx
@@ -290,7 +290,7 @@ const SettingsNav: React.FC = () => {
   } = useSettingsNav();
 
   return (
-    <div className="bitfun-settings-nav">
+    <div className="bitfun-settings-nav" data-testid="settings-nav">
       <div className="bitfun-settings-nav__header">
         <span className="bitfun-settings-nav__title">
           {t('shared:features.settings')}
@@ -385,6 +385,8 @@ const SettingsNav: React.FC = () => {
                   <button
                     key={tabDef.id}
                     type="button"
+                    data-testid="settings-nav-tab"
+                    data-settings-tab={tabDef.id}
                     className={[
                       'bitfun-settings-nav__item',
                       activeTab === tabDef.id && 'is-active',
diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.tsx b/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
index 86c8b14f84..1744f4a711 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
@@ -74,9 +74,13 @@ const SettingsScene: React.FC = () => {
   }
 
   return (
-    <div className="bitfun-settings-scene">
+    <div className="bitfun-settings-scene" data-testid="settings-scene" data-settings-tab={resolvedTab}>
       {Content && (
-        <div key={resolvedTab} className="bitfun-settings-scene__content-wrapper">
+        <div
+          key={resolvedTab}
+          className="bitfun-settings-scene__content-wrapper"
+          data-testid="settings-scene-content"
+        >
           <Suspense fallback={<SettingsSceneLoading />}>
             <Content />
           </Suspense>
diff --git a/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx b/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
index 147614d0f7..a18916c3fd 100644
--- a/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
+++ b/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
@@ -380,6 +380,7 @@ export const NotificationCenter: React.FC = () => {
               className="notification-center__header-button"
               onClick={handleClose}
               title={t('common:actions.close')}
+              data-testid="notification-center-close-btn"
             >
               <X size={16} />
             </button>

From 11405b179d6d2eb62622a07cafad18885380ef2c Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 9 Jun 2026 16:51:44 +0800
Subject: [PATCH 02/13] test: add bulk UI automation test ids

Add stable data-testid coverage for app shell, welcome, navigation, session, agents, and skills surfaces, and document the locator planning and naming rules.
---
 docs/development/ui-testids.md                | 220 +++++++++++++++++-
 .../components/GalleryLayout/GalleryGrid.tsx  |  10 +-
 .../GalleryLayout/GalleryLayout.tsx           |   6 +-
 .../components/GalleryLayout/GalleryZone.tsx  |   5 +-
 .../src/app/components/NavPanel/MainNav.tsx   |  14 +-
 .../sections/sessions/SessionsSection.tsx     |   8 +-
 .../sections/workspaces/WorkspaceItem.tsx     | 116 +++++++--
 .../workspaces/WorkspaceListSection.tsx       |  15 +-
 src/web-ui/src/app/scenes/SceneViewport.tsx   |  14 +-
 .../src/app/scenes/agents/AgentsScene.tsx     |  17 +-
 .../scenes/agents/components/AgentCard.tsx    |   4 +
 .../agents/components/AgentTeamCard.tsx       |   4 +
 .../agents/components/CoreAgentCard.tsx       |   3 +
 .../src/app/scenes/session/ChatPane.tsx       |   1 +
 .../src/app/scenes/session/SessionScene.tsx   |   4 +
 .../src/app/scenes/skills/SkillsScene.tsx     |   2 +
 .../scenes/skills/components/SkillCard.tsx    |  11 +-
 .../src/app/scenes/welcome/WelcomeScene.tsx   |  28 ++-
 .../components/Search/Search.tsx              |   5 +-
 .../modern/ModernFlowChatContainer.tsx        |   3 +
 .../components/modern/VirtualMessageList.tsx  |   6 +-
 21 files changed, 445 insertions(+), 51 deletions(-)

diff --git a/docs/development/ui-testids.md b/docs/development/ui-testids.md
index 78e61b4fd3..293bca9719 100644
--- a/docs/development/ui-testids.md
+++ b/docs/development/ui-testids.md
@@ -11,6 +11,61 @@ Rules:
 - Keep `data-testid` values stable, lowercase, and hyphen-separated.
 - For repeated items, use one shared `data-testid` plus a stable data attribute.
 - Do not use visible text, CSS classes, coordinates, screenshots, or XPath paths as primary locators.
+- Prefer stable product identifiers in companion `data-*` attributes, such as `data-workspace-id`, `data-session-id`, `data-agent-id`, `data-skill-key`, or `data-settings-tab`.
+
+## Coverage Planning
+
+### Must Add
+
+These areas are high-value UI automation entry points and should have stable IDs
+before adding or expanding cross-platform pytest cases.
+
+| Area | Scope | Rationale |
+|---|---|---|
+| App shell | App root, main content, scene viewport | App load and routing readiness anchors. |
+| Navigation | Top actions, footer menu, workspace menu, workspace rows, session rows | Main path for opening settings, sessions, projects, agents, skills, and workspace-scoped actions. |
+| Welcome scene | Scene root, open/new project buttons, recent workspace list | Default startup path currently lands here on OH. |
+| Notifications | Notification button, center root, close button, active section | Current smoke coverage and async task visibility. |
+| Settings | Scene root, nav tabs, active content | Current smoke coverage and future configuration tests. |
+| Session and Flow Chat | Session scene, chat/aux panes, message list, composer | Main product workflow once session creation is stable. |
+| Agents and Skills | Scene roots, zones/tabs, filters, cards, key actions | High-value navigation and marketplace/agent setup flows. |
+
+### Optional Add
+
+Add these when a concrete test needs them.
+
+| Area | Scope | Rationale |
+|---|---|---|
+| Deep Review / BTW detail panels | Review action bars, reviewer/member details, report export actions | Valuable for deeper behavior tests, but not needed for app smoke. |
+| Tool cards | Specific approve/retry/open-detail controls | Add per tool workflow instead of tagging every rendered result field. |
+| File, Git, Terminal, Browser panels | Panel roots, primary toolbar actions, selected list rows | Useful once panel-specific pytest coverage exists. |
+| Settings form controls | Specific model/provider fields and save/reset buttons | Add with configuration tests; avoid tagging every display-only label. |
+| Mini apps | Gallery root, app cards, runner root | Add when Mini App flows enter the automation plan. |
+
+### Not Recommended
+
+Avoid adding IDs to these surfaces unless there is a clear automated workflow.
+
+| Scope | Reason |
+|---|---|
+| Decorative icons, badges, counters, shadows, animations | Not meaningful interaction or state anchors. |
+| Every text node, paragraph, and static label | Creates maintenance cost and duplicates i18n-visible content. |
+| Generated markdown/code content and model output spans | Output is dynamic and should be asserted through higher-level state. |
+| Coordinates, canvas pixels, screenshot-only markers, or native window controls | Cross-platform WebView automation should stay DOM and `data-testid` based. |
+| Localized text copied into `data-testid` or required as the primary locator | Breaks when locales or copy change. |
+
+## Naming
+
+- Use area prefixes: `app-*`, `scene-*`, `nav-*`, `welcome-*`, `settings-*`, `notification-*`, `session-*`, `chat-*`, `flowchat-*`, `agents-*`, `skills-*`.
+- Use action suffixes for buttons: `*-btn`, `*-toggle`, `*-open`, `*-close`, `*-submit`, `*-cancel`, `*-delete`.
+- Use structure suffixes for containers: `*-scene`, `*-panel`, `*-list`, `*-grid`, `*-menu`, `*-content`, `*-zone`.
+- For repeated rows/cards, reuse one `data-testid` and pair it with a stable attribute, for example:
+  - `nav-workspace-item` + `data-workspace-id`
+  - `nav-session-item` + `data-session-id`
+  - `settings-nav-tab` + `data-settings-tab`
+  - `agents-agent-card` + `data-agent-id`
+  - `skills-installed-card` + `data-skill-key`
+  - `skills-market-card` + `data-skill-install-id`
 
 ## App Shell
 
@@ -19,24 +74,113 @@ Rules:
 | App layout root | `app-layout` | App load-ready anchor. |
 | Main content area | `app-main-content` | Primary scene content container. |
 | Navigation panel | `nav-panel` | Left navigation container. |
+| Scene viewport root | `scene-viewport` | Scene host root. |
+| Scene viewport clip | `scene-viewport-clip` | Mounted scene clip area. |
+| Empty scene viewport | `scene-viewport-empty` | Rendered when no tabs are open. |
+| Mounted scene wrapper | `scene-viewport-scene` | Repeated item. Pair with `data-scene-id` and `data-scene-active`. |
+
+## Welcome
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Welcome scene root | `welcome-scene` | Default startup scene anchor. |
+| Open project button | `welcome-open-project-btn` | Opens the file/folder picker. |
+| New project button | `welcome-new-project-btn` | Opens the new project flow. |
+| Recent workspace list | `welcome-recent-workspace-list` | Present when recent workspaces exist. |
+| Recent workspace row | `welcome-recent-workspace-row` | Repeated item. Pair with `data-workspace-id`. |
+| Recent workspace open button | `welcome-recent-workspace-open` | Repeated item. Pair with `data-workspace-id`. |
+| Recent workspace remove button | `welcome-recent-workspace-remove` | Repeated item. Pair with `data-workspace-id`. |
+| Recent workspace empty state | `welcome-recent-workspace-empty` | Present when no recent workspace is available. |
 
 ## Navigation
 
 | Element name | data-testid | Notes |
 |---|---|---|
+| Nav search trigger | `nav-search-trigger` | Opens navigation search. |
+| New code session button | `nav-new-code-session-btn` | Creates or opens a code session for the active project workspace. |
+| New cowork session button | `nav-new-cowork-session-btn` | Creates or opens a cowork session for the active project workspace. |
+| Assistant button | `nav-assistant-btn` | Opens assistant/persona scene. |
+| Extensions toggle | `nav-extensions-toggle` | Expands Agents/Skills entries. |
+| Agents button | `nav-agents-btn` | Opens Agents scene. |
+| Skills button | `nav-skills-btn` | Opens Skills scene. |
+| Navigation sections | `nav-sections` | Container for workspace/session sections. |
+| Navigation bottom bar | `nav-bottom-bar` | Container for Mini App/footer region. |
 | Footer more button | `nav-footer-more-btn` | Opens the footer overflow menu. |
 | Footer menu | `nav-footer-menu` | Overflow menu opened from the footer more button. |
 | Footer settings item | `nav-footer-settings-item` | Opens the Settings scene from the footer menu. |
 | Footer shell button | `nav-footer-shell-btn` | Opens or closes the shell scene nav. |
 | Footer browser button | `nav-footer-browser-btn` | Opens browser scene or browser panel depending on active context. |
 
-## Chat
+## Navigation Workspaces
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Workspace add button | `nav-workspace-add-btn` | Opens workspace add/recent menu. |
+| Workspace add menu | `nav-workspace-menu` | Portal menu opened from add button. |
+| Workspace menu open project | `nav-workspace-menu-open-project` | Opens project picker. |
+| Workspace menu new project | `nav-workspace-menu-new-project` | Opens new project flow. |
+| Workspace menu remote SSH | `nav-workspace-menu-remote-ssh` | Opens SSH remote connect flow. |
+| Workspace menu recent workspace | `nav-workspace-menu-recent-workspace` | Repeated item. Pair with `data-workspace-id`. |
+| Workspace list | `nav-workspace-list` | Repeated by list type. Pair with `data-workspace-list`. |
+| Workspace list empty state | `nav-workspace-list-empty` | Pair with `data-workspace-list`. |
+| Workspace drop target | `nav-workspace-drop-target` | Repeated drag target. Pair with `data-workspace-id`. |
+| Workspace row | `nav-workspace-item` | Repeated item. Pair with `data-workspace-id`, `data-workspace-kind`, and `data-workspace-active`. |
+| Workspace card | `nav-workspace-card` | Clickable row body. Pair with `data-workspace-id`. |
+| Workspace sessions toggle | `nav-workspace-sessions-toggle` | Expands/collapses session rows. Pair with `data-workspace-id`. |
+| Workspace name button | `nav-workspace-name-btn` | Activates workspace or toggles sessions. Pair with `data-workspace-id`. |
+| Workspace files button | `nav-workspace-files-btn` | Opens file viewer for workspace. Pair with `data-workspace-id`. |
+| Workspace search index button | `nav-workspace-search-index-btn` | Opens search index status modal when present. Pair with `data-workspace-id`. |
+| Workspace row menu button | `nav-workspace-menu-btn` | Opens row action menu. Pair with `data-workspace-id`. |
+| Workspace row menu | `nav-workspace-item-menu` | Portal menu for one workspace. Pair with `data-workspace-id`. |
+| Workspace create session | `nav-workspace-menu-create-session` | Assistant workspace session action. |
+| Workspace create code session | `nav-workspace-menu-create-code-session` | Normal workspace code session action. |
+| Workspace create cowork session | `nav-workspace-menu-create-cowork-session` | Normal workspace cowork session action. |
+| Workspace create ACP session | `nav-workspace-menu-create-acp-session` | Repeated item. Pair with `data-acp-client-id`. |
+| Workspace create init session | `nav-workspace-menu-create-init-session` | Starts AGENTS.md/init session. |
+| Workspace related paths | `nav-workspace-menu-related-paths` | Opens related paths dialog. |
+| Workspace new worktree | `nav-workspace-menu-new-worktree` | Opens worktree creation dialog. |
+| Workspace delete worktree | `nav-workspace-menu-delete-worktree` | Deletes linked worktree workspace. |
+| Workspace copy path | `nav-workspace-menu-copy-path` | Copies workspace path. |
+| Workspace reveal | `nav-workspace-menu-reveal` | Reveals workspace in file explorer. |
+| Workspace close | `nav-workspace-menu-close` | Closes workspace. |
+| Workspace reset assistant | `nav-workspace-menu-reset-assistant` | Resets default assistant workspace. |
+| Workspace delete assistant | `nav-workspace-menu-delete-assistant` | Deletes named assistant workspace. |
+| Workspace session region | `nav-workspace-session-region` | Contains sessions for one workspace. Pair with `data-workspace-id`. |
+
+## Navigation Sessions
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Session list | `nav-session-list` | Workspace-scoped list. Pair with `data-workspace-id`. |
+| Session row | `nav-session-item` | Repeated item. Pair with `data-session-id`, `data-session-kind`, `data-session-level`, and `data-session-active`. |
+| Session menu button | `nav-session-menu-btn` | Opens row action menu. Pair with `data-session-id`. |
+| Session menu | `nav-session-menu` | Portal menu for one session. Pair with `data-session-id`. |
+| Session rename item | `nav-session-menu-rename` | Starts session rename. |
+| Session delete item | `nav-session-menu-delete` | Deletes session. |
+| Session list toggle | `nav-session-list-toggle` | Expands/collapses long session lists. |
+
+## Session And Chat
 
 | Element name | data-testid | Notes |
 |---|---|---|
+| Session scene root | `session-scene` | Session scene anchor. |
+| Session chat pane | `session-chat-pane` | Left chat pane within session scene. |
+| Session right pane resizer | `session-right-pane-resizer` | Splitter between chat and aux pane. |
+| Session aux pane | `session-aux-pane` | Right content canvas pane. Includes `data-mode`. |
+| Chat pane root | `chat-pane` | FlowChat host pane. |
+| FlowChat container | `flowchat-container` | FlowChat root. Includes `data-session-id`. |
+| FlowChat messages region | `flowchat-messages` | Message list/welcome panel host. |
+| FlowChat message list | `flowchat-message-list` | Virtual message list root when messages exist. |
+| FlowChat empty message list | `flowchat-message-list-empty` | Empty virtual list state. |
 | Chat input container | `chat-input-container` | Root container for the composer. |
 | Chat input editable region | `chat-input-textarea` | Rich text editable region. |
 | Chat send button | `chat-input-send-btn` | Send action when input is valid. |
+| Chat cancel button | `chat-input-cancel-btn` | Cancels in-progress send/generation when present. |
+| Chat input workspace strip | `chat-input-workspace-strip` | Active workspace strip above composer. |
+| Chat input target switcher | `chat-input-target-switcher` | Target/mode switcher. |
+| Chat input image strip | `chat-input-image-strip` | Attached image strip. |
+| Chat input start BTW button | `chat-input-boost-start-btw` | Starts the BTW flow when present. |
+| Pending queue panel | `pending-queue-panel` | Pending background task queue. |
 
 ## Settings
 
@@ -66,3 +210,77 @@ Rules:
 | Previous turn button | `flowchat-header-turn-prev` | Moves to previous visible turn. |
 | Next turn button | `flowchat-header-turn-next` | Moves to next visible turn. |
 
+## Agents
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Agents scene root | `agents-scene` | Agents gallery page root. |
+| Agents zones container | `agents-zones` | Container for all agent zones. |
+| Core anchor button | `agents-anchor-core` | Scrolls to core agents zone. |
+| Teams anchor button | `agents-anchor-teams` | Scrolls to teams zone. |
+| Custom agents anchor button | `agents-anchor-custom` | Scrolls to custom agents zone. |
+| Agents search button | `agents-search-btn` | Search suffix button. |
+| Core agents zone | `agents-core-zone` | Core agents section. |
+| Teams zone | `agents-teams-zone` | Agent teams section. |
+| Custom agents zone | `agents-custom-zone` | Custom/subagent section. |
+| Review team configure button | `agents-review-team-configure-btn` | Opens review team configuration. |
+| Agent source filter | `agents-source-filter` | Repeated item. Pair with `data-agent-source`. |
+| Agent kind filter | `agents-kind-filter` | Repeated item. Pair with `data-agent-kind`. |
+| Create agent button | `agents-create-agent-btn` | Opens custom agent creation page. |
+| Core agent card | `agents-core-agent-card` | Repeated item. Pair with `data-agent-id` and `data-agent-kind`. |
+| Agent team card | `agents-team-card` | Repeated item. Pair with `data-team-id`. |
+| Agent card | `agents-agent-card` | Repeated item. Pair with `data-agent-id`, `data-agent-kind`, and `data-subagent-source`. |
+| BTW stop review button | `btw-session-panel-stop-review` | Stops review session from BTW panel. |
+| BTW origin button | `btw-session-panel-origin-button` | Opens origin session from BTW panel. |
+
+## Skills
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Skills scene root | `skills-scene` | Skills scene root. |
+| Skills tabs root | `skills-tabs` | Installed/discover tabs container. |
+| Installed tab | `skills-tab-installed` | Includes `data-skills-tab-active`. |
+| Discover tab | `skills-tab-discover` | Includes `data-skills-tab-active`. |
+| Installed panel | `skills-installed-panel` | Installed skills view root. |
+| Installed sidebar | `skills-installed-sidebar` | Installed category sidebar. |
+| Installed category | `skills-installed-category` | Repeated item. Pair with `data-skill-category`. |
+| Installed content | `skills-installed-content` | Main installed skills content. |
+| Installed search | `skills-installed-search` | Installed skills search root. |
+| Hide duplicates button | `skills-hide-duplicates-btn` | Includes `data-active`. |
+| Add local skill button | `skills-add-local-btn` | Opens add skill form. |
+| Installed loading state | `skills-installed-loading` | Loading skeleton container. |
+| Installed error state | `skills-installed-error` | Error state container. |
+| Installed empty state | `skills-installed-empty` | Empty state container. |
+| Installed grid | `skills-installed-grid` | Installed skills card grid. |
+| Installed skill card | `skills-installed-card` | Repeated item. Pair with `data-skill-key`, `data-skill-level`, and `data-skill-builtin`. |
+| Installed card path button | `skills-installed-card-path` | Repeated item. Pair with `data-skill-key`. |
+| Installed card delete button | `skills-installed-card-delete` | Repeated item. Pair with `data-skill-key`. |
+| Installed pagination | `skills-installed-pagination` | Installed list pagination root. |
+| Installed previous page | `skills-installed-page-prev` | Previous page button. |
+| Installed next page | `skills-installed-page-next` | Next page button. |
+| Discover panel | `skills-discover-panel` | Marketplace view root. |
+| Discover search | `skills-discover-search` | Marketplace search root. |
+| Discover content | `skills-discover-content` | Marketplace content area. |
+| Discover loading state | `skills-discover-loading` | Initial loading skeleton container. |
+| Discover page loading state | `skills-discover-page-loading` | Loading state for page changes. |
+| Discover error state | `skills-discover-error` | Error state container. |
+| Discover empty state | `skills-discover-empty` | Empty state container. |
+| Discover grid | `skills-discover-grid` | Marketplace card grid. |
+| Market skill card | `skills-market-card` | Repeated item. Pair with `data-skill-install-id` and `data-skill-installed`. |
+| Skill card action | `skills-card-action` | Repeated card action. Pair with `data-skill-action`. |
+| Discover pagination | `skills-discover-pagination` | Marketplace pagination root. |
+| Discover previous page | `skills-discover-page-prev` | Previous page button. |
+| Discover next page | `skills-discover-page-next` | Next page button. |
+| Detail delete button | `skills-detail-delete-btn` | Deletes selected installed skill. |
+| Detail installed button | `skills-detail-installed-btn` | Disabled installed marker for marketplace detail. |
+| Detail project download button | `skills-detail-download-project-btn` | Downloads market skill to project scope. |
+| Detail user download button | `skills-detail-download-user-btn` | Downloads market skill to user scope. |
+| Detail path button | `skills-detail-path-btn` | Reveals installed skill path. |
+| Detail external link | `skills-detail-external-link` | Opens marketplace link. |
+| Add form | `skills-add-form` | Add local skill modal content. |
+| Add path input | `skills-add-path-input` | Local skill path input. |
+| Add browse button | `skills-add-browse-btn` | Opens path picker. |
+| Add validation result | `skills-add-validation` | Includes `data-validation-valid`. |
+| Add cancel button | `skills-add-cancel-btn` | Closes add form. |
+| Add submit button | `skills-add-submit-btn` | Adds validated local skill. |
+
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryGrid.tsx b/src/web-ui/src/app/components/GalleryLayout/GalleryGrid.tsx
index 43716dfb6b..8d7dd5cd1f 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryGrid.tsx
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryGrid.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface GalleryGridProps {
+interface GalleryGridProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   minCardWidth?: number;
   className?: string;
@@ -10,10 +10,16 @@ const GalleryGrid: React.FC<GalleryGridProps> = ({
   children,
   minCardWidth = 320,
   className,
+  style,
+  ...gridProps
 }) => (
   <div
+    {...gridProps}
     className={['gallery-grid', className].filter(Boolean).join(' ')}
-    style={{ '--gallery-grid-min': `${minCardWidth}px` } as React.CSSProperties}
+    style={{
+      ...style,
+      '--gallery-grid-min': `${minCardWidth}px`,
+    } as React.CSSProperties}
   >
     {children}
   </div>
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.tsx b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.tsx
index b106399ef1..54d732687e 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.tsx
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import './GalleryLayout.scss';
 
-interface GalleryLayoutProps {
+interface GalleryLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   className?: string;
 }
 
-const GalleryLayout: React.FC<GalleryLayoutProps> = ({ children, className }) => (
-  <div className={['gallery-layout', className].filter(Boolean).join(' ')}>
+const GalleryLayout: React.FC<GalleryLayoutProps> = ({ children, className, ...rootProps }) => (
+  <div {...rootProps} className={['gallery-layout', className].filter(Boolean).join(' ')}>
     <div className="gallery-layout__body">
       <div className="gallery-layout__body-inner">
         {children}
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryZone.tsx b/src/web-ui/src/app/components/GalleryLayout/GalleryZone.tsx
index d022ec2bbd..83da738e93 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryZone.tsx
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryZone.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface GalleryZoneProps {
+interface GalleryZoneProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
   id?: string;
   title: string;
   subtitle?: React.ReactNode;
@@ -16,8 +16,9 @@ const GalleryZone: React.FC<GalleryZoneProps> = ({
   tools,
   children,
   className,
+  ...sectionProps
 }) => (
-  <section id={id} className={['gallery-zone', className].filter(Boolean).join(' ')}>
+  <section {...sectionProps} id={id} className={['gallery-zone', className].filter(Boolean).join(' ')}>
     <div className="gallery-zone__header">
       <div className="gallery-zone__heading">
         <span className="gallery-zone__title">{title}</span>
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index b9e027444d..0ca748e9a6 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -422,6 +422,8 @@ const MainNav: React.FC<MainNavProps> = ({
               role="menuitem"
               title={tooltip}
               onClick={() => { void handleSwitchWorkspace(workspace.id); }}
+              data-testid="nav-workspace-menu-recent-workspace"
+              data-workspace-id={workspace.id}
             >
               <FolderOpen size={13} aria-hidden="true" />
               <span className="bitfun-nav-panel__workspace-menu-item-main">
@@ -464,6 +466,7 @@ const MainNav: React.FC<MainNavProps> = ({
               className="bitfun-nav-panel__search-trigger"
               onClick={() => setSearchOpen(true)}
               aria-label={t('nav.search.triggerTooltip')}
+              data-testid="nav-search-trigger"
             >
               <span className="bitfun-nav-panel__search-trigger__icon" aria-hidden="true">
                 <span className="bitfun-nav-panel__search-trigger__icon-inner">
@@ -487,6 +490,7 @@ const MainNav: React.FC<MainNavProps> = ({
             className="bitfun-nav-panel__top-action-btn"
             onClick={handleCreateCodeSession}
             aria-label={createCodeTooltip}
+            data-testid="nav-new-code-session-btn"
           >
             <span className="bitfun-nav-panel__top-action-icon-circle" aria-hidden="true">
               <Plus size={12} />
@@ -501,6 +505,7 @@ const MainNav: React.FC<MainNavProps> = ({
             className="bitfun-nav-panel__top-action-btn"
             onClick={handleCreateCoworkSession}
             aria-label={createCoworkTooltip}
+            data-testid="nav-new-cowork-session-btn"
           >
             <span className="bitfun-nav-panel__top-action-icon-circle" aria-hidden="true">
               <Plus size={12} />
@@ -515,6 +520,7 @@ const MainNav: React.FC<MainNavProps> = ({
             className={`bitfun-nav-panel__top-action-btn${isAssistantActive ? ' is-active' : ''}`}
             onClick={handleOpenAssistant}
             aria-label={assistantTooltip}
+            data-testid="nav-assistant-btn"
           >
             <span className="bitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
               <User size={15} />
@@ -535,6 +541,7 @@ const MainNav: React.FC<MainNavProps> = ({
               onClick={() => setIsExtensionsOpen(v => !v)}
               aria-expanded={isExtensionsOpen}
               aria-label={extensionsLabel}
+              data-testid="nav-extensions-toggle"
             >
               <span className="bitfun-nav-panel__top-action-expand-icons" aria-hidden="true">
                 <Blocks size={15} className="bitfun-nav-panel__top-action-expand-icon-default" />
@@ -561,6 +568,7 @@ const MainNav: React.FC<MainNavProps> = ({
                 ].filter(Boolean).join(' ')}
                 onClick={handleOpenAgents}
                 aria-label={agentsTooltip}
+                data-testid="nav-agents-btn"
               >
                 <span className="bitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
                   <Users size={15} />
@@ -579,6 +587,7 @@ const MainNav: React.FC<MainNavProps> = ({
                 ].filter(Boolean).join(' ')}
                 onClick={handleOpenSkills}
                 aria-label={skillsTooltip}
+                data-testid="nav-skills-btn"
               >
                 <span className="bitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
                   <Puzzle size={15} />
@@ -591,7 +600,7 @@ const MainNav: React.FC<MainNavProps> = ({
       </div>
 
       {/* ── Sections ────────────────────────────────── */}
-      <div className="bitfun-nav-panel__sections">
+      <div className="bitfun-nav-panel__sections" data-testid="nav-sections">
 
         {/* Assistant sessions */}
         <div className="bitfun-nav-panel__section">
@@ -643,6 +652,7 @@ const MainNav: React.FC<MainNavProps> = ({
                     aria-label={addWorkspaceTooltip}
                     aria-expanded={workspaceMenuOpen}
                     onClick={toggleWorkspaceMenu}
+                    data-testid="nav-workspace-add-btn"
                   >
                     <Plus size="var(--bitfun-nav-row-action-icon-size)" />
                   </button>
@@ -662,7 +672,7 @@ const MainNav: React.FC<MainNavProps> = ({
       </div>
 
       {/* ── Bottom: MiniApp ───────────────────────── */}
-      <div className="bitfun-nav-panel__bottom-bar">
+      <div className="bitfun-nav-panel__bottom-bar" data-testid="nav-bottom-bar">
         <div className="bitfun-nav-panel__miniapp-footer">
           <MiniAppEntry
             isActive={activeTabId === 'miniapps' || !!activeMiniAppId}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
index d5084bb0ff..2fbc40d9af 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
@@ -1031,9 +1031,11 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
               ]
                 .filter(Boolean)
                 .join(' ')}
-              data-testid="session-nav-item"
+              data-testid="nav-session-item"
               data-session-id={session.sessionId}
-              data-session-title={sessionTitle}
+              data-session-kind={relationship.kind}
+              data-session-level={String(level)}
+              data-session-active={isRowActive ? 'true' : 'false'}
               onPointerDown={event => handleSessionOpenPointerDown(event, session)}
               onClick={() => handleSwitch(session.sessionId)}
             >
@@ -1233,7 +1235,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
         <button
           type="button"
           className={`bitfun-nav-panel__inline-toggle${metadataPageState.isLoading ? ' is-loading' : ''}`}
-          data-testid="session-nav-show-more"
+          data-testid="nav-session-list-toggle"
           data-session-nav-toggle-action={expandToggleState.action}
           disabled={metadataPageState.isLoading}
           onClick={() => { void handleExpandToggle(); }}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
index fe7f7d3051..72d3ffe4f3 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
@@ -764,7 +764,11 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
         isSingle && 'is-single',
       ].filter(Boolean).join(' ')}
       aria-current={isActive ? 'location' : undefined}
-      aria-grabbed={draggable ? isDragging : undefined}>
+      aria-grabbed={draggable ? isDragging : undefined}
+      data-testid="nav-workspace-item"
+      data-workspace-id={workspace.id}
+      data-workspace-kind={workspace.workspaceKind}
+      data-workspace-active={isActive ? 'true' : 'false'}>
         <div
           ref={cardRef}
           className="bitfun-nav-panel__assistant-item-card"
@@ -773,6 +777,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
           onDragEnd={onDragEnd}
           onClick={() => { void handleCardNameClick(); }}
           style={{ cursor: 'pointer' }}
+          data-testid="nav-workspace-card"
+          data-workspace-id={workspace.id}
         >
           <button
             type="button"
@@ -780,6 +786,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
             onClick={e => { e.stopPropagation(); handleCollapseToggle(); }}
             aria-label={sessionsCollapsed ? t('nav.workspaces.expandSessions') : t('nav.workspaces.collapseSessions')}
             aria-expanded={!sessionsCollapsed}
+            data-testid="nav-workspace-sessions-toggle"
+            data-workspace-id={workspace.id}
           >
             <span className="bitfun-nav-panel__assistant-item-avatar" aria-hidden="true">
               {isActive ? (
@@ -801,6 +809,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
               type="button"
               className="bitfun-nav-panel__assistant-item-name-btn"
               onClick={e => { e.stopPropagation(); void handleCardNameClick(); }}
+              data-testid="nav-workspace-name-btn"
+              data-workspace-id={workspace.id}
             >
               <span className="bitfun-nav-panel__assistant-item-label">{workspaceDisplayName}</span>
               {isDefaultAssistantWorkspace ? (
@@ -820,6 +830,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 type="button"
                 className="bitfun-nav-panel__assistant-item-menu-trigger"
                 onClick={() => { void handleOpenFiles(); }}
+                data-testid="nav-workspace-files-btn"
+                data-workspace-id={workspace.id}
               >
                 <Folder size="var(--bitfun-nav-row-action-icon-size)" />
               </button>
@@ -829,6 +841,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 type="button"
                 className={`bitfun-nav-panel__assistant-item-menu-trigger${menuOpen ? ' is-open' : ''}`}
                 onClick={handleMenuTriggerClick}
+                data-testid="nav-workspace-menu-btn"
+                data-workspace-id={workspace.id}
               >
                 <MoreHorizontal size="var(--bitfun-nav-row-action-icon-size)" />
               </button>
@@ -840,8 +854,15 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 className="bitfun-nav-panel__workspace-item-menu-popover"
                 role="menu"
                 style={{ top: `${menuPosition.top}px`, left: `${menuPosition.left}px` }}
+                data-testid="nav-workspace-item-menu"
+                data-workspace-id={workspace.id}
               >
-                  <button type="button" className="bitfun-nav-panel__workspace-item-menu-item" onClick={() => { void handleCreateSession(); }}>
+                  <button
+                    type="button"
+                    className="bitfun-nav-panel__workspace-item-menu-item"
+                    onClick={() => { void handleCreateSession(); }}
+                    data-testid="nav-workspace-menu-create-session"
+                  >
                     <Plus size={13} />
                     <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.newSession')}</span>
                   </button>
@@ -856,19 +877,21 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   <div className="bitfun-nav-panel__workspace-item-menu-divider" />
                   <button
                     type="button"
-                  className="bitfun-nav-panel__workspace-item-menu-item"
-                  onClick={() => { void handleCopyWorkspacePath(); }}
-                  disabled={!workspace.rootPath}
-                >
+                    className="bitfun-nav-panel__workspace-item-menu-item"
+                    onClick={() => { void handleCopyWorkspacePath(); }}
+                    disabled={!workspace.rootPath}
+                    data-testid="nav-workspace-menu-copy-path"
+                  >
                   <Copy size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.copyPath')}</span>
                 </button>
-                <button
-                  type="button"
-                  className="bitfun-nav-panel__workspace-item-menu-item"
-                  onClick={() => { void handleReveal(); }}
-                  disabled={isRemoteWorkspace(workspace)}
-                >
+                  <button
+                    type="button"
+                    className="bitfun-nav-panel__workspace-item-menu-item"
+                    onClick={() => { void handleReveal(); }}
+                    disabled={isRemoteWorkspace(workspace)}
+                    data-testid="nav-workspace-menu-reveal"
+                  >
                   <FolderSearch size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.reveal')}</span>
                 </button>
@@ -881,6 +904,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                         className="bitfun-nav-panel__workspace-item-menu-item is-danger"
                         onClick={handleRequestResetWorkspace}
                         disabled={isResettingWorkspace}
+                        data-testid="nav-workspace-menu-reset-assistant"
                       >
                         <RotateCcw size={13} />
                         <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.resetWorkspace')}</span>
@@ -892,6 +916,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                         className="bitfun-nav-panel__workspace-item-menu-item is-danger"
                         onClick={handleRequestDeleteAssistant}
                         disabled={isDeletingAssistant}
+                        data-testid="nav-workspace-menu-delete-assistant"
                       >
                         <Trash2 size={13} />
                         <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.deleteAssistant')}</span>
@@ -905,7 +930,11 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
           </div>
         </div>
 
-        <div className={`bitfun-nav-panel__assistant-item-sessions${sessionsCollapsed ? ' is-collapsed' : ''}`}>
+        <div
+          className={`bitfun-nav-panel__assistant-item-sessions${sessionsCollapsed ? ' is-collapsed' : ''}`}
+          data-testid="nav-workspace-session-region"
+          data-workspace-id={workspace.id}
+        >
           <SessionsSection
             workspaceId={workspace.id}
             workspacePath={workspace.rootPath}
@@ -969,7 +998,11 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
       isSingle && 'is-single',
     ].filter(Boolean).join(' ')}
     aria-current={isActive ? 'location' : undefined}
-    aria-grabbed={draggable ? isDragging : undefined}>
+    aria-grabbed={draggable ? isDragging : undefined}
+    data-testid="nav-workspace-item"
+    data-workspace-id={workspace.id}
+    data-workspace-kind={workspace.workspaceKind}
+    data-workspace-active={isActive ? 'true' : 'false'}>
       <div
         ref={cardRef}
         className="bitfun-nav-panel__workspace-item-card"
@@ -978,6 +1011,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
         onDragEnd={onDragEnd}
         onClick={() => { void handleCardNameClick(); }}
         style={{ cursor: 'pointer' }}
+        data-testid="nav-workspace-card"
+        data-workspace-id={workspace.id}
       >
         <button
           type="button"
@@ -985,6 +1020,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
           onClick={e => { e.stopPropagation(); handleCollapseToggle(); }}
           aria-label={sessionsCollapsed ? t('nav.workspaces.expandSessions') : t('nav.workspaces.collapseSessions')}
           aria-expanded={!sessionsCollapsed}
+          data-testid="nav-workspace-sessions-toggle"
+          data-workspace-id={workspace.id}
         >
           <span className="bitfun-nav-panel__workspace-item-icon" aria-hidden="true">
             <span className="bitfun-nav-panel__workspace-item-icon-default">
@@ -1009,6 +1046,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   type="button"
                   className="bitfun-nav-panel__workspace-item-name-btn"
                   onClick={e => { e.stopPropagation(); void handleCardNameClick(); }}
+                  data-testid="nav-workspace-name-btn"
+                  data-workspace-id={workspace.id}
                 >
                   <span className="bitfun-nav-panel__workspace-item-name-line">
                     <span className="bitfun-nav-panel__workspace-item-label">{workspaceDisplayName}</span>
@@ -1040,6 +1079,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                         e.stopPropagation();
                         setSearchIndexModalOpen(true);
                       }}
+                      data-testid="nav-workspace-search-index-btn"
+                      data-workspace-id={workspace.id}
                     />
                   </Tooltip>
                   <Modal
@@ -1152,6 +1193,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 type="button"
                 className="bitfun-nav-panel__workspace-item-menu-trigger"
                 onClick={() => { void handleOpenFiles(); }}
+                data-testid="nav-workspace-files-btn"
+                data-workspace-id={workspace.id}
               >
                 <Folder size="var(--bitfun-nav-row-action-icon-size)" />
               </button>
@@ -1161,6 +1204,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 type="button"
                 className={`bitfun-nav-panel__workspace-item-menu-trigger${menuOpen ? ' is-open' : ''}`}
                 onClick={handleMenuTriggerClick}
+                data-testid="nav-workspace-menu-btn"
+                data-workspace-id={workspace.id}
               >
                 <MoreHorizontal size="var(--bitfun-nav-row-action-icon-size)" />
               </button>
@@ -1172,12 +1217,24 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 className="bitfun-nav-panel__workspace-item-menu-popover"
                 role="menu"
                 style={{ top: `${menuPosition.top}px`, left: `${menuPosition.left}px` }}
+                data-testid="nav-workspace-item-menu"
+                data-workspace-id={workspace.id}
               >
-                <button type="button" className="bitfun-nav-panel__workspace-item-menu-item" onClick={handleCreateCodeSession}>
+                <button
+                  type="button"
+                  className="bitfun-nav-panel__workspace-item-menu-item"
+                  onClick={handleCreateCodeSession}
+                  data-testid="nav-workspace-menu-create-code-session"
+                >
                   <Plus size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('shared:agents.code')}</span>
                 </button>
-                <button type="button" className="bitfun-nav-panel__workspace-item-menu-item" onClick={handleCreateCoworkSession}>
+                <button
+                  type="button"
+                  className="bitfun-nav-panel__workspace-item-menu-item"
+                  onClick={handleCreateCoworkSession}
+                  data-testid="nav-workspace-menu-create-cowork-session"
+                >
                   <Plus size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('shared:agents.cowork')}</span>
                 </button>
@@ -1189,6 +1246,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                       type="button"
                       className="bitfun-nav-panel__workspace-item-menu-item"
                       onClick={() => { void handleCreateAcpSession(client); }}
+                      data-testid="nav-workspace-menu-create-acp-session"
+                      data-acp-client-id={client.id}
                     >
                       <Bot size={13} />
                       <span className="bitfun-nav-panel__workspace-item-menu-label">
@@ -1207,7 +1266,12 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                     <span className="bitfun-nav-panel__workspace-item-menu-label">{t('app.loading')}</span>
                   </button>
                 ) : null}
-                <button type="button" className="bitfun-nav-panel__workspace-item-menu-item" onClick={() => { void handleCreateInitSession(); }}>
+                <button
+                  type="button"
+                  className="bitfun-nav-panel__workspace-item-menu-item"
+                  onClick={() => { void handleCreateInitSession(); }}
+                  data-testid="nav-workspace-menu-create-init-session"
+                >
                   <FileText size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.initAgents')}</span>
                 </button>
@@ -1218,6 +1282,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                     setMenuOpen(false);
                     setRelatedPathsDialogOpen(true);
                   }}
+                  data-testid="nav-workspace-menu-related-paths"
                 >
                   <Link2 size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">
@@ -1239,6 +1304,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                     className="bitfun-nav-panel__workspace-item-menu-item is-danger"
                     onClick={handleRequestDeleteWorktree}
                     disabled={isDeletingWorktree}
+                    data-testid="nav-workspace-menu-delete-worktree"
                   >
                     <Trash2 size={13} />
                     <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.deleteWorktree')}</span>
@@ -1252,6 +1318,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                       setWorktreeModalOpen(true);
                     }}
                     disabled={isWorktreeActionDisabled}
+                    data-testid="nav-workspace-menu-new-worktree"
                   >
                     {isGitBasicInfoLoading ? <Loader2 size={13} /> : <GitBranch size={13} />}
                     <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.newWorktree')}</span>
@@ -1262,6 +1329,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   className="bitfun-nav-panel__workspace-item-menu-item"
                   onClick={() => { void handleCopyWorkspacePath(); }}
                   disabled={!workspace.rootPath}
+                  data-testid="nav-workspace-menu-copy-path"
                 >
                   <Copy size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.copyPath')}</span>
@@ -1271,6 +1339,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   className="bitfun-nav-panel__workspace-item-menu-item"
                   onClick={() => { void handleReveal(); }}
                   disabled={isRemoteWorkspace(workspace)}
+                  data-testid="nav-workspace-menu-reveal"
                 >
                   <FolderSearch size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.reveal')}</span>
@@ -1284,7 +1353,12 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   <ListChecks size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.sessions.manage')}</span>
                 </button>
-                <button type="button" className="bitfun-nav-panel__workspace-item-menu-item is-danger" onClick={() => { void handleCloseWorkspace(); }}>
+                <button
+                  type="button"
+                  className="bitfun-nav-panel__workspace-item-menu-item is-danger"
+                  onClick={() => { void handleCloseWorkspace(); }}
+                  data-testid="nav-workspace-menu-close"
+                >
                   <FolderOpen size={13} />
                   <span className="bitfun-nav-panel__workspace-item-menu-label">{t('nav.workspaces.actions.close')}</span>
                 </button>
@@ -1295,7 +1369,11 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
         </div>
       </div>
 
-      <div className={`bitfun-nav-panel__workspace-item-sessions${sessionsCollapsed ? ' is-collapsed' : ''}`}>
+      <div
+        className={`bitfun-nav-panel__workspace-item-sessions${sessionsCollapsed ? ' is-collapsed' : ''}`}
+        data-testid="nav-workspace-session-region"
+        data-workspace-id={workspace.id}
+      >
         <SessionsSection
           workspaceId={workspace.id}
           workspacePath={workspace.rootPath}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.tsx
index 4d1fcbdbde..b4bd125de9 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.tsx
@@ -152,9 +152,17 @@ const WorkspaceListSection: React.FC<WorkspaceListSectionProps> = ({ variant })
   }, [reorderOpenedWorkspacesInSection, t, variant]);
 
   return (
-    <div className={`bitfun-nav-panel__workspace-list${draggedWorkspaceId ? ' is-dragging' : ''}`}>
+    <div
+      className={`bitfun-nav-panel__workspace-list${draggedWorkspaceId ? ' is-dragging' : ''}`}
+      data-testid="nav-workspace-list"
+      data-workspace-list={variant}
+    >
       {workspaces.length === 0 ? (
-        <div className="bitfun-nav-panel__workspace-list-empty">
+        <div
+          className="bitfun-nav-panel__workspace-list-empty"
+          data-testid="nav-workspace-list-empty"
+          data-workspace-list={variant}
+        >
           {emptyLabel}
         </div>
       ) : (
@@ -168,6 +176,9 @@ const WorkspaceListSection: React.FC<WorkspaceListSectionProps> = ({ variant })
               dropTarget?.workspaceId === workspace.id && dropTarget.position === 'before' && 'is-before',
               dropTarget?.workspaceId === workspace.id && dropTarget.position === 'after' && 'is-after',
             ].filter(Boolean).join(' ')}
+            data-testid="nav-workspace-drop-target"
+            data-workspace-id={workspace.id}
+            data-workspace-list={variant}
             onDragOver={handleDragOver(workspace.id)}
             onDragLeave={handleDragLeave(workspace.id)}
             onDrop={(event) => { void handleDrop(workspace.id)(event); }}
diff --git a/src/web-ui/src/app/scenes/SceneViewport.tsx b/src/web-ui/src/app/scenes/SceneViewport.tsx
index 113df8b6a7..369f4bdb30 100644
--- a/src/web-ui/src/app/scenes/SceneViewport.tsx
+++ b/src/web-ui/src/app/scenes/SceneViewport.tsx
@@ -49,8 +49,11 @@ const SceneViewport: React.FC<SceneViewportProps> = ({ workspacePath, isEntering
   // All tabs closed — show empty state
   if (openTabs.length === 0) {
     return (
-      <div className="bitfun-scene-viewport">
-        <div className="bitfun-scene-viewport__clip bitfun-scene-viewport__clip--empty">
+      <div className="bitfun-scene-viewport" data-testid="scene-viewport">
+        <div
+          className="bitfun-scene-viewport__clip bitfun-scene-viewport__clip--empty"
+          data-testid="scene-viewport-empty"
+        >
           <p className="bitfun-scene-viewport__empty-hint">{t('welcomeScene.emptyHint')}</p>
         </div>
       </div>
@@ -58,8 +61,8 @@ const SceneViewport: React.FC<SceneViewportProps> = ({ workspacePath, isEntering
   }
 
   return (
-    <div className="bitfun-scene-viewport">
-      <div className="bitfun-scene-viewport__clip">
+    <div className="bitfun-scene-viewport" data-testid="scene-viewport">
+      <div className="bitfun-scene-viewport__clip" data-testid="scene-viewport-clip">
         {openTabs.map(tab => {
           const isActive = tab.id === activeTabId;
           return (
@@ -70,6 +73,9 @@ const SceneViewport: React.FC<SceneViewportProps> = ({ workspacePath, isEntering
                 isActive && 'bitfun-scene-viewport__scene--active',
               ].filter(Boolean).join(' ')}
               aria-hidden={!isActive}
+              data-testid="scene-viewport-scene"
+              data-scene-id={tab.id}
+              data-scene-active={isActive ? 'true' : 'false'}
             >
               <Suspense
                 fallback={
diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
index 1d84bc806e..04bf54bf65 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -556,7 +556,7 @@ const AgentsHomeView: React.FC = () => {
   );
 
   return (
-    <GalleryLayout className="bitfun-agents-scene">
+    <GalleryLayout className="bitfun-agents-scene" data-testid="agents-scene">
       <GalleryPageHeader
         title={t('page.title')}
         subtitle={t('page.subtitle')}
@@ -566,6 +566,7 @@ const AgentsHomeView: React.FC = () => {
               type="button"
               className="gallery-anchor-btn"
               onClick={() => scrollToZone('core-agents-zone')}
+              data-testid="agents-anchor-core"
             >
               {t('nav.coreAgents')}
             </button>
@@ -573,6 +574,7 @@ const AgentsHomeView: React.FC = () => {
               type="button"
               className="gallery-anchor-btn"
               onClick={() => scrollToZone('teams-zone')}
+              data-testid="agents-anchor-teams"
             >
               {t('nav.teams')}
             </button>
@@ -580,6 +582,7 @@ const AgentsHomeView: React.FC = () => {
               type="button"
               className="gallery-anchor-btn"
               onClick={() => scrollToZone('agents-zone')}
+              data-testid="agents-anchor-custom"
             >
               {t('nav.agents')}
             </button>
@@ -599,6 +602,7 @@ const AgentsHomeView: React.FC = () => {
                   type="button"
                   className="gallery-search-btn"
                   aria-label={t('page.searchPlaceholder')}
+                  data-testid="agents-search-btn"
                 >
                   <SearchIcon size={14} />
                 </button>
@@ -608,9 +612,10 @@ const AgentsHomeView: React.FC = () => {
         )}
       />
 
-      <div className="gallery-zones">
+      <div className="gallery-zones" data-testid="agents-zones">
         <GalleryZone
           id="core-agents-zone"
+          data-testid="agents-core-zone"
           title={t('coreAgentsZone.title')}
           subtitle={t('coreAgentsZone.subtitle')}
           tools={(
@@ -648,6 +653,7 @@ const AgentsHomeView: React.FC = () => {
 
         <GalleryZone
           id="teams-zone"
+          data-testid="agents-teams-zone"
           title={t('teamsZone.title')}
           subtitle={t('teamsZone.subtitle')}
           tools={(
@@ -656,6 +662,7 @@ const AgentsHomeView: React.FC = () => {
                 type="button"
                 className="gallery-action-btn"
                 onClick={openReviewTeam}
+                data-testid="agents-review-team-configure-btn"
               >
                 <ShieldCheck size={15} />
                 <span>{t('reviewTeams.detail.open')}</span>
@@ -691,6 +698,7 @@ const AgentsHomeView: React.FC = () => {
 
         <GalleryZone
           id="agents-zone"
+          data-testid="agents-custom-zone"
           title={t('agentsZone.title')}
           subtitle={t('agentsZone.subtitle')}
           tools={(
@@ -709,6 +717,8 @@ const AgentsHomeView: React.FC = () => {
                         agentFilterLevel === key && 'gallery-cat-chip--active',
                       ].filter(Boolean).join(' ')}
                       onClick={() => setAgentFilterLevel(agentFilterLevel === key ? 'all' : key)}
+                      data-testid="agents-source-filter"
+                      data-agent-source={key}
                     >
                       <span>{label}</span>
                       <span className="gallery-filter-count">{count}</span>
@@ -728,6 +738,8 @@ const AgentsHomeView: React.FC = () => {
                         agentFilterType === key && 'gallery-cat-chip--active',
                       ].filter(Boolean).join(' ')}
                       onClick={() => setAgentFilterType(agentFilterType === key ? 'all' : key)}
+                      data-testid="agents-kind-filter"
+                      data-agent-kind={key}
                     >
                       <span>{label}</span>
                       <span className="gallery-filter-count">{count}</span>
@@ -739,6 +751,7 @@ const AgentsHomeView: React.FC = () => {
                 type="button"
                 className="gallery-action-btn gallery-action-btn--primary"
                 onClick={openCreateAgent}
+                data-testid="agents-create-agent-btn"
               >
                 <Plus size={15} />
                 <span>{t('page.newAgent')}</span>
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
index 9bf0936018..6e6c75d01f 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
@@ -51,6 +51,10 @@ const AgentCard: React.FC<AgentCardProps> = ({
       tabIndex={0}
       onKeyDown={(e) => e.key === 'Enter' && openDetails()}
       aria-label={agent.name}
+      data-testid="agents-agent-card"
+      data-agent-id={agent.id}
+      data-agent-kind={agent.agentKind}
+      data-subagent-source={agent.subagentSource ?? ''}
     >
       {/* Header: icon + name */}
       <div className="agent-card__header">
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentTeamCard.tsx b/src/web-ui/src/app/scenes/agents/components/AgentTeamCard.tsx
index a5bb1fffd9..16ebe32f98 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentTeamCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/AgentTeamCard.tsx
@@ -4,6 +4,7 @@ import { AGENT_TEAM_TAG_COLORS } from '../agentTheme';
 import './AgentTeamCard.scss';
 
 interface AgentTeamCardProps {
+  teamId?: string;
   index?: number;
   title: string;
   subtitle: string;
@@ -13,6 +14,7 @@ interface AgentTeamCardProps {
 }
 
 const AgentTeamCard: React.FC<AgentTeamCardProps> = ({
+  teamId,
   index = 0,
   title,
   subtitle,
@@ -33,6 +35,8 @@ const AgentTeamCard: React.FC<AgentTeamCardProps> = ({
         }
       }}
       aria-label={title}
+      data-testid="agents-team-card"
+      data-team-id={teamId ?? ''}
     >
       <div className="agent-team-card__header">
         <div className="agent-team-card__icon">
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
index c4ae064244..a63ecea5ad 100644
--- a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
@@ -61,6 +61,9 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
       tabIndex={0}
       onKeyDown={(e) => e.key === 'Enter' && openDetails()}
       aria-label={agent.name}
+      data-testid="agents-core-agent-card"
+      data-agent-id={agent.id}
+      data-agent-kind={agent.agentKind}
     >
       <div className="core-agent-card__top">
         <div className="core-agent-card__icon-wrap">
diff --git a/src/web-ui/src/app/scenes/session/ChatPane.tsx b/src/web-ui/src/app/scenes/session/ChatPane.tsx
index 53129a72da..9b9a92c6cf 100644
--- a/src/web-ui/src/app/scenes/session/ChatPane.tsx
+++ b/src/web-ui/src/app/scenes/session/ChatPane.tsx
@@ -142,6 +142,7 @@ const ChatPaneInner: React.FC<ChatPaneProps> = ({
       className="bitfun-chat-pane__content"
       data-shortcut-scope="chat"
       data-fullscreen={isFullscreen}
+      data-testid="chat-pane"
     >
       <FlowChatContainer
         className="bitfun-chat-pane__chat-container"
diff --git a/src/web-ui/src/app/scenes/session/SessionScene.tsx b/src/web-ui/src/app/scenes/session/SessionScene.tsx
index efb4535b7d..5a6aafeba2 100644
--- a/src/web-ui/src/app/scenes/session/SessionScene.tsx
+++ b/src/web-ui/src/app/scenes/session/SessionScene.tsx
@@ -504,12 +504,14 @@ const SessionScene: React.FC<SessionSceneProps> = ({
         isEntering && 'layout-entering',
       ].filter(Boolean).join(' ')}
       style={panelCollapseHintStyles}
+      data-testid="session-scene"
     >
       <div className="bitfun-session-scene__main-row">
         {/* ChatPane — FlowChat conversation */}
         {!isChatHidden && (
           <div
             className={`bitfun-session-scene__chat-pane ${isDragging ? 'bitfun-session-scene__chat-pane--dragging' : ''}`}
+            data-testid="session-chat-pane"
           >
             <ChatPane
               width={0}
@@ -543,6 +545,7 @@ const SessionScene: React.FC<SessionSceneProps> = ({
             aria-valuemin={RIGHT_PANEL_CONFIG.COMPACT_WIDTH}
             aria-valuemax={RIGHT_PANEL_CONFIG.MAX_WIDTH}
             title={t('layout.resizer.title', { mode: panelModeLabels[rightPanelMode] })}
+            data-testid="session-right-pane-resizer"
           >
             <div className="bitfun-pane-resizer__line" />
             <div className="bitfun-pane-resizer__handle">
@@ -574,6 +577,7 @@ const SessionScene: React.FC<SessionSceneProps> = ({
               : isRightAsMain ? undefined : `${currentRightWidth}px`,
           }}
           data-mode={rightPanelMode}
+          data-testid="session-aux-pane"
           onTransitionEnd={handleRightPanelTransitionEnd}
         >
           <AuxPane
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
index b19168c80e..bff94589b0 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
@@ -668,6 +668,7 @@ const SkillsScene: React.FC = () => {
                   className="bitfun-skills-scene__detail-path-btn"
                   title={t('list.item.openPathInExplorer')}
                   onClick={() => void handleRevealSkillPath(selectedInstalledSkill.path)}
+                  data-testid="skills-detail-path-btn"
                 >
                   {selectedInstalledSkill.path}
                 </button>
@@ -700,6 +701,7 @@ const SkillsScene: React.FC = () => {
               target="_blank"
               rel="noreferrer"
               className="bitfun-skills-scene__detail-link"
+              data-testid="skills-detail-external-link"
             >
               {selectedMarketSkill.url}
             </a>
diff --git a/src/web-ui/src/app/scenes/skills/components/SkillCard.tsx b/src/web-ui/src/app/scenes/skills/components/SkillCard.tsx
index e54c45782f..4c6dc54881 100644
--- a/src/web-ui/src/app/scenes/skills/components/SkillCard.tsx
+++ b/src/web-ui/src/app/scenes/skills/components/SkillCard.tsx
@@ -15,7 +15,7 @@ export interface SkillCardAction {
   onClick: () => void;
 }
 
-interface SkillCardProps {
+interface SkillCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   name: string;
   description?: string;
   index?: number;
@@ -37,14 +37,19 @@ const SkillCard: React.FC<SkillCardProps> = ({
   meta,
   actions = [],
   onOpenDetails,
+  className,
+  style,
+  ...rootProps
 }) => {
   const Icon = iconKind === 'market' ? Package : Puzzle;
   const openDetails = () => onOpenDetails?.();
 
   return (
     <div
-      className="skill-card"
+      {...rootProps}
+      className={['skill-card', className].filter(Boolean).join(' ')}
       style={{
+        ...style,
         '--surface-stagger-index': index,
         '--skill-card-gradient': getCardGradient(accentSeed ?? name),
       } as React.CSSProperties}
@@ -103,6 +108,8 @@ const SkillCard: React.FC<SkillCardProps> = ({
                 disabled={action.disabled}
                 aria-label={action.ariaLabel}
                 title={action.title ?? action.ariaLabel}
+                data-testid="skills-card-action"
+                data-skill-action={action.id}
               >
                 {action.icon}
               </button>
diff --git a/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx b/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
index a2e7c1b0ff..b4d930f310 100644
--- a/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
+++ b/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
@@ -70,7 +70,7 @@ const WelcomeScene: React.FC = () => {
     } finally {
       setIsSelecting(false);
     }
-  }, [openWorkspace, openScene, t]);
+  }, [openWorkspace, openScene]);
 
   const handleNewProject = useCallback(() => {
     window.dispatchEvent(new Event('nav:new-project'));
@@ -109,7 +109,7 @@ const WelcomeScene: React.FC = () => {
   }, [formatLocaleDate, t]);
 
   return (
-    <div className="welcome-scene">
+    <div className="welcome-scene" data-testid="welcome-scene">
       <div className="welcome-scene__content">
         <div className="welcome-scene__greeting">
           <h1 className="welcome-scene__title">{t('welcomeScene.firstTime.title')}</h1>
@@ -129,11 +129,16 @@ const WelcomeScene: React.FC = () => {
                 className="welcome-scene__link-btn"
                 onClick={() => void handleOpenFolder()}
                 disabled={isSelecting}
+                data-testid="welcome-open-project-btn"
               >
                 <FolderOpen size={12} />
                 {t('welcomeScene.openOtherProject')}
               </button>
-              <button className="welcome-scene__link-btn" onClick={handleNewProject}>
+              <button
+                className="welcome-scene__link-btn"
+                onClick={handleNewProject}
+                data-testid="welcome-new-project-btn"
+              >
                 <FolderPlus size={12} />
                 {t('welcomeScene.newProject')}
               </button>
@@ -141,16 +146,23 @@ const WelcomeScene: React.FC = () => {
           </div>
 
           {displayRecentWorkspaces.length > 0 ? (
-            <div className="welcome-scene__recent-list">
+            <div className="welcome-scene__recent-list" data-testid="welcome-recent-workspace-list">
               {displayRecentWorkspaces.map(ws => {
                 const { hostPrefix, folderLabel, tooltip } = getRecentWorkspaceLineParts(ws);
                 return (
-                <div key={ws.id} className="welcome-scene__recent-row">
+                <div
+                  key={ws.id}
+                  className="welcome-scene__recent-row"
+                  data-testid="welcome-recent-workspace-row"
+                  data-workspace-id={ws.id}
+                >
                   <Tooltip content={tooltip} placement="right" followCursor>
                     <button
                       type="button"
                       className="welcome-scene__recent-item"
                       onClick={() => { void handleSwitchWorkspace(ws); }}
+                      data-testid="welcome-recent-workspace-open"
+                      data-workspace-id={ws.id}
                     >
                       <FolderOpen size={13} />
                       <span className="welcome-scene__recent-name">
@@ -172,6 +184,8 @@ const WelcomeScene: React.FC = () => {
                     title={t('welcomeScene.removeFromRecent')}
                     aria-label={t('welcomeScene.removeFromRecent')}
                     onClick={() => { void handleRemoveFromRecent(ws.id); }}
+                    data-testid="welcome-recent-workspace-remove"
+                    data-workspace-id={ws.id}
                   >
                     <span className="welcome-scene__recent-time-btn__label">
                       {formatDate(ws.lastAccessed)}
@@ -185,7 +199,9 @@ const WelcomeScene: React.FC = () => {
               })}
             </div>
           ) : (
-            <p className="welcome-scene__no-recent">{t('welcomeScene.noRecentWorkspaces')}</p>
+            <p className="welcome-scene__no-recent" data-testid="welcome-recent-workspace-empty">
+              {t('welcomeScene.noRecentWorkspaces')}
+            </p>
           )}
         </section>
 
diff --git a/src/web-ui/src/component-library/components/Search/Search.tsx b/src/web-ui/src/component-library/components/Search/Search.tsx
index e380e7434c..745f5a0d44 100644
--- a/src/web-ui/src/component-library/components/Search/Search.tsx
+++ b/src/web-ui/src/component-library/components/Search/Search.tsx
@@ -65,7 +65,7 @@ function LoadingGlyph() {
   );
 }
 
-export interface SearchProps {
+export interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown'> {
   value?: string;
   defaultValue?: string;
   placeholder?: string;
@@ -125,6 +125,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(({
   inputAriaLabel,
   ariaControls,
   ariaExpanded,
+  ...rootProps
 }, ref) => {
   const { t } = useI18n('components');
   
@@ -225,7 +226,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(({
     .join(' ');
 
   return (
-    <div className={classNames}>
+    <div {...rootProps} className={classNames}>
       <div 
         className="search__wrapper"
         onMouseEnter={() => setIsHovered(true)}
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 8566d6ec02..67ca399000 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
@@ -1378,6 +1378,8 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
         ref={chatScopeRef}
         className={`modern-flowchat-container flow-chat-typography ${className}`}
         data-shortcut-scope="chat"
+        data-testid="flowchat-container"
+        data-session-id={activeSession?.sessionId ?? ''}
       >
         <FlowChatHeader
           currentTurn={effectiveVisibleTurnInfo?.turnIndex ?? 0}
@@ -1423,6 +1425,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
 
         <div
           className="modern-flowchat-container__messages"
+          data-testid="flowchat-messages"
           data-active-session-id={activeSession?.sessionId ?? ''}
           data-history-state={historyState ?? 'none'}
           data-context-restore-state={activeSession?.contextRestoreState ?? 'none'}
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 66dd96e60e..731d015e1d 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
@@ -4126,7 +4126,10 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef>((_, ref) =>
 
   if (virtualItems.length === 0) {
     return (
-      <div className="virtual-message-list virtual-message-list--empty">
+      <div
+        className="virtual-message-list virtual-message-list--empty"
+        data-testid="flowchat-message-list-empty"
+      >
         <div className="empty-state">
           <p>No messages yet</p>
         </div>
@@ -4137,6 +4140,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef>((_, ref) =>
   return (
     <div
       className="virtual-message-list"
+      data-testid="flowchat-message-list"
     >
       {useStaticInitialHistoryList ? (
         <div

From b860a4b8a49ed4e4a7abe80680eed31a42b47cbf Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 9 Jun 2026 20:02:15 +0800
Subject: [PATCH 03/13] test: add model config UI test ids

---
 docs/development/ui-testids-CN.md             | 304 ++++++++++++++++++
 docs/development/ui-testids.md                |  20 +-
 .../components/Select/Select.tsx              |   9 +-
 .../flow_chat/components/ModelSelector.tsx    |  31 +-
 .../config/components/AIModelConfig.tsx       |  39 ++-
 .../common/ConfigCollectionItem.tsx           |   4 +-
 6 files changed, 396 insertions(+), 11 deletions(-)
 create mode 100644 docs/development/ui-testids-CN.md

diff --git a/docs/development/ui-testids-CN.md b/docs/development/ui-testids-CN.md
new file mode 100644
index 0000000000..2612f9ae47
--- /dev/null
+++ b/docs/development/ui-testids-CN.md
@@ -0,0 +1,304 @@
+[English](ui-testids.md) | **中文**
+
+# UI Test IDs
+
+本文档记录 BitFun UI 自动化使用的稳定 `data-testid` 值。
+测试 ID 按产品区域分组，只应在自动化流程确实需要稳定定位点时添加。
+
+规则：
+
+- `data-testid` 只能作为测试定位器使用。不要让产品逻辑依赖它。
+- 优先标记真实可交互元素：`button`、`input`、可编辑区域或对话框根节点。
+- `data-testid` 必须保持稳定、小写，并使用连字符分隔。
+- 对重复项使用一个共享 `data-testid`，再配合稳定的 `data-*` 属性区分。
+- 不要把可见文案、CSS class、坐标、截图或 XPath 路径作为主定位方式。
+- 优先在配套 `data-*` 属性中使用稳定产品标识，例如 `data-workspace-id`、`data-session-id`、`data-agent-id`、`data-skill-key` 或 `data-settings-tab`。
+
+## 覆盖规划
+
+### 必须补
+
+这些区域是 UI 自动化的高价值入口。在新增或扩展跨平台 pytest 用例前，
+应优先提供稳定 ID。
+
+| 区域 | 范围 | 原因 |
+|---|---|---|
+| App shell | App 根节点、主内容区、场景视口 | App 加载和路由就绪锚点。 |
+| Navigation | 顶部动作、底部菜单、工作区菜单、工作区行、会话行 | 打开设置、会话、项目、Agents、Skills 和工作区级动作的主路径。 |
+| Welcome scene | 场景根节点、打开/新建项目按钮、最近工作区列表 | OH 当前默认启动后会落在这里。 |
+| Notifications | 通知按钮、通知中心根节点、关闭按钮、活动区块 | 当前 smoke 覆盖和异步任务可见性。 |
+| Settings | 场景根节点、导航 tab、活动内容 | 当前 smoke 覆盖和后续配置测试。 |
+| Session and Flow Chat | Session 场景、聊天/辅助面板、消息列表、输入区 | 会话创建稳定后的核心产品路径。 |
+| Agents and Skills | 场景根节点、区域/tab、过滤器、卡片、关键动作 | Agent 设置和技能市场流程的高价值入口。 |
+
+### 可选补
+
+这些区域等到有具体测试需要时再补。
+
+| 区域 | 范围 | 原因 |
+|---|---|---|
+| Deep Review / BTW 详情面板 | Review 操作栏、评审成员详情、报告导出动作 | 对深入行为测试有价值，但不是 app smoke 必需。 |
+| Tool cards | 特定 approve/retry/open-detail 控件 | 按具体工具流程添加，不要给每个渲染字段都打点。 |
+| File、Git、Terminal、Browser 面板 | 面板根节点、主工具栏动作、选中列表行 | 等面板专项 pytest 覆盖出现后再补。 |
+| Settings 表单控件 | 具体模型/Provider 字段、保存/重置按钮 | 配置测试需要时添加；避免标记每个展示型 label。 |
+| Mini apps | Gallery 根节点、app 卡片、runner 根节点 | 等 Mini App 流程进入自动化计划后再补。 |
+
+### 不建议补
+
+除非有明确自动化流程，否则避免给这些对象添加 ID。
+
+| 范围 | 原因 |
+|---|---|
+| 装饰图标、徽章、计数器、阴影、动画 | 不是有意义的交互或状态锚点。 |
+| 每个文本节点、段落和静态 label | 增加维护成本，并且重复绑定 i18n 可见文案。 |
+| 生成的 markdown/code 内容和模型输出 span | 输出是动态的，应通过更高层状态断言。 |
+| 坐标、canvas 像素、仅截图可见标记或原生窗口控件 | 跨平台 WebView 自动化应保持基于 DOM 和 `data-testid`。 |
+| 把本地化文案复制到 `data-testid` 或作为主定位方式 | 文案或语言切换会导致定位失效。 |
+
+## 命名
+
+- 使用区域前缀：`app-*`、`scene-*`、`nav-*`、`welcome-*`、`settings-*`、`notification-*`、`session-*`、`chat-*`、`flowchat-*`、`agents-*`、`skills-*`。
+- 按动作给按钮加后缀：`*-btn`、`*-toggle`、`*-open`、`*-close`、`*-submit`、`*-cancel`、`*-delete`。
+- 按结构给容器加后缀：`*-scene`、`*-panel`、`*-list`、`*-grid`、`*-menu`、`*-content`、`*-zone`。
+- 对重复行/卡片，复用一个 `data-testid` 并搭配稳定属性，例如：
+  - `nav-workspace-item` + `data-workspace-id`
+  - `nav-session-item` + `data-session-id`
+  - `settings-nav-tab` + `data-settings-tab`
+  - `agents-agent-card` + `data-agent-id`
+  - `skills-installed-card` + `data-skill-key`
+  - `skills-market-card` + `data-skill-install-id`
+
+## App Shell
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| App 布局根节点 | `app-layout` | App 加载完成锚点。 |
+| 主内容区 | `app-main-content` | 主场景内容容器。 |
+| 导航面板 | `nav-panel` | 左侧导航容器。 |
+| 场景视口根节点 | `scene-viewport` | 场景宿主根节点。 |
+| 场景视口裁剪区 | `scene-viewport-clip` | 已挂载场景的裁剪区域。 |
+| 空场景视口 | `scene-viewport-empty` | 没有打开 tab 时渲染。 |
+| 已挂载场景 wrapper | `scene-viewport-scene` | 重复项。配合 `data-scene-id` 和 `data-scene-active` 使用。 |
+
+## Welcome
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| Welcome 场景根节点 | `welcome-scene` | 默认启动场景锚点。 |
+| 打开项目按钮 | `welcome-open-project-btn` | 打开文件/文件夹选择器。 |
+| 新建项目按钮 | `welcome-new-project-btn` | 打开新建项目流程。 |
+| 最近工作区列表 | `welcome-recent-workspace-list` | 有最近工作区时存在。 |
+| 最近工作区行 | `welcome-recent-workspace-row` | 重复项。配合 `data-workspace-id` 使用。 |
+| 最近工作区打开按钮 | `welcome-recent-workspace-open` | 重复项。配合 `data-workspace-id` 使用。 |
+| 最近工作区移除按钮 | `welcome-recent-workspace-remove` | 重复项。配合 `data-workspace-id` 使用。 |
+| 最近工作区空状态 | `welcome-recent-workspace-empty` | 没有最近工作区时存在。 |
+
+## Navigation
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| 导航搜索触发按钮 | `nav-search-trigger` | 打开导航搜索。 |
+| 新建 Code 会话按钮 | `nav-new-code-session-btn` | 为活动项目工作区创建或打开 code 会话。 |
+| 新建 Cowork 会话按钮 | `nav-new-cowork-session-btn` | 为活动项目工作区创建或打开 cowork 会话。 |
+| Assistant 按钮 | `nav-assistant-btn` | 打开 assistant/persona 场景。 |
+| Extensions 展开按钮 | `nav-extensions-toggle` | 展开 Agents/Skills 入口。 |
+| Agents 按钮 | `nav-agents-btn` | 打开 Agents 场景。 |
+| Skills 按钮 | `nav-skills-btn` | 打开 Skills 场景。 |
+| 导航 sections 容器 | `nav-sections` | 工作区/会话 section 容器。 |
+| 导航底部栏 | `nav-bottom-bar` | Mini App/footer 区域容器。 |
+| 底部更多按钮 | `nav-footer-more-btn` | 打开底部溢出菜单。 |
+| 底部菜单 | `nav-footer-menu` | 由底部更多按钮打开的溢出菜单。 |
+| 底部设置菜单项 | `nav-footer-settings-item` | 从底部菜单打开 Settings 场景。 |
+| 底部 Shell 按钮 | `nav-footer-shell-btn` | 打开或关闭 shell 场景导航。 |
+| 底部 Browser 按钮 | `nav-footer-browser-btn` | 根据当前上下文打开 browser 场景或 browser 面板。 |
+
+## Navigation Workspaces
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| 工作区添加按钮 | `nav-workspace-add-btn` | 打开工作区添加/最近工作区菜单。 |
+| 工作区添加菜单 | `nav-workspace-menu` | 从添加按钮打开的 portal 菜单。 |
+| 工作区菜单打开项目 | `nav-workspace-menu-open-project` | 打开项目选择器。 |
+| 工作区菜单新建项目 | `nav-workspace-menu-new-project` | 打开新建项目流程。 |
+| 工作区菜单远程 SSH | `nav-workspace-menu-remote-ssh` | 打开 SSH 远程连接流程。 |
+| 工作区菜单最近工作区 | `nav-workspace-menu-recent-workspace` | 重复项。配合 `data-workspace-id` 使用。 |
+| 工作区列表 | `nav-workspace-list` | 按列表类型重复。配合 `data-workspace-list` 使用。 |
+| 工作区列表空状态 | `nav-workspace-list-empty` | 配合 `data-workspace-list` 使用。 |
+| 工作区拖拽目标 | `nav-workspace-drop-target` | 重复拖拽目标。配合 `data-workspace-id` 使用。 |
+| 工作区行 | `nav-workspace-item` | 重复项。配合 `data-workspace-id`、`data-workspace-kind` 和 `data-workspace-active` 使用。 |
+| 工作区卡片 | `nav-workspace-card` | 可点击行主体。配合 `data-workspace-id` 使用。 |
+| 工作区会话展开按钮 | `nav-workspace-sessions-toggle` | 展开/折叠会话行。配合 `data-workspace-id` 使用。 |
+| 工作区名称按钮 | `nav-workspace-name-btn` | 激活工作区或切换会话展开状态。配合 `data-workspace-id` 使用。 |
+| 工作区文件按钮 | `nav-workspace-files-btn` | 打开该工作区的文件查看器。配合 `data-workspace-id` 使用。 |
+| 工作区搜索索引按钮 | `nav-workspace-search-index-btn` | 存在时打开搜索索引状态弹窗。配合 `data-workspace-id` 使用。 |
+| 工作区行菜单按钮 | `nav-workspace-menu-btn` | 打开行操作菜单。配合 `data-workspace-id` 使用。 |
+| 工作区行菜单 | `nav-workspace-item-menu` | 单个工作区的 portal 菜单。配合 `data-workspace-id` 使用。 |
+| 工作区创建会话 | `nav-workspace-menu-create-session` | Assistant 工作区会话动作。 |
+| 工作区创建 Code 会话 | `nav-workspace-menu-create-code-session` | 普通工作区 code 会话动作。 |
+| 工作区创建 Cowork 会话 | `nav-workspace-menu-create-cowork-session` | 普通工作区 cowork 会话动作。 |
+| 工作区创建 ACP 会话 | `nav-workspace-menu-create-acp-session` | 重复项。配合 `data-acp-client-id` 使用。 |
+| 工作区创建 Init 会话 | `nav-workspace-menu-create-init-session` | 启动 AGENTS.md/init 会话。 |
+| 工作区相关路径 | `nav-workspace-menu-related-paths` | 打开相关路径对话框。 |
+| 工作区新建 worktree | `nav-workspace-menu-new-worktree` | 打开 worktree 创建对话框。 |
+| 工作区删除 worktree | `nav-workspace-menu-delete-worktree` | 删除关联 worktree 工作区。 |
+| 工作区复制路径 | `nav-workspace-menu-copy-path` | 复制工作区路径。 |
+| 工作区 reveal | `nav-workspace-menu-reveal` | 在文件管理器中显示工作区。 |
+| 工作区关闭 | `nav-workspace-menu-close` | 关闭工作区。 |
+| 工作区重置 assistant | `nav-workspace-menu-reset-assistant` | 重置默认 assistant 工作区。 |
+| 工作区删除 assistant | `nav-workspace-menu-delete-assistant` | 删除具名 assistant 工作区。 |
+| 工作区会话区域 | `nav-workspace-session-region` | 包含单个工作区的会话。配合 `data-workspace-id` 使用。 |
+
+## Navigation Sessions
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| 会话列表 | `nav-session-list` | 工作区维度的列表。配合 `data-workspace-id` 使用。 |
+| 会话行 | `nav-session-item` | 重复项。配合 `data-session-id`、`data-session-kind`、`data-session-level` 和 `data-session-active` 使用。 |
+| 会话菜单按钮 | `nav-session-menu-btn` | 打开行操作菜单。配合 `data-session-id` 使用。 |
+| 会话菜单 | `nav-session-menu` | 单个会话的 portal 菜单。配合 `data-session-id` 使用。 |
+| 会话重命名项 | `nav-session-menu-rename` | 开始重命名会话。 |
+| 会话删除项 | `nav-session-menu-delete` | 删除会话。 |
+| 会话列表展开按钮 | `nav-session-list-toggle` | 展开/折叠长会话列表。 |
+
+## Session And Chat
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| Session 场景根节点 | `session-scene` | Session 场景锚点。 |
+| Session 聊天面板 | `session-chat-pane` | Session 场景中的左侧聊天面板。 |
+| Session 右侧面板 resizer | `session-right-pane-resizer` | 聊天和辅助面板之间的分隔条。 |
+| Session 辅助面板 | `session-aux-pane` | 右侧 content canvas 面板。包含 `data-mode`。 |
+| Chat pane 根节点 | `chat-pane` | FlowChat 宿主面板。 |
+| FlowChat 容器 | `flowchat-container` | FlowChat 根节点。包含 `data-session-id`。 |
+| FlowChat 消息区域 | `flowchat-messages` | 消息列表/welcome panel 宿主。 |
+| FlowChat 消息列表 | `flowchat-message-list` | 有消息时的虚拟消息列表根节点。 |
+| FlowChat 空消息列表 | `flowchat-message-list-empty` | 空虚拟列表状态。 |
+| Chat 输入容器 | `chat-input-container` | composer 根容器。 |
+| Chat 输入可编辑区域 | `chat-input-textarea` | 富文本可编辑区域。 |
+| Chat 发送按钮 | `chat-input-send-btn` | 输入有效时的发送动作。 |
+| Chat 取消按钮 | `chat-input-cancel-btn` | 存在时用于取消进行中的发送/生成。 |
+| Chat 输入工作区条 | `chat-input-workspace-strip` | composer 上方的活动工作区条。 |
+| Chat 输入目标切换器 | `chat-input-target-switcher` | 目标/模式切换器。 |
+| Chat 输入图片条 | `chat-input-image-strip` | 已附加图片条。 |
+| Chat 输入启动 BTW 按钮 | `chat-input-boost-start-btw` | 存在时启动 BTW 流程。 |
+| Pending queue 面板 | `pending-queue-panel` | 待处理后台任务队列。 |
+
+| Chat 模型选择按钮 | `chat-model-selector-btn` | 打开当前会话的模型选择器。 |
+| Chat 模型选择菜单 | `chat-model-selector-menu` | 模型选择下拉菜单根节点。 |
+| Chat 模型选择项 | `chat-model-selector-option` | 重复项。配合 `data-model-id` 和 `data-model-name` 使用。 |
+
+## Settings
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| Settings 场景根节点 | `settings-scene` | Settings 场景的根内容区。包含 `data-settings-tab`。 |
+| Settings 场景内容 | `settings-scene-content` | 当前活动 settings tab 的内容 wrapper。 |
+| Settings 导航根节点 | `settings-nav` | 左侧 settings 导航。 |
+| Settings 导航 tab | `settings-nav-tab` | 重复项。配合 `data-settings-tab` 使用。 |
+
+## Settings Models
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| 模型列表 | `settings-model-list` | 已配置模型行的容器。 |
+| 创建第一个模型配置按钮 | `settings-model-create-first-config-btn` | 从空状态启动第一个模型提供商配置流程。 |
+| 模型提供商选项 | `settings-model-provider-option` | 重复的提供商卡片。配合 `data-provider-id` 使用，例如 `openbitfun`。 |
+| 模型 API key 输入框 | `settings-model-api-key-input` | 模型配置表单里的 API key 字段。测试中不要硬编码真实 key，应从 local config 读取。 |
+| 模型选择按钮 | `settings-model-select-btn` | 打开模型选择下拉框。 |
+| 模型选择项 | `settings-model-option` | 重复的下拉项。配合 `data-model-id` 和 `data-model-name` 使用。 |
+| 模型保存按钮 | `settings-model-save-btn` | 保存模型提供商/模型配置表单。 |
+| 模型行 | `settings-model-row` | 重复的已保存模型行。配合 `data-model-id`、`data-model-name` 和 `data-config-id` 使用。 |
+| 模型测试状态 | `settings-model-test-status` | 重复的已保存模型测试状态。配合 `data-model-id`、`data-model-name`、`data-config-id` 和 `data-status` 使用，`data-status` 可为 `success` 或 `error`。 |
+
+## Notifications
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| 通知按钮 | `notification-button` | 打开或切换通知中心。 |
+| 通知中心对话框 | `notification-center` | 通知中心弹窗根节点。 |
+| 通知中心关闭按钮 | `notification-center-close-btn` | 关闭通知中心。 |
+| 通知中心活动区块 | `notification-center-active-section` | 仅在存在活动任务通知时出现。 |
+
+## Flow Chat Header
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| 后台 subagents 按钮 | `flowchat-header-background-subagents` | 打开后台 subagent 活动状态。 |
+| Pull requests 按钮 | `flowchat-header-pull-requests` | 打开 pull request 相关 UI。 |
+| Turn 列表 | `flowchat-header-turn-list` | Turn 导航列表。 |
+| 上一个 turn 按钮 | `flowchat-header-turn-prev` | 切换到上一个可见 turn。 |
+| 下一个 turn 按钮 | `flowchat-header-turn-next` | 切换到下一个可见 turn。 |
+
+## Agents
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| Agents 场景根节点 | `agents-scene` | Agents gallery 页面根节点。 |
+| Agents 区域容器 | `agents-zones` | 所有 agent 区域的容器。 |
+| Core 锚点按钮 | `agents-anchor-core` | 滚动到 core agents 区域。 |
+| Teams 锚点按钮 | `agents-anchor-teams` | 滚动到 teams 区域。 |
+| Custom agents 锚点按钮 | `agents-anchor-custom` | 滚动到 custom agents 区域。 |
+| Agents 搜索按钮 | `agents-search-btn` | 搜索后缀按钮。 |
+| Core agents 区域 | `agents-core-zone` | Core agents section。 |
+| Teams 区域 | `agents-teams-zone` | Agent teams section。 |
+| Custom agents 区域 | `agents-custom-zone` | Custom/subagent section。 |
+| Review team 配置按钮 | `agents-review-team-configure-btn` | 打开 review team 配置。 |
+| Agent source 过滤器 | `agents-source-filter` | 重复项。配合 `data-agent-source` 使用。 |
+| Agent kind 过滤器 | `agents-kind-filter` | 重复项。配合 `data-agent-kind` 使用。 |
+| 创建 agent 按钮 | `agents-create-agent-btn` | 打开 custom agent 创建页。 |
+| Core agent 卡片 | `agents-core-agent-card` | 重复项。配合 `data-agent-id` 和 `data-agent-kind` 使用。 |
+| Agent team 卡片 | `agents-team-card` | 重复项。配合 `data-team-id` 使用。 |
+| Agent 卡片 | `agents-agent-card` | 重复项。配合 `data-agent-id`、`data-agent-kind` 和 `data-subagent-source` 使用。 |
+| BTW 停止 review 按钮 | `btw-session-panel-stop-review` | 从 BTW 面板停止 review session。 |
+| BTW origin 按钮 | `btw-session-panel-origin-button` | 从 BTW 面板打开 origin session。 |
+
+## Skills
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| Skills 场景根节点 | `skills-scene` | Skills 场景根节点。 |
+| Skills tabs 根节点 | `skills-tabs` | Installed/discover tabs 容器。 |
+| Installed tab | `skills-tab-installed` | 包含 `data-skills-tab-active`。 |
+| Discover tab | `skills-tab-discover` | 包含 `data-skills-tab-active`。 |
+| Installed 面板 | `skills-installed-panel` | 已安装 skills 视图根节点。 |
+| Installed 侧边栏 | `skills-installed-sidebar` | 已安装 category 侧边栏。 |
+| Installed category | `skills-installed-category` | 重复项。配合 `data-skill-category` 使用。 |
+| Installed 内容区 | `skills-installed-content` | 已安装 skills 主内容。 |
+| Installed 搜索 | `skills-installed-search` | 已安装 skills 搜索根节点。 |
+| 隐藏重复项按钮 | `skills-hide-duplicates-btn` | 包含 `data-active`。 |
+| 添加本地 skill 按钮 | `skills-add-local-btn` | 打开添加 skill 表单。 |
+| Installed 加载状态 | `skills-installed-loading` | 加载骨架屏容器。 |
+| Installed 错误状态 | `skills-installed-error` | 错误状态容器。 |
+| Installed 空状态 | `skills-installed-empty` | 空状态容器。 |
+| Installed grid | `skills-installed-grid` | 已安装 skill 卡片网格。 |
+| Installed skill 卡片 | `skills-installed-card` | 重复项。配合 `data-skill-key`、`data-skill-level` 和 `data-skill-builtin` 使用。 |
+| Installed 卡片路径按钮 | `skills-installed-card-path` | 重复项。配合 `data-skill-key` 使用。 |
+| Installed 卡片删除按钮 | `skills-installed-card-delete` | 重复项。配合 `data-skill-key` 使用。 |
+| Installed 分页 | `skills-installed-pagination` | 已安装列表分页根节点。 |
+| Installed 上一页 | `skills-installed-page-prev` | 上一页按钮。 |
+| Installed 下一页 | `skills-installed-page-next` | 下一页按钮。 |
+| Discover 面板 | `skills-discover-panel` | Marketplace 视图根节点。 |
+| Discover 搜索 | `skills-discover-search` | Marketplace 搜索根节点。 |
+| Discover 内容区 | `skills-discover-content` | Marketplace 内容区域。 |
+| Discover 加载状态 | `skills-discover-loading` | 初始加载骨架屏容器。 |
+| Discover 分页加载状态 | `skills-discover-page-loading` | 翻页时的加载状态。 |
+| Discover 错误状态 | `skills-discover-error` | 错误状态容器。 |
+| Discover 空状态 | `skills-discover-empty` | 空状态容器。 |
+| Discover grid | `skills-discover-grid` | Marketplace 卡片网格。 |
+| Market skill 卡片 | `skills-market-card` | 重复项。配合 `data-skill-install-id` 和 `data-skill-installed` 使用。 |
+| Skill 卡片动作 | `skills-card-action` | 重复卡片动作。配合 `data-skill-action` 使用。 |
+| Discover 分页 | `skills-discover-pagination` | Marketplace 分页根节点。 |
+| Discover 上一页 | `skills-discover-page-prev` | 上一页按钮。 |
+| Discover 下一页 | `skills-discover-page-next` | 下一页按钮。 |
+| 详情删除按钮 | `skills-detail-delete-btn` | 删除选中的已安装 skill。 |
+| 详情已安装按钮 | `skills-detail-installed-btn` | Marketplace 详情中的 disabled installed 标记。 |
+| 详情项目级下载按钮 | `skills-detail-download-project-btn` | 将 market skill 下载到 project scope。 |
+| 详情用户级下载按钮 | `skills-detail-download-user-btn` | 将 market skill 下载到 user scope。 |
+| 详情路径按钮 | `skills-detail-path-btn` | 显示已安装 skill 路径。 |
+| 详情外部链接 | `skills-detail-external-link` | 打开 marketplace 链接。 |
+| 添加表单 | `skills-add-form` | 添加本地 skill 弹窗内容。 |
+| 添加路径输入框 | `skills-add-path-input` | 本地 skill 路径输入框。 |
+| 添加浏览按钮 | `skills-add-browse-btn` | 打开路径选择器。 |
+| 添加校验结果 | `skills-add-validation` | 包含 `data-validation-valid`。 |
+| 添加取消按钮 | `skills-add-cancel-btn` | 关闭添加表单。 |
+| 添加提交按钮 | `skills-add-submit-btn` | 添加已校验的本地 skill。 |
diff --git a/docs/development/ui-testids.md b/docs/development/ui-testids.md
index 293bca9719..dfd2b404ff 100644
--- a/docs/development/ui-testids.md
+++ b/docs/development/ui-testids.md
@@ -1,3 +1,5 @@
+[中文](ui-testids-CN.md) | **English**
+
 # UI Test IDs
 
 This document records stable `data-testid` values used by BitFun UI automation.
@@ -180,6 +182,9 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Chat input target switcher | `chat-input-target-switcher` | Target/mode switcher. |
 | Chat input image strip | `chat-input-image-strip` | Attached image strip. |
 | Chat input start BTW button | `chat-input-boost-start-btw` | Starts the BTW flow when present. |
+| Chat model selector button | `chat-model-selector-btn` | Opens the session model selector. |
+| Chat model selector menu | `chat-model-selector-menu` | Model selector dropdown root. |
+| Chat model selector option | `chat-model-selector-option` | Repeated item. Pair with `data-model-id` and `data-model-name`. |
 | Pending queue panel | `pending-queue-panel` | Pending background task queue. |
 
 ## Settings
@@ -191,6 +196,20 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Settings navigation root | `settings-nav` | Left-side settings navigation. |
 | Settings navigation tab | `settings-nav-tab` | Repeated item. Pair with `data-settings-tab`. |
 
+## Settings Models
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Model list | `settings-model-list` | Container for configured model rows. |
+| Create first model config button | `settings-model-create-first-config-btn` | Starts the first model provider setup from the empty state. |
+| Model provider option | `settings-model-provider-option` | Repeated provider card. Pair with `data-provider-id`, for example `openbitfun`. |
+| Model API key input | `settings-model-api-key-input` | API key field in the model configuration form. Do not hardcode real keys in tests; load them from local config. |
+| Model select button | `settings-model-select-btn` | Opens the model selection dropdown. |
+| Model selection option | `settings-model-option` | Repeated dropdown item. Pair with `data-model-id` and `data-model-name`. |
+| Model save button | `settings-model-save-btn` | Saves the model provider/configuration form. |
+| Model row | `settings-model-row` | Repeated saved model row. Pair with `data-model-id`, `data-model-name`, and `data-config-id`. |
+| Model test status | `settings-model-test-status` | Repeated saved model test status. Pair with `data-model-id`, `data-model-name`, `data-config-id`, and `data-status` (`success` or `error`). |
+
 ## Notifications
 
 | Element name | data-testid | Notes |
@@ -283,4 +302,3 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Add validation result | `skills-add-validation` | Includes `data-validation-valid`. |
 | Add cancel button | `skills-add-cancel-btn` | Closes add form. |
 | Add submit button | `skills-add-submit-btn` | Adds validated local skill. |
-
diff --git a/src/web-ui/src/component-library/components/Select/Select.tsx b/src/web-ui/src/component-library/components/Select/Select.tsx
index 08e13f8b14..949827019e 100644
--- a/src/web-ui/src/component-library/components/Select/Select.tsx
+++ b/src/web-ui/src/component-library/components/Select/Select.tsx
@@ -20,9 +20,11 @@ export interface SelectOption {
   description?: string;
   icon?: React.ReactNode;
   group?: string;
+  testId?: string;
+  testAttributes?: Record<`data-${string}`, string | number | boolean | undefined>;
 }
 
-export interface SelectProps {
+export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
   options?: SelectOption[];
   value?: string | number | (string | number)[];
   defaultValue?: string | number | (string | number)[];
@@ -78,6 +80,7 @@ export const Select: React.FC<SelectProps> = ({
   allowCustomValue = false,
   customValueHint,
   onOpenChange,
+  ...rootProps
 }) => {
   const { t } = useI18n('components');
   
@@ -463,6 +466,8 @@ export const Select: React.FC<SelectProps> = ({
         role="option"
         aria-selected={selected}
         aria-disabled={option.disabled}
+        data-testid={option.testId}
+        {...option.testAttributes}
       >
         {multiple && (
           <span className={`select__checkbox ${selected ? 'select__checkbox--checked' : ''}`}>
@@ -486,7 +491,7 @@ export const Select: React.FC<SelectProps> = ({
   };
 
   return (
-    <div className={classNames} ref={selectRef}>
+    <div {...rootProps} className={classNames} ref={selectRef}>
       {label && <label className="select__label">{label}</label>}
       
       <div
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.tsx b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
index 1cca02d74a..ecebea454c 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
@@ -564,6 +564,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       >
         <Tooltip content={acpTooltip}>
           <button
+            data-testid="chat-model-selector-btn"
             className={`bitfun-model-selector__trigger ${dropdownOpen ? 'bitfun-model-selector__trigger--open' : ''}`}
             onClick={() => {
               const nextOpen = !dropdownOpen;
@@ -587,7 +588,12 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
         </Tooltip>
 
         {dropdownOpen && createPortal(
-          <div className="bitfun-model-selector__dropdown" ref={portalDropdownRef} style={dropdownStyle}>
+          <div
+            className="bitfun-model-selector__dropdown"
+            ref={portalDropdownRef}
+            style={dropdownStyle}
+            data-testid="chat-model-selector-menu"
+          >
             <div className="bitfun-model-selector__dropdown-header">
               <span>ACP model</span>
               <span className="bitfun-model-selector__dropdown-hint">
@@ -602,6 +608,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 return (
                   <Tooltip key={model.id} content={model.id} placement="right">
                     <div
+                      data-testid="chat-model-selector-option"
+                      data-model-id={model.id}
+                      data-model-name={model.modelName}
                       className={`bitfun-model-selector__option ${isSelected ? 'bitfun-model-selector__option--selected' : ''}`}
                       onClick={() => handleSelectModel(model.id)}
                     >
@@ -650,6 +659,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     >
       <Tooltip content={tooltipContent}>
         <button
+          data-testid="chat-model-selector-btn"
           className={`bitfun-model-selector__trigger ${dropdownOpen ? 'bitfun-model-selector__trigger--open' : ''}`}
           onClick={() => setDropdownOpen(!dropdownOpen)}
           disabled={loading}
@@ -675,7 +685,12 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       </Tooltip>
 
       {dropdownOpen && createPortal(
-        <div className="bitfun-model-selector__dropdown" ref={portalDropdownRef} style={dropdownStyle}>
+        <div
+          className="bitfun-model-selector__dropdown"
+          ref={portalDropdownRef}
+          style={dropdownStyle}
+          data-testid="chat-model-selector-menu"
+        >
           <div className="bitfun-model-selector__dropdown-header">
             <span>{t('modelSelector.modelSelection')}</span>
             <span className="bitfun-model-selector__dropdown-hint">
@@ -685,6 +700,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
           <Tooltip content={t('modelSelector.autoModelDesc')} placement="right">
             <div
+              data-testid="chat-model-selector-option"
+              data-model-id="auto"
+              data-model-name="auto"
               className={`bitfun-model-selector__option bitfun-model-selector__option--special ${currentModelId === 'auto' ? 'bitfun-model-selector__option--selected' : ''}`}
               onClick={() => handleSelectModel('auto')}
             >
@@ -708,6 +726,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
             return (
               <Tooltip content={primaryTooltip} placement="right">
                 <div
+                  data-testid="chat-model-selector-option"
+                  data-model-id="primary"
+                  data-model-name={primaryModel?.model_name || 'primary'}
                   className={`bitfun-model-selector__option bitfun-model-selector__option--special ${currentModelId === 'primary' ? 'bitfun-model-selector__option--selected' : ''}`}
                   onClick={() => handleSelectModel('primary')}
                 >
@@ -733,6 +754,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
             return (
               <Tooltip content={fastTooltip} placement="right">
                 <div
+                  data-testid="chat-model-selector-option"
+                  data-model-id="fast"
+                  data-model-name={fastModel?.model_name || 'fast'}
                   className={`bitfun-model-selector__option bitfun-model-selector__option--special ${currentModelId === 'fast' ? 'bitfun-model-selector__option--selected' : ''}`}
                   onClick={() => handleSelectModel('fast')}
                 >
@@ -756,6 +780,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               return (
                 <Tooltip key={model.id} content={buildModelMetaText(model)} placement="right">
                   <div
+                    data-testid="chat-model-selector-option"
+                    data-model-id={model.id}
+                    data-model-name={model.modelName}
                     className={`bitfun-model-selector__option ${isSelected ? 'bitfun-model-selector__option--selected' : ''}`}
                     onClick={() => handleSelectModel(model.id)}
                   >
diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
index 61fb9f173f..633c5d7458 100644
--- a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
@@ -1398,6 +1398,8 @@ const AIModelConfig: React.FC = () => {
               {providers.map(provider => (
                 <Card
                   key={provider.id}
+                  data-testid="settings-model-provider-option"
+                  data-provider-id={provider.id}
                   variant="default"
                   padding="medium"
                   interactive
@@ -1463,15 +1465,30 @@ const AIModelConfig: React.FC = () => {
       ? remoteModelOptions.map(model => ({
           label: model.display_name || model.id,
           value: model.id,
-          description: model.display_name && model.display_name !== model.id ? model.id : undefined
+          description: model.display_name && model.display_name !== model.id ? model.id : undefined,
+          testId: 'settings-model-option',
+          testAttributes: {
+            'data-model-id': model.id,
+            'data-model-name': model.id,
+          },
         }))
       : (currentTemplate?.models || []).map(model => ({
           label: model,
-          value: model
+          value: model,
+          testId: 'settings-model-option',
+          testAttributes: {
+            'data-model-id': model,
+            'data-model-name': model,
+          },
         }));
     const selectedModelOptions: SelectOption[] = selectedModelDrafts.map(draft => ({
       label: draft.modelName,
       value: draft.modelName,
+      testId: 'settings-model-option',
+      testAttributes: {
+        'data-model-id': draft.modelName,
+        'data-model-name': draft.modelName,
+      },
     }));
     const availableModelOptions: SelectOption[] = Array.from(
       new Map(
@@ -1806,6 +1823,7 @@ const AIModelConfig: React.FC = () => {
     const renderApiKeyRow = (label: string) => (
       <ConfigPageRow label={label} align="center" wide>
         <Input
+          data-testid="settings-model-api-key-input"
           type={showApiKey ? 'text' : 'password'}
           value={editingConfig.api_key || ''}
           onChange={(e) => {
@@ -1911,6 +1929,7 @@ const AIModelConfig: React.FC = () => {
                   <div className="bitfun-ai-model-config__control-stack">
                     <div className="bitfun-ai-model-config__model-picker-row">
                       <Select
+                        data-testid="settings-model-select-btn"
                         value={selectedModelValues}
                         onChange={(value) => {
                           const nextModelNames = Array.isArray(value) ? value.map(item => String(item)) : [String(value)];
@@ -2025,6 +2044,7 @@ const AIModelConfig: React.FC = () => {
                   <div className="bitfun-ai-model-config__control-stack">
                     <div className="bitfun-ai-model-config__model-picker-row">
                       <Select
+                        data-testid="settings-model-select-btn"
                         value={editingConfig.id ? (selectedModelValues[0] || '') : selectedModelValues}
                         onChange={(value) => {
                           const nextModelNames = Array.isArray(value)
@@ -2253,7 +2273,7 @@ const AIModelConfig: React.FC = () => {
 
           <div className="bitfun-ai-model-config__form-actions bitfun-ai-model-config__form-actions--sticky">
             <Button variant="secondary" onClick={closeEditingModal}>{t('actions.cancel')}</Button>
-            <Button variant="primary" onClick={handleSave}>{t('actions.save')}</Button>
+            <Button data-testid="settings-model-save-btn" variant="primary" onClick={handleSave}>{t('actions.save')}</Button>
           </div>
         </div>
       </>
@@ -2275,6 +2295,11 @@ const AIModelConfig: React.FC = () => {
         </span>
         {testResult && (
           <span
+            data-testid="settings-model-test-status"
+            data-config-id={config.id || ''}
+            data-model-id={config.model_name}
+            data-model-name={config.model_name}
+            data-status={testResult.success ? 'success' : 'error'}
             className={`bitfun-ai-model-config__status-dot ${testResult.success ? 'is-success' : 'is-error'}`}
             title={testResult.message}
           />
@@ -2383,6 +2408,10 @@ const AIModelConfig: React.FC = () => {
         expanded={isExpanded}
         onToggle={() => config.id && toggleExpanded(config.id)}
         disabled={!config.enabled}
+        data-testid="settings-model-row"
+        data-config-id={config.id || ''}
+        data-model-id={config.model_name}
+        data-model-name={config.model_name}
       />
     );
   };
@@ -2489,13 +2518,13 @@ const AIModelConfig: React.FC = () => {
             <div className="bitfun-ai-model-config__empty">
               <Wifi size={36} />
               <p>{t('empty.noModels')}</p>
-              <Button variant="primary" size="small" onClick={handleCreateNew}>
+              <Button data-testid="settings-model-create-first-config-btn" variant="primary" size="small" onClick={handleCreateNew}>
                 <Plus size={14} />
                 {t('actions.createFirst')}
               </Button>
             </div>
           ) : (
-            <div className="bitfun-ai-model-config__collection">
+            <div className="bitfun-ai-model-config__collection" data-testid="settings-model-list">
               {providerGroups.map(group => (
                 <div key={group.key} className="bitfun-ai-model-config__provider-group">
                   <div className="bitfun-ai-model-config__provider-group-header">
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.tsx b/src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.tsx
index 35617eebd0..b45fbd5eb8 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.tsx
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import './ConfigCollectionItem.scss';
 
-export interface ConfigCollectionItemProps {
+export interface ConfigCollectionItemProps extends React.HTMLAttributes<HTMLDivElement> {
   label: React.ReactNode;
   badge?: React.ReactNode;
   badgePlacement?: 'inline' | 'below';
@@ -23,6 +23,7 @@ export const ConfigCollectionItem: React.FC<ConfigCollectionItemProps> = ({
   expanded: expandedProp,
   onToggle,
   className = '',
+  ...rootProps
 }) => {
   const [internalExpanded, setInternalExpanded] = useState(false);
   const isControlled = expandedProp !== undefined;
@@ -40,6 +41,7 @@ export const ConfigCollectionItem: React.FC<ConfigCollectionItemProps> = ({
 
   return (
     <div
+      {...rootProps}
       className={`bitfun-collection-item ${isExpanded ? 'is-expanded' : ''} ${disabled ? 'is-disabled' : ''} ${className}`}
     >
       <div

From a4c25f5d6efbe9d90c5cee44f0adf9af6f83c33a Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Mon, 15 Jun 2026 16:29:56 +0800
Subject: [PATCH 04/13] test: add mock LLM UI test ids

---
 docs/development/ui-testids-CN.md             | 20 +++++++-
 docs/development/ui-testids.md                | 20 +++++++-
 .../components/Select/Select.tsx              | 13 ++++-
 .../flow_chat/components/FlowTextBlock.tsx    | 40 +++++++++++++--
 .../flow_chat/components/ModelSelector.tsx    |  5 ++
 .../components/modern/ModelRoundItem.tsx      | 13 +++++
 .../components/modern/UserMessageItem.tsx     |  8 +++
 .../components/modern/VirtualItemRenderer.tsx |  2 +
 .../config/components/AIModelConfig.tsx       | 50 +++++++++++++++----
 9 files changed, 151 insertions(+), 20 deletions(-)

diff --git a/docs/development/ui-testids-CN.md b/docs/development/ui-testids-CN.md
index 2612f9ae47..71328e202f 100644
--- a/docs/development/ui-testids-CN.md
+++ b/docs/development/ui-testids-CN.md
@@ -173,6 +173,7 @@
 | FlowChat 消息区域 | `flowchat-messages` | 消息列表/welcome panel 宿主。 |
 | FlowChat 消息列表 | `flowchat-message-list` | 有消息时的虚拟消息列表根节点。 |
 | FlowChat 空消息列表 | `flowchat-message-list-empty` | 空虚拟列表状态。 |
+| FlowChat 消息项 | `flowchat-message-item` | 重复的虚拟消息项。配合 `data-turn-id`、`data-item-type` 和 `data-item-index` 使用。 |
 | Chat 输入容器 | `chat-input-container` | composer 根容器。 |
 | Chat 输入可编辑区域 | `chat-input-textarea` | 富文本可编辑区域。 |
 | Chat 发送按钮 | `chat-input-send-btn` | 输入有效时的发送动作。 |
@@ -185,7 +186,11 @@
 
 | Chat 模型选择按钮 | `chat-model-selector-btn` | 打开当前会话的模型选择器。 |
 | Chat 模型选择菜单 | `chat-model-selector-menu` | 模型选择下拉菜单根节点。 |
-| Chat 模型选择项 | `chat-model-selector-option` | 重复项。配合 `data-model-id` 和 `data-model-name` 使用。 |
+| Chat 模型选择项 | `chat-model-selector-option` | 重复项。配合 `data-model-id`、`data-model-name` 和 `data-selected` 使用。 |
+| Chat 用户消息 | `chat-user-message` | 重复的用户消息。配合 `data-turn-id`、`data-status` 和 `data-failed` 使用。 |
+| Chat 用户消息内容 | `chat-user-message-content` | 用户消息文本内容。配合 `data-turn-id` 使用。 |
+| Chat assistant 消息 | `chat-assistant-message` | 重复的模型轮次容器。配合 `data-turn-id`、`data-round-id`、`data-status`、`data-model-id`、`data-model-alias` 和 `data-streaming` 使用。 |
+| Chat assistant 消息内容 | `chat-assistant-message-content` | assistant 文本块。配合 `data-turn-id`、`data-flow-item-id`、`data-status` 和 `data-streaming` 使用。 |
 
 ## Settings
 
@@ -202,10 +207,21 @@
 |---|---|---|
 | 模型列表 | `settings-model-list` | 已配置模型行的容器。 |
 | 创建第一个模型配置按钮 | `settings-model-create-first-config-btn` | 从空状态启动第一个模型提供商配置流程。 |
+| 自定义模型配置按钮 | `settings-model-custom-config-btn` | 启动自定义提供商配置。包含 `data-provider-id="custom"`。 |
 | 模型提供商选项 | `settings-model-provider-option` | 重复的提供商卡片。配合 `data-provider-id` 使用，例如 `openbitfun`。 |
+| 模型提供商名称输入框 | `settings-model-provider-name-input` | 提供商/配置展示名称字段，例如 mock LLM 提供商名称。 |
 | 模型 API key 输入框 | `settings-model-api-key-input` | 模型配置表单里的 API key 字段。测试中不要硬编码真实 key，应从 local config 读取。 |
+| 模型 Base URL 输入框 | `settings-model-base-url-input` | 自定义/OpenAI-compatible 提供商的 API base URL 字段。 |
+| 模型请求格式选择器 | `settings-model-request-format-select` | 请求格式选择器，例如 OpenAI-compatible 或 Anthropic。 |
 | 模型选择按钮 | `settings-model-select-btn` | 打开模型选择下拉框。 |
-| 模型选择项 | `settings-model-option` | 重复的下拉项。配合 `data-model-id` 和 `data-model-name` 使用。 |
+| 模型选择菜单 | `settings-model-select-menu` | 模型选择下拉框根节点。 |
+| 模型选择项 | `settings-model-option` | 重复的下拉项。配合 `data-model-id`、`data-model-name` 和 `data-selected` 使用。 |
+| 手动模型名称输入框 | `settings-model-manual-name-input` | 手动/自定义模型名称输入字段。 |
+| 添加自定义模型按钮 | `settings-model-add-custom-btn` | 将手动模型名称加入已选模型列表。 |
+| 已选模型列表 | `settings-model-selected-list` | 已选模型草稿列表。包含 `data-selected-count`。 |
+| 已选模型空状态 | `settings-model-selected-list-empty` | 已选模型草稿为空时的状态。包含 `data-selected-count="0"`。 |
+| 已选模型行 | `settings-model-selected-row` | 重复的已选模型草稿。配合 `data-model-id`、`data-model-name`、`data-selected` 和 `data-expanded` 使用。 |
+| 已选模型移除按钮 | `settings-model-selected-remove-btn` | 移除已选模型草稿。配合 `data-model-id` 和 `data-model-name` 使用。 |
 | 模型保存按钮 | `settings-model-save-btn` | 保存模型提供商/模型配置表单。 |
 | 模型行 | `settings-model-row` | 重复的已保存模型行。配合 `data-model-id`、`data-model-name` 和 `data-config-id` 使用。 |
 | 模型测试状态 | `settings-model-test-status` | 重复的已保存模型测试状态。配合 `data-model-id`、`data-model-name`、`data-config-id` 和 `data-status` 使用，`data-status` 可为 `success` 或 `error`。 |
diff --git a/docs/development/ui-testids.md b/docs/development/ui-testids.md
index dfd2b404ff..8de8b4bfeb 100644
--- a/docs/development/ui-testids.md
+++ b/docs/development/ui-testids.md
@@ -174,6 +174,7 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | FlowChat messages region | `flowchat-messages` | Message list/welcome panel host. |
 | FlowChat message list | `flowchat-message-list` | Virtual message list root when messages exist. |
 | FlowChat empty message list | `flowchat-message-list-empty` | Empty virtual list state. |
+| FlowChat message item | `flowchat-message-item` | Repeated virtual item. Pair with `data-turn-id`, `data-item-type`, and `data-item-index`. |
 | Chat input container | `chat-input-container` | Root container for the composer. |
 | Chat input editable region | `chat-input-textarea` | Rich text editable region. |
 | Chat send button | `chat-input-send-btn` | Send action when input is valid. |
@@ -184,7 +185,11 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Chat input start BTW button | `chat-input-boost-start-btw` | Starts the BTW flow when present. |
 | Chat model selector button | `chat-model-selector-btn` | Opens the session model selector. |
 | Chat model selector menu | `chat-model-selector-menu` | Model selector dropdown root. |
-| Chat model selector option | `chat-model-selector-option` | Repeated item. Pair with `data-model-id` and `data-model-name`. |
+| Chat model selector option | `chat-model-selector-option` | Repeated item. Pair with `data-model-id`, `data-model-name`, and `data-selected`. |
+| Chat user message | `chat-user-message` | Repeated user message. Pair with `data-turn-id`, `data-status`, and `data-failed`. |
+| Chat user message content | `chat-user-message-content` | User message text content. Pair with `data-turn-id`. |
+| Chat assistant message | `chat-assistant-message` | Repeated model round container. Pair with `data-turn-id`, `data-round-id`, `data-status`, `data-model-id`, `data-model-alias`, and `data-streaming`. |
+| Chat assistant message content | `chat-assistant-message-content` | Assistant text block. Pair with `data-turn-id`, `data-flow-item-id`, `data-status`, and `data-streaming`. |
 | Pending queue panel | `pending-queue-panel` | Pending background task queue. |
 
 ## Settings
@@ -202,10 +207,21 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 |---|---|---|
 | Model list | `settings-model-list` | Container for configured model rows. |
 | Create first model config button | `settings-model-create-first-config-btn` | Starts the first model provider setup from the empty state. |
+| Custom model config button | `settings-model-custom-config-btn` | Starts custom provider configuration. Includes `data-provider-id="custom"`. |
 | Model provider option | `settings-model-provider-option` | Repeated provider card. Pair with `data-provider-id`, for example `openbitfun`. |
+| Model provider name input | `settings-model-provider-name-input` | Provider/config display name field, such as a mock LLM provider name. |
 | Model API key input | `settings-model-api-key-input` | API key field in the model configuration form. Do not hardcode real keys in tests; load them from local config. |
+| Model base URL input | `settings-model-base-url-input` | API base URL field for custom/OpenAI-compatible providers. |
+| Model request format select | `settings-model-request-format-select` | Request format selector, for example OpenAI-compatible vs Anthropic. |
 | Model select button | `settings-model-select-btn` | Opens the model selection dropdown. |
-| Model selection option | `settings-model-option` | Repeated dropdown item. Pair with `data-model-id` and `data-model-name`. |
+| Model selection menu | `settings-model-select-menu` | Model selection dropdown root. |
+| Model selection option | `settings-model-option` | Repeated dropdown item. Pair with `data-model-id`, `data-model-name`, and `data-selected`. |
+| Manual model name input | `settings-model-manual-name-input` | Manual/custom model name entry field. |
+| Add custom model button | `settings-model-add-custom-btn` | Adds the manual model name into the selected model list. |
+| Selected model list | `settings-model-selected-list` | Selected model draft list. Includes `data-selected-count`. |
+| Selected model empty state | `settings-model-selected-list-empty` | Empty selected model draft state. Includes `data-selected-count="0"`. |
+| Selected model row | `settings-model-selected-row` | Repeated selected model draft. Pair with `data-model-id`, `data-model-name`, `data-selected`, and `data-expanded`. |
+| Selected model remove button | `settings-model-selected-remove-btn` | Removes a selected model draft. Pair with `data-model-id` and `data-model-name`. |
 | Model save button | `settings-model-save-btn` | Saves the model provider/configuration form. |
 | Model row | `settings-model-row` | Repeated saved model row. Pair with `data-model-id`, `data-model-name`, and `data-config-id`. |
 | Model test status | `settings-model-test-status` | Repeated saved model test status. Pair with `data-model-id`, `data-model-name`, `data-config-id`, and `data-status` (`success` or `error`). |
diff --git a/src/web-ui/src/component-library/components/Select/Select.tsx b/src/web-ui/src/component-library/components/Select/Select.tsx
index 949827019e..5bd02ac1f4 100644
--- a/src/web-ui/src/component-library/components/Select/Select.tsx
+++ b/src/web-ui/src/component-library/components/Select/Select.tsx
@@ -51,6 +51,8 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   allowCustomValue?: boolean;
   customValueHint?: string;
   onOpenChange?: (isOpen: boolean) => void;
+  triggerTestId?: string;
+  dropdownTestId?: string;
 }
 
 export const Select: React.FC<SelectProps> = ({
@@ -80,6 +82,8 @@ export const Select: React.FC<SelectProps> = ({
   allowCustomValue = false,
   customValueHint,
   onOpenChange,
+  triggerTestId,
+  dropdownTestId,
   ...rootProps
 }) => {
   const { t } = useI18n('components');
@@ -466,6 +470,7 @@ export const Select: React.FC<SelectProps> = ({
         role="option"
         aria-selected={selected}
         aria-disabled={option.disabled}
+        data-selected={selected ? 'true' : 'false'}
         data-testid={option.testId}
         {...option.testAttributes}
       >
@@ -503,6 +508,7 @@ export const Select: React.FC<SelectProps> = ({
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         aria-disabled={disabled}
+        data-testid={triggerTestId}
       >
         {renderSelectedValue()}
         
@@ -524,7 +530,12 @@ export const Select: React.FC<SelectProps> = ({
       </div>
 
       {isOpen && (
-        <div className={`select__dropdown select__dropdown--${resolvedPlacement}`} ref={dropdownRef} role="listbox">
+        <div
+          className={`select__dropdown select__dropdown--${resolvedPlacement}`}
+          ref={dropdownRef}
+          role="listbox"
+          data-testid={dropdownTestId}
+        >
           {searchable && (
             <div className="select__search">
               <input
diff --git a/src/web-ui/src/flow_chat/components/FlowTextBlock.tsx b/src/web-ui/src/flow_chat/components/FlowTextBlock.tsx
index 4b1ed76c07..e90318c0d8 100644
--- a/src/web-ui/src/flow_chat/components/FlowTextBlock.tsx
+++ b/src/web-ui/src/flow_chat/components/FlowTextBlock.tsx
@@ -24,9 +24,16 @@ interface FlowTextBlockProps {
   className?: string;
   replayStreamingOnMount?: boolean;
   traceContext?: MarkdownTraceContext;
+  testId?: string;
+  testAttributes?: Record<`data-${string}`, string | number | boolean | undefined>;
 }
 
-const RuntimeStatusBlock: React.FC<Pick<FlowTextBlockProps, 'textItem' | 'className'>> = ({ textItem, className = '' }) => {
+const RuntimeStatusBlock: React.FC<Pick<FlowTextBlockProps, 'textItem' | 'className' | 'testId' | 'testAttributes'>> = ({
+  textItem,
+  className = '',
+  testId,
+  testAttributes,
+}) => {
   const { t } = useTranslation('flow-chat/processing-hints');
   const rawHints = t('items', { returnObjects: true });
   const hints = Array.isArray(rawHints)
@@ -38,7 +45,11 @@ const RuntimeStatusBlock: React.FC<Pick<FlowTextBlockProps, 'textItem' | 'classN
   const hint = hints[hintIndex] ?? '';
 
   return (
-    <div className={`flow-text-block flow-text-block--runtime-status ${className}`}>
+    <div
+      className={`flow-text-block flow-text-block--runtime-status ${className}`}
+      data-testid={testId}
+      {...testAttributes}
+    >
       <DotMatrixLoader size="medium" className="flow-text-block__runtime-status-icon" />
       {hint && <span className="flow-text-block__runtime-status-text">{hint}</span>}
     </div>
@@ -54,6 +65,8 @@ export const FlowTextBlock = React.memo<FlowTextBlockProps>(({
   className = '',
   replayStreamingOnMount = true,
   traceContext,
+  testId,
+  testAttributes,
 }) => {
   const {
     onFileViewRequest,
@@ -112,11 +125,25 @@ export const FlowTextBlock = React.memo<FlowTextBlockProps>(({
   const markdownTraceContext = isStartupRenderTraceEnabled() ? traceContext : undefined;
 
   if (textItem.runtimeStatus) {
-    return <RuntimeStatusBlock textItem={textItem} className={className} />;
+    return (
+      <RuntimeStatusBlock
+        textItem={textItem}
+        className={className}
+        testId={testId}
+        testAttributes={testAttributes}
+      />
+    );
   }
 
   return (
-    <div className={`flow-text-block ${className} ${isActivelyStreaming ? 'streaming flow-text-block--streaming' : ''}`}>
+    <div
+      className={`flow-text-block ${className} ${isActivelyStreaming ? 'streaming flow-text-block--streaming' : ''}`}
+      data-testid={testId}
+      data-flow-item-id={textItem.id}
+      data-status={textItem.status}
+      data-streaming={isStreaming ? 'true' : 'false'}
+      {...testAttributes}
+    >
       {textItem.isMarkdown ? (
         <MarkdownRenderer
           content={displayContent}
@@ -152,6 +179,9 @@ export const FlowTextBlock = React.memo<FlowTextBlockProps>(({
     prev.isStreaming === next.isStreaming &&
     prev.status === next.status &&
     prevProps.className === nextProps.className &&
-    prevProps.replayStreamingOnMount === nextProps.replayStreamingOnMount
+    prevProps.replayStreamingOnMount === nextProps.replayStreamingOnMount &&
+    prevProps.traceContext === nextProps.traceContext &&
+    prevProps.testId === nextProps.testId &&
+    prevProps.testAttributes === nextProps.testAttributes
   );
 });
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.tsx b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
index ecebea454c..c832e53db4 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
@@ -611,6 +611,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                       data-testid="chat-model-selector-option"
                       data-model-id={model.id}
                       data-model-name={model.modelName}
+                      data-selected={isSelected ? 'true' : 'false'}
                       className={`bitfun-model-selector__option ${isSelected ? 'bitfun-model-selector__option--selected' : ''}`}
                       onClick={() => handleSelectModel(model.id)}
                     >
@@ -703,6 +704,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               data-testid="chat-model-selector-option"
               data-model-id="auto"
               data-model-name="auto"
+              data-selected={currentModelId === 'auto' ? 'true' : 'false'}
               className={`bitfun-model-selector__option bitfun-model-selector__option--special ${currentModelId === 'auto' ? 'bitfun-model-selector__option--selected' : ''}`}
               onClick={() => handleSelectModel('auto')}
             >
@@ -729,6 +731,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                   data-testid="chat-model-selector-option"
                   data-model-id="primary"
                   data-model-name={primaryModel?.model_name || 'primary'}
+                  data-selected={currentModelId === 'primary' ? 'true' : 'false'}
                   className={`bitfun-model-selector__option bitfun-model-selector__option--special ${currentModelId === 'primary' ? 'bitfun-model-selector__option--selected' : ''}`}
                   onClick={() => handleSelectModel('primary')}
                 >
@@ -757,6 +760,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                   data-testid="chat-model-selector-option"
                   data-model-id="fast"
                   data-model-name={fastModel?.model_name || 'fast'}
+                  data-selected={currentModelId === 'fast' ? 'true' : 'false'}
                   className={`bitfun-model-selector__option bitfun-model-selector__option--special ${currentModelId === 'fast' ? 'bitfun-model-selector__option--selected' : ''}`}
                   onClick={() => handleSelectModel('fast')}
                 >
@@ -783,6 +787,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                     data-testid="chat-model-selector-option"
                     data-model-id={model.id}
                     data-model-name={model.modelName}
+                    data-selected={isSelected ? 'true' : 'false'}
                     className={`bitfun-model-selector__option ${isSelected ? 'bitfun-model-selector__option--selected' : ''}`}
                     onClick={() => handleSelectModel(model.id)}
                   >
diff --git a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.tsx b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.tsx
index 34396d6c5a..d0b78169a2 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.tsx
@@ -590,6 +590,13 @@ export const ModelRoundItem = React.memo<ModelRoundItemProps>(
     return (
       <div 
         className={`model-round-item model-round-item--${round.isStreaming ? 'streaming' : 'complete'}`}
+        data-testid="chat-assistant-message"
+        data-turn-id={turnId}
+        data-round-id={round.id}
+        data-status={round.status}
+        data-model-id={round.modelId || ''}
+        data-model-alias={round.modelAlias || ''}
+        data-streaming={round.isStreaming ? 'true' : 'false'}
       >
         {renderTraceEnabled && renderTraceStartedAtMs !== null && allGroupSummary && visibleGroupSummary && (
           <ModelRoundRenderTrace
@@ -835,6 +842,12 @@ const FlowItemRenderer: React.FC<FlowItemRendererProps> = ({
             roundId,
             itemId: item.id,
           }}
+          testId="chat-assistant-message-content"
+          testAttributes={{
+            'data-turn-id': turnId,
+            'data-flow-item-id': item.id,
+            'data-status': item.status,
+          }}
         />
       );
     
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
index 2a24399ee9..89a2f2dcc4 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
@@ -390,6 +390,10 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
       <div 
         ref={containerRef}
         className={`user-message-item ${expanded ? 'user-message-item--expanded' : ''}${isFailed ? ' user-message-item--failed' : ''}`}
+        data-testid="chat-user-message"
+        data-turn-id={turnId}
+        data-status={dialogTurn?.status || ''}
+        data-failed={isFailed ? 'true' : 'false'}
       >
         {config?.showTimestamps && (
           <div className="user-message-item__timestamp">
@@ -429,6 +433,8 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
                 <div 
                   ref={contentRef}
                   className="user-message-item__content"
+                  data-testid="chat-user-message-content"
+                  data-turn-id={turnId}
                   onClick={handleToggleExpand}
                   title={(hasOverflow || expanded) ? (expanded ? t('message.clickToCollapse') : t('message.clickToExpand')) : undefined}
                   style={{
@@ -448,6 +454,8 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
                 <div 
                   ref={contentRef}
                   className="user-message-item__content"
+                  data-testid="chat-user-message-content"
+                  data-turn-id={turnId}
                   onClick={handleToggleExpand}
                   title={(hasOverflow || expanded) ? (expanded ? t('message.clickToCollapse') : t('message.clickToExpand')) : undefined}
                   style={{
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 9fb11f77f1..8048f15dea 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
@@ -99,9 +99,11 @@ export const VirtualItemRenderer = React.memo<VirtualItemRendererProps>(
     return (
       <div 
         className={wrapperClassName}
+        data-testid="flowchat-message-item"
         data-turn-id={item.turnId}
         data-item-type={item.type}
         data-virtual-index={index}
+        data-item-index={index}
       >
         {content || <div style={{ minHeight: '1px' }} />}
       </div>
diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
index 633c5d7458..727999311d 100644
--- a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
@@ -1373,6 +1373,8 @@ const AIModelConfig: React.FC = () => {
           <div className="bitfun-ai-model-config__provider-selection">
             
             <Card
+              data-testid="settings-model-custom-config-btn"
+              data-provider-id="custom"
               variant="default"
               padding="medium"
               interactive
@@ -1585,14 +1587,22 @@ const AIModelConfig: React.FC = () => {
     const renderSelectedModelRows = () => {
       if (selectedModelDrafts.length === 0) {
         return (
-          <div className="bitfun-ai-model-config__selected-models-empty">
+          <div
+            className="bitfun-ai-model-config__selected-models-empty"
+            data-testid="settings-model-selected-list-empty"
+            data-selected-count="0"
+          >
             {t('providerSelection.noModelsSelected')}
           </div>
         );
       }
 
       return (
-        <div className="bitfun-ai-model-config__selected-models-list">
+        <div
+          className="bitfun-ai-model-config__selected-models-list"
+          data-testid="settings-model-selected-list"
+          data-selected-count={selectedModelDrafts.length}
+        >
           {selectedModelDrafts.map(draft => {
             const isExpanded = expandedModelCards.has(draft.key) || selectedModelDrafts.length === 1;
             const categoryLabel = categoryCompactLabels[draft.category] ?? draft.category;
@@ -1621,7 +1631,15 @@ const AIModelConfig: React.FC = () => {
               ?? Math.min(Math.floor(draft.maxTokens * 0.75), 10000);
 
             return (
-              <div key={draft.key} className="bitfun-ai-model-config__selected-model-row">
+              <div
+                key={draft.key}
+                className="bitfun-ai-model-config__selected-model-row"
+                data-testid="settings-model-selected-row"
+                data-model-id={draft.modelName}
+                data-model-name={draft.modelName}
+                data-selected="true"
+                data-expanded={isExpanded ? 'true' : 'false'}
+              >
                 <div
                   className={[
                     'bitfun-ai-model-config__selected-model-head',
@@ -1652,6 +1670,9 @@ const AIModelConfig: React.FC = () => {
                     </div>
                     {!editingConfig.id && (
                       <IconButton
+                        data-testid="settings-model-selected-remove-btn"
+                        data-model-id={draft.modelName}
+                        data-model-name={draft.modelName}
                         variant="ghost"
                         size="small"
                         className="bitfun-ai-model-config__selected-model-remove"
@@ -1848,7 +1869,7 @@ const AIModelConfig: React.FC = () => {
             {isFromTemplate ? (
               <>
                 <ConfigPageRow label={`${t('form.configName')} *`} align="center" wide>
-                  <Input value={editingConfig.name || ''} onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))} placeholder={t('form.configNamePlaceholder')} inputSize="small" />
+                  <Input data-testid="settings-model-provider-name-input" value={editingConfig.name || ''} onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))} placeholder={t('form.configNamePlaceholder')} inputSize="small" />
                 </ConfigPageRow>
                 {renderAuthRow()}
                 {!authIsCli && renderApiKeyRow(`${t('form.apiKey')} *`)}
@@ -1874,6 +1895,7 @@ const AIModelConfig: React.FC = () => {
                       />
                     )}
                     <Input
+                      data-testid="settings-model-base-url-input"
                       type="url"
                       value={editingConfig.base_url || ''}
                       onChange={(e) => {
@@ -1903,6 +1925,7 @@ const AIModelConfig: React.FC = () => {
                 </ConfigPageRow>
                 <ConfigPageRow label={t('form.provider')} align="center" wide>
                   <Select
+                    data-testid="settings-model-request-format-select"
                     value={editingConfig.provider || 'openai'}
                     onChange={(value) => {
                       const provider = value as string;
@@ -1929,7 +1952,9 @@ const AIModelConfig: React.FC = () => {
                   <div className="bitfun-ai-model-config__control-stack">
                     <div className="bitfun-ai-model-config__model-picker-row">
                       <Select
-                        data-testid="settings-model-select-btn"
+                        data-testid="settings-model-select"
+                        triggerTestId="settings-model-select-btn"
+                        dropdownTestId="settings-model-select-menu"
                         value={selectedModelValues}
                         onChange={(value) => {
                           const nextModelNames = Array.isArray(value) ? value.map(item => String(item)) : [String(value)];
@@ -1952,6 +1977,7 @@ const AIModelConfig: React.FC = () => {
                     </div>
                     <div className="bitfun-ai-model-config__manual-model-entry">
                       <Input
+                        data-testid="settings-model-manual-name-input"
                         value={manualModelInput}
                         onChange={(e) => setManualModelInput(e.target.value)}
                         onKeyDown={(e) => {
@@ -1963,7 +1989,7 @@ const AIModelConfig: React.FC = () => {
                         placeholder={t('providerSelection.inputModelName')}
                         inputSize="small"
                       />
-                      <Button variant="secondary" size="small" onClick={addManualModelDraft}>
+                      <Button data-testid="settings-model-add-custom-btn" variant="secondary" size="small" onClick={addManualModelDraft}>
                         {t('providerSelection.addCustomModel')}
                       </Button>
                     </div>
@@ -1981,13 +2007,14 @@ const AIModelConfig: React.FC = () => {
                 {isProviderScopedEditing && (
                   <>
                     <ConfigPageRow label={`${t('form.configName')} *`} align="center" wide>
-                      <Input value={editingConfig.name || ''} onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))} placeholder={t('form.configNamePlaceholder')} inputSize="small" />
+                      <Input data-testid="settings-model-provider-name-input" value={editingConfig.name || ''} onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))} placeholder={t('form.configNamePlaceholder')} inputSize="small" />
                     </ConfigPageRow>
                     {renderAuthRow()}
                     {!authIsCli && renderApiKeyRow(`${t('form.apiKey')} *`)}
                     <ConfigPageRow label={`${t('form.baseUrl')} *`} align="center" wide>
                       <div className="bitfun-ai-model-config__control-stack">
                         <Input
+                          data-testid="settings-model-base-url-input"
                           type="url"
                           value={editingConfig.base_url || ''}
                           onChange={(e) => {
@@ -2016,7 +2043,7 @@ const AIModelConfig: React.FC = () => {
                       </div>
                     </ConfigPageRow>
                     <ConfigPageRow label={t('form.provider')} align="center" wide>
-                      <Select value={editingConfig.provider || 'openai'} onChange={(value) => {
+                      <Select data-testid="settings-model-request-format-select" value={editingConfig.provider || 'openai'} onChange={(value) => {
                         const provider = value as string;
                         resetRemoteModelDiscovery();
                         setSelectedModelDrafts(prevDrafts =>
@@ -2044,7 +2071,9 @@ const AIModelConfig: React.FC = () => {
                   <div className="bitfun-ai-model-config__control-stack">
                     <div className="bitfun-ai-model-config__model-picker-row">
                       <Select
-                        data-testid="settings-model-select-btn"
+                        data-testid="settings-model-select"
+                        triggerTestId="settings-model-select-btn"
+                        dropdownTestId="settings-model-select-menu"
                         value={editingConfig.id ? (selectedModelValues[0] || '') : selectedModelValues}
                         onChange={(value) => {
                           const nextModelNames = Array.isArray(value)
@@ -2067,6 +2096,7 @@ const AIModelConfig: React.FC = () => {
                     </div>
                     <div className="bitfun-ai-model-config__manual-model-entry">
                       <Input
+                        data-testid="settings-model-manual-name-input"
                         value={manualModelInput}
                         onChange={(e) => setManualModelInput(e.target.value)}
                         onKeyDown={(e) => {
@@ -2078,7 +2108,7 @@ const AIModelConfig: React.FC = () => {
                         placeholder={t('providerSelection.inputModelName')}
                         inputSize="small"
                       />
-                      <Button variant="secondary" size="small" onClick={addManualModelDraft}>
+                      <Button data-testid="settings-model-add-custom-btn" variant="secondary" size="small" onClick={addManualModelDraft}>
                         {t('providerSelection.addCustomModel')}
                       </Button>
                     </div>

From 4239a17934621830dc9f1b03ff1119353e3544ab Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Mon, 15 Jun 2026 19:50:21 +0800
Subject: [PATCH 05/13] test: pass chat input test id to editable node

---
 src/web-ui/src/flow_chat/components/RichTextInput.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/web-ui/src/flow_chat/components/RichTextInput.tsx b/src/web-ui/src/flow_chat/components/RichTextInput.tsx
index afeac3cd6d..6a4098f6b4 100644
--- a/src/web-ui/src/flow_chat/components/RichTextInput.tsx
+++ b/src/web-ui/src/flow_chat/components/RichTextInput.tsx
@@ -19,7 +19,11 @@ export interface MentionState {
   startOffset: number;  // Position of the @ symbol in text
 }
 
-export interface RichTextInputProps {
+export interface RichTextInputProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    'onChange' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd'
+  > {
   value: string;
   onChange: (value: string, contexts: ContextItem[]) => void;
   onLargePaste?: (text: string) => string | null;
@@ -133,6 +137,7 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
   contexts,
   onRemoveContext,
   onMentionStateChange,
+  ...restProps
 }, ref) => {
   const editorRef = useRef<HTMLDivElement>(null);
   const internalRef = (ref as React.RefObject<HTMLDivElement>) || editorRef;
@@ -814,6 +819,7 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
 
   return (
     <div
+      {...restProps}
       ref={internalRef}
       className={`rich-text-input ${isFocused ? 'rich-text-input--focused' : ''} ${className}`}
       contentEditable={!disabled}

From 0f98b9f847a7da0e9402957b31b6b1f26dfbd9fe Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Thu, 18 Jun 2026 15:15:16 +0800
Subject: [PATCH 06/13] test: add session tool result UI test ids

---
 docs/development/ui-testids-CN.md             |  16 ++
 docs/development/ui-testids.md                |  16 ++
 .../src/flow_chat/tool-cards/BaseToolCard.tsx |  10 +-
 .../tool-cards/FileOperationToolCard.tsx      | 160 ++++++++++++------
 .../tool-cards/MiniAppToolDisplay.tsx         |  56 +++++-
 .../tool-cards/ModelThinkingDisplay.tsx       |  14 +-
 .../flow_chat/tool-cards/TerminalToolCard.tsx |  25 ++-
 .../tool-cards/ToolCommandPreview.tsx         |   7 +-
 8 files changed, 231 insertions(+), 73 deletions(-)

diff --git a/docs/development/ui-testids-CN.md b/docs/development/ui-testids-CN.md
index 71328e202f..0e794ef50f 100644
--- a/docs/development/ui-testids-CN.md
+++ b/docs/development/ui-testids-CN.md
@@ -191,6 +191,22 @@
 | Chat 用户消息内容 | `chat-user-message-content` | 用户消息文本内容。配合 `data-turn-id` 使用。 |
 | Chat assistant 消息 | `chat-assistant-message` | 重复的模型轮次容器。配合 `data-turn-id`、`data-round-id`、`data-status`、`data-model-id`、`data-model-alias` 和 `data-streaming` 使用。 |
 | Chat assistant 消息内容 | `chat-assistant-message-content` | assistant 文本块。配合 `data-turn-id`、`data-flow-item-id`、`data-status` 和 `data-streaming` 使用。 |
+| Chat thinking 面板 | `chat-thinking-panel` | thinking/reasoning 面板根节点。包含 `data-status`、`data-streaming` 和 `data-expanded`。 |
+| Chat thinking 展开按钮 | `chat-thinking-toggle` | 可点击的 thinking 展开/收起 header。 |
+| Chat thinking 内容 | `chat-thinking-content` | thinking/reasoning 文本内容。包含 `data-status` 和 `data-streaming`。 |
+| Chat shell 命令卡片 | `chat-shell-command-card` | Shell 命令工具卡根节点。包含 `data-status`、`data-expanded` 和 `data-terminal-session-id`。 |
+| Chat shell 命令文本 | `chat-shell-command-text` | Shell 命令文本节点。 |
+| Chat shell 命令输出 | `chat-shell-command-output` | Shell 命令 stdout/stderr 或实时输出区域。 |
+| Chat shell 命令退出码 | `chat-shell-command-exit-code` | 退出码节点。包含 `data-exit-code` 和 `data-status`。 |
+| Chat 文件变更卡片 | `chat-file-change-card` | 文件操作卡片根节点。包含 `data-status`、`data-action`、`data-path` 和 `data-expanded`。 |
+| Chat 文件变更路径 | `chat-file-change-path` | 文件路径/名称节点。包含 `data-path`。 |
+| Chat 文件变更动作 | `chat-file-change-action` | 文件操作动作节点。包含 `data-action`。 |
+| Chat 文件变更预览 | `chat-file-change-preview` | 文件操作卡片的代码/diff 预览区域。 |
+| Chat MiniApp 卡片 | `chat-miniapp-card` | MiniApp 结果卡片根节点。包含 `data-status`、`data-app-id` 和 `data-expanded`。 |
+| Chat MiniApp 标题 | `chat-miniapp-title` | MiniApp 标题/名称节点。包含 `data-app-id`。 |
+| Chat MiniApp 文件列表 | `chat-miniapp-file-list` | MiniApp 结果文件列表容器。 |
+| Chat MiniApp 文件行 | `chat-miniapp-file-row` | MiniApp 结果文件行。包含 `data-path`。 |
+| Chat MiniApp 打开按钮 | `chat-miniapp-open-btn` | 打开 MiniApp 场景。包含 `data-app-id`。 |
 
 ## Settings
 
diff --git a/docs/development/ui-testids.md b/docs/development/ui-testids.md
index 8de8b4bfeb..c0ffe4bc3c 100644
--- a/docs/development/ui-testids.md
+++ b/docs/development/ui-testids.md
@@ -190,6 +190,22 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Chat user message content | `chat-user-message-content` | User message text content. Pair with `data-turn-id`. |
 | Chat assistant message | `chat-assistant-message` | Repeated model round container. Pair with `data-turn-id`, `data-round-id`, `data-status`, `data-model-id`, `data-model-alias`, and `data-streaming`. |
 | Chat assistant message content | `chat-assistant-message-content` | Assistant text block. Pair with `data-turn-id`, `data-flow-item-id`, `data-status`, and `data-streaming`. |
+| Chat thinking panel | `chat-thinking-panel` | Thinking/reasoning panel root. Includes `data-status`, `data-streaming`, and `data-expanded`. |
+| Chat thinking toggle | `chat-thinking-toggle` | Clickable thinking expand/collapse header. |
+| Chat thinking content | `chat-thinking-content` | Thinking/reasoning text content. Includes `data-status` and `data-streaming`. |
+| Chat shell command card | `chat-shell-command-card` | Shell command tool card root. Includes `data-status`, `data-expanded`, and `data-terminal-session-id`. |
+| Chat shell command text | `chat-shell-command-text` | Shell command text node. |
+| Chat shell command output | `chat-shell-command-output` | Shell command stdout/stderr or live output area. |
+| Chat shell command exit code | `chat-shell-command-exit-code` | Exit code node. Includes `data-exit-code` and `data-status`. |
+| Chat file change card | `chat-file-change-card` | File operation card root. Includes `data-status`, `data-action`, `data-path`, and `data-expanded`. |
+| Chat file change path | `chat-file-change-path` | File path/name node. Includes `data-path`. |
+| Chat file change action | `chat-file-change-action` | File operation action node. Includes `data-action`. |
+| Chat file change preview | `chat-file-change-preview` | Code/diff preview area for file operation cards. |
+| Chat MiniApp card | `chat-miniapp-card` | MiniApp result card root. Includes `data-status`, `data-app-id`, and `data-expanded`. |
+| Chat MiniApp title | `chat-miniapp-title` | MiniApp title/name node. Includes `data-app-id`. |
+| Chat MiniApp file list | `chat-miniapp-file-list` | MiniApp result file list container. |
+| Chat MiniApp file row | `chat-miniapp-file-row` | MiniApp result file row. Includes `data-path`. |
+| Chat MiniApp open button | `chat-miniapp-open-btn` | Opens the MiniApp scene. Includes `data-app-id`. |
 | Pending queue panel | `pending-queue-panel` | Pending background task queue. |
 
 ## Settings
diff --git a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
index 4ef31efdb3..5aa0bc28d5 100644
--- a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
@@ -150,6 +150,8 @@ export interface ToolCardHeaderProps {
   onAffordanceClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   /** Action text */
   action?: string;
+  actionTestId?: string;
+  actionDataAttributes?: Record<`data-${string}`, string | number | boolean | undefined>;
   /** Main content */
   content?: ReactNode;
   /** Right extra content (e.g., statistics, buttons, etc.) */
@@ -169,6 +171,8 @@ export const ToolCardHeader: React.FC<ToolCardHeaderProps> = ({
   headerExpanded,
   onAffordanceClick,
   action,
+  actionTestId,
+  actionDataAttributes,
   content,
   extra,
   statusIcon,
@@ -193,7 +197,11 @@ export const ToolCardHeader: React.FC<ToolCardHeaderProps> = ({
           onAffordanceClick={onAffordanceClick}
         />
       )}
-      {action && <span className="tool-card-action">{action}</span>}
+      {action && (
+        <span className="tool-card-action" data-testid={actionTestId} {...actionDataAttributes}>
+          {action}
+        </span>
+      )}
       {content && <div className="tool-card-content">{content}</div>}
       {extra && <div className="tool-card-extra">{extra}</div>}
       {statusIcon && (
diff --git a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
index d86144faac..0ce0dd7539 100644
--- a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
@@ -846,7 +846,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     if (toolItem.toolName === 'Edit') {
       if (status !== 'completed' && newStringContent) {
         return (
-          <div className="streaming-content-preview">
+          <div className="streaming-content-preview" data-testid="chat-file-change-preview">
             <div className="preview-text">
               <CodePreview
                 content={newStringContent}
@@ -864,7 +864,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
       
       if (status === 'completed' && !isParamsStreaming && (oldStringContent || newStringContent)) {
         return (
-          <div className="streaming-content-preview">
+          <div className="streaming-content-preview" data-testid="chat-file-change-preview">
             <div className="preview-text">
               <InlineDiffPreview
                 originalContent={oldStringContent}
@@ -885,7 +885,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     if (toolItem.toolName === 'Write') {
       if (status !== 'completed' && contentPreview) {
         return (
-          <div className="streaming-content-preview">
+          <div className="streaming-content-preview" data-testid="chat-file-change-preview">
             <div className="preview-text">
               <CodePreview
                 content={contentPreview}
@@ -903,7 +903,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
       
       if (status === 'completed' && !isParamsStreaming && contentPreview) {
         return (
-          <div className="streaming-content-preview">
+          <div className="streaming-content-preview" data-testid="chat-file-change-preview">
             <div className="preview-text">
               <InlineDiffPreview
                 originalContent=""
@@ -945,6 +945,14 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
   );
 
   const isDeleteTool = toolItem.toolName === 'Delete';
+  const fileChangeAction =
+    toolItem.toolName === 'Write'
+      ? 'create'
+      : toolItem.toolName === 'Edit'
+        ? 'modify'
+        : toolItem.toolName === 'Delete'
+          ? 'delete'
+          : toolItem.toolName.toLowerCase();
 
   const getDeleteStatusIcon = () => {
     switch (status) {
@@ -965,9 +973,29 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
 
   const renderDeleteContent = () => {
     if (status === 'error') {
-      return `${t('toolCards.file.delete')}${t('toolCards.file.failed')}: ${fileName}`;
+      return (
+        <>
+          <span data-testid="chat-file-change-action" data-action={fileChangeAction}>
+            {t('toolCards.file.delete')}{t('toolCards.file.failed')}
+          </span>
+          {': '}
+          <span className="delete-file-name" data-testid="chat-file-change-path" data-path={currentFilePath}>
+            {fileName}
+          </span>
+        </>
+      );
     }
-    return <>{t('toolCards.file.delete')}: <span className="delete-file-name">{fileName}</span></>;
+    return (
+      <>
+        <span data-testid="chat-file-change-action" data-action={fileChangeAction}>
+          {t('toolCards.file.delete')}
+        </span>
+        {': '}
+        <span className="delete-file-name" data-testid="chat-file-change-path" data-path={currentFilePath}>
+          {fileName}
+        </span>
+      </>
+    );
   };
 
   const expandedContent = renderExpandedContent();
@@ -1006,6 +1034,8 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
             : undefined
         }
         action={actionText}
+        actionTestId="chat-file-change-action"
+        actionDataAttributes={{ 'data-action': fileChangeAction }}
       content={
         isFailed ? (
           <span
@@ -1020,7 +1050,11 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
         ) : (
           <>
             <Tooltip content={currentFilePath || fileName} placement="top">
-              <span className={`file-name ${isDeleteTool ? 'file-name--muted' : ''}`}>
+              <span
+                className={`file-name ${isDeleteTool ? 'file-name--muted' : ''}`}
+                data-testid="chat-file-change-path"
+                data-path={currentFilePath}
+              >
                 {fileName}
               </span>
             </Tooltip>
@@ -1119,57 +1153,75 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
 
   if (isDeleteTool) {
     return (
-      <CompactToolCard
-        status={status}
-        isExpanded={false}
-        className="read-file-card delete-file-card"
-        clickable={false}
-        header={
-          <CompactToolCardHeader
-            icon={getDeleteStatusIcon()}
-            content={renderDeleteContent()}
-            extra={showConfirmationActions ? (
-              <ToolCardHeaderActions className="file-op-header-actions">
-                {hasAcpPermissionOptions(toolItem) ? (
-                  <AcpPermissionActions
-                    toolItem={toolItem}
-                    input={toolCall?.input}
-                    buttonClassName="file-op-header-action"
-                    onConfirm={onConfirm}
-                    onReject={onReject}
-                  />
-                ) : (
-                  <>
-                    <IconButton
-                      className="tool-card-header-action file-op-header-action file-op-confirm-btn"
-                      variant="success"
-                      size="xs"
-                      onClick={handleConfirmClick}
-                      tooltip={t('toolCards.mcp.confirmExecute')}
-                    >
-                      <Check size={12} />
-                    </IconButton>
-                    <IconButton
-                      className="tool-card-header-action file-op-header-action file-op-reject-btn"
-                      variant="danger"
-                      size="xs"
-                      onClick={handleRejectClick}
-                      tooltip={t('toolCards.mcp.cancel')}
-                    >
-                      <X size={12} />
-                    </IconButton>
-                  </>
-                )}
-              </ToolCardHeaderActions>
-            ) : undefined}
-          />
-        }
-      />
+      <div
+        ref={cardRootRef}
+        data-testid="chat-file-change-card"
+        data-tool-card-id={toolId ?? ''}
+        data-status={status}
+        data-action={fileChangeAction}
+        data-path={currentFilePath}
+        data-expanded="false"
+      >
+        <CompactToolCard
+          status={status}
+          isExpanded={false}
+          className="read-file-card delete-file-card"
+          clickable={false}
+          header={
+            <CompactToolCardHeader
+              icon={getDeleteStatusIcon()}
+              content={renderDeleteContent()}
+              extra={showConfirmationActions ? (
+                <ToolCardHeaderActions className="file-op-header-actions">
+                  {hasAcpPermissionOptions(toolItem) ? (
+                    <AcpPermissionActions
+                      toolItem={toolItem}
+                      input={toolCall?.input}
+                      buttonClassName="file-op-header-action"
+                      onConfirm={onConfirm}
+                      onReject={onReject}
+                    />
+                  ) : (
+                    <>
+                      <IconButton
+                        className="tool-card-header-action file-op-header-action file-op-confirm-btn"
+                        variant="success"
+                        size="xs"
+                        onClick={handleConfirmClick}
+                        tooltip={t('toolCards.mcp.confirmExecute')}
+                      >
+                        <Check size={12} />
+                      </IconButton>
+                      <IconButton
+                        className="tool-card-header-action file-op-header-action file-op-reject-btn"
+                        variant="danger"
+                        size="xs"
+                        onClick={handleRejectClick}
+                        tooltip={t('toolCards.mcp.cancel')}
+                      >
+                        <X size={12} />
+                      </IconButton>
+                    </>
+                  )}
+                </ToolCardHeaderActions>
+              ) : undefined}
+            />
+          }
+        />
+      </div>
     );
   }
 
   return (
-    <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
+    <div
+      ref={cardRootRef}
+      data-testid="chat-file-change-card"
+      data-tool-card-id={toolId ?? ''}
+      data-status={status}
+      data-action={fileChangeAction}
+      data-path={currentFilePath}
+      data-expanded={isCardContentExpanded ? 'true' : 'false'}
+    >
       <BaseToolCard
         status={status}
         isExpanded={isCardContentExpanded}
diff --git a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
index 721c24ef5d..7101d61f9a 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
@@ -30,6 +30,26 @@ export const InitMiniAppDisplay: React.FC<ToolCardProps> = ({ toolItem }) => {
 
   const appId = toolResult?.result?.app_id as string | undefined;
   const path = toolResult?.result?.path as string | undefined;
+  const miniAppFiles = useMemo(() => {
+    const files = toolResult?.result?.files;
+    if (Array.isArray(files)) {
+      return files
+        .map(file => {
+          if (typeof file === 'string') return file;
+          if (file && typeof file === 'object') {
+            const record = file as Record<string, unknown>;
+            return typeof record.path === 'string'
+              ? record.path
+              : typeof record.file_path === 'string'
+                ? record.file_path
+                : '';
+          }
+          return '';
+        })
+        .filter((filePath): filePath is string => filePath.length > 0);
+    }
+    return path ? [path] : [];
+  }, [path, toolResult?.result?.files]);
   const success = toolResult?.success === true;
   const isLoading = status === 'running' || status === 'streaming' || status === 'preparing';
   const isFailed = status === 'error' || (status === 'completed' && toolResult != null && toolResult.success === false);
@@ -89,7 +109,13 @@ export const InitMiniAppDisplay: React.FC<ToolCardProps> = ({ toolItem }) => {
                 ? t('toolCards.initMiniApp.operationInit')
                 : t('toolCards.initMiniApp.skeletonReady')}
           </span>
-          <span className="command-text">{commandText}</span>
+          <span
+            className="command-text"
+            data-testid="chat-miniapp-title"
+            data-app-id={appId || ''}
+          >
+            {commandText}
+          </span>
         </span>
       }
       extra={
@@ -114,26 +140,33 @@ export const InitMiniAppDisplay: React.FC<ToolCardProps> = ({ toolItem }) => {
     if (!appId) return null;
     return (
       <div className="miniapp-result-container">
-        <div className="miniapp-result-rows">
+        <div className="miniapp-result-rows" data-testid="chat-miniapp-file-list">
           <div className="miniapp-result-row">
             <span className="miniapp-result-label">{t('toolCards.initMiniApp.labelAppId')}</span>
             <span className="miniapp-result-value" title={appId}>
               {appId}
             </span>
           </div>
-          {path ? (
-            <div className="miniapp-result-row">
+          {miniAppFiles.map(filePath => (
+            <div
+              key={filePath}
+              className="miniapp-result-row"
+              data-testid="chat-miniapp-file-row"
+              data-path={filePath}
+            >
               <span className="miniapp-result-label">{t('toolCards.initMiniApp.labelPath')}</span>
-              <span className="miniapp-result-value" title={path}>
-                {path}
+              <span className="miniapp-result-value" title={filePath}>
+                {filePath}
               </span>
             </div>
-          ) : null}
+          ))}
         </div>
         <div className="miniapp-result-footer miniapp-action-buttons">
           <button
             type="button"
             className="miniapp-open-btn"
+            data-testid="chat-miniapp-open-btn"
+            data-app-id={appId}
             onClick={() => openScene(`miniapp:${appId}`)}
             title={t('toolCards.initMiniApp.openInMiniAppTitle')}
           >
@@ -167,7 +200,14 @@ export const InitMiniAppDisplay: React.FC<ToolCardProps> = ({ toolItem }) => {
   };
 
   return (
-    <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
+    <div
+      ref={cardRootRef}
+      data-testid="chat-miniapp-card"
+      data-tool-card-id={toolId ?? ''}
+      data-status={status}
+      data-app-id={appId || ''}
+      data-expanded={isExpanded ? 'true' : 'false'}
+    >
       <BaseToolCard
         status={status}
         isExpanded={isExpanded}
diff --git a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx
index 9c6146cc16..403876de05 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.tsx
@@ -243,8 +243,17 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
   ].filter(Boolean).join(' ');
 
   return (
-    <div ref={wrapperRef} data-tool-card-id={thinkingItem.id} className={wrapperClassName}>
+    <div
+      ref={wrapperRef}
+      data-testid="chat-thinking-panel"
+      data-tool-card-id={thinkingItem.id}
+      data-status={status}
+      data-streaming={isActive ? 'true' : 'false'}
+      data-expanded={isExpanded ? 'true' : 'false'}
+      className={wrapperClassName}
+    >
       <div
+        data-testid="chat-thinking-toggle"
         className="thinking-collapsed-header"
         onClick={handleToggleClick}
       >
@@ -256,6 +265,9 @@ export const ModelThinkingDisplay: React.FC<ModelThinkingDisplayProps> = ({
         <div className={`thinking-content-wrapper ${scrollState.hasScroll ? 'has-scroll' : ''} ${scrollState.atTop ? 'at-top' : ''} ${scrollState.atBottom ? 'at-bottom' : ''}`}>
           <div
             ref={contentRef}
+            data-testid="chat-thinking-content"
+            data-status={status}
+            data-streaming={isActive ? 'true' : 'false'}
             className={`thinking-content expanded`}
             onScroll={checkScrollState}
             onWheelCapture={handleContentWheelCapture}
diff --git a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
index 766eb6b02b..41f3a3fa81 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
@@ -101,7 +101,7 @@ function renderTerminalExpandedContent(params: {
   return (
     <>
       {viewState.displayPhase === 'live_output' && (
-        <div className="terminal-execution-output">
+        <div className="terminal-execution-output" data-testid="chat-shell-command-output">
           <LazyTerminalOutputRenderer
             content={liveOutput}
             className="terminal-xterm-output"
@@ -111,7 +111,7 @@ function renderTerminalExpandedContent(params: {
       )}
 
       {(viewState.displayPhase === 'receiving_params' || viewState.displayPhase === 'executing') && waitingMessage && (
-        <div className="terminal-execution-output terminal-waiting">
+        <div className="terminal-execution-output terminal-waiting" data-testid="chat-shell-command-output">
           <span className="waiting-text">{waitingMessage}</span>
         </div>
       )}
@@ -119,7 +119,7 @@ function renderTerminalExpandedContent(params: {
       {viewState.showCompletedResult && (
         <div className="terminal-result-container">
           {parsedResult.output && (
-            <div className="terminal-result-output">
+            <div className="terminal-result-output" data-testid="chat-shell-command-output">
               <LazyTerminalOutputRenderer
                 content={parsedResult.output}
                 className="terminal-xterm-output"
@@ -134,7 +134,12 @@ function renderTerminalExpandedContent(params: {
                 <span className="terminal-result-value">{parsedResult.workingDir}</span>
               </>
             )}
-            <span className={`terminal-exit-code ${parsedResult.exitCode === 0 ? 'success' : 'error'}`}>
+            <span
+              className={`terminal-exit-code ${parsedResult.exitCode === 0 ? 'success' : 'error'}`}
+              data-testid="chat-shell-command-exit-code"
+              data-exit-code={parsedResult.exitCode}
+              data-status={parsedResult.exitCode === 0 ? 'success' : 'error'}
+            >
               {t('toolCards.terminal.exitCode', { code: parsedResult.exitCode })}
             </span>
             {parsedResult.executionTimeMs && (
@@ -148,7 +153,7 @@ function renderTerminalExpandedContent(params: {
 
       {viewState.showCancelledResult && (
         <div className="terminal-result-container cancelled">
-          <div className="terminal-result-output">
+          <div className="terminal-result-output" data-testid="chat-shell-command-output">
             <LazyTerminalOutputRenderer
               content={liveOutput}
               className="terminal-xterm-output"
@@ -599,6 +604,7 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
             : 'terminal-command'
         }
         tooltipContent={commandText && isCommandTruncated ? commandText : undefined}
+        data-testid="chat-shell-command-text"
       />
     );
   };
@@ -642,7 +648,14 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
     : null;
 
   return (
-    <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
+    <div
+      ref={cardRootRef}
+      data-testid="chat-shell-command-card"
+      data-tool-card-id={toolId ?? ''}
+      data-status={status}
+      data-expanded={isExpanded ? 'true' : 'false'}
+      data-terminal-session-id={terminalSessionId || ''}
+    >
       {isExpanded ? (
         <BaseToolCard
           status={status}
diff --git a/src/web-ui/src/flow_chat/tool-cards/ToolCommandPreview.tsx b/src/web-ui/src/flow_chat/tool-cards/ToolCommandPreview.tsx
index 50e54825b0..5cde87eeaa 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ToolCommandPreview.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/ToolCommandPreview.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Tooltip } from '../../component-library';
 import './ToolCommandPreview.scss';
 
-interface ToolCommandPreviewProps {
+interface ToolCommandPreviewProps extends React.HTMLAttributes<HTMLElement> {
   command?: string | null;
   emptyText: React.ReactNode;
   as?: 'span' | 'code';
@@ -18,17 +18,18 @@ export const ToolCommandPreview = React.forwardRef<HTMLElement, ToolCommandPrevi
   className,
   tooltipContent,
   tooltipPlacement = 'bottom',
+  ...restProps
 }, ref) => {
   const content = command?.trim()
     ? command
     : <span className="tool-command-preview__empty">{emptyText}</span>;
   const resolvedClassName = `tool-command-preview${className ? ` ${className}` : ''}`;
   const node = as === 'code' ? (
-    <code ref={ref} className={resolvedClassName}>
+    <code ref={ref} className={resolvedClassName} {...restProps}>
       {content}
     </code>
   ) : (
-    <span ref={ref} className={resolvedClassName}>
+    <span ref={ref} className={resolvedClassName} {...restProps}>
       {content}
     </span>
   );

From f917b99b521e423845985ad539de01d6cdaf86aa Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Thu, 18 Jun 2026 17:06:20 +0800
Subject: [PATCH 07/13] test: add chat result toggle test ids

---
 docs/development/ui-testids-CN.md                           | 2 ++
 docs/development/ui-testids.md                              | 2 ++
 src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx        | 4 ++++
 src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx     | 6 ++++++
 .../src/flow_chat/tool-cards/FileOperationToolCard.tsx      | 1 +
 src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx    | 2 ++
 6 files changed, 17 insertions(+)

diff --git a/docs/development/ui-testids-CN.md b/docs/development/ui-testids-CN.md
index 0e794ef50f..f04d19a5af 100644
--- a/docs/development/ui-testids-CN.md
+++ b/docs/development/ui-testids-CN.md
@@ -195,10 +195,12 @@
 | Chat thinking 展开按钮 | `chat-thinking-toggle` | 可点击的 thinking 展开/收起 header。 |
 | Chat thinking 内容 | `chat-thinking-content` | thinking/reasoning 文本内容。包含 `data-status` 和 `data-streaming`。 |
 | Chat shell 命令卡片 | `chat-shell-command-card` | Shell 命令工具卡根节点。包含 `data-status`、`data-expanded` 和 `data-terminal-session-id`。 |
+| Chat shell 命令展开按钮 | `chat-shell-command-toggle` | Shell 命令卡片的展开/收起点击目标。 |
 | Chat shell 命令文本 | `chat-shell-command-text` | Shell 命令文本节点。 |
 | Chat shell 命令输出 | `chat-shell-command-output` | Shell 命令 stdout/stderr 或实时输出区域。 |
 | Chat shell 命令退出码 | `chat-shell-command-exit-code` | 退出码节点。包含 `data-exit-code` 和 `data-status`。 |
 | Chat 文件变更卡片 | `chat-file-change-card` | 文件操作卡片根节点。包含 `data-status`、`data-action`、`data-path` 和 `data-expanded`。 |
+| Chat 文件变更展开按钮 | `chat-file-change-toggle` | 文件操作卡片的展开/收起点击目标。 |
 | Chat 文件变更路径 | `chat-file-change-path` | 文件路径/名称节点。包含 `data-path`。 |
 | Chat 文件变更动作 | `chat-file-change-action` | 文件操作动作节点。包含 `data-action`。 |
 | Chat 文件变更预览 | `chat-file-change-preview` | 文件操作卡片的代码/diff 预览区域。 |
diff --git a/docs/development/ui-testids.md b/docs/development/ui-testids.md
index c0ffe4bc3c..c4db624b97 100644
--- a/docs/development/ui-testids.md
+++ b/docs/development/ui-testids.md
@@ -194,10 +194,12 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Chat thinking toggle | `chat-thinking-toggle` | Clickable thinking expand/collapse header. |
 | Chat thinking content | `chat-thinking-content` | Thinking/reasoning text content. Includes `data-status` and `data-streaming`. |
 | Chat shell command card | `chat-shell-command-card` | Shell command tool card root. Includes `data-status`, `data-expanded`, and `data-terminal-session-id`. |
+| Chat shell command toggle | `chat-shell-command-toggle` | Click target for expanding/collapsing a shell command card. |
 | Chat shell command text | `chat-shell-command-text` | Shell command text node. |
 | Chat shell command output | `chat-shell-command-output` | Shell command stdout/stderr or live output area. |
 | Chat shell command exit code | `chat-shell-command-exit-code` | Exit code node. Includes `data-exit-code` and `data-status`. |
 | Chat file change card | `chat-file-change-card` | File operation card root. Includes `data-status`, `data-action`, `data-path`, and `data-expanded`. |
+| Chat file change toggle | `chat-file-change-toggle` | Click target for expanding/collapsing a file operation card. |
 | Chat file change path | `chat-file-change-path` | File path/name node. Includes `data-path`. |
 | Chat file change action | `chat-file-change-action` | File operation action node. Includes `data-action`. |
 | Chat file change preview | `chat-file-change-preview` | Code/diff preview area for file operation cards. |
diff --git a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
index 5aa0bc28d5..6837b88239 100644
--- a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
@@ -48,6 +48,8 @@ export interface BaseToolCardProps {
   isFailed?: boolean;
   /** Whether user confirmation is required (for highlighting border) */
   requiresConfirmation?: boolean;
+  /** data-testid for the real click target that expands/collapses the card. */
+  toggleTestId?: string;
   /**
    * When set, controls hover chevron on the left tool icon.
    * When omitted: true if the card is clickable, not failed, and expandedContent is passed and truthy.
@@ -71,6 +73,7 @@ export const BaseToolCard: React.FC<BaseToolCardProps> = ({
   errorContent,
   isFailed = false,
   requiresConfirmation = false,
+  toggleTestId,
   headerExpandAffordance: headerExpandAffordanceProp,
   headerAffordanceKind: headerAffordanceKindProp = 'expand',
 }) => {
@@ -108,6 +111,7 @@ export const BaseToolCard: React.FC<BaseToolCardProps> = ({
     >
       <div 
         className={`base-tool-card status-${status} ${isExpanded ? 'expanded' : ''} ${resolvedHeaderExpandAffordance ? 'base-tool-card--header-expandable' : ''}`.trim()}
+        data-testid={onClick ? toggleTestId : undefined}
         onClick={handleCardClick}
       >
         <ToolCardHeaderLayoutContext.Provider value={headerLayoutValue}>
diff --git a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
index e1dd1d7b0d..5f3a7976f7 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
@@ -28,6 +28,8 @@ export interface CompactToolCardProps {
   className?: string;
   /** Whether clickable */
   clickable?: boolean;
+  /** data-testid for the real click target that expands/collapses the card. */
+  toggleTestId?: string;
   /** Header content */
   header: ReactNode;
   /** Expanded content (optional) */
@@ -40,6 +42,7 @@ export const CompactToolCard: React.FC<CompactToolCardProps> = ({
   onClick,
   className = '',
   clickable = false,
+  toggleTestId,
   header,
   expandedContent,
 }) => {
@@ -68,6 +71,8 @@ export const CompactToolCard: React.FC<CompactToolCardProps> = ({
         header={header}
         expandedContent={expandedContent}
         headerExpandAffordance={clickable || Boolean(onClick)}
+        toggleTestId={toggleTestId}
+        headerExpandAffordance={clickable || Boolean(onClick)}
       />
     );
   }
@@ -78,6 +83,7 @@ export const CompactToolCard: React.FC<CompactToolCardProps> = ({
     >
       <div
         className={`compact-tool-card status-${status} ${clickable ? 'clickable' : ''} ${isExpanded ? 'expanded' : ''}`}
+        data-testid={clickable || Boolean(onClick) ? toggleTestId : undefined}
         onClick={handleWrapperClick}
         style={{ cursor: clickable ? 'pointer' : 'default' }}
       >
diff --git a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
index 0ce0dd7539..abf13e5a02 100644
--- a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
@@ -1236,6 +1236,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
         }
         isFailed={isFailed}
         requiresConfirmation={showConfirmationActions}
+        toggleTestId="chat-file-change-toggle"
         headerExpandAffordance={hasExpandableContent}
         headerAffordanceKind="expand"
       />
diff --git a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
index 41f3a3fa81..8f46e96472 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
@@ -667,6 +667,7 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
           errorContent={errorContent}
           isFailed={viewState.isFailed}
           requiresConfirmation={showConfirmButtons}
+          toggleTestId="chat-shell-command-toggle"
         />
       ) : (
         <CompactToolCard
@@ -675,6 +676,7 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
           onClick={handleCardClick}
           className="terminal-tool-card terminal-tool-card--compact-collapsed"
           clickable
+          toggleTestId="chat-shell-command-toggle"
           header={renderCompactHeader()}
         />
       )}

From f18b5d0d76949864404ceeb26151f50aecb96442 Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 23 Jun 2026 11:27:35 +0800
Subject: [PATCH 08/13] test: add e2e UI locators

Add stable data-testid and data-* attributes for agent, skill, shell, browser, and terminal UI automation. Update UI test id documentation in English and Chinese.
---
 docs/development/ui-testids-CN.md             | 89 ++++++++++++++++---
 docs/development/ui-testids.md                | 89 ++++++++++++++++---
 .../GalleryLayout/GalleryDetailModal.tsx      | 21 ++++-
 .../components/GalleryLayout/GalleryEmpty.tsx |  4 +-
 .../src/app/components/NavPanel/MainNav.tsx   | 13 +--
 .../components/PersistentFooterActions.tsx    |  4 +-
 .../src/app/scenes/agents/AgentsScene.tsx     | 20 ++++-
 .../scenes/agents/components/AgentCard.tsx    |  7 +-
 .../agents/components/CoreAgentCard.tsx       |  7 +-
 .../src/app/scenes/browser/BrowserPanel.tsx   | 20 +++--
 .../src/app/scenes/browser/BrowserScene.tsx   | 20 +++--
 src/web-ui/src/app/scenes/shell/ShellNav.tsx  |  8 +-
 .../src/app/scenes/shell/ShellScene.tsx       |  2 +-
 .../shell/components/ShellNavEntryItem.tsx    | 11 ++-
 .../src/app/scenes/skills/SkillsScene.tsx     | 35 +++++---
 .../src/app/scenes/terminal/TerminalScene.tsx |  6 +-
 .../components/Modal/Modal.tsx                | 12 ++-
 .../src/flow_chat/components/FlowToolCard.tsx | 13 ++-
 .../flow_chat/tool-cards/TerminalToolCard.tsx |  1 +
 .../terminal/components/ConnectedTerminal.tsx | 33 +++++--
 .../tools/terminal/components/Terminal.tsx    |  4 +
 21 files changed, 332 insertions(+), 87 deletions(-)

diff --git a/docs/development/ui-testids-CN.md b/docs/development/ui-testids-CN.md
index f04d19a5af..739cee7d89 100644
--- a/docs/development/ui-testids-CN.md
+++ b/docs/development/ui-testids-CN.md
@@ -64,8 +64,8 @@
   - `nav-workspace-item` + `data-workspace-id`
   - `nav-session-item` + `data-session-id`
   - `settings-nav-tab` + `data-settings-tab`
-  - `agents-agent-card` + `data-agent-id`
-  - `skills-installed-card` + `data-skill-key`
+  - `agent-list-item` + `data-agent-id` / `data-agent-name`
+  - `skill-list-item` + `data-skill-id` / `data-skill-name`
   - `skills-market-card` + `data-skill-install-id`
 
 ## App Shell
@@ -101,16 +101,18 @@
 | 新建 Code 会话按钮 | `nav-new-code-session-btn` | 为活动项目工作区创建或打开 code 会话。 |
 | 新建 Cowork 会话按钮 | `nav-new-cowork-session-btn` | 为活动项目工作区创建或打开 cowork 会话。 |
 | Assistant 按钮 | `nav-assistant-btn` | 打开 assistant/persona 场景。 |
-| Extensions 展开按钮 | `nav-extensions-toggle` | 展开 Agents/Skills 入口。 |
-| Agents 按钮 | `nav-agents-btn` | 打开 Agents 场景。 |
-| Skills 按钮 | `nav-skills-btn` | 打开 Skills 场景。 |
+| Agent/Skill 入口 | `agent-skill-entry` | 展开 Agents/Skills 导航入口组。 |
+| Agent/Skill 面板 | `agent-skill-panel` | Agents/Skills 入口组或当前发现页根节点。 |
+| Agent/Skill tabs | `agent-skill-tabs` | Agent 和 Skill 入口 tab 容器。 |
+| Agent tab | `agent-tab` | 打开 Agents 发现页。 |
+| Skill tab | `skill-tab` | 打开 Skills 发现页。 |
 | 导航 sections 容器 | `nav-sections` | 工作区/会话 section 容器。 |
 | 导航底部栏 | `nav-bottom-bar` | Mini App/footer 区域容器。 |
 | 底部更多按钮 | `nav-footer-more-btn` | 打开底部溢出菜单。 |
 | 底部菜单 | `nav-footer-menu` | 由底部更多按钮打开的溢出菜单。 |
 | 底部设置菜单项 | `nav-footer-settings-item` | 从底部菜单打开 Settings 场景。 |
-| 底部 Shell 按钮 | `nav-footer-shell-btn` | 打开或关闭 shell 场景导航。 |
-| 底部 Browser 按钮 | `nav-footer-browser-btn` | 根据当前上下文打开 browser 场景或 browser 面板。 |
+| 底部 Shell 按钮 | `shell-panel-entry` | 打开或关闭 shell 场景导航。 |
+| 底部 Browser 按钮 | `browser-panel-entry` | 根据当前上下文打开 browser 场景或 browser 面板。 |
 
 ## Navigation Workspaces
 
@@ -199,6 +201,9 @@
 | Chat shell 命令文本 | `chat-shell-command-text` | Shell 命令文本节点。 |
 | Chat shell 命令输出 | `chat-shell-command-output` | Shell 命令 stdout/stderr 或实时输出区域。 |
 | Chat shell 命令退出码 | `chat-shell-command-exit-code` | 退出码节点。包含 `data-exit-code` 和 `data-status`。 |
+| Chat shell 工具卡片 | `chat-shell-tool-card` | Bash 的外层 FlowToolCard wrapper。包含 `data-tool-name` 和 `data-tool-card-id`。 |
+| Chat shell 工具打开面板按钮 | `chat-shell-tool-open-panel` | 存在 terminal session 时，从 Bash ToolCard 打开关联终端面板。 |
+| Chat browser 工具卡片 | `chat-browser-tool-card` | WebFetch 的外层 FlowToolCard wrapper。包含 `data-tool-name` 和 `data-tool-card-id`。 |
 | Chat 文件变更卡片 | `chat-file-change-card` | 文件操作卡片根节点。包含 `data-status`、`data-action`、`data-path` 和 `data-expanded`。 |
 | Chat 文件变更展开按钮 | `chat-file-change-toggle` | 文件操作卡片的展开/收起点击目标。 |
 | Chat 文件变更路径 | `chat-file-change-path` | 文件路径/名称节点。包含 `data-path`。 |
@@ -244,6 +249,48 @@
 | 模型行 | `settings-model-row` | 重复的已保存模型行。配合 `data-model-id`、`data-model-name` 和 `data-config-id` 使用。 |
 | 模型测试状态 | `settings-model-test-status` | 重复的已保存模型测试状态。配合 `data-model-id`、`data-model-name`、`data-config-id` 和 `data-status` 使用，`data-status` 可为 `success` 或 `error`。 |
 
+## Shell Panel
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| Shell 面板入口 | `shell-panel-entry` | 打开 Shell 场景/导航的底部入口。 |
+| Shell 面板 | `shell-panel` | Shell 场景、Shell 导航或 Terminal 场景根节点。 |
+| Shell 面板标题 | `shell-panel-title` | Shell 导航标题或当前终端 toolbar 标题。 |
+| Shell 命令列表 | `shell-command-list` | Shell 导航终端列表或当前终端容器。 |
+| Shell 命令项 | `shell-command-item` | Shell 导航行或当前 xterm 根节点。包含 `data-command-id`，可用时包含 `data-command-status`。 |
+| Shell 命令文本 | `shell-command-text` | Shell 导航中的终端/session 标签。 |
+| Shell 命令输出 | `shell-command-output` | 当前终端的真实 xterm 输出容器。 |
+| Shell 命令退出码 | `shell-command-exit-code` | session 退出后终端状态栏中的退出码。包含 `data-exit-code` 和 `data-status`。 |
+| Shell 命令状态 | `shell-command-status` | Shell 导航状态点、终端加载/错误状态或终端状态栏。包含 `data-command-status`。 |
+| Shell 命令重新运行 | `shell-command-rerun` | 终端错误状态下的重试按钮，或活动终端 toolbar 上的 Ctrl+C 动作。 |
+| Shell 面板关闭 | `shell-panel-close` | 当前终端关闭按钮。 |
+
+说明：
+
+- 独立 xterm 终端没有结构化的逐命令历史 DOM。测试应使用 `shell-command-output` 断言终端渲染输出，使用 `chat-shell-command-*` 断言结构化 Bash ToolCard。
+- `shell-command-copy` 当前未暴露，因为活动终端复制能力基于选择/右键上下文菜单，并不是稳定可见按钮。
+
+## Browser Panel
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| Browser 面板入口 | `browser-panel-entry` | 根据当前上下文打开 Browser 场景或 Browser 面板的底部入口。 |
+| Browser 面板 | `browser-panel` | Browser 场景或右侧 Browser 面板根节点。 |
+| Browser 面板标题 | `browser-panel-title` | Browser toolbar/form 区域。 |
+| Browser URL 输入框 | `browser-url-input` | 真实 URL 输入框。按 Enter 打开输入的 URL。 |
+| Browser 页面容器 | `browser-page-frame` | iframe/webview host 内容区域。 |
+| Browser 加载状态 | `browser-loading-indicator` | URL 加载中时的刷新/加载图标。 |
+| Browser 错误信息 | `browser-error-message` | URL 校验、连通性或 webview 加载失败信息。 |
+| Browser 当前 URL | `browser-current-url` | webview placeholder 中展示的当前 URL。 |
+| Browser 刷新按钮 | `browser-refresh-button` | 刷新当前 Browser 页面。 |
+| Browser 后退按钮 | `browser-back-button` | Browser 历史后退。 |
+| Browser 前进按钮 | `browser-forward-button` | Browser 历史前进。 |
+
+说明：
+
+- `browser-open-button` 当前未暴露，因为 URL 导航通过现有地址栏表单按 Enter 提交；当前没有独立可见的打开按钮。
+- `browser-panel-close` 属于外层 scene/canvas tab chrome，不在 Browser 组件自身内部。
+
 ## Notifications
 
 | 元素名称 | data-testid | 说明 |
@@ -267,8 +314,18 @@
 
 | 元素名称 | data-testid | 说明 |
 |---|---|---|
-| Agents 场景根节点 | `agents-scene` | Agents gallery 页面根节点。 |
-| Agents 区域容器 | `agents-zones` | 所有 agent 区域的容器。 |
+| Agent/Skill 面板 | `agent-skill-panel` | Agents 发现页激活时的场景根节点。 |
+| Agent 列表 | `agent-list` | 所有 agent 区域和卡片的容器。 |
+| Agent 列表项 | `agent-list-item` | 重复卡片。包含 `data-agent-id`、`data-agent-name` 和 `data-agent-kind`。 |
+| Agent 列表项标题 | `agent-list-item-title` | Agent 卡片标题。 |
+| Agent 列表项描述 | `agent-list-item-description` | Agent 卡片描述。 |
+| Agent 列表空状态 | `agent-list-empty` | Agent 列表区块为空时的状态。 |
+| Agent 详情面板 | `agent-detail-panel` | Agent 详情弹窗根节点。 |
+| Agent 详情标题 | `agent-detail-title` | Agent 详情弹窗标题。 |
+| Agent 详情描述 | `agent-detail-description` | Agent 详情描述。 |
+| Agent 详情工具区域 | `agent-detail-tools-section` | Agent 能力/工具区域。 |
+| Agent 详情工具项 | `agent-detail-tool-item` | 重复的已启用工具项。包含 `data-tool-name`。 |
+| Agent 详情关闭按钮 | `agent-detail-close` | 详情弹窗关闭按钮。 |
 | Core 锚点按钮 | `agents-anchor-core` | 滚动到 core agents 区域。 |
 | Teams 锚点按钮 | `agents-anchor-teams` | 滚动到 teams 区域。 |
 | Custom agents 锚点按钮 | `agents-anchor-custom` | 滚动到 custom agents 区域。 |
@@ -280,9 +337,7 @@
 | Agent source 过滤器 | `agents-source-filter` | 重复项。配合 `data-agent-source` 使用。 |
 | Agent kind 过滤器 | `agents-kind-filter` | 重复项。配合 `data-agent-kind` 使用。 |
 | 创建 agent 按钮 | `agents-create-agent-btn` | 打开 custom agent 创建页。 |
-| Core agent 卡片 | `agents-core-agent-card` | 重复项。配合 `data-agent-id` 和 `data-agent-kind` 使用。 |
 | Agent team 卡片 | `agents-team-card` | 重复项。配合 `data-team-id` 使用。 |
-| Agent 卡片 | `agents-agent-card` | 重复项。配合 `data-agent-id`、`data-agent-kind` 和 `data-subagent-source` 使用。 |
 | BTW 停止 review 按钮 | `btw-session-panel-stop-review` | 从 BTW 面板停止 review session。 |
 | BTW origin 按钮 | `btw-session-panel-origin-button` | 从 BTW 面板打开 origin session。 |
 
@@ -290,7 +345,17 @@
 
 | 元素名称 | data-testid | 说明 |
 |---|---|---|
-| Skills 场景根节点 | `skills-scene` | Skills 场景根节点。 |
+| Agent/Skill 面板 | `agent-skill-panel` | Skills 发现页激活时的场景根节点。 |
+| Skill 列表 | `skill-list` | 默认安装技能列表网格，也用于 marketplace 搜索结果。 |
+| Skill 列表项 | `skill-list-item` | 重复的已安装 skill 卡片。包含 `data-skill-id`、`data-skill-name`、`data-skill-key`、`data-skill-level` 和 `data-skill-builtin`。 |
+| Skill 列表项标题 | `skill-list-item-title` | Skill 卡片标题。 |
+| Skill 列表项描述 | `skill-list-item-description` | 存在时为 Skill 卡片描述。 |
+| Skill 列表空状态 | `skill-list-empty` | 已安装或 marketplace skill 列表为空时的状态。 |
+| Skill 详情面板 | `skill-detail-panel` | Skill 详情弹窗根节点。 |
+| Skill 详情标题 | `skill-detail-title` | Skill 详情弹窗标题。 |
+| Skill 详情描述 | `skill-detail-description` | Skill 详情描述。 |
+| Skill 详情能力区域 | `skill-detail-capabilities-section` | 已安装或 marketplace skill 的详情元数据/能力说明区域。 |
+| Skill 详情关闭按钮 | `skill-detail-close` | 详情弹窗关闭按钮。 |
 | Skills tabs 根节点 | `skills-tabs` | Installed/discover tabs 容器。 |
 | Installed tab | `skills-tab-installed` | 包含 `data-skills-tab-active`。 |
 | Discover tab | `skills-tab-discover` | 包含 `data-skills-tab-active`。 |
diff --git a/docs/development/ui-testids.md b/docs/development/ui-testids.md
index c4db624b97..18dfa533cd 100644
--- a/docs/development/ui-testids.md
+++ b/docs/development/ui-testids.md
@@ -65,8 +65,8 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
   - `nav-workspace-item` + `data-workspace-id`
   - `nav-session-item` + `data-session-id`
   - `settings-nav-tab` + `data-settings-tab`
-  - `agents-agent-card` + `data-agent-id`
-  - `skills-installed-card` + `data-skill-key`
+  - `agent-list-item` + `data-agent-id` / `data-agent-name`
+  - `skill-list-item` + `data-skill-id` / `data-skill-name`
   - `skills-market-card` + `data-skill-install-id`
 
 ## App Shell
@@ -102,16 +102,18 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | New code session button | `nav-new-code-session-btn` | Creates or opens a code session for the active project workspace. |
 | New cowork session button | `nav-new-cowork-session-btn` | Creates or opens a cowork session for the active project workspace. |
 | Assistant button | `nav-assistant-btn` | Opens assistant/persona scene. |
-| Extensions toggle | `nav-extensions-toggle` | Expands Agents/Skills entries. |
-| Agents button | `nav-agents-btn` | Opens Agents scene. |
-| Skills button | `nav-skills-btn` | Opens Skills scene. |
+| Agent/Skill entry | `agent-skill-entry` | Expands the Agents/Skills navigation entry group. |
+| Agent/Skill panel | `agent-skill-panel` | Agents/Skills entry group or active discovery scene root. |
+| Agent/Skill tabs | `agent-skill-tabs` | Navigation tab container for Agent and Skill entries. |
+| Agent tab | `agent-tab` | Opens the Agents discovery scene. |
+| Skill tab | `skill-tab` | Opens the Skills discovery scene. |
 | Navigation sections | `nav-sections` | Container for workspace/session sections. |
 | Navigation bottom bar | `nav-bottom-bar` | Container for Mini App/footer region. |
 | Footer more button | `nav-footer-more-btn` | Opens the footer overflow menu. |
 | Footer menu | `nav-footer-menu` | Overflow menu opened from the footer more button. |
 | Footer settings item | `nav-footer-settings-item` | Opens the Settings scene from the footer menu. |
-| Footer shell button | `nav-footer-shell-btn` | Opens or closes the shell scene nav. |
-| Footer browser button | `nav-footer-browser-btn` | Opens browser scene or browser panel depending on active context. |
+| Footer shell button | `shell-panel-entry` | Opens or closes the shell scene nav. |
+| Footer browser button | `browser-panel-entry` | Opens browser scene or browser panel depending on active context. |
 
 ## Navigation Workspaces
 
@@ -198,6 +200,9 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Chat shell command text | `chat-shell-command-text` | Shell command text node. |
 | Chat shell command output | `chat-shell-command-output` | Shell command stdout/stderr or live output area. |
 | Chat shell command exit code | `chat-shell-command-exit-code` | Exit code node. Includes `data-exit-code` and `data-status`. |
+| Chat shell tool card | `chat-shell-tool-card` | Outer FlowToolCard wrapper for Bash. Includes `data-tool-name` and `data-tool-card-id`. |
+| Chat shell tool open panel | `chat-shell-tool-open-panel` | Opens the associated terminal panel when a terminal session is available. |
+| Chat browser tool card | `chat-browser-tool-card` | Outer FlowToolCard wrapper for WebFetch. Includes `data-tool-name` and `data-tool-card-id`. |
 | Chat file change card | `chat-file-change-card` | File operation card root. Includes `data-status`, `data-action`, `data-path`, and `data-expanded`. |
 | Chat file change toggle | `chat-file-change-toggle` | Click target for expanding/collapsing a file operation card. |
 | Chat file change path | `chat-file-change-path` | File path/name node. Includes `data-path`. |
@@ -244,6 +249,48 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Model row | `settings-model-row` | Repeated saved model row. Pair with `data-model-id`, `data-model-name`, and `data-config-id`. |
 | Model test status | `settings-model-test-status` | Repeated saved model test status. Pair with `data-model-id`, `data-model-name`, `data-config-id`, and `data-status` (`success` or `error`). |
 
+## Shell Panel
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Shell panel entry | `shell-panel-entry` | Footer entry that opens the Shell scene/nav. |
+| Shell panel | `shell-panel` | Shell scene, shell nav, or terminal scene root. |
+| Shell panel title | `shell-panel-title` | Shell nav title or active terminal toolbar title. |
+| Shell command list | `shell-command-list` | Shell nav terminal list or active terminal container. |
+| Shell command item | `shell-command-item` | Shell nav row or active xterm root. Includes `data-command-id` and, when available, `data-command-status`. |
+| Shell command text | `shell-command-text` | Shell nav terminal/session label. |
+| Shell command output | `shell-command-output` | Real xterm output container for the active terminal. |
+| Shell command exit code | `shell-command-exit-code` | Terminal status bar exit code when the session has exited. Includes `data-exit-code` and `data-status`. |
+| Shell command status | `shell-command-status` | Shell nav status dot, terminal loading/error state, or terminal status bar. Includes `data-command-status`. |
+| Shell command rerun | `shell-command-rerun` | Retry button in terminal error state or Ctrl+C toolbar action on active terminal. |
+| Shell panel close | `shell-panel-close` | Active terminal close button. |
+
+Notes:
+
+- The standalone xterm terminal does not expose a structured per-command history DOM. Tests should use `shell-command-output` for rendered terminal output and `chat-shell-command-*` for structured Bash ToolCard assertions.
+- `shell-command-copy` is not currently exposed because the active terminal copy action is context-menu/selection driven rather than a stable visible button.
+
+## Browser Panel
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Browser panel entry | `browser-panel-entry` | Footer entry that opens the Browser scene or Browser panel, depending on active context. |
+| Browser panel | `browser-panel` | Browser scene or right-side Browser panel root. |
+| Browser panel title | `browser-panel-title` | Browser toolbar/form region. |
+| Browser URL input | `browser-url-input` | Real URL input field. Press Enter to open the typed URL. |
+| Browser page frame | `browser-page-frame` | iframe/webview host content area. |
+| Browser loading indicator | `browser-loading-indicator` | Refresh/loading icon while a URL is loading. |
+| Browser error message | `browser-error-message` | URL validation/connectivity/webview load failure message. |
+| Browser current URL | `browser-current-url` | Current URL display in the webview placeholder. |
+| Browser refresh button | `browser-refresh-button` | Refreshes the current browser page. |
+| Browser back button | `browser-back-button` | Navigates browser history back. |
+| Browser forward button | `browser-forward-button` | Navigates browser history forward. |
+
+Notes:
+
+- `browser-open-button` is not currently exposed because URL navigation is submitted by the existing address form via Enter; no dedicated visible open button exists.
+- `browser-panel-close` depends on the surrounding scene/canvas tab chrome rather than the Browser component itself.
+
 ## Notifications
 
 | Element name | data-testid | Notes |
@@ -267,8 +314,18 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 
 | Element name | data-testid | Notes |
 |---|---|---|
-| Agents scene root | `agents-scene` | Agents gallery page root. |
-| Agents zones container | `agents-zones` | Container for all agent zones. |
+| Agent/Skill panel | `agent-skill-panel` | Agents scene root when the Agents discovery page is active. |
+| Agent list | `agent-list` | Container for all agent zones and cards. |
+| Agent list item | `agent-list-item` | Repeated card. Includes `data-agent-id`, `data-agent-name`, and `data-agent-kind`. |
+| Agent list item title | `agent-list-item-title` | Agent card title. |
+| Agent list item description | `agent-list-item-description` | Agent card description. |
+| Agent list empty | `agent-list-empty` | Empty state for an agent list section. |
+| Agent detail panel | `agent-detail-panel` | Agent detail modal root. |
+| Agent detail title | `agent-detail-title` | Agent detail modal title. |
+| Agent detail description | `agent-detail-description` | Agent detail description. |
+| Agent detail tools section | `agent-detail-tools-section` | Agent capability/tools section. |
+| Agent detail tool item | `agent-detail-tool-item` | Repeated enabled tool item. Includes `data-tool-name`. |
+| Agent detail close | `agent-detail-close` | Modal close button. |
 | Core anchor button | `agents-anchor-core` | Scrolls to core agents zone. |
 | Teams anchor button | `agents-anchor-teams` | Scrolls to teams zone. |
 | Custom agents anchor button | `agents-anchor-custom` | Scrolls to custom agents zone. |
@@ -280,9 +337,7 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Agent source filter | `agents-source-filter` | Repeated item. Pair with `data-agent-source`. |
 | Agent kind filter | `agents-kind-filter` | Repeated item. Pair with `data-agent-kind`. |
 | Create agent button | `agents-create-agent-btn` | Opens custom agent creation page. |
-| Core agent card | `agents-core-agent-card` | Repeated item. Pair with `data-agent-id` and `data-agent-kind`. |
 | Agent team card | `agents-team-card` | Repeated item. Pair with `data-team-id`. |
-| Agent card | `agents-agent-card` | Repeated item. Pair with `data-agent-id`, `data-agent-kind`, and `data-subagent-source`. |
 | BTW stop review button | `btw-session-panel-stop-review` | Stops review session from BTW panel. |
 | BTW origin button | `btw-session-panel-origin-button` | Opens origin session from BTW panel. |
 
@@ -290,7 +345,17 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 
 | Element name | data-testid | Notes |
 |---|---|---|
-| Skills scene root | `skills-scene` | Skills scene root. |
+| Agent/Skill panel | `agent-skill-panel` | Skills scene root when the Skills discovery page is active. |
+| Skill list | `skill-list` | Installed skill list grid by default. Also used for marketplace results. |
+| Skill list item | `skill-list-item` | Repeated installed skill card. Includes `data-skill-id`, `data-skill-name`, `data-skill-key`, `data-skill-level`, and `data-skill-builtin`. |
+| Skill list item title | `skill-list-item-title` | Skill card title. |
+| Skill list item description | `skill-list-item-description` | Skill card description when present. |
+| Skill list empty | `skill-list-empty` | Empty state for installed or marketplace skill list. |
+| Skill detail panel | `skill-detail-panel` | Skill detail modal root. |
+| Skill detail title | `skill-detail-title` | Skill detail modal title. |
+| Skill detail description | `skill-detail-description` | Skill detail description. |
+| Skill detail capabilities section | `skill-detail-capabilities-section` | Detail metadata/capability rows for installed or marketplace skill. |
+| Skill detail close | `skill-detail-close` | Modal close button. |
 | Skills tabs root | `skills-tabs` | Installed/discover tabs container. |
 | Installed tab | `skills-tab-installed` | Includes `data-skills-tab-active`. |
 | Discover tab | `skills-tab-discover` | Includes `data-skills-tab-active`. |
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryDetailModal.tsx b/src/web-ui/src/app/components/GalleryLayout/GalleryDetailModal.tsx
index 567dd80464..28e539aa95 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryDetailModal.tsx
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryDetailModal.tsx
@@ -13,6 +13,10 @@ interface GalleryDetailModalProps {
   meta?: React.ReactNode;
   actions?: React.ReactNode;
   children?: React.ReactNode;
+  testId?: string;
+  titleTestId?: string;
+  descriptionTestId?: string;
+  closeButtonTestId?: string;
 }
 
 const GalleryDetailModal: React.FC<GalleryDetailModalProps> = ({
@@ -26,8 +30,21 @@ const GalleryDetailModal: React.FC<GalleryDetailModalProps> = ({
   meta,
   actions,
   children,
+  testId,
+  titleTestId,
+  descriptionTestId,
+  closeButtonTestId,
 }) => (
-  <Modal isOpen={isOpen} onClose={onClose} size="medium" title={title} contentInset>
+  <Modal
+    isOpen={isOpen}
+    onClose={onClose}
+    size="medium"
+    title={title}
+    contentInset
+    testId={testId}
+    titleTestId={titleTestId}
+    closeButtonTestId={closeButtonTestId}
+  >
     <div className="gallery-detail-modal">
       <div className="gallery-detail-modal__hero">
         {icon ? (
@@ -41,7 +58,7 @@ const GalleryDetailModal: React.FC<GalleryDetailModalProps> = ({
         <div className="gallery-detail-modal__summary">
           {badges ? <div className="gallery-detail-modal__badges">{badges}</div> : null}
           {description?.trim() ? (
-            <p className="gallery-detail-modal__description">{description.trim()}</p>
+            <p className="gallery-detail-modal__description" data-testid={descriptionTestId}>{description.trim()}</p>
           ) : null}
           {meta ? <div className="gallery-detail-modal__meta">{meta}</div> : null}
         </div>
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryEmpty.tsx b/src/web-ui/src/app/components/GalleryLayout/GalleryEmpty.tsx
index d0778922a6..5040f8386a 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryEmpty.tsx
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryEmpty.tsx
@@ -6,6 +6,7 @@ interface GalleryEmptyProps {
   isError?: boolean;
   action?: React.ReactNode;
   className?: string;
+  testId?: string;
 }
 
 const GalleryEmpty: React.FC<GalleryEmptyProps> = ({
@@ -14,8 +15,9 @@ const GalleryEmpty: React.FC<GalleryEmptyProps> = ({
   isError = false,
   action,
   className,
+  testId,
 }) => (
-  <div className={['gallery-empty', isError && 'gallery-empty--error', className].filter(Boolean).join(' ')}>
+  <div className={['gallery-empty', isError && 'gallery-empty--error', className].filter(Boolean).join(' ')} data-testid={testId}>
     {icon}
     <span>{message}</span>
     {action}
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index 0ca748e9a6..feed2417ad 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -529,7 +529,7 @@ const MainNav: React.FC<MainNavProps> = ({
           </button>
         </Tooltip>
 
-        <div className="bitfun-nav-panel__top-action-expand">
+        <div className="bitfun-nav-panel__top-action-expand" data-testid="agent-skill-panel">
           <Tooltip content={extensionsLabel} placement="right" followCursor>
             <button
               type="button"
@@ -541,7 +541,7 @@ const MainNav: React.FC<MainNavProps> = ({
               onClick={() => setIsExtensionsOpen(v => !v)}
               aria-expanded={isExtensionsOpen}
               aria-label={extensionsLabel}
-              data-testid="nav-extensions-toggle"
+              data-testid="agent-skill-entry"
             >
               <span className="bitfun-nav-panel__top-action-expand-icons" aria-hidden="true">
                 <Blocks size={15} className="bitfun-nav-panel__top-action-expand-icon-default" />
@@ -557,7 +557,10 @@ const MainNav: React.FC<MainNavProps> = ({
             </button>
           </Tooltip>
 
-          <div className={`bitfun-nav-panel__top-action-sublist${isExtensionsOpen ? ' is-open' : ''}`}>
+          <div
+            className={`bitfun-nav-panel__top-action-sublist${isExtensionsOpen ? ' is-open' : ''}`}
+            data-testid="agent-skill-tabs"
+          >
             <Tooltip content={agentsTooltip} placement="right" followCursor>
               <button
                 type="button"
@@ -568,7 +571,7 @@ const MainNav: React.FC<MainNavProps> = ({
                 ].filter(Boolean).join(' ')}
                 onClick={handleOpenAgents}
                 aria-label={agentsTooltip}
-                data-testid="nav-agents-btn"
+                data-testid="agent-tab"
               >
                 <span className="bitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
                   <Users size={15} />
@@ -587,7 +590,7 @@ const MainNav: React.FC<MainNavProps> = ({
                 ].filter(Boolean).join(' ')}
                 onClick={handleOpenSkills}
                 aria-label={skillsTooltip}
-                data-testid="nav-skills-btn"
+                data-testid="skill-tab"
               >
                 <span className="bitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
                   <Puzzle size={15} />
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 10e293d574..c62f36d7c3 100644
--- a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
@@ -251,7 +251,7 @@ const PersistentFooterActions: React.FC = () => {
               aria-label={t('scenes.shell')}
               aria-pressed={showSceneNav && navSceneId === 'shell'}
               onClick={handleOpenShell}
-              data-testid="nav-footer-shell-btn"
+              data-testid="shell-panel-entry"
             >
               <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
                 <SquareTerminal size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
@@ -267,7 +267,7 @@ const PersistentFooterActions: React.FC = () => {
               aria-label={t('scenes.browser')}
               aria-pressed={isBrowserActive}
               onClick={handleOpenBrowser}
-              data-testid="nav-footer-browser-btn"
+              data-testid="browser-panel-entry"
             >
               <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
                 <Globe size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
index 04bf54bf65..74c0654d89 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -556,7 +556,7 @@ const AgentsHomeView: React.FC = () => {
   );
 
   return (
-    <GalleryLayout className="bitfun-agents-scene" data-testid="agents-scene">
+    <GalleryLayout className="bitfun-agents-scene" data-testid="agent-skill-panel">
       <GalleryPageHeader
         title={t('page.title')}
         subtitle={t('page.subtitle')}
@@ -612,7 +612,7 @@ const AgentsHomeView: React.FC = () => {
         )}
       />
 
-      <div className="gallery-zones" data-testid="agents-zones">
+      <div className="gallery-zones" data-testid="agent-list">
         <GalleryZone
           id="core-agents-zone"
           data-testid="agents-core-zone"
@@ -628,6 +628,7 @@ const AgentsHomeView: React.FC = () => {
             <GalleryEmpty
               icon={<Cpu size={32} strokeWidth={1.5} />}
               message={t('coreAgentsZone.empty')}
+              testId="agent-list-empty"
             />
           ) : (
             <div className="core-agents-grid">
@@ -766,6 +767,7 @@ const AgentsHomeView: React.FC = () => {
             <GalleryEmpty
               icon={<Bot size={32} strokeWidth={1.5} />}
               message={allAgents.length === 0 ? t('agentsZone.empty.noAgents') : t('agentsZone.empty.noMatch')}
+              testId="agent-list-empty"
             />
           ) : null}
 
@@ -826,6 +828,10 @@ const AgentsHomeView: React.FC = () => {
         description={selectedAgent
           ? getAgentDescription(t, selectedAgent)
           : undefined}
+        testId="agent-detail-panel"
+        titleTestId="agent-detail-title"
+        descriptionTestId="agent-detail-description"
+        closeButtonTestId="agent-detail-close"
         meta={selectedAgent ? (
           <>
             <span>{t('agentCard.meta.tools', { count: selectedAgentToolCount })}</span>
@@ -884,7 +890,7 @@ const AgentsHomeView: React.FC = () => {
             ) : null}
 
             {selectedAgentCapabilityTabs.length > 0 ? (
-              <div className="agent-card__section">
+              <div className="agent-card__section" data-testid="agent-detail-tools-section">
                 <div className="agent-card__section-head">
                   <div className="agent-card__tab-list" role="tablist" aria-label={t('agentsOverview.capabilities')}>
                     {selectedAgentCapabilityTabs.map((tab) => {
@@ -1121,7 +1127,13 @@ const AgentsHomeView: React.FC = () => {
                   ) : (
                     <div className="agent-card__chip-grid">
                       {selectedAgentTools.map((tool) => (
-                        <span key={tool} className="agent-card__chip" title={tool}>
+                        <span
+                          key={tool}
+                          className="agent-card__chip"
+                          title={tool}
+                          data-testid="agent-detail-tool-item"
+                          data-tool-name={tool}
+                        >
                           {tool.replace(/_/g, ' ')}
                         </span>
                       ))}
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
index 6e6c75d01f..715bba0fb1 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/AgentCard.tsx
@@ -51,8 +51,9 @@ const AgentCard: React.FC<AgentCardProps> = ({
       tabIndex={0}
       onKeyDown={(e) => e.key === 'Enter' && openDetails()}
       aria-label={agent.name}
-      data-testid="agents-agent-card"
+      data-testid="agent-list-item"
       data-agent-id={agent.id}
+      data-agent-name={agent.name}
       data-agent-kind={agent.agentKind}
       data-subagent-source={agent.subagentSource ?? ''}
     >
@@ -65,7 +66,7 @@ const AgentCard: React.FC<AgentCardProps> = ({
         </div>
         <div className="agent-card__header-info">
           <div className="agent-card__title-row">
-            <span className="agent-card__name">{agent.name}</span>
+            <span className="agent-card__name" data-testid="agent-list-item-title">{agent.name}</span>
             <div className="agent-card__badges">
               <Badge variant={badge.variant}>
                 {agent.agentKind === 'mode' ? <Cpu size={10} /> : <Bot size={10} />}
@@ -81,7 +82,7 @@ const AgentCard: React.FC<AgentCardProps> = ({
 
       {/* Body: description + meta */}
       <div className="agent-card__body">
-        <p className="agent-card__desc">
+        <p className="agent-card__desc" data-testid="agent-list-item-description">
           {getAgentDescription(t, agent)}
         </p>
       </div>
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
index a63ecea5ad..ec28589790 100644
--- a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
@@ -61,8 +61,9 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
       tabIndex={0}
       onKeyDown={(e) => e.key === 'Enter' && openDetails()}
       aria-label={agent.name}
-      data-testid="agents-core-agent-card"
+      data-testid="agent-list-item"
       data-agent-id={agent.id}
+      data-agent-name={agent.name}
       data-agent-kind={agent.agentKind}
     >
       <div className="core-agent-card__top">
@@ -70,7 +71,7 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
           <Icon size={28} strokeWidth={1.6} />
         </div>
         <div className="core-agent-card__top-info">
-          <span className="core-agent-card__name">{agent.name}</span>
+          <span className="core-agent-card__name" data-testid="agent-list-item-title">{agent.name}</span>
           <span className="core-agent-card__role">
             <Sparkles size={10} strokeWidth={2} />
             {meta.role}
@@ -79,7 +80,7 @@ const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
       </div>
 
       <div className="core-agent-card__body">
-        <p className="core-agent-card__desc">
+        <p className="core-agent-card__desc" data-testid="agent-list-item-description">
           {getAgentDescription(t, agent)}
         </p>
       </div>
diff --git a/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx b/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
index 30b920a719..e46d1e8a8e 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
+++ b/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
@@ -503,14 +503,15 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
   }, [addContext, isInspectorActive, isTauri]);
 
   return (
-    <div className="browser-panel">
-      <form className="browser-panel__toolbar" onSubmit={handleSubmit}>
+    <div className="browser-panel" data-testid="browser-panel">
+      <form className="browser-panel__toolbar" onSubmit={handleSubmit} data-testid="browser-panel-title">
         <IconButton
           type="button"
           variant="ghost"
           size="small"
           onClick={handleGoBack}
           aria-label={t('nav.back')}
+          data-testid="browser-back-button"
         >
           <ChevronLeft size={14} />
         </IconButton>
@@ -520,6 +521,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
           size="small"
           onClick={handleGoForward}
           aria-label={t('nav.forward')}
+          data-testid="browser-forward-button"
         >
           <ChevronRight size={14} />
         </IconButton>
@@ -530,8 +532,13 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
           onClick={handleRefresh}
           disabled={isLoading}
           aria-label={t('actions.refresh')}
+          data-testid="browser-refresh-button"
         >
-          <RefreshCw size={14} className={isLoading ? 'browser-panel__spinning' : undefined} />
+          <RefreshCw
+            size={14}
+            className={isLoading ? 'browser-panel__spinning' : undefined}
+            data-testid={isLoading ? 'browser-loading-indicator' : undefined}
+          />
         </IconButton>
         <div className="browser-panel__address">
           <Globe size={16} />
@@ -541,6 +548,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
             onChange={(e) => setInputValue(e.target.value)}
             placeholder={t('browserView.addressPlaceholder', { exampleUrl: 'https://example.com' })}
             spellCheck={false}
+            data-testid="browser-url-input"
           />
         </div>
         {isTauri && (
@@ -558,13 +566,13 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
       </form>
 
       {error ? (
-        <div className="browser-panel__error">
+        <div className="browser-panel__error" data-testid="browser-error-message">
           <AlertTriangle size={16} />
           <span>{error}</span>
         </div>
       ) : null}
 
-      <div className="browser-panel__content">
+      <div className="browser-panel__content" data-testid="browser-page-frame">
         {!isTauri ? (
           <iframe
             className="browser-panel__iframe"
@@ -576,7 +584,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
           <div ref={viewportRef} className="browser-panel__webview-host">
             <div className="browser-panel__webview-placeholder">
               <Globe size={20} />
-              <span>{currentUrl}</span>
+              <span data-testid="browser-current-url">{currentUrl}</span>
             </div>
           </div>
         )}
diff --git a/src/web-ui/src/app/scenes/browser/BrowserScene.tsx b/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
index ab2c9c08c7..8b5cca255f 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
+++ b/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
@@ -460,14 +460,15 @@ const BrowserScene: React.FC = () => {
   }, [isTauri]);
 
   return (
-    <div className="browser-scene">
-      <form className="browser-scene__toolbar" onSubmit={handleSubmit}>
+    <div className="browser-scene" data-testid="browser-panel">
+      <form className="browser-scene__toolbar" onSubmit={handleSubmit} data-testid="browser-panel-title">
         <IconButton
           type="button"
           variant="ghost"
           size="small"
           onClick={handleGoBack}
           aria-label={t('nav.back')}
+          data-testid="browser-back-button"
         >
           <ChevronLeft size={14} />
         </IconButton>
@@ -477,6 +478,7 @@ const BrowserScene: React.FC = () => {
           size="small"
           onClick={handleGoForward}
           aria-label={t('nav.forward')}
+          data-testid="browser-forward-button"
         >
           <ChevronRight size={14} />
         </IconButton>
@@ -487,8 +489,13 @@ const BrowserScene: React.FC = () => {
           onClick={handleRefresh}
           disabled={isLoading}
           aria-label={t('actions.refresh')}
+          data-testid="browser-refresh-button"
         >
-          <RefreshCw size={14} className={isLoading ? 'browser-scene__spinning' : undefined} />
+          <RefreshCw
+            size={14}
+            className={isLoading ? 'browser-scene__spinning' : undefined}
+            data-testid={isLoading ? 'browser-loading-indicator' : undefined}
+          />
         </IconButton>
         <div className="browser-scene__address">
           <Globe size={16} />
@@ -498,18 +505,19 @@ const BrowserScene: React.FC = () => {
             onChange={(event) => setInputValue(event.target.value)}
             placeholder={t('browserView.addressPlaceholder', { exampleUrl: 'https://example.com' })}
             spellCheck={false}
+            data-testid="browser-url-input"
           />
         </div>
       </form>
 
       {error ? (
-        <div className="browser-scene__error">
+        <div className="browser-scene__error" data-testid="browser-error-message">
           <AlertTriangle size={16} />
           <span>{error}</span>
         </div>
       ) : null}
 
-      <div className="browser-scene__content">
+      <div className="browser-scene__content" data-testid="browser-page-frame">
         {!isTauri ? (
           <iframe
             className="browser-scene__iframe"
@@ -521,7 +529,7 @@ const BrowserScene: React.FC = () => {
           <div ref={viewportRef} className="browser-scene__webview-host">
             <div className="browser-scene__webview-placeholder">
               <Globe size={20} />
-              <span>{currentUrl}</span>
+              <span data-testid="browser-current-url">{currentUrl}</span>
             </div>
           </div>
         )}
diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.tsx b/src/web-ui/src/app/scenes/shell/ShellNav.tsx
index 2f469fe57d..79d3c27407 100644
--- a/src/web-ui/src/app/scenes/shell/ShellNav.tsx
+++ b/src/web-ui/src/app/scenes/shell/ShellNav.tsx
@@ -244,10 +244,10 @@ const ShellNav: React.FC = () => {
   }, [deleteEntry, t]);
 
   return (
-    <div className="bitfun-shell-nav">
+    <div className="bitfun-shell-nav" data-testid="shell-panel">
       <div className="bitfun-shell-nav__header">
         <div className="bitfun-shell-nav__title-group">
-          <span className="bitfun-shell-nav__title">{t('nav.shell.title')}</span>
+          <span className="bitfun-shell-nav__title" data-testid="shell-panel-title">{t('nav.shell.title')}</span>
           <ShellNavWorkspaceSwitcher
             workspaceName={workspaceName}
             hasMultipleWorkspaces={hasMultipleWorkspaces}
@@ -314,8 +314,8 @@ const ShellNav: React.FC = () => {
         className={`bitfun-shell-nav__sections${!hasVisibleContent ? ' bitfun-shell-nav__sections--empty' : ''}`}
       >
         {hasVisibleContent ? (
-          <div className="bitfun-shell-nav__terminal-list">
-            {entries.map((entry) => (
+          <div className="bitfun-shell-nav__terminal-list" data-testid="shell-command-list">
+            {visibleEntries.map((entry) => (
               <ShellNavEntryItem
                 key={entry.sessionId}
                 entry={entry}
diff --git a/src/web-ui/src/app/scenes/shell/ShellScene.tsx b/src/web-ui/src/app/scenes/shell/ShellScene.tsx
index a6e898dc1f..1f21539531 100644
--- a/src/web-ui/src/app/scenes/shell/ShellScene.tsx
+++ b/src/web-ui/src/app/scenes/shell/ShellScene.tsx
@@ -8,7 +8,7 @@ interface ShellSceneProps {
 }
 
 const ShellScene: React.FC<ShellSceneProps> = ({ isActive = true }) => (
-  <div className="bitfun-shell-scene">
+  <div className="bitfun-shell-scene" data-testid="shell-panel">
     <Suspense fallback={<div className="bitfun-shell-scene__loading" />}>
       <TerminalScene isActive={isActive} />
     </Suspense>
diff --git a/src/web-ui/src/app/scenes/shell/components/ShellNavEntryItem.tsx b/src/web-ui/src/app/scenes/shell/components/ShellNavEntryItem.tsx
index abff6446da..32bd902681 100644
--- a/src/web-ui/src/app/scenes/shell/components/ShellNavEntryItem.tsx
+++ b/src/web-ui/src/app/scenes/shell/components/ShellNavEntryItem.tsx
@@ -70,6 +70,9 @@ const ShellNavEntryItem: React.FC<ShellNavEntryItemProps> = ({
 
         onOpenContextMenu(event, menuItems, { entry });
       }}
+      data-testid="shell-command-item"
+      data-command-id={entry.sessionId}
+      data-command-status={entry.isRunning ? 'running' : 'stopped'}
     >
       <div className="bitfun-shell-nav__terminal-item-row">
         <Tooltip content={entry.name} placement="right">
@@ -80,7 +83,7 @@ const ShellNavEntryItem: React.FC<ShellNavEntryItemProps> = ({
               <SquareTerminal size={14} className="bitfun-shell-nav__terminal-icon" />
             )}
 
-            <span className="bitfun-shell-nav__terminal-label">{entry.name}</span>
+            <span className="bitfun-shell-nav__terminal-label" data-testid="shell-command-text">{entry.name}</span>
 
             {showSavedBadge ? (
               <span className="bitfun-shell-nav__saved-indicator">{savedBadgeLabel}</span>
@@ -90,7 +93,11 @@ const ShellNavEntryItem: React.FC<ShellNavEntryItemProps> = ({
               <span className="bitfun-shell-nav__cmd-indicator">{startupCommandBadgeLabel}</span>
             ) : null}
 
-            <span className={`bitfun-shell-nav__terminal-dot${entry.isRunning ? ' is-running' : ' is-stopped'}`} />
+            <span
+              className={`bitfun-shell-nav__terminal-dot${entry.isRunning ? ' is-running' : ' is-stopped'}`}
+              data-testid="shell-command-status"
+              data-command-status={entry.isRunning ? 'running' : 'stopped'}
+            />
           </span>
         </Tooltip>
 
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
index bff94589b0..15776e5374 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
@@ -166,8 +166,8 @@ const SkillsScene: React.FC = () => {
   }, [installedTotalPages]);
 
   return (
-    <div className="bitfun-skills-scene">
-      <div className="skills-tabs-bar">
+    <div className="bitfun-skills-scene" data-testid="agent-skill-panel">
+      <div className="skills-tabs-bar" data-testid="skills-tabs">
         <div className="skills-tabs-bar__tabs">
           <button
             type="button"
@@ -265,7 +265,7 @@ const SkillsScene: React.FC = () => {
                   )}
 
                   {!installed.loading && !installed.error && installedFiltered.length === 0 && (
-                    <div className="skills-main__empty">
+                    <div className="skills-main__empty" data-testid="skill-list-empty">
                       <Package size={28} strokeWidth={1.2} />
                       <span>
                         {installed.skills.length === 0
@@ -277,7 +277,7 @@ const SkillsScene: React.FC = () => {
 
                   {!installed.loading && !installed.error && (
                     <>
-                      <div className="skills-main__grid">
+                      <div className="skills-main__grid" data-testid="skill-list">
                         {pagedInstalledSkills.map((skill, index) => (
                           <div
                             key={skill.key}
@@ -296,15 +296,21 @@ const SkillsScene: React.FC = () => {
                               }
                             }}
                             aria-label={skill.name}
+                            data-testid="skill-list-item"
+                            data-skill-key={skill.key}
+                            data-skill-id={skill.key}
+                            data-skill-name={skill.name}
+                            data-skill-level={skill.level}
+                            data-skill-builtin={skill.isBuiltin ? 'true' : 'false'}
                           >
                             <div className="skills-card__top">
                               <div className="skills-card__icon">
                                 <Puzzle size={18} strokeWidth={1.6} />
                               </div>
                               <div className="skills-card__info">
-                                <span className="skills-card__name">{skill.name}</span>
+                                <span className="skills-card__name" data-testid="skill-list-item-title">{skill.name}</span>
                                 {skill.description?.trim() && (
-                                  <span className="skills-card__desc">{skill.description}</span>
+                                  <span className="skills-card__desc" data-testid="skill-list-item-description">{skill.description}</span>
                                 )}
                               </div>
                               {skill.isBuiltin && (
@@ -469,7 +475,7 @@ const SkillsScene: React.FC = () => {
               )}
 
               {!market.marketLoading && !market.marketError && !market.loadingMore && market.marketSkills.length === 0 && (
-                <div className="skills-discover__empty">
+                <div className="skills-discover__empty" data-testid="skill-list-empty">
                   <Package size={28} strokeWidth={1.5} />
                   <span>{marketQuery ? t('market.empty.noMatch') : t('market.empty.noSkills')}</span>
                 </div>
@@ -485,13 +491,18 @@ const SkillsScene: React.FC = () => {
                     </div>
                   )}
 
-                  <div className="skills-discover__grid">
+                  <div className="skills-discover__grid" data-testid="skill-list">
                     {market.marketSkills.map((skill, index) => {
                       const isInstalled = installedSkillNames.has(skill.name);
                       const isDownloading = market.downloadingPackage === skill.installId;
                       return (
                         <SkillCard
                           key={skill.installId}
+                          data-testid="skills-market-card"
+                          data-skill-install-id={skill.installId}
+                          data-skill-id={skill.installId}
+                          data-skill-name={skill.name}
+                          data-skill-installed={isInstalled ? 'true' : 'false'}
                           name={skill.name}
                           description={skill.description}
                           index={index}
@@ -601,6 +612,10 @@ const SkillsScene: React.FC = () => {
           </Badge>
         ) : null}
         description={selectedInstalledSkill?.description ?? selectedMarketSkill?.description}
+        testId="skill-detail-panel"
+        titleTestId="skill-detail-title"
+        descriptionTestId="skill-detail-description"
+        closeButtonTestId="skill-detail-close"
         meta={selectedMarketSkill ? (
           <span className="bitfun-skills-scene__market-meta">
             <TrendingUp size={12} />
@@ -660,7 +675,7 @@ const SkillsScene: React.FC = () => {
                 </span>
               </div>
             )}
-            <div className="bitfun-skills-scene__detail-row">
+            <div className="bitfun-skills-scene__detail-row" data-testid="skill-detail-capabilities-section">
               <span className="bitfun-skills-scene__detail-label">{t('list.item.pathLabel')}</span>
               {canRevealSkillPath ? (
                 <button
@@ -680,7 +695,7 @@ const SkillsScene: React.FC = () => {
         ) : null}
 
         {selectedMarketSkill?.source ? (
-          <div className="bitfun-skills-scene__detail-row">
+          <div className="bitfun-skills-scene__detail-row" data-testid="skill-detail-capabilities-section">
             <span className="bitfun-skills-scene__detail-label">{t('market.item.sourceLabel')}</span>
             <span className="bitfun-skills-scene__detail-value">{selectedMarketSkill.source}</span>
           </div>
diff --git a/src/web-ui/src/app/scenes/terminal/TerminalScene.tsx b/src/web-ui/src/app/scenes/terminal/TerminalScene.tsx
index e6bb1def13..918376b642 100644
--- a/src/web-ui/src/app/scenes/terminal/TerminalScene.tsx
+++ b/src/web-ui/src/app/scenes/terminal/TerminalScene.tsx
@@ -33,7 +33,7 @@ const TerminalScene: React.FC<TerminalSceneProps> = ({ isActive = true }) => {
   // would dispose xterm and force replay on return, which can lose scrollback
   // and cursor state after resize-sensitive shell output.
   return (
-    <div className="bitfun-terminal-scene" aria-hidden={!isActive}>
+    <div className="bitfun-terminal-scene" aria-hidden={!isActive} data-testid="shell-panel">
       {activeSessionId ? (
         <ConnectedTerminal
           key={activeSessionId}
@@ -45,9 +45,9 @@ const TerminalScene: React.FC<TerminalSceneProps> = ({ isActive = true }) => {
           onClose={handleClose}
         />
       ) : (
-        <div className="bitfun-terminal-scene__empty">
+        <div className="bitfun-terminal-scene__empty" data-testid="shell-command-list">
           <SquareTerminal size={32} className="bitfun-terminal-scene__empty-icon" />
-          <p className="bitfun-terminal-scene__empty-hint">{t('emptyState')}</p>
+          <p className="bitfun-terminal-scene__empty-hint" data-testid="shell-panel-title">{t('emptyState')}</p>
         </div>
       )}
     </div>
diff --git a/src/web-ui/src/component-library/components/Modal/Modal.tsx b/src/web-ui/src/component-library/components/Modal/Modal.tsx
index 45c161ed26..49cb54bd7f 100644
--- a/src/web-ui/src/component-library/components/Modal/Modal.tsx
+++ b/src/web-ui/src/component-library/components/Modal/Modal.tsx
@@ -25,6 +25,9 @@ export interface ModalProps {
   draggable?: boolean;
   resizable?: boolean;
   placement?: 'center' | 'bottom-left' | 'bottom-right';
+  testId?: string;
+  titleTestId?: string;
+  closeButtonTestId?: string;
 }
 
 export const Modal: React.FC<ModalProps> = ({
@@ -42,6 +45,9 @@ export const Modal: React.FC<ModalProps> = ({
   draggable = false,
   resizable = false,
   placement = 'center',
+  testId,
+  titleTestId,
+  closeButtonTestId,
 }) => {
   const { t } = useI18n('components');
   const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
@@ -279,6 +285,7 @@ export const Modal: React.FC<ModalProps> = ({
         onClick={(e) => e.stopPropagation()}
         onMouseDown={handleMouseDown}
         style={appliedStyle}
+        data-testid={testId}
       >
         {(title || showCloseButton) && (
           <div
@@ -302,7 +309,7 @@ export const Modal: React.FC<ModalProps> = ({
               >
                 {title && (
                   <div className="modal__title-group">
-                    <h2 className="modal__title">{title}</h2>
+                    <h2 className="modal__title" data-testid={titleTestId}>{title}</h2>
                     {titleExtra && <span className="modal__title-extra">{titleExtra}</span>}
                   </div>
                 )}
@@ -314,6 +321,7 @@ export const Modal: React.FC<ModalProps> = ({
                 onClick={onClose}
                 aria-label={t('modal.close')}
                 type="button"
+                data-testid={closeButtonTestId}
               >
                 <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                   <line x1="3" y1="3" x2="11" y2="11" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
@@ -352,4 +360,4 @@ export const Modal: React.FC<ModalProps> = ({
     </div>,
     document.body
   );
-};
\ No newline at end of file
+};
diff --git a/src/web-ui/src/flow_chat/components/FlowToolCard.tsx b/src/web-ui/src/flow_chat/components/FlowToolCard.tsx
index 424bbdde6e..02959c4f82 100644
--- a/src/web-ui/src/flow_chat/components/FlowToolCard.tsx
+++ b/src/web-ui/src/flow_chat/components/FlowToolCard.tsx
@@ -43,6 +43,12 @@ export const FlowToolCard: React.FC<FlowToolCardProps> = React.memo(({
   const CardComponent = getToolCardComponent(toolItem.toolName);
   const interruptionNote = getToolInterruptionNote(toolItem, t);
   const cardHandlesInterruptionNote = toolItem.toolName === 'Task';
+  const toolCardTestId =
+    toolItem.toolName === 'Bash'
+      ? 'chat-shell-tool-card'
+      : toolItem.toolName === 'WebFetch'
+        ? 'chat-browser-tool-card'
+        : undefined;
 
   const handleConfirm = React.useCallback((updatedInput?: any, permissionOptionId?: string, approve?: boolean) => {
     log.debug('handleConfirm called', {
@@ -65,7 +71,12 @@ export const FlowToolCard: React.FC<FlowToolCardProps> = React.memo(({
   }, [toolItem.id, onExpand]);
 
   return (
-    <div className={`flow-tool-card-wrapper ${className}`}>
+    <div
+      className={`flow-tool-card-wrapper ${className}`}
+      data-testid={toolCardTestId}
+      data-tool-name={toolItem.toolName}
+      data-tool-card-id={toolItem.id}
+    >
       <FlowToolCardErrorBoundary
         toolItem={toolItem}
         displayName={config.displayName}
diff --git a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
index 8f46e96472..3472a350a8 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
@@ -464,6 +464,7 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
         size="xs"
         onClick={handleOpenInPanel}
         tooltip={t('toolCards.terminal.openInPanel')}
+        data-testid="chat-shell-tool-open-panel"
       >
         <ExternalLink size={12} />
       </IconButton>
diff --git a/src/web-ui/src/tools/terminal/components/ConnectedTerminal.tsx b/src/web-ui/src/tools/terminal/components/ConnectedTerminal.tsx
index 63748715b0..1c1aadfb1c 100644
--- a/src/web-ui/src/tools/terminal/components/ConnectedTerminal.tsx
+++ b/src/web-ui/src/tools/terminal/components/ConnectedTerminal.tsx
@@ -419,8 +419,8 @@ const ConnectedTerminal: React.FC<ConnectedTerminalProps> = memo(({
 
   if (isLoading) {
     return (
-      <div className={`bitfun-terminal ${className}`}>
-        <div className="bitfun-terminal__loading">
+      <div className={`bitfun-terminal ${className}`} data-testid="shell-command-list">
+        <div className="bitfun-terminal__loading" data-testid="shell-command-status" data-command-status="loading">
           <div className="bitfun-terminal__loading-spinner" />
           <span className="bitfun-terminal__loading-text">Connecting to terminal...</span>
         </div>
@@ -430,13 +430,14 @@ const ConnectedTerminal: React.FC<ConnectedTerminalProps> = memo(({
 
   if (error) {
     return (
-      <div className={`bitfun-terminal ${className}`}>
-        <div className="bitfun-terminal__error">
+      <div className={`bitfun-terminal ${className}`} data-testid="shell-command-list">
+        <div className="bitfun-terminal__error" data-testid="shell-command-status" data-command-status="error">
           <AlertCircle className="bitfun-terminal__error-icon" size={32} />
           <span className="bitfun-terminal__error-message">{error}</span>
           <button 
             className="bitfun-terminal__error-retry"
             onClick={handleRetry}
+            data-testid="shell-command-rerun"
           >
             <RefreshCw size={14} />
             <span>Retry</span>
@@ -447,12 +448,17 @@ const ConnectedTerminal: React.FC<ConnectedTerminalProps> = memo(({
   }
 
   return (
-    <div className={`bitfun-terminal ${className}`}>
+    <div
+      className={`bitfun-terminal ${className}`}
+      data-testid="shell-command-list"
+      data-command-id={sessionId}
+      data-command-status={isExited ? 'exited' : 'running'}
+    >
       {showToolbar && (
         <div className="bitfun-terminal__toolbar">
           <div className="bitfun-terminal__toolbar-left">
             <TerminalIcon size={14} />
-            <span className="bitfun-terminal__toolbar-title">
+            <span className="bitfun-terminal__toolbar-title" data-testid="shell-panel-title">
               {title}
               {session && (
                 <span className="shell-type">({session.shellType})</span>
@@ -464,6 +470,7 @@ const ConnectedTerminal: React.FC<ConnectedTerminalProps> = memo(({
               className="bitfun-terminal__toolbar-btn"
               onClick={handleSendCtrlC}
               title="Send Ctrl+C"
+              data-testid="shell-command-rerun"
             >
               <span style={{ fontSize: 10, fontWeight: 'bold' }}>^C</span>
             </button>
@@ -471,6 +478,7 @@ const ConnectedTerminal: React.FC<ConnectedTerminalProps> = memo(({
               className="bitfun-terminal__toolbar-btn bitfun-terminal__toolbar-btn--danger"
               onClick={handleClose}
               title="Close terminal"
+              data-testid="shell-panel-close"
             >
               <Trash2 size={14} />
             </button>
@@ -500,7 +508,11 @@ const ConnectedTerminal: React.FC<ConnectedTerminalProps> = memo(({
           error ? 'bitfun-terminal__statusbar--error' : ''
         }`}>
           <div className="bitfun-terminal__statusbar-left">
-            <span className="bitfun-terminal__statusbar-item">
+            <span
+              className="bitfun-terminal__statusbar-item"
+              data-testid="shell-command-status"
+              data-command-status={isExited ? 'exited' : 'running'}
+            >
               {session.shellType}
             </span>
             <span className="bitfun-terminal__statusbar-item">
@@ -515,7 +527,12 @@ const ConnectedTerminal: React.FC<ConnectedTerminalProps> = memo(({
               {session.cols}×{session.rows}
             </span>
             {isExited && exitCode !== null && (
-              <span className="bitfun-terminal__statusbar-item">
+              <span
+                className="bitfun-terminal__statusbar-item"
+                data-testid="shell-command-exit-code"
+                data-exit-code={exitCode}
+                data-status={exitCode === 0 ? 'success' : 'failed'}
+              >
                 Exit code: {exitCode}
               </span>
             )}
diff --git a/src/web-ui/src/tools/terminal/components/Terminal.tsx b/src/web-ui/src/tools/terminal/components/Terminal.tsx
index 36e9541f36..9d88e8f0d6 100644
--- a/src/web-ui/src/tools/terminal/components/Terminal.tsx
+++ b/src/web-ui/src/tools/terminal/components/Terminal.tsx
@@ -823,10 +823,14 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(({
       data-shortcut-scope="terminal"
       data-terminal-id={terminalId}
       data-session-id={sessionId}
+      data-supports-copy-paste={supportsCopyPaste?'true':'false'}
+      data-testid="shell-command-item"
+      data-command-id={sessionId}
     >
       <div 
         ref={containerRef} 
         className="bitfun-terminal__container"
+        data-testid="shell-command-output"
       />
     </div>
   );

From d6e9b4cd5a5804138ab5b8139d299a511b677709 Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 23 Jun 2026 16:50:31 +0800
Subject: [PATCH 09/13] testid: add stable locators for chat explore groups and
 appearance settings

---
 docs/development/ui-testids-CN.md             | 26 +++++++++++
 docs/development/ui-testids.md                | 26 +++++++++++
 .../modern/ExploreGroupRenderer.tsx           | 45 ++++++++++++++++++-
 .../config/components/AppearanceConfig.tsx    | 22 +++++++--
 .../components/FontPreferencePanel.tsx        | 38 +++++++++++++---
 5 files changed, 146 insertions(+), 11 deletions(-)

diff --git a/docs/development/ui-testids-CN.md b/docs/development/ui-testids-CN.md
index 739cee7d89..ab6058e286 100644
--- a/docs/development/ui-testids-CN.md
+++ b/docs/development/ui-testids-CN.md
@@ -193,6 +193,9 @@
 | Chat 用户消息内容 | `chat-user-message-content` | 用户消息文本内容。配合 `data-turn-id` 使用。 |
 | Chat assistant 消息 | `chat-assistant-message` | 重复的模型轮次容器。配合 `data-turn-id`、`data-round-id`、`data-status`、`data-model-id`、`data-model-alias` 和 `data-streaming` 使用。 |
 | Chat assistant 消息内容 | `chat-assistant-message-content` | assistant 文本块。配合 `data-turn-id`、`data-flow-item-id`、`data-status` 和 `data-streaming` 使用。 |
+| Chat explore group | `chat-explore-group` | ExploreGroup 根节点，用于包裹折叠/合并后的工具轮次。包含 `data-group-kind`、`data-expanded`、`data-read-count`、`data-search-count` 和 `data-command-count`。 |
+| Chat explore group toggle | `chat-explore-group-toggle` | ExploreGroup 真实展开/收起点击目标。包含 `data-group-kind` 和 `data-expanded`。 |
+| Chat explore group content | `chat-explore-group-content` | ExploreGroup 内层内容容器。包含 `data-group-kind` 和 `data-expanded`。 |
 | Chat thinking 面板 | `chat-thinking-panel` | thinking/reasoning 面板根节点。包含 `data-status`、`data-streaming` 和 `data-expanded`。 |
 | Chat thinking 展开按钮 | `chat-thinking-toggle` | 可点击的 thinking 展开/收起 header。 |
 | Chat thinking 内容 | `chat-thinking-content` | thinking/reasoning 文本内容。包含 `data-status` 和 `data-streaming`。 |
@@ -249,6 +252,29 @@
 | 模型行 | `settings-model-row` | 重复的已保存模型行。配合 `data-model-id`、`data-model-name` 和 `data-config-id` 使用。 |
 | 模型测试状态 | `settings-model-test-status` | 重复的已保存模型测试状态。配合 `data-model-id`、`data-model-name`、`data-config-id` 和 `data-status` 使用，`data-status` 可为 `success` 或 `error`。 |
 
+## Settings Appearance
+
+| 元素名称 | data-testid | 说明 |
+|---|---|---|
+| Appearance 页面根节点 | `appearance-config` | Settings 场景中 Appearance 页面内容根节点。 |
+| Appearance 主题区域 | `appearance-theme-section` | 语言和主题配置区域根节点。 |
+| Appearance 字体区域 | `appearance-font-section` | 字体偏好配置区域根节点。 |
+| Appearance 语言选择器 | `appearance-language-select` | Appearance 中 language Select 的真实触发节点。 |
+| Appearance 语言选项 | `appearance-language-option` | 重复的语言下拉选项。包含 `data-locale-id`，并带有 Select 组件提供的 `data-selected`。 |
+| Appearance 主题选择器 | `appearance-theme-select` | Appearance 中 theme Select 的真实触发节点。 |
+| Appearance 主题选项 | `appearance-theme-option` | 重复的主题下拉选项。包含 `data-theme-id`，并带有 Select 组件提供的 `data-selected`。 |
+| Appearance UI 字号分组 | `appearance-ui-font-level-group` | UI font size 预置级别按钮组根节点。 |
+| Appearance UI 字号按钮 | `appearance-ui-font-level-btn` | 重复的 UI font size 预置级别按钮。包含 `data-font-level` 和 `data-selected`。 |
+| Appearance UI 自定义字号控制区 | `appearance-ui-font-custom-controls` | custom UI 字号控制区根节点，仅在 custom 激活时渲染。 |
+| Appearance UI 自定义字号输入框 | `appearance-ui-font-custom-input` | custom UI 字号 px 输入框。包含 `data-font-level="custom"`。 |
+| Appearance UI 自定义字号减一按钮 | `appearance-ui-font-custom-step-minus` | custom UI 字号减一按钮。 |
+| Appearance UI 自定义字号加一按钮 | `appearance-ui-font-custom-step-plus` | custom UI 字号加一按钮。 |
+| Appearance UI 字号预览区 | `appearance-ui-font-preview` | UI 字号预览区域。 |
+| Appearance Flow Chat 字号开关 | `appearance-flowchat-font-toggle` | Flow Chat 独立字号开关的真实 input 节点。 |
+| Appearance Flow Chat 字号选择器 | `appearance-flowchat-font-select` | Flow Chat 字号 Select 的真实触发节点。 |
+| Appearance Flow Chat 字号选项 | `appearance-flowchat-font-option` | 重复的 Flow Chat 字号下拉选项。包含 `data-font-px`，并带有 Select 组件提供的 `data-selected`。 |
+| Appearance 字体重置按钮 | `appearance-font-reset-btn` | 重置字体偏好到默认值。 |
+
 ## Shell Panel
 
 | 元素名称 | data-testid | 说明 |
diff --git a/docs/development/ui-testids.md b/docs/development/ui-testids.md
index 18dfa533cd..5adc253b02 100644
--- a/docs/development/ui-testids.md
+++ b/docs/development/ui-testids.md
@@ -192,6 +192,9 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Chat user message content | `chat-user-message-content` | User message text content. Pair with `data-turn-id`. |
 | Chat assistant message | `chat-assistant-message` | Repeated model round container. Pair with `data-turn-id`, `data-round-id`, `data-status`, `data-model-id`, `data-model-alias`, and `data-streaming`. |
 | Chat assistant message content | `chat-assistant-message-content` | Assistant text block. Pair with `data-turn-id`, `data-flow-item-id`, `data-status`, and `data-streaming`. |
+| Chat explore group | `chat-explore-group` | Explore-group root that wraps collapsed/merged tool rounds. Includes `data-group-kind`, `data-expanded`, `data-read-count`, `data-search-count`, and `data-command-count`. |
+| Chat explore group toggle | `chat-explore-group-toggle` | Real click target that expands/collapses an explore group. Includes `data-group-kind` and `data-expanded`. |
+| Chat explore group content | `chat-explore-group-content` | Inner content container for explore-group items. Includes `data-group-kind` and `data-expanded`. |
 | Chat thinking panel | `chat-thinking-panel` | Thinking/reasoning panel root. Includes `data-status`, `data-streaming`, and `data-expanded`. |
 | Chat thinking toggle | `chat-thinking-toggle` | Clickable thinking expand/collapse header. |
 | Chat thinking content | `chat-thinking-content` | Thinking/reasoning text content. Includes `data-status` and `data-streaming`. |
@@ -249,6 +252,29 @@ Avoid adding IDs to these surfaces unless there is a clear automated workflow.
 | Model row | `settings-model-row` | Repeated saved model row. Pair with `data-model-id`, `data-model-name`, and `data-config-id`. |
 | Model test status | `settings-model-test-status` | Repeated saved model test status. Pair with `data-model-id`, `data-model-name`, `data-config-id`, and `data-status` (`success` or `error`). |
 
+## Settings Appearance
+
+| Element name | data-testid | Notes |
+|---|---|---|
+| Appearance config root | `appearance-config` | Appearance page content root inside the settings scene. |
+| Appearance theme section | `appearance-theme-section` | Language and theme settings section root. |
+| Appearance font section | `appearance-font-section` | Font preference section root. |
+| Appearance language select | `appearance-language-select` | Language select trigger in Appearance settings. |
+| Appearance language option | `appearance-language-option` | Repeated language dropdown option. Includes `data-locale-id` and Select-provided `data-selected`. |
+| Appearance theme select | `appearance-theme-select` | Theme select trigger in Appearance settings. |
+| Appearance theme option | `appearance-theme-option` | Repeated theme dropdown option. Includes `data-theme-id` and Select-provided `data-selected`. |
+| Appearance UI font level group | `appearance-ui-font-level-group` | UI font preset button group root. |
+| Appearance UI font level button | `appearance-ui-font-level-btn` | Repeated preset button. Includes `data-font-level` and `data-selected`. |
+| Appearance UI font custom controls | `appearance-ui-font-custom-controls` | Custom UI font px controls root, rendered when custom is active. |
+| Appearance UI font custom input | `appearance-ui-font-custom-input` | Custom UI font px number input. Includes `data-font-level="custom"`. |
+| Appearance UI font custom step minus | `appearance-ui-font-custom-step-minus` | Custom UI font px decrement button. |
+| Appearance UI font custom step plus | `appearance-ui-font-custom-step-plus` | Custom UI font px increment button. |
+| Appearance UI font preview | `appearance-ui-font-preview` | UI font preview area. |
+| Appearance Flow Chat font toggle | `appearance-flowchat-font-toggle` | Flow Chat independent font size toggle input. |
+| Appearance Flow Chat font select | `appearance-flowchat-font-select` | Flow Chat font size select trigger. |
+| Appearance Flow Chat font option | `appearance-flowchat-font-option` | Repeated Flow Chat font size option. Includes `data-font-px` and Select-provided `data-selected`. |
+| Appearance font reset button | `appearance-font-reset-btn` | Resets font preferences to defaults. |
+
 ## Shell Panel
 
 | Element name | data-testid | Notes |
diff --git a/src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx b/src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx
index 0d73a7d9a9..1e8c6d20dc 100644
--- a/src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ExploreGroupRenderer.tsx
@@ -25,6 +25,27 @@ export interface ExploreGroupRendererProps {
   turnId: string;
 }
 
+function getExploreGroupKind(
+  stats: ExploreGroupData['stats'],
+  itemCount: number
+): 'read' | 'search' | 'command' | 'mixed' | 'other' {
+  const activeKinds = [
+    stats.readCount > 0 ? 'read' : null,
+    stats.searchCount > 0 ? 'search' : null,
+    stats.commandCount > 0 ? 'command' : null,
+  ].filter(Boolean) as Array<'read' | 'search' | 'command'>;
+
+  if (activeKinds.length === 1) {
+    return activeKinds[0];
+  }
+
+  if (activeKinds.length > 1) {
+    return 'mixed';
+  }
+
+  return itemCount > 0 ? 'other' : 'mixed';
+}
+
 export const ExploreGroupRenderer: React.FC<ExploreGroupRendererProps> = React.memo(({
   data,
   turnId,
@@ -67,6 +88,7 @@ export const ExploreGroupRenderer: React.FC<ExploreGroupRendererProps> = React.m
   const defaultExpanded = !wasCutByCritical;
   const isExpanded = hasExplicitState ? explicitExpanded : defaultExpanded;
   const isCollapsed = !isExpanded;
+  const groupKind = getExploreGroupKind(stats, allItems.length);
   // Header is always interactive so the user can collapse/expand at any time.
   const allowManualToggle = true;
 
@@ -216,11 +238,23 @@ export const ExploreGroupRenderer: React.FC<ExploreGroupRendererProps> = React.m
   return (
     <div
       ref={cardRootRef}
+      data-testid="chat-explore-group"
       data-tool-card-id={groupId}
+      data-group-kind={groupKind}
+      data-expanded={isExpanded ? 'true' : 'false'}
+      data-read-count={String(stats.readCount)}
+      data-search-count={String(stats.searchCount)}
+      data-command-count={String(stats.commandCount)}
       className={className}
     >
       {allowManualToggle && (
-        <div className="explore-region__header" onClick={handleToggle}>
+        <div
+          className="explore-region__header"
+          onClick={handleToggle}
+          data-testid="chat-explore-group-toggle"
+          data-group-kind={groupKind}
+          data-expanded={isExpanded ? 'true' : 'false'}
+        >
           <ChevronRight size={14} className="explore-region__icon" />
           <span className="explore-region__summary">{displaySummary}</span>
         </div>
@@ -232,7 +266,14 @@ export const ExploreGroupRenderer: React.FC<ExploreGroupRendererProps> = React.m
         durationMs={320}
         disableAnimation={isGroupStreaming}
       >
-        <div ref={containerRef} className="explore-region__content" onScroll={checkScrollState}>
+        <div
+          ref={containerRef}
+          className="explore-region__content"
+          onScroll={checkScrollState}
+          data-testid="chat-explore-group-content"
+          data-group-kind={groupKind}
+          data-expanded={isExpanded ? 'true' : 'false'}
+        >
           {allItems.map((item, idx) => (
             <ExploreItemRenderer
               key={item.id}
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceConfig.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceConfig.tsx
index 32639ccfdb..18078ff561 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceConfig.tsx
@@ -49,18 +49,26 @@ function AppearanceThemeSection() {
         value: SYSTEM_THEME_ID,
         label: t('appearance.systemTheme'),
         description: t('appearance.systemThemeDescription'),
+        testId: 'appearance-theme-option',
+        testAttributes: {
+          'data-theme-id': SYSTEM_THEME_ID,
+        },
       },
       ...themes.map((theme) => ({
         value: theme.id,
         label: getThemeDisplayName(theme),
         description: getThemeDisplayDescription(theme),
+        testId: 'appearance-theme-option',
+        testAttributes: {
+          'data-theme-id': theme.id,
+        },
       })),
     ],
     [themes, t, getThemeDisplayDescription, getThemeDisplayName]
   );
 
   return (
-    <div className="theme-config">
+    <div className="theme-config" data-testid="appearance-theme-section">
       <div className="theme-config__content">
         <ConfigPageSection title={t('appearance.title')} description={t('appearance.hint')}>
           <ConfigPageRow
@@ -77,9 +85,14 @@ function AppearanceThemeSection() {
                 options={supportedLocales.map((locale) => ({
                   value: locale.id,
                   label: locale.nativeName,
+                  testId: 'appearance-language-option',
+                  testAttributes: {
+                    'data-locale-id': locale.id,
+                  },
                 }))}
                 disabled={isChanging}
                 placeholder={t('appearance.language')}
+                triggerTestId="appearance-language-select"
               />
             </div>
           </ConfigPageRow>
@@ -95,6 +108,7 @@ function AppearanceThemeSection() {
                   onChange={(value) => handleThemeChange(value as string)}
                   disabled={loading}
                   options={themeSelectOptions}
+                  triggerTestId="appearance-theme-select"
                   renderOption={(option) => {
                     const v = String(option.value);
                     const fullTheme =
@@ -381,8 +395,10 @@ const AppearanceConfig: React.FC = () => {
     <ConfigPageLayout className="bitfun-appearance-config">
       <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
       <ConfigPageContent className="bitfun-appearance-config__content">
-        <AppearanceThemeSection />
-        <FontPreferencePanel />
+        <div data-testid="appearance-config">
+          <AppearanceThemeSection />
+          <FontPreferencePanel />
+        </div>
       </ConfigPageContent>
     </ConfigPageLayout>
   );
diff --git a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
index 60b5bb0678..2fe3324233 100644
--- a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
+++ b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.tsx
@@ -100,6 +100,10 @@ export function FontPreferencePanel() {
       FLOW_CHAT_PX_OPTIONS.map((n) => ({
         value: n,
         label: t('appearance.fontSize.flowChatPxOption', { n }),
+        testId: 'appearance-flowchat-font-option',
+        testAttributes: {
+          'data-font-px': n,
+        },
       })),
     [t]
   );
@@ -127,10 +131,11 @@ export function FontPreferencePanel() {
   );
 
   return (
-    <ConfigPageSection
-      title={t('appearance.fontSize.title')}
-      description={t('appearance.fontSize.hint')}
-    >
+    <div data-testid="appearance-font-section">
+      <ConfigPageSection
+        title={t('appearance.fontSize.title')}
+        description={t('appearance.fontSize.hint')}
+      >
       {/* UI Font Size */}
       <ConfigPageRow
         className="font-pref-panel__row--ui"
@@ -141,7 +146,12 @@ export function FontPreferencePanel() {
       >
         <div className="font-pref-panel__ui-size">
           <div className="font-pref-panel__ui-segment-block">
-            <div className="font-pref-panel__level-buttons" role="group" aria-label={t('appearance.fontSize.uiSizeLabel')}>
+            <div
+              className="font-pref-panel__level-buttons"
+              role="group"
+              aria-label={t('appearance.fontSize.uiSizeLabel')}
+              data-testid="appearance-ui-font-level-group"
+            >
               {UI_LEVELS.map((l) => (
                 <button
                   key={l}
@@ -152,6 +162,9 @@ export function FontPreferencePanel() {
                   ].join(' ').trim()}
                   onClick={() => void handleLevelClick(l)}
                   aria-pressed={level === l}
+                  data-testid="appearance-ui-font-level-btn"
+                  data-font-level={l}
+                  data-selected={level === l ? 'true' : 'false'}
                 >
                   <span
                     className="font-pref-panel__level-label"
@@ -170,6 +183,9 @@ export function FontPreferencePanel() {
                   ].join(' ').trim()}
                   onClick={() => void handleLevelClick('custom')}
                   aria-pressed={level === 'custom'}
+                  data-testid="appearance-ui-font-level-btn"
+                  data-font-level="custom"
+                  data-selected={level === 'custom' ? 'true' : 'false'}
                 >
                   <span
                     className="font-pref-panel__level-label"
@@ -183,6 +199,7 @@ export function FontPreferencePanel() {
                     className="font-pref-panel__custom-controls"
                     role="group"
                     aria-label={t('appearance.fontSize.customPxLabel')}
+                    data-testid="appearance-ui-font-custom-controls"
                   >
                     <div className="font-pref-panel__stepper">
                       <button
@@ -190,6 +207,7 @@ export function FontPreferencePanel() {
                         className="font-pref-panel__step-btn"
                         onClick={() => handleCustomStep(-1)}
                         aria-label="-1"
+                        data-testid="appearance-ui-font-custom-step-minus"
                       >−</button>
                       <input
                         type="number"
@@ -205,12 +223,15 @@ export function FontPreferencePanel() {
                         onChange={handleCustomInputChange}
                         onFocus={() => void handleLevelClick('custom')}
                         aria-invalid={!!customError}
+                        data-testid="appearance-ui-font-custom-input"
+                        data-font-level="custom"
                       />
                       <button
                         type="button"
                         className="font-pref-panel__step-btn"
                         onClick={() => handleCustomStep(1)}
                         aria-label="+1"
+                        data-testid="appearance-ui-font-custom-step-plus"
                       >+</button>
                     </div>
                     <span className="font-pref-panel__custom-unit">px</span>
@@ -228,6 +249,7 @@ export function FontPreferencePanel() {
             className="font-pref-panel__preview"
             style={{ fontSize: `${previewBasePx}px` }}
             aria-label="Font size preview"
+            data-testid="appearance-ui-font-preview"
           >
             {t('appearance.fontSize.previewText')}
           </div>
@@ -248,6 +270,7 @@ export function FontPreferencePanel() {
               checked={fcIndependent}
               onChange={(e) => handleFlowChatCustomToggle(e.target.checked)}
               label={t('appearance.fontSize.flowChatCustomToggle')}
+              data-testid="appearance-flowchat-font-toggle"
             />
           </div>
           {fcIndependent && (
@@ -258,6 +281,7 @@ export function FontPreferencePanel() {
                 options={flowChatPxOptions}
                 onChange={handleFlowChatPxChange}
                 placement="bottom"
+                triggerTestId="appearance-flowchat-font-select"
               />
             </div>
           )}
@@ -270,10 +294,12 @@ export function FontPreferencePanel() {
           type="button"
           className="font-pref-panel__reset-btn"
           onClick={() => void handleReset()}
+          data-testid="appearance-font-reset-btn"
         >
           {t('appearance.fontSize.resetButton')}
         </button>
       </ConfigPageRow>
-    </ConfigPageSection>
+      </ConfigPageSection>
+    </div>
   );
 }

From 6004acbf48e82a8e5196afd11e233e371d514e75 Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 23 Jun 2026 18:49:06 +0800
Subject: [PATCH 10/13] testid: adapt locator cherry-picks to gcwing main

---
 src/web-ui/src/app/scenes/shell/ShellNav.tsx            | 2 +-
 src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx | 1 -
 src/web-ui/src/tools/terminal/components/Terminal.tsx   | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.tsx b/src/web-ui/src/app/scenes/shell/ShellNav.tsx
index 79d3c27407..0ff3a7f41c 100644
--- a/src/web-ui/src/app/scenes/shell/ShellNav.tsx
+++ b/src/web-ui/src/app/scenes/shell/ShellNav.tsx
@@ -315,7 +315,7 @@ const ShellNav: React.FC = () => {
       >
         {hasVisibleContent ? (
           <div className="bitfun-shell-nav__terminal-list" data-testid="shell-command-list">
-            {visibleEntries.map((entry) => (
+            {entries.map((entry) => (
               <ShellNavEntryItem
                 key={entry.sessionId}
                 entry={entry}
diff --git a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
index 5f3a7976f7..0c5a03f334 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
@@ -70,7 +70,6 @@ export const CompactToolCard: React.FC<CompactToolCardProps> = ({
         className={`compact-tool-card-wrapper--expanded-card ${className}`.trim()}
         header={header}
         expandedContent={expandedContent}
-        headerExpandAffordance={clickable || Boolean(onClick)}
         toggleTestId={toggleTestId}
         headerExpandAffordance={clickable || Boolean(onClick)}
       />
diff --git a/src/web-ui/src/tools/terminal/components/Terminal.tsx b/src/web-ui/src/tools/terminal/components/Terminal.tsx
index 9d88e8f0d6..43fcfff7bd 100644
--- a/src/web-ui/src/tools/terminal/components/Terminal.tsx
+++ b/src/web-ui/src/tools/terminal/components/Terminal.tsx
@@ -823,7 +823,6 @@ const Terminal = forwardRef<TerminalRef, TerminalProps>(({
       data-shortcut-scope="terminal"
       data-terminal-id={terminalId}
       data-session-id={sessionId}
-      data-supports-copy-paste={supportsCopyPaste?'true':'false'}
       data-testid="shell-command-item"
       data-command-id={sessionId}
     >

From 61c78fa47f7ef2bdbd6cd97b804abea2fd2863d4 Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 23 Jun 2026 19:19:22 +0800
Subject: [PATCH 11/13] testid: narrow miniapp result locator parsing

---
 .../flow_chat/tool-cards/MiniAppToolDisplay.tsx | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
index 7101d61f9a..e04ffe97b7 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.tsx
@@ -33,20 +33,9 @@ export const InitMiniAppDisplay: React.FC<ToolCardProps> = ({ toolItem }) => {
   const miniAppFiles = useMemo(() => {
     const files = toolResult?.result?.files;
     if (Array.isArray(files)) {
-      return files
-        .map(file => {
-          if (typeof file === 'string') return file;
-          if (file && typeof file === 'object') {
-            const record = file as Record<string, unknown>;
-            return typeof record.path === 'string'
-              ? record.path
-              : typeof record.file_path === 'string'
-                ? record.file_path
-                : '';
-          }
-          return '';
-        })
-        .filter((filePath): filePath is string => filePath.length > 0);
+      return files.filter((filePath): filePath is string => (
+        typeof filePath === 'string' && filePath.length > 0
+      ));
     }
     return path ? [path] : [];
   }, [path, toolResult?.result?.files]);

From 40205e20f0f2d886321db1e9e3b1169c6e326594 Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 23 Jun 2026 20:29:21 +0800
Subject: [PATCH 12/13] fix: include translation dependency in welcome callback

---
 src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx b/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
index b4d930f310..423ae40aec 100644
--- a/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
+++ b/src/web-ui/src/app/scenes/welcome/WelcomeScene.tsx
@@ -70,7 +70,7 @@ const WelcomeScene: React.FC = () => {
     } finally {
       setIsSelecting(false);
     }
-  }, [openWorkspace, openScene]);
+  }, [openWorkspace, openScene, t]);
 
   const handleNewProject = useCallback(() => {
     window.dispatchEvent(new Event('nav:new-project'));

From cc0ab72e0f84ad1243cf014a68f9068f44bdaf3c Mon Sep 17 00:00:00 2001
From: TianxingZhang-0129 <ztx.19951210@icloud.com>
Date: Tue, 23 Jun 2026 20:49:52 +0800
Subject: [PATCH 13/13] fix: borrow rmcp peer info during initialize mapping

---
 .../src/mcp/protocol/transport_remote.rs                      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/crates/services/services-integrations/src/mcp/protocol/transport_remote.rs b/src/crates/services/services-integrations/src/mcp/protocol/transport_remote.rs
index 5a5facde65..77e984a27e 100644
--- a/src/crates/services/services-integrations/src/mcp/protocol/transport_remote.rs
+++ b/src/crates/services/services-integrations/src/mcp/protocol/transport_remote.rs
@@ -512,7 +512,7 @@ impl RemoteMCPTransport {
                 let info = service.peer().peer_info().ok_or_else(|| {
                     MCPRuntimeError::mcp("Handshake succeeded but server info missing".to_string())
                 })?;
-                Ok(map_rmcp_initialize_result(info))
+                Ok(map_rmcp_initialize_result(&info))
             }
             ClientState::Connecting { transport } => {
                 let Some(transport) = transport.take() else {
@@ -546,7 +546,7 @@ impl RemoteMCPTransport {
                     service: Arc::clone(&service),
                 };
 
-                Ok(map_rmcp_initialize_result(info))
+                Ok(map_rmcp_initialize_result(&info))
             }
         }
     }