test(web-ui): expose stable DOM locators for OH UI automation

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))
             }
         }
     }

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>

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}

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>

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}

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>

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} />
@@ -523,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"
@@ -535,6 +541,7 @@ const MainNav: React.FC<MainNavProps> = ({
               onClick={() => setIsExtensionsOpen(v => !v)}
               aria-expanded={isExtensionsOpen}
               aria-label={extensionsLabel}
+              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" />
@@ -550,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"
@@ -561,6 +571,7 @@ const MainNav: React.FC<MainNavProps> = ({
                 ].filter(Boolean).join(' ')}
                 onClick={handleOpenAgents}
                 aria-label={agentsTooltip}
+                data-testid="agent-tab"
               >
                 <span className="bitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
                   <Users size={15} />
@@ -579,6 +590,7 @@ const MainNav: React.FC<MainNavProps> = ({
                 ].filter(Boolean).join(' ')}
                 onClick={handleOpenSkills}
                 aria-label={skillsTooltip}
+                data-testid="skill-tab"
               >
                 <span className="bitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
                   <Puzzle size={15} />
@@ -591,7 +603,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 +655,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 +675,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}

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">

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="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" />
@@ -263,6 +267,7 @@ const PersistentFooterActions: React.FC = () => {
               aria-label={t('scenes.browser')}
               aria-pressed={isBrowserActive}
               onClick={handleOpenBrowser}
+              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" />

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(); }}