From a5df5bc8e4bfca64c3846955d781ae67edcbb186 Mon Sep 17 00:00:00 2001 From: marius-kilocode Date: Tue, 7 Jul 2026 14:20:30 +0200 Subject: [PATCH 1/3] fix(vscode): prevent selector popover clipping in new worktree dialog The New Worktree dialog renders model, reasoning-variant, and mode pickers inline (portal=false) so clicks aren't swallowed by the modal overlay. The CSS overflow escape hatch that lets an open popover break out of the dialog's scroll containers keyed only on model-selector-popover, so the variant and mode dropdowns added later were clipped by .am-nv-dialog-content and the prompt container. Generalize the :has() rules to any popover-content inside the dialog. Popover content unmounts on close, so the override only applies while a dropdown is open. Add a visual-regression story (NewWorktreeDialog with the variant dropdown open) that reproduces the clipping without the fix and covers all inline pickers going forward. --- .changeset/am-dialog-popover-clipping.md | 5 +++ .../agent-manager/agent-manager.css | 9 +++-- .../src/stories/agent-manager.stories.tsx | 39 +++++++++++++++++++ 3 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 .changeset/am-dialog-popover-clipping.md diff --git a/.changeset/am-dialog-popover-clipping.md b/.changeset/am-dialog-popover-clipping.md new file mode 100644 index 00000000000..66fc9803756 --- /dev/null +++ b/.changeset/am-dialog-popover-clipping.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Fix the reasoning-variant and mode dropdowns being clipped inside the New Worktree dialog. The dialog's scroll-container overflow escape now covers all inline selector popovers, not just the model picker, so dropdowns render fully above the prompt input. diff --git a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css index 4007ad8b9e1..173f3277092 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css +++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css @@ -2709,10 +2709,11 @@ body.am-wt-dragging-active * { overflow-y: auto; } -.am-nv-dialog .am-prompt-input-container:has([class~="model-selector-popover"][data-component="popover-content"]), -.am-nv-dialog-content:has([class~="model-selector-popover"][data-component="popover-content"]), -[data-component="dialog"]:has(.am-nv-dialog [class~="model-selector-popover"][data-component="popover-content"]) - [data-slot="dialog-body"] { +/* While any inline (non-portaled) selector popover is open, let it escape the + dialog's scroll containers. Covers model, thinking-variant, and mode pickers. */ +.am-nv-dialog .am-prompt-input-container:has([data-component="popover-content"]), +.am-nv-dialog-content:has([data-component="popover-content"]), +[data-component="dialog"]:has(.am-nv-dialog [data-component="popover-content"]) [data-slot="dialog-body"] { overflow: visible; } diff --git a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx index fbad72deba7..b35303e1273 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx @@ -10,6 +10,8 @@ import { FileTree } from "../../diff-viewer/FileTree" import { DiffPanel } from "../../agent-manager/DiffPanel" import { FullScreenDiffView } from "../../diff-viewer/FullScreenDiffView" import { WorktreeItem } from "../../agent-manager/WorktreeItem" +import { NewWorktreeDialog } from "../../agent-manager/NewWorktreeDialog" +import { useDialog } from "@kilocode/kilo-ui/context/dialog" import { ChatView } from "../components/chat/ChatView" import { registerVscodeToolOverrides } from "../components/chat/VscodeToolOverrides" import { SessionContext } from "../context/session" @@ -929,6 +931,43 @@ export const TabBarSingleTab: Story = { ), } +// --------------------------------------------------------------------------- +// NewWorktreeDialog — variant dropdown must escape the dialog scroll containers +// (regression: inline popovers were clipped by .am-nv-dialog-content overflow) +// --------------------------------------------------------------------------- + +const NewWorktreeVariantOpener = () => { + const dialog = useDialog() + const open = () => { + if (document.querySelector("[data-component='popover-content']")) return + window.dispatchEvent(new CustomEvent("openVariantPicker")) + requestAnimationFrame(open) + } + onMount(() => { + dialog.show(() => {}} />) + requestAnimationFrame(open) + }) + return null +} + +export const NewWorktreeVariantDropdown1280: Story = { + name: "NewWorktreeDialog — variant dropdown open", + parameters: { layout: "fullscreen" }, + render: () => { + const session = { + ...mockSessionValue(), + configModel: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-6" }), + } + return ( + + + + + + ) + }, +} + const searchSection = { id: "polish", name: "Polish", color: "Blue", order: 0, collapsed: false } const slackedSection = { id: "slacked", name: "SLACKED", color: "Yellow", order: 1, collapsed: false } const sidebarSearchItems: SidebarSearchItem[] = [ From 0ab3702cf706bd2b50dc528871f773a0182cca0d Mon Sep 17 00:00:00 2001 From: marius-kilocode Date: Tue, 7 Jul 2026 14:35:14 +0200 Subject: [PATCH 2/3] fix(vscode): render variant dropdown story inline for visual regression The dialog.show() approach portaled the dialog to document.body (outside #storybook-root), and Kobalte's modal set aria-hidden on #storybook-root, causing Playwright's toHaveScreenshot to time out (element not visible). Replace with an inline fixture that reproduces the real CSS clipping chain: .am-nv-dialog > .am-nv-dialog-content > .am-prompt-input-container (position: relative, overflow: hidden from agent-manager.css) with the real inline ThinkingSelectorBase (portal={false}). The variant picker opens upward; with the overflow escape fix the popover renders fully above the container, without it floating-ui repositions the popover lower. The screenshot baseline captures the fixed state and catches any regression. --- .../src/stories/agent-manager.stories.tsx | 70 +++++++++++++------ 1 file changed, 48 insertions(+), 22 deletions(-) diff --git a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx index b35303e1273..4f2aef6e2dd 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx @@ -10,8 +10,6 @@ import { FileTree } from "../../diff-viewer/FileTree" import { DiffPanel } from "../../agent-manager/DiffPanel" import { FullScreenDiffView } from "../../diff-viewer/FullScreenDiffView" import { WorktreeItem } from "../../agent-manager/WorktreeItem" -import { NewWorktreeDialog } from "../../agent-manager/NewWorktreeDialog" -import { useDialog } from "@kilocode/kilo-ui/context/dialog" import { ChatView } from "../components/chat/ChatView" import { registerVscodeToolOverrides } from "../components/chat/VscodeToolOverrides" import { SessionContext } from "../context/session" @@ -25,6 +23,7 @@ import { IconButton } from "@kilocode/kilo-ui/icon-button" import { Icon } from "@kilocode/kilo-ui/icon" import { TooltipKeybind } from "@kilocode/kilo-ui/tooltip" import { ContextMenu } from "@kilocode/kilo-ui/context-menu" +import { ThinkingSelectorBase } from "../components/shared/ThinkingSelector" import { createSignal, onCleanup, onMount, type JSX } from "solid-js" import type { WorktreeFileDiff, WorktreeState, WorktreeGitStats, PRStatus } from "../types/messages" import type { ReviewComment } from "../../diff-viewer/review-comments" @@ -932,40 +931,67 @@ export const TabBarSingleTab: Story = { } // --------------------------------------------------------------------------- -// NewWorktreeDialog — variant dropdown must escape the dialog scroll containers -// (regression: inline popovers were clipped by .am-nv-dialog-content overflow) +// NewWorktreeDialog — inline selector popovers must escape the dialog scroll +// containers. Regression: the reasoning-variant and mode pickers were clipped +// by .am-nv-dialog-content (overflow-y: auto) and .am-prompt-input-container +// (overflow: hidden) because the overflow escape hatch only covered the model +// picker. This fixture reproduces the real clipping chain (same CSS classes + +// the real inline ThinkingSelectorBase with portal={false}) so a screenshot +// baseline catches any future regression. Rendered inline (no dialog portal) +// because the visual-regression harness screenshots #storybook-root. // --------------------------------------------------------------------------- -const NewWorktreeVariantOpener = () => { - const dialog = useDialog() +const VariantPickerOpener = () => { + let frame = 0 + let attempts = 0 const open = () => { if (document.querySelector("[data-component='popover-content']")) return + if (attempts++ >= 120) return window.dispatchEvent(new CustomEvent("openVariantPicker")) - requestAnimationFrame(open) + frame = requestAnimationFrame(open) } onMount(() => { - dialog.show(() => {}} />) - requestAnimationFrame(open) + frame = requestAnimationFrame(open) }) + onCleanup(() => cancelAnimationFrame(frame)) return null } export const NewWorktreeVariantDropdown1280: Story = { name: "NewWorktreeDialog — variant dropdown open", parameters: { layout: "fullscreen" }, - render: () => { - const session = { - ...mockSessionValue(), - configModel: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-6" }), - } - return ( - - - - - - ) - }, + render: () => ( + + {/* Filler pushes the prompt container to the bottom of the dialog content. + The variant popover opens upward from the trigger, extending above the + container's top edge. Without the overflow escape fix, .am-prompt-input-container + (overflow: hidden + position: relative) clips the top of the popover. */} +
+
+
+
+
+
+
+ {}} + portal={false} + deferDismiss + /> +
+
+
+
+
+
+ + + ), } const searchSection = { id: "polish", name: "Polish", color: "Blue", order: 0, collapsed: false } From a659bb2571bd5f7b52eceadbb42a975fe31aa7c1 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 7 Jul 2026 12:50:04 +0000 Subject: [PATCH 3/3] chore: update kilo-vscode visual regression baselines --- .../new-worktree-variant-dropdown-1280-chromium-linux.png | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/new-worktree-variant-dropdown-1280-chromium-linux.png diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/new-worktree-variant-dropdown-1280-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/new-worktree-variant-dropdown-1280-chromium-linux.png new file mode 100644 index 00000000000..2b594d86ac1 --- /dev/null +++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/new-worktree-variant-dropdown-1280-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2f7edbc1bf6f10260626bf21406bb02e32dc17bf969c83e8b56251c50f755a1f +size 7737