feat: add real-time code selection indicator #44
+109
−13
Conversation
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
- Display selected code info (filename, line range) above chat input - Listen to editor selection changes and sync to WebView - Fix alien-signals reactivity: replace Vue watch with alien effect - Use absolute positioning to avoid layout shifts
Reviewer's GuideImplements a real-time code selection indicator by wiring VS Code editor selection events through the extension transport into the webview’s alien-signal-based session state, enabling ChatPage to render a small inline badge above the chat input showing the selected file and line range, while fixing alien-signals reactivity and enabling selection inclusion by default when sending messages. Sequence diagram for real-time code selection indicator updatesequenceDiagram
actor User
participant VSCodeEditor
participant VSCodeExtension as Extension
participant Transport
participant Webview as WebviewHost
participant Runtime as RuntimeInstance
participant AppContext
participant SessionStore
participant Session
participant ChatPage
User->>VSCodeEditor: Change text selection
VSCodeEditor->>VSCodeExtension: onDidChangeTextEditorSelection
VSCodeExtension->>VSCodeExtension: sendSelectionUpdate(editor)
VSCodeExtension->>Transport: send type selection_changed
Transport->>Webview: postMessage selection_changed
Webview->>Runtime: selectionEvents callback(selection)
Runtime->>AppContext: currentSelection(selection or undefined)
AppContext->>Runtime: currentSelection signal updated
Runtime->>SessionStore: currentSelectionSignal updated via effect
SessionStore->>Session: selection SelectionRange updated
Session->>ChatPage: selection reactive value
ChatPage->>ChatPage: compute selectionInfo from Session.selection
ChatPage-->>User: Render selection indicator above input
Sequence diagram for including selection when sending a messagesequenceDiagram
actor User
participant ChatPage
participant Session
participant Connection
User->>ChatPage: Submit chat input
ChatPage->>Session: send(input, attachments, includeSelection=true)
Session->>Session: detect isSlash from input
Session->>Connection: getConnection()
Session->>Session: launchClaude()
Session->>Connection: getCurrentSelection()
Connection-->>Session: selection response
Session->>Session: selection(selection or undefined)
Session->>Connection: send chat payload with selection if includeSelection and not isSlash
Updated class diagram for runtime selection handling and SessionclassDiagram
class SelectionRange {
string filePath
number startLine
number endLine
number startColumn
number endColumn
}
class AppContext {
+currentSelection() SelectionRange~optional~
+currentSelection(selection SelectionRange~optional~) void
}
class SessionStore {
-connectionManager ConnectionManager
-selectionSignal SelectionRange~optional~
+SessionStore(connectionManager ConnectionManager, options SessionStoreOptions)
}
class Session {
-selection SelectionRange~optional~
+send(input string, attachments AttachmentPayload[] = [], includeSelection boolean = true) Promise~void~
+getConnection() Promise~Connection~
+launchClaude() Promise~void~
+selection() SelectionRange~optional~
+selection(value SelectionRange~optional~) void
}
class Connection {
+getCurrentSelection() Promise~SelectionResponse~
}
class SelectionResponse {
+selection SelectionRange~optional~
}
class RuntimeInstance {
+connectionManager ConnectionManager
+appContext AppContext
+sessionStore SessionStore
+dispose() void
}
class ChatPageViewModel {
+session Session
+selectionInfo string
}
AppContext --> SessionStore : currentSelectionSignal
SessionStore --> Session : manages
Session --> Connection : uses
Connection --> SelectionResponse : returns
RuntimeInstance --> AppContext : owns
RuntimeInstance --> SessionStore : owns
ChatPageViewModel --> Session : reads selection
ChatPageViewModel --> SelectionRange : formats to selectionInfo
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- In
selectionInfo, theif (start && end)check will break ifstartLineorendLinecan ever be 0; consider checking forstart != null && end != nullinstead of relying on truthiness. - The selection indicator label text includes a hardcoded Chinese unit
行; if this UI is meant to be language-agnostic, consider using existing localization mechanisms or a neutral symbol-only representation (e.g., just(#start-#end, N lines)in the current UI language). - When setting up the selection listeners in
extension.ts, you might want to callsendSelectionUpdate(vscode.window.activeTextEditor)once on activation so that the webview immediately reflects the current selection without waiting for the first change event.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `selectionInfo`, the `if (start && end)` check will break if `startLine` or `endLine` can ever be 0; consider checking for `start != null && end != null` instead of relying on truthiness.
- The selection indicator label text includes a hardcoded Chinese unit `行`; if this UI is meant to be language-agnostic, consider using existing localization mechanisms or a neutral symbol-only representation (e.g., just `(#start-#end, N lines)` in the current UI language).
- When setting up the selection listeners in `extension.ts`, you might want to call `sendSelectionUpdate(vscode.window.activeTextEditor)` once on activation so that the webview immediately reflects the current selection without waiting for the first change event.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Owner
|
哇，一时语塞 不过这个功能不打算这么做 所以才空在那里的 微信dd我 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Changes
src/extension.ts: Add selection change listenerssrc/webview/src/composables/useRuntime.ts: Fix signal sync issuesrc/webview/src/core/Session.ts: Enable selection by defaultsrc/webview/src/pages/ChatPage.vue: Add selection indicator UITest plan
Summary by Sourcery
Add real-time propagation of editor code selections to the webview and surface them in the chat UI while defaulting messages to include the current selection.
New Features:
Bug Fixes:
Enhancements: