VS Code extension: rename/delete icons in session list are barely visible on hover/selection highlight

Status Open
Maintainer reply None cached
Activity 3 comments · opened Jul 16, 2026

Describe the bug

In the VS Code extension's session list (Claude Code sidebar), the rename (pencil) and delete (trash) icons that appear on hover are rendered in a dark color that blends into the blue selection/hover highlight. They are effectively invisible unless you know they're there — I only found the rename action after several attempts.

Additionally, right-clicking a session row shows only the OS text context menu (Cut/Copy/Paste), which adds to the confusion — users expect session actions (rename/delete) there.

Expected behavior

  • Hover action icons should switch to a high-contrast (light/white) color when the row is highlighted
  • Ideally, rename/delete should also be available in the row's context menu

Environment

  • Claude Code VS Code extension (native), macOS (Darwin 24.3)

View original on GitHub ↗

3 Comments

ssss22jj-netizen · 1 month ago

One more detail: the rename icon itself is hard to recognize as a pencil — the glyph doesn't read as "edit/rename" at that size, which compounds the discoverability problem. A clearer pencil glyph (or a text tooltip appearing faster) would help.

gwoodard9 · 1 month ago

https://norrin.dev is a very cool extension for Claude Code that gives you the ability to see inline diff, accept/ reject per hunk, and track files.

tobiasfranz-jakala · 27 days ago

Confirmed on v2.1.220 (darwin-arm64), and I can add the root cause from the shipped stylesheet (webview/index.css inside the installed extension):

The session-row action buttons are always colored with the secondary foreground:

.actionButton_… { color: var(--app-secondary-foreground); } /* → --vscode-descriptionForeground */

The active row swaps background/foreground to the selection colors (--app-list-active-background / --app-list-active-foreground, mapped from list.activeSelectionBackground / list.activeSelectionForeground), but there is no corresponding override for .actionButton — so the gray icons sit on the dark-blue selection background.

Suggested one-line fix:

.sessionItem.active .actionButton { color: var(--app-list-active-foreground); }

Note there's no user-side workaround via theme tokens: the webview never reads list.activeSelectionIconForeground, so the only mitigation is lightening list.activeSelectionBackground via workbench.colorCustomizations, which affects all native lists too.

<img width="421" height="222" alt="Image" src="https://github.com/user-attachments/assets/8fd00b69-0bf1-4dc1-aad8-faf889c7fc1b" />

BTW: I would like / expected to see the commands in the rows context-menu, too.