From 80091a9e37645702a011bd4e795e7733af964d59 Mon Sep 17 00:00:00 2001
From: Ronny <info@rdsport.de>
Date: Fri, 11 Sep 2026 17:59:07 +0200
Subject: [PATCH] fix(session-ui): keep permission actions inside the dock
 prompt shell

---
 .../session/composer/session-permission-dock.tsx   |  1 +
 .../src/components/dock-prompt.stories.tsx         |  3 ++-
 packages/session-ui/src/components/dock-prompt.tsx | 10 ++++++++--
 .../session-ui/src/components/message-part.css     | 14 +++++---------
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/pages/session/composer/session-permission-dock.tsx b/packages/app/src/pages/session/composer/session-permission-dock.tsx
index 35a62f75cfe3..de6e15a3e9f9 100644
--- a/packages/app/src/pages/session/composer/session-permission-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-permission-dock.tsx
@@ -22,6 +22,7 @@ export function SessionPermissionDock(props: {
   return (
     <DockPrompt
       kind="permission"
+      footerInside
       header={
         <div data-slot="permission-row" data-variant="header">
           <span data-slot="permission-icon">
diff --git a/packages/session-ui/src/components/dock-prompt.stories.tsx b/packages/session-ui/src/components/dock-prompt.stories.tsx
index f75b04bc21d1..785fbbdca006 100644
--- a/packages/session-ui/src/components/dock-prompt.stories.tsx
+++ b/packages/session-ui/src/components/dock-prompt.stories.tsx
@@ -9,7 +9,7 @@ Use with form controls or confirmation buttons in the footer.
 
 ### API
 - Required: \`kind\` (question | permission), \`header\`, \`children\`, \`footer\`.
-- Optional: \`ref\` for measuring or focus management.
+- Optional: \`ref\` for measuring or focus management and \`footerInside\` to keep actions in the shell.
 
 ### Variants and states
 - Question and permission layouts (data attributes).
@@ -55,6 +55,7 @@ export const Basic = story.Basic
 export const Permission = {
   args: {
     kind: "permission",
+    footerInside: true,
     header: "Allow access?",
     children: "This action needs permission to proceed.",
     footer: "Approve or deny",
diff --git a/packages/session-ui/src/components/dock-prompt.tsx b/packages/session-ui/src/components/dock-prompt.tsx
index 75563e47b862..db719e584c3d 100644
--- a/packages/session-ui/src/components/dock-prompt.tsx
+++ b/packages/session-ui/src/components/dock-prompt.tsx
@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js"
+import { Show, type JSX } from "solid-js"
 import { DockShell, DockTray } from "@opencode-ai/ui/dock-surface"
 
 export function DockPrompt(props: {
@@ -6,6 +6,7 @@ export function DockPrompt(props: {
   header: JSX.Element
   children: JSX.Element
   footer: JSX.Element
+  footerInside?: boolean
   ref?: (el: HTMLDivElement) => void
   onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>
 }) {
@@ -16,8 +17,13 @@ export function DockPrompt(props: {
       <DockShell data-slot={slot("body")}>
         <div data-slot={slot("header")}>{props.header}</div>
         <div data-slot={slot("content")}>{props.children}</div>
+        <Show when={props.footerInside}>
+          <div data-slot={slot("footer")}>{props.footer}</div>
+        </Show>
       </DockShell>
-      <DockTray data-slot={slot("footer")}>{props.footer}</DockTray>
+      <Show when={!props.footerInside}>
+        <DockTray data-slot={slot("footer")}>{props.footer}</DockTray>
+      </Show>
     </div>
   )
 }
diff --git a/packages/session-ui/src/components/message-part.css b/packages/session-ui/src/components/message-part.css
index ea73be7bff56..15c0cb95737c 100644
--- a/packages/session-ui/src/components/message-part.css
+++ b/packages/session-ui/src/components/message-part.css
@@ -738,7 +738,7 @@
     gap: 16px;
     flex: 1;
     min-height: 0;
-    padding: 12px 12px 0;
+    padding: 12px;
   }
 
   [data-slot="permission-header"] {
@@ -818,21 +818,17 @@
   [data-slot="permission-footer"] {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     flex-shrink: 0;
-    padding: 32px 8px 8px;
-    margin-top: -24px;
+    padding: 0;
   }
 
   [data-slot="permission-footer-actions"] {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 8px;
-
-    [data-component="button"] {
-      padding-left: 12px;
-      padding-right: 12px;
-    }
   }
 }