feat: clickable filenames in tool results to open files in VS Code#486
Draft
markijbema wants to merge 6 commits intodevfrom
Draft
feat: clickable filenames in tool results to open files in VS Code#486markijbema wants to merge 6 commits intodevfrom
markijbema wants to merge 6 commits intodevfrom
Conversation
Add openFile message handler to KiloProvider and wire it through DataProvider context so that clicking filenames in read/edit/write tool results opens the file in the VS Code editor. Changes: - KiloProvider: handle 'openFile' message via showTextDocument - App.tsx DataBridge: wire onOpenFile through useVSCode postMessage - messages.ts: add OpenFileRequest type to WebviewMessage union - data.tsx: add OpenFileFn type and onOpenFile prop to DataProvider - message-part.tsx: make filenames clickable in read/edit/write tools - message-part.css: add .clickable styles for filename elements
…resolution - Resolve relative paths against workspace root in KiloProvider openFile handler - Add ClickableFileOutput component for tool output file paths - Make glob, grep, and list tool output file paths clickable - Make read tool 'loaded' file paths clickable - Add CSS styles for clickable file output lines
When the assistant mentions a file path in inline code (e.g. `skills/foo/SKILL.md`), clicking it now opens the file in VS Code. Uses event delegation on the text-part container to detect clicks on <code> elements containing file-path-like text. CSS cursor:pointer applied to inline code when openFile handler is available.
…y ClickableFileOutput and TextPartDisplay
…es/kilo-ui
packages/ui is upstream and should remain immutable. Move all component and
CSS overrides to packages/kilo-ui:
- Revert packages/ui/src/components/message-part.{tsx,css} to upstream
- Add OpenFileFn type + onOpenFile prop to data.tsx with kilocode_change markers
- Override TextPartDisplay, read, list, glob, grep, edit, write tools in kilo-ui
- Add ClickableFileOutput component and isFilePath util in kilo-ui
- Add all clickable CSS in kilo-ui/message-part.css
- Add @opencode-ai/util as peer dependency in kilo-ui
Export DiagnosticsDisplay, getDiagnostics, relativizeProjectPaths, getDirectory, and createThrottledValue from upstream message-part.tsx with kilocode_change markers. Import them in kilo-ui instead of re-defining.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Makes filenames in tool results (read, edit, write) clickable in the VS Code extension webview. Clicking a filename opens that file in the VS Code editor.
Changes
VS Code Extension
KiloProvider.ts: NewopenFilemessage handler that callsvscode.window.showTextDocumentApp.tsx:DataBridgewiresonOpenFilecallback throughuseVSCode().postMessagemessages.ts: NewOpenFileRequesttype added toWebviewMessageunionShared UI (
packages/ui)data.tsx: NewOpenFileFntype andonOpenFileprop onDataProvidercontextmessage-part.tsx: Filenames inread,edit, andwritetool renders are now clickablemessage-part.css:.clickablestyles on filename elements (pointer cursor, underline, hover color)How it works
data.openFile(filePath)DataBridgeposts anopenFilemessage to the VS Code hostKiloProviderreceives the message and opens the file viashowTextDocument