Skip to content

fix(vscode): sidebar top bar regression - #12988

Merged
bagatao-anaconda merged 5 commits into
mainfrom
fix/sidebar-top-bar-vscode-regression
Aug 7, 2026
Merged

fix(vscode): sidebar top bar regression#12988
bagatao-anaconda merged 5 commits into
mainfrom
fix/sidebar-top-bar-vscode-regression

Conversation

@bagatao-anaconda

Copy link
Copy Markdown
Collaborator

Issue

No tracked issue. This addresses feedback on #12976, a full revert of #12894 proposed after the sidebar navigation bar change (which fixed the nav bar disappearing in Cursor's Secondary Side Bar) visually broke the toolbar on real VS Code.

Context

#12894 replaced Kilo's native view/title/editor/title toolbar with an in-webview bar everywhere, to work around Cursor's Secondary Side Bar dropping the native toolbar entirely. That fixed Cursor, but regressed VS Code, which never had this bug — colleagues confirmed VS Code renders the native toolbar correctly in both the primary and Secondary Side Bar, and reported two visual issues from the always-on webview bar:

  1. Icons pushed toward the right edge with an odd gap in the middle.
  2. The bar consuming an extra line of vertical space the native toolbar never needed.

Rather than reverting the whole feature, this restores VS Code's native toolbar exactly as it was and scopes the in-webview fallback bar to Cursor only, since that's the only host actually affected by the underlying bug.

Implementation

  • Restores the native view/title/editor/title menu contributions, the sidebarTitle.* telemetry wrapper commands, and their track() helper in extension.ts — byte-for-byte the same shape they had before fix(vscode/cursor): keep sidebar navigation visible in the secondary side bar #12894 — with one addition: every restored when clause now also requires !kilo-code.new.isCursor.
  • kilo-code.new.isCursor is a context key set once at activation from a new isCursorHost() helper (vscode.env.appName.toLowerCase().includes("cursor")). KiloProvider._getHtmlForWebview uses the same helper to decide whether to inject the in-webview SidebarTopBar (topBar: hideTopBar !== true && isCursorHost()).
  • Why host-detection instead of position-detection: the ask was to only show the fallback bar when the view is in the Secondary Side Bar specifically, keeping the primary side bar native everywhere (including Cursor). That isn't achievable — I checked the actual @types/vscode@1.120.0 definitions directly: WebviewView exposes no location field (viewType, webview, title, description, badge, visible, onDidDispose, onDidChangeVisibility is the complete interface), and there's no ViewContainerLocation/auxiliaryBar/secondarySidebar API surface at all. appName is the only reliable signal available.
  • Accepted trade-off: Cursor's primary side bar now also shows the in-webview bar (losing the single-line native look it had before fix(vscode/cursor): keep sidebar navigation visible in the secondary side bar #12894), in exchange for the Secondary Side Bar actually working, with zero guessing about dock position anywhere. VS Code is native everywhere, exactly as before fix(vscode/cursor): keep sidebar navigation visible in the secondary side bar #12894 ever existed. This was discussed and explicitly accepted after confirming no automatic detection exists.
  • Fixes the reported icon layout issues: removes the "spacer" action that split the row into a tight cluster + a far-right pair, and adds justify-content: flex-end to right-align the whole group, matching where the native toolbar's icons sit.
  • Updates .changeset/fix-secondary-sidebar-nav-bar.md, which previously (inaccurately) said the webview bar always replaces the native toolbar.

How to Test

Manual/local verification

  • Built the extension (bun script/local-bin.ts && bun script/prepare-sdk.ts && bun run --parallel check-types check-types:webview lint bundle:production) and launched it against both real VS Code (1.132.0) and Cursor side by side, each with its own --state-dir/--kilo-storage-dir.
  • Confirmed VS Code shows the native title-bar toolbar in both the primary and Secondary Side Bar, and in "Open in Tab" — unchanged from before fix(vscode/cursor): keep sidebar navigation visible in the secondary side bar #12894.
  • Confirmed Cursor shows the in-webview bar in both the primary and Secondary Side Bar, with all 7 icons in a single tight right-aligned row (no more far-right push, no artificial gap).
  • Verified isCursorHost()'s vscode.env.appName check against both apps' actual product.json ("Visual Studio Code" vs "Cursor").
  • Ran typecheck, lint, knip, format, and check-kilocode-change in packages/kilo-vscode — all pass.

Reviewer test steps

  1. Build and launch the extension against real VS Code and confirm the native toolbar (New Task, History, Agent Manager, KiloClaw, Marketplace, Profile, Settings) appears in the sidebar's title bar in both the primary Activity Bar position and after moving the view to the Secondary Side Bar.
  2. Launch the same build against Cursor (--app-path pointing at Cursor's binary) and confirm the in-webview bar renders as a single right-aligned row in both dock positions, and that every button still works.
  3. Run Kilo Code: Open in Tab in both hosts and confirm the same split (native for VS Code, webview bar for Cursor).

@kilo-code-bot

kilo-code-bot Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

lgtm — the restoration is byte-for-byte the pre-#12894 shape (verified against the revert commit) with only the !kilo-code.new.isCursor guards added, all new command registrations are disposed via context.subscriptions (no leak vectors), the spacer removal leaves no dangling references, and the changeset is accurate and user-facing.

Files Reviewed (9 files)
  • .changeset/fix-secondary-sidebar-nav-bar.md
  • packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/sidebar-top-bar-default-chromium-linux.png
  • packages/kilo-vscode/package.json
  • packages/kilo-vscode/src/KiloProvider.ts
  • packages/kilo-vscode/src/extension.ts
  • packages/kilo-vscode/src/utils.ts
  • packages/kilo-vscode/webview-ui/src/App.tsx
  • packages/kilo-vscode/webview-ui/src/components/chat/SidebarTopBar.tsx
  • packages/kilo-vscode/webview-ui/src/styles/chat-layout.css

Reviewed by kimi-k3 · Input: 16K · Output: 3.3K · Cached: 294K

Review guidance: REVIEW.md from base branch main

…lo-Org/kilocode into fix/sidebar-top-bar-vscode-regression
@bagatao-anaconda bagatao-anaconda self-assigned this Aug 7, 2026
@bagatao-anaconda
bagatao-anaconda merged commit e668cf5 into main Aug 7, 2026
25 checks passed
@bagatao-anaconda
bagatao-anaconda deleted the fix/sidebar-top-bar-vscode-regression branch August 7, 2026 10:58
t7tran pushed a commit to t7tran/kilocode that referenced this pull request Aug 14, 2026
…scode-regression

fix(vscode): sidebar top bar regression
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants