Skip to content

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

Closed
BYK wants to merge 1 commit into
anomalyco:devfrom
BYK:fix/plan-exit-dock-ux
Closed

BYK wants to merge 1 commit into
anomalyco:devfrom
BYK:fix/plan-exit-dock-ux

Conversation

@BYK

@BYK BYK commented May 16, 2026 •

Copy link
Copy Markdown
Contributor

Issue for this PR

Closes #27889, closes #18515

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

Fixes several UX issues in the plan-exit question dock:

  • Render plan content as markdown in the exit prompt (plan.ts), making structured plans with headings, lists, and code blocks readable. Also guards against empty plans.
  • Render question dock text as markdown in the web UI (session-question-dock.tsx).
  • Restore scroll on question dock for long plan content (dock-surface.css, message-part.css).
  • Prevent auto-scroll to focused option so users can read plan content above the buttons (session-question-dock.tsx).
  • Add tap-to-collapse on the question dock header title, allowing users to minimize the dock to see session content behind it (dock-prompt.tsx, message-part.css).

How did you verify your code works?

Tested locally by entering plan mode, creating a long plan, and triggering plan_exit. Verified markdown renders correctly, scroll works for long content, focus doesn't auto-scroll away, and tap-to-collapse works on the header.

Screenshots / recordings

N/A — behavioral fixes to existing UI components.

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

@BYK
BYK requested a review from adamdotdevin as a code owner May 16, 2026 14:55
@github-actions github-actions Bot added contributor needs:compliance This means the issue will auto-close after 2 hours. and removed needs:compliance This means the issue will auto-close after 2 hours. labels May 16, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Thanks for updating your PR! It now meets our contributing guidelines. 👍

header={
<>
<div data-slot="question-header-title">{summary()}</div>
<div

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be great to add an icon next to the title showing current minimized state e.g. arrow up/down as with tasks list

@BYK
BYK force-pushed the fix/plan-exit-dock-ux branch from 69a8952 to 6f35658 Compare May 21, 2026 11:22

@BYK BYK left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good suggestion — added a chevron-down icon that rotates to indicate the minimized state, matching the pattern used in the todo dock.

- Render plan content as markdown in the exit prompt and guard empty plan
- Render question dock text as markdown in the web UI
- Restore scroll on question dock for long plan content
- Prevent question dock from auto-scrolling to focused option
- Add tap-to-collapse on question dock header title
@BYK
BYK force-pushed the fix/plan-exit-dock-ux branch from 6f35658 to 4a619cd Compare June 8, 2026 17:29
@BYK
BYK requested a review from Hona as a code owner June 8, 2026 17:29
Copilot AI review requested due to automatic review settings June 8, 2026 17:29
@BYK
BYK requested a review from Brendonovich as a code owner June 8, 2026 17:29

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR adds support for minimizing the question dock UI and improves the plan-exit flow by validating and displaying the current plan content before switching to the build agent.

Changes:

  • Add “minimized” behavior to dock prompts and wire it into the session question dock UI.
  • Adjust dock/question layout CSS to support scrolling/max-height and the minimized header interaction.
  • Enhance plan_exit to prevent exiting with an empty plan and to include plan contents in the confirmation prompt.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
packages/ui/src/components/message-part.css Adds minimized padding, makes header title clickable, and moves scroll/max-height behavior to the prompt container.
packages/ui/src/components/dock-surface.css Changes overflow behavior for the dock surface container.
packages/ui/src/components/dock-prompt.tsx Adds a minimized prop and conditionally hides content/footer when minimized.
packages/opencode/src/tool/plan.ts Validates plan file is non-empty and injects plan content into the confirmation question.
packages/app/src/pages/session/composer/session-question-dock.tsx Adds minimize toggle UI, uses Markdown for question text, and prevents scroll on focus.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +918 to +919
overflow-y: auto;
max-height: calc(var(--question-prompt-max-height, 70dvh) - 140px);
Comment on lines +19 to +25
<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>
Comment on lines +31 to +38
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: {},
}
}
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}`,
Comment on lines +437 to +441
<div
data-slot="question-header-title"
role="button"
onClick={() => setStore("minimized", !store.minimized)}
>
<div data-slot="question-text" class="overflow-auto">
{question()?.question}
</div>
<div data-slot="question-text" class="overflow-auto"><Markdown text={question()?.question ?? ""} /></div>
@github-actions

Copy link
Copy Markdown
Contributor

Automated PR Cleanup

Thank you for contributing to opencode.

Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions.

This PR was closed because it matched the following cleanup criteria:

  • The PR was created more than 1 month ago
  • The PR had fewer than 2 positive reactions
  • Positive reactions are counted as thumbs-up, heart, celebration, or rocket reactions on the PR

PRs created within the last month are not affected by this cleanup.

If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate.

Thanks again for taking the time to contribute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

3 participants