feat(desktop): adapt composer command menu height (#49343)

Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>

packages/app/component-tests/composer.spec.ts

@@ -122,6 +122,40 @@ story("does not mask or pad controls when they fit", async ({ mount }) => {
   await expect(controls).toHaveCSS("padding-inline-end", "0px")
 })
 
+story("grows suggestions while preserving visible timeline context", async ({ mount }) => {
+  const component = await mount("opencode-composer-flow--constrained-command-suggestions")
+  const boundary = component.locator('[data-slot="composer-suggestion-boundary-story"]')
+  const suggestions = component.locator('[data-component="composer-suggestions"]')
+
+  await expect(suggestions).toHaveCSS("max-height", "166px")
+  await expect(suggestions).toHaveCSS("scroll-padding-bottom", "18px")
+  await expect.poll(() => suggestions.evaluate((element) => element.scrollHeight > element.clientHeight)).toBe(true)
+  await expect
+    .poll(async () => {
+      const menu = await suggestions.boundingBox()
+      const items = await suggestions.locator("[data-suggestion-id]").evaluateAll((elements) =>
+        elements.map((element) => {
+          const rect = element.getBoundingClientRect()
+          return { top: rect.top, bottom: rect.bottom }
+        }),
+      )
+      if (!menu) return false
+      const bottom = menu.y + menu.height
+      return items.some((item) => item.top < bottom && item.bottom > bottom)
+    })
+    .toBe(true)
+
+  await boundary.evaluate((element) => {
+    element.style.height = "400px"
+  })
+  await expect(suggestions).toHaveCSS("max-height", "306px")
+})
+
+story("ignores a detached suggestion boundary", async ({ mount }) => {
+  const component = await mount("opencode-composer-flow--detached-command-suggestion-boundary")
+  await expect(component.locator('[data-component="composer-suggestions"]')).toHaveCSS("max-height", "306px")
+})
+
 // ThemeProvider writes resolved token values into a <style> block, so toggling data-color-scheme by hand
 // leaves every --v2-* variable at its previous value. Switch themes through the Storybook global instead.
 for (const [theme, background] of [

packages/app/src/composer/composer.stories.tsx

@@ -57,6 +57,8 @@ function ComposerStory(props: {
   continueOnStop?: boolean
   longLabels?: boolean
   alternate?: "queue" | "steer"
+  manySuggestions?: boolean
+  suggestionBoundary?: () => HTMLElement | undefined
 }) {
   const [draft, setDraft] = createStore<ComposerPersistedState>({
     prompt: props.prompt ?? [{ type: "text", content: "", start: 0, end: 0 }],
@@ -93,6 +95,15 @@ function ComposerStory(props: {
   const commands: ComposerSuggestion[] = [
     { id: "command.test", kind: "command", label: "/test", trigger: "test", title: "Run tests" },
     { id: "command.review", kind: "command", label: "/review", trigger: "review", title: "Review changes" },
+    ...(props.manySuggestions
+      ? Array.from({ length: 12 }, (_, index) => ({
+          id: `command.example-${index}`,
+          kind: "command" as const,
+          label: `/example-${index}`,
+          trigger: `example-${index}`,
+          title: `Run example ${index}`,
+        }))
+      : []),
   ]
   const context: ComposerSuggestion[] = [
     {
@@ -206,7 +217,7 @@ function ComposerStory(props: {
       <output class="text-12-regular text-text-weak" aria-live="polite">
         {story.activity}
       </output>
-      <Composer model={model} borderUnderlay />
+      <Composer model={model} borderUnderlay suggestionBoundary={props.suggestionBoundary} />
     </div>
   )
 }
@@ -273,6 +284,25 @@ export const SlashSuggestions = { render: () => <ComposerStory suggestions="comm
 
 export const ContextSuggestions = { render: () => <ComposerStory suggestions="context" /> }
 
+function ConstrainedCommandSuggestionsStory() {
+  let boundary: HTMLDivElement | undefined
+  return (
+    <div class="mx-auto w-full max-w-200">
+      <div ref={boundary} data-slot="composer-suggestion-boundary-story" class="h-60" />
+      <ComposerStory suggestions="command" manySuggestions suggestionBoundary={() => boundary} />
+    </div>
+  )
+}
+
+export const ConstrainedCommandSuggestions = { render: () => <ConstrainedCommandSuggestionsStory /> }
+
+export const DetachedCommandSuggestionBoundary = {
+  render: () => {
+    const detached = document.createElement("div")
+    return <ComposerStory suggestions="command" manySuggestions suggestionBoundary={() => detached} />
+  },
+}
+
 export const RunningAndStopping = { render: () => <ComposerStory working stopping label="Session is running" /> }
 
 export const SteeringFollowUp = {

packages/app/src/composer/composer.tsx

@@ -12,7 +12,12 @@ import { formatKeybind, useCommand } from "@/shell/commands/command"
 import { useLanguage } from "@/runtime/i18n/language"
 import type { ComposerModel } from "./model"
 
-export function Composer(props: { class?: string; model: ComposerModel; borderUnderlay?: boolean }) {
+export function Composer(props: {
+  class?: string
+  model: ComposerModel
+  borderUnderlay?: boolean
+  suggestionBoundary?: () => HTMLElement | undefined
+}) {
   const dialog = useDialog()
   const command = useCommand()
   const language = useLanguage()
@@ -28,6 +33,7 @@ export function Composer(props: { class?: string; model: ComposerModel; borderUn
         attachShortcut={command.keybind("file.attach")}
         alternateKeybind={[formatKeybind("mod", language.t), "↵"]}
         exitShellKeybind={[formatKeybind("esc", language.t)]}
+        suggestionBoundary={props.suggestionBoundary}
         modelControl={
           <ComposerModelControl
             loading={props.model.model.loading}

packages/app/src/composer/editor/editor.tsx

@@ -11,6 +11,7 @@ import {
   type JSX,
 } from "solid-js"
 import { createStore } from "solid-js/store"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { FileIcon } from "@opencode/ui/file-icon"
 import { Icon } from "@opencode/ui/icon"
 import { IconButton } from "@opencode/ui/icon-button"
@@ -51,6 +52,12 @@ export type {
 } from "../types"
 
 export type ComposerMode = "normal" | "shell"
+const COMPOSER_SUGGESTION_MAX_HEIGHT = 320
+const COMPOSER_SUGGESTION_ROW_HEIGHT = 28
+const COMPOSER_SUGGESTION_ROW_PEEK = 18
+const COMPOSER_SUGGESTION_TOP_PADDING = 8
+const COMPOSER_SUGGESTION_SEARCH_HEIGHT = 28
+const COMPOSER_SUGGESTION_CONTEXT_RESERVE = 80
 
 export type ComposerEditorProps = {
   controller: ComposerEditorModel
@@ -64,6 +71,7 @@ export type ComposerEditorProps = {
   attachShortcut?: string
   alternateKeybind?: string[]
   exitShellKeybind?: string[]
+  suggestionBoundary?: () => HTMLElement | undefined
 }
 
 export function ComposerEditor(props: ComposerEditorProps) {
@@ -128,6 +136,7 @@ export function ComposerEditor(props: ComposerEditorProps) {
         <ComposerEditorPopover
           emptyLabel={i18n.t("ui.promptInput.noMatchingItems")}
           items={props.controller.suggestions()}
+          boundary={props.suggestionBoundary}
           activeID={state.popover.type === "closed" ? undefined : state.popover.activeID}
           search={
             state.popover.type === "command-menu"
@@ -775,18 +784,31 @@ export function ComposerEditorPopover(props: {
     onValueChange: (value: string) => void
     onKeyDown: (event: KeyboardEvent) => void
   }
+  boundary?: () => HTMLElement | undefined
   onActiveChange: (item: ComposerSuggestion) => void
   onSelect: (item: ComposerSuggestion) => void
 }) {
+  const [store, setStore] = createStore({ maxHeight: COMPOSER_SUGGESTION_MAX_HEIGHT })
+  const resize = (height: number) =>
+    setStore("maxHeight", composerSuggestionMaxHeight(height, props.search !== undefined))
+  // A detached boundary (e.g. the previous session's timeline while the next one loads) measures 0px.
+  const boundary = () => {
+    const element = props.boundary?.()
+    return element?.isConnected ? element : undefined
+  }
+  createEffect(() => resize(boundary()?.clientHeight ?? COMPOSER_SUGGESTION_MAX_HEIGHT * 2))
+  createResizeObserver(boundary, (rect) => resize(rect.height))
+
   return (
     <div
       data-component="composer-suggestions"
-      class="absolute inset-x-0 -top-2 z-40 flex max-h-80 -translate-y-full flex-col overflow-auto rounded-xl bg-v2-background-bg-base p-2 shadow-[var(--v2-elevation-raised)] no-scrollbar"
+      class="absolute inset-x-0 -top-2 z-40 flex -translate-y-full scroll-pb-[18px] flex-col overflow-auto rounded-xl bg-v2-background-bg-base p-2 shadow-[var(--v2-elevation-raised)] no-scrollbar"
+      style={{ "max-height": `${store.maxHeight}px` }}
       onMouseDown={(event) => event.preventDefault()}
     >
       <Show when={props.search}>
         {(search) => (
-          <div class="px-2 py-1">
+          <div class="shrink-0 px-2 py-1">
             <input
               ref={(element) => requestAnimationFrame(() => element.focus())}
               value={search().value}
@@ -810,7 +832,7 @@ export function ComposerEditorPopover(props: {
               type="button"
               data-suggestion-id={item.id}
               data-active={props.activeID === item.id ? "" : undefined}
-              class="flex w-full items-center gap-2 rounded-md px-2 py-1 text-start hover:bg-v2-overlay-simple-overlay-hover"
+              class="flex h-7 w-full shrink-0 items-center gap-2 rounded-md px-2 py-1 text-start hover:bg-v2-overlay-simple-overlay-hover"
               classList={{ "bg-v2-overlay-simple-overlay-hover": props.activeID === item.id }}
               onPointerMove={() => props.onActiveChange(item)}
               onClick={() => props.onSelect(item)}
@@ -835,6 +857,19 @@ export function ComposerEditorPopover(props: {
   )
 }
 
+function composerSuggestionMaxHeight(boundaryHeight: number, search: boolean) {
+  const reserve = Math.min(COMPOSER_SUGGESTION_CONTEXT_RESERVE, boundaryHeight / 4)
+  const limit = Math.min(COMPOSER_SUGGESTION_MAX_HEIGHT, boundaryHeight - reserve)
+  const chrome = COMPOSER_SUGGESTION_TOP_PADDING + (search ? COMPOSER_SUGGESTION_SEARCH_HEIGHT : 0)
+  if (limit < chrome + COMPOSER_SUGGESTION_ROW_HEIGHT + COMPOSER_SUGGESTION_ROW_PEEK) return limit
+  return (
+    chrome +
+    Math.floor((limit - chrome - COMPOSER_SUGGESTION_ROW_PEEK) / COMPOSER_SUGGESTION_ROW_HEIGHT) *
+      COMPOSER_SUGGESTION_ROW_HEIGHT +
+    COMPOSER_SUGGESTION_ROW_PEEK
+  )
+}
+
 // "Steer ⌘⏎" / "Queue ⌘⏎" hint next to the submit button: submits with the
 // delivery opposite to what plain Enter does. Visible only while the queue
 // exposes an alternate (turn running and composer holding a value), so it

packages/app/src/session/composer/region.tsx

@@ -213,7 +213,10 @@ export function createActiveSessionRegion(input: {
 
 export type ActiveSessionRegionModel = ReturnType<typeof createActiveSessionRegion>
 
-export function ActiveSessionComposerRegion(props: { model: SessionComposerController }) {
+export function ActiveSessionComposerRegion(props: {
+  model: SessionComposerController
+  suggestionBoundary: () => HTMLElement | undefined
+}) {
   return (
     <SessionComposerRegion
       controller={props.model.region}
@@ -221,7 +224,7 @@ export function ActiveSessionComposerRegion(props: { model: SessionComposerContr
         <div class="relative">
           <SessionQueuePanel queue={props.model.queue} />
           <div class="relative z-10">
-            <Composer model={props.model.composer} borderUnderlay />
+            <Composer model={props.model.composer} borderUnderlay suggestionBoundary={props.suggestionBoundary} />
           </div>
         </div>
       }

packages/app/src/session/screen.tsx

@@ -340,7 +340,7 @@ function SessionScreenContent(props: { session: SessionModel; browser: ReturnTyp
       </div>
 
       <Show when={composer.active()} keyed>
-        {(model) => <ActiveSessionComposerRegion model={model} />}
+        {(model) => <ActiveSessionComposerRegion model={model} suggestionBoundary={timeline.scroller} />}
       </Show>
     </>
   )