From bc930882bef5a6681efe295ad83bc30658834041 Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Mon, 6 Jul 2026 15:13:48 +0200
Subject: [PATCH 1/4] visual tweaks

---
 .../session/composer/session-revert-dock.tsx  | 56 +++++++++++--------
 packages/ui/src/v2/components/icon.tsx        |  4 ++
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/packages/app/src/pages/session/composer/session-revert-dock.tsx b/packages/app/src/pages/session/composer/session-revert-dock.tsx
index 5a5b8a9cd457..467e63c1f16a 100644
--- a/packages/app/src/pages/session/composer/session-revert-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-revert-dock.tsx
@@ -1,8 +1,8 @@
 import { For, Show, createEffect, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
-import { Button } from "@opencode-ai/ui/button"
-import { DockTray } from "@opencode-ai/ui/dock-surface"
-import { IconButton } from "@opencode-ai/ui/icon-button"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { useLanguage } from "@/context/language"
 
 export function SessionRevertDock(props: {
@@ -32,9 +32,12 @@ export function SessionRevertDock(props: {
   const preview = createMemo(() => props.items[0]?.text ?? "")
 
   return (
-    <DockTray data-component="session-revert-dock">
+    <div
+      data-component="session-revert-dock"
+      class="w-full overflow-hidden rounded-xl border-[0.5px] border-v2-border-border-base bg-v2-background-bg-layer-01"
+    >
       <div
-        class="pl-3 pr-2 py-2 flex items-center gap-2"
+        class="flex h-[42px] items-center gap-2 pl-4 pr-2"
         role="button"
         tabIndex={0}
         onClick={toggle}
@@ -44,16 +47,27 @@ export function SessionRevertDock(props: {
           toggle()
         }}
       >
-        <span class="shrink-0 text-14-regular text-text-strong cursor-default">{label()}</span>
+        <IconV2 name="outline-reset" size="normal" class="text-v2-icon-icon-muted" />
+        <span
+          classList={{
+            "shrink-0 cursor-default text-[13px] leading-5 tracking-[-0.04px]": true,
+            "font-[530] text-v2-text-text-base": !store.collapsed,
+            "font-[440] text-v2-text-text-muted": store.collapsed,
+          }}
+        >
+          {label()}
+        </span>
         <Show when={store.collapsed && preview()}>
-          <span class="min-w-0 flex-1 truncate text-14-regular text-text-base cursor-default">{preview()}</span>
+          <span class="min-w-0 flex-1 truncate cursor-default text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint">
+            {preview()}
+          </span>
         </Show>
         <div class="ml-auto shrink-0">
-          <IconButton
+          <IconButtonV2
             data-collapsed={store.collapsed ? "true" : "false"}
-            icon="chevron-down"
-            size="normal"
-            variant="ghost"
+            icon={<IconV2 name="outline-chevron-down" size="small" />}
+            size="large"
+            variant="ghost-muted"
             style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
             onMouseDown={(event) => {
               event.preventDefault()
@@ -70,30 +84,28 @@ export function SessionRevertDock(props: {
         </div>
       </div>
 
-      <Show when={store.collapsed}>
-        <div class="h-5" aria-hidden="true" />
-      </Show>
-
       <Show when={!store.collapsed}>
-        <div class="px-3 pb-7 flex flex-col gap-1.5 max-h-42 overflow-y-auto no-scrollbar">
+        <div class="flex max-h-42 flex-col gap-2 overflow-y-auto px-4 pb-3 no-scrollbar">
           <For each={props.items}>
             {(item) => (
-              <div class="flex items-center gap-2 min-w-0 py-1">
-                <span class="min-w-0 flex-1 truncate text-13-regular text-text-strong">{item.text}</span>
-                <Button
+              <div class="flex h-6 min-w-0 items-center gap-2">
+                <span class="min-w-0 flex-1 truncate text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
+                  {item.text}
+                </span>
+                <ButtonV2
                   size="small"
-                  variant="secondary"
+                  variant="neutral"
                   class="shrink-0"
                   disabled={props.disabled || !!props.restoring}
                   onClick={() => props.onRestore(item.id)}
                 >
                   {language.t("session.revertDock.restore")}
-                </Button>
+                </ButtonV2>
               </div>
             )}
           </For>
         </div>
       </Show>
-    </DockTray>
+    </div>
   )
 }
diff --git a/packages/ui/src/v2/components/icon.tsx b/packages/ui/src/v2/components/icon.tsx
index d9bd04e48fab..b0b70bf37f90 100644
--- a/packages/ui/src/v2/components/icon.tsx
+++ b/packages/ui/src/v2/components/icon.tsx
@@ -133,6 +133,10 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,
   },
+  "outline-reset": {
+    viewBox: "0 0 20 20",
+    body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,
+  },
   archive: {
     viewBox: "0 0 16 16",
     body: `<path d="M13.1112 13.5555V14.0555H13.6112V13.5555H13.1112ZM2.889 13.5555H2.389L2.389 14.0555H2.889V13.5555ZM3.38901 5.55546L3.38901 5.05546L2.38901 5.05546L2.38901 5.55546L2.88901 5.55546L3.38901 5.55546ZM14.4446 2.44434H14.9446V1.94434L14.4446 1.94434L14.4446 2.44434ZM14.4446 5.55545L14.4446 6.05545L14.9446 6.05545V5.55545H14.4446ZM1.55566 5.55546L1.05566 5.55545L1.05566 6.05546L1.55566 6.05546L1.55566 5.55546ZM1.5557 2.44436L1.5557 1.94436L1.05571 1.94436L1.0557 2.44435L1.5557 2.44436ZM13.1112 5.55546H12.6112V13.5555H13.1112H13.6112V5.55546H13.1112ZM2.889 13.5555H3.389L3.38901 5.55546L2.88901 5.55546L2.38901 5.55546L2.389 13.5555H2.889ZM14.4446 2.44434H13.9446V5.55545H14.4446H14.9446V2.44434H14.4446ZM1.55566 5.55546L2.05566 5.55547L2.0557 2.44436L1.5557 2.44436L1.0557 2.44435L1.05566 5.55545L1.55566 5.55546ZM6.22234 8.22213V8.72213H9.7779V8.22213V7.72213H6.22234V8.22213ZM13.1112 13.5555V13.0555H2.889V13.5555V14.0555H13.1112V13.5555ZM1.5557 2.44436L1.5557 2.94436L14.4446 2.94434L14.4446 2.44434L14.4446 1.94434L1.5557 1.94436L1.5557 2.44436ZM14.4446 5.55545L14.4446 5.05545L1.55566 5.05546L1.55566 5.55546L1.55566 6.05546L14.4446 6.05545L14.4446 5.55545Z" fill="currentColor"/>`,

From c470f3d7618ee2035834888d6fe64fefa3018aed Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Mon, 6 Jul 2026 15:35:07 +0200
Subject: [PATCH 2/4] more tweaks

---
 .../composer/session-revert-dock.stories.tsx  | 103 ++++++++++++++++++
 .../session/composer/session-revert-dock.tsx  |  15 ++-
 .../.storybook/mocks/app/context/language.ts  |   5 +
 3 files changed, 118 insertions(+), 5 deletions(-)
 create mode 100644 packages/app/src/pages/session/composer/session-revert-dock.stories.tsx

diff --git a/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx b/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
new file mode 100644
index 000000000000..ffc92639e3c8
--- /dev/null
+++ b/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
@@ -0,0 +1,103 @@
+import { For } from "solid-js"
+import { createStore } from "solid-js/store"
+import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
+
+export default {
+  title: "Composer/Revert Dock",
+  id: "composer-revert-dock",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `### Overview
+Real \`SessionRevertDock\` from app code, rendered above a mock composer card.
+
+### Source path
+- \`packages/app/src/pages/session/composer/session-revert-dock.tsx\`
+
+### Why the mock composer
+The live composer overlaps the dock's bottom by 18px (\`session-composer-region-controller.ts\` \`lift()\`).
+The card below reproduces that overlap so the collapsed/expanded cutoff behavior can be verified in isolation.
+
+### Notes
+- \`onRestore\` only mutates local story state, so nothing in the real session is affected.
+- Click the header to expand/collapse. Click "Restore message" to remove a row.`,
+      },
+    },
+  },
+}
+
+const messages = [
+  "update current branch with latest changes from dev and fix conflicts if any",
+  "investigate why the chat input loses focus after sending a message",
+  "Debug why streaming responses sometimes duplicate the last token",
+  "suggest a better title for this PR based on the diff",
+  "add a storybook story for the revert dock",
+  "reduce re-renders in the timeline component",
+]
+
+const btn = (accent?: boolean) =>
+  ({
+    padding: "6px 12px",
+    "border-radius": "6px",
+    border: "1px solid var(--v2-border-border-base, #0000001a)",
+    background: accent ? "var(--v2-background-bg-contrast, #242424)" : "var(--v2-background-bg-base, #fff)",
+    color: accent ? "var(--v2-text-text-contrast, #fafafa)" : "var(--v2-text-text-base, #161616)",
+    cursor: "pointer",
+    "font-size": "13px",
+  }) as const
+
+function Stage(props: { count: number }) {
+  const seed = () => messages.slice(0, props.count).map((text, index) => ({ id: `rolled-${index}`, text }))
+  const [store, setStore] = createStore({ items: seed() })
+
+  const reset = () => setStore("items", seed())
+  const restore = (id: string) =>
+    setStore(
+      "items",
+      store.items.filter((item) => item.id !== id),
+    )
+
+  return (
+    <div style={{ display: "grid", gap: "16px", "max-width": "720px" }}>
+      <div style={{ display: "flex", gap: "8px" }}>
+        <button style={btn()} onClick={reset}>
+          Reset ({props.count})
+        </button>
+      </div>
+
+      {/* Reproduce the real composer stack: dock + card overlapping the dock's bottom by lift() = 18px */}
+      <div style={{ display: "flex", "flex-direction": "column" }}>
+        <SessionRevertDock items={store.items} onRestore={restore} />
+        <div
+          style={{ position: "relative", "z-index": 70, "margin-top": "-18px" }}
+          class="min-h-24 w-full rounded-[12px] border border-v2-border-border-base bg-v2-background-bg-base px-4 py-3 text-[13px] text-v2-text-text-faint"
+        >
+          Ask anything...
+        </div>
+      </div>
+
+      <div class="text-[12px] text-v2-text-text-faint">
+        Restored so far:{" "}
+        <For each={seed()}>
+          {(item) => <span>{store.items.some((current) => current.id === item.id) ? "" : `“${item.text}” `}</span>}
+        </For>
+      </div>
+    </div>
+  )
+}
+
+export const OneMessage = {
+  name: "1 rolled back",
+  render: () => <Stage count={1} />,
+}
+
+export const ThreeMessages = {
+  name: "3 rolled back",
+  render: () => <Stage count={3} />,
+}
+
+export const ManyMessages = {
+  name: "6 rolled back (scrolls)",
+  render: () => <Stage count={6} />,
+}
diff --git a/packages/app/src/pages/session/composer/session-revert-dock.tsx b/packages/app/src/pages/session/composer/session-revert-dock.tsx
index 467e63c1f16a..363bc4f190ca 100644
--- a/packages/app/src/pages/session/composer/session-revert-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-revert-dock.tsx
@@ -50,9 +50,9 @@ export function SessionRevertDock(props: {
         <IconV2 name="outline-reset" size="normal" class="text-v2-icon-icon-muted" />
         <span
           classList={{
-            "shrink-0 cursor-default text-[13px] leading-5 tracking-[-0.04px]": true,
-            "font-[530] text-v2-text-text-base": !store.collapsed,
-            "font-[440] text-v2-text-text-muted": store.collapsed,
+            "font-[440] shrink-0 cursor-default text-[13px] leading-5 tracking-[-0.04px]": true,
+            "text-v2-text-text-base": !store.collapsed,
+            "text-v2-text-text-muted": store.collapsed,
           }}
         >
           {label()}
@@ -84,12 +84,17 @@ export function SessionRevertDock(props: {
         </div>
       </div>
 
+      {/* Sacrificial space the composer overlaps via its negative lift (18px), so the header stays fully visible */}
+      <Show when={store.collapsed}>
+        <div class="h-[16px]" aria-hidden="true" />
+      </Show>
+
       <Show when={!store.collapsed}>
-        <div class="flex max-h-42 flex-col gap-2 overflow-y-auto px-4 pb-3 no-scrollbar">
+        <div class="flex max-h-42 flex-col gap-2 overflow-y-auto px-4 pt-px pb-6 no-scrollbar">
           <For each={props.items}>
             {(item) => (
               <div class="flex h-6 min-w-0 items-center gap-2">
-                <span class="min-w-0 flex-1 truncate text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
+                <span class="min-w-0 flex-1 truncate text-[13px] font-[400] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
                   {item.text}
                 </span>
                 <ButtonV2
diff --git a/packages/storybook/.storybook/mocks/app/context/language.ts b/packages/storybook/.storybook/mocks/app/context/language.ts
index df28d79fbdca..2510acc6f974 100644
--- a/packages/storybook/.storybook/mocks/app/context/language.ts
+++ b/packages/storybook/.storybook/mocks/app/context/language.ts
@@ -2,6 +2,11 @@ const dict: Record<string, string> = {
   "session.todo.title": "Todos",
   "session.todo.collapse": "Collapse todos",
   "session.todo.expand": "Expand todos",
+  "session.revertDock.summary.one": "{{count}} rolled back message",
+  "session.revertDock.summary.other": "{{count}} rolled back messages",
+  "session.revertDock.collapse": "Collapse rolled back messages",
+  "session.revertDock.expand": "Expand rolled back messages",
+  "session.revertDock.restore": "Restore message",
   "prompt.loading": "Loading prompt...",
   "prompt.placeholder.normal": "Ask anything...",
   "prompt.placeholder.simple": "Ask anything...",

From b9517f9c00ed7b11cc45cb36174220b03ae566be Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Mon, 6 Jul 2026 15:38:32 +0200
Subject: [PATCH 3/4] final tweak

---
 .../app/src/pages/session/composer/session-revert-dock.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/pages/session/composer/session-revert-dock.tsx b/packages/app/src/pages/session/composer/session-revert-dock.tsx
index 363bc4f190ca..869f85f59953 100644
--- a/packages/app/src/pages/session/composer/session-revert-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-revert-dock.tsx
@@ -90,7 +90,8 @@ export function SessionRevertDock(props: {
       </Show>
 
       <Show when={!store.collapsed}>
-        <div class="flex max-h-42 flex-col gap-2 overflow-y-auto px-4 pt-px pb-6 no-scrollbar">
+        {/* Scroll viewport ends above the composer; the 18px sacrificial below is what the composer overlaps */}
+        <div class="flex max-h-42 flex-col gap-2 overflow-y-auto px-4 pt-px pb-3 no-scrollbar">
           <For each={props.items}>
             {(item) => (
               <div class="flex h-6 min-w-0 items-center gap-2">
@@ -110,6 +111,7 @@ export function SessionRevertDock(props: {
             )}
           </For>
         </div>
+        <div class="h-[18px]" aria-hidden="true" />
       </Show>
     </div>
   )

From f146e6f4a62d05bf8796aad53f9d31fea164268d Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Mon, 6 Jul 2026 16:12:46 +0200
Subject: [PATCH 4/4] feat(app): restyle revert dock for v2

---
 .../composer/session-revert-dock.stories.tsx  |  21 +-
 .../session/composer/session-revert-dock.tsx  | 218 ++++++++++++------
 2 files changed, 162 insertions(+), 77 deletions(-)

diff --git a/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx b/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
index ffc92639e3c8..dd030870a15b 100644
--- a/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
+++ b/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
@@ -1,6 +1,7 @@
 import { For } from "solid-js"
 import { createStore } from "solid-js/store"
 import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
+import { SettingsProvider, useSettings } from "@/context/settings"
 
 export default {
   title: "Composer/Revert Dock",
@@ -19,6 +20,9 @@ Real \`SessionRevertDock\` from app code, rendered above a mock composer card.
 The live composer overlaps the dock's bottom by 18px (\`session-composer-region-controller.ts\` \`lift()\`).
 The card below reproduces that overlap so the collapsed/expanded cutoff behavior can be verified in isolation.
 
+### Layout split
+Use the **Layout** button to toggle \`newLayoutDesigns\` and preview both the v2 dock and the legacy (v1) \`DockTray\` fallback.
+
 ### Notes
 - \`onRestore\` only mutates local story state, so nothing in the real session is affected.
 - Click the header to expand/collapse. Click "Restore message" to remove a row.`,
@@ -48,9 +52,11 @@ const btn = (accent?: boolean) =>
   }) as const
 
 function Stage(props: { count: number }) {
+  const settings = useSettings()
   const seed = () => messages.slice(0, props.count).map((text, index) => ({ id: `rolled-${index}`, text }))
   const [store, setStore] = createStore({ items: seed() })
 
+  const v2 = () => settings.general.newLayoutDesigns()
   const reset = () => setStore("items", seed())
   const restore = (id: string) =>
     setStore(
@@ -64,6 +70,9 @@ function Stage(props: { count: number }) {
         <button style={btn()} onClick={reset}>
           Reset ({props.count})
         </button>
+        <button style={btn(v2())} onClick={() => settings.general.setNewLayoutDesigns(!v2())}>
+          Layout: {v2() ? "v2" : "v1"}
+        </button>
       </div>
 
       {/* Reproduce the real composer stack: dock + card overlapping the dock's bottom by lift() = 18px */}
@@ -87,17 +96,23 @@ function Stage(props: { count: number }) {
   )
 }
 
+const story = (count: number) => () => (
+  <SettingsProvider>
+    <Stage count={count} />
+  </SettingsProvider>
+)
+
 export const OneMessage = {
   name: "1 rolled back",
-  render: () => <Stage count={1} />,
+  render: story(1),
 }
 
 export const ThreeMessages = {
   name: "3 rolled back",
-  render: () => <Stage count={3} />,
+  render: story(3),
 }
 
 export const ManyMessages = {
   name: "6 rolled back (scrolls)",
-  render: () => <Stage count={6} />,
+  render: story(6),
 }
diff --git a/packages/app/src/pages/session/composer/session-revert-dock.tsx b/packages/app/src/pages/session/composer/session-revert-dock.tsx
index 869f85f59953..d8f022a53780 100644
--- a/packages/app/src/pages/session/composer/session-revert-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-revert-dock.tsx
@@ -1,9 +1,13 @@
 import { For, Show, createEffect, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
+import { Button } from "@opencode-ai/ui/button"
+import { DockTray } from "@opencode-ai/ui/dock-surface"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
 
 export function SessionRevertDock(props: {
   items: { id: string; text: string }[]
@@ -12,6 +16,7 @@ export function SessionRevertDock(props: {
   onRestore: (id: string) => void
 }) {
   const language = useLanguage()
+  const settings = useSettings()
   const [store, setStore] = createStore({
     collapsed: true,
   })
@@ -31,88 +36,153 @@ export function SessionRevertDock(props: {
   )
   const preview = createMemo(() => props.items[0]?.text ?? "")
 
+  const onHeaderKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Enter" && event.key !== " ") return
+    event.preventDefault()
+    toggle()
+  }
+
   return (
-    <div
-      data-component="session-revert-dock"
-      class="w-full overflow-hidden rounded-xl border-[0.5px] border-v2-border-border-base bg-v2-background-bg-layer-01"
+    <Show
+      when={settings.general.newLayoutDesigns()}
+      fallback={
+        <DockTray data-component="session-revert-dock">
+          <div
+            class="pl-3 pr-2 py-2 flex items-center gap-2"
+            role="button"
+            tabIndex={0}
+            onClick={toggle}
+            onKeyDown={onHeaderKeyDown}
+          >
+            <span class="shrink-0 text-14-regular text-text-strong cursor-default">{label()}</span>
+            <Show when={store.collapsed && preview()}>
+              <span class="min-w-0 flex-1 truncate text-14-regular text-text-base cursor-default">{preview()}</span>
+            </Show>
+            <div class="ml-auto shrink-0">
+              <IconButton
+                icon="chevron-down"
+                size="normal"
+                variant="ghost"
+                style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                }}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  toggle()
+                }}
+                aria-label={
+                  store.collapsed ? language.t("session.revertDock.expand") : language.t("session.revertDock.collapse")
+                }
+              />
+            </div>
+          </div>
+
+          <Show when={store.collapsed}>
+            <div class="h-5" aria-hidden="true" />
+          </Show>
+
+          <Show when={!store.collapsed}>
+            <div class="px-3 pb-7 flex flex-col gap-1.5 max-h-42 overflow-y-auto no-scrollbar">
+              <For each={props.items}>
+                {(item) => (
+                  <div class="flex items-center gap-2 min-w-0 py-1">
+                    <span class="min-w-0 flex-1 truncate text-13-regular text-text-strong">{item.text}</span>
+                    <Button
+                      size="small"
+                      variant="secondary"
+                      class="shrink-0"
+                      disabled={props.disabled || !!props.restoring}
+                      onClick={() => props.onRestore(item.id)}
+                    >
+                      {language.t("session.revertDock.restore")}
+                    </Button>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Show>
+        </DockTray>
+      }
     >
       <div
-        class="flex h-[42px] items-center gap-2 pl-4 pr-2"
-        role="button"
-        tabIndex={0}
-        onClick={toggle}
-        onKeyDown={(event) => {
-          if (event.key !== "Enter" && event.key !== " ") return
-          event.preventDefault()
-          toggle()
-        }}
+        data-component="session-revert-dock"
+        class="w-full overflow-hidden rounded-xl border-[0.5px] border-v2-border-border-base bg-v2-background-bg-layer-01"
       >
-        <IconV2 name="outline-reset" size="normal" class="text-v2-icon-icon-muted" />
-        <span
-          classList={{
-            "font-[440] shrink-0 cursor-default text-[13px] leading-5 tracking-[-0.04px]": true,
-            "text-v2-text-text-base": !store.collapsed,
-            "text-v2-text-text-muted": store.collapsed,
-          }}
+        <div
+          class="flex h-[42px] items-center gap-2 pl-4 pr-2"
+          role="button"
+          tabIndex={0}
+          onClick={toggle}
+          onKeyDown={onHeaderKeyDown}
         >
-          {label()}
-        </span>
-        <Show when={store.collapsed && preview()}>
-          <span class="min-w-0 flex-1 truncate cursor-default text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint">
-            {preview()}
-          </span>
-        </Show>
-        <div class="ml-auto shrink-0">
-          <IconButtonV2
-            data-collapsed={store.collapsed ? "true" : "false"}
-            icon={<IconV2 name="outline-chevron-down" size="small" />}
-            size="large"
-            variant="ghost-muted"
-            style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
-            onMouseDown={(event) => {
-              event.preventDefault()
-              event.stopPropagation()
-            }}
-            onClick={(event) => {
-              event.stopPropagation()
-              toggle()
+          <IconV2 name="outline-reset" size="normal" class="text-v2-icon-icon-muted" />
+          <span
+            classList={{
+              "font-[440] shrink-0 cursor-default text-[13px] leading-5 tracking-[-0.04px]": true,
+              "text-v2-text-text-base": !store.collapsed,
+              "text-v2-text-text-muted": store.collapsed,
             }}
-            aria-label={
-              store.collapsed ? language.t("session.revertDock.expand") : language.t("session.revertDock.collapse")
-            }
-          />
+          >
+            {label()}
+          </span>
+          <Show when={store.collapsed && preview()}>
+            <span class="min-w-0 flex-1 truncate cursor-default text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint">
+              {preview()}
+            </span>
+          </Show>
+          <div class="ml-auto shrink-0">
+            <IconButtonV2
+              icon={<IconV2 name="outline-chevron-down" size="small" />}
+              size="large"
+              variant="ghost-muted"
+              style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
+              onMouseDown={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+              }}
+              onClick={(event) => {
+                event.stopPropagation()
+                toggle()
+              }}
+              aria-label={
+                store.collapsed ? language.t("session.revertDock.expand") : language.t("session.revertDock.collapse")
+              }
+            />
+          </div>
         </div>
-      </div>
 
-      {/* Sacrificial space the composer overlaps via its negative lift (18px), so the header stays fully visible */}
-      <Show when={store.collapsed}>
-        <div class="h-[16px]" aria-hidden="true" />
-      </Show>
+        {/* Sacrificial space the composer overlaps via its negative lift (18px), so the header stays fully visible */}
+        <Show when={store.collapsed}>
+          <div class="h-[18px]" aria-hidden="true" />
+        </Show>
 
-      <Show when={!store.collapsed}>
-        {/* Scroll viewport ends above the composer; the 18px sacrificial below is what the composer overlaps */}
-        <div class="flex max-h-42 flex-col gap-2 overflow-y-auto px-4 pt-px pb-3 no-scrollbar">
-          <For each={props.items}>
-            {(item) => (
-              <div class="flex h-6 min-w-0 items-center gap-2">
-                <span class="min-w-0 flex-1 truncate text-[13px] font-[400] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
-                  {item.text}
-                </span>
-                <ButtonV2
-                  size="small"
-                  variant="neutral"
-                  class="shrink-0"
-                  disabled={props.disabled || !!props.restoring}
-                  onClick={() => props.onRestore(item.id)}
-                >
-                  {language.t("session.revertDock.restore")}
-                </ButtonV2>
-              </div>
-            )}
-          </For>
-        </div>
-        <div class="h-[18px]" aria-hidden="true" />
-      </Show>
-    </div>
+        <Show when={!store.collapsed}>
+          {/* Scroll viewport ends above the composer; the 18px sacrificial below is what the composer overlaps */}
+          <div class="flex max-h-42 flex-col gap-2 overflow-y-auto px-4 pt-px pb-3 no-scrollbar">
+            <For each={props.items}>
+              {(item) => (
+                <div class="flex h-6 min-w-0 items-center gap-2">
+                  <span class="min-w-0 flex-1 truncate text-[13px] font-[400] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
+                    {item.text}
+                  </span>
+                  <ButtonV2
+                    size="small"
+                    variant="neutral"
+                    class="shrink-0"
+                    disabled={props.disabled || !!props.restoring}
+                    onClick={() => props.onRestore(item.id)}
+                  >
+                    {language.t("session.revertDock.restore")}
+                  </ButtonV2>
+                </div>
+              )}
+            </For>
+          </div>
+          <div class="h-[18px]" aria-hidden="true" />
+        </Show>
+      </div>
+    </Show>
   )
 }