Polish VS Code tool call previews

[Drixled]

Summary

• Lighten and compact VS Code chat tool-call rows so titles, metadata, icons, hover state, and chevrons read consistently inline with assistant text.
• Render shell, search/list, and background-process outputs as static preview surfaces with consistent terminal-like typography, including removing shell expand animation.
• Add Tool Call Lab Storybook coverage and a patch changeset for the user-facing UI polish.

Detailed list of changes:

• Removed chunky card chrome.
• Reduced borders, backgrounds, and visual weight.
• Made rows more compact.
• Set titles/meta/icons to quieter text-weak.
• Standardized titles at regular 12px.
• Metadata now reads like [icon] [tool] · [meta].
• Hover only appears on expandable rows.
• Chevrons now point right collapsed, down expanded.
• Text/tool spacing is cleaner.

Shell tool:

• Now feels like a small static terminal preview.
• Command and output are split into separate blocks.
• $ prompt stays visible but outside the command text.
• Removed syntax highlighting.
• Removed Command / Output labels.
• Removed the divider.
• Matched shell text to 12px.
• Slightly darkened the terminal background.
• Removed shell expand/collapse animation.

Other previews:

• glob, grep, list, and background_process now share a lighter preview style.
• Search/context rows are more compact.
• Rich tools like diffs, todos, and task cards keep their specialized UI.

Notes

• Rich outputs such as edit/write diffs, web search links, todos, and task cards keep their specialized renderers.

[kilo-code-bot]

SUGGESTION: Dead active prop — now unused after removing the deferredHighlight effects

The active?: boolean prop was used by the removed createEffect blocks to gate deferred syntax highlighting. The prop is still declared in the signature and passed at the call site (active={open()}), but nothing inside the function body reads props.active any more. The call site can stop passing it and the signature can drop it to avoid misleading future readers.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (incremental diff, 20+ files)

• packages/opencode/src/kilocode/cli/cmd/tui/app.tsx - terminal title routing refactor
• packages/opencode/src/kilocode/cli/cmd/tui/context/tui-config.tsx - title_icon config resolution
• packages/opencode/src/kilocode/cli/cmd/tui/terminal-title.ts - new file: session status icon logic
• packages/opencode/src/kilocode/cli/cmd/tui/title-icon.ts - new file: type definitions
• packages/opencode/src/kilocode/provider/codex-refresh.ts - Flock lock serialization + timeout
• packages/opencode/src/kilocode/server/httpapi/groups/config-console.ts - title_icon API schema
• packages/opencode/src/plugin/codex.ts - User-Agent header + AbortSignal on refresh
• packages/opencode/src/plugin/loader.ts - skip bundled atomic chat plugin
• packages/opencode/src/session/llm.ts - USER_AGENT constant replacement
• packages/opencode/test/kilocode/cli/cmd/tui/context/tui-config.test.ts - title_icon hot reload tests
• packages/opencode/test/kilocode/codex-auth-refresh.test.ts - cross-process race tests
• packages/opencode/test/kilocode/codex-refresh-user-agent.test.ts - new file: UA branding test
• packages/opencode/test/kilocode/config/atomic-chat-default-plugin.test.ts - loader skip test
• packages/opencode/test/kilocode/fixture/codex-auth-refresh-worker.ts - new file: test worker
• packages/opencode/test/kilocode/oauth-branding.test.ts - UA header assertion
• packages/opencode/test/kilocode/server/tui-config.test.ts - title_icon PATCH test
• packages/opencode/test/kilocode/sessions/remote-ws.test.ts - concurrent heartbeat test
• packages/opencode/test/kilocode/terminal-title.test.ts - new file: state machine tests
• packages/opencode/test/kilocode/tui-terminal-title-reactivity.test.ts - new file: done tracking test
• packages/opencode/test/session/llm.test.ts - UA header in LLM test
• packages/sdk/js/src/v2/gen/sdk.gen.ts - SDK regen for title_icon
• packages/sdk/js/src/v2/gen/types.gen.ts - SDK regen for title_icon
• packages/sdk/openapi.json - openapi spec update

Resolved Issue

The previous SUGGESTION about the dead active prop in BashHighlightedOutput (packages/kilo-ui/src/components/message-part.tsx:2117) is resolved — the prop is now actively used in the createEffect blocks that gate deferred syntax highlighting.

Previous Review Summaries (4 snapshots, latest commit a5f2a84)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit a5f2a84)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (30+ files)

• .changeset/ime-enter-composition-guard.md - Changeset: IME enter key guard
• .changeset/render-image-diffs.md - Changeset: image diff rendering
• .changeset/restore-authenticated-speech-input.md - Changeset: speech input restore
• .changeset/search-agent-manager-sidebar.md - Changeset: sidebar search
• packages/kilo-vscode/package.json - speech-to-text default model
• packages/kilo-vscode/src/agent-manager/GitOps.ts - execGitBuffer for binary reads
• packages/kilo-vscode/src/agent-manager/format-keybinding.ts - fallback for search keybinding
• packages/kilo-vscode/src/agent-manager/local-diff.ts - image diff in worktree source
• packages/kilo-vscode/src/agent-manager/types.ts - WorktreeDiffEntry kind/image fields
• packages/kilo-vscode/src/diff/shared/image.ts - new file: image encoding, loading, size caps
• packages/kilo-vscode/src/diff/shared/path.ts - extracted resolveInside utility
• packages/kilo-vscode/src/diff/sources/git-status.ts - parseRawOids, showBlobBytes, readDiskBytes, blobOid, diskStamp, image-aware summarize
• packages/kilo-vscode/src/diff/sources/session.ts - toSessionDiffFile image handling
• packages/kilo-vscode/src/diff/sources/staged.ts - image diff stamp + detail loading
• packages/kilo-vscode/src/diff/sources/unstaged.ts - image diff stamp + detail loading
• packages/kilo-vscode/src/diff/sources/worktree.ts - pass kind/image through toDiffFile
• packages/kilo-vscode/src/diff/types.ts - DiffImage, DiffImageSide, kind/image fields
• packages/kilo-vscode/src/extension.ts - keybinding extraction for search
• packages/kilo-vscode/src/provider-actions.ts - authStates from fetchProviderData
• packages/kilo-vscode/src/review-utils.ts - minor
• packages/kilo-vscode/src/speech-to-text/models.ts - speech model definitions
• packages/kilo-vscode/tests/unit/diff-image.test.ts - new tests
• packages/kilo-vscode/tests/unit/diff-session-source.test.ts - new tests
• packages/kilo-vscode/tests/unit/ime-enter-key.test.ts - new tests
• packages/kilo-vscode/tests/unit/sidebar-search.test.ts - new tests
• packages/kilo-vscode/tests/unit/local-diff.test.ts - new tests
• packages/kilo-vscode/tests/unit/speech-to-text-availability.test.ts - updated
• packages/kilo-vscode/tests/unit/use-speech-to-text.test.ts - updated
• packages/kilo-vscode/tests/unit/provider-actions-save.test.ts - authStates test
• packages/kilo-vscode/tests/unit/format-keybinding.test.ts - search keybind test
• packages/kilo-vscode/tests/unit/diff-state.test.ts - kind/image merge
• packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx - sidebar search integration, removed CurrentTabsMenu
• packages/kilo-vscode/webview-ui/agent-manager/CurrentTabsMenu.tsx - removed
• packages/kilo-vscode/webview-ui/agent-manager/DiffPanel.tsx - image diff integration
• packages/kilo-vscode/webview-ui/agent-manager/SidebarSearchMenu.tsx - new file
• packages/kilo-vscode/webview-ui/agent-manager/WorktreeSectionActions.tsx - new file
• packages/kilo-vscode/webview-ui/agent-manager/sidebar-search.ts - new file
• packages/kilo-vscode/webview-ui/agent-manager/tab-rendering.tsx - focusCurrentTab
• packages/kilo-vscode/webview-ui/diff-viewer/FullScreenDiffView.tsx - image diff integration
• packages/kilo-vscode/webview-ui/diff-viewer/ImageDiffView.tsx - new file
• packages/kilo-vscode/webview-ui/diff-viewer/diff-open-policy.ts - image-aware expand logic
• packages/kilo-vscode/webview-ui/diff-viewer/diff-state.ts - image fields in merge/diff
• packages/kilo-vscode/webview-ui/src/components/speech-to-text/availability.ts - authStates API
• packages/kilo-vscode/webview-ui/src/utils/ime-enter.ts - new file
• packages/kilo-vscode/webview-ui/src/types/messages/agent-manager.ts - WorktreeFileDiff kind/image
• Various i18n files - new translation keys for image diffs and sidebar search
• Various storybook and visual regression snapshot updates

Previous review (commit 2d46adb)

Status: No Issues Found | Recommendation: Merge

Changes Since Last Review

The incremental commits beyond 0aaef83 introduce significant architectural changes across multiple packages:

• packages/kilo-indexing/: Worktree-aware shared indexing baselines with schema versioning (SCHEMA = "2"), native LanceDB operation serialization via native() queue, keyless OpenAI-compatible embedder support, file watcher overlay integration for worktree deltas, cache serialization improvements (flush(), seedHashes(), signature(), stamp()).
• packages/opencode/src/kilocode/: Multi-tenant indexing worker (shared Channel + key-based routing replacing per-directory workers), snapshot track fiber lifecycle rewrite (forkDetach + acquireUseRelease with owner tracking and retry-based progress cleanup), hardenSystemAgents enforcing deny-only permissions on compaction/title/summary agents.
• packages/opencode/: Removed upstream customize-opencode skill and its 377-line markdown body, OpenCode→Kilo rebranding in provider login flows and DigitalOcean OAuth, currentDirectory parameter plumbed to session listing for worktree-aware session sorting.
• packages/kilo-vscode/: Custom provider dialog with npm package selection (@ai-sdk/openai-compatible/openai/anthropic), variant property deletion tracking with null sentinels for removed keys, reasoning_split and effort variant options, readable-width chat layout with container queries and scrollbar-gutter: stable.
• packages/kilo-ui/: Minor rimraf import re-export.
• .changeset/: 23 changesets added covering all user-facing changes.

Previous Finding Resolved

File	Line	Issue	Status
packages/kilo-ui/src/components/message-part.tsx	2117	Dead active prop	Resolved — active is now passed and used to guard highlighting

Areas Verified

Area	Assessment
Cache save serialization (flush chaining)	Correct — saveTask promise chain prevents concurrent writes
Worker multi-tenancy (channel + key routing)	Correct — state.hosts and pool identity checks prevent cross-host interference
Snapshot track fiber lifecycle	Correct — acquireUseRelease properly cleans up both snapshot and progress fibers; owner tracking prevents prompt conflicts
OpenAI-compatible keyless auth	Safe — custom fetch strips auth headers when no API key provided, defaults headers are preserved
LanceDB native serialization	Correct — global nativeQueue prevents concurrent native table operations
Baseline schema versioning	Correct — SCHEMA = "2" checked on open, triggers rebuild on mismatch
hasIndexedData throw-on-error	Safe — called inside try/catch in orchestrator
Worktree overlay baseline filtering	Correct — relative() normalizes paths, shadows/blocked sets gate baseline reuse

Files Reviewed (40+ files from incremental diff)

• packages/kilo-indexing/src/indexing/cache-manager.ts — flush, seedHashes, signature, stamp
• packages/kilo-indexing/src/indexing/manager.ts — baseline support, worktree overlay, dispose
• packages/kilo-indexing/src/indexing/worktree-overlay.ts — new file, baseline/delta reconciliation
• packages/kilo-indexing/src/indexing/config-manager.ts — optional API key for openai-compatible
• packages/kilo-indexing/src/indexing/embedders/openai-compatible.ts — keyless auth support
• packages/kilo-indexing/src/indexing/service-factory.ts — workspacePath parameter
• packages/kilo-indexing/src/indexing/search-service.ts — baseline+delta search merge
• packages/kilo-indexing/src/indexing/orchestrator.ts — overlay, independent, dedup
• packages/kilo-indexing/src/indexing/vector-store/lancedb-vector-store.ts — native queue, schema, fileHash, openExisting/close
• packages/opencode/src/kilocode/indexing-worker-client.ts — shared channel, key routing
• packages/opencode/src/kilocode/indexing-worker.ts — multi-manager, key queues
• packages/opencode/src/kilocode/indexing-worker-protocol.ts — key field, baselineDirectory
• packages/opencode/src/kilocode/indexing.ts — baseline directory resolution
• packages/opencode/src/kilocode/snapshot/track.ts — forkDetach, acquireUseRelease, owner tracking, cleanup retries
• packages/opencode/src/kilocode/agent/index.ts — hardenSystemAgents
• packages/opencode/src/kilocode/atomic-chat-feature.ts — simplified plugin detection
• packages/opencode/src/skill/index.ts — removed customize-opencode built-in skill
• packages/opencode/src/skill/prompt/customize-opencode.md — deleted (377 lines)
• packages/opencode/src/config/config.ts — URL rebranding, code_edit_display field
• packages/opencode/src/tool/shell.ts, warpgrep.ts, registry.ts — kilocode_change formatting + indexing toggle
• packages/opencode/src/session/session.ts — currentDirectory parameter
• packages/opencode/src/provider/transform.ts — minimax variant support
• packages/opencode/src/cli/cmd/providers.ts — branding, remove opencode provider
• packages/opencode/src/plugin/index.ts — AtomicChatPlugin internal registration
• packages/opencode/src/storage/db.ts — channel DB migration kilo.db
• packages/opencode/src/auth/index.ts — OAUTH_DUMMY_KEY rebrand
• packages/kilo-vscode/src/shared/custom-provider.ts — package selection, variant deletion tracking
• packages/kilo-vscode/src/shared/provider-model.ts — CUSTOM_PROVIDER_PACKAGES, isCustomProviderPackage
• packages/kilo-vscode/webview-ui/src/components/settings/CustomProviderDialog.tsx — package select, initModels, initHeaders, model re-fetch UX
• packages/kilo-vscode/webview-ui/src/components/settings/CustomProviderModelCard.tsx — splitReasoning, outputEffort variant options
• packages/kilo-vscode/webview-ui/src/styles/chat-layout.css — readable-width, container queries, scrollbar-gutter
• .changeset/*.md — 23 changesets covering all user-facing changes
• Various tests, i18n, and visual regression baselines (auto-generated)

Fix these issues in Kilo Cloud

Previous review (commit 0aaef83)

Status: No Issues Found | Recommendation: Merge

Changes Since Last Review

The incremental commits beyond f8ee07f reintroduce shell command syntax highlighting (via deferredHighlight + Shiki), which was removed in an earlier batch. The active prop on BashHighlightedOutput — previously flagged as dead — is now actively used to guard highlighting only while the tool collapsible is expanded.

Additional changes in the new commits:

• message-part.tsx: data-variant="preview" on grep/glob/list tool output for new surface styling; BashHighlightedOutput restructured with bash-terminal/bash-prompt containers (no more section labels or divider).
• AssistantMessage.tsx: Extracts planExitInfo into a named helper; tighter question-part visibility filtering (requires matching active request, excludes pending/running without dock); hides completed synthetic text parts.
• VscodeToolOverrides.tsx: Wraps background-process fields and output in a shared background-process-details surface.
• basic-tool.css: Hover states, transition, arrow direction (right → down), context-tool row/list styles, data-variant="preview" surface.
• message-part.css: Static terminal command/output surfaces, todos block, reasoning-part block (hover, gap, containment).
• shell-rolling-results.tsx: Replaces useCollapsible animation with inline height/display toggle; dead refs removed.
• tool-overrides.css: background-process-details container + divider; font-mono → font-family-mono fix.
• vscode-bridge.css: New --surface-tool-output-base token with light/dark variants.
• chat-layout.css: Reduced assistant gap (12px → 6px); hidden-padding rule for empty assistant rows.
• plan-exit.css / question-dock.css: Margin/padding tweaks to reduce phantom gaps.
• StoryProviders.tsx: New session mock fields (draftSessionID, getSessionToolParts, getSessionToolCount, exportSessionTranscript); onOpenDiff/onOpenFile forwarded to DataProvider.
• tool-call-lab.stories.tsx: Full block matrix story rendering through real AssistantMessage path with real tool data.
• kilo-ui-contract.test.ts: Updated bash tests for restored highlighting + prompt/container structure; new AssistantMessage and Assistant transcript spacing contract suites.
• font-size-arch.test.ts: New test ensuring no px line-heights in polished tool CSS.
• .changeset/polish-vscode-tool-previews.md: User-facing changeset for the UI polish.
• Visual regression baselines updated for all impacted components.

Previous Finding Resolved

File	Line	Issue	Status
packages/kilo-ui/src/components/message-part.tsx	2117	Dead active prop	Resolved — active is now passed and guards two createEffect highlighting calls; re-imports deferredHighlight and escapeHtml.

Files Reviewed (34 files)

File	Notes
.changeset/polish-vscode-tool-previews.md	User-facing changeset
packages/kilo-ui/src/components/basic-tool.css	Typography, hover, context-tool, preview surfaces
packages/kilo-ui/src/components/collapsible.css	Arrow direction
packages/kilo-ui/src/components/message-part.css	Bash, todos, reasoning surfaces
packages/kilo-ui/src/components/message-part.tsx	Restored highlighting, preview variants, prompt container
packages/kilo-ui/src/components/shell-rolling-results.tsx	Animation removal, inline toggle
packages/kilo-ui/src/styles/vscode-bridge.css	New tool output surface token
packages/kilo-vscode/tests/unit/font-size-arch.test.ts	No-px-line-height guard
packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts	Updated bash + new contract suites
packages/kilo-vscode/webview-ui/src/components/chat/AssistantMessage.tsx	planExitInfo, isRenderable, filtering
packages/kilo-vscode/webview-ui/src/components/chat/VscodeToolOverrides.tsx	Background-process layout
packages/kilo-vscode/webview-ui/src/stories/StoryProviders.tsx	Mock session, onOpenDiff/onOpenFile
packages/kilo-vscode/webview-ui/src/stories/tool-call-lab.stories.tsx	Block matrix story
packages/kilo-vscode/webview-ui/src/styles/chat-layout.css	Turn gap + selective margins
packages/kilo-vscode/webview-ui/src/styles/plan-exit.css	Padding tweak
packages/kilo-vscode/webview-ui/src/styles/question-dock.css	Margin tweak
packages/kilo-vscode/webview-ui/src/styles/tool-overrides.css	Background-process details surface
19 visual regression baselines	Auto-generated, unchanged logic

Fix these issues in Kilo Cloud

Previous review (commit f8ee07f)

Status: No Issues Found | Recommendation: Merge

Changes Since Last Review

The new commits extend the VS Code tool-call polish work with:

• basic-tool.css: Compact title/subtitle/arg/filename/meta-line typography — all set to 12px --text-weak. Icon color changed from --icon-base to --text-weak.
• collapsible.css: Arrow direction changed from down/up (0°/180°) to right/down (−90°/0°) — consistent VS Code tree-expand convention.
• message-part.css: Replaces bash-output background with transparent + separate bash-terminal surfaces using --surface-tool-output-base. Adds todos block and reasoning-part block styling for VS Code theme. Adds data-variant="preview" targeting for search outputs.
• message-part.tsx: BashHighlightedOutput refactored from syntax-highlighted (Shiki) to static <pre><code> preview, removing the active prop, two createEffect calls, and the deferredHighlight/escapeHtml imports. data-variant="preview" added to grep/glob/list outputs. This resolves the previously flagged dead active prop.
• shell-rolling-results.tsx: Removes useCollapsible animation in favour of simple height: auto / 0px + display: block / none inline style toggle. Dead contentRef, bodyRef, measure removed. createEffect now early-returns when !props.open.
• VscodeToolOverrides.tsx: Background-process fields and output are now co-wrapped in background-process-details for unified rounded surface treatment.
• tool-overrides.css: Adds background-process-details container styles, background-process-fields + tool-output divider, mono font token fix (--font-mono → --font-family-mono).
• chat-layout.css: Assistant turn gap reduced from 12px to 2px; selective margin-top: 6px applied for text↔tool, text↔reasoning, and expanded-tool transitions.
• kilo-ui-contract.test.ts: Updated to match the new static terminal markup (prompt + plain <pre>/<code>, no data-lang=).
• StoryProviders.tsx: Mock session updated with new required fields (draftSessionID, getSessionToolParts, getSessionToolCount, exportSessionTranscript); onOpenDiff/onOpenFile props forwarded to DataProvider.
• tool-call-lab.stories.tsx: New Storybook story covering the full block matrix (bash, grep, background-process, write, patch, todos, question, suggestion).

All code changes are clean. The one notable pattern to be aware of:

Observation: cross-package relative import in Storybook story

tool-call-lab.stories.tsx line 14 imports directly from the kilo-ui source tree via a ../../../../kilo-ui/src/components/tool-open-state relative path rather than through the package exports map. tool-open-state is not in @kilocode/kilo-ui's exports in package.json, so this is the only way to reach it from Storybook. This works because Storybook runs Vite directly against TypeScript source. It's a storybook-only file so there's no production build risk, and no other stories follow this pattern yet — worth noting for future maintainers, but not a blocker.

Files Reviewed (incremental, 9 files)

• packages/kilo-ui/src/components/basic-tool.css — typography tokens: looks good
• packages/kilo-ui/src/components/collapsible.css — chevron direction fix: looks good
• packages/kilo-ui/src/components/message-part.css — bash/todo/reasoning surfaces: looks good
• packages/kilo-ui/src/components/message-part.tsx — static terminal preview, dead active prop removed: looks good
• packages/kilo-ui/src/components/shell-rolling-results.tsx — animation removal: looks good
• packages/kilo-vscode/webview-ui/src/components/chat/VscodeToolOverrides.tsx — background-process layout: looks good
• packages/kilo-vscode/webview-ui/src/styles/tool-overrides.css — detail surface styles: looks good
• packages/kilo-vscode/webview-ui/src/styles/chat-layout.css — turn gap + selective margins: looks good
• packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts — updated contracts: looks good
• packages/kilo-vscode/webview-ui/src/stories/StoryProviders.tsx — mock session additions: looks good
• packages/kilo-vscode/webview-ui/src/stories/tool-call-lab.stories.tsx — new Storybook coverage: looks good
• packages/kilo-vscode/webview-ui/src/styles/vscode-bridge.css — token carried forward from prior review: looks good

Previous observations (resolved)

File	Note	Status
packages/kilo-ui/src/components/message-part.tsx	Dead active prop on BashHighlightedOutput	Resolved — active prop, both createEffect highlighting calls, and their onCleanup are removed in this batch.

---

_{Reviewed by deepseek-v4-pro-20260423 · 1,232,895 tokens}

_{Review guidance: REVIEW.md from base branch main}

[imanolmzd-svg]

@Drixled The edit tools (Edit, Write and Patch) have an option for "Open in Diff Viewer" on the right side - Can you please check the feature is still there?

Note: I can only see the patch tool being used with GPT models

[Drixled]

@imanolmzd-svg yup, I manually tested it, they’re still there.

Edit / Write / Patch tools	Patch tool with GPT models