From d6bf624f4fc75850823ada989e010b0b246fd87f Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Fri, 17 Jul 2026 15:27:20 +0200
Subject: [PATCH] feat(desktop): prevent overlapping composer borders

---
 packages/app/src/components/prompt-input-v2.tsx    |  2 ++
 packages/app/src/components/prompt-input.tsx       |  2 +-
 packages/app/src/pages/session.tsx                 |  1 +
 .../composer/session-revert-dock.stories.tsx       | 12 +++++++++---
 .../src/v2/components/prompt-input/index.tsx       |  9 +++++++--
 packages/ui/src/components/dock-surface.css        | 14 ++++++++++++++
 6 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/prompt-input-v2.tsx b/packages/app/src/components/prompt-input-v2.tsx
index 3f1bf9222f..d42a786b0d 100644
--- a/packages/app/src/components/prompt-input-v2.tsx
+++ b/packages/app/src/components/prompt-input-v2.tsx
@@ -36,6 +36,7 @@ import {
 export type PromptInputV2ComposerProps = {
   class?: string
   controller: PromptInputV2ComposerController
+  borderUnderlay?: boolean
   edit?: PromptInputProps["edit"]
   onEditLoaded?: PromptInputProps["onEditLoaded"]
 }
@@ -57,6 +58,7 @@ export function PromptInputV2Composer(props: PromptInputV2ComposerProps) {
     <div class="flex flex-col gap-3">
       <PromptInputV2
         controller={props.controller}
+        borderUnderlay={props.borderUnderlay}
         class={props.class}
         modelControl={
           <PromptInputV2ModelControl
diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 625ebdeca3..bcc5acc0bb 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -1460,10 +1460,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         t={(key) => language.t(key as Parameters<typeof language.t>[0])}
       />
       <DockShellForm
+        data-dock-border-underlay="legacy"
         onSubmit={handleSubmit}
         classList={{
           "group/prompt-input": true,
-          "focus-within:shadow-xs-border": true,
           "border-icon-info-active border-dashed": store.draggingType !== null,
           [props.class ?? ""]: !!props.class,
         }}
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index 2327cbf735..d6513f8d55 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -2265,6 +2265,7 @@ export default function Page() {
                     return (
                       <PromptInputV2Composer
                         controller={controller}
+                        borderUnderlay
                         edit={editingFollowup()}
                         onEditLoaded={clearFollowupEdit}
                       />
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 dd030870a1..ce3fd26b02 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,5 +1,6 @@
 import { For } from "solid-js"
 import { createStore } from "solid-js/store"
+import { DockShell } from "@opencode-ai/ui/dock-surface"
 import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
 import { SettingsProvider, useSettings } from "@/context/settings"
 
@@ -78,12 +79,17 @@ function Stage(props: { count: number }) {
       {/* 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
+        <DockShell
+          data-dock-border-underlay={v2() ? "v2" : "legacy"}
           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"
+          classList={{
+            "min-h-24 w-full rounded-[12px] px-4 py-3 text-[13px]": true,
+            "bg-v2-background-bg-base text-v2-text-text-faint": v2(),
+            "text-text-weak": !v2(),
+          }}
         >
           Ask anything...
-        </div>
+        </DockShell>
       </div>
 
       <div class="text-[12px] text-v2-text-text-faint">
diff --git a/packages/session-ui/src/v2/components/prompt-input/index.tsx b/packages/session-ui/src/v2/components/prompt-input/index.tsx
index ff33de56a8..30206cba26 100644
--- a/packages/session-ui/src/v2/components/prompt-input/index.tsx
+++ b/packages/session-ui/src/v2/components/prompt-input/index.tsx
@@ -36,6 +36,7 @@ export type PromptInputV2Props = {
   controller: PromptInputV2Interaction
   disabled?: boolean
   readOnly?: boolean
+  borderUnderlay?: boolean
   class?: string
   modelControl?: JSX.Element
 }
@@ -102,8 +103,12 @@ export function PromptInputV2(props: PromptInputV2Props) {
       </Show>
       <form
         data-component="prompt-input-v2"
-        class="group/prompt-input relative min-h-[96px] w-full rounded-xl bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]"
-        classList={{ "border border-v2-icon-icon-info border-dashed": state.drag === "active" }}
+        data-dock-border-underlay={props.borderUnderlay ? "v2" : undefined}
+        class="group/prompt-input relative min-h-[96px] w-full rounded-xl bg-v2-background-bg-base"
+        classList={{
+          "shadow-[var(--v2-elevation-raised)]": !props.borderUnderlay,
+          "border border-v2-icon-icon-info border-dashed": state.drag === "active",
+        }}
         onSubmit={(event) => {
           event.preventDefault()
           if (!props.disabled) props.controller.submit()
diff --git a/packages/ui/src/components/dock-surface.css b/packages/ui/src/components/dock-surface.css
index fd34304464..91fe502264 100644
--- a/packages/ui/src/components/dock-surface.css
+++ b/packages/ui/src/components/dock-surface.css
@@ -7,6 +7,20 @@
   overflow: clip;
 }
 
+[data-dock-border-underlay] {
+  /* Later shadows paint underneath, so this solid ring masks overlapping surfaces without changing border geometry. */
+  box-shadow:
+    var(--dock-shell-visual-shadow, var(--shadow-xs-border)),
+    0 0 0 var(--dock-shell-border-underlay-width, 1px)
+      var(--dock-shell-border-underlay-background, var(--surface-raised-stronger-non-alpha));
+}
+
+[data-dock-border-underlay="v2"] {
+  --dock-shell-visual-shadow: var(--v2-elevation-raised);
+  --dock-shell-border-underlay-width: 0.5px;
+  --dock-shell-border-underlay-background: var(--v2-background-bg-base);
+}
+
 [data-dock-surface="tray"] {
   background-color: var(--background-base);
   border: 1px solid var(--border-weak-base);