refactor(tui): demo shared DialogHeader architecture (upstream #55501)

packages/tui/src/component/dialog-debug.tsx

@@ -1,8 +1,7 @@
-import { TextAttributes } from "@opentui/core"
 import { createMemo, createSignal, For } from "solid-js"
 import { Keymap } from "../context/keymap"
 import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
+import { DialogHeader, useDialog } from "../ui/dialog"
 import { useRoute } from "../context/route"
 import { useLocal } from "../context/local"
 import { useClipboard } from "../context/clipboard"
@@ -54,14 +53,7 @@ export function DialogDebug() {
 
   return (
     <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.base} attributes={TextAttributes.BOLD}>
-          Debug
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      <DialogHeader title="Debug" />
       {/* No click-to-copy here: releasing a mouse selection must trigger the
           global copy-on-select so users can copy a single value, e.g. the session id. */}
       <box>

packages/tui/src/component/dialog-error-details.tsx

@@ -9,7 +9,7 @@ import { useRoute } from "../context/route"
 import { getScrollAcceleration } from "../util/scroll"
 import { useTheme } from "../context/theme"
 import { emptyPrompt } from "../prompt/history"
-import { dialogWidth, useDialog } from "../ui/dialog"
+import { DialogHeader, dialogWidth, useDialog } from "../ui/dialog"
 import { FilePath } from "../ui/file-path"
 import { useToast } from "../ui/toast"
 import { errorDetails } from "../util/error-details"
@@ -73,21 +73,22 @@ export function DialogErrorDetails(props: {
   return (
     <box paddingLeft={2} paddingRight={2} paddingBottom={1} gap={1}>
       <box>
-        <box flexDirection="row" gap={2}>
-          <text
-            attributes={TextAttributes.BOLD}
-            fg={theme.text.base}
-            flexGrow={1}
-            minWidth={0}
-            wrapMode="none"
-            truncate
-          >
-            {props.title}
-          </text>
-          <text fg={theme.text.muted} flexShrink={0} onMouseUp={props.onBack}>
-            esc
-          </text>
-        </box>
+        <DialogHeader
+          gap={2}
+          onClose={props.onBack}
+          titleView={
+            <text
+              attributes={TextAttributes.BOLD}
+              fg={theme.text.base}
+              flexGrow={1}
+              minWidth={0}
+              wrapMode="none"
+              truncate
+            >
+              {props.title}
+            </text>
+          }
+        />
         <Show when={props.source}>
           {(source) => (
             <FilePath

packages/tui/src/component/dialog-highlights.tsx

@@ -5,7 +5,7 @@ import { useConfig } from "../config"
 import { Keymap } from "../context/keymap"
 import type { TuiHighlight } from "../context/runtime"
 import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
+import { DialogHeader, useDialog } from "../ui/dialog"
 import { getScrollAcceleration } from "../util/scroll"
 
 export function DialogHighlights(props: { version: string; items: ReadonlyArray<TuiHighlight> }) {
@@ -34,14 +34,7 @@ export function DialogHighlights(props: { version: string; items: ReadonlyArray<
 
   return (
     <box gap={1} paddingBottom={1}>
-      <box flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-        <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
-          What's new in {props.version}
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      <DialogHeader paddingX={2} title={`What's new in ${props.version}`} />
       {/* The band owns the vertical padding so it stays visible while the highlights scroll. */}
       <box backgroundColor={overlay.background.raised.high} paddingTop={1} paddingBottom={1}>
         <scrollbox

packages/tui/src/component/dialog-image-preview.tsx

@@ -1,9 +1,8 @@
-import { TextAttributes } from "@opentui/core"
 import { useTerminalDimensions } from "@opentui/solid"
 import { createMemo, createSignal } from "solid-js"
 import { Keymap } from "../context/keymap"
 import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
+import { DialogHeader, useDialog } from "../ui/dialog"
 
 type ImagePreviewItem = Readonly<{
   uri: string
@@ -38,14 +37,7 @@ export function DialogImagePreview(props: { images: readonly ImagePreviewItem[];
 
   return (
     <box id="prompt-image-viewer" paddingLeft={2} paddingRight={2} paddingBottom={1} gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
-          Image {index() + 1} of {props.images.length}
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      <DialogHeader title={`Image ${index() + 1} of ${props.images.length}`} />
       <image
         id="prompt-image-viewer-image"
         source={current().uri}

packages/tui/src/component/dialog-integration.tsx

@@ -1,4 +1,4 @@
-import { ScrollBoxRenderable, TextareaRenderable, TextAttributes } from "@opentui/core"
+import { ScrollBoxRenderable, TextareaRenderable } from "@opentui/core"
 import { useTerminalDimensions } from "@opentui/solid"
 import type {
   ConnectionInfo,
@@ -21,7 +21,7 @@ import { useClient } from "../context/client"
 import { Keymap } from "../context/keymap"
 import { useLocation } from "../context/location"
 import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
+import { DialogHeader, useDialog } from "../ui/dialog"
 import { DialogPrompt } from "../ui/dialog-prompt"
 import { DialogSelect } from "../ui/dialog-select"
 import { Link } from "../ui/link"
@@ -510,14 +510,7 @@ function CommandView(props: { title: string; output: string; message: string })
   onMount(() => dialog.setSize("large"))
   return (
     <box gap={1} paddingBottom={1}>
-      <box flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-        <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
-          {props.title}
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc close
-        </text>
-      </box>
+      <DialogHeader paddingX={2} title={props.title} closeLabel="esc close" />
       <box
         backgroundColor={overlayTheme.background.raised.high}
         paddingLeft={2}
@@ -801,18 +794,10 @@ function OAuthView(props: {
   copy?: boolean
   open?: boolean
 }) {
-  const dialog = useDialog()
   const theme = useTheme().surface("dialog")
   return (
     <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
-          {props.title}
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      <DialogHeader title={props.title} />
       <Show when={props.url}>
         {(url) => (
           <box gap={1}>
@@ -986,14 +971,7 @@ function StringChoiceField(props: {
   }))
   return (
     <box paddingLeft={4} paddingRight={4} paddingBottom={1} gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.base} attributes={TextAttributes.BOLD}>
-          {formLabel(props.field)}
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => (store.editing ? back() : dialog.clear())}>
-          esc
-        </text>
-      </box>
+      <DialogHeader title={formLabel(props.field)} onClose={() => (store.editing ? back() : dialog.clear())} />
       <Show when={props.field.description}>{(description) => <text fg={theme.text.muted}>{description()}</text>}</Show>
       <scrollbox
         gap={1}

packages/tui/src/component/dialog-pair.tsx

@@ -4,7 +4,7 @@ import { createMemo, createResource, createSignal, For, Show } from "solid-js"
 import { renderUnicodeCompact } from "uqr"
 import { useClient } from "../context/client"
 import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
+import { DialogHeader, useDialog } from "../ui/dialog"
 import { Link } from "../ui/link"
 import { errorMessage } from "../util/error"
 
@@ -88,14 +88,7 @@ export function DialogPair() {
 
   return (
     <box paddingLeft={2} paddingRight={2} paddingBottom={1} gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.base} attributes={TextAttributes.BOLD}>
-          Pair
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      <DialogHeader title="Pair" />
       <Show
         when={loadError()}
         fallback={

packages/tui/src/component/dialog-shell-output.tsx

@@ -6,7 +6,7 @@ import stripAnsi from "strip-ansi"
 import { useClient } from "../context/client"
 import { Keymap } from "../context/keymap"
 import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
+import { DialogHeader, useDialog } from "../ui/dialog"
 
 const PAGE_BYTES = 64 * 1024
 
@@ -101,15 +101,16 @@ export function DialogShellOutput(props: { shell: ShellInfo; location: LocationR
 
   return (
     <box paddingLeft={2} paddingRight={2} paddingBottom={1} gap={1}>
-      <box flexDirection="row" gap={2}>
-        <text fg={theme.text.base} attributes={TextAttributes.BOLD} flexGrow={1}>
-          Shell output
-        </text>
+      <DialogHeader
+        gap={2}
+        titleView={
+          <text fg={theme.text.base} attributes={TextAttributes.BOLD} flexGrow={1}>
+            Shell output
+          </text>
+        }
+      >
         <text fg={theme.text.muted}>{status()}</text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      </DialogHeader>
       <text fg={theme.text.muted} maxHeight={3} wrapMode="word">
         {props.shell.command}
       </text>

packages/tui/src/component/dialog-status.tsx

@@ -1,13 +1,11 @@
-import { TextAttributes } from "@opentui/core"
 import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
+import { DialogHeader } from "../ui/dialog"
 import { useData } from "../context/data"
 import { For, Match, Switch, Show, createMemo } from "solid-js"
 
 export function DialogStatus() {
   const data = useData()
   const theme = useTheme().surface("dialog")
-  const dialog = useDialog()
 
   const mcp = createMemo(() => data.location.mcp.server.list() ?? [])
   const color = (status: string) => {
@@ -18,14 +16,7 @@ export function DialogStatus() {
   }
   return (
     <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.base} attributes={TextAttributes.BOLD}>
-          Status
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      <DialogHeader title="Status" />
       <Show when={mcp().length > 0} fallback={<text fg={theme.text.base}>No MCP servers</text>}>
         <box>
           <text fg={theme.text.base}>

packages/tui/src/component/dialog-update.tsx

@@ -1,9 +1,8 @@
-import { TextAttributes } from "@opentui/core"
 import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch } from "solid-js"
 import { Keymap } from "../context/keymap"
 import { useTheme } from "../context/theme"
 import type { UpdateState } from "../context/update-notification"
-import { useDialog } from "../ui/dialog"
+import { DialogHeader, useDialog } from "../ui/dialog"
 import { errorMessage } from "../util/error"
 import { Spinner } from "./spinner"
 
@@ -87,18 +86,15 @@ export function DialogUpdate(props: {
 
   return (
     <box paddingLeft={2} paddingRight={2} gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
-          {state().type === "installing"
+      <DialogHeader
+        title={
+          state().type === "installing"
             ? "Updating OpenCode"
             : state().type === "available" || state().type === "failed"
               ? "Update available"
-              : "Update"}
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+              : "Update"
+        }
+      />
       <box paddingBottom={1}>
         <Show when={state()} keyed>
           {(current) => (

packages/tui/src/component/dialog-workspace-file-changes.tsx

@@ -1,12 +1,11 @@
-import { TextAttributes } from "@opentui/core"
 import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
 import type { VcsFileStatus } from "@opencode/client"
 import { createMemo, For } from "solid-js"
 import { createStore } from "solid-js/store"
 import { FilePath } from "../ui/file-path"
 import { useTheme } from "../context/theme"
 import { useConfig } from "../config"
-import { useDialog, type DialogContext } from "../ui/dialog"
+import { DialogHeader, useDialog, type DialogContext } from "../ui/dialog"
 import { getScrollAcceleration } from "../util/scroll"
 
 const options = ["no", "yes"] as const
@@ -71,14 +70,7 @@ export function DialogWorkspaceFileChanges(props: {
 
   return (
     <box gap={1}>
-      <box flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-        <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
-          {props.title ?? "File Changes Found"}
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      <DialogHeader paddingX={2} title={props.title ?? "File Changes Found"} />
       <box paddingLeft={2} paddingRight={2}>
         <text fg={theme.text.muted} wrapMode="word">
           {props.message ?? "Do you want to move these changes with the session?"}

packages/tui/src/component/dialog-worktree-name.tsx

@@ -1,9 +1,9 @@
-import { InputRenderable, TextAttributes } from "@opentui/core"
+import { InputRenderable } from "@opentui/core"
 import { Slug } from "@opencode/core/util/slug"
 import { createSignal, onMount } from "solid-js"
 import { Keymap } from "../context/keymap"
 import { useTheme } from "../context/theme"
-import { useDialog, type DialogContext } from "../ui/dialog"
+import { DialogHeader, useDialog, type DialogContext } from "../ui/dialog"
 import { useConfig } from "../config"
 
 export function DialogWorktreeName(props: { onConfirm: (name: string) => void }) {
@@ -48,14 +48,7 @@ export function DialogWorktreeName(props: { onConfirm: (name: string) => void })
 
   return (
     <box paddingLeft={2} paddingRight={2} gap={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
-          Name worktree
-        </text>
-        <text fg={theme.text.muted} onMouseUp={() => dialog.clear()}>
-          esc
-        </text>
-      </box>
+      <DialogHeader title="Name worktree" />
       <input
         cursorStyle={config.cursor}
         ref={(value: InputRenderable) => {