From 49cc872c4415f081b4208d16fd0d85e425a75eed Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 19 Feb 2026 15:02:45 -0600
Subject: chore: refactor composer/dock components (#14328)

---
 packages/ui/src/components/dock-prompt.tsx  |  7 ++--
 packages/ui/src/components/dock-surface.css | 23 ++++++++++++
 packages/ui/src/components/dock-surface.tsx | 54 +++++++++++++++++++++++++++++
 packages/ui/src/components/message-part.css | 24 -------------
 packages/ui/src/styles/index.css            |  1 +
 5 files changed, 82 insertions(+), 27 deletions(-)
 create mode 100644 packages/ui/src/components/dock-surface.css
 create mode 100644 packages/ui/src/components/dock-surface.tsx

(limited to 'packages/ui/src')

diff --git a/packages/ui/src/components/dock-prompt.tsx b/packages/ui/src/components/dock-prompt.tsx
index 4def4862f..d774e7f17 100644
--- a/packages/ui/src/components/dock-prompt.tsx
+++ b/packages/ui/src/components/dock-prompt.tsx
@@ -1,4 +1,5 @@
 import type { JSX } from "solid-js"
+import { DockShell, DockTray } from "./dock-surface"
 
 export function DockPrompt(props: {
   kind: "question" | "permission"
@@ -11,11 +12,11 @@ export function DockPrompt(props: {
 
   return (
     <div data-component="dock-prompt" data-kind={props.kind} ref={props.ref}>
-      <div data-slot={slot("body")}>
+      <DockShell data-slot={slot("body")}>
         <div data-slot={slot("header")}>{props.header}</div>
         <div data-slot={slot("content")}>{props.children}</div>
-      </div>
-      <div data-slot={slot("footer")}>{props.footer}</div>
+      </DockShell>
+      <DockTray data-slot={slot("footer")}>{props.footer}</DockTray>
     </div>
   )
 }
diff --git a/packages/ui/src/components/dock-surface.css b/packages/ui/src/components/dock-surface.css
new file mode 100644
index 000000000..fd3430446
--- /dev/null
+++ b/packages/ui/src/components/dock-surface.css
@@ -0,0 +1,23 @@
+[data-dock-surface="shell"] {
+  background-color: var(--surface-raised-stronger-non-alpha);
+  box-shadow: var(--shadow-xs-border);
+  position: relative;
+  z-index: 10;
+  border-radius: 12px;
+  overflow: clip;
+}
+
+[data-dock-surface="tray"] {
+  background-color: var(--background-base);
+  border: 1px solid var(--border-weak-base);
+  position: relative;
+  z-index: 0;
+  border-radius: 12px;
+  overflow: clip;
+}
+
+[data-dock-surface="tray"][data-dock-attach="top"] {
+  margin-top: -0.875rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
diff --git a/packages/ui/src/components/dock-surface.tsx b/packages/ui/src/components/dock-surface.tsx
new file mode 100644
index 000000000..1c4af2ed5
--- /dev/null
+++ b/packages/ui/src/components/dock-surface.tsx
@@ -0,0 +1,54 @@
+import { type ComponentProps, splitProps } from "solid-js"
+
+export interface DockTrayProps extends ComponentProps<"div"> {
+  attach?: "none" | "top"
+}
+
+export function DockShell(props: ComponentProps<"div">) {
+  const [split, rest] = splitProps(props, ["children", "class", "classList"])
+  return (
+    <div
+      {...rest}
+      data-dock-surface="shell"
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </div>
+  )
+}
+
+export function DockShellForm(props: ComponentProps<"form">) {
+  const [split, rest] = splitProps(props, ["children", "class", "classList"])
+  return (
+    <form
+      {...rest}
+      data-dock-surface="shell"
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </form>
+  )
+}
+
+export function DockTray(props: DockTrayProps) {
+  const [split, rest] = splitProps(props, ["attach", "children", "class", "classList"])
+  return (
+    <div
+      {...rest}
+      data-dock-surface="tray"
+      data-dock-attach={split.attach || "none"}
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index f83eae097..254281858 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -768,12 +768,6 @@
     flex: 1;
     min-height: 0;
     padding: 12px 12px 0;
-    background-color: var(--surface-raised-stronger-non-alpha);
-    border-radius: 12px;
-    box-shadow: var(--shadow-xs-border);
-    overflow: clip;
-    position: relative;
-    z-index: 10;
   }
 
   [data-slot="permission-header"] {
@@ -856,13 +850,7 @@
     justify-content: space-between;
     flex-shrink: 0;
     padding: 32px 8px 8px;
-    background-color: var(--background-base);
-    border: 1px solid var(--border-weak-base);
-    border-radius: 12px;
-    overflow: clip;
     margin-top: -24px;
-    position: relative;
-    z-index: 0;
   }
 
   [data-slot="permission-footer-actions"] {
@@ -892,12 +880,6 @@
     flex: 1;
     min-height: 0;
     padding: 8px 8px 0;
-    background-color: var(--surface-raised-stronger-non-alpha);
-    border-radius: 12px;
-    box-shadow: var(--shadow-xs-border);
-    overflow: clip;
-    position: relative;
-    z-index: 10;
   }
 
   [data-slot="question-header"] {
@@ -1181,13 +1163,7 @@
     justify-content: space-between;
     flex-shrink: 0;
     padding: 32px 8px 8px;
-    background-color: var(--background-base);
-    border: 1px solid var(--border-weak-base);
-    border-radius: 12px;
-    overflow: clip;
     margin-top: -24px;
-    position: relative;
-    z-index: 0;
   }
 
   [data-slot="question-footer-actions"] {
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index f0a1275c3..efe00e5f1 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -23,6 +23,7 @@
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
+@import "../components/dock-surface.css" layer(components);
 @import "../components/icon.css" layer(components);
 @import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-- 
cgit v1.2.3