Jetbrains - Fix Webview Assets

[catrielmuller]

Context

The JetBrains plugin was experiencing issues loading webview assets due to:

1. Mismatched asset file names between what the HTML referenced and what was actually built
2. Insufficient path resolution logic for finding assets in the build directory
3. Unpredictable CSS file naming from Vite's default behavior

Implementation

This commit fixes critical issues with asset loading in the JetBrains plugin's webview implementation, ensuring that CSS, JavaScript, and other static assets are properly served and loaded.

1. Enhanced Resource Handler (LocalResHandler.kt)

• Improved Path Resolution: Enhanced URL decoding and path construction logic to handle various asset request patterns
• Alternative Path Fallback: Added fallback mechanism to check webview-ui/build/ directory when assets aren't found in the primary location

2. WebView Manager Improvements (WebViewManager.kt)

• Asset Name Mapping: Fixed asset references by replacing index.css/index.js with main.css/main.js to match actual build output

3. Custom Vite Plugin (cssPerEntryPlugin.ts)

• New Plugin: Created a custom Vite plugin to handle CSS per entry point
• Functionality:
  • Tracks which CSS belongs to which entry point by analyzing the chunk graph
  • Traverses import trees (both static and dynamic) to map chunks to entries
  • Merges CSS files for each entry point
  • Generates consolidated CSS files named after their entry points (e.g., main.css)
• Benefits: Ensures predictable CSS file naming and proper asset organization

4. Vite Configuration Updates (vite.config.ts)

• Enabled CSS Code Splitting: Set cssCodeSplit: true to generate separate CSS files
• Integrated Custom Plugin: Added cssPerEntryPlugin() to the plugin chain
• Asset Naming: Updated asset naming strategy to handle CSS files with proper hashing

Screenshots

How to Test

1. Building the JetBrains plugin

pnpm run jetbrains:bundle
pnpm run jetbrains:run

3. Opening the webview in a JetBrains IDE
4. Verifying that all CSS styles are applied correctly

[changeset-bot]

🦋 Changeset detected

Latest commit: 7979c5f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
kilo-code	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

This PR fixes critical webview asset loading issues in the JetBrains plugin by addressing mismatched asset file names and improving path resolution logic.

Key changes:

• Adds a custom Vite plugin (cssPerEntryPlugin) to generate predictable CSS file names per entry point
• Updates asset name references from index.css/js to main.css/js in the WebView manager
• Enhances the resource handler with improved path resolution, alternative path fallback, and additional source map MIME types

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
webview-ui/vite.config.ts	Integrates cssPerEntryPlugin and enables CSS code splitting to generate separate CSS files per entry point
webview-ui/src/kilocode/vite-plugins/cssPerEntryPlugin.ts	New custom Vite plugin that merges CSS files per entry point with predictable naming (e.g., main.css)
jetbrains/plugin/src/main/kotlin/ai/kilocode/jetbrains/webview/WebViewManager.kt	Replaces index.css/js references with main.css/js to match build output; improves logging granularity
jetbrains/plugin/src/main/kotlin/ai/kilocode/jetbrains/webview/LocalResHandler.kt	Enhances path resolution with URL decoding, alternative path fallback, and adds source map MIME types
.changeset/cool-cycles-jog.md	Documents the fix for the JetBrains webview in the changeset

[marius-kilocode]

Do we want to throw here if no file exists? Would we not want to have file?.exists() ?

[catrielmuller]

I’ve just refactored this logic, so this block is no longer relevant.

Just as a note on the syntax: we couldn't use file?.exists() there because it returns a nullable Boolean, which causes a compilation error inside a standard if statement.