Windows compatibility & other improvements #2
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
- Auto-detect Windows platform and use correct Claude CLI path - Use full process.env on Windows instead of Unix-specific paths - Add shell: true option for spawning .cmd files on Windows Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Notify background script when Ctrl toggles active state in content script - Read isActive from background state when popup opens Previously, pressing Ctrl would enable element selection but the popup would still show "disabled" because the state wasn't synchronized. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Detect platform and suggest appropriate default path - Make project path input editable (remove readOnly) - Improve placeholder text with cross-platform examples Previously the browse dialog always suggested /Users/coleschaffer/Desktop/ which was incorrect for Windows users. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Broadcast status to popup via chrome.runtime.sendMessage (not just tabs) - Add message listener in popup to receive status updates - Broadcast 'connecting' status when connection attempt starts - Broadcast 'disconnected' status when connection fails (was missing) - Only persist serverPort after successful connection Previously the popup would show "connected" even when the WebSocket connection failed because it wasn't receiving status broadcasts. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Helpful for troubleshooting WebSocket connection issues. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Previously "Ready!" printed before HTTP server confirmed listening due to async callback timing. Now waits for both HTTP and WebSocket servers to be ready before printing. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When user tries to enable on a page where the content script hasn't loaded (e.g., page wasn't refreshed after extension install), show "Refresh the page to enable" error instead of silently failing. - Content script now sends response to SET_ACTIVE message - Popup catches error if content script not responding - Shows inline error message below toggle Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- macOS: Ctrl (original behavior, doesn't conflict with Cmd shortcuts) - Windows/Linux: Alt+Shift+V (Ctrl conflicts with copy/paste/etc) Updated README to document both shortcuts. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Popup was always showing disabled because it queried state without specifying which tab to check. Now popup sends the active tab ID when querying state, and background uses it to check the correct tab. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When pressing Escape to disable the tool, notify background script so popup reflects the correct state. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…emplates Major improvements to the MCP server for better development workflows and cross-platform support: SSE Transport Mode: - Add SSEServerTransport for connecting to independently running server - Add /sse endpoint for Server-Sent Events connections - Add /messages endpoint for POST message handling - Create createMcpServer() factory for multiple server instances - Support SSE_ONLY environment variable for standalone SSE mode Windows Platform Support: - Add platform detection (isWindows, isMac) - Use platform-specific Claude CLI paths - Configure spawn options for Windows child processes - Guard terminal auto-submit to macOS only Prompt Template System: - Load customizable prompt-template.md from disk - Replace placeholders: TASK_ID, FEEDBACK, ELEMENT_TAG, etc. - Add instructions for mark_change_applied/failed workflow Additional Improvements: - Add clear_all_tasks MCP tool for queue management - Persist authentication token to file for consistent connections - Add server.js entry point for easier startup Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add hook scripts that notify Claude when visual feedback tasks are pending. These hooks run on every user prompt submission and inject task notifications into Claude's context. Hook Scripts: - check-visual-feedback.ps1 for Windows (PowerShell) - check-visual-feedback.sh for macOS/Linux (Bash) Hook Behavior: - Query /tasks endpoint to check for pending visual feedback - Inject <visual-feedback-pending> notification if tasks exist - Instruct Claude to automatically process queued tasks - Continue checking for new tasks until queue is empty The hooks enable a seamless workflow where users can queue multiple visual feedback requests while Claude processes them in the background. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Refactor the standalone server to use external prompt templates, matching
the MCP server's template system for consistency.
Changes:
- Add prompt-template.md with customizable placeholders
- Load template from file with fallback to built-in default
- Add {{TASK_ID}} placeholder for status tracking workflow
- Add instructions for mark_change_applied/failed calls
- Replace hardcoded prompt building with template substitution
- Ensure tasks directory exists on startup
- Add requiresToken field to /status endpoint
Placeholders supported:
- {{TASK_ID}}, {{FEEDBACK}}, {{ELEMENT_TAG}}, {{SELECTOR}}
- {{ELEMENT_ID}}, {{ELEMENT_CLASSES}}, {{DOM_PATH}}
- {{COMPUTED_STYLES}}, {{PAGE_URL}}, {{BEAD_CONTEXT}}
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Enhance the extension with secure server connections and queue monitoring. Token Authentication (popup.tsx, service-worker.ts): - Add token input field in popup when server requires authentication - Persist token to chrome.storage.local on successful connection - Clear saved token if connection fails (likely invalid) - Pass token through service worker to WebSocket URL - Support requiresToken flag from server /status endpoint Queue Count Handler (service-worker.ts): - Add GET_QUEUE_COUNT message handler - Fetch pending task count from /tasks endpoint - Route through service worker to avoid CORS restrictions Improved Logging: - Add detailed WebSocket message logging for debugging - Log task update broadcasts to all tabs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Multiple improvements to the content script for better UX and reliability. Queue Count Display (App.tsx, index.tsx): - Add queuedCount state for tracking pending MCP tasks - Show "X queued tasks" toast when tasks are pending - Fetch queue count on extension load via service worker - Poll every 5 seconds to keep count synchronized - Handle 'queued' status in task updates to increment counter - Add blue gradient styling for queued toast Toast Race Condition Fix (FloatingPanel.tsx, App.tsx): - Remove 500ms delay before creating toast after submission - Toast now created immediately, fixing race where server responded before toast existed - Add debug logging for task ID matching Keyboard Shortcut (App.tsx): - Change Windows shortcut from Alt+Shift+V to Ctrl+Alt - More ergonomic one-hand activation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
UI polish for the extension popup. Changes: - Add .retry-btn styles for server retry button - Add margin-top to .disconnect-btn for better spacing - Add .token-section styles for authentication input - Add .token-input with monospace font for token entry - Add .connect-btn:disabled state styling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Bump Vite from v5.0.10 to v7.3.1 for latest features and security fixes. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Extensive documentation updates covering all new features and workflows.
Server Modes:
- Add overview of standalone vs MCP server modes
- Explain when to use each mode
MCP Transport Modes:
- Document stdio transport (production, auto-managed by Claude)
- Document SSE transport (development, independent server)
- Add architecture diagrams for both modes
Configuration:
- Add complete MCP server config examples for both transports
- Add permissions configuration with all MCP tool names
- Show Windows (PowerShell) and macOS/Linux (Bash) hook configs
- Add CLI command for adding SSE transport
MCP Tools:
- Document all tools: get_visual_feedback, mark_change_applied,
mark_change_failed, get_change_details, clear_all_tasks
Prompt Templates:
- Add placeholder reference table including new {{TASK_ID}}
- Explain template customization for both servers
Other Updates:
- Update keyboard shortcuts (Ctrl+Alt for Windows)
- Add platform support section
- Update project structure with new files
- Add hook output example showing automatic task processing
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Ignore local Claude Code settings directory and Windows nul artifact. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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
Major enhancements to the Visual Feedback tool adding MCP integration improvements, cross-platform support, and better developer workflows.
My Workflow Context
My setup differs from the original design. I use VS Code with Vite serving the site via
npm run dev, a browser with hot reloading to preview changes, and Claude connected to that Chrome instance via Claude in Chrome - allowing my Claude session to control the browser, refresh pages, inspect elements, and take screenshots directly.Since I already have Claude open and I'm manually prompting changes, the workflow needed to be more flexible (and work on Windows). These changes adapt the tool to support this async, MCP-driven workflow alongside the original auto-spawn approach.
I've burned a fair few tokens getting this working, but hopefully you find it useful - feel free to merge or cherry-pick as you see fit!
MCP Server Enhancements
prompt-template.mdfiles with placeholder substitution ({{TASK_ID}},{{FEEDBACK}}, etc.)clear_all_tasksfor queue managementMCP Integration Hooks
UserPromptSubmithooks for Windows (PowerShell) and macOS/Linux (Bash)Extension Improvements
CtrltoCtrl+Alt- still one-hand friendly but avoids conflicts with copy/pasteDocumentation
Test Plan
cd mcp-server && npm run buildcd extension && npm run buildSSE_ONLY=1 node dist/index.js, connect via CLIBreaking Changes
None - all changes are additive