fix(ui): improve plan-exit question dock UX

packages/app/src/pages/session/composer/session-question-dock.tsx

@@ -4,6 +4,7 @@ import { useMutation } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
 import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Markdown } from "@opencode-ai/ui/markdown"
 import { showToast } from "@opencode-ai/ui/toast"
 import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"
 import { useLanguage } from "@/context/language"
@@ -73,6 +74,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
     customOn: cached?.customOn ?? ([] as boolean[]),
     editing: false,
     focus: 0,
+    minimized: false,
   })
 
   let root: HTMLDivElement | undefined
@@ -159,7 +161,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
     focusFrame = requestAnimationFrame(() => {
       focusFrame = undefined
       const el = next === options().length ? customRef : optsRef[next]
-      el?.focus()
+      el?.focus({ preventScroll: true })
     })
   }
 
@@ -425,9 +427,16 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
       kind="question"
       ref={(el) => (root = el)}
       onKeyDown={nav}
+      minimized={store.minimized}
       header={
         <>
-          <div data-slot="question-header-title">{summary()}</div>
+          <div
+            data-slot="question-header-title"
+            role="button"
+            onClick={() => setStore("minimized", !store.minimized)}
+          >
+            {summary()}
+          </div>
           <div data-slot="question-progress">
             <For each={questions()}>
               {(_, i) => (
@@ -469,7 +478,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
         </>
       }
     >
-      <div data-slot="question-text">{question()?.question}</div>
+      <div data-slot="question-text"><Markdown text={question()?.question ?? ""} /></div>
       <Show when={multi()} fallback={<div data-slot="question-hint">{language.t("ui.question.singleHint")}</div>}>
         <div data-slot="question-hint">{language.t("ui.question.multiHint")}</div>
       </Show>

packages/opencode/src/tool/plan.ts

@@ -25,12 +25,21 @@ export const PlanExitTool = Tool.define(
         Effect.gen(function* () {
           const instance = yield* InstanceState.context
           const info = yield* session.get(ctx.sessionID)
-          const plan = path.relative(instance.worktree, Session.plan(info, instance))
+          const abs = Session.plan(info, instance)
+          const plan = path.relative(instance.worktree, abs)
+          const content = yield* Effect.promise(() => Bun.file(abs).text().catch(() => ""))
+          if (!content.trim()) {
+            return {
+              title: "Plan is empty",
+              output: `The plan file at ${plan} is empty. Please write the plan first before calling plan_exit.`,
+              metadata: {},
+            }
+          }
           const answers = yield* question.ask({
             sessionID: ctx.sessionID,
             questions: [
               {
-                question: `Plan at ${plan} is complete. Would you like to switch to the build agent and start implementing?`,
+                question: `Plan at ${plan} is complete. Would you like to switch to the build agent and start implementing?\n\n---\n\n${content}`,
                 header: "Build Agent",
                 custom: false,
                 options: [

packages/ui/src/components/dock-prompt.tsx

@@ -1,23 +1,28 @@
-import type { JSX } from "solid-js"
+import { Show, type JSX } from "solid-js"
 import { DockShell, DockTray } from "./dock-surface"
 
 export function DockPrompt(props: {
   kind: "question" | "permission"
   header: JSX.Element
   children: JSX.Element
   footer: JSX.Element
+  minimized?: boolean
   ref?: (el: HTMLDivElement) => void
   onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>
 }) {
   const slot = (name: string) => `${props.kind}-${name}`
 
   return (
-    <div data-component="dock-prompt" data-kind={props.kind} ref={props.ref} onKeyDown={props.onKeyDown}>
+    <div data-component="dock-prompt" data-kind={props.kind} data-minimized={props.minimized} ref={props.ref} onKeyDown={props.onKeyDown}>
       <DockShell data-slot={slot("body")}>
         <div data-slot={slot("header")}>{props.header}</div>
-        <div data-slot={slot("content")}>{props.children}</div>
+        <Show when={!props.minimized}>
+          <div data-slot={slot("content")}>{props.children}</div>
+        </Show>
       </DockShell>
-      <DockTray data-slot={slot("footer")}>{props.footer}</DockTray>
+      <Show when={!props.minimized}>
+        <DockTray data-slot={slot("footer")}>{props.footer}</DockTray>
+      </Show>
     </div>
   )
 }

packages/ui/src/components/dock-surface.css

@@ -4,7 +4,7 @@
   position: relative;
   z-index: 10;
   border-radius: 12px;
-  overflow: clip;
+  overflow: hidden;
 }
 
 [data-dock-surface="tray"] {

packages/ui/src/components/message-part.css

@@ -843,6 +843,10 @@
     padding: 8px 8px 0;
   }
 
+  &[data-minimized="true"] [data-slot="question-body"] {
+    padding-bottom: 8px;
+  }
+
   [data-slot="question-header"] {
     display: flex;
     align-items: center;
@@ -858,6 +862,8 @@
     line-height: var(--line-height-large);
     color: var(--text-strong);
     min-width: 0;
+    flex: 1;
+    cursor: pointer;
   }
 
   [data-slot="question-progress"] {
@@ -909,6 +915,8 @@
     gap: 4px;
     flex: 1;
     min-height: 0;
+    overflow-y: auto;
+    max-height: calc(var(--question-prompt-max-height, 70dvh) - 140px);
   }
 
   [data-slot="question-text"] {
@@ -935,15 +943,6 @@
     gap: 6px;
     margin-top: 12px;
     padding: 1px 1px 8px;
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
   }
 
   [data-slot="question-option"] {