From 029d933892bbcc7c061aff999da351e83422d37c Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Fri, 18 Sep 2026 11:41:39 +0800
Subject: [PATCH 1/2] refactor(ui): align interactive surfaces with shared
 contracts

---
 design-system/packages/ui/README.md           |   18 +-
 .../src/components/ActionCard/ActionCard.tsx  |    2 +-
 .../src/components/ActionItem/ActionItem.tsx  |    2 +-
 .../components/ActivityItem/ActivityItem.tsx  |    2 +-
 .../ui/src/components/Avatar/Avatar.tsx       |    2 +-
 .../ui/src/components/Button/Button.tsx       |    4 +-
 .../ui/src/components/Combobox/Combobox.tsx   |    4 +-
 .../ConfirmDialog/ConfirmDialog.tsx           |    1 +
 .../ui/src/components/Empty/Empty.tsx         |    1 +
 .../src/components/IconButton/IconButton.tsx  |    2 +-
 .../ui/src/components/Input/Input.tsx         |    4 +-
 .../ui/src/components/KeyHint/KeyHint.tsx     |    2 +-
 .../LauncherButton/LauncherButton.tsx         |    2 +-
 .../ui/src/components/Listbox/Listbox.tsx     |    4 +-
 .../ui/src/components/Menu/MenuPopover.tsx    |    2 +-
 .../components/SearchField/SearchField.tsx    |    2 +-
 .../SegmentedControl/SegmentedControl.tsx     |    2 +-
 .../ui/src/components/Select/Select.tsx       |    4 +-
 .../src/components/StatusPill/StatusPill.tsx  |    2 +-
 .../ui/src/components/TabGroup/TabGroup.tsx   |    2 +-
 .../VoiceCallPanel/VoiceCallPanel.meta.ts     |    3 +
 .../VoiceCallPanel/VoiceCallPanel.module.css  |   26 +
 .../VoiceCallPanel/VoiceCallTranscript.tsx    |    5 +-
 design-system/packages/ui/src/index.ts        |    3 +
 .../packages/ui/src/overlay/usePresence.ts    |   19 +-
 .../packages/ui/src/styles/layers.css         |   12 +
 .../packages/ui/tests/icon-slots.test.mjs     |   58 +
 .../packages/ui/tests/overlay-kernel.test.mjs |    2 +
 .../review-platform/ReviewPlatformPanel.scss  | 1647 ++---------------
 .../ReviewPlatformPanel.test.tsx              |  156 +-
 .../ReviewPlatformPanel.trust.test.tsx        |   12 -
 .../review-platform/ReviewPlatformPanel.tsx   | 1400 +++++++-------
 .../panels/review-platform/appearance.ts      |   12 +-
 .../src/app/layout/FloatingMiniChat.scss      |   37 +-
 .../src/app/layout/FloatingMiniChat.tsx       |    2 +-
 .../layout/floatingMiniChatActivity.test.ts   |    2 +
 src/web-ui/src/app/styles/motion.scss         |    5 +-
 src/web-ui/src/app/styles/motion.test.ts      |   38 +
 .../ChatInputWorkspaceStrip.test.tsx          |    2 +-
 .../components/ChatInputWorkspaceStrip.tsx    |    9 +-
 .../modern/FLOWCHAT_VIRTUALIZATION.md         |   10 +-
 .../components/modern/UserMessageItem.scss    |   38 +-
 .../components/modern/UserMessageItem.tsx     |    4 +-
 .../modern/UserMessageItemActions.test.ts     |   10 +-
 .../components/voice/ControlConversation.tsx  |    2 +-
 .../voice/ConversationModeSurface.scss        |   13 +-
 .../voice/ConversationModeSurface.test.tsx    |   26 +-
 .../voice/ConversationModeSurface.tsx         |    8 +-
 .../compiler/AppearanceCompiler.test.ts       |    2 +-
 src/web-ui/src/shared/ui/Dialog.test.tsx      |    4 +
 src/web-ui/src/shared/ui/MenuPopover.test.tsx |    9 +-
 src/web-ui/src/shared/ui/usePresence.test.tsx |   67 +
 .../utils/useAnchoredPopoverPosition.ts       |   17 +-
 .../git/components/BranchQuickSwitch.scss     |   39 +-
 .../git/components/BranchQuickSwitch.test.tsx |  190 +-
 .../git/components/BranchQuickSwitch.tsx      |  125 +-
 56 files changed, 1547 insertions(+), 2531 deletions(-)
 create mode 100644 src/web-ui/src/app/styles/motion.test.ts
 create mode 100644 src/web-ui/src/shared/ui/usePresence.test.tsx

diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index e85cc700e7..594df3d207 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -45,6 +45,11 @@ and `data-scrolled` when records have moved below their starting position. Hosts
 can layer compact controls above that viewport without creating another scroller.
 Each entry may supply `activity` beneath its message; the host owns its real
 processing state, localized accessible label, and completion lifecycle.
+Its `presentation="chat"` variant uses FlowChat's `type.flow.control` text size
+and weight, `type.flow.body` font stack and leading, `color.content.primary`
+text, and `color.action.quiet.hover` user-bubble fill. `compact` controls spacing
+independently. The default `presentation="voice"` retains the call typography
+and inverse colors; hosts can switch presentation on the existing viewport.
 
 `VoiceParticleLogo` is also exported independently. Its `readAudio` callback
 reads `{ user, assistant, assistantSpeaking }` once per animation frame. The
@@ -330,7 +335,10 @@ Sized icon slots in buttons, tabs, menu items and fields own their glyph geometr
 Pass catalog `Icon` nodes through `leadingIcon`, `trailingIcon`, `icon` or the
 matching component slot, just as for SVG icons. These slots constrain catalog
 icons to the component's size; a standalone `Icon` retains its explicit size
-(24px by default). Do not shrink the catalog globally to correct a slot mismatch.
+(24px by default). They also normalize a direct Lucide glyph that still has
+Lucide's default 2px stroke to the shared 1.6 line weight and inherit the slot's
+color. Explicit non-default strokes and non-Lucid SVG artwork remain unchanged.
+Do not shrink the catalog globally to correct a slot mismatch.
 
 `IconButton` defaults to `quiet`: its resting surface is transparent, hover and
 pressed states use shared action feedback, and keyboard focus keeps a visible
@@ -456,6 +464,14 @@ they must forward all props and refs and retain public component ownership.
 `useSubmenuIntent` is available for product popovers that need the same pointer
 corridor behavior.
 
+Custom composed menus reuse `useDismissibleLayer` and the public `usePresence`
+hook. Keep the positioned/measured layer separate from its animated surface,
+retain geometry until presence unmounts it, and make exiting content inert.
+Presence cancels a pending exit when reopened and honors reduced motion.
+The host should opt a presence-owned surface out of its fallback animations;
+outside-pointer dismissal leaves the clicked control's focus alone, while
+Escape and menu actions restore the trigger before handing off to another UI.
+
 ## FlowChat tool cards
 
 
diff --git a/design-system/packages/ui/src/components/ActionCard/ActionCard.tsx b/design-system/packages/ui/src/components/ActionCard/ActionCard.tsx
index 48a8beac64..ffdc1d6296 100644
--- a/design-system/packages/ui/src/components/ActionCard/ActionCard.tsx
+++ b/design-system/packages/ui/src/components/ActionCard/ActionCard.tsx
@@ -67,7 +67,7 @@ export const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(
           type={type}
         >
           {leading !== undefined && leading !== null && (
-            <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">
+            <span aria-hidden="true" className={styles.leading} data-openbitfun-icon-slot="true" data-openbitfun-part="leading">
               {leading}
             </span>
           )}
diff --git a/design-system/packages/ui/src/components/ActionItem/ActionItem.tsx b/design-system/packages/ui/src/components/ActionItem/ActionItem.tsx
index 7332eca687..5a6a1bd368 100644
--- a/design-system/packages/ui/src/components/ActionItem/ActionItem.tsx
+++ b/design-system/packages/ui/src/components/ActionItem/ActionItem.tsx
@@ -75,7 +75,7 @@ export const ActionItem = forwardRef<HTMLButtonElement, ActionItemProps>(functio
         type={type}
       >
         {hasLeadingArea && (
-          <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">
+          <span aria-hidden="true" className={styles.leading} data-openbitfun-icon-slot="true" data-openbitfun-part="leading">
             {leading}
           </span>
         )}
diff --git a/design-system/packages/ui/src/components/ActivityItem/ActivityItem.tsx b/design-system/packages/ui/src/components/ActivityItem/ActivityItem.tsx
index 1f7875bee3..27547ed95f 100644
--- a/design-system/packages/ui/src/components/ActivityItem/ActivityItem.tsx
+++ b/design-system/packages/ui/src/components/ActivityItem/ActivityItem.tsx
@@ -46,7 +46,7 @@ function ActivityItemContent({
   return (
     <>
       {leading !== undefined && leading !== null && (
-        <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">
+        <span aria-hidden="true" className={styles.leading} data-openbitfun-icon-slot="true" data-openbitfun-part="leading">
           {leading}
         </span>
       )}
diff --git a/design-system/packages/ui/src/components/Avatar/Avatar.tsx b/design-system/packages/ui/src/components/Avatar/Avatar.tsx
index 326708ceee..277312a1d5 100644
--- a/design-system/packages/ui/src/components/Avatar/Avatar.tsx
+++ b/design-system/packages/ui/src/components/Avatar/Avatar.tsx
@@ -13,7 +13,7 @@ export function Avatar({ alt = "", children, className, icon, onError, shape = "
       {src && !imageFailed
         ? <img alt={alt} className={styles.image} data-openbitfun-part="image" onError={() => { setImageFailed(true); onError?.(); }} src={src} />
         : icon !== undefined
-          ? <span className={styles.content} data-openbitfun-part="icon">{icon}</span>
+          ? <span className={styles.content} data-openbitfun-icon-slot="true" data-openbitfun-part="icon">{icon}</span>
           : <span className={styles.content} data-openbitfun-part="text">{children}</span>}
     </span>
   );
diff --git a/design-system/packages/ui/src/components/Button/Button.tsx b/design-system/packages/ui/src/components/Button/Button.tsx
index d0202757f6..9797230245 100644
--- a/design-system/packages/ui/src/components/Button/Button.tsx
+++ b/design-system/packages/ui/src/components/Button/Button.tsx
@@ -52,7 +52,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       <span aria-hidden="true" className={styles.progress} data-openbitfun-part="progress" />
       <span className={styles.content} data-openbitfun-part="content">
         {leadingIcon && (
-          <span aria-hidden="true" className={classNames(styles.icon, styles.leadingIcon)} data-openbitfun-part="leading-icon">
+          <span aria-hidden="true" className={classNames(styles.icon, styles.leadingIcon)} data-openbitfun-icon-slot="true" data-openbitfun-part="leading-icon">
             {leadingIcon}
           </span>
         )}
@@ -62,7 +62,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
           <OverflowText className={styles.label} data-openbitfun-part="label">{children}</OverflowText>
         )}
         {trailingIcon && (
-          <span aria-hidden="true" className={classNames(styles.icon, styles.trailingIcon)} data-openbitfun-part="trailing-icon">
+          <span aria-hidden="true" className={classNames(styles.icon, styles.trailingIcon)} data-openbitfun-icon-slot="true" data-openbitfun-part="trailing-icon">
             {trailingIcon}
           </span>
         )}
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.tsx b/design-system/packages/ui/src/components/Combobox/Combobox.tsx
index 1b11cda896..2b7d0038bf 100644
--- a/design-system/packages/ui/src/components/Combobox/Combobox.tsx
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.tsx
@@ -706,7 +706,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
             ) : (
               <span className={styles.singleValue}>
                 {singleOption?.leading && (
-                  <span aria-hidden="true" className={styles.valueLeading}>{singleOption.leading}</span>
+                  <span aria-hidden="true" className={styles.valueLeading} data-openbitfun-icon-slot="true">{singleOption.leading}</span>
                 )}
                 <OverflowText className={styles.valueLabel}>{singleOption?.label}</OverflowText>
               </span>
@@ -728,7 +728,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
             variant="quiet"
           />
         )}
-        <span aria-hidden="true" className={styles.indicator} data-openbitfun-part="indicator">
+        <span aria-hidden="true" className={styles.indicator} data-openbitfun-icon-slot="true" data-openbitfun-part="indicator">
           <Icon name="chevron-down" />
         </span>
       </div>
diff --git a/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.tsx b/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.tsx
index 82fcc430b9..9161e63b44 100644
--- a/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.tsx
+++ b/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -157,6 +157,7 @@ export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(
                       aria-hidden="true"
                       className={styles.icon}
                       data-openbitfun-component="confirm-dialog"
+                      data-openbitfun-icon-slot="true"
                       data-openbitfun-part="icon"
                       data-openbitfun-status={type === "error" ? "danger" : type}
                     >
diff --git a/design-system/packages/ui/src/components/Empty/Empty.tsx b/design-system/packages/ui/src/components/Empty/Empty.tsx
index 24ebf10f8a..b4c96c8608 100644
--- a/design-system/packages/ui/src/components/Empty/Empty.tsx
+++ b/design-system/packages/ui/src/components/Empty/Empty.tsx
@@ -45,6 +45,7 @@ export const Empty = forwardRef<HTMLDivElement, EmptyProps>(function Empty({
     >
       <div
         className={styles.media}
+        data-openbitfun-icon-slot="true"
         data-openbitfun-part="media"
         data-size={imageSize}
       >
diff --git a/design-system/packages/ui/src/components/IconButton/IconButton.tsx b/design-system/packages/ui/src/components/IconButton/IconButton.tsx
index 165e4ae8ec..6559e8a374 100644
--- a/design-system/packages/ui/src/components/IconButton/IconButton.tsx
+++ b/design-system/packages/ui/src/components/IconButton/IconButton.tsx
@@ -47,7 +47,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
       type={type}
     >
       <span aria-hidden="true" className={styles.progress} data-openbitfun-part="progress" />
-      <span aria-hidden="true" className={styles.icon} data-openbitfun-part="icon">{icon}</span>
+      <span aria-hidden="true" className={styles.icon} data-openbitfun-icon-slot="true" data-openbitfun-part="icon">{icon}</span>
     </button>
   );
 });
diff --git a/design-system/packages/ui/src/components/Input/Input.tsx b/design-system/packages/ui/src/components/Input/Input.tsx
index 1d8212aadf..c309f25037 100644
--- a/design-system/packages/ui/src/components/Input/Input.tsx
+++ b/design-system/packages/ui/src/components/Input/Input.tsx
@@ -60,7 +60,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
       data-size={size}
     >
       {leading !== undefined && leading !== null && (
-        <span className={styles.leading} data-openbitfun-part="leading">{leading}</span>
+        <span className={styles.leading} data-openbitfun-icon-slot="true" data-openbitfun-part="leading">{leading}</span>
       )}
       <input
         {...props}
@@ -91,7 +91,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         type={type}
       />
       {trailing !== undefined && trailing !== null && (
-        <span className={styles.trailing} data-openbitfun-part="trailing">{trailing}</span>
+        <span className={styles.trailing} data-openbitfun-icon-slot="true" data-openbitfun-part="trailing">{trailing}</span>
       )}
     </span>
   );
diff --git a/design-system/packages/ui/src/components/KeyHint/KeyHint.tsx b/design-system/packages/ui/src/components/KeyHint/KeyHint.tsx
index b0717e7509..2c3970441e 100644
--- a/design-system/packages/ui/src/components/KeyHint/KeyHint.tsx
+++ b/design-system/packages/ui/src/components/KeyHint/KeyHint.tsx
@@ -24,7 +24,7 @@ export const KeyHint = forwardRef<HTMLElement, KeyHintProps>(function KeyHint({
       ref={ref}
     >
       {icon !== undefined && icon !== null && (
-        <span aria-hidden="true" className={styles.icon} data-openbitfun-part="icon">
+        <span aria-hidden="true" className={styles.icon} data-openbitfun-icon-slot="true" data-openbitfun-part="icon">
           {icon}
         </span>
       )}
diff --git a/design-system/packages/ui/src/components/LauncherButton/LauncherButton.tsx b/design-system/packages/ui/src/components/LauncherButton/LauncherButton.tsx
index b0f3e73a32..09790c534b 100644
--- a/design-system/packages/ui/src/components/LauncherButton/LauncherButton.tsx
+++ b/design-system/packages/ui/src/components/LauncherButton/LauncherButton.tsx
@@ -33,7 +33,7 @@ export const LauncherButton = forwardRef<
       type={type}
     >
       {leadingIcon !== undefined && leadingIcon !== null && (
-        <span aria-hidden="true" className={styles.icon} data-openbitfun-part="icon">
+        <span aria-hidden="true" className={styles.icon} data-openbitfun-icon-slot="true" data-openbitfun-part="icon">
           {leadingIcon}
         </span>
       )}
diff --git a/design-system/packages/ui/src/components/Listbox/Listbox.tsx b/design-system/packages/ui/src/components/Listbox/Listbox.tsx
index c9ff848abd..25e9472ad3 100644
--- a/design-system/packages/ui/src/components/Listbox/Listbox.tsx
+++ b/design-system/packages/ui/src/components/Listbox/Listbox.tsx
@@ -239,7 +239,7 @@ export const ListboxOption = forwardRef<HTMLButtonElement, ListboxOptionProps>(
         type="button"
       >
         {leading !== undefined && leading !== null && (
-          <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">
+          <span aria-hidden="true" className={styles.leading} data-openbitfun-icon-slot="true" data-openbitfun-part="leading">
             {leading}
           </span>
         )}
@@ -254,7 +254,7 @@ export const ListboxOption = forwardRef<HTMLButtonElement, ListboxOptionProps>(
         {metadata !== undefined && metadata !== null && (
           <OverflowText title={title === "" ? "" : undefined} className={styles.metadata} data-openbitfun-part="metadata" marqueeActive={active}>{metadata}</OverflowText>
         )}
-        <span aria-hidden="true" className={styles.indicator} data-openbitfun-part="indicator">
+        <span aria-hidden="true" className={styles.indicator} data-openbitfun-icon-slot="true" data-openbitfun-part="indicator">
           {indicator ?? (selected ? <Icon name="check-line" /> : null)}
         </span>
       </button>
diff --git a/design-system/packages/ui/src/components/Menu/MenuPopover.tsx b/design-system/packages/ui/src/components/Menu/MenuPopover.tsx
index be5a845d89..96b4ae16ca 100644
--- a/design-system/packages/ui/src/components/Menu/MenuPopover.tsx
+++ b/design-system/packages/ui/src/components/Menu/MenuPopover.tsx
@@ -203,7 +203,7 @@ function MenuLevel({ items, open, phase, treeId, onClose, onBack, anchorRef, pos
     <MenuSurface {...props} ref={node => { (menuRef as { current: HTMLDivElement | null }).current = node; }} className={classNames(styles.popup, className)} autoFocusFirstItem={open && autoFocusFirstItem && Boolean(layout)} tabIndex={-1}
       style={{ ...layout?.style, ...style, visibility: layout ? undefined : "hidden" }} data-openbitfun-native-webview-occlusion data-openbitfun-menu-tree={treeId} data-placement={layout?.placement ?? placement} data-state={phase}
       aria-hidden={!open || undefined} {...(!open ? { inert: "" } : {})} onContextMenu={event => event.preventDefault()}>
-      {items.map(item => item.separator ? <Separator key={item.id} /> : <Item key={item.id} data-menu-id={item.id} leading={item.icon ? <Leading className={styles.icon}>{item.icon}</Leading> : undefined} shortcut={item.shortcut ? <Shortcut>{item.shortcut}</Shortcut> : undefined} tone={item.tone} role={item.role} checked={item.checked}
+      {items.map(item => item.separator ? <Separator key={item.id} /> : <Item key={item.id} data-menu-id={item.id} leading={item.icon ? <Leading className={styles.icon} data-openbitfun-icon-slot="true">{item.icon}</Leading> : undefined} shortcut={item.shortcut ? <Shortcut>{item.shortcut}</Shortcut> : undefined} tone={item.tone} role={item.role} checked={item.checked}
         disabled={item.disabled} aria-disabled={item.disabled || undefined} aria-haspopup={item.submenu?.length ? "menu" : undefined} aria-expanded={item.submenu?.length ? activeEntry?.id === item.id : undefined}
         aria-controls={activeEntry?.id === item.id ? submenuId : undefined} metadata={item.submenu?.length ? <Arrow className={styles.submenuArrow}><Icon name="chevron-right" size="sm" /></Arrow> : undefined}
         onClick={event => { event.stopPropagation(); if (item.submenu?.length) openSubmenu(item, event.currentTarget, true); else activate(item); }}
diff --git a/design-system/packages/ui/src/components/SearchField/SearchField.tsx b/design-system/packages/ui/src/components/SearchField/SearchField.tsx
index 2ae33b6ee5..c8d43ccfe5 100644
--- a/design-system/packages/ui/src/components/SearchField/SearchField.tsx
+++ b/design-system/packages/ui/src/components/SearchField/SearchField.tsx
@@ -88,7 +88,7 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
         className={classNames(styles.field, hasTrailingAction && styles.fieldWithAction)}
         disabled={disabled}
         leading={leadingIcon === undefined ? undefined : (
-          <span aria-hidden="true" className={styles.icon} data-openbitfun-part="icon">{leadingIcon}</span>
+          <span aria-hidden="true" className={styles.icon} data-openbitfun-icon-slot="true" data-openbitfun-part="icon">{leadingIcon}</span>
         )}
         onKeyDown={handleKeyDown}
         ref={ref}
diff --git a/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.tsx b/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.tsx
index 971adc1a11..de4171fc20 100644
--- a/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.tsx
@@ -165,7 +165,7 @@ export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps
               type="button"
             >
               {option.icon && (
-                <span aria-hidden="true" className={styles.icon} data-openbitfun-part="icon">
+                <span aria-hidden="true" className={styles.icon} data-openbitfun-icon-slot="true" data-openbitfun-part="icon">
                   {option.icon}
                 </span>
               )}
diff --git a/design-system/packages/ui/src/components/Select/Select.tsx b/design-system/packages/ui/src/components/Select/Select.tsx
index bb95c8a437..f394ad8929 100644
--- a/design-system/packages/ui/src/components/Select/Select.tsx
+++ b/design-system/packages/ui/src/components/Select/Select.tsx
@@ -343,7 +343,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
   const renderTriggerContent = () => (
     <>
       {leading !== undefined && leading !== null && (
-        <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">
+        <span aria-hidden="true" className={styles.leading} data-openbitfun-icon-slot="true" data-openbitfun-part="leading">
           {leading}
         </span>
       )}
@@ -353,7 +353,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
       >
         {selectedOption?.label ?? placeholder}
       </OverflowText>
-      <span aria-hidden="true" className={styles.indicator} data-openbitfun-part="indicator">
+      <span aria-hidden="true" className={styles.indicator} data-openbitfun-icon-slot="true" data-openbitfun-part="indicator">
         <Icon name="chevron-down" size="sm" />
       </span>
     </>
diff --git a/design-system/packages/ui/src/components/StatusPill/StatusPill.tsx b/design-system/packages/ui/src/components/StatusPill/StatusPill.tsx
index 09cfc98393..2d6c098d59 100644
--- a/design-system/packages/ui/src/components/StatusPill/StatusPill.tsx
+++ b/design-system/packages/ui/src/components/StatusPill/StatusPill.tsx
@@ -43,7 +43,7 @@ export const StatusPill = forwardRef<HTMLSpanElement, StatusPillProps>(
         ref={ref}
       >
         {leading !== undefined && leading !== null && (
-          <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">
+          <span aria-hidden="true" className={styles.leading} data-openbitfun-icon-slot="true" data-openbitfun-part="leading">
             {leading}
           </span>
         )}
diff --git a/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx b/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
index 840eaebb90..a7ac7e9ad6 100644
--- a/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
+++ b/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
@@ -166,7 +166,7 @@ export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(function TabGr
               type="button"
             >
               {hasIcon && (
-                <span aria-hidden="true" className={styles.icon} data-openbitfun-part="icon">
+                <span aria-hidden="true" className={styles.icon} data-openbitfun-icon-slot="true" data-openbitfun-part="icon">
                   {item.icon}
                 </span>
               )}
diff --git a/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.meta.ts b/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.meta.ts
index a5b66d204b..c929ec7c0e 100644
--- a/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.meta.ts
+++ b/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.meta.ts
@@ -21,6 +21,9 @@ export const voiceCallPanelMeta = {
   tokens: [
     "color.content.onDark", "color.content.onLight",
     "type.heading.panel", "type.body.lg", "type.modifier.leading.tight",
+    "type.flow.body", "type.flow.control", "type.flow.support",
+    "color.content.primary", "color.content.secondary", "color.action.quiet.hover",
+    "control.flowChat.cardRadius",
     "space.3", "space.6", "space.8", "radius.lg",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.module.css b/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.module.css
index da7b110dd7..e217ddc373 100644
--- a/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.module.css
+++ b/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallPanel.module.css
@@ -206,6 +206,32 @@
   .compactTranscript { padding: var(--openbitfun-space-3) var(--openbitfun-space-6); }
   .compactTranscript .entries { gap: var(--openbitfun-space-5); }
   .compactTranscript .status { font-size: var(--openbitfun-type-label-sm-font-size); opacity: 0.75; }
+
+  /* The transcript changes presentation without replacing its reading viewport.
+     Match FlowChat's user text and prose roles; compact only controls spacing. */
+  .conversation[data-openbitfun-presentation="chat"] {
+    color: var(--openbitfun-color-content-primary);
+    font-family: var(--openbitfun-type-flow-body-font-family);
+    font-size: var(--openbitfun-type-flow-control-font-size);
+    font-weight: var(--openbitfun-type-flow-control-font-weight);
+    line-height: var(--openbitfun-type-flow-body-line-height);
+    letter-spacing: var(--openbitfun-type-flow-body-letter-spacing);
+  }
+
+  .conversation[data-openbitfun-presentation="chat"] .user {
+    background: var(--openbitfun-color-action-quiet-hover);
+    border-radius: calc(var(--openbitfun-control-flow-chat-card-radius) + 2px);
+    line-height: inherit;
+  }
+
+  .conversation[data-openbitfun-presentation="chat"] .status {
+    color: var(--openbitfun-color-content-secondary);
+    font-size: var(--openbitfun-type-flow-support-font-size);
+    font-weight: var(--openbitfun-type-flow-support-font-weight);
+    line-height: var(--openbitfun-type-flow-support-line-height);
+    opacity: 1;
+  }
+
   .controls { transition: padding 480ms cubic-bezier(0.22, 1, 0.36, 1); }
   .controls .control { transition: inline-size 480ms, block-size 480ms, flex-basis 480ms; }
   .compactControls { padding: var(--openbitfun-space-2); gap: var(--openbitfun-space-2); }
diff --git a/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallTranscript.tsx b/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallTranscript.tsx
index a6138c66d7..9f6e6a8a4b 100644
--- a/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallTranscript.tsx
+++ b/design-system/packages/ui/src/components/VoiceCallPanel/VoiceCallTranscript.tsx
@@ -18,12 +18,14 @@ export interface VoiceCallTranscriptProps {
   header?: ReactNode;
   className?: string;
   compact?: boolean;
+  /** Chat uses FlowChat message tokens; voice retains the inverse call surface. */
+  presentation?: "voice" | "chat";
   /** Requests older records when the reader scrolls toward the start. The host owns paging and retries. */
   onLoadEarlier?: () => void;
 }
 
 /** One reading viewport for both text and voice. The host owns the records. */
-export function VoiceCallTranscript({ entries, status, header, className, compact, onLoadEarlier }: VoiceCallTranscriptProps) {
+export function VoiceCallTranscript({ entries, status, header, className, compact, presentation = "voice", onLoadEarlier }: VoiceCallTranscriptProps) {
   const viewportRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const followsLatest = useRef(true);
@@ -77,6 +79,7 @@ export function VoiceCallTranscript({ entries, status, header, className, compac
 
   return <div ref={viewportRef} className={classNames(styles.conversation, compact && styles.compactTranscript, className)}
     data-openbitfun-component="voice-call-panel" data-openbitfun-part="conversation"
+    data-openbitfun-presentation={presentation}
     data-scrolled={scrolled || undefined}
     tabIndex={0}
     onWheel={event => { if (event.deltaY < 0) requestEarlier(); }}
diff --git a/design-system/packages/ui/src/index.ts b/design-system/packages/ui/src/index.ts
index 72d6ad01dd..3a78d12668 100644
--- a/design-system/packages/ui/src/index.ts
+++ b/design-system/packages/ui/src/index.ts
@@ -15,10 +15,13 @@ export {
   useDismissibleLayer,
   useHasOverlayLayers,
   useOverlayLayerActions,
+  usePresence,
   type OverlayDismissReason,
   type OverlayLayerScope,
   type OverlayPortalContainer,
   type OverlayPortalTarget,
+  type PresenceSnapshot,
+  type PresenceState,
   type UseDismissibleLayerOptions,
 } from "./overlay";
 
diff --git a/design-system/packages/ui/src/overlay/usePresence.ts b/design-system/packages/ui/src/overlay/usePresence.ts
index c4181f33dc..145ad1e0dc 100644
--- a/design-system/packages/ui/src/overlay/usePresence.ts
+++ b/design-system/packages/ui/src/overlay/usePresence.ts
@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "../internal/useReducedMotion";
 
 export type PresenceState = "entering" | "entered" | "exiting";
 
@@ -10,10 +11,24 @@ export interface PresenceSnapshot {
 export function usePresence(open: boolean, exitDurationMs: number): PresenceSnapshot {
   const [present, setPresent] = useState(open);
   const [state, setState] = useState<PresenceState>(open ? "entered" : "exiting");
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const reducedMotion = useReducedMotion();
 
   useEffect(() => {
+    if (reducedMotion) {
+      setPresent(open);
+      setState(open ? "entered" : "exiting");
+      return;
+    }
     if (open) {
       setPresent(true);
+      // An interrupted exit still has a rendered surface. Reverse its transition
+      // from the current painted value instead of resetting to the entrance pose.
+      if (present && stateRef.current === "exiting") {
+        setState("entered");
+        return;
+      }
       setState("entering");
       const view = typeof window === "undefined" ? null : window;
       if (!view) {
@@ -40,7 +55,7 @@ export function usePresence(open: boolean, exitDurationMs: number): PresenceSnap
     }
     const timer = view.setTimeout(() => setPresent(false), exitDurationMs);
     return () => view.clearTimeout(timer);
-  }, [exitDurationMs, open, present]);
+  }, [exitDurationMs, open, present, reducedMotion]);
 
   return { present, state };
 }
diff --git a/design-system/packages/ui/src/styles/layers.css b/design-system/packages/ui/src/styles/layers.css
index 3dd21318e8..5e1f517fcf 100644
--- a/design-system/packages/ui/src/styles/layers.css
+++ b/design-system/packages/ui/src/styles/layers.css
@@ -35,3 +35,15 @@
     }
   }
 }
+
+@layer openbitfun.components {
+  /*
+   * Public icon slots own the visual weight of default Lucide glyphs as well
+   * as their size and color. Match only Lucide's default stroke attribute so
+   * reviewed fill icons and intentionally custom line artwork remain intact.
+   */
+  [data-openbitfun-icon-slot="true"] > :where(svg.lucide[stroke-width="2"]) {
+    color: inherit;
+    stroke-width: 1.6;
+  }
+}
diff --git a/design-system/packages/ui/tests/icon-slots.test.mjs b/design-system/packages/ui/tests/icon-slots.test.mjs
index cfbc08f8fe..003944f08d 100644
--- a/design-system/packages/ui/tests/icon-slots.test.mjs
+++ b/design-system/packages/ui/tests/icon-slots.test.mjs
@@ -29,6 +29,28 @@ const slots = [
   ["Listbox", "indicator", "inline-size", "100%"],
 ];
 
+const markedSlotSources = [
+  ["ActionCard/ActionCard.tsx", 1],
+  ["ActionItem/ActionItem.tsx", 1],
+  ["ActivityItem/ActivityItem.tsx", 1],
+  ["Avatar/Avatar.tsx", 1],
+  ["Button/Button.tsx", 2],
+  ["Combobox/Combobox.tsx", 2],
+  ["ConfirmDialog/ConfirmDialog.tsx", 1],
+  ["Empty/Empty.tsx", 1],
+  ["IconButton/IconButton.tsx", 1],
+  ["Input/Input.tsx", 2],
+  ["KeyHint/KeyHint.tsx", 1],
+  ["LauncherButton/LauncherButton.tsx", 1],
+  ["Listbox/Listbox.tsx", 2],
+  ["Menu/MenuPopover.tsx", 1],
+  ["SearchField/SearchField.tsx", 1],
+  ["SegmentedControl/SegmentedControl.tsx", 1],
+  ["Select/Select.tsx", 2],
+  ["StatusPill/StatusPill.tsx", 1],
+  ["TabGroup/TabGroup.tsx", 1],
+];
+
 test("sized slots apply the same geometry to SVG and catalog icons, regardless of stylesheet order", async () => {
   for (const [component, slot, property, value] of slots) {
     const css = await readFile(new URL(`../src/components/${component}/${component}.module.css`, import.meta.url), "utf8");
@@ -72,6 +94,42 @@ test("buttons constrain normalized line fallbacks through the same icon slot", (
   }
 });
 
+test("public icon slots normalize default Lucide weight without changing custom artwork", async () => {
+  const layers = await readFile(new URL("../src/styles/layers.css", import.meta.url), "utf8");
+  const rule = [...layers.matchAll(/([^{}]+)\{([^{}]+)\}/g)]
+    .find(([, selectors]) => selectors.includes('[data-openbitfun-icon-slot="true"]'));
+
+  assert.ok(rule, "shared icon-slot normalization rule must exist");
+  assert.match(rule[1], /svg\.lucide\[stroke-width="2"\]/);
+  assert.match(rule[2], /color:\s*inherit/);
+  assert.match(rule[2], /stroke-width:\s*1\.6/);
+
+  for (const [Component, props] of [
+    [Button, { children: "Network", leadingIcon: createElement(Network) }],
+    [IconButton, { "aria-label": "Network", icon: createElement(Network) }],
+  ]) {
+    const markup = renderToStaticMarkup(createElement(Component, props));
+    const svg = markup.match(/<svg[^>]*>/)?.[0] ?? "";
+    assert.match(markup, /data-openbitfun-icon-slot="true"/);
+    assert.match(svg, /class="lucide lucide-network"/);
+    assert.match(svg, /stroke-width="2"/);
+  }
+
+  const customMarkup = renderToStaticMarkup(createElement(IconButton, {
+    "aria-label": "Filled network",
+    icon: createElement(Network, { fill: "currentColor", strokeWidth: 0 }),
+  }));
+  assert.match(customMarkup, /<svg[^>]*stroke-width="0"/);
+});
+
+test("every public sized icon wrapper opts into the shared slot contract", async () => {
+  for (const [file, expectedCount] of markedSlotSources) {
+    const source = await readFile(new URL(`../src/components/${file}`, import.meta.url), "utf8");
+    const count = source.match(/data-openbitfun-icon-slot="true"/g)?.length ?? 0;
+    assert.equal(count, expectedCount, file);
+  }
+});
+
 test("tabs keep native session icons and catalog scene icons in the same sized region", () => {
   const markup = renderToStaticMarkup(createElement(TabGroup, {
     "aria-label": "Scenes",
diff --git a/design-system/packages/ui/tests/overlay-kernel.test.mjs b/design-system/packages/ui/tests/overlay-kernel.test.mjs
index 9ee5687b08..ba67f1821c 100644
--- a/design-system/packages/ui/tests/overlay-kernel.test.mjs
+++ b/design-system/packages/ui/tests/overlay-kernel.test.mjs
@@ -8,12 +8,14 @@ import {
   useDismissibleLayer,
   useHasOverlayLayers,
   useOverlayLayerActions,
+  usePresence,
 } from "../dist/index.js";
 
 test("the overlay kernel hooks are exported from the public package entry", () => {
   assert.equal(typeof useDismissibleLayer, "function");
   assert.equal(typeof useHasOverlayLayers, "function");
   assert.equal(typeof useOverlayLayerActions, "function");
+  assert.equal(typeof usePresence, "function");
 });
 
 test("DesignSystemProvider is the single locale, theme, portal and layer-stack host", () => {
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
index bc989fd387..e2d16417c2 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
@@ -2,1616 +2,235 @@
   container: review-platform / inline-size;
   display: flex;
   flex-direction: column;
-  min-height: 0;
-  height: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  block-size: 100%;
   color: var(--openbitfun-color-content-primary);
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--openbitfun-color-surface-raised) 52%, transparent), transparent 120px),
-    var(--openbitfun-color-surface-canvas);
+  background: var(--openbitfun-color-surface-canvas);
 
-  &__topbar,
-  &__subbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    min-height: 44px;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
-  }
-
-  &__topbar {
-    flex-wrap: wrap;
+  > [data-openbitfun-component='toolbar'] {
+    flex: 0 0 auto;
   }
 
-  &__topbar {
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 86%, transparent);
+  &__remote-select {
+    flex: 1 1 0;
+    min-inline-size: 0;
   }
 
-  &__subbar {
-    min-height: 34px;
-    padding-block: 6px;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 42%, transparent);
+  &__body {
+    display: grid;
+    grid-template-columns: minmax(260px, clamp(260px, 32cqi, 360px)) minmax(0, 1fr);
+    min-block-size: 0;
+    flex: 1;
   }
 
-  &__brand,
-  &__topbar-actions,
-  &__status-line,
-  &__detail-meta,
-  &__detail-actions,
-  &__timeline-item,
-  &__thread-head,
-  &__account,
-  &__pagination {
-    display: flex;
-    align-items: center;
+  &--detail-only &__body {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  &__brand {
-    min-width: 0;
-    gap: 10px;
+  &__body--list-only {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  &__brand-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    border: 1px solid color-mix(in srgb, var(--openbitfun-color-accent-default) 25%, var(--openbitfun-color-border-default));
-    border-radius: 6px;
-    color: var(--openbitfun-color-accent-default);
-    background: color-mix(in srgb, var(--openbitfun-color-accent-default) 10%, transparent);
+  &__list {
+    inline-size: 100%;
   }
 
-  &__brand-copy,
-  &__pr-main,
-  &__detail-title-block,
-  &__timeline-main {
-    min-width: 0;
+  &__list-copy {
     display: flex;
     flex-direction: column;
+    min-inline-size: 0;
+    gap: var(--openbitfun-space-1);
   }
 
-  &__title {
-    font-size: var(--openbitfun-type-label-md-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-    letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
-  }
-
-  &__subtitle,
-  &__pr-meta,
-  &__detail-meta,
-  &__timeline-main span,
-  &__thread-anchor,
-  &__status-line {
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-  }
-
-  &__topbar-actions {
-    gap: 8px;
-    min-width: 0;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-
-  &__remote-select {
-    width: min(320px, 100%);
-    min-width: 180px;
-  }
-
-  &__account {
-    max-width: 176px;
-    gap: 5px;
-    padding: 4px 8px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 6px;
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 64%, transparent);
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-
-    span:not([data-overflow-content]) {
-      min-width: 0;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-
-  &__account--connected {
-    color: color-mix(in srgb, var(--openbitfun-color-status-success-content) 92%, var(--openbitfun-color-content-secondary));
-  }
-
-  &__account--not_required {
-    color: color-mix(in srgb, var(--openbitfun-color-accent-default) 90%, var(--openbitfun-color-content-secondary));
-  }
-
-  &__account--expired,
-  &__account--error {
-    color: var(--openbitfun-color-status-danger-content);
-  }
-
-  &__account--unsupported {
-    color: var(--openbitfun-color-status-warning-content);
-  }
-
-  &__icon-button.icon-btn {
-    border-radius: 6px;
-    color: var(--openbitfun-color-content-secondary);
-    background: transparent;
-
-    &:hover:not(:disabled) {
-      color: var(--openbitfun-color-content-primary);
-      background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 72%, transparent);
-    }
-  }
-
-  &__auth-form {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    min-width: 0;
+  &__auth-gate {
+    max-inline-size: 100%;
   }
 
-  &__auth-target {
+  &__detail {
+    min-inline-size: 0;
+    min-block-size: 0;
     display: flex;
     flex-direction: column;
-    gap: 3px;
-    min-width: 0;
-    padding: 8px 10px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 6px;
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 58%, transparent);
-
-    span:not([data-overflow-content]),
-    strong {
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    span {
-      color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-meta-font-size);
-      font-weight: var(--openbitfun-type-label-sm-font-weight);
-    }
-
-    strong {
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-    }
+    overflow: hidden;
   }
 
-  &__auth-actions {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 8px;
+  &__detail-header {
+    flex: 0 0 auto;
+    padding: var(--openbitfun-space-4);
+    overflow-wrap: anywhere;
   }
 
-  &__gh-auth {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-
-    code {
-      overflow-x: auto;
-      padding: 9px 10px;
-      border: 1px solid var(--openbitfun-color-border-default);
-      border-radius: 6px;
-      background: var(--openbitfun-color-action-quiet-hover);
-      color: var(--openbitfun-color-content-primary);
-      font-family:var(--openbitfun-type-code-md-font-family);
-      white-space: nowrap;
-    }
+  &__detail-toolbar {
+    flex: 0 0 auto;
   }
 
-  &__gh-auth-error {
-    color: var(--openbitfun-color-status-danger-content);
+  &__back {
+    display: none;
   }
 
-  &__auth-gate {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    margin: 10px 12px;
-    padding: 12px;
-    border: 1px solid color-mix(in srgb, var(--openbitfun-color-status-warning-content) 42%, var(--openbitfun-color-border-default));
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--openbitfun-color-status-warning-content) 10%, var(--openbitfun-color-surface-raised));
+  &__meta,
+  &__inline-meta,
+  &__detail-meta,
+  &__thread-anchor {
+    color: var(--openbitfun-color-content-secondary);
+    font-size: var(--openbitfun-type-meta-font-size);
   }
 
-  &__auth-gate--detail {
-    max-width: 720px;
+  &__ci-details {
+    display: grid;
+    gap: var(--openbitfun-space-2);
     margin: 0;
+    font-family: var(--openbitfun-type-body-sm-font-family);
+    font-size: var(--openbitfun-type-body-sm-font-size);
+    line-height: var(--openbitfun-type-body-sm-line-height);
   }
 
-  &__auth-gate-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    flex: 0 0 auto;
-    border: 1px solid color-mix(in srgb, var(--openbitfun-color-status-warning-content) 42%, var(--openbitfun-color-border-default));
-    border-radius: 8px;
-    color: var(--openbitfun-color-status-warning-content);
-    background: color-mix(in srgb, var(--openbitfun-color-status-warning-content) 14%, transparent);
-  }
-
-  &__auth-gate-copy {
-    min-width: 0;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
+  &__fact-row {
+    display: grid;
+    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
+    align-items: start;
+    gap: var(--openbitfun-space-3);
 
-    strong {
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-md-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
+    dt {
+      color: var(--openbitfun-color-content-secondary);
     }
 
-    span {
-      color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
+    dd {
+      min-inline-size: 0;
+      margin: 0;
       overflow-wrap: anywhere;
     }
   }
 
-  &__auth-gate-actions {
+  &__tabs {
     display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-
-  &__status-line {
-    gap: 12px;
-    flex-wrap: wrap;
-
-    span {
-      display: inline-flex;
-      align-items: center;
-      gap: 5px;
-    }
-  }
-
-  &__loading-inline {
-    color: var(--openbitfun-color-accent-default);
-    display: inline-block;
-    transform-origin: center;
-  }
-
-  &__loading-inline--icon {
-    animation: review-platform-spin 0.9s linear infinite;
-  }
-
-  &__loading-status {
-    color: var(--openbitfun-color-content-secondary);
-  }
-
-  &__cache-label {
-    color: var(--openbitfun-color-content-secondary);
-  }
-
-  &__body {
-    min-height: 0;
+    flex-direction: column;
+    min-block-size: 0;
     flex: 1;
-    display: grid;
-    grid-template-columns: minmax(260px, clamp(260px, 32cqi, 360px)) minmax(0, 1fr);
   }
 
-  &--detail-only &__body {
-    grid-template-columns: minmax(0, 1fr);
+  &__tab-bar {
+    flex: 0 0 auto;
   }
 
-  &__list {
-    min-width: 0;
-    min-height: 0;
+  &__tab-content {
+    box-sizing: border-box;
+    flex: 1 1 0;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding: var(--openbitfun-space-4);
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--openbitfun-color-border-default);
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 48%, transparent);
-  }
+    gap: var(--openbitfun-space-6);
 
-  &__list-toolbar {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 10px 10px 8px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
+    > * {
+      flex-shrink: 0;
+    }
   }
 
-  &__state-filters {
-    display: flex;
+  &__wrap {
     flex-wrap: wrap;
-    gap: 6px;
   }
 
-  &__state-chip {
+  &__inline-meta {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    min-height: 24px;
-    padding: 0 9px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 999px;
-    background: transparent;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-    cursor: pointer;
-    transition: border-color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard), background var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard), color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard);
-
-    &:hover {
-      border-color: color-mix(in srgb, var(--openbitfun-color-accent-default) 32%, var(--openbitfun-color-border-default));
-      color: var(--openbitfun-color-content-primary);
-    }
-
-    &.is-active {
-      border-color: color-mix(in srgb, var(--openbitfun-color-accent-default) 40%, var(--openbitfun-color-border-default));
-      color: var(--openbitfun-color-accent-default);
-      background: color-mix(in srgb, var(--openbitfun-color-accent-default) 11%, transparent);
-    }
-  }
-
-  &__list-scroll {
-    min-height: 0;
-    flex: 1;
-    padding: 8px;
-  }
-
-  &__pagination {
-    justify-content: space-between;
-    gap: 8px;
-    min-height: 34px;
-    padding: 6px 8px;
-    border-top: 1px solid var(--openbitfun-color-border-default);
-    color: var(--openbitfun-color-content-secondary);
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 62%, transparent);
-    font-size: var(--openbitfun-type-meta-font-size);
-    font-variant-numeric: tabular-nums;
-  }
-
-  &__detail-pagination {
-    flex: 0 0 auto;
-    margin-top: 4px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 7px;
-  }
-
-  &__empty-state,
-  &__error-state,
-  &__detail-empty {
-    min-height: 160px;
-    padding: 20px 16px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-    line-height: var(--openbitfun-type-body-sm-line-height);
-  }
-
-  &__empty-state,
-  &__detail-empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    flex-direction: column;
-    text-align: center;
-  }
-
-  &__detail-empty-actions {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
     flex-wrap: wrap;
+    gap: var(--openbitfun-space-2);
   }
 
-  &__error-state {
-    display: grid;
-    justify-items: center;
-    gap: 10px;
-    color: var(--openbitfun-color-status-danger-content);
-  }
-
-  &__pr-row {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 20px minmax(0, 1fr) auto;
-    gap: 8px;
-    padding: 10px 9px;
-    border: 1px solid transparent;
-    border-radius: 7px;
-    background: transparent;
-    color: inherit;
-    text-align: left;
-    cursor: pointer;
-    transition: border-color var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard), background var(--openbitfun-motion-duration-base) var(--openbitfun-motion-easing-standard);
+  &__body-markdown {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
 
-    &:hover {
-      background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 78%, transparent);
+    .markdown-renderer > :first-child {
+      margin-block-start: 0;
     }
 
-    &.is-selected {
-      border-color: color-mix(in srgb, var(--openbitfun-color-accent-default) 28%, var(--openbitfun-color-border-default));
-      background: linear-gradient(90deg, color-mix(in srgb, var(--openbitfun-color-accent-default) 11%, transparent), color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 86%, transparent));
+    .markdown-renderer > :last-child {
+      margin-block-end: 0;
     }
   }
 
-  &__pr-icon {
-    padding-top: 1px;
-  }
-
-  &__pr-title,
-  &__file-path,
-  &__timeline-main strong {
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
+  &__detail-empty {
+    min-block-size: 0;
+    max-inline-size: 100%;
+    margin: auto;
+    padding: var(--openbitfun-space-6);
+    overflow: auto;
   }
 
-  &__pr-title {
-    font-size: var(--openbitfun-type-label-sm-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
+  // Provider patches and logs remain preformatted, independently scrollable content.
+  &__diff-block,
+  &__ci-log-block {
+    box-sizing: border-box;
+    margin: 0;
+    max-block-size: 360px;
+    overflow: auto;
+    padding: var(--openbitfun-space-3);
+    border-radius: var(--openbitfun-radius-md);
+    background: var(--openbitfun-color-surface-tertiary);
+    color: var(--openbitfun-color-content-primary);
+    font-family: var(--openbitfun-type-code-md-font-family);
+    font-size: var(--openbitfun-type-code-md-font-size);
+    line-height: var(--openbitfun-type-code-md-line-height);
+    tab-size: 2;
   }
 
-  &__pr-meta--secondary {
-    margin-top: 2px;
+  &__ci-log-block {
+    max-block-size: 320px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
   }
 
-  &__pr-stats {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 8px;
-    padding-top: 1px;
+  &__diff-block {
+    padding-inline: 0;
   }
 
-  &__counts {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    font-size: var(--openbitfun-type-meta-font-size);
-    font-variant-numeric: tabular-nums;
-    color: var(--openbitfun-color-content-secondary);
+  &__diff-line {
+    display: block;
+    min-block-size: 1lh;
+    padding-inline: var(--openbitfun-space-3);
+    white-space: pre;
   }
 
-  &__decision,
-  &__file-status {
-    display: inline-flex;
-    align-items: center;
-    width: fit-content;
-    padding: 2px 6px;
-    border-radius: 5px;
-    font-size: var(--openbitfun-type-micro-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-    line-height: var(--openbitfun-type-label-md-line-height);
+  &__diff-line--hunk {
+    color: var(--openbitfun-color-status-info-content);
+    background: var(--openbitfun-color-status-info-surface);
   }
 
-  &__decision--approved {
+  &__diff-line--add {
     color: var(--openbitfun-color-status-success-content);
     background: var(--openbitfun-color-status-success-surface);
   }
 
-  &__decision--changes_requested {
+  &__diff-line--delete {
     color: var(--openbitfun-color-status-danger-content);
     background: var(--openbitfun-color-status-danger-surface);
   }
 
-  &__decision--commented,
-  &__decision--pending {
-    color: var(--openbitfun-color-status-warning-content);
-    background: var(--openbitfun-color-status-warning-surface);
-  }
-
-  &__state-icon--open {
-    color: var(--openbitfun-color-status-success-content);
-  }
-
-  &__state-icon--merged {
-    color: var(--openbitfun-color-accent-secondary);
-  }
-
-  &__state-icon--closed {
-    color: var(--openbitfun-color-status-danger-content);
-  }
-
-  &__detail {
-    min-width: 0;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  &__detail-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    min-width: 0;
-    gap: 12px;
-    padding: 12px 14px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
+  &__diff-line--meta {
+    color: var(--openbitfun-color-content-secondary);
   }
 
-  &__detail-title-row {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 7px;
-
-    h3 {
-      flex: 1 1 auto;
-      min-width: 0;
-      margin: 0;
-      overflow: hidden;
-      white-space: nowrap;
-      font-size: var(--openbitfun-type-body-lg-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-      letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
+  @container review-platform (max-width: 760px) {
+    &__body {
+      grid-template-columns: minmax(0, 1fr);
     }
-  }
-
-  &__detail-state {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    min-height: 20px;
-    padding: 0 7px;
-    border-radius: 5px;
-    font-size: var(--openbitfun-type-micro-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-  }
-
-  &__detail-state--open,
-  &__detail-state--draft {
-    color: var(--openbitfun-color-status-success-content);
-    background: var(--openbitfun-color-status-success-surface);
-  }
-
-  &__detail-state--merged {
-    color: var(--openbitfun-color-accent-secondary);
-    background: color-mix(in srgb, var(--openbitfun-color-accent-secondary) 8%, transparent);
-  }
-
-  &__detail-state--closed {
-    color: var(--openbitfun-color-status-danger-content);
-    background: var(--openbitfun-color-status-danger-surface);
-  }
 
-  &__detail-meta {
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 5px;
+    &[data-openbitfun-view='list'] &__detail,
+    &[data-openbitfun-view='detail'] &__list,
+    &[data-openbitfun-view='detail'] &__toolbar {
+      display: none;
+    }
 
-    span {
+    &__back {
       display: inline-flex;
-      align-items: center;
-      gap: 4px;
-    }
-  }
-
-  &__detail-actions {
-    gap: 6px;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-
-  }
-
-  &__fact-list {
-    display: flex;
-    flex-direction: column;
-    padding: 8px 14px 10px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
-  }
-
-  &__detail-title-block {
-    flex: 1 1 auto;
-    max-width: 100%;
-  }
-
-  &__fact-row {
-    min-width: 0;
-    min-height: 32px;
-    display: grid;
-    grid-template-columns: 148px minmax(0, 1fr);
-    align-items: center;
-    gap: 12px;
-  }
-
-  &__fact-label {
-    min-width: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-
-    svg {
-      flex: 0 0 auto;
-      color: var(--openbitfun-color-content-muted);
-    }
-  }
-
-  &__fact-value {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--openbitfun-color-content-primary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-
-    strong {
-      min-width: 0;
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-    }
-
-    > span:not(.review-platform__additions, .review-platform__deletions) {
-      color: var(--openbitfun-color-content-secondary);
-    }
-  }
-
-  &__fact-value--branch {
-    flex-wrap: wrap;
-
-    strong {
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    svg {
-      flex: 0 0 auto;
-      color: var(--openbitfun-color-content-muted);
-    }
-  }
-
-  &__fact-value--review {
-    justify-content: space-between;
-
-    > span:not([data-overflow-content]) {
-      min-width: 0;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    > :last-child {
-      flex: 0 0 auto;
-    }
-  }
-
-  &__section-heading {
-    width: 100%;
-    min-height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    margin-bottom: 8px;
-
-    > span {
-      min-width: 0;
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-    }
-
-    > :last-child {
-      flex-shrink: 0;
-    }
-  }
-
-  &__section-count {
-    flex: 0 0 auto;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-  }
-
-  &__tabs {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    flex: 1;
-  }
-
-  &__tab-bar {
-    flex: 0 0 auto;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
-  }
-
-  &__tab-content {
-    box-sizing: border-box;
-    flex: 1 1 auto;
-    min-height: 0;
-    padding: 12px 14px;
-  }
-
-  &__overview-scroll {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-  }
-
-  &__detail-section {
-    width: min(100%, 1120px);
-    max-width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding-bottom: 18px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
-
-    &:last-child {
-      padding-bottom: 0;
-      border-bottom: 0;
-    }
-  }
-
-  &__detail-section-heading {
-    min-height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-
-    > span:first-child {
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-md-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-    }
-  }
-
-  &__detail-section-actions {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
-  }
-
-  &__section-empty {
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-  }
-
-  &__body-copy,
-  &__body-markdown {
-    width: min(100%, 1120px);
-    max-width: 100%;
-    margin: 0 0 14px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-    line-height: var(--openbitfun-type-support-line-height);
-  }
-
-  &__review-sessions {
-    max-width: 860px;
-    margin-bottom: 12px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 7px;
-    overflow: hidden;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 62%, transparent);
-  }
-
-  &__review-sessions-head {
-    min-height: 34px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding: 0 10px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 42%, transparent);
-
-    span:first-child {
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-    }
-
-    span:last-child {
-      color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-meta-font-size);
-    }
-  }
-
-  &__review-session-list {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__review-session {
-    width: 100%;
-    min-height: 42px;
-    display: grid;
-    grid-template-columns: 22px minmax(0, 1fr) 18px;
-    align-items: center;
-    gap: 8px;
-    padding: 7px 10px;
-    border: 0;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
-    background: transparent;
-    color: inherit;
-    text-align: left;
-    cursor: pointer;
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    &:hover {
-      background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 58%, transparent);
-    }
-
-    > svg {
-      color: var(--openbitfun-color-content-secondary);
-    }
-  }
-
-  &__review-session--running &__review-session-icon {
-    color: var(--openbitfun-color-accent-default);
-  }
-
-  &__review-session--completed &__review-session-icon {
-    color: var(--openbitfun-color-status-success-content);
-  }
-
-  &__review-session--error &__review-session-icon {
-    color: var(--openbitfun-color-status-danger-content);
-  }
-
-  &__review-session-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__review-session-main {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    strong,
-    span:not([data-overflow-content]) {
-      min-width: 0;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    strong {
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-    }
-
-    span {
-      color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-meta-font-size);
-    }
-  }
-
-  &__review-session-empty {
-    padding: 10px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-    line-height: var(--openbitfun-type-body-sm-line-height);
-  }
-
-  &__body-markdown {
-    padding: 10px 12px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 7px;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 64%, transparent);
-
-    .markdown-renderer {
-      color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      line-height: var(--openbitfun-type-body-lg-line-height);
-
-      > :first-child {
-        margin-top: 0;
-      }
-
-      > :last-child {
-        margin-bottom: 0;
-      }
-
-      h1,
-      h2,
-      h3,
-      h4 {
-        margin: 12px 0 8px;
-        color: var(--openbitfun-color-content-primary);
-        font-size: var(--openbitfun-type-label-md-font-size);
-        letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
-      }
-
-      p,
-      ul,
-      ol,
-      blockquote,
-      pre {
-        margin: 8px 0;
-      }
-    }
-  }
-
-  &__body-markdown--plain {
-    margin-bottom: 0;
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-  }
-
-  &__additions {
-    color: var(--openbitfun-color-code-change-added) !important;
-  }
-
-  &__deletions {
-    color: var(--openbitfun-color-code-change-removed) !important;
-  }
-
-  &__file-list,
-  &__timeline,
-  &__threads {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    align-items: stretch;
-  }
-
-  &__file-card {
-    flex: 0 0 auto;
-    min-width: 0;
-    overflow: hidden;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 7px;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 72%, transparent);
-  }
-
-  &__file-row {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    min-height: 34px;
-    padding: 0 8px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 42%, transparent);
-  }
-
-  &__file-main {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: 18px 72px minmax(0, 1fr) auto;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    min-height: 34px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font-size: var(--openbitfun-type-label-sm-font-size);
-    text-align: left;
-    cursor: pointer;
-
-    &:hover {
-      background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 62%, transparent);
-    }
-  }
-
-  &__file-add-button {
-    flex-shrink: 0;
-  }
-
-  &__file-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--openbitfun-color-content-secondary);
-  }
-
-  &__file-status--added {
-    color: var(--openbitfun-color-status-success-content);
-    background: var(--openbitfun-color-status-success-surface);
-  }
-
-  &__file-status--modified,
-  &__file-status--renamed {
-    color: var(--openbitfun-color-accent-default);
-    background: var(--openbitfun-color-action-secondary-background);
-  }
-
-  &__file-status--deleted {
-    color: var(--openbitfun-color-status-danger-content);
-    background: var(--openbitfun-color-status-danger-surface);
-  }
-
-  &__file-delta {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: var(--openbitfun-type-meta-font-size);
-    font-variant-numeric: tabular-nums;
-  }
-
-  &__diff-block {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    max-height: 360px;
-    overflow: auto;
-    padding: 8px 0;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-canvas) 72%, transparent);
-    color: var(--openbitfun-color-content-secondary);
-    font-family:var(--openbitfun-type-code-md-font-family);
-    font-size: var(--openbitfun-type-meta-font-size);
-    line-height: var(--openbitfun-type-support-line-height);
-    tab-size: 2;
-  }
-
-  &__diff-line {
-    display: block;
-    min-height: 17px;
-    padding: 0 12px;
-    white-space: pre;
-  }
-
-  &__diff-line--hunk {
-    color: var(--openbitfun-color-accent-secondary);
-    background: color-mix(in srgb, var(--openbitfun-color-accent-secondary) 8%, transparent);
-  }
-
-  &__diff-line--add {
-    color: var(--openbitfun-color-status-success-content);
-    background: var(--openbitfun-color-status-success-surface);
-  }
-
-  &__diff-line--delete {
-    color: var(--openbitfun-color-status-danger-content);
-    background: var(--openbitfun-color-status-danger-surface);
-  }
-
-  &__diff-line--meta {
-    color: var(--openbitfun-color-accent-default);
-  }
-
-  &__diff-empty {
-    padding: 10px 12px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-  }
-
-  &__detail-error {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-height: 36px;
-    padding: 8px 10px;
-    border: 1px solid color-mix(in srgb, var(--openbitfun-color-status-danger-content) 34%, var(--openbitfun-color-border-default));
-    border-radius: 7px;
-    background: var(--openbitfun-color-status-danger-surface);
-    color: var(--openbitfun-color-status-danger-content);
-    font-size: var(--openbitfun-type-meta-font-size);
-
-    span {
-      min-width: 0;
-      flex: 1;
-    }
-  }
-
-  &__timeline-item {
-    gap: 9px;
-    min-height: 42px;
-    padding: 7px 8px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 6px;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 72%, transparent);
-
-    svg,
-    [data-openbitfun-component='icon'] {
-      color: var(--openbitfun-color-content-secondary);
-      flex-shrink: 0;
-    }
-
-    code {
-      margin-left: auto;
-      color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-meta-font-size);
-    }
-  }
-
-  &__ci-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  &__ci-item {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 10px 11px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 6px;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 72%, transparent);
-  }
-
-  &__ci-item--passed {
-    border-color: color-mix(in srgb, var(--openbitfun-color-status-success-content) 28%, var(--openbitfun-color-border-default));
-    background: color-mix(in srgb, var(--openbitfun-color-status-success-content) 8%, var(--openbitfun-color-surface-raised));
-  }
-
-  &__ci-item--failed {
-    border-color: color-mix(in srgb, var(--openbitfun-color-status-danger-content) 30%, var(--openbitfun-color-border-default));
-    background: color-mix(in srgb, var(--openbitfun-color-status-danger-content) 8%, var(--openbitfun-color-surface-raised));
-  }
-
-  &__ci-item--pending {
-    border-color: color-mix(in srgb, var(--openbitfun-color-status-warning-content) 24%, var(--openbitfun-color-border-default));
-    background: color-mix(in srgb, var(--openbitfun-color-status-warning-content) 7%, var(--openbitfun-color-surface-raised));
-  }
-
-  &__ci-head {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 10px;
-  }
-
-  &__ci-main {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    strong,
-    span:not([data-overflow-content]) {
-      min-width: 0;
-      overflow: hidden;
-    }
-
-    strong {
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-      white-space: nowrap;
-    }
-
-    span {
-      color: var(--openbitfun-color-content-secondary);
-      font-size: var(--openbitfun-type-meta-font-size);
-      line-height: var(--openbitfun-type-flow-support-line-height);
-      white-space: normal;
-    }
-  }
-
-  &__ci-status {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    width: fit-content;
-    padding: 2px 6px;
-    border-radius: 5px;
-    font-size: var(--openbitfun-type-micro-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-    line-height: var(--openbitfun-type-label-md-line-height);
-  }
-
-  &__ci-actions {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  &__ci-action.icon-btn {
-    border-radius: 6px;
-  }
-
-  &__ci-status--passed {
-    color: var(--openbitfun-color-status-success-content);
-    background: var(--openbitfun-color-status-success-surface);
-  }
-
-  &__ci-status--failed {
-    color: var(--openbitfun-color-status-danger-content);
-    background: var(--openbitfun-color-status-danger-surface);
-  }
-
-  &__ci-status--pending {
-    color: var(--openbitfun-color-status-warning-content);
-    background: var(--openbitfun-color-status-warning-surface);
-  }
-
-  &__ci-log-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding-top: 8px;
-    border-top: 1px solid color-mix(in srgb, var(--openbitfun-color-border-default) 72%, transparent);
-  }
-
-  &__ci-detail-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    gap: 8px;
-
-    div {
-      min-width: 0;
-      padding: 8px 10px;
-      border: 1px solid var(--openbitfun-color-border-default);
-      border-radius: 6px;
-      background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 48%, transparent);
-    }
-
-    span {
-      display: block;
-      margin-bottom: 3px;
-      color: var(--openbitfun-color-content-muted);
-      font-size: var(--openbitfun-type-micro-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-      text-transform: uppercase;
-      letter-spacing: var(--openbitfun-type-modifier-tracking-wider-letter-spacing);
-    }
-
-    strong {
-      display: block;
-      overflow-wrap: anywhere;
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-meta-font-size);
-      font-weight: var(--openbitfun-type-label-sm-font-weight);
-      line-height: var(--openbitfun-type-flow-support-line-height);
-    }
-  }
-
-  &__ci-log-block {
-    max-height: 320px;
-    min-height: 90px;
-    overflow: auto;
-    margin: 0;
-    padding: 10px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 6px;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-canvas) 86%, transparent);
-    color: var(--openbitfun-color-content-primary);
-    font-family:var(--openbitfun-type-code-md-font-family);
-    font-size: var(--openbitfun-type-meta-font-size);
-    line-height: var(--openbitfun-type-flow-support-line-height);
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
-
-  &__ci-log-empty {
-    padding: 8px 10px;
-    border: 1px dashed var(--openbitfun-color-border-default);
-    border-radius: 6px;
-    color: var(--openbitfun-color-content-secondary);
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 48%, transparent);
-    font-size: var(--openbitfun-type-meta-font-size);
-    line-height: var(--openbitfun-type-flow-support-line-height);
-  }
-
-  &__thread {
-    padding: 10px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 7px;
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 76%, transparent);
-
-    &.is-resolved {
-      opacity: 0.72;
-    }
-
-    p {
-      margin: 8px 0;
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      line-height: var(--openbitfun-type-body-sm-line-height);
-    }
-  }
-
-  &__thread-loading {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 12px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 7px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 66%, transparent);
-
-    svg {
-      animation: review-platform-spin 0.9s linear infinite;
-    }
-  }
-
-  &__thread-loading--refreshing {
-    margin-bottom: 2px;
-  }
-
-  &__thread--reply {
-    margin-left: 18px;
-    border-left-width: 3px;
-    border-left-color: color-mix(in srgb, var(--openbitfun-color-accent-default) 42%, var(--openbitfun-color-border-default));
-  }
-
-  &__thread--review {
-    background: color-mix(in srgb, var(--openbitfun-color-accent-default) 7%, var(--openbitfun-color-surface-raised));
-  }
-
-  &__thread--comment {
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 78%, transparent);
-  }
-
-  &__thread-head {
-    justify-content: space-between;
-    gap: 12px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-  }
-
-  &__thread-tags {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-    flex-wrap: wrap;
-  }
-
-  &__thread-tag {
-    display: inline-flex;
-    align-items: center;
-    min-height: 18px;
-    padding: 0 7px;
-    border-radius: 999px;
-    border: 1px solid transparent;
-    font-size: var(--openbitfun-type-micro-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-    letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
-    text-transform: uppercase;
-  }
-
-  &__thread-tag--review {
-    color: color-mix(in srgb, var(--openbitfun-color-accent-default) 92%, var(--openbitfun-color-content-primary));
-    border-color: color-mix(in srgb, var(--openbitfun-color-accent-default) 20%, var(--openbitfun-color-border-default));
-    background: color-mix(in srgb, var(--openbitfun-color-accent-default) 10%, transparent);
-  }
-
-  &__thread-tag--comment {
-    color: var(--openbitfun-color-content-secondary);
-    border-color: var(--openbitfun-color-border-default);
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 62%, transparent);
-  }
-
-  &__thread-tag--resolved {
-    color: color-mix(in srgb, var(--openbitfun-color-status-success-content) 90%, var(--openbitfun-color-content-secondary));
-    border-color: color-mix(in srgb, var(--openbitfun-color-status-success-content) 24%, var(--openbitfun-color-border-default));
-    background: color-mix(in srgb, var(--openbitfun-color-status-success-content) 10%, transparent);
-  }
-
-  &__thread-tag--open {
-    color: color-mix(in srgb, var(--openbitfun-color-status-warning-content) 82%, var(--openbitfun-color-content-secondary));
-    border-color: color-mix(in srgb, var(--openbitfun-color-status-warning-content) 24%, var(--openbitfun-color-border-default));
-    background: color-mix(in srgb, var(--openbitfun-color-status-warning-content) 10%, transparent);
-  }
-
-  &__thread-meta {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    margin-top: 8px;
-
-    strong {
-      min-width: 0;
-      color: var(--openbitfun-color-content-primary);
-      font-size: var(--openbitfun-type-label-sm-font-size);
-      font-weight: var(--openbitfun-type-label-selected-font-weight);
-    }
-  }
-
-  &__thread-reply-block {
-    margin-top: 10px;
-    border: 1px solid var(--openbitfun-color-border-default);
-    border-radius: 6px;
-    overflow: hidden;
-    background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 64%, transparent);
-  }
-
-  &__thread-reply-header {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 2px;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--openbitfun-color-border-default);
-    background: color-mix(in srgb, var(--openbitfun-color-surface-raised) 76%, transparent);
-  }
-
-  &__thread-reply-label {
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-micro-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-    letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
-    text-transform: uppercase;
-  }
-
-  &__thread-reply-author {
-    color: var(--openbitfun-color-content-primary);
-    font-size: var(--openbitfun-type-meta-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-  }
-
-  &__thread-reply-body {
-    min-width: 0;
-    padding: 10px 12px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-meta-font-size);
-    line-height: var(--openbitfun-type-flow-support-line-height);
-  }
-
-  &__thread-body {
-    min-width: 0;
-    margin-top: 8px;
-    color: var(--openbitfun-color-content-primary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-    line-height: var(--openbitfun-type-body-sm-line-height);
-  }
-
-  &__thread-reply-body,
-  &__thread-body {
-    :where(p, ul, ol, pre, blockquote) {
-      margin-top: 0;
-    }
-
-    :where(p, ul, ol, pre, blockquote):last-child {
-      margin-bottom: 0;
-    }
-
-    :where(pre) {
-      max-width: 100%;
-      overflow: auto;
-      border-radius: 6px;
-    }
-  }
-
-  &__thread-anchor {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  &__loading {
-    padding: 18px;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-  }
-
-  @keyframes review-platform-spin {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @media (max-width: 980px) {
-    &__body {
-      grid-template-columns: 1fr;
-    }
-
-    &__list {
-      max-height: 260px;
-      border-right: 0;
-      border-bottom: 1px solid var(--openbitfun-color-border-default);
-    }
-
-  }
-
-  @container review-platform (max-width: 980px) {
-    &__body {
-      grid-template-columns: 1fr;
-    }
-
-    &__list {
-      max-height: 260px;
-      border-right: 0;
-      border-bottom: 1px solid var(--openbitfun-color-border-default);
-    }
-
-    &__detail-header {
-      align-items: flex-start;
-      flex-direction: column;
-    }
-
-    &__detail-actions {
-      width: 100%;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-    }
-  }
-
-  @container review-platform (max-width: 560px) {
-    &__topbar-actions,
-    &__remote-select {
-      width: 100%;
-    }
-
-    &__auth-gate {
-      flex-direction: column;
-    }
-
-    &__auth-gate-actions {
-      width: 100%;
-      justify-content: flex-start;
     }
 
     &__fact-row {
-      grid-template-columns: 1fr;
-      gap: 4px;
-      padding-block: 6px;
-    }
-
-    &__fact-value--review,
-    &__detail-section-heading {
-      align-items: flex-start;
-      flex-direction: column;
-    }
-
-    &__fact-value--review > span:not([data-overflow-content]) {
-      white-space: normal;
-    }
-
-    &__detail-section-actions {
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    &__file-row {
-      align-items: stretch;
-      grid-template-columns: 1fr;
-      gap: 0;
-      padding-block: 4px;
-    }
-
-    &__file-main {
-      grid-template-columns: 18px 68px minmax(0, 1fr);
-      min-height: 30px;
+      grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
     }
-
-    &__file-delta {
-      grid-column: 3;
-      justify-self: start;
-    }
-
-    &__file-add-button {
-      justify-self: flex-start;
-      margin-left: 98px;
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .review-platform__loading-inline--icon,
-  .review-platform__thread-loading svg {
-    animation: none;
-    transform: none;
   }
 }
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.test.tsx b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.test.tsx
index 3692da5b15..f22c9690ab 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.test.tsx
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.test.tsx
@@ -5,8 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { ReviewPlatformPullRequest, ReviewPlatformPullRequestDetailPage, ReviewPlatformWorkspaceSnapshot } from '@/infrastructure/api/service-api/ReviewPlatformAPI';
 import { ReviewPlatformPanel } from './ReviewPlatformPanel';
 
-const mocks = vi.hoisted(() => ({ snapshot: vi.fn(), detail: vi.fn(), t: (key: string) => key }));
-vi.mock('@/infrastructure/api', () => ({ reviewPlatformAPI: { getWorkspaceSnapshot: mocks.snapshot, getPullRequestDetailPage: mocks.detail }, systemAPI: {} }));
+const mocks = vi.hoisted(() => ({ snapshot: vi.fn(), detail: vi.fn(), openExternal: vi.fn(), t: (key: string) => key }));
+vi.mock('@/infrastructure/api', () => ({ reviewPlatformAPI: { getWorkspaceSnapshot: mocks.snapshot, getPullRequestDetailPage: mocks.detail }, systemAPI: { openExternal: mocks.openExternal } }));
 vi.mock('@/infrastructure/markdown', () => ({ MarkdownRenderer: () => null }));
 vi.mock('@/shared/notification-system', () => ({ notificationService: {} }));
 vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: mocks.t }), i18nService: { t: mocks.t, formatDate: () => '' } }));
@@ -17,19 +17,6 @@ vi.mock('@/flow_chat/components/DeepReviewConsentDialog', () => ({ useDeepReview
 vi.mock('@/flow_chat/store/FlowChatStore', () => ({ flowChatStore: { getState: () => ({ sessions: new Map(), activeSessionId: null }), subscribe: () => () => {} } }));
 vi.mock('@/shared/stores/contextStore', () => ({ useContextStore: {} }));
 vi.mock('@/shared/services/ide-control', () => ({ quickActions: {} }));
-vi.mock('@openbitfun/ui', async () => {
-  const { createElement } = await import('react');
-  const control = (tag: string) => ({ children, onClick, disabled, ...props }: Record<string, any>) => createElement(tag, {
-    onClick, disabled, ...Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith('data-') || key.startsWith('aria-') || key === 'className')),
-  }, children);
-  const box = control('div');
-  return {
-    Button: control('button'), IconButton: control('button'), Input: control('input'),
-    Combobox: () => null, Icon: () => null, Field: box, ScrollArea: box, TabGroup: () => null,
-    Tooltip: box, OverflowText: box, Dialog: () => null, DialogBody: box, DialogClose: box, DialogHeader: box,
-    DialogHeading: box, DialogTitle: box,
-  };
-});
 
 function pull(number: number, state: 'open' | 'merged'): ReviewPlatformPullRequest {
   return { id: String(number), number, state, title: `PR ${number}`, author: 'author', sourceBranch: 'feature', targetBranch: 'main',
@@ -65,7 +52,10 @@ let root: Root;
 let host: HTMLDivElement;
 let testNumber = 0;
 async function click(id: string) {
-  await act(async () => { host.querySelector<HTMLButtonElement>(`[data-testid="${id}"]`)!.click(); });
+  const selector = id.startsWith('review-platform-filter-')
+    ? `[data-openbitfun-product-part="filters"] [data-openbitfun-value="${id.slice('review-platform-filter-'.length)}"]`
+    : `[data-testid="${id}"]`;
+  await act(async () => { host.querySelector<HTMLButtonElement>(selector)!.click(); });
 }
 async function mount() {
   const path = `/gitee-panel-test-${++testNumber}`;
@@ -73,6 +63,15 @@ async function mount() {
   return path;
 }
 
+function statisticText(owner: Element, id: string): string | null | undefined {
+  const lineStat = /^(pr|detail)-(additions|deletions)$/.exec(id);
+  if (lineStat) {
+    const lineStats = owner.querySelector(`[data-testid="review-platform-${lineStat[1]}-line-stats"]`);
+    return lineStats?.querySelector(`[data-openbitfun-part="${lineStat[2]}"]`)?.textContent ?? lineStats?.textContent;
+  }
+  return owner.querySelector(`[data-testid="review-platform-${id}"]`)?.textContent;
+}
+
 describe('Gitee panel state and asynchronous request ordering', () => {
   beforeEach(() => {
     Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
@@ -81,10 +80,11 @@ describe('Gitee panel state and asynchronous request ordering', () => {
     root = createRoot(host);
     mocks.snapshot.mockReset().mockImplementation((path, _remote, page, _size, state) => Promise.resolve(snapshot(path, page, state)));
     mocks.detail.mockReset().mockImplementation(() => new Promise(() => {}));
+    mocks.openExternal.mockReset().mockResolvedValue(undefined);
   });
   afterEach(async () => { await act(async () => root.unmount()); host.remove(); });
 
-  it('renders statistics for every initial row while selected detail is still pending', async () => {
+  it('uses list statistics in the selected detail while its overview is still pending', async () => {
     mocks.snapshot.mockImplementation((path, _remote, page, _size, state) => {
       const result = snapshot(path, page, state);
       result.pullRequests = result.pullRequests.map((pr, index) => ({ ...pr,
@@ -97,11 +97,12 @@ describe('Gitee panel state and asynchronous request ordering', () => {
     const rows = [...host.querySelectorAll('[data-testid="review-platform-pr-row"]')];
     expect(rows).toHaveLength(10);
     for (const [index, row] of rows.entries()) {
-      expect(row.querySelector('[data-testid="review-platform-pr-files"]')?.textContent).toBe(`${index} files`);
-      expect(row.querySelector('[data-testid="review-platform-pr-additions"]')?.textContent).toBe(`+${index * 4}`);
-      expect(row.querySelector('[data-testid="review-platform-pr-deletions"]')?.textContent).toBe(`-${index * 2}`);
+      await act(async () => { (row as HTMLButtonElement).click(); });
+      expect(statisticText(host, 'detail-files')).toBe(`${index} files`);
+      expect(statisticText(host, 'detail-additions')).toBe(`+${index * 4}`);
+      expect(statisticText(host, 'detail-deletions')).toBe(`-${index * 2}`);
     }
-    expect(mocks.detail.mock.calls.map(([request]) => request.pullRequestId)).toEqual(['10']);
+    expect(mocks.detail.mock.calls.map(([request]) => request.pullRequestId)).toEqual(Array.from({ length: 10 }, (_, index) => String(10 + index)));
   });
 
   it.each([true, false])('uses complete list statistics for unknown detail counts only at the same revisions (%s)', async sameRevisions => {
@@ -119,11 +120,11 @@ describe('Gitee panel state and asynchronous request ordering', () => {
     }));
     await mount();
     expect(host.querySelector('[data-testid="review-platform-detail-files"]')?.textContent).toBe(sameRevisions ? '2 files' : '— files');
-    expect(host.querySelector('[data-testid="review-platform-detail-additions"]')?.textContent).toBe(sameRevisions ? '+4' : '—');
-    expect(host.querySelector('[data-testid="review-platform-detail-deletions"]')?.textContent).toBe(sameRevisions ? '-3' : '—');
+    expect(statisticText(host, 'detail-additions')).toBe(sameRevisions ? '+4' : '—');
+    expect(statisticText(host, 'detail-deletions')).toBe(sameRevisions ? '-3' : '—');
   });
 
-  it('updates both row and detail statistics to zero for a legacy overview', async () => {
+  it('replaces list statistics with authoritative zero counts from a legacy overview', async () => {
     mocks.snapshot.mockImplementation((path, _remote, page, _size, state) => {
       const result = snapshot(path, page, state);
       result.pullRequests = result.pullRequests.map(pr => ({ ...pr,
@@ -137,12 +138,9 @@ describe('Gitee panel state and asynchronous request ordering', () => {
       additions: 0, deletions: 0, lineStatsKnown: undefined,
     }));
     await mount();
-    const row = host.querySelector('[data-testid="review-platform-pr-row"][data-pr-number="10"]')!;
-    for (const [owner, prefix] of [[row, 'pr'], [host, 'detail']] as const) {
-      expect(owner.querySelector(`[data-testid="review-platform-${prefix}-files"]`)?.textContent).toBe('0 files');
-      expect(owner.querySelector(`[data-testid="review-platform-${prefix}-additions"]`)?.textContent).toBe('+0');
-      expect(owner.querySelector(`[data-testid="review-platform-${prefix}-deletions"]`)?.textContent).toBe('-0');
-    }
+    expect(statisticText(host, 'detail-files')).toBe('0 files');
+    expect(statisticText(host, 'detail-additions')).toBe('+0');
+    expect(statisticText(host, 'detail-deletions')).toBe('-0');
   });
 
   it('requests Merged from page one after All page two and ignores a late All refresh', async () => {
@@ -169,25 +167,22 @@ describe('Gitee panel state and asynchronous request ordering', () => {
     await act(async () => pendingCi.resolve(detail(10, 'ci')));
     expect(mocks.detail).not.toHaveBeenCalledWith(expect.objectContaining({ pullRequestId: '10', section: 'reviews' }));
     expect(host.querySelector('[data-testid="review-platform-detail-state"]')?.textContent).toBe('Merged');
-    expect(host.querySelector('[data-openbitfun-part="detailMeta"]')?.textContent).toContain('#100');
+    expect(host.querySelector('[data-openbitfun-product-part="detailMeta"]')?.textContent).toContain('#100');
   });
 
-  it.each([4, 0])('shares verified statistics (%i lines) with the list and discards them for a new revision', async lines => {
+  it.each([4, 0])('revalidates cached statistics (%i lines) and discards them for a new revision', async lines => {
     const pendingOverview = deferred<ReviewPlatformPullRequestDetailPage>();
     mocks.detail.mockImplementation(({ pullRequestId, section }) => section === 'overview'
       ? pendingOverview.promise : Promise.resolve(detail(Number(pullRequestId), section)));
     const path = await mount();
-    const row = () => host.querySelector('[data-testid="review-platform-pr-row"][data-pr-number="10"]')!;
-    const text = (owner: Element, id: string) => owner.querySelector(`[data-testid="review-platform-${id}"]`)?.textContent;
-    expect(text(row(), 'pr-files')).toBe('— files');
-    expect(text(row(), 'pr-additions')).toBe('—');
-    expect(text(row(), 'pr-deletions')).toBe('—');
+    const text = statisticText;
+    expect(text(host, 'detail-files')).toBe('— files');
+    expect(text(host, 'detail-additions')).toBe('—');
+    expect(text(host, 'detail-deletions')).toBe('—');
     await act(async () => pendingOverview.resolve({ ...detail(10, 'overview'), additions: lines, deletions: lines }));
-    for (const [owner, prefix] of [[row(), 'pr'], [host, 'detail']] as const) {
-      expect(text(owner, `${prefix}-files`)).toBe('2 files');
-      expect(text(owner, `${prefix}-additions`)).toBe(`+${lines}`);
-      expect(text(owner, `${prefix}-deletions`)).toBe(`-${lines}`);
-    }
+    expect(text(host, 'detail-files')).toBe('2 files');
+    expect(text(host, 'detail-additions')).toBe(`+${lines}`);
+    expect(text(host, 'detail-deletions')).toBe(`-${lines}`);
     expect(mocks.detail.mock.calls.map(([request]) => request.section)).toEqual(['overview', 'ci', 'reviews']);
 
     // Revalidating the same revision must accept an authoritative zero.
@@ -196,7 +191,6 @@ describe('Gitee panel state and asynchronous request ordering', () => {
       ...(section === 'overview' ? { additions: 0, deletions: 0 } : {}),
     }));
     await click('review-platform-refresh');
-    expect(text(row(), 'pr-additions')).toBe('+0');
     expect(text(host, 'detail-additions')).toBe('+0');
 
     const next = snapshot(path);
@@ -204,8 +198,78 @@ describe('Gitee panel state and asynchronous request ordering', () => {
     mocks.snapshot.mockResolvedValueOnce(next);
     mocks.detail.mockImplementation(() => new Promise(() => {}));
     await click('review-platform-refresh');
-    expect(text(row(), 'pr-files')).toBe('— files');
-    expect(text(row(), 'pr-additions')).toBe('—');
-    expect(text(row(), 'pr-deletions')).toBe('—');
+    expect(text(host, 'detail-files')).toBe('— files');
+    expect(text(host, 'detail-additions')).toBe('—');
+    expect(text(host, 'detail-deletions')).toBe('—');
+  });
+
+  it('returns from detail to the same list selection, search and page without refetching', async () => {
+    mocks.detail.mockImplementation(({ pullRequestId, section }) => Promise.resolve(detail(Number(pullRequestId), section)));
+    await mount();
+    await click('review-platform-next-page');
+    const search = host.querySelector<HTMLInputElement>('input[aria-label="Search pull requests"]')!;
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(search, 'PR 2');
+      search.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    const selectedRow = host.querySelector<HTMLButtonElement>('[data-testid="review-platform-pr-row"][data-pr-number="21"]')!;
+    const panel = host.querySelector('[data-openbitfun-product-part="root"]')!;
+    expect(panel.getAttribute('data-openbitfun-view')).toBe('list');
+    await act(async () => { selectedRow.click(); });
+    expect(panel.getAttribute('data-openbitfun-view')).toBe('detail');
+    expect(document.activeElement).toBe(host.querySelector('[data-testid="review-platform-back"]'));
+    const detailRequests = mocks.detail.mock.calls.length;
+    const listRequests = mocks.snapshot.mock.calls.length;
+    await click('review-platform-back');
+    expect(panel.getAttribute('data-openbitfun-view')).toBe('list');
+    expect(document.activeElement).toBe(selectedRow);
+    expect(selectedRow.getAttribute('aria-current')).toBe('page');
+    expect(search.value).toBe('PR 2');
+    expect(host.querySelector('[data-testid="review-platform-pagination"]')?.textContent).toContain('11-20 of 376');
+    expect(mocks.detail).toHaveBeenCalledTimes(detailRequests);
+    expect(mocks.snapshot).toHaveBeenCalledTimes(listRequests);
+  });
+
+  it('shows an empty PR list instead of successful authentication copy or a second empty detail', async () => {
+    mocks.snapshot.mockImplementation(path => {
+      const result = snapshot(path);
+      const remote = result.remotes[0];
+      remote.platform = 'github';
+      remote.authState = 'connected';
+      remote.authSource = 'gh_cli';
+      remote.message = 'Authenticated via GitHub CLI as author.';
+      result.accounts = [{ id: remote.id, platform: 'github', label: 'author', host: remote.host,
+        authState: 'connected', authSource: 'gh_cli', scopes: [], message: remote.message }];
+      result.pullRequests = [];
+      result.pagination = { page: 1, perPage: 10, total: 0, hasNext: false };
+      return Promise.resolve(result);
+    });
+    await mount();
+    expect(host.textContent).toContain('No open pull requests authored by the current GitHub CLI account.');
+    expect(host.textContent).not.toContain('Authenticated via GitHub CLI');
+    expect(host.querySelector('[data-openbitfun-product-part="detailPane"]')).toBeNull();
+    expect(mocks.detail).not.toHaveBeenCalled();
+  });
+
+  it('opens the selected PR and refreshes it from the detail actions menu', async () => {
+    const webUrl = 'https://gitee.com/example/repo/pulls/10';
+    mocks.detail.mockImplementation(({ pullRequestId, section }) => Promise.resolve({ ...detail(Number(pullRequestId), section), webUrl }));
+    await mount();
+    await click('review-platform-pr-row');
+    const trigger = host.querySelector<HTMLButtonElement>('[aria-label="Pull request actions"]')!;
+    await act(async () => { trigger.click(); });
+    await act(async () => { document.querySelector<HTMLButtonElement>('[data-menu-id="open-external"]')!.click(); });
+    expect(mocks.openExternal).toHaveBeenCalledWith(webUrl);
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(document.activeElement).toBe(trigger);
+    const detailRequests = mocks.detail.mock.calls.length;
+    await act(async () => { trigger.click(); });
+    await act(async () => { document.querySelector<HTMLButtonElement>('[data-menu-id="refresh"]')!.click(); });
+    expect(mocks.detail.mock.calls.slice(detailRequests)).toEqual(expect.arrayContaining([
+      [expect.objectContaining({ pullRequestId: '10', section: 'overview' })],
+      [expect.objectContaining({ pullRequestId: '10', section: 'ci' })],
+      [expect.objectContaining({ pullRequestId: '10', section: 'reviews' })],
+    ]));
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
   });
 });
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.trust.test.tsx b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.trust.test.tsx
index 32ff739e33..483c88f35d 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.trust.test.tsx
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.trust.test.tsx
@@ -39,18 +39,6 @@ vi.mock('@/flow_chat/services/btwSessionPane', () => ({ openBtwSessionInAuxPane:
 vi.mock('@/shared/services/ide-control', () => ({ quickActions: {} }));
 vi.mock('@/shared/stores/contextStore', () => ({ useContextStore: {} }));
 vi.mock('@/infrastructure/markdown', () => ({ MarkdownRenderer: () => null }));
-vi.mock('@openbitfun/ui', () => {
-  const Box = ({ children }: { children?: React.ReactNode }) => <div>{children}</div>;
-  const Button = ({ children, onClick, disabled, 'aria-label': label }: {
-    children?: React.ReactNode; onClick?: () => void; disabled?: boolean; 'aria-label'?: string;
-  }) => <button onClick={onClick} disabled={disabled} aria-label={label}>{children}</button>;
-  return {
-    Button, IconButton: Button, Icon: () => null, Input: () => null, Combobox: () => null,
-    Field: Box, ScrollArea: Box, TabGroup: () => null, Tooltip: Box, OverflowText: Box,
-    Dialog: () => null, DialogBody: Box, DialogClose: Box, DialogHeader: Box,
-    DialogHeading: Box, DialogTitle: Box,
-  };
-});
 
 let dom: { window: Window & typeof globalThis };
 let root: Root;
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
index 90ac4a61f4..fb524ac085 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.tsx
@@ -1,23 +1,48 @@
-import { OverflowText,
+import {
+  Alert,
   Button,
+  CardHeader,
+  ChangeCount,
   Combobox,
+  Disclosure,
+  Empty,
   Field,
+  FieldGroup,
+  FieldRow,
+  FormSection,
   Icon,
   IconButton,
   Input as DesignInput,
+  LoadingState,
+  MenuPopover,
+  NavigationPanel,
+  NavigationPanelBody,
+  NavigationPanelContent,
+  NavigationPanelFooter,
+  NavigationPanelHeader,
+  NavigationPanelItem,
+  OverflowText,
   ScrollArea,
+  SearchField,
+  SegmentedControl,
+  Stack,
+  StatusPill,
   TabGroup,
+  Toolbar,
+  ToolbarGroup,
   Tooltip,
   type ComboboxOption,
+  type StatusPillTone,
   Dialog,
   DialogBody,
   DialogClose,
+  DialogFooter,
   DialogHeader,
   DialogHeading,
   DialogTitle,
 } from '@openbitfun/ui';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CircleDot, Code2, GitPullRequest, GitPullRequestClosed, KeyRound, Loader2, MessageSquareText, ShieldCheck } from 'lucide-react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { GitPullRequest, GitPullRequestClosed, KeyRound, MessageSquareText, MoreHorizontal } from 'lucide-react';
 import { MarkdownRenderer } from '@/infrastructure/markdown';
 import { reviewPlatformAPI, systemAPI, type ReviewPlatformAccount, type ReviewPlatformAuthChallenge, type ReviewPlatformCiItem, type ReviewPlatformCiLog, type ReviewPlatformCommit, type ReviewPlatformDetailSection, type ReviewPlatformFile, type ReviewPlatformPagination, type ReviewPlatformPullRequest, type ReviewPlatformPullRequestDetail, type ReviewPlatformPullRequestDetailPage, type ReviewPlatformRemote, type ReviewPlatformRepositoryRef, type ReviewPlatformThread, type ReviewPlatformWorkspaceSnapshot } from '@/infrastructure/api';
 import { createLogger } from '@/shared/utils/logger';
@@ -72,7 +97,6 @@ interface ReviewPlatformPanelProps {
 
 type DetailTab = 'overview' | 'changes' | 'commits';
 type ListStateFilter = 'all' | 'open' | 'draft' | 'merged' | 'closed';
-type SnapshotCacheState = 'none' | 'cached' | 'refreshing';
 
 const PR_PAGE_SIZE = 10;
 const CI_PAGE_SIZE = 20;
@@ -266,9 +290,7 @@ function formatAbsoluteTime(value: string): string {
 }
 
 function getPrIcon(pr: ReviewPlatformPullRequest) {
-  if (pr.state === 'merged') return <GitPullRequest size={15} className="review-platform__state-icon review-platform__state-icon--merged" />;
-  if (pr.state === 'closed') return <GitPullRequestClosed size={15} className="review-platform__state-icon review-platform__state-icon--closed" />;
-  return <GitPullRequest size={15} className="review-platform__state-icon review-platform__state-icon--open" />;
+  return <Icon glyph={pr.state === 'closed' ? GitPullRequestClosed : GitPullRequest} size="sm" tone={pr.state === 'closed' ? 'danger' : pr.state === 'merged' ? 'info' : pr.state === 'draft' ? 'muted' : 'success'} />;
 }
 
 function decisionLabel(decision: ReviewPlatformPullRequest['reviewDecision']): string {
@@ -299,6 +321,13 @@ function stateLabel(state: ReviewPlatformPullRequest['state']): string {
   }
 }
 
+const pullRequestStateTones: Record<ReviewPlatformPullRequest['state'], StatusPillTone> = {
+  open: 'success',
+  draft: 'neutral',
+  merged: 'accent',
+  closed: 'danger',
+};
+
 function providerLabel(remote: ReviewPlatformRemote | ReviewPlatformAccount | null): string {
   if (!remote) return 'No provider';
   switch (remote.platform) {
@@ -665,6 +694,13 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
   detailOnly = false,
 }) => {
   const { t } = useI18n('panels/git');
+  const authFormId = useId();
+  const backButtonRef = useRef<HTMLButtonElement>(null);
+  const selectedRowRef = useRef<HTMLButtonElement>(null);
+  const detailMenuRef = useRef<HTMLButtonElement>(null);
+  const panelFocusRequested = useRef(false);
+  const [panelView, setPanelView] = useState<'list' | 'detail'>('list');
+  const [detailMenuOpen, setDetailMenuOpen] = useState(false);
   const snapshotRequestSeq = useRef(0);
   const detailRequestSeq = useRef(0);
   const detailSectionRequestSeq = useRef(0);
@@ -698,7 +734,6 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
   const [ciLogById, setCiLogById] = useState<Record<string, ReviewPlatformCiLog>>({});
   const [ciLogErrorById, setCiLogErrorById] = useState<Record<string, string>>({});
   const [ciLogLoadingIds, setCiLogLoadingIds] = useState<Set<string>>(() => new Set());
-  const [snapshotCacheState, setSnapshotCacheState] = useState<SnapshotCacheState>('none');
   const [authModalOpen, setAuthModalOpen] = useState(false);
   const [authToken, setAuthToken] = useState('');
   const [authSaving, setAuthSaving] = useState(false);
@@ -816,7 +851,6 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
       setVerifiedDetailKey(null);
       setDetailError(null);
       setError(null);
-      setSnapshotCacheState('cached');
       setLoading(false);
       return;
     } else {
@@ -825,7 +859,6 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
       setDetail(null);
       setVerifiedDetailKey(null);
       setDetailError(null);
-      setSnapshotCacheState('none');
     }
 
     setLoading(true);
@@ -858,7 +891,6 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
       if (remoteId) {
         snapshotCache.set(snapshotCacheKey(workspacePath, remoteId, requestedPage, PR_PAGE_SIZE, snapshotMode, requestedState), entry);
       }
-      setSnapshotCacheState('cached');
     } catch (err) {
       if (snapshotRequestSeq.current !== requestSeq) return;
       const message = reviewPlatformErrorMessage(err, 'Failed to load pull requests');
@@ -1000,6 +1032,7 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
 
   useEffect(() => {
     serverStateFilter.current = 'all';
+    setPanelView('list');
     setStateFilter('all');
     setSnapshot(emptySnapshot());
     void loadSnapshot(detailOnly && initialRemoteId ? initialRemoteId : undefined, { state: 'all' });
@@ -1007,6 +1040,14 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
 
   useEffect(() => flowChatStore.subscribe(setFlowState), []);
 
+  useEffect(() => {
+    if (!panelFocusRequested.current) return;
+    panelFocusRequested.current = false;
+    // The back button is hidden in split view, where focus stays on the list.
+    const target = panelView === 'detail' ? backButtonRef.current : selectedRowRef.current;
+    target?.focus({ preventScroll: true });
+  }, [panelView, selectedPrId]);
+
   useEffect(() => {
     if (!selectedRemoteId) {
       setDetail(null);
@@ -1074,6 +1115,7 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
 
   useEffect(() => {
     setActiveTab('overview');
+    setDetailMenuOpen(false);
     setExpandedFileKeys(new Set());
     setExpandedCiItemIds(new Set());
     setCiLogById({});
@@ -1268,22 +1310,11 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
     ? Math.min(totalCount, currentPageIndex * pagination.perPage + snapshot.pullRequests.length)
     : currentPageIndex * pagination.perPage + snapshot.pullRequests.length;
 
-  const summary = useMemo(() => {
-    const prs = snapshot.pullRequests;
-    return {
-      open: prs.filter(pr => pr.state === 'open').length,
-      draft: prs.filter(pr => pr.state === 'draft').length,
-      merged: prs.filter(pr => pr.state === 'merged').length,
-      reviewRequired: prs.filter(pr => pr.reviewDecision === 'changes_requested' || pr.reviewDecision === 'pending').length,
-    };
-  }, [snapshot.pullRequests]);
-
-  const headerLabel = selectedRemote ? remoteLabel(selectedRemote) : repository ? repository.projectPath : 'No repository';
   const isGithubUserList = !detailOnly && selectedRemote?.platform === 'github';
-  const panelTitle = detailOnly ? 'Pull Request' : isGithubUserList ? 'My Open Pull Requests' : 'Pull Requests';
 
   const handleRemoteChange = useCallback((value: string | number | (string | number)[]) => {
     const remoteId = Array.isArray(value) ? String(value[0] ?? '') : String(value);
+    setPanelView('list');
     setSelectedRemoteId(remoteId || null);
     setSelectedPrId(null);
     setDetail(null);
@@ -1297,6 +1328,7 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
   }, [loadSnapshot, workspacePath]);
 
   const handleStateChange = useCallback((state: ListStateFilter) => {
+    setPanelView('list');
     setStateFilter(state);
     if (snapshot.capabilities.supportedPullRequestStates?.includes(state)) {
       serverStateFilter.current = state;
@@ -1306,6 +1338,7 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
   }, [listRemoteId, loadSnapshot, snapshot.capabilities.supportedPullRequestStates]);
 
   const handlePageChange = useCallback((nextPageIndex: number) => {
+    setPanelView('list');
     const nextPage = Math.max(1, nextPageIndex + 1);
     setSelectedPrId(null);
     setDetail(null);
@@ -1334,39 +1367,35 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
   ) => {
     if (itemCount <= 0 || (page.totalPages <= 1 && !page.hasNext && page.pageIndex === 0)) return null;
     return (
-      <div data-openbitfun-component="review-platform" data-openbitfun-part="pagination" className="review-platform__pagination review-platform__detail-pagination">
-        <Tooltip content={`Previous ${label} page`}>
+      <Toolbar
+        data-openbitfun-product-component="review-platform"
+        data-openbitfun-product-part="pagination"
+        bordered={false}
+        leading={<OverflowText>{label}: {page.start}-{page.end} of {page.totalLabel}</OverflowText>}
+        trailing={<ToolbarGroup>
           <IconButton
             aria-label={`Previous ${label} page`}
-            className="review-platform__icon-button"
             size="sm"
             disabled={page.pageIndex === 0}
             onClick={() => onPageChange(page.pageIndex - 1)}
             icon={<Icon name="chevron-left" size="sm" />}
           />
-        </Tooltip>
-        <span>
-          {label}: {page.start}-{page.end} of {page.totalLabel}
-        </span>
-        <Tooltip content={`Next ${label} page`}>
           <IconButton
             aria-label={`Next ${label} page`}
-            className="review-platform__icon-button"
             size="sm"
             disabled={!page.hasNext && page.pageIndex >= page.totalPages - 1}
             onClick={() => onPageChange(page.pageIndex + 1)}
             icon={<Icon name="chevron-right" size="sm" />}
           />
-        </Tooltip>
-      </div>
+        </ToolbarGroup>}
+      />
     );
   }, []);
 
-  const renderDetailLoading = useCallback((message: string, refreshing = false) => (
-    <div data-openbitfun-component="review-platform" data-openbitfun-part="loadingState" className={`review-platform__thread-loading${refreshing ? ' review-platform__thread-loading--refreshing' : ''}`} aria-live="polite">
-      <Loader2 size={14} />
-      <span>{message}</span>
-    </div>
+  const renderDetailLoading = useCallback((message: string) => (
+    <LoadingState size="sm" role="status" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="loadingState">
+      {message}
+    </LoadingState>
   ), []);
 
   const handleOpenExternal = useCallback(async () => {
@@ -1780,27 +1809,31 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
   const renderAuthGate = useCallback((mode: 'inline' | 'detail' = 'inline') => {
     if (!authChallenge || !selectedRemote || selectedRemote.platform === 'unknown') return null;
     return (
-      <div data-openbitfun-component="review-platform" data-openbitfun-part="authGate" className={`review-platform__auth-gate review-platform__auth-gate--${mode}`}>
-        <div className="review-platform__auth-gate-icon">
-          <KeyRound size={18} />
-        </div>
-        <div className="review-platform__auth-gate-copy" data-openbitfun-component="review-platform" data-openbitfun-part="authCopy">
-          <strong>{authChallengeTitle(authChallenge)}</strong>
-          <span>{authChallenge.message}</span>
-          <span>{authChallenge.host} · {authChallenge.projectPath}</span>
-          <span>{selectedRemote.platform === 'github' ? 'CLI authorization' : 'Required scopes'}: {authChallengeScopes(authChallenge)}</span>
-        </div>
-        <div className="review-platform__auth-gate-actions" data-openbitfun-component="review-platform" data-openbitfun-part="authActions">
-          <Button size="sm" variant="primary" onClick={handleOpenAuthModal} disabled={authSaving} leadingIcon={<KeyRound size={13} />}>
-
-            {selectedRemote.platform === 'github' ? 'Authenticate' : authChallenge.state === 'missing' ? 'Add token' : 'Update token'}
-          </Button>
-          <Button size="sm" variant="outline" onClick={() => refreshAuthSnapshot(selectedRemote.id)} disabled={authSaving || loading} leadingIcon={<Icon name="refresh" size="lg" style={{ width: 13, height: 13 }} />}>
+      <Alert
+        data-openbitfun-product-component="review-platform"
+        data-openbitfun-product-part="authGate"
+        className={`review-platform__auth-gate review-platform__auth-gate--${mode}`}
+        tone="warning"
+        role="status"
+        title={authChallengeTitle(authChallenge)}
+        message={authChallenge.message}
+        description={<Stack gap="3">
+          <span data-openbitfun-product-component="review-platform" data-openbitfun-product-part="authCopy">
+            {authChallenge.host} · {authChallenge.projectPath}<br />
+            {selectedRemote.platform === 'github' ? 'CLI authorization' : 'Required scopes'}: {authChallengeScopes(authChallenge)}
+          </span>
+          <ToolbarGroup className="review-platform__wrap" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="authActions">
+            <Button size="sm" variant="primary" onClick={handleOpenAuthModal} disabled={authSaving} leadingIcon={<KeyRound size={13} />}>
+
+              {selectedRemote.platform === 'github' ? 'Authenticate' : authChallenge.state === 'missing' ? 'Add token' : 'Update token'}
+            </Button>
+            <Button size="sm" variant="outline" onClick={() => refreshAuthSnapshot(selectedRemote.id)} disabled={authSaving || loading} leadingIcon={<Icon name="refresh" size="sm" />}>
 
-            Retry
-          </Button>
-        </div>
-      </div>
+              Retry
+            </Button>
+          </ToolbarGroup>
+        </Stack>}
+      />
     );
   }, [authChallenge, authSaving, handleOpenAuthModal, loading, refreshAuthSnapshot, selectedRemote]);
 
@@ -1850,32 +1883,19 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
     }
   }, [activeTab, changePageIndex, ciPageIndex, commitPageIndex, loadDetail, loadDetailSection, repository, reviewPageIndex, selectedPrId, selectedRemoteId, workspacePath]);
 
-  const remoteStatus = selectedRemote
-    ? `${providerLabel(selectedRemote)} · ${authLabel(account)}`
-    : 'No remote detected';
-  const displayPr = currentPullRequest;
+  const displayPr = currentRevisionsVerified ? currentPullRequest : selectedPrFromList ?? currentPullRequest;
   const displayStatistics = selectedPrFromList && (!detail || samePullRequestRevisions(selectedPrFromList, detail))
     ? resolvedPullRequestStatistics(selectedPrFromList, detail)
     : displayPr;
   const displayLineStats = resolvedLineStats(displayStatistics);
-  const checksText = displayPr && displayPr.checks.total > 0
-    ? `${displayPr.checks.passed}/${displayPr.checks.total}`
-    : 'N/A';
   const emptyStateMessage = snapshot.message
-    || account?.message
-    || selectedRemote?.message
+    || (account && account.authState !== 'connected' && account.authState !== 'not_required' ? account.message : null)
+    || (selectedRemote && selectedRemote.authState !== 'connected' && selectedRemote.authState !== 'not_required' ? selectedRemote.message : null)
     || (snapshot.remotes.length
       ? isGithubUserList && !query.trim()
         ? 'No open pull requests authored by the current GitHub CLI account.'
         : 'No pull requests match the current filter.'
       : 'No supported remotes were detected.');
-  const loadingLabel = loading
-    ? snapshotCacheState === 'refreshing'
-      ? 'Refreshing cached pull requests...'
-      : 'Loading pull requests...'
-    : snapshotCacheState === 'cached'
-      ? 'Cached pull requests'
-      : null;
   const checksStatusText = !displayPr || displayPr.checks.total === 0
     ? 'No checks'
     : displayPr.checks.failed > 0
@@ -1883,9 +1903,6 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
       : displayPr.checks.pending > 0
         ? `${displayPr.checks.pending} pending`
         : 'All checks passed';
-  const commentsText = reviewItemCount > 0
-    ? `${reviewItemCount} comment${reviewItemCount === 1 ? '' : 's'}`
-    : 'No comments';
   const reviewStatusText = latestCurrentReview
     ? currentPullRequestReviewStatusText(latestCurrentReview)
     : latestStaleReview
@@ -1909,241 +1926,215 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
   };
 
   return (
-    <div data-openbitfun-component="review-platform" data-openbitfun-part="root" data-openbitfun-layout={detailOnly ? 'detail' : 'full'} className={`review-platform${detailOnly ? ' review-platform--detail-only' : ''}`}>
+    <div data-openbitfun-product-component="review-platform" data-openbitfun-product-part="root" data-openbitfun-layout={detailOnly ? 'detail' : 'full'} data-openbitfun-view={detailOnly ? 'detail' : selectedPr ? panelView : 'list'} className={`review-platform${detailOnly ? ' review-platform--detail-only' : ''}`}>
       {!detailOnly && (
-        <div className="review-platform__topbar" data-openbitfun-component="review-platform" data-openbitfun-part="chrome">
-          <div className="review-platform__brand" data-openbitfun-component="review-platform" data-openbitfun-part="brand">
-            <span className="review-platform__brand-icon"><GitPullRequest size={17} /></span>
-            <div className="review-platform__brand-copy">
-              <span className="review-platform__title" data-openbitfun-component="review-platform" data-openbitfun-part="title">{panelTitle}</span>
-              <span className="review-platform__subtitle" data-openbitfun-component="review-platform" data-openbitfun-part="subtitle">{headerLabel}</span>
-            </div>
-          </div>
-
-          <div className="review-platform__topbar-actions" data-openbitfun-component="review-platform" data-openbitfun-part="actions">
-            <div className="review-platform__remote-select">
-              <Combobox
-                size="sm"
-                value={selectedRemoteId ?? ''}
-                options={remoteOptions}
-                placeholder="Select remote"
-                disabled={!remoteOptions.length || loading}
-                onValueChange={handleRemoteChange}
-              />
-            </div>
-            {account && (
-              <Tooltip content={`${account.label} · ${authSourceLabel(account.authSource)}`}>
-                <span className={`review-platform__account review-platform__account--${account.authState}`}>
-                  <ShieldCheck size={13} />
-                  <OverflowText>{authLabel(account)}</OverflowText>
-                </span>
-              </Tooltip>
-            )}
+        <Toolbar className="review-platform__toolbar" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="chrome"
+          leading={<Combobox
+            className="review-platform__remote-select"
+            aria-label="Repository"
+            size="sm"
+            value={selectedRemoteId ?? ''}
+            options={remoteOptions}
+            placeholder="Select repository"
+            disabled={!remoteOptions.length || loading}
+            onValueChange={handleRemoteChange}
+          />}
+          trailing={<ToolbarGroup data-openbitfun-product-component="review-platform" data-openbitfun-product-part="actions">
             <Tooltip content={selectedRemote?.platform === 'github' ? 'GitHub CLI authentication' : account?.authSource === 'stored' ? 'Update token' : 'Add token'}>
               <IconButton
                 aria-label={selectedRemote?.platform === 'github' ? 'GitHub CLI authentication' : account?.authSource === 'stored' ? 'Update token' : 'Add token'}
-                className="review-platform__icon-button"
                 size="sm"
                 disabled={!selectedRemote || selectedRemote.platform === 'unknown' || loading || authSaving}
                 onClick={handleOpenAuthModal}
                 icon={<KeyRound size={14} />}
               />
             </Tooltip>
-            {account?.authSource === 'stored' && (
-              <Tooltip content="Clear token">
-                <IconButton
-                  aria-label="Clear token"
-                  className="review-platform__icon-button"
-                  size="sm"
-                  disabled={!selectedRemote || loading || authSaving}
-                  onClick={handleClearAuthToken}
-                  icon={<Icon name="delete" size="sm" />}
-                />
-              </Tooltip>
-            )}
             <Tooltip content="Refresh">
               <IconButton
                 aria-label="Refresh"
                 data-testid="review-platform-refresh"
-                className="review-platform__icon-button"
                 size="sm"
                 onClick={() => void loadSnapshot(listRemoteId, { force: true, page: currentPageIndex + 1, userInitiated: true })}
                 loading={loading}
                 icon={<Icon name="refresh" size="sm" />}
               />
             </Tooltip>
-          </div>
-        </div>
+          </ToolbarGroup>}
+        />
       )}
 
-      {!detailOnly && (
-      <div className="review-platform__subbar" data-openbitfun-component="review-platform" data-openbitfun-part="statusBar">
-        <div className="review-platform__status-line" data-openbitfun-component="review-platform" data-openbitfun-part="statusLine">
-          <span><CircleDot size={12} /> {summary.open} open on page</span>
-          {!isGithubUserList && <span><GitPullRequestClosed size={12} /> {summary.merged} merged on page</span>}
-          <span><Icon name="spark" size="xs" /> {summary.reviewRequired} review on page</span>
-          <span><Icon name="link" size="xs" /> {remoteStatus}</span>
-          {loadingLabel && (
-            <span className={loading ? 'review-platform__loading-status' : 'review-platform__cache-label'}>
-              {loading && <Loader2 size={12} className="review-platform__loading-inline review-platform__loading-inline--icon" />}
-              {loadingLabel}
-            </span>
-          )}
-        </div>
-      </div>
-      )}
-
-      {authChallenge && !detailOnly && renderAuthGate('inline')}
-
-      <div className="review-platform__body" data-openbitfun-component="review-platform" data-openbitfun-part="body">
+      <div className={`review-platform__body${!detailOnly && !selectedPr ? ' review-platform__body--list-only' : ''}`} data-openbitfun-product-component="review-platform" data-openbitfun-product-part="body">
         {!detailOnly && (
-        <aside className="review-platform__list" data-openbitfun-component="review-platform" data-openbitfun-part="listPane" aria-label="Pull request list">
-          <div className="review-platform__list-toolbar" data-openbitfun-component="review-platform" data-openbitfun-part="listToolbar">
-            <DesignInput
-              value={query}
-              onChange={event => setQuery(event.target.value)}
-              placeholder="Search pull requests"
-              leading={<Icon name="search" size="sm" />}
-              trailing={query ? <IconButton
-                aria-label="Clear search"
-                className="review-platform__icon-button"
-                size="sm"
-                onClick={() => setQuery('')}
-                icon={<Icon name="xmark" size="sm" />}
-              /> : undefined}
-              size="sm"
-            />
-            {!isGithubUserList && (
-              <div className="review-platform__state-filters" data-openbitfun-component="review-platform" data-openbitfun-part="filters">
-                {(['all', 'open', 'draft', 'merged', 'closed'] as ListStateFilter[]).map(state => (
-                  <button
-                    key={state}
-                    type="button"
-                    className={`review-platform__state-chip${stateFilter === state ? ' is-active' : ''}`}
-                    data-testid={`review-platform-filter-${state}`}
-                    aria-pressed={stateFilter === state}
-                    disabled={selectedRemote?.platform === 'gitee' && state !== 'all' && !snapshot.capabilities.supportedPullRequestStates?.includes(state)}
-                    onClick={() => handleStateChange(state)}
-                  >
-                    {state === 'all' ? 'All' : stateLabel(state)}
-                  </button>
-                ))}
-              </div>
-            )}
-            {selectedRemote?.platform === 'gitee' && !snapshot.capabilities.supportedPullRequestStates?.length && (
-              <div role="status">{t('reviewPlatform.stateFilterUnsupported')}</div>
-            )}
-          </div>
-
-          <ScrollArea className="review-platform__list-scroll" data-openbitfun-component="review-platform" data-openbitfun-part="listScroll">
-            {loading && (
-              <div data-testid="review-platform-list-loading" className="review-platform__empty-state" data-openbitfun-component="review-platform" data-openbitfun-part="emptyState">Loading pull requests...</div>
-            )}
-            {error && (
-              <div className="review-platform__error-state" data-openbitfun-component="review-platform" data-openbitfun-part="errorState">
-                <Icon name="xmark" size="md" />
-                <span>{error.includes('review_platform_state_filter_unsupported') ? t('reviewPlatform.stateFilterUnsupported') : error}</span>
-                <Button size="sm" variant="outline" onClick={() => void loadSnapshot(listRemoteId, { force: true, page: currentPageIndex + 1, userInitiated: true })}>
-                  Retry
-                </Button>
-              </div>
-            )}
-            {!loading && !error && !authChallenge && !visiblePullRequests.length && (
-              <div className="review-platform__empty-state" data-openbitfun-component="review-platform" data-openbitfun-part="emptyState">
-                <GitPullRequest size={18} />
-                <span>{emptyStateMessage}</span>
-              </div>
-            )}
-            {!loading && !error && visiblePullRequests.map(pr => (
-              (() => {
-                const pullRequestRemote = pr.providerId
-                  ? snapshot.remotes.find(remote => remote.id === pr.providerId)
-                  : selectedRemote;
-                const cachedDetail = pullRequestRemote
-                  ? detailCache.get(detailCacheKey(workspacePath || repository?.workspacePath || '', pullRequestRemote.id, pr.id))
-                  : undefined;
-                const statistics = resolvedPullRequestStatistics(pr, cachedDetail?.detail);
-                const lineStats = resolvedLineStats(statistics);
-                return (
-                  <button data-overflow-trigger data-openbitfun-component="review-platform" data-openbitfun-part="listItem"
-                    data-testid="review-platform-pr-row"
-                    data-pr-number={pr.number}
-                    data-pr-state={pr.state}
-                    data-openbitfun-state={selectedPrId === pr.id && (!pr.providerId || pr.providerId === selectedRemoteId) ? 'selected' : ''}
-                    key={`${pr.providerId ?? selectedRemoteId ?? 'remote'}:${pr.id}`}
-                    type="button"
-                    className={`review-platform__pr-row${selectedPrId === pr.id && (!pr.providerId || pr.providerId === selectedRemoteId) ? ' is-selected' : ''}`}
-                    onClick={() => {
-                      if (pr.providerId && pr.providerId !== selectedRemoteId) {
-                        setSelectedRemoteId(pr.providerId);
-                        rememberRemote(workspacePath, pr.providerId);
-                      }
-                      setSelectedPrId(pr.id);
-                    }}
-                  >
-                    <span className="review-platform__pr-icon">{getPrIcon(pr)}</span>
-                    <span className="review-platform__pr-main" data-openbitfun-component="review-platform" data-openbitfun-part="listItemMain">
-                      <OverflowText className="review-platform__pr-title" data-openbitfun-component="review-platform" data-openbitfun-part="listItemTitle">{pr.title}</OverflowText>
-                      <span className="review-platform__pr-meta" data-openbitfun-component="review-platform" data-openbitfun-part="listItemMeta">
-                        {pullRequestRemote?.projectPath ? `${pullRequestRemote.projectPath} · ` : ''}#{pr.number} · {pr.sourceBranch} → {pr.targetBranch}
-                      </span>
-                      <span className="review-platform__pr-meta review-platform__pr-meta--secondary">
-                        {pr.author} · {formatRelativeTime(pr.updatedAt)}
-                      </span>
-                    </span>
-                    <span className="review-platform__pr-stats" data-openbitfun-component="review-platform" data-openbitfun-part="listItemStats">
-                      <span className={`review-platform__decision review-platform__decision--${pr.reviewDecision}`}>
-                        {decisionLabel(pr.reviewDecision)}
-                      </span>
-                      <span className="review-platform__counts">
-                        <span data-testid="review-platform-pr-files">{resolvedChangedFileCount(statistics) ?? '—'} files</span>
-                        <span data-testid="review-platform-pr-additions" className="review-platform__additions">{lineStats ? `+${lineStats.additions}` : '—'}</span>
-                        <span data-testid="review-platform-pr-deletions" className="review-platform__deletions">{lineStats ? `-${lineStats.deletions}` : '—'}</span>
-                      </span>
-                    </span>
-                  </button>
-                );
-              })()
-            ))}
-          </ScrollArea>
-          {!loading && !error && (totalPages > 1 || pagination.hasNext) && (
-            <div data-testid="review-platform-pagination" className="review-platform__pagination" data-openbitfun-component="review-platform" data-openbitfun-part="pagination">
-              <Tooltip content="Previous page">
-                <IconButton
-                  aria-label="Previous page"
-                  data-testid="review-platform-previous-page"
-                  className="review-platform__icon-button"
-                  size="sm"
-                  disabled={currentPageIndex === 0}
-                  onClick={() => handlePageChange(currentPageIndex - 1)}
-                  icon={<Icon name="chevron-left" size="sm" />}
-                />
-              </Tooltip>
-              <span>
-                {pageStart}-{pageEnd} of {totalCount ?? `${pageEnd}+`}
-              </span>
-              <Tooltip content="Next page">
-                <IconButton
-                  aria-label="Next page"
-                  data-testid="review-platform-next-page"
-                  className="review-platform__icon-button"
+          <NavigationPanel className="review-platform__list" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="listPane" aria-label="Pull request list">
+            <NavigationPanelHeader data-openbitfun-product-component="review-platform" data-openbitfun-product-part="listToolbar">
+              <Stack gap="2">
+                {authChallenge && renderAuthGate('inline')}
+                <SearchField
+                  value={query}
+                  onChange={event => setQuery(event.target.value)}
+                  placeholder={isGithubUserList ? 'Search my open pull requests' : 'Search pull requests'}
+                  aria-label="Search pull requests"
+                  leadingIcon={<Icon name="search" size="sm" />}
+                  clearLabel={query ? 'Clear search' : undefined}
+                  onClear={() => setQuery('')}
                   size="sm"
-                  disabled={!pagination.hasNext && currentPageIndex >= totalPages - 1}
-                  onClick={() => handlePageChange(currentPageIndex + 1)}
-                  icon={<Icon name="chevron-right" size="sm" />}
                 />
-              </Tooltip>
-            </div>
-          )}
-        </aside>
+                {!isGithubUserList && (
+                  <SegmentedControl
+                    aria-label="Pull request state"
+                    data-openbitfun-product-component="review-platform"
+                    data-openbitfun-product-part="filters"
+                    value={stateFilter}
+                    variant="pills"
+                    tone="neutral"
+                    onValueChange={value => handleStateChange(value as ListStateFilter)}
+                    options={(['all', 'open', 'draft', 'merged', 'closed'] as ListStateFilter[]).map(state => ({
+                      value: state,
+                      label: state === 'all' ? 'All' : stateLabel(state),
+                      disabled: selectedRemote?.platform === 'gitee' && state !== 'all' && !snapshot.capabilities.supportedPullRequestStates?.includes(state),
+                    }))}
+                  />
+                )}
+                {selectedRemote?.platform === 'gitee' && !snapshot.capabilities.supportedPullRequestStates?.length && (
+                  <Alert tone="warning" role="status" message={t('reviewPlatform.stateFilterUnsupported')} />
+                )}
+              </Stack>
+            </NavigationPanelHeader>
+
+            <NavigationPanelBody data-openbitfun-product-component="review-platform" data-openbitfun-product-part="listScroll">
+              <NavigationPanelContent>
+                {loading && (
+                  <LoadingState size="sm" role="status" data-testid="review-platform-list-loading" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="loadingState">Loading pull requests...</LoadingState>
+                )}
+                {error && (
+                  <Alert tone="error" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="errorState"
+                    message={error.includes('review_platform_state_filter_unsupported') ? t('reviewPlatform.stateFilterUnsupported') : error}
+                    description={
+                      <Button size="sm" variant="outline" onClick={() => void loadSnapshot(listRemoteId, { force: true, page: currentPageIndex + 1, userInitiated: true })}>
+                        Retry
+                      </Button>
+                    }
+                  />
+                )}
+                {!loading && !error && !authChallenge && !visiblePullRequests.length && (
+                  <Empty icon={<GitPullRequest />} description={emptyStateMessage} data-openbitfun-product-component="review-platform" data-openbitfun-product-part="emptyState" />
+                )}
+                {!loading && !error && visiblePullRequests.map(pr => {
+                  const pullRequestRemote = pr.providerId
+                    ? snapshot.remotes.find(remote => remote.id === pr.providerId)
+                    : selectedRemote;
+                  const selected = selectedPrId === pr.id && (!pr.providerId || pr.providerId === selectedRemoteId);
+                  return (
+                    <NavigationPanelItem data-openbitfun-product-component="review-platform" data-openbitfun-product-part="listItem"
+                      data-testid="review-platform-pr-row"
+                      data-pr-number={pr.number}
+                      data-pr-state={pr.state}
+                      data-openbitfun-state={selected ? 'selected' : ''}
+                      key={`${pr.providerId ?? selectedRemoteId ?? 'remote'}:${pr.id}`}
+                      selected={selected}
+                      ref={selected ? selectedRowRef : undefined}
+                      labelBehavior="static"
+                      leading={getPrIcon(pr)}
+                      onClick={() => {
+                        if (pr.providerId && pr.providerId !== selectedRemoteId) {
+                          setSelectedRemoteId(pr.providerId);
+                          rememberRemote(workspacePath, pr.providerId);
+                        }
+                        panelFocusRequested.current = true;
+                        setPanelView('detail');
+                        setSelectedPrId(pr.id);
+                      }}
+                    >
+                      <span className="review-platform__list-copy" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="listItemMain">
+                        <OverflowText data-openbitfun-product-component="review-platform" data-openbitfun-product-part="listItemTitle">{pr.title}</OverflowText>
+                        <OverflowText className="review-platform__meta" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="listItemMeta">
+                          {[isGithubUserList && pullRequestRemote?.projectPath, `#${pr.number}`, pr.author, formatRelativeTime(pr.updatedAt)].filter(Boolean).join(' · ')}
+                        </OverflowText>
+                      </span>
+                    </NavigationPanelItem>
+                  );
+                })}
+              </NavigationPanelContent>
+            </NavigationPanelBody>
+            {!loading && !error && (totalPages > 1 || pagination.hasNext) && (
+              <NavigationPanelFooter data-testid="review-platform-pagination" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="pagination">
+                <Tooltip content="Previous page">
+                  <IconButton
+                    aria-label="Previous page"
+                    data-testid="review-platform-previous-page"
+                    size="sm"
+                    disabled={currentPageIndex === 0}
+                    onClick={() => handlePageChange(currentPageIndex - 1)}
+                    icon={<Icon name="chevron-left" size="sm" />}
+                  />
+                </Tooltip>
+                <span>
+                  {pageStart}-{pageEnd} of {totalCount ?? `${pageEnd}+`}
+                </span>
+                <Tooltip content="Next page">
+                  <IconButton
+                    aria-label="Next page"
+                    data-testid="review-platform-next-page"
+                    size="sm"
+                    disabled={!pagination.hasNext && currentPageIndex >= totalPages - 1}
+                    onClick={() => handlePageChange(currentPageIndex + 1)}
+                    icon={<Icon name="chevron-right" size="sm" />}
+                  />
+                </Tooltip>
+              </NavigationPanelFooter>
+            )}
+          </NavigationPanel>
         )}
 
-        <main className="review-platform__detail" data-openbitfun-component="review-platform" data-openbitfun-part="detailPane">
+        {(detailOnly || selectedPr) && <main className="review-platform__detail" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="detailPane">
+          {(!detailOnly || selectedPr) && (
+            <Toolbar
+              className="review-platform__detail-toolbar"
+              data-openbitfun-product-component="review-platform"
+              data-openbitfun-product-part="detailActions"
+              leading={!detailOnly ? (
+                <Button
+                  className="review-platform__back"
+                  ref={backButtonRef}
+                  data-testid="review-platform-back"
+                  size="sm"
+                  variant="text"
+                  leadingIcon={<Icon name="chevron-left" size="sm" />}
+                  onClick={() => {
+                    panelFocusRequested.current = true;
+                    setPanelView('list');
+                  }}
+                >Pull requests</Button>
+              ) : <OverflowText className="review-platform__meta">{selectedRemote?.projectPath}</OverflowText>}
+              trailing={selectedPr && <ToolbarGroup>
+                <Tooltip content={!parentSession ? 'Open or create a chat first' : 'Start Review'}>
+                  <span>
+                    <Button
+                      size="sm"
+                      variant="primary"
+                      onClick={handleStartReview}
+                      disabled={!parentSession || !repository || !selectedRemote || reviewLaunching || detailLoading || latestCurrentReview?.lifecycle === 'running'}
+                      loading={reviewLaunching}
+                      leadingIcon={<Icon name="spark" size="xs" />}
+                    >{latestCurrentReview?.lifecycle === 'running' ? 'Review running' : 'Review'}</Button>
+                  </span>
+                </Tooltip>
+                <Tooltip content="Pull request actions">
+                  <IconButton
+                    ref={detailMenuRef}
+                    aria-label="Pull request actions"
+                    aria-haspopup="menu"
+                    aria-expanded={detailMenuOpen}
+                    size="sm"
+                    icon={<MoreHorizontal size={16} />}
+                    onClick={() => setDetailMenuOpen(open => !open)}
+                  />
+                </Tooltip>
+              </ToolbarGroup>}
+            />
+          )}
           {!selectedPr && detailOnly && (loading || detailLoading) && (
-            <div className="review-platform__detail-empty">
-              <Loader2 size={20} className="review-platform__loading-inline review-platform__loading-inline--icon" />
-              <span>Loading pull request details...</span>
-            </div>
+            <LoadingState className="review-platform__detail-empty" role="status">Loading pull request details...</LoadingState>
           )}
 
           {!selectedPr && detailOnly && !loading && !detailLoading && authChallenge && (
@@ -2153,10 +2144,11 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
           )}
 
           {!selectedPr && detailOnly && !loading && !detailLoading && !authChallenge && (detailError || error) && (
-            <div className="review-platform__detail-empty">
-              <Icon name="xmark" size="lg" />
-              <span>{detailError || error}</span>
-              <div className="review-platform__detail-empty-actions">
+            <Empty
+              className="review-platform__detail-empty"
+              icon={<Icon name="info" tone="danger" />}
+              description={detailError || error}
+              actions={<>
                 <Button size="sm" variant="outline" onClick={handleRetryDetail}>
                   Retry
                 </Button>
@@ -2166,18 +2158,16 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
                     {selectedRemote.platform === 'github' ? 'Authenticate' : account?.authSource === 'stored' ? 'Update token' : 'Add token'}
                   </Button>
                 )}
-              </div>
-            </div>
+              </>}
+            />
           )}
 
           {!selectedPr && detailOnly && !loading && !detailLoading && !authChallenge && !detailError && !error && (
-            <div className="review-platform__detail-empty">
-              <GitPullRequest size={24} />
-              <span>
-                {snapshot.message
-                  || 'This pull request could not be resolved from the remotes of the current workspace.'}
-              </span>
-              <div className="review-platform__detail-empty-actions">
+            <Empty
+              className="review-platform__detail-empty"
+              icon={<GitPullRequest />}
+              description={snapshot.message || 'This pull request could not be resolved from the remotes of the current workspace.'}
+              actions={<>
                 <Button
                   size="sm"
                   variant="outline"
@@ -2196,145 +2186,57 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
                     Open in browser
                   </Button>
                 )}
-              </div>
-            </div>
-          )}
-
-          {!selectedPr && !detailOnly && !loading && (
-            <div className="review-platform__detail-empty">
-              <GitPullRequest size={24} />
-              <span>Select a pull request to inspect it.</span>
-            </div>
+              </>}
+            />
           )}
 
           {selectedPr && (
             <>
-              <div className="review-platform__detail-header" data-openbitfun-component="review-platform" data-openbitfun-part="detailHeader">
-                <div className="review-platform__detail-title-block" data-openbitfun-component="review-platform" data-openbitfun-part="detailTitle">
-                  <div className="review-platform__detail-title-row">
-                    {getPrIcon(selectedPr)}
-                    <h3><OverflowText>{selectedPr.title}</OverflowText></h3>
-                    <span data-testid="review-platform-detail-state" className={`review-platform__detail-state review-platform__detail-state--${displayPr?.state ?? selectedPr.state}`} data-openbitfun-component="review-platform" data-openbitfun-part="detailState">
+              <FormSection
+                className="review-platform__detail-header"
+                data-openbitfun-product-component="review-platform"
+                data-openbitfun-product-part="detailHeader"
+                headingAs="h3"
+                title={<span data-openbitfun-product-component="review-platform" data-openbitfun-product-part="detailTitle">{selectedPr.title}</span>}
+                description={
+                  <Stack direction="horizontal" gap="2" align="center" wrap className="review-platform__detail-meta" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="detailMeta">
+                    <StatusPill data-testid="review-platform-detail-state" tone={pullRequestStateTones[displayPr?.state ?? selectedPr.state]} data-openbitfun-product-component="review-platform" data-openbitfun-product-part="detailState">
                       {stateLabel(displayPr?.state ?? selectedPr.state)}
-                    </span>
-                  </div>
-                  <div className="review-platform__detail-meta" data-openbitfun-component="review-platform" data-openbitfun-part="detailMeta">
+                    </StatusPill>
                     <span>#{selectedPr.number}</span>
-                    <span><Icon name="clock" size="xs" /> {formatAbsoluteTime(selectedPr.updatedAt) || formatRelativeTime(selectedPr.updatedAt)}</span>
-                  </div>
-                </div>
-                <div className="review-platform__detail-actions" data-openbitfun-component="review-platform" data-openbitfun-part="detailActions">
-                  <Tooltip content={!parentSession ? 'Open or create a chat first' : 'Start Review'}>
-                    <span>
-                      <Button
-                        size="sm"
-                        variant="primary"
-                        onClick={handleStartReview}
-                        disabled={
-                          !parentSession ||
-                          !repository ||
-                          !selectedRemote ||
-                          reviewLaunching ||
-                          detailLoading ||
-                          latestCurrentReview?.lifecycle === 'running'
-                        }
-                        loading={reviewLaunching}
-                        leadingIcon={<Icon name="spark" size="xs" />}
-                      >
-
-                        {latestCurrentReview?.lifecycle === 'running' ? 'Review running' : 'Review'}
-                      </Button>
-                    </span>
-                  </Tooltip>
-                  <Button size="sm" variant="outline" onClick={handleOpenExternal} disabled={!selectedPr.webUrl && !initialPullRequestUrl} leadingIcon={<Icon name="link" size="xs" />}>
-
-                    Open
-                  </Button>
-                  {detailOnly && selectedRemote && selectedRemote.platform !== 'unknown' && (
-                    <Tooltip content={selectedRemote.platform === 'github' ? 'GitHub CLI authentication' : account?.authSource === 'stored' ? 'Update token' : 'Add token'}>
-                      <IconButton
-                        aria-label={selectedRemote.platform === 'github' ? 'GitHub CLI authentication' : account?.authSource === 'stored' ? 'Update token' : 'Add token'}
-                        className="review-platform__icon-button"
-                        size="sm"
-                        onClick={handleOpenAuthModal}
-                        disabled={authSaving}
-                        icon={<KeyRound size={14} />}
-                      />
-                    </Tooltip>
-                  )}
-                  <Tooltip content="Refresh pull request">
-                    <IconButton
-                      aria-label="Refresh pull request"
-                      className="review-platform__icon-button"
-                      size="sm"
-                      disabled={detailLoading}
-                      onClick={handleRefreshDetail}
-                      loading={detailLoading}
-                      icon={<Icon name="refresh" size="sm" />}
-                    />
-                  </Tooltip>
-                </div>
-              </div>
-
-              <div className="review-platform__fact-list" data-openbitfun-component="review-platform" data-openbitfun-part="facts">
-                <div className="review-platform__fact-row">
-                  <span className="review-platform__fact-label"><Code2 size={14} /> Branches</span>
-                  <div className="review-platform__fact-value review-platform__fact-value--branch">
-                    <strong><OverflowText>{displayPr?.sourceBranch ?? selectedPr.sourceBranch}</OverflowText></strong>
-                    <Icon name="chevron-right" size="xs" />
-                    <strong><OverflowText>{displayPr?.targetBranch ?? selectedPr.targetBranch}</OverflowText></strong>
-                    <span data-testid="review-platform-detail-files">{resolvedChangedFileCount(displayStatistics) ?? '—'} files</span>
-                    <span data-testid="review-platform-detail-additions" className="review-platform__additions">{displayLineStats ? `+${displayLineStats.additions}` : '—'}</span>
-                    <span data-testid="review-platform-detail-deletions" className="review-platform__deletions">{displayLineStats ? `-${displayLineStats.deletions}` : '—'}</span>
-                  </div>
-                </div>
-                <div className="review-platform__fact-row">
-                  <span className="review-platform__fact-label"><Icon name="user" size="sm" /> Author</span>
-                  <div className="review-platform__fact-value">
-                    <strong>{displayPr?.author ?? selectedPr.author}</strong>
-                  </div>
-                </div>
-                <div className="review-platform__fact-row">
-                  <span className="review-platform__fact-label"><MessageSquareText size={14} /> Comments</span>
-                  <div className="review-platform__fact-value">{commentsText}</div>
-                </div>
-                <div className="review-platform__fact-row">
-                  <span className="review-platform__fact-label"><Icon name="check-circle" size="sm" /> Checks</span>
-                  <div className="review-platform__fact-value">
-                    <strong>{checksStatusText}</strong>
-                    {displayPr && displayPr.checks.total > 0 && <span>{checksText}</span>}
-                  </div>
-                </div>
-                <div className="review-platform__fact-row">
-                  <span className="review-platform__fact-label"><Icon name="spark" size="sm" /> OpenBitFun Review</span>
-                  <div className="review-platform__fact-value review-platform__fact-value--review">
-                    <OverflowText>{reviewStatusText}</OverflowText>
-                    {(latestCurrentReview || latestStaleReview || latestUnknownReview) && (
-                      <Button size="sm" variant="outline" onClick={handleOpenLatestReview}>
-                        Open Review
-                      </Button>
+                    <span>{displayPr?.author ?? selectedPr.author}</span>
+                    <span>{formatAbsoluteTime(selectedPr.updatedAt) || formatRelativeTime(selectedPr.updatedAt)}</span>
+                    {(displayPr?.reviewDecision === 'approved' || displayPr?.reviewDecision === 'changes_requested') && (
+                      <StatusPill tone={displayPr.reviewDecision === 'approved' ? 'success' : 'danger'}>{decisionLabel(displayPr.reviewDecision)}</StatusPill>
                     )}
-                  </div>
-                </div>
-              </div>
+                  </Stack>
+                }
+              >
+                <Stack gap="2" className="review-platform__meta" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="facts">
+                  <OverflowText>{displayPr?.sourceBranch ?? selectedPr.sourceBranch} → {displayPr?.targetBranch ?? selectedPr.targetBranch}</OverflowText>
+                  <Stack direction="horizontal" gap="2" align="center" wrap>
+                    <span data-testid="review-platform-detail-files">{resolvedChangedFileCount(displayStatistics) ?? '—'} files</span>
+                    {displayLineStats ? <ChangeCount data-testid="review-platform-detail-line-stats" additions={displayLineStats.additions} deletions={displayLineStats.deletions} /> : <span data-testid="review-platform-detail-line-stats">—</span>}
+                  </Stack>
+                </Stack>
+              </FormSection>
 
-              <div className="review-platform__tabs" data-openbitfun-component="review-platform" data-openbitfun-part="tabs">
+              <div className="review-platform__tabs" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="tabs">
                 {(detail?.limitations?.length ?? 0) > 0 && (
-                  <div className="review-platform__detail-error" role="status">
-                    <span>{detail!.limitations!.map(limitation => {
-                      switch (limitation) {
-                        case 'gitee_file_list_limit': return t('reviewPlatform.fileLimit');
-                        case 'gitee_commit_list_limit': return t('reviewPlatform.commitLimit');
-                        case 'provider_comment_list_incomplete': return t('reviewPlatform.commentsLimited');
-                        case 'provider_ci_list_incomplete': return t('reviewPlatform.checksLimited');
-                        case 'provider_ci_head_unavailable': return t('reviewPlatform.ciHeadUnavailable');
-                        default: return t('reviewPlatform.limited');
-                      }
-                    }).join(' ')}</span>
-                  </div>
+                  <Alert tone="warning" role="status" message={detail!.limitations!.map(limitation => {
+                    switch (limitation) {
+                      case 'gitee_file_list_limit': return t('reviewPlatform.fileLimit');
+                      case 'gitee_commit_list_limit': return t('reviewPlatform.commitLimit');
+                      case 'provider_comment_list_incomplete': return t('reviewPlatform.commentsLimited');
+                      case 'provider_ci_list_incomplete': return t('reviewPlatform.checksLimited');
+                      case 'provider_ci_head_unavailable': return t('reviewPlatform.ciHeadUnavailable');
+                      default: return t('reviewPlatform.limited');
+                    }
+                  }).join(' ')} />
                 )}
-                <div className="review-platform__tab-bar" data-openbitfun-component="review-platform" data-openbitfun-part="tabBar">
+                <Toolbar className="review-platform__tab-bar" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="tabBar" leading={
                   <TabGroup
+                    aria-label="Pull request details"
                     items={[
                       { value: 'overview', label: 'Overview' },
                       { value: 'changes', label: 'Changes' },
@@ -2343,290 +2245,227 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
                     value={activeTab}
                     onValueChange={(value) => setActiveTab(value as DetailTab)}
                   />
-                </div>
+                } />
                 {activeTab === 'overview' && (
-                  <ScrollArea className="review-platform__tab-content review-platform__overview-scroll" data-openbitfun-component="review-platform" data-openbitfun-part="tabContent">
-                    <section className="review-platform__detail-section" data-openbitfun-component="review-platform" data-openbitfun-part="section">
-                      <div className="review-platform__detail-section-heading" data-openbitfun-component="review-platform" data-openbitfun-part="sectionHeading">
-                        <span>Description</span>
-                        <Button size="sm" variant="outline" onClick={handleFillPrContext} disabled={!selectedPr} leadingIcon={<MessageSquareText size={13} />}>
-
-                          Add to chat
-                        </Button>
+                  <ScrollArea className="review-platform__tab-content" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="tabContent">
+                    {detailLoading && renderDetailLoading(detail ? 'Refreshing pull request...' : 'Loading pull request...')}
+                    {detailError && <Alert tone="error" message={detailError} description={<Button size="sm" variant="outline" onClick={handleRetryDetail}>Retry</Button>} />}
+                    {detail && (
+                      <div className="review-platform__body-markdown" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="section">
+                        {detail.body ? <MarkdownRenderer content={detail.body} basePath={workspacePath} /> : <p className="review-platform__meta">No description provided.</p>}
                       </div>
-                      {detailError ? (
-                        <div className="review-platform__detail-error">
-                          <Icon name="xmark" size="sm" />
-                          <span>{detailError}</span>
-                          <Button size="sm" variant="outline" onClick={handleRetryDetail}>
-                            Retry
-                          </Button>
-                        </div>
-                      ) : detail ? (
-                        <div className="review-platform__body-markdown review-platform__body-markdown--plain">
-                          {detail.body
-                            ? <MarkdownRenderer content={detail.body} basePath={workspacePath} />
-                            : <span className="review-platform__section-empty">No description was provided.</span>}
-                        </div>
-                      ) : (
-                        renderDetailLoading('Loading pull request summary...')
-                      )}
-                    </section>
-
-                    <section className="review-platform__detail-section review-platform__ci-list" data-openbitfun-component="review-platform" data-openbitfun-part="section">
-                      <div className="review-platform__detail-section-heading" data-openbitfun-component="review-platform" data-openbitfun-part="sectionHeading">
-                        <span>Checks</span>
-                        <div className="review-platform__detail-section-actions" data-openbitfun-component="review-platform" data-openbitfun-part="sectionActions">
-                          <span className="review-platform__section-count">
-                            {ciTotal ? `${ciTotal} items · ${checksText}` : checksStatusText}
-                          </span>
-                          <Button size="sm" variant="outline" onClick={handleAddCiPageContext} disabled={!selectedPr || !detail || detailLoading} leadingIcon={<MessageSquareText size={13} />}>
-
-                            Add page
-                          </Button>
-                        </div>
-                      </div>
-                      {detailLoading && renderDetailLoading(pagedCiItems.length ? 'Refreshing checks...' : 'Loading checks...', pagedCiItems.length > 0)}
-                      {pagedCiItems.map(item => {
-                        const tone = ciItemTone(item);
-                        const isCiExpanded = expandedCiItemIds.has(item.id);
-                        const ciLog = ciLogById[item.id];
-                        const ciLogLoading = ciLogLoadingIds.has(item.id);
-                        const ciLogError = ciLogErrorById[item.id];
-                        const logAvailable = canLoadCiLog(selectedRemote, item);
-                        const expandable = canExpandCiItem(selectedRemote, item);
-                        return (
-                          <article data-openbitfun-component="review-platform" data-openbitfun-part="ciItem" key={item.id} className={`review-platform__ci-item review-platform__ci-item--${tone}`}>
-                            <div className="review-platform__ci-head" data-openbitfun-component="review-platform" data-openbitfun-part="ciHead">
-                              <div className="review-platform__ci-main">
-                                <strong><OverflowText>{item.name}</OverflowText></strong>
-                                <OverflowText>{[item.detail, item.stage].filter(Boolean).join(' · ')}</OverflowText>
-                              </div>
-                              <div className="review-platform__ci-actions">
-                                <span className={`review-platform__ci-status review-platform__ci-status--${tone}`} data-openbitfun-component="review-platform" data-openbitfun-part="ciStatus">
-                                  {ciItemStatusText(item)}
-                                </span>
-                                {expandable && (
-                                  <Tooltip content={isCiExpanded ? 'Collapse details' : 'Expand details'}>
-                                    <IconButton
-                                      aria-label={isCiExpanded ? 'Collapse details' : 'Expand details'}
-                                      className="review-platform__icon-button review-platform__ci-action"
-                                      size="sm"
-                                      onClick={() => toggleCiExpanded(item)}
-                                      disabled={ciLogLoading}
-                                      aria-busy={ciLogLoading}
-                                      icon={isCiExpanded ? <Icon name="chevron-down" size="xs" /> : <Icon name="chevron-right" size="xs" />}
-                                    />
-                                  </Tooltip>
-                                )}
-                                <Tooltip content="Add this result to chat">
-                                  <IconButton
-                                    aria-label="Add this result to chat"
-                                    className="review-platform__icon-button review-platform__ci-action"
-                                    size="sm"
-                                    onClick={() => void handleAddCiItemContext(item)}
-                                    disabled={!selectedPr}
-                                    icon={<MessageSquareText size={13} />}
-                                  />
-                                </Tooltip>
-                                {item.webUrl && (
-                                  <Tooltip content="Open result in provider">
-                                    <IconButton
-                                      aria-label="Open result in provider"
-                                      className="review-platform__icon-button review-platform__ci-action"
-                                      size="sm"
-                                      onClick={() => void handleOpenCiUrl(item.webUrl)}
-                                      icon={<Icon name="link" size="xs" />}
-                                    />
-                                  </Tooltip>
-                                )}
-                              </div>
-                            </div>
-                            {isCiExpanded && (
-                              <div className="review-platform__ci-log-panel" data-openbitfun-component="review-platform" data-openbitfun-part="ciLog">
-                                <div className="review-platform__ci-detail-grid">
-                                  {item.stage && <div><span>Stage</span><strong>{item.stage}</strong></div>}
-                                  {item.detail && <div><span>Detail</span><strong>{item.detail}</strong></div>}
-                                  {item.webUrl && <div><span>URL</span><strong>{item.webUrl}</strong></div>}
-                                </div>
-                                {ciLogLoading && renderDetailLoading('Loading check details...')}
-                                {!ciLogLoading && ciLogError && logAvailable && (
-                                  <div className="review-platform__detail-error">
-                                    <Icon name="xmark" size="sm" />
-                                    <span>{ciLogError}</span>
-                                    <Button size="sm" variant="outline" onClick={() => void loadCiLog(item)}>Retry</Button>
-                                  </div>
+                    )}
+                    {(latestCurrentReview || latestStaleReview || latestUnknownReview) && (
+                      <CardHeader title="OpenBitFun Review" description={reviewStatusText} actions={
+                        <Button size="sm" variant="text" onClick={handleOpenLatestReview}>Open Review</Button>
+                      } />
+                    )}
+                    <Disclosure
+                      key={'checks:' + selectedRemoteId + ':' + selectedPrId}
+                      summary="Checks"
+                      description={checksStatusText}
+                      disabled={!detailLoading && ciItems.length === 0}
+                      data-openbitfun-product-component="review-platform"
+                      data-openbitfun-product-part="section"
+                    >
+                      <FieldGroup appearance="plain">
+                        {pagedCiItems.map(item => {
+                          const tone = ciItemTone(item);
+                          const isCiExpanded = expandedCiItemIds.has(item.id);
+                          const ciLog = ciLogById[item.id];
+                          const ciLogLoading = ciLogLoadingIds.has(item.id);
+                          const ciLogError = ciLogErrorById[item.id];
+                          const logAvailable = canLoadCiLog(selectedRemote, item);
+                          const expandable = canExpandCiItem(selectedRemote, item);
+                          return (
+                            <FieldRow data-openbitfun-product-component="review-platform" data-openbitfun-product-part="ciItem" key={item.id}>
+                              <Stack gap="3">
+                                <CardHeader
+                                  data-openbitfun-product-component="review-platform"
+                                  data-openbitfun-product-part="ciHead"
+                                  title={<OverflowText>{item.name}</OverflowText>}
+                                  description={<StatusPill tone={tone === 'passed' ? 'success' : tone === 'failed' ? 'danger' : 'warning'} data-openbitfun-product-component="review-platform" data-openbitfun-product-part="ciStatus">
+                                    {ciItemStatusText(item)}
+                                  </StatusPill>}
+                                  actions={<ToolbarGroup>
+                                    {expandable && (
+                                      <Tooltip content={isCiExpanded ? 'Collapse details' : 'Expand details'}>
+                                        <IconButton
+                                          aria-label={isCiExpanded ? 'Collapse details' : 'Expand details'}
+                                          size="sm"
+                                          onClick={() => toggleCiExpanded(item)}
+                                          disabled={ciLogLoading}
+                                          aria-busy={ciLogLoading}
+                                          aria-expanded={isCiExpanded}
+                                          icon={isCiExpanded ? <Icon name="chevron-down" size="xs" /> : <Icon name="chevron-right" size="xs" />}
+                                        />
+                                      </Tooltip>
+                                    )}
+                                    <Tooltip content="Add this result to chat">
+                                      <IconButton
+                                        aria-label="Add this result to chat"
+                                        size="sm"
+                                        onClick={() => void handleAddCiItemContext(item)}
+                                        disabled={!selectedPr}
+                                        icon={<MessageSquareText size={13} />}
+                                      />
+                                    </Tooltip>
+                                    {item.webUrl && (
+                                      <Tooltip content="Open result in provider">
+                                        <IconButton
+                                          aria-label="Open result in provider"
+                                          size="sm"
+                                          onClick={() => void handleOpenCiUrl(item.webUrl)}
+                                          icon={<Icon name="link" size="xs" />}
+                                        />
+                                      </Tooltip>
+                                    )}
+                                  </ToolbarGroup>}
+                                />
+                                {isCiExpanded && (
+                                  <Stack gap="3" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="ciLog">
+                                    <dl className="review-platform__ci-details">
+                                      {item.stage && <div className="review-platform__fact-row"><dt>Stage</dt><dd>{item.stage}</dd></div>}
+                                      {item.detail && <div className="review-platform__fact-row"><dt>Detail</dt><dd>{item.detail}</dd></div>}
+                                      {item.webUrl && <div className="review-platform__fact-row"><dt>URL</dt><dd>{item.webUrl}</dd></div>}
+                                    </dl>
+                                    {ciLogLoading && renderDetailLoading('Loading check details...')}
+                                    {!ciLogLoading && ciLogError && logAvailable && (
+                                      <Alert tone="error" message={ciLogError} description={<Button size="sm" variant="outline" onClick={() => void loadCiLog(item)}>Retry</Button>} />
+                                    )}
+                                    {!ciLogLoading && !ciLogError && (ciLog?.log || item.log) && <pre tabIndex={0} aria-label={item.name} className="review-platform__ci-log-block">{ciLog?.log || item.log}</pre>}
+                                    {!ciLogLoading && !ciLogError && ciLog && !ciLog.log && !item.log && ciLog.message && <Alert role="status" message={ciLog.message} />}
+                                  </Stack>
                                 )}
-                                {!ciLogLoading && !ciLogError && (ciLog?.log || item.log) && <pre className="review-platform__ci-log-block">{ciLog?.log || item.log}</pre>}
-                                {!ciLogLoading && !ciLogError && ciLog && !ciLog.log && !item.log && ciLog.message && <div className="review-platform__ci-log-empty">{ciLog.message}</div>}
-                              </div>
-                            )}
-                          </article>
-                        );
-                      })}
-                      {!detailLoading && detail && ciItems.length === 0 && <div className="review-platform__empty-state">No checks were reported.</div>}
+                              </Stack>
+                            </FieldRow>
+                          );
+                        })}
+                      </FieldGroup>
                       {renderDetailPagination('Checks', ciPage, ciTotal, setCiPageIndex)}
-                    </section>
-
-                    <section className="review-platform__detail-section review-platform__threads" data-openbitfun-component="review-platform" data-openbitfun-part="section">
-                      <div className="review-platform__detail-section-heading" data-openbitfun-component="review-platform" data-openbitfun-part="sectionHeading">
-                        <span>Comments</span>
-                        <div className="review-platform__detail-section-actions" data-openbitfun-component="review-platform" data-openbitfun-part="sectionActions">
-                          <span className="review-platform__section-count">{reviewItemCount}</span>
-                          <Button size="sm" variant="outline" onClick={handleAddReviewsContext} disabled={!selectedPr || !detail} leadingIcon={<MessageSquareText size={13} />}>
-
-                            Add to chat
-                          </Button>
-                        </div>
-                      </div>
-                      {detailLoading && renderDetailLoading(reviewThreads.length ? 'Refreshing comments...' : 'Loading comments...', reviewThreads.length > 0)}
-                      {pagedReviewThreads.map(thread => {
-                        const parent = thread.replyToProviderCommentId
-                          ? reviewThreadByCommentId.get(thread.replyToProviderCommentId)
-                          : null;
-                        return (
-                          <article data-openbitfun-component="review-platform" data-openbitfun-part="thread"
-                            key={thread.id}
-                            className={[
-                              'review-platform__thread',
-                              thread.resolved ? 'is-resolved' : '',
-                              `review-platform__thread--${thread.kind}`,
-                              parent ? 'review-platform__thread--reply' : '',
-                            ].filter(Boolean).join(' ')}
-                          >
-                            <div className="review-platform__thread-head" data-openbitfun-component="review-platform" data-openbitfun-part="threadHead">
-                              <div className="review-platform__thread-tags">
-                                <span className={`review-platform__thread-tag review-platform__thread-tag--${thread.kind}`}>
-                                  {thread.kind === 'review' ? 'Review' : 'Comment'}
-                                </span>
-                                <span className={`review-platform__thread-tag review-platform__thread-tag--${thread.resolved ? 'resolved' : 'open'}`}>
-                                  {thread.resolved ? 'Resolved' : 'Open'}
-                                </span>
-                              </div>
-                              <span>{formatRelativeTime(thread.updatedAt) || formatAbsoluteTime(thread.updatedAt)}</span>
-                            </div>
-                            <div className="review-platform__thread-meta"><strong>{thread.author}</strong></div>
-                            {parent && (
-                              <div className="review-platform__thread-reply-block">
-                                <div className="review-platform__thread-reply-header">
-                                  <span className="review-platform__thread-reply-label">Reply to</span>
-                                  <span className="review-platform__thread-reply-author">@{parent.author}</span>
-                                </div>
-                                <div className="review-platform__thread-reply-body"><MarkdownRenderer content={parent.body} basePath={workspacePath} /></div>
-                              </div>
-                            )}
-                            <div className="review-platform__thread-body" data-openbitfun-component="review-platform" data-openbitfun-part="threadBody"><MarkdownRenderer content={thread.body} basePath={workspacePath} /></div>
-                            {thread.filePath && <OverflowText className="review-platform__thread-anchor">{thread.filePath}{thread.line ? `:${thread.line}` : ''}</OverflowText>}
-                          </article>
-                        );
-                      })}
-                      {!detailLoading && detail && reviewThreads.length === 0 && <div className="review-platform__empty-state">No comments yet.</div>}
+                    </Disclosure>
+
+                    <Disclosure
+                      key={'comments:' + selectedRemoteId + ':' + selectedPrId}
+                      summary={'Comments (' + reviewItemCount + ')'}
+                      disabled={!detailLoading && reviewThreads.length === 0}
+                      data-openbitfun-product-component="review-platform"
+                      data-openbitfun-product-part="section"
+                    >
+                      <FieldGroup appearance="plain">
+                        {pagedReviewThreads.map(thread => {
+                          const parent = thread.replyToProviderCommentId
+                            ? reviewThreadByCommentId.get(thread.replyToProviderCommentId)
+                            : null;
+                          return (
+                            <FieldRow data-openbitfun-product-component="review-platform" data-openbitfun-product-part="thread" key={thread.id}>
+                              <Stack gap="3">
+                                <CardHeader
+                                  data-openbitfun-product-component="review-platform"
+                                  data-openbitfun-product-part="threadHead"
+                                  title={thread.author}
+                                  description={formatRelativeTime(thread.updatedAt) || formatAbsoluteTime(thread.updatedAt)}
+                                  actions={<ToolbarGroup>
+                                    {thread.kind === 'review' && <StatusPill tone="neutral">Review</StatusPill>}
+                                    {thread.resolved && <StatusPill tone="success">Resolved</StatusPill>}
+                                  </ToolbarGroup>}
+                                />
+                                {parent && (
+                                  <Disclosure summary={'Reply to @' + parent.author}>
+                                    <div className="review-platform__body-markdown"><MarkdownRenderer content={parent.body} basePath={workspacePath} /></div>
+                                  </Disclosure>
+                                )}
+                                <div className="review-platform__body-markdown" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="threadBody"><MarkdownRenderer content={thread.body} basePath={workspacePath} /></div>
+                                {thread.filePath && <OverflowText className="review-platform__thread-anchor">{thread.filePath}{thread.line ? `:${thread.line}` : ''}</OverflowText>}
+                              </Stack>
+                            </FieldRow>
+                          );
+                        })}
+                      </FieldGroup>
                       {renderDetailPagination('Comments', reviewPage, reviewThreads.length, setReviewPageIndex)}
-                    </section>
+                    </Disclosure>
                   </ScrollArea>
                 )}
 
                 {activeTab === 'changes' && (
-                  <ScrollArea className="review-platform__tab-content review-platform__file-list" data-openbitfun-component="review-platform" data-openbitfun-part="fileList">
+                  <ScrollArea className="review-platform__tab-content" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="fileList">
                     {detailError && (
-                      <div className="review-platform__detail-error">
-                        <Icon name="xmark" size="sm" />
-                        <span>{detailError}</span>
+                      <Alert tone="error" message={detailError} description={
                         <Button size="sm" variant="outline" onClick={handleRetryDetail}>
                           Retry
                         </Button>
-                      </div>
+                      } />
                     )}
-                    {detailLoading && renderDetailLoading(pagedChangedFiles.length ? 'Refreshing files...' : 'Loading files...', pagedChangedFiles.length > 0)}
-                    {pagedChangedFiles.map(file => {
-                      const key = fileKey(file);
-                      const isExpanded = expandedFileKeys.has(key);
-                      return (
-                        <article data-openbitfun-component="review-platform" data-openbitfun-part="fileCard" key={key} className="review-platform__file-card">
-                          <div className="review-platform__file-row" data-openbitfun-component="review-platform" data-openbitfun-part="fileRow">
-                            <button data-overflow-trigger
-                              type="button"
-                              className="review-platform__file-main"
-                              data-openbitfun-component="review-platform"
-                              data-openbitfun-part="fileMain"
-                              aria-expanded={isExpanded}
-                              onClick={() => toggleFileExpanded(key)}
+                    {detailLoading && renderDetailLoading(pagedChangedFiles.length ? 'Refreshing files...' : 'Loading files...')}
+                    <FieldGroup appearance="plain">
+                      {pagedChangedFiles.map(file => {
+                        const key = fileKey(file);
+                        const isExpanded = expandedFileKeys.has(key);
+                        return (
+                          <FieldRow key={key} padding="none" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="fileRow">
+                            <Disclosure
+                              data-openbitfun-product-component="review-platform"
+                              data-openbitfun-product-part="fileCard"
+                              summary={file.path}
+                              description={<span className="review-platform__inline-meta">
+                                <StatusPill tone={file.status === 'added' ? 'success' : file.status === 'deleted' ? 'danger' : 'neutral'} data-openbitfun-product-component="review-platform" data-openbitfun-product-part="fileStatus">{file.status}</StatusPill>
+                                <ChangeCount additions={file.additions} deletions={file.deletions} data-openbitfun-product-component="review-platform" data-openbitfun-product-part="fileDelta" />
+                              </span>}
+                              open={isExpanded}
+                              onOpenChange={() => toggleFileExpanded(key)}
+                              unmountOnClose
+                              actions={<Tooltip content="Add to chat">
+                                <IconButton aria-label={`Add ${file.path} to chat`} size="sm" onClick={() => void handleAddFileDiffContext(file)} disabled={!selectedPr} icon={<MessageSquareText size={13} />} />
+                              </Tooltip>}
                             >
-                              <span className="review-platform__file-toggle">
-                                {isExpanded ? <Icon name="chevron-down" size="sm" /> : <Icon name="chevron-right" size="sm" />}
-                              </span>
-                              <span className={`review-platform__file-status review-platform__file-status--${file.status}`} data-openbitfun-component="review-platform" data-openbitfun-part="fileStatus">
-                                {file.status}
-                              </span>
-                              <OverflowText className="review-platform__file-path" data-openbitfun-component="review-platform" data-openbitfun-part="filePath">{file.path}</OverflowText>
-                              <span className="review-platform__file-delta" data-openbitfun-component="review-platform" data-openbitfun-part="fileDelta">
-                                <span className="review-platform__additions">+{file.additions}</span>
-                                <span className="review-platform__deletions">-{file.deletions}</span>
-                              </span>
-                            </button>
-                            <Button className="review-platform__file-add-button" size="sm" variant="outline" onClick={() => void handleAddFileDiffContext(file)} disabled={!selectedPr} leadingIcon={<MessageSquareText size={13} />}>
-
-                              Add
-                            </Button>
-                          </div>
-                          {isExpanded && (
-                            file.patch ? (
-                              <pre className="review-platform__diff-block" data-openbitfun-component="review-platform" data-openbitfun-part="diff" aria-label={`Diff for ${file.path}`}>
-                                {file.patch.split('\n').map((line, index) => (
-                                  <span key={`${file.path}-${index}`} className={diffLineClass(line)}>
-                                    {line || ' '}
-                                  </span>
-                                ))}
-                              </pre>
-                            ) : (
-                              <div className="review-platform__diff-empty">No inline diff is available for this file.</div>
-                            )
-                          )}
-                        </article>
-                      );
-                    })}
+                              {file.patch ? (
+                                <pre tabIndex={0} className="review-platform__diff-block" data-openbitfun-product-component="review-platform" data-openbitfun-product-part="diff" aria-label={`Diff for ${file.path}`}>
+                                  {file.patch.split('\n').map((line, index) => (
+                                    <span key={`${file.path}-${index}`} className={diffLineClass(line)}>
+                                      {line || ' '}
+                                    </span>
+                                  ))}
+                                </pre>
+                              ) : (
+                                <Empty imageSize="sm" icon={<Icon name="files" />} description="No inline diff is available for this file." />
+                              )}
+                            </Disclosure>
+                          </FieldRow>
+                        );
+                      })}
+                    </FieldGroup>
                     {!detailLoading && detail && detail.files.length === 0 && (
-                      <div className="review-platform__empty-state">
-                        {detail.changedFileCountKnown === false
-                          ? 'Changed files are currently unavailable from this provider.'
-                          : 'No changed files were returned by this provider.'}
-                      </div>
+                      <Empty imageSize="sm" icon={<Icon name="files" />} description={detail.changedFileCountKnown === false
+                        ? 'Changed files are currently unavailable from this provider.'
+                        : 'No changed files were returned by this provider.'} />
                     )}
                     {renderDetailPagination('Files', changePage, changedFiles.length, setChangePageIndex)}
                   </ScrollArea>
                 )}
 
                 {activeTab === 'commits' && (
-                  <ScrollArea className="review-platform__tab-content review-platform__timeline">
-                    <div className="review-platform__section-heading">
-                      <span>Commits</span>
-                      <Button size="sm" variant="outline" onClick={handleAddCommitsContext} disabled={!selectedPr || !detail} leadingIcon={<MessageSquareText size={13} />}>
-
-                        Add to chat
-                      </Button>
-                    </div>
+                  <ScrollArea className="review-platform__tab-content">
                     {detailError && (
-                      <div className="review-platform__detail-error">
-                        <Icon name="xmark" size="sm" />
-                        <span>{detailError}</span>
+                      <Alert tone="error" message={detailError} description={
                         <Button size="sm" variant="outline" onClick={handleRetryDetail}>
                           Retry
                         </Button>
-                      </div>
+                      } />
                     )}
-                    {detailLoading && renderDetailLoading(pagedCommits.length ? 'Refreshing commits...' : 'Loading commits...', pagedCommits.length > 0)}
-                    {pagedCommits.map(commit => (
-                      <div key={commit.hash} className="review-platform__timeline-item">
-                        <Icon name="commit" size="sm" />
-                        <span className="review-platform__timeline-main">
-                          <strong><OverflowText>{commit.title}</OverflowText></strong>
-                          <span>{commit.author} · {formatRelativeTime(commit.committedAt)}</span>
-                        </span>
-                        <code>{commit.shortHash}</code>
-                      </div>
-                    ))}
+                    {detailLoading && renderDetailLoading(pagedCommits.length ? 'Refreshing commits...' : 'Loading commits...')}
+                    <FieldGroup appearance="plain">
+                      {pagedCommits.map(commit => (
+                        <FieldRow key={commit.hash}>
+                          <CardHeader
+                            leading={<Icon name="commit" size="sm" />}
+                            title={commit.title}
+                            description={`${commit.author} · ${formatRelativeTime(commit.committedAt)} · ${commit.shortHash}`}
+                          />
+                        </FieldRow>
+                      ))}
+                    </FieldGroup>
                     {!detailLoading && detail && commits.length === 0 && (
-                      <div className="review-platform__empty-state">No commits were returned by this provider.</div>
+                      <Empty imageSize="sm" icon={<Icon name="commit" />} description="No commits were returned by this provider." />
                     )}
                     {renderDetailPagination('Commits', commitPage, commits.length, setCommitPageIndex)}
                   </ScrollArea>
@@ -2634,8 +2473,44 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
               </div>
             </>
           )}
-        </main>
+        </main>}
       </div>
+      <MenuPopover
+        open={detailMenuOpen}
+        anchorRef={detailMenuRef}
+        onClose={() => setDetailMenuOpen(false)}
+        aria-label="Pull request actions"
+        items={[
+          {
+            id: 'add-context', label: 'Add to chat', icon: <MessageSquareText size={14} />,
+            disabled: !selectedPr,
+            submenu: [
+              { id: 'add-overview', label: 'Pull request overview', onSelect: () => void handleFillPrContext() },
+              ...(activeTab === 'overview' ? [
+                { id: 'add-checks', label: 'Checks on this page', disabled: !detail || detailLoading || !ciItems.length, onSelect: () => void handleAddCiPageContext() },
+                { id: 'add-comments', label: 'Comments on this page', disabled: !detail || detailLoading || !reviewThreads.length, onSelect: () => void handleAddReviewsContext() },
+              ] : []),
+              ...(activeTab === 'commits' ? [
+                { id: 'add-commits', label: 'Commits on this page', disabled: !detail || detailLoading || !commits.length, onSelect: () => void handleAddCommitsContext() },
+              ] : []),
+            ],
+          },
+          {
+            id: 'open-external', label: 'Open in browser', icon: <Icon name="arrow-up-right" size="sm" />,
+            disabled: !selectedPr?.webUrl && !initialPullRequestUrl, onSelect: () => void handleOpenExternal(),
+          },
+          {
+            id: 'refresh', label: 'Refresh pull request', icon: <Icon name="refresh" size="sm" />,
+            disabled: !selectedPr || detailLoading, onSelect: () => void handleRefreshDetail(),
+          },
+          { id: 'account-separator', label: '', separator: true },
+          {
+            id: 'authenticate', label: selectedRemote?.platform === 'github' ? 'GitHub CLI authentication' : account?.authSource === 'stored' ? 'Update token' : 'Add token',
+            icon: <KeyRound size={14} />, disabled: !selectedRemote || selectedRemote.platform === 'unknown' || authSaving,
+            onSelect: handleOpenAuthModal,
+          },
+        ]}
+      />
       <Dialog
         open={authModalOpen}
         onOpenChange={(nextOpen) => {
@@ -2650,93 +2525,100 @@ export const ReviewPlatformPanel: React.FC<ReviewPlatformPanelProps> = ({
           <DialogHeading>
             <DialogTitle>{selectedRemote?.platform === 'github' ? 'GitHub CLI authentication' : `${selectedRemote ? providerLabel(selectedRemote) : 'Provider'} token`}</DialogTitle>
           </DialogHeading>
-          <DialogClose />
+          <DialogClose disabled={authSaving} />
         </DialogHeader>
         <DialogBody>
-        <form
-          className="review-platform__auth-form"
-          onSubmit={(event) => {
-            event.preventDefault();
-            void handleSaveAuthToken();
-          }}
-        >
-          <div className="review-platform__auth-target">
-            <OverflowText>{selectedRemote?.host ?? 'No remote'}</OverflowText>
-            <strong><OverflowText>{selectedRemote?.projectPath ?? ''}</OverflowText></strong>
-          </div>
+          <form
+            id={authFormId}
+            onSubmit={(event) => {
+              event.preventDefault();
+              void handleSaveAuthToken();
+            }}
+          >
+            <Stack gap="4">
+              <CardHeader title={selectedRemote?.projectPath ?? ''} description={
+                [selectedRemote?.host, account?.label, authLabel(account), account && authSourceLabel(account.authSource)].filter(Boolean).join(' · ')
+              } />
+              {selectedRemote?.platform === 'github' ? (
+                <Stack gap="3">
+                  <Alert role="status" message="Run this command in the integrated terminal, finish the GitHub CLI flow, then retry." />
+                  <pre tabIndex={0} className="review-platform__ci-log-block">{`gh auth login --hostname ${selectedRemote.host}`}</pre>
+                  {authError && <Alert tone="error" message={authError} />}
+                </Stack>
+              ) : (
+                <Field label="Token" controlWidth="fill" error={authError ?? undefined}>
+                  <DesignInput
+                    type="password"
+                    autoComplete="off"
+                    autoFocus
+                    value={authToken}
+                    disabled={authSaving}
+                    onChange={event => {
+                      setAuthToken(event.target.value);
+                      if (authError) setAuthError(null);
+                    }}
+                  />
+                </Field>
+              )}
+            </Stack>
+          </form>
+        </DialogBody>
+        <DialogFooter>
+          {account?.authSource === 'stored' && (
+            <Button type="button" size="sm" variant="text" disabled={!selectedRemote || authSaving || loading} onClick={() => void handleClearAuthToken()}>
+              Clear token
+            </Button>
+          )}
+          <Button
+            type="button"
+            size="sm"
+            variant="fill"
+            disabled={authSaving}
+            onClick={() => {
+              setAuthModalOpen(false);
+              setAuthError(null);
+            }}
+          >
+            Cancel
+          </Button>
           {selectedRemote?.platform === 'github' ? (
-            <div className="review-platform__gh-auth">
-              <span>Run this command in the integrated terminal, finish the GitHub CLI flow, then retry.</span>
-              <code>{`gh auth login --hostname ${selectedRemote.host}`}</code>
-              {authError && <span className="review-platform__gh-auth-error">{authError}</span>}
-            </div>
-          ) : (
-            <Field label="Token" controlWidth="fill" error={authError ?? undefined}>
-              <DesignInput
-                type="password"
-                autoComplete="off"
-                autoFocus
-                value={authToken}
+            <>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
                 disabled={authSaving}
-                onChange={event => {
-                  setAuthToken(event.target.value);
-                  if (authError) setAuthError(null);
-                }}
-              />
-            </Field>
-          )}
-          <div className="review-platform__auth-actions">
-            <Button
-              type="button"
-              size="sm"
-              variant="fill"
-              disabled={authSaving}
-              onClick={() => {
-                setAuthModalOpen(false);
-                setAuthError(null);
-              }}
-            >
-              Cancel
-            </Button>
-            {selectedRemote?.platform === 'github' ? (
-              <>
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="outline"
-                  disabled={authSaving}
-                  onClick={() => void handleCopyGithubAuthCommand()}
-                  leadingIcon={<Icon name="duplicate" size="xs" />}
-                >
-
-                  Copy
-                </Button>
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="primary"
-                  loading={authSaving}
-                  onClick={() => void handleOpenGithubAuthTerminal()}
-                  leadingIcon={<Icon name="terminal" size="xs" />}
-                >
+                onClick={() => void handleCopyGithubAuthCommand()}
+                leadingIcon={<Icon name="duplicate" size="xs" />}
+              >
 
-                  Open terminal
-                </Button>
-              </>
-            ) : (
+                Copy
+              </Button>
               <Button
-                type="submit"
+                type="button"
                 size="sm"
                 variant="primary"
                 loading={authSaving}
-                disabled={!authToken.trim()}
+                onClick={() => void handleOpenGithubAuthTerminal()}
+                leadingIcon={<Icon name="terminal" size="xs" />}
               >
-                Save
+
+                Open terminal
               </Button>
-            )}
-          </div>
-        </form>
-              </DialogBody>
+            </>
+          ) : (
+            <Button
+              type="submit"
+              form={authFormId}
+              size="sm"
+              variant="primary"
+              loading={authSaving}
+              disabled={!authToken.trim()}
+            >
+              Save
+            </Button>
+          )}
+        </DialogFooter>
       </Dialog>
       {deepReviewConsentDialog}
     </div>
diff --git a/src/web-ui/src/app/components/panels/review-platform/appearance.ts b/src/web-ui/src/app/components/panels/review-platform/appearance.ts
index 92157124ea..01240341fc 100644
--- a/src/web-ui/src/app/components/panels/review-platform/appearance.ts
+++ b/src/web-ui/src/app/components/panels/review-platform/appearance.ts
@@ -2,15 +2,11 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 
 export const reviewPlatformAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'review-platform',
+  componentAttribute: 'data-openbitfun-product-component',
   parts: [
     { id: 'root' },
     { id: 'chrome' },
-    { id: 'brand' },
-    { id: 'title' },
-    { id: 'subtitle' },
     { id: 'actions' },
-    { id: 'statusBar' },
-    { id: 'statusLine' },
     { id: 'body' },
     { id: 'listPane' },
     { id: 'listToolbar' },
@@ -20,7 +16,6 @@ export const reviewPlatformAppearanceDescriptor: AppearanceSurfaceDescriptor = {
     { id: 'listItemMain' },
     { id: 'listItemTitle' },
     { id: 'listItemMeta' },
-    { id: 'listItemStats' },
     { id: 'pagination' },
     { id: 'emptyState' },
     { id: 'errorState' },
@@ -39,8 +34,6 @@ export const reviewPlatformAppearanceDescriptor: AppearanceSurfaceDescriptor = {
     { id: 'tabBar' },
     { id: 'tabContent' },
     { id: 'section' },
-    { id: 'sectionHeading' },
-    { id: 'sectionActions' },
     { id: 'ciItem' },
     { id: 'ciHead' },
     { id: 'ciStatus' },
@@ -51,14 +44,13 @@ export const reviewPlatformAppearanceDescriptor: AppearanceSurfaceDescriptor = {
     { id: 'fileList' },
     { id: 'fileCard' },
     { id: 'fileRow' },
-    { id: 'fileMain' },
     { id: 'fileStatus' },
-    { id: 'filePath' },
     { id: 'fileDelta' },
     { id: 'diff' },
   ],
   facets: [
     { id: 'layout', attribute: 'data-openbitfun-layout', values: ['full', 'detail'] },
+    { id: 'view', attribute: 'data-openbitfun-view', values: ['list', 'detail'] },
   ],
   states: [
     { id: 'selected', selector: { kind: 'self', suffix: '[data-openbitfun-state~="selected"]' } },
diff --git a/src/web-ui/src/app/layout/FloatingMiniChat.scss b/src/web-ui/src/app/layout/FloatingMiniChat.scss
index 8e1682420d..fa92a8b869 100644
--- a/src/web-ui/src/app/layout/FloatingMiniChat.scss
+++ b/src/web-ui/src/app/layout/FloatingMiniChat.scss
@@ -2,8 +2,10 @@
 @use '@/shared/styles/surface-recipes' as surfaces;
 
 $fmc-ease: cubic-bezier(0.23, 1, 0.32, 1);
+$fmc-close-ease: cubic-bezier(0.4, 0, 1, 1);
 $fmc-open-duration: 0.22s;
-$fmc-close-duration: 0.16s;
+$fmc-close-duration: 0.18s;
+$fmc-collapsed-transform: translate(12px, 12px) scale(0.9);
 $panel-width: 480px;
 $panel-height: 680px;
 
@@ -18,12 +20,25 @@ $panel-height: 680px;
 .openbitfun-fmc__button {
   position: relative;
   z-index: 2;
+  opacity: 1;
+  visibility: visible;
   pointer-events: auto;
+  // Crossfade with the panel on the same timeline, including quick reversals.
+  transition:
+    opacity $fmc-close-duration linear,
+    visibility 0s linear,
+    color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
+    background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 
   .openbitfun-fmc--open & {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
+    transition:
+      opacity $fmc-open-duration linear,
+      visibility 0s linear $fmc-open-duration,
+      color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
+      background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
   }
 }
 
@@ -51,18 +66,18 @@ $panel-height: 680px;
     bottom: 16px;
   }
 
-  // Pre-open state: collapsed into the button position. The collapsed panel
-  // still overlaps the trigger, so it is hidden outright once the close
-  // animation ends rather than relying on pointer-events alone.
+  // Keep transcript layout fixed; only the shell contracts toward the launcher.
+  // Accelerate out while fading linearly so there is no early stop followed by
+  // a second disappearance. Remove it from layout only after both finish.
   transform-origin: bottom right;
   opacity: 0;
-  transform: translateY(8px) scale(0.96);
+  transform: $fmc-collapsed-transform;
   visibility: hidden;
   pointer-events: none;
   transition:
     display $fmc-close-duration,
-    opacity $fmc-close-duration $fmc-ease,
-    transform $fmc-close-duration $fmc-ease,
+    opacity $fmc-close-duration linear,
+    transform $fmc-close-duration $fmc-close-ease,
     visibility 0s linear $fmc-close-duration,
     background-color 700ms $fmc-ease,
     color 700ms $fmc-ease,
@@ -74,12 +89,12 @@ $panel-height: 680px;
   &--open {
     display: flex;
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translate(0, 0) scale(1);
     visibility: visible;
     pointer-events: auto;
     transition:
       display $fmc-open-duration,
-      opacity $fmc-open-duration $fmc-ease,
+      opacity $fmc-open-duration linear,
       transform $fmc-open-duration $fmc-ease,
       visibility 0s linear 0s,
       background-color 700ms $fmc-ease,
@@ -89,7 +104,7 @@ $panel-height: 680px;
 
     @starting-style {
       opacity: 0;
-      transform: translateY(8px) scale(0.96);
+      transform: $fmc-collapsed-transform;
     }
   }
 
@@ -303,6 +318,8 @@ $panel-height: 680px;
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .openbitfun-fmc__button,
+  .openbitfun-fmc--open .openbitfun-fmc__button,
   .openbitfun-fmc__panel,
   .openbitfun-fmc__miniapp-suggestion {
     transition: none;
diff --git a/src/web-ui/src/app/layout/FloatingMiniChat.tsx b/src/web-ui/src/app/layout/FloatingMiniChat.tsx
index 48109f7915..c7be45df43 100644
--- a/src/web-ui/src/app/layout/FloatingMiniChat.tsx
+++ b/src/web-ui/src/app/layout/FloatingMiniChat.tsx
@@ -260,7 +260,7 @@ export function FloatingMiniChat() {
       onClick={() => dock.setOpen(true)} onPointerDown={event => { if (event.button === 0) dock.setOpen(true); }}>
       {live ? <Phone size={16} /> : tv('voiceCall.call.launcherCompactLabel')}
     </LauncherButton>
-    <div ref={panelRef} role="dialog" aria-modal="false" aria-label={t('dock.open')} aria-hidden={!dock.open}
+    <div ref={panelRef} role="dialog" aria-modal="false" aria-label={t('dock.open')} aria-hidden={!dock.open} data-motion="presence"
       {...(!dock.open ? { inert: '' } : {})}
       className={['openbitfun-fmc__panel', dock.open && 'openbitfun-fmc__panel--open', drop && 'openbitfun-fmc__panel--drop'].filter(Boolean).join(' ')}
       data-openbitfun-component="floating-mini-chat" data-openbitfun-part="panel">
diff --git a/src/web-ui/src/app/layout/floatingMiniChatActivity.test.ts b/src/web-ui/src/app/layout/floatingMiniChatActivity.test.ts
index e4c3f43735..498dcb378e 100644
--- a/src/web-ui/src/app/layout/floatingMiniChatActivity.test.ts
+++ b/src/web-ui/src/app/layout/floatingMiniChatActivity.test.ts
@@ -32,8 +32,10 @@ describe('floating MiniApp chat activity', () => {
   });
 
   it('hides the launcher while the retained dock is open', () => {
+    const component = readSource('./FloatingMiniChat.tsx');
     const stylesheet = readSource('./FloatingMiniChat.scss');
 
+    expect(component).toMatch(/<div\b[^>]*role="dialog"[^>]*data-motion="presence"/);
     expect(stylesheet).not.toContain('--openbitfun-color-control-launcher');
     expect(stylesheet).not.toContain('--openbitfun-color-control-highlight');
     expect(stylesheet).toMatch(/\.openbitfun-fmc__button\s*\{[\s\S]*?\.openbitfun-fmc--open &[\s\S]*?visibility: hidden;[\s\S]*?pointer-events: none;/);
diff --git a/src/web-ui/src/app/styles/motion.scss b/src/web-ui/src/app/styles/motion.scss
index 431c5157b6..81187ed550 100644
--- a/src/web-ui/src/app/styles/motion.scss
+++ b/src/web-ui/src/app/styles/motion.scss
@@ -157,7 +157,9 @@
 
   /**
    * A dialog may itself be the full-screen overlay. Move only dialog surfaces;
-   * overlay/backdrop roots receive a fade below.
+   * overlay/backdrop roots receive a fade below. Presence owners must also opt
+   * out: a filled entrance animation would override their resting opacity and
+   * multiply their own exit transform via the individual scale property.
    */
   :where(
     [role='dialog'],
@@ -168,6 +170,7 @@
       [class*='overlay'],
       [class*='backdrop'],
       [data-motion='overlay'],
+      [data-motion='presence'],
       [data-motion='none']
     )
   ) {
diff --git a/src/web-ui/src/app/styles/motion.test.ts b/src/web-ui/src/app/styles/motion.test.ts
new file mode 100644
index 0000000000..5cf566e453
--- /dev/null
+++ b/src/web-ui/src/app/styles/motion.test.ts
@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+
+import { resolve } from 'node:path';
+import { compile } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+const style = document.createElement('style');
+style.textContent = compile(resolve(__dirname, 'motion.scss')).css;
+document.head.appendChild(style);
+const motionRules = Array.from(style.sheet!.cssRules)
+  .filter((rule): rule is CSSMediaRule => rule instanceof CSSMediaRule
+    && rule.conditionText === '(prefers-reduced-motion: no-preference)')
+  .flatMap(rule => Array.from(rule.cssRules))
+  .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule);
+style.remove();
+
+function entranceRules(element: HTMLElement): CSSStyleRule[] {
+  return motionRules.filter(rule => rule.style.animation && element.matches(rule.selectorText));
+}
+
+describe('global motion ownership', () => {
+  it.each(['dialog', 'alertdialog'])('gives a plain %s one default entrance', role => {
+    const element = document.createElement('div');
+    element.setAttribute('role', role);
+    const matches = entranceRules(element);
+    expect(matches).toHaveLength(1);
+    expect(matches[0].style.animation).toContain('openbitfun-motion-dialog-enter');
+  });
+
+  it.each(['dialog', 'alertdialog', 'menu', 'listbox', 'tooltip'])(
+    'leaves the complete %s enter/exit lifecycle to its presence owner', role => {
+      const element = document.createElement('div');
+      element.setAttribute('role', role);
+      element.dataset.motion = 'presence';
+      expect(entranceRules(element)).toHaveLength(0);
+    },
+  );
+});
diff --git a/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.test.tsx b/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.test.tsx
index d9ccfe94a2..6e38adf7c5 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.test.tsx
@@ -228,7 +228,7 @@ describe('ChatInputWorkspaceStrip git refresh behavior', () => {
       '[data-testid="chat-input-branch-trigger"]',
     );
     expect(trigger).not.toBeNull();
-    expect(trigger?.getAttribute('aria-haspopup')).toBe('listbox');
+    expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
     expect(trigger?.getAttribute('aria-expanded')).toBe('false');
 
     await act(async () => {
diff --git a/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.tsx b/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.tsx
index 4c71dcee18..6eb576f930 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.tsx
@@ -10,7 +10,7 @@
  * the track.
  */
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { Circle, Shield, ShieldAlert, ShieldCheck, Square, SquareCheck } from 'lucide-react';
@@ -158,6 +158,7 @@ export const ChatInputWorkspaceStrip: React.FC<ChatInputWorkspaceStripProps> = (
   const workspaceMenuRef = useRef<HTMLDivElement>(null);
   const [workspaceMenuOpen, setWorkspaceMenuOpen] = useState(false);
   const branchTriggerRef = useRef<HTMLButtonElement>(null);
+  const branchPickerId = useId();
   const [branchMenuOpen, setBranchMenuOpen] = useState(false);
   const permissionMenuLayout = useAnchoredPopoverPosition({
     open: permissionMenuOpen,
@@ -514,14 +515,15 @@ export const ChatInputWorkspaceStrip: React.FC<ChatInputWorkspaceStripProps> = (
 
     return (
       <>
-        <Tooltip content={branchTooltipContent} placement="top">
+        <Tooltip content={branchTooltipContent} placement="top" disabled={branchMenuOpen}>
           <button
             ref={branchTriggerRef}
             type="button"
             className="openbitfun-chat-input-workspace-strip__chip openbitfun-chat-input-workspace-strip__chip--branch openbitfun-chat-input-workspace-strip__chip--branch-switchable"
             aria-label={t('workspaceStrip.branchSwitchLabel', { branch: branchLabel })}
-            aria-haspopup="listbox"
+            aria-haspopup="dialog"
             aria-expanded={branchMenuOpen}
+            aria-controls={branchMenuOpen ? branchPickerId : undefined}
             data-testid="chat-input-branch-trigger"
             onClick={event => {
               event.stopPropagation();
@@ -532,6 +534,7 @@ export const ChatInputWorkspaceStrip: React.FC<ChatInputWorkspaceStripProps> = (
           </button>
         </Tooltip>
         <BranchQuickSwitch
+          id={branchPickerId}
           isOpen={branchMenuOpen}
           onClose={() => setBranchMenuOpen(false)}
           repositoryPath={trimmedPath}
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
index f67cb9ceeb..1649a9ef81 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
@@ -188,10 +188,12 @@ embedded transcripts without a rail keep their own layout. The scroller remains
 full width.
 The shared content-padding token defaults to 0.75rem on wide and narrow surfaces,
 keeping the reading column compact while leaving room for decoration and targets.
-The bubble extends into that gutter by its corner radius. Its horizontal border
-tangent points define the same leading and trailing edges as user text, timestamps,
-reply prose, and completion metadata. Inner padding is the radius minus the border
-width; borderless failed messages keep the same tangent points and content axis.
+The borderless bubble extends into that gutter by its corner radius, and its inner
+padding matches that radius so user text, timestamps, reply prose, and completion
+metadata keep the same content axis. Content-fit bubbles have an 8rem minimum that
+is capped by the 72% message-width limit on narrow surfaces. Content below that
+minimum stays shrink-wrapped and centered; content that reaches the available line
+width retains leading text alignment and wraps normally.
 Both metadata rows align the last icon frame with the content's trailing edge,
 retaining 28px hit targets and the same compact action gap. Each action cluster
 wraps as a whole when space is limited. A half-space-1 gap groups user metadata
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
index 8729720798..51f88210e4 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
@@ -6,30 +6,25 @@
 .user-message-item-shell {
   @include transcriptLayout.content-column;
 
-  --_user-message-border-width: var(--openbitfun-border-width-default);
   --_user-message-radius: calc(var(--openbitfun-control-flow-chat-card-radius) + 2px);
-  --_user-message-padding-inline: max(0px, calc(var(--_user-message-radius) - var(--_user-message-border-width)));
+  --_user-message-padding-inline: var(--_user-message-radius);
 
   position: relative;
   margin: 0.06rem 0 var(--openbitfun-control-flow-chat-flow-item-gap);
-
-  &:has(> .user-message-item--failed) {
-    --_user-message-border-width: 0px;
-  }
 }
 
 .user-message-item {
   box-sizing: border-box;
   /*
    * The shell owns the same reading column as replies. Extend the bubble by
-   * its radius so the horizontal edges' tangent points meet that column.
-   * Padding subtracts the border width to put message text on the same axis.
+   * its radius so the rounded surface and message text meet that column.
    */
   width: fit-content;
+  min-width: min(8rem, 72%);
   max-width: min(72%, 48rem);
   padding: 0.46rem var(--_user-message-padding-inline);
   background: var(--openbitfun-color-action-quiet-hover);
-  border: var(--_user-message-border-width) solid color-mix(in srgb, var(--openbitfun-color-border-default) 72%, transparent);
+  border: none;
   border-radius: var(--_user-message-radius);
   margin-block: 0;
   margin-inline: auto calc(-1 * var(--_user-message-radius));
@@ -41,16 +36,6 @@
    * it changes only paint on the contents, never this row's measured layout.
    */
   position: relative;
-
-  &:hover {
-    background: var(--openbitfun-color-action-quiet-hover);
-    border-color: color-mix(in srgb, var(--openbitfun-color-border-subtle) 56%, transparent);
-  }
-
-  &:focus-within {
-    border-color: color-mix(in srgb, color-mix(in srgb, var(--openbitfun-color-accent-hover) 40%, transparent) 68%, var(--openbitfun-color-border-default));
-  }
-
 }
 
 .user-message-item--editing {
@@ -94,6 +79,7 @@
 .user-message-item__main {
   display: flex;
   align-items: flex-start;
+  justify-content: center;
   gap: var(--openbitfun-control-flow-chat-inline-gap);
 }
 
@@ -140,7 +126,9 @@
 }
 
 .user-message-item__content {
-  flex: 1;
+  flex: 0 1 auto;
+  width: fit-content;
+  max-width: 100%;
   font-size: var(--openbitfun-type-flow-control-font-size);
   font-weight: var(--openbitfun-type-flow-control-font-weight);
   line-height: var(--openbitfun-type-flow-body-line-height);
@@ -179,12 +167,16 @@
     align-items: flex-start;
     column-gap: var(--openbitfun-control-flow-chat-inline-gap);
     row-gap: 0.28em;
-    flex: 1;
+    flex: 0 1 auto;
+    width: fit-content;
+    max-width: 100%;
     min-width: 0;
   }
 
   .user-message-item__failed-body {
-    flex: 1 1 auto;
+    flex: 0 1 auto;
+    width: fit-content;
+    max-width: 100%;
     min-width: 0;
     display: flex;
     flex-direction: column;
@@ -194,7 +186,7 @@
 
   .user-message-item__content {
     flex: 0 1 auto;
-    width: max-content;
+    width: fit-content;
     max-width: 100%;
     color: var(--openbitfun-color-content-muted);
     font-size: var(--_failed-font-size);
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 d67c00e296..1660f99751 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
@@ -728,9 +728,9 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
                     disabled={!canRollback}
                     aria-label={rollbackTooltip}
                     icon={sessionMutation?.kind === 'rollback' && sessionMutation.targetTurnId === turnId ? (
-                      <Loader2 size={14} className="user-message-item__rollback-spinner" />
+                      <Icon glyph={Loader2} size="sm" className="user-message-item__rollback-spinner" />
                     ) : (
-                      <RotateCcw size={14} />
+                      <Icon glyph={RotateCcw} size="sm" />
                     )}
                   />
                 </Tooltip>
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItemActions.test.ts b/src/web-ui/src/flow_chat/components/modern/UserMessageItemActions.test.ts
index e7c43ee930..d60aadae5e 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItemActions.test.ts
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItemActions.test.ts
@@ -32,6 +32,8 @@ describe('UserMessageItem metadata visibility', () => {
     const textarea = extractBlock(stylesheet, '\n.user-message-edit-composer__textarea {');
     const richInput = extractBlock(stylesheet, '\n.user-message-edit-composer__rich-input {');
     const bubble = extractBlock(stylesheet, '\n.user-message-item {');
+    const main = extractBlock(stylesheet, '\n.user-message-item__main {');
+    const content = extractBlock(stylesheet, '\n.user-message-item__content {');
     const editingBubble = extractBlock(stylesheet, '\n.user-message-item--editing {');
 
     expect(editLayout).toContain('flex-direction: column;');
@@ -41,7 +43,13 @@ describe('UserMessageItem metadata visibility', () => {
     expect(textarea).toContain('min-height: var(--openbitfun-control-height-sm);');
     expect(richInput).toContain('min-height: var(--openbitfun-control-height-sm);');
     expect(bubble).toContain('width: fit-content;');
+    expect(bubble).toContain('min-width: min(8rem, 72%);');
     expect(bubble).toContain('max-width: min(72%, 48rem);');
+    expect(bubble).toContain('border: none;');
+    expect(main).toContain('justify-content: center;');
+    expect(content).toContain('flex: 0 1 auto;');
+    expect(content).toContain('width: fit-content;');
+    expect(content).toContain('max-width: 100%;');
     expect(editingBubble).toContain('width: auto;');
     expect(editingBubble).toContain('max-width: none;');
     expect(stylesheet).not.toContain('.user-message-item__images--editing');
@@ -97,7 +105,7 @@ describe('UserMessageItem metadata visibility', () => {
     expect(metaLayout).toContain('justify-content: flex-end;');
     const bubble = extractBlock(stylesheet, '\n.user-message-item {');
     expect(bubble).toContain('padding: 0.46rem var(--_user-message-padding-inline);');
-    expect(shell).toContain('--_user-message-padding-inline: max(0px, calc(var(--_user-message-radius) - var(--_user-message-border-width)));');
+    expect(shell).toContain('--_user-message-padding-inline: var(--_user-message-radius);');
     expect(bubble).toContain('margin-inline: auto calc(-1 * var(--_user-message-radius));');
     expect(meta).toContain('padding-inline: 0;');
     expect(meta).toContain('padding-block: calc(var(--openbitfun-space-1) / 2) 0;');
diff --git a/src/web-ui/src/flow_chat/components/voice/ControlConversation.tsx b/src/web-ui/src/flow_chat/components/voice/ControlConversation.tsx
index 6ca838ebb9..bf63c949ed 100644
--- a/src/web-ui/src/flow_chat/components/voice/ControlConversation.tsx
+++ b/src/web-ui/src/flow_chat/components/voice/ControlConversation.tsx
@@ -171,7 +171,7 @@ export function ControlConversation({ session, sessionRef, voiceTarget, active,
     <ConversationModeSurface voiceTarget={voiceTarget} renderHeader={renderHeader} active={active}
       headerAction={newConversationAction}
       requiresTextInput={Boolean(ownedRequests.length || needsAnswer)} onCloseVoice={onClose} onVoiceViewChange={onVoiceViewChange}
-      transcript={<VoiceCallTranscript compact entries={entries} status={status || sessionError} header={historyFeedback}
+      transcript={mode => <VoiceCallTranscript compact presentation={mode} entries={entries} status={status || sessionError} header={historyFeedback}
         onLoadEarlier={active && canLoadEarlier && !historyBusy && !failedHistory ? () => void loadEarlier() : undefined}
         className="openbitfun-conversation-mode-surface__transcript" />}>
       <ControlComposer active={active} />
diff --git a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.scss b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.scss
index d9020832be..887bb7f991 100644
--- a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.scss
+++ b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.scss
@@ -1,3 +1,5 @@
+@use '../../markdown-typography' as markdownTypography;
+
 .openbitfun-conversation-mode-surface {
   flex: 1;
   min-width: 0;
@@ -190,10 +192,17 @@
   }
 }
 .openbitfun-conversation-mode-surface__composer-content { min-height: 0; overflow: hidden; }
-.openbitfun-conversation-mode-surface__transcript .markdown-renderer {
+.openbitfun-conversation-mode-surface__transcript {
+  .markdown-renderer { white-space: normal; }
+
+  &[data-openbitfun-presentation='chat'] {
+    @include markdownTypography.apply;
+  }
+}
+
+.openbitfun-conversation-mode-surface__transcript[data-openbitfun-presentation='voice'] .markdown-renderer {
   color: inherit;
   font: inherit;
-  white-space: normal;
   :is(p, h1, h2, h3, h4, h5, h6, strong, em, li) { color: inherit; }
 }
 .openbitfun-conversation-mode-surface__history {
diff --git a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.test.tsx b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.test.tsx
index a43fbcf367..1a85a85da2 100644
--- a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.test.tsx
+++ b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.test.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { VoiceCallTranscript } from '@openbitfun/ui';
 
 import { ConversationModeSurface } from './ConversationModeSurface';
 import type { VoiceMiniAppCallTarget } from './voiceClientContext';
@@ -199,36 +200,45 @@ describe('ConversationModeSurface', () => {
       vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
       vi.stubGlobal('matchMedia', () => ({ matches: false, addEventListener() {}, removeEventListener() {} }));
     });
-    const renderIntegrated = (requiresTextInput = false) => root.render(
+    const transcript = (mode: 'chat' | 'voice') => <VoiceCallTranscript presentation={mode} entries={[
+      { id: 'user', role: 'user', content: 'Request' },
+      { id: 'assistant', role: 'assistant', content: 'History' },
+    ]} />;
+    const renderIntegrated = (requiresTextInput = false, modeAware = false) => root.render(
       <ConversationModeSurface voiceTarget={miniAppTarget} renderHeader={() => <header />}
-        requiresTextInput={requiresTextInput} transcript={<div data-testid="continuous-record">History</div>}>
+        requiresTextInput={requiresTextInput} transcript={modeAware ? transcript : transcript('voice')}>
         <input data-testid="continuous-draft" defaultValue="Unsent draft" />
       </ConversationModeSurface>,
     );
     const identity = () => container.querySelector<HTMLButtonElement>('[data-openbitfun-part="identity"] button[aria-expanded]')!;
     const back = () => container.querySelector<HTMLButtonElement>('[data-openbitfun-part="voiceHeader"] button[aria-label="voiceCall.call.switchToChat"]')!;
 
-    it('keeps one logo, transcript and composer mounted through entry, return and hangup', async () => {
-      await act(async () => renderIntegrated());
+    it.each([false, true])('keeps the reading viewport through entry, return and hangup (mode-aware: %s)', async modeAware => {
+      await act(async () => renderIntegrated(false, modeAware));
       const logo = container.querySelector('canvas');
-      const record = container.querySelector('[data-testid="continuous-record"]');
+      const record = container.querySelector('[data-openbitfun-part="conversation"]');
+      const userMessage = container.querySelector('[data-transcript-id="user"]');
+      expect(record?.getAttribute('data-openbitfun-presentation')).toBe(modeAware ? 'chat' : 'voice');
       const input = container.querySelector<HTMLInputElement>('input')!;
       await act(async () => identity().click());
       expect(mocks.controller.start).toHaveBeenCalledWith(miniAppTarget);
       mocks.controller.phase = 'live'; mocks.controller.target = miniAppTarget;
-      await act(async () => renderIntegrated());
+      await act(async () => renderIntegrated(false, modeAware));
+      expect(record?.getAttribute('data-openbitfun-presentation')).toBe('voice');
       expect(identity().hidden).toBe(true);
       expect(container.querySelector('[data-openbitfun-part="voiceHeader"]')?.getAttribute('aria-hidden')).toBe('false');
       expect(back().querySelector('.lucide-arrow-left')).not.toBeNull();
       expect(container.querySelector('[data-openbitfun-part="composer"]')?.getAttribute('aria-hidden')).toBe('true');
       await act(async () => back().click());
+      expect(record?.getAttribute('data-openbitfun-presentation')).toBe(modeAware ? 'chat' : 'voice');
       expect(mocks.controller.end).not.toHaveBeenCalled();
       expect(identity().hidden).toBe(false);
       expect(identity().getAttribute('aria-label')).toBe('voiceCall.call.identity.ongoing');
       mocks.controller.phase = 'idle'; mocks.controller.target = null;
-      await act(async () => renderIntegrated());
+      await act(async () => renderIntegrated(false, modeAware));
       expect(container.querySelector('canvas')).toBe(logo);
-      expect(container.querySelector('[data-testid="continuous-record"]')).toBe(record);
+      expect(container.querySelector('[data-openbitfun-part="conversation"]')).toBe(record);
+      expect(container.querySelector('[data-transcript-id="user"]')).toBe(userMessage);
       expect(container.querySelector('input')).toBe(input);
       expect(input.value).toBe('Unsent draft');
     });
diff --git a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.tsx b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.tsx
index 2e81803059..9890f5eaf4 100644
--- a/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.tsx
+++ b/src/web-ui/src/flow_chat/components/voice/ConversationModeSurface.tsx
@@ -21,8 +21,9 @@ interface ConversationModeSurfaceProps {
   /** Host chrome, including the logo control, is shown only in text mode. */
   renderHeader?: (modeSwitch: ReactNode) => ReactNode;
   onVoiceViewChange?: (visible: boolean) => void;
-  /** A persistent transcript opts into the integrated identity; children become its composer. */
-  transcript?: ReactNode;
+  /** A persistent transcript opts into the integrated identity; children become its composer.
+   * A render function can follow the mode without remounting the reading viewport. */
+  transcript?: ReactNode | ((mode: 'chat' | 'voice') => ReactNode);
   /** Secondary action in the compact conversation header. */
   headerAction?: ReactNode;
   requiresTextInput?: boolean;
@@ -137,7 +138,8 @@ export function ConversationModeSurface({
                 : 'voiceCall.call.identity.start')}
           disabled={!isVoiceMode && requiresTextInput || !ownsCall && (voiceStartDisabled || phase !== 'idle')}
           onClick={handleModeSwitch} />}
-        {integrated ? transcript : isVoiceMode && <RealtimeVoiceCallPanel embedded={Boolean(renderHeader)} onClose={onCloseVoice} onBack={() => setShowVoice(false)} />}
+        {integrated ? (typeof transcript === 'function' ? transcript(isVoiceMode ? 'voice' : 'chat') : transcript)
+          : isVoiceMode && <RealtimeVoiceCallPanel embedded={Boolean(renderHeader)} onClose={onCloseVoice} onBack={() => setShowVoice(false)} />}
         {integrated && ownsCall && <VoiceCallControls phase={phase} muted={controller.muted}
           compact={!isVoiceMode}
           labels={{ back: t('voiceCall.call.switchToChat'), close: t('voiceCall.call.close'), mute: t('voiceCall.call.mute'),
diff --git a/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts b/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
index 099d7caf8f..38359a19bb 100644
--- a/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
+++ b/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
@@ -1001,7 +1001,7 @@ describe('AppearanceCompiler', () => {
     expect(snapshot.cssText).toContain('[data-openbitfun-component="virtual-message-list"][data-openbitfun-part="boundaryStatus"][data-openbitfun-state~="unavailable"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="model-settings"][data-openbitfun-part="root"][data-openbitfun-view="selection"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-product-component="external-sources-config"][data-openbitfun-product-part="conflict"]');
-    expect(snapshot.cssText).toContain('[data-openbitfun-component="review-platform"][data-openbitfun-part="listItem"][data-openbitfun-state~="selected"]');
+    expect(snapshot.cssText).toContain('[data-openbitfun-product-component="review-platform"][data-openbitfun-product-part="listItem"][data-openbitfun-state~="selected"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="modern-flow-chat"][data-openbitfun-part="historyOpenIntent"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="runtime-settings"][data-openbitfun-part="petTrigger"][data-openbitfun-state~="expanded"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="mcp-tools-config"][data-openbitfun-part="root"][data-openbitfun-view="json"]');
diff --git a/src/web-ui/src/shared/ui/Dialog.test.tsx b/src/web-ui/src/shared/ui/Dialog.test.tsx
index 57df515089..d0039c77b7 100644
--- a/src/web-ui/src/shared/ui/Dialog.test.tsx
+++ b/src/web-ui/src/shared/ui/Dialog.test.tsx
@@ -11,6 +11,9 @@ describe('overlay exit content', () => {
 
   beforeEach(() => {
     vi.useFakeTimers();
+    const media = new EventTarget();
+    Object.defineProperty(media, 'matches', { value: false });
+    vi.stubGlobal('matchMedia', () => media);
     container = document.createElement('div');
     document.body.appendChild(container);
     root = createRoot(container);
@@ -20,6 +23,7 @@ describe('overlay exit content', () => {
     act(() => root.unmount());
     container.remove();
     vi.useRealTimers();
+    vi.unstubAllGlobals();
   });
 
   it('supports an explicit portal host and leaves focus unchanged when restoration is disabled', () => {
diff --git a/src/web-ui/src/shared/ui/MenuPopover.test.tsx b/src/web-ui/src/shared/ui/MenuPopover.test.tsx
index c73e2aee04..39cc665eca 100644
--- a/src/web-ui/src/shared/ui/MenuPopover.test.tsx
+++ b/src/web-ui/src/shared/ui/MenuPopover.test.tsx
@@ -39,8 +39,13 @@ describe('public MenuPopover', () => {
     act(() => { trigger.focus(); trigger.click(); });
     return trigger;
   };
-  beforeEach(() => { host = document.createElement('div'); document.body.append(host); root = createRoot(host); selected.mockClear(); });
-  afterEach(() => { act(() => root.unmount()); host.remove(); vi.restoreAllMocks(); });
+  beforeEach(() => {
+    const media = new EventTarget();
+    Object.defineProperty(media, 'matches', { value: false });
+    vi.stubGlobal('matchMedia', () => media);
+    host = document.createElement('div'); document.body.append(host); root = createRoot(host); selected.mockClear();
+  });
+  afterEach(() => { act(() => root.unmount()); host.remove(); vi.restoreAllMocks(); vi.unstubAllGlobals(); });
 
   it('portals inside the theme scope, supports typeahead and dispatches after focus return', async () => {
     const trigger = open();
diff --git a/src/web-ui/src/shared/ui/usePresence.test.tsx b/src/web-ui/src/shared/ui/usePresence.test.tsx
new file mode 100644
index 0000000000..4bb1017ff6
--- /dev/null
+++ b/src/web-ui/src/shared/ui/usePresence.test.tsx
@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { usePresence } from '@openbitfun/ui';
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('overlay presence', () => {
+  let root: Root;
+  let host: HTMLDivElement;
+  function Surface({ open }: { open: boolean }) {
+    const { present, state } = usePresence(open, 100);
+    return present ? <div data-state={state}>Surface</div> : null;
+  }
+  const render = (open: boolean) => act(() => root.render(<Surface open={open} />));
+  beforeEach(() => {
+    vi.useFakeTimers();
+    const media = new EventTarget();
+    Object.defineProperty(media, 'matches', { value: false });
+    vi.stubGlobal('matchMedia', () => media);
+    host = document.createElement('div');
+    document.body.append(host);
+    root = createRoot(host);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it('cancels entrance frames when dismissed and unmounts only after exit', () => {
+    render(false);
+    render(true);
+    const surface = host.firstElementChild!;
+    render(false);
+    act(() => vi.advanceTimersByTime(99));
+    expect(surface.getAttribute('data-state')).toBe('exiting');
+    expect(surface.isConnected).toBe(true);
+    act(() => vi.advanceTimersByTime(1));
+    expect(surface.isConnected).toBe(false);
+  });
+
+  it('skips frame and exit delays when reduced motion is requested', () => {
+    const media = new EventTarget();
+    Object.defineProperty(media, 'matches', { value: true });
+    vi.stubGlobal('matchMedia', () => media);
+    render(false);
+    render(true);
+    expect(host.firstElementChild?.getAttribute('data-state')).toBe('entered');
+    render(false);
+    expect(host.childElementCount).toBe(0);
+  });
+
+  it('settles an in-progress exit when the motion preference changes', () => {
+    const media = new EventTarget();
+    let reduced = false;
+    Object.defineProperty(media, 'matches', { get: () => reduced });
+    vi.stubGlobal('matchMedia', () => media);
+    render(true);
+    act(() => vi.advanceTimersByTime(48));
+    render(false);
+    act(() => { reduced = true; media.dispatchEvent(new Event('change')); });
+    expect(host.childElementCount).toBe(0);
+  });
+});
diff --git a/src/web-ui/src/shared/utils/useAnchoredPopoverPosition.ts b/src/web-ui/src/shared/utils/useAnchoredPopoverPosition.ts
index 27aeba9fa1..4008edd124 100644
--- a/src/web-ui/src/shared/utils/useAnchoredPopoverPosition.ts
+++ b/src/web-ui/src/shared/utils/useAnchoredPopoverPosition.ts
@@ -16,6 +16,8 @@ export type AnchoredPopoverAlignment = 'start' | 'end';
 export interface AnchoredPopoverLayout {
   top: number;
   left: number;
+  /** Prefer this edge for top placement so content can grow away from the anchor. */
+  bottom?: number;
   width?: number;
   placement: FixedPopoverPlacement;
 }
@@ -39,6 +41,7 @@ const sameLayout = (
 ): boolean => current !== null
   && current.top === next.top
   && current.left === next.left
+  && current.bottom === next.bottom
   && current.width === next.width
   && current.placement === next.placement;
 
@@ -109,15 +112,17 @@ export function useAnchoredPopoverPosition({
       { width: window.innerWidth, height: window.innerHeight },
       { gap, padding, preferredPlacement },
     );
+    const placement = resolvePlacement(
+      position.top,
+      popoverHeight,
+      anchorRect,
+      preferredPlacement,
+    );
     const nextLayout: AnchoredPopoverLayout = {
       ...position,
+      bottom: placement === 'top' ? window.innerHeight - position.top - popoverHeight : undefined,
       width: matchedWidth,
-      placement: resolvePlacement(
-        position.top,
-        popoverHeight,
-        anchorRect,
-        preferredPlacement,
-      ),
+      placement,
     };
 
     setLayout(current => sameLayout(current, nextLayout) ? current : nextLayout);
diff --git a/src/web-ui/src/tools/git/components/BranchQuickSwitch.scss b/src/web-ui/src/tools/git/components/BranchQuickSwitch.scss
index 2e2c1b8fbc..ea9b1f1c57 100644
--- a/src/web-ui/src/tools/git/components/BranchQuickSwitch.scss
+++ b/src/web-ui/src/tools/git/components/BranchQuickSwitch.scss
@@ -2,12 +2,20 @@
 @use '@/shared/styles/overlay-layout' as overlay-layout;
 @use '@/shared/styles/surface-recipes' as surfaces;
 
-.branch-quick-switch {
-  @include surfaces.floating;
+.branch-quick-switch__layer {
   @include overlay-layout.anchored-picker-inline-size;
-
   position: fixed;
   z-index: var(--openbitfun-layer-popover);
+
+  &[aria-hidden='true'] {
+    pointer-events: none;
+  }
+}
+
+.branch-quick-switch {
+  @include surfaces.floating;
+
+  inline-size: 100%;
   box-sizing: border-box;
   overflow: hidden;
   color: var(--openbitfun-color-content-primary);
@@ -17,6 +25,26 @@
   line-height: var(--openbitfun-type-label-md-line-height);
   letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
   user-select: none;
+  // Keep the measured layer stationary while its surface enters and exits.
+  opacity: 0;
+  transform: translateY(4px);
+  transition:
+    opacity 150ms var(--openbitfun-motion-easing-enter),
+    transform 150ms var(--openbitfun-motion-easing-enter);
+}
+
+.branch-quick-switch__layer[data-openbitfun-placement='bottom'] .branch-quick-switch {
+  transform: translateY(-4px);
+}
+
+.branch-quick-switch__layer[data-state='entered'] .branch-quick-switch {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.branch-quick-switch__layer[data-state='exiting'] .branch-quick-switch {
+  // Keep in sync with usePresence's exit duration.
+  transition-duration: 100ms;
 }
 
 .branch-quick-switch__search {
@@ -166,6 +194,11 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .branch-quick-switch {
+    transform: none !important;
+    transition: none;
+  }
+
   .branch-quick-switch__spinner {
     animation: none;
   }
diff --git a/src/web-ui/src/tools/git/components/BranchQuickSwitch.test.tsx b/src/web-ui/src/tools/git/components/BranchQuickSwitch.test.tsx
index 4125bd66e6..2ced49bc9d 100644
--- a/src/web-ui/src/tools/git/components/BranchQuickSwitch.test.tsx
+++ b/src/web-ui/src/tools/git/components/BranchQuickSwitch.test.tsx
@@ -1,6 +1,6 @@
 /** @vitest-environment jsdom */
 
-import React, { forwardRef, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -20,39 +20,6 @@ const mocks = vi.hoisted(() => ({
   refresh: vi.fn(async () => undefined),
 }));
 
-vi.mock('@openbitfun/ui', async importOriginal => ({
-  ...await importOriginal<typeof import('@openbitfun/ui')>(),
-  Button: forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    loading?: boolean;
-    variant?: string;
-  }>(({
-    children,
-    loading: _loading,
-    variant: _variant,
-    ...props
-  }, ref) => <button ref={ref} type="button" {...props}>{children}</button>),
-  Icon: ({ name }: { name: string }) => <span data-icon={name} />,
-  Input: forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-    (props, ref) => <input ref={ref} {...props} />,
-  ),
-  Dialog: ({
-    children,
-    open,
-    'data-testid': testId,
-  }: React.PropsWithChildren<{ open: boolean; 'data-testid'?: string }>) => open ? (
-    <div role="dialog" data-testid={testId}>{children}</div>
-  ) : null,
-  DialogBody: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
-  DialogClose: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => <button type="button" {...props} />,
-  DialogFooter: ({ children }: React.PropsWithChildren) => <footer>{children}</footer>,
-  DialogHeader: ({ children }: React.PropsWithChildren) => <header>{children}</header>,
-  DialogHeading: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
-  DialogTitle: ({ children }: React.PropsWithChildren) => <h2>{children}</h2>,
-  ScrollArea: forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ children, ...props }, ref) => <div ref={ref} {...props}>{children}</div>,
-  ),
-}));
-
 vi.mock('@/infrastructure/appearance/runtime/AppearanceOverlayHost', () => ({
   getAppearanceOverlayHost: () => document.body,
 }));
@@ -88,10 +55,6 @@ vi.mock('@/shared/notification-system/services/NotificationService', () => ({
   },
 }));
 
-vi.mock('@/shared/utils/useAnchoredPopoverPosition', () => ({
-  useAnchoredPopoverPosition: () => ({ top: 10, left: 12, placement: 'top' }),
-}));
-
 vi.mock('@/tools/git/services', () => ({
   gitEventService: { emit: mocks.emit },
   gitService: {
@@ -115,12 +78,24 @@ const branches = [
   { name: 'feature', current: false, remote: false, ahead: 0, behind: 0 },
 ];
 
-function Harness({ onSwitchSuccess }: { onSwitchSuccess: (branch: string) => void }) {
-  const [open, setOpen] = useState(true);
+function Harness({ onSwitchSuccess, initiallyOpen = true, blockMessagePointer = false }: {
+  onSwitchSuccess?: (branch: string) => void;
+  initiallyOpen?: boolean;
+  blockMessagePointer?: boolean;
+}) {
+  const [open, setOpen] = useState(initiallyOpen);
   const anchorRef = useRef<HTMLButtonElement>(null);
   return (
     <>
-      <button ref={anchorRef} type="button">branch</button>
+      <button ref={anchorRef} type="button" data-testid="branch-trigger"
+        aria-expanded={open} onClick={() => setOpen(current => !current)}>branch</button>
+      <div data-testid="flowchat-messages" onPointerDownCapture={event => {
+        // FlowChat guards the message area during history transitions.
+        if (blockMessagePointer) event.stopPropagation();
+      }}>
+        <div data-testid="message-blank" />
+        <input aria-label="Outside input" />
+      </div>
       <BranchQuickSwitch
         isOpen={open}
         onClose={() => setOpen(false)}
@@ -150,6 +125,9 @@ describe('BranchQuickSwitch', () => {
     mocks.getDiff.mockResolvedValue('');
     mocks.addFiles.mockResolvedValue({ success: true });
     mocks.commit.mockResolvedValue({ success: true });
+    const media = new EventTarget();
+    Object.defineProperty(media, 'matches', { value: true });
+    vi.stubGlobal('matchMedia', () => media);
   });
 
   afterEach(() => {
@@ -157,6 +135,8 @@ describe('BranchQuickSwitch', () => {
     container.remove();
     document.querySelectorAll('[data-testid="branch-quick-switch"], [data-testid="branch-switch-conflict-dialog"], [data-testid="branch-switch-commit-dialog"]')
       .forEach(node => node.remove());
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
   });
 
   it('keeps the design-system search field as one labeled visual surface', async () => {
@@ -190,6 +170,134 @@ describe('BranchQuickSwitch', () => {
     expect(currentBranch?.disabled).toBe(false);
   });
 
+  it('dismisses on the first message-area press even when FlowChat stops propagation', async () => {
+    await act(async () => root.render(<Harness blockMessagePointer />));
+    const blank = container.querySelector('[data-testid="message-blank"]')!;
+    act(() => blank.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true })));
+    expect(container.querySelector('[data-testid="branch-trigger"]')?.getAttribute('aria-expanded')).toBe('false');
+    expect(document.querySelector('[data-testid="branch-quick-switch"]')).toBeNull();
+  });
+
+  it('focuses search when positioned and leaves outside focus and clicks alone', async () => {
+    await act(async () => root.render(<Harness />));
+    const search = document.querySelector<HTMLInputElement>('input[type="search"]')!;
+    expect(document.activeElement).toBe(search);
+    act(() => search.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true })));
+    expect(container.querySelector('[data-testid="branch-trigger"]')?.getAttribute('aria-expanded')).toBe('true');
+
+    const trigger = container.querySelector<HTMLButtonElement>('[data-testid="branch-trigger"]')!;
+    const focusTrigger = vi.spyOn(trigger, 'focus');
+    const outside = container.querySelector('input')!;
+    const onClick = vi.fn();
+    outside.addEventListener('click', onClick);
+    act(() => {
+      outside.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }));
+      outside.focus();
+      outside.click();
+    });
+    expect(document.activeElement).toBe(outside);
+    expect(focusTrigger).not.toHaveBeenCalled();
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('preserves IME Escape and restores the branch trigger on ordinary Escape', async () => {
+    await act(async () => root.render(<Harness />));
+    const search = document.querySelector<HTMLInputElement>('input[type="search"]')!;
+    const trigger = container.querySelector<HTMLButtonElement>('[data-testid="branch-trigger"]')!;
+    act(() => search.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', isComposing: true, bubbles: true })));
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    act(() => search.dispatchEvent(new CompositionEvent('compositionstart', { bubbles: true })));
+    const composingEscape = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    act(() => search.dispatchEvent(composingEscape));
+    expect(composingEscape.defaultPrevented).toBe(false);
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+
+    act(() => search.dispatchEvent(new CompositionEvent('compositionend', { bubbles: true })));
+    act(() => search.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('closes on Tab without cancelling the page tab sequence', async () => {
+    await act(async () => root.render(<Harness />));
+    const search = document.querySelector<HTMLInputElement>('input[type="search"]')!;
+    const trigger = container.querySelector<HTMLButtonElement>('[data-testid="branch-trigger"]')!;
+    const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true });
+    act(() => search.dispatchEvent(event));
+    expect(event.defaultPrevented).toBe(false);
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  describe('motion lifecycle', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+      const media = new EventTarget();
+      Object.defineProperty(media, 'matches', { value: false });
+      vi.stubGlobal('matchMedia', () => media);
+      vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+        const anchor = this.getAttribute('data-testid') === 'branch-trigger';
+        return { x: 100, y: anchor ? 460 : 100, left: 100, top: anchor ? 460 : 100,
+          width: anchor ? 80 : 280, height: anchor ? 18 : 326,
+          right: anchor ? 180 : 380, bottom: anchor ? 478 : 426, toJSON: () => ({}) } as DOMRect;
+      });
+    });
+    afterEach(() => vi.useRealTimers());
+
+    async function openPicker(blockMessagePointer = false) {
+      await act(async () => root.render(<Harness initiallyOpen={false} blockMessagePointer={blockMessagePointer} />));
+      const trigger = container.querySelector<HTMLButtonElement>('[data-testid="branch-trigger"]')!;
+      await act(async () => { trigger.focus(); trigger.click(); });
+      const panel = document.querySelector<HTMLElement>('[data-testid="branch-quick-switch"]')!;
+      const layer = panel.parentElement!;
+      expect(layer.dataset.state).toBe('entering');
+      act(() => vi.advanceTimersByTime(48));
+      expect(layer.dataset.state).toBe('entered');
+      return { trigger, panel, layer, search: panel.querySelector('input')! };
+    }
+
+    it('keeps exit geometry and filtered content until unmount, with no second press', async () => {
+      const { trigger, panel, layer, search } = await openPicker(true);
+      act(() => {
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(search, 'feature');
+        search.dispatchEvent(new Event('input', { bubbles: true }));
+      });
+      const blank = container.querySelector('[data-testid="message-blank"]')!;
+      act(() => blank.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true })));
+      expect(trigger.getAttribute('aria-expanded')).toBe('false');
+      expect(layer.dataset.state).toBe('exiting');
+      expect(layer.hasAttribute('inert')).toBe(true);
+      expect(layer.getAttribute('aria-hidden')).toBe('true');
+      expect(layer.style.visibility).toBe('visible');
+      expect(layer.style.bottom).toBe('315px');
+      expect(search.value).toBe('feature');
+      expect(panel.querySelector('[data-testid="branch-quick-switch-option-main"]')).toBeNull();
+      act(() => vi.advanceTimersByTime(99));
+      expect(layer.isConnected).toBe(true);
+      act(() => vi.advanceTimersByTime(1));
+      expect(layer.isConnected).toBe(false);
+      await act(async () => trigger.click());
+      expect(document.querySelector<HTMLInputElement>('input[type="search"]')?.value).toBe('');
+    });
+
+    it('treats the trigger as inside and reverses an interrupted exit on the same surface', async () => {
+      const { trigger, panel, layer, search } = await openPicker();
+      act(() => trigger.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true })));
+      expect(trigger.getAttribute('aria-expanded')).toBe('true');
+      act(() => trigger.click());
+      expect(layer.dataset.state).toBe('exiting');
+      act(() => vi.advanceTimersByTime(50));
+      await act(async () => trigger.click());
+      expect(layer.dataset.state).toBe('entered');
+      expect(layer.hasAttribute('inert')).toBe(false);
+      expect(document.activeElement).toBe(search);
+      act(() => vi.advanceTimersByTime(150));
+      expect(document.querySelector('[data-testid="branch-quick-switch"]')).toBe(panel);
+      expect(layer.style.bottom).toBe('315px');
+    });
+  });
+
   it('checks out a selected branch and publishes the shared branch-change event', async () => {
     const onSwitchSuccess = vi.fn();
     mocks.checkoutBranch.mockResolvedValue({ success: true });
diff --git a/src/web-ui/src/tools/git/components/BranchQuickSwitch.tsx b/src/web-ui/src/tools/git/components/BranchQuickSwitch.tsx
index 292814070b..2cad988557 100644
--- a/src/web-ui/src/tools/git/components/BranchQuickSwitch.tsx
+++ b/src/web-ui/src/tools/git/components/BranchQuickSwitch.tsx
@@ -3,6 +3,7 @@
 import React, {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -23,6 +24,8 @@ import { OverflowText,
   DialogHeader,
   DialogHeading,
   DialogTitle,
+  useDismissibleLayer,
+  usePresence,
 } from '@openbitfun/ui';
 import { Loader2 } from 'lucide-react';
 
@@ -53,6 +56,7 @@ interface BranchSwitchBlocker {
 }
 
 export interface BranchQuickSwitchProps {
+  id?: string;
   isOpen: boolean;
   onClose: () => void;
   repositoryPath: string;
@@ -66,6 +70,7 @@ const branchListFromCache = (repositoryPath: string): GitBranch[] | undefined =>
 );
 
 export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
+  id,
   isOpen,
   onClose,
   repositoryPath,
@@ -87,11 +92,13 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
   const [commitError, setCommitError] = useState<string | null>(null);
   const [commitCreated, setCommitCreated] = useState(false);
   const [isCommitting, setIsCommitting] = useState(false);
+  const [inputCompositionActive, setInputCompositionActive] = useState(false);
+  const { present, state: phase } = usePresence(isOpen, 100);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const commitInputRef = useRef<HTMLInputElement>(null);
   const conflictConfirmRef = useRef<HTMLButtonElement>(null);
-  const inputCompositionActiveRef = useRef(false);
+  const layerRef = useRef<HTMLDivElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const switchInFlightRef = useRef(false);
@@ -109,15 +116,36 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
   }, [branches, searchTerm]);
 
   const popoverLayout = useAnchoredPopoverPosition({
-    open: isOpen,
+    open: present,
     anchorRef,
-    popoverRef: panelRef,
+    popoverRef: layerRef,
     preferredPlacement: 'top',
     alignment: 'start',
     gap: 7,
     layoutRevision: `${isLoading}:${loadFailed}:${filteredBranches.length}`,
   });
 
+  const closePicker = useCallback((restoreFocus = true) => {
+    const panel = panelRef.current;
+    // Async checkout must not take focus back after the user left the picker.
+    if (restoreFocus && panel?.contains(panel.ownerDocument.activeElement)) {
+      anchorRef.current?.focus({ preventScroll: true });
+    }
+    onClose();
+  }, [anchorRef, onClose]);
+
+  useDismissibleLayer({
+    enabled: isOpen,
+    layerRef,
+    branchRefs: [anchorRef],
+    dismissOnEscape: !inputCompositionActive,
+    onDismiss: reason => closePicker(reason !== 'pointer-outside'),
+  });
+  const focusReady = isOpen && present && Boolean(popoverLayout);
+  useLayoutEffect(() => {
+    if (focusReady) inputRef.current?.focus({ preventScroll: true });
+  }, [focusReady]);
+
   const loadBranches = useCallback(async () => {
     setIsLoading(true);
     setLoadFailed(false);
@@ -150,15 +178,16 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
   }, [repositoryPath]);
 
   useEffect(() => {
-    if (!isOpen) {
+    if (!present) {
       setSearchTerm('');
       setSelectedIndex(0);
-      return;
+      setInputCompositionActive(false);
     }
+  }, [present]);
 
+  useEffect(() => {
+    if (!isOpen) return;
     void loadBranches();
-    const timer = window.setTimeout(() => inputRef.current?.focus(), 50);
-    return () => window.clearTimeout(timer);
   }, [isOpen, loadBranches]);
 
   useEffect(() => {
@@ -169,30 +198,6 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
     setCommitCreated(false);
   }, [repositoryPath]);
 
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target as Node;
-      if (
-        !panelRef.current?.contains(target)
-        && !anchorRef.current?.contains(target)
-      ) {
-        onClose();
-      }
-    };
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onClose();
-    };
-
-    document.addEventListener('pointerdown', handlePointerDown);
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('pointerdown', handlePointerDown);
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [anchorRef, isOpen, onClose]);
-
   useEffect(() => {
     setSelectedIndex(0);
   }, [filteredBranches.length, searchTerm]);
@@ -229,8 +234,8 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
     setCommitError(null);
     setCommitCreated(false);
     onSwitchSuccess?.(branchName);
-    onClose();
-  }, [onClose, onSwitchSuccess, repositoryPath, t]);
+    closePicker();
+  }, [closePicker, onSwitchSuccess, repositoryPath, t]);
 
   const loadBlockerStats = useCallback(async (targetBranch: string, files: string[]) => {
     if (files.length === 0) return;
@@ -268,7 +273,7 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
       setCommitMessage('');
       setCommitError(null);
       setCommitCreated(false);
-      onClose();
+      closePicker();
       void loadBlockerStats(targetBranch, files);
       return;
     }
@@ -284,7 +289,7 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
       title: t('quickSwitch.errors.title'),
       duration: 5000,
     });
-  }, [loadBlockerStats, onClose, repositoryPath, t]);
+  }, [closePicker, loadBlockerStats, repositoryPath, t]);
 
   const handleSwitchBranch = useCallback(async (branchName: string) => {
     if (
@@ -315,11 +320,16 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
   const handleListKeyDown = useCallback((event: React.KeyboardEvent) => {
     if (
       (event.key === 'Enter' || event.key === 'Escape')
-      && isImeOwnedKeyboardEvent(event, inputCompositionActiveRef.current)
+      && isImeOwnedKeyboardEvent(event, inputCompositionActive)
     ) {
       event.stopPropagation();
       return;
     }
+    if (event.key === 'Tab') {
+      // Resume the page's tab order at the trigger, outside the portal.
+      closePicker();
+      return;
+    }
     if (filteredBranches.length === 0) return;
 
     if (event.key === 'ArrowDown') {
@@ -333,7 +343,7 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
       const selected = filteredBranches[selectedIndex];
       if (selected && !selected.current) void handleSwitchBranch(selected.name);
     }
-  }, [filteredBranches, handleSwitchBranch, selectedIndex]);
+  }, [closePicker, filteredBranches, handleSwitchBranch, inputCompositionActive, selectedIndex]);
 
   const closeRecoveryDialogs = useCallback(() => {
     if (isCommitting) return;
@@ -417,21 +427,18 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
     t,
   ]);
 
-  const popover = isOpen ? (
+  const popover = present ? (
     <div
+      id={id}
       ref={panelRef}
       className="branch-quick-switch"
       data-openbitfun-product-component="branch-quick-switch"
       data-openbitfun-product-part="root"
-      data-openbitfun-placement={popoverLayout?.placement ?? 'top'}
       data-testid="branch-quick-switch"
+      data-motion="presence"
       role="dialog"
+      aria-modal={false}
       aria-label={t('quickSwitch.menuLabel')}
-      style={{
-        top: `${popoverLayout?.top ?? 0}px`,
-        left: `${popoverLayout?.left ?? 0}px`,
-        visibility: popoverLayout ? 'visible' : 'hidden',
-      }}
       onKeyDown={handleListKeyDown}
     >
       <div
@@ -447,12 +454,8 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
           placeholder={t('quickSwitch.searchPlaceholder')}
           value={searchTerm}
           onValueChange={setSearchTerm}
-          onCompositionStart={() => {
-            inputCompositionActiveRef.current = true;
-          }}
-          onCompositionEnd={() => {
-            inputCompositionActiveRef.current = false;
-          }}
+          onCompositionStart={() => setInputCompositionActive(true)}
+          onCompositionEnd={() => setInputCompositionActive(false)}
           data-openbitfun-product-component="branch-quick-switch"
           data-openbitfun-product-part="input"
         />
@@ -517,7 +520,27 @@ export const BranchQuickSwitch: React.FC<BranchQuickSwitchProps> = ({
 
   return (
     <>
-      {popover ? createPortal(popover, getAppearanceOverlayHost()) : null}
+      {popover && createPortal(
+        <div
+          ref={layerRef}
+          className="branch-quick-switch__layer"
+          data-openbitfun-native-webview-occlusion
+          data-openbitfun-placement={popoverLayout?.placement ?? 'top'}
+          data-state={phase}
+          data-motion="presence"
+          aria-hidden={!isOpen || undefined}
+          {...(!isOpen ? { inert: '' } : {})}
+          style={{
+            top: popoverLayout?.bottom === undefined ? `${popoverLayout?.top ?? 0}px` : undefined,
+            bottom: popoverLayout?.bottom === undefined ? undefined : `${popoverLayout.bottom}px`,
+            left: `${popoverLayout?.left ?? 0}px`,
+            visibility: popoverLayout ? 'visible' : 'hidden',
+          }}
+        >
+          {popover}
+        </div>,
+        getAppearanceOverlayHost(),
+      )}
 
       <Dialog
         open={!!blocker && !commitDialogOpen}

From bc09e0ef40558a7d0192db390835756ba2d46c40 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Fri, 18 Sep 2026 12:08:03 +0800
Subject: [PATCH 2/2] fix(ui): preserve committed presence exits

---
 .../packages/ui/src/overlay/usePresence.ts    | 75 +++++++++++++++----
 .../review-platform/ReviewPlatformPanel.scss  |  8 +-
 src/web-ui/src/shared/ui/usePresence.test.tsx | 35 ++++++++-
 3 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/design-system/packages/ui/src/overlay/usePresence.ts b/design-system/packages/ui/src/overlay/usePresence.ts
index 145ad1e0dc..d5bbe029b1 100644
--- a/design-system/packages/ui/src/overlay/usePresence.ts
+++ b/design-system/packages/ui/src/overlay/usePresence.ts
@@ -11,34 +11,82 @@ export interface PresenceSnapshot {
 export function usePresence(open: boolean, exitDurationMs: number): PresenceSnapshot {
   const [present, setPresent] = useState(open);
   const [state, setState] = useState<PresenceState>(open ? "entered" : "exiting");
+  const presentRef = useRef(present);
   const stateRef = useRef(state);
   stateRef.current = state;
+  const previousOpenRef = useRef(false);
+  const exitDeadlineRef = useRef<number | null>(null);
   const reducedMotion = useReducedMotion();
+  // `useReducedMotion` deliberately returns true for SSR. Presence effects only
+  // run in a browser, so collapse timing only when the browser explicitly
+  // exposes and matches the preference. This also keeps non-visual DOM hosts
+  // on the ordinary mount and exit lifecycle.
+  const prefersReducedMotion = typeof window !== "undefined"
+    && typeof window.matchMedia === "function"
+    && reducedMotion;
 
   useEffect(() => {
-    if (reducedMotion) {
+    const wasOpen = previousOpenRef.current;
+    previousOpenRef.current = open;
+    const updateState = (next: PresenceState) => {
+      stateRef.current = next;
+      setState(next);
+    };
+
+    const finishExit = () => {
+      exitDeadlineRef.current = null;
+      presentRef.current = false;
+      setPresent(false);
+    };
+
+    // Once an exit has committed, keep its original deadline and geometry.
+    // A motion-preference change may settle an entrance, but must not tear down
+    // content that its owner is retaining until `onExitComplete`.
+    if (!open && presentRef.current && stateRef.current === "exiting" && exitDeadlineRef.current !== null) {
+      const view = typeof window === "undefined" ? null : window;
+      if (!view) {
+        finishExit();
+        return;
+      }
+      const remainingMs = Math.max(0, exitDeadlineRef.current - Date.now());
+      const timer = view.setTimeout(finishExit, remainingMs);
+      return () => view.clearTimeout(timer);
+    }
+
+    if (prefersReducedMotion) {
+      exitDeadlineRef.current = null;
+      presentRef.current = open;
       setPresent(open);
-      setState(open ? "entered" : "exiting");
+      updateState(open ? "entered" : "exiting");
       return;
     }
     if (open) {
-      setPresent(true);
+      exitDeadlineRef.current = null;
+      const wasPresent = presentRef.current;
+      if (!wasPresent) {
+        presentRef.current = true;
+        setPresent(true);
+      }
       // An interrupted exit still has a rendered surface. Reverse its transition
       // from the current painted value instead of resetting to the entrance pose.
-      if (present && stateRef.current === "exiting") {
-        setState("entered");
+      if (wasPresent && stateRef.current === "exiting") {
+        updateState("entered");
         return;
       }
-      setState("entering");
+      // A preference change from reduced to ordinary motion must not replay an
+      // entrance on a surface that is already open. The `entering` branch also
+      // lets React strict effects cancel and restart the two-frame handoff.
+      if (wasOpen && stateRef.current !== "entering") return;
+      updateState("entering");
       const view = typeof window === "undefined" ? null : window;
       if (!view) {
-        setState("entered");
+        updateState("entered");
         return;
       }
       let firstFrame = 0;
       let secondFrame = 0;
       firstFrame = view.requestAnimationFrame(() => {
-        secondFrame = view.requestAnimationFrame(() => setState("entered"));
+        secondFrame = view.requestAnimationFrame(() => updateState("entered"));
       });
       return () => {
         view.cancelAnimationFrame(firstFrame);
@@ -46,16 +94,17 @@ export function usePresence(open: boolean, exitDurationMs: number): PresenceSnap
       };
     }
 
-    if (!present) return;
-    setState("exiting");
+    if (!presentRef.current) return;
+    updateState("exiting");
+    exitDeadlineRef.current = Date.now() + exitDurationMs;
     const view = typeof window === "undefined" ? null : window;
     if (!view) {
-      setPresent(false);
+      finishExit();
       return;
     }
-    const timer = view.setTimeout(() => setPresent(false), exitDurationMs);
+    const timer = view.setTimeout(finishExit, exitDurationMs);
     return () => view.clearTimeout(timer);
-  }, [exitDurationMs, open, present, reducedMotion]);
+  }, [exitDurationMs, open, prefersReducedMotion]);
 
   return { present, state };
 }
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
index e2d16417c2..1831436f3c 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
@@ -201,13 +201,13 @@
   }
 
   &__diff-line--add {
-    color: var(--openbitfun-color-status-success-content);
-    background: var(--openbitfun-color-status-success-surface);
+    color: var(--openbitfun-color-code-change-added);
+    background: color-mix(in srgb, var(--openbitfun-color-code-change-added) 10%, transparent);
   }
 
   &__diff-line--delete {
-    color: var(--openbitfun-color-status-danger-content);
-    background: var(--openbitfun-color-status-danger-surface);
+    color: var(--openbitfun-color-code-change-removed);
+    background: color-mix(in srgb, var(--openbitfun-color-code-change-removed) 10%, transparent);
   }
 
   &__diff-line--meta {
diff --git a/src/web-ui/src/shared/ui/usePresence.test.tsx b/src/web-ui/src/shared/ui/usePresence.test.tsx
index 4bb1017ff6..fa67f3763b 100644
--- a/src/web-ui/src/shared/ui/usePresence.test.tsx
+++ b/src/web-ui/src/shared/ui/usePresence.test.tsx
@@ -53,7 +53,7 @@ describe('overlay presence', () => {
     expect(host.childElementCount).toBe(0);
   });
 
-  it('settles an in-progress exit when the motion preference changes', () => {
+  it('keeps an in-progress exit on its committed deadline when the motion preference changes', () => {
     const media = new EventTarget();
     let reduced = false;
     Object.defineProperty(media, 'matches', { get: () => reduced });
@@ -61,7 +61,38 @@ describe('overlay presence', () => {
     render(true);
     act(() => vi.advanceTimersByTime(48));
     render(false);
-    act(() => { reduced = true; media.dispatchEvent(new Event('change')); });
+    act(() => {
+      vi.advanceTimersByTime(99);
+      reduced = true;
+      media.dispatchEvent(new Event('change'));
+    });
+    expect(host.childElementCount).toBe(1);
+    act(() => vi.advanceTimersByTime(1));
     expect(host.childElementCount).toBe(0);
   });
+
+  it('does not replay an entrance when reduced motion is disabled on an open surface', () => {
+    const media = new EventTarget();
+    let reduced = false;
+    Object.defineProperty(media, 'matches', { get: () => reduced });
+    vi.stubGlobal('matchMedia', () => media);
+    render(true);
+    act(() => vi.advanceTimersByTime(48));
+    expect(host.firstElementChild?.getAttribute('data-state')).toBe('entered');
+    act(() => { reduced = true; media.dispatchEvent(new Event('change')); });
+    act(() => { reduced = false; media.dispatchEvent(new Event('change')); });
+    expect(host.firstElementChild?.getAttribute('data-state')).toBe('entered');
+  });
+
+  it('keeps the ordinary exit lifecycle when matchMedia is unavailable', () => {
+    vi.stubGlobal('matchMedia', undefined);
+    render(true);
+    act(() => vi.advanceTimersByTime(48));
+    const surface = host.firstElementChild!;
+    render(false);
+    expect(surface.getAttribute('data-state')).toBe('exiting');
+    expect(surface.isConnected).toBe(true);
+    act(() => vi.advanceTimersByTime(100));
+    expect(surface.isConnected).toBe(false);
+  });
 });