Bundle frontend with esbuild, serve fonts offline, fix dashboard
- Add esbuild bundling: JS (IIFE, minified, sourcemapped) and CSS into single dist/ files, replacing 15+ individual CSS links and CDN scripts - Bundle Chart.js and ELK.js from npm instead of CDN (fully offline) - Serve DM Sans and Orbitron fonts locally from static/fonts/ - Fix dashboard automation card stretching full width (max-width: 500px) - Fix time_of_day condition not localized in automation cards - Add Chrome browser tools context file for MCP testing workflow - Update frontend context with bundling docs and Chrome tools reference Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
66
contexts/chrome-tools.md
Normal file
66
contexts/chrome-tools.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# Chrome Browser Tools (MCP)
|
||||
|
||||
**Read this file when using Chrome browser tools** (`mcp__claude-in-chrome__*`) for testing or debugging the frontend.
|
||||
|
||||
## Tool Loading
|
||||
|
||||
All Chrome MCP tools are deferred — they must be loaded with `ToolSearch` before first use:
|
||||
|
||||
```
|
||||
ToolSearch query="select:mcp__claude-in-chrome__<tool_name>"
|
||||
```
|
||||
|
||||
Commonly used tools:
|
||||
- `tabs_context_mcp` — get available tabs (call first in every session)
|
||||
- `navigate` — go to a URL
|
||||
- `computer` — screenshots, clicks, keyboard, scrolling, zoom
|
||||
- `read_page` — accessibility tree of page elements
|
||||
- `find` — find elements by text/selector
|
||||
- `javascript_tool` — run JS in the page console
|
||||
- `form_input` — fill form fields
|
||||
|
||||
## Browser Tricks
|
||||
|
||||
### Hard Reload (bypass cache)
|
||||
|
||||
After rebuilding the frontend bundle (`npm run build`), do a hard reload to bypass browser cache:
|
||||
|
||||
```
|
||||
computer action="key" text="ctrl+shift+r"
|
||||
```
|
||||
|
||||
This is equivalent to Ctrl+Shift+R and forces the browser to re-fetch all resources, ignoring cached versions.
|
||||
|
||||
### Zoom into UI regions
|
||||
|
||||
Use the `zoom` action to inspect small UI elements (icons, badges, text):
|
||||
|
||||
```
|
||||
computer action="zoom" region=[x0, y0, x1, y1]
|
||||
```
|
||||
|
||||
Coordinates define a rectangle from top-left to bottom-right in viewport pixels.
|
||||
|
||||
### Scroll to element
|
||||
|
||||
Use `scroll_to` with a `ref` from `read_page` to bring an element into view:
|
||||
|
||||
```
|
||||
computer action="scroll_to" ref="ref_123"
|
||||
```
|
||||
|
||||
### Console messages
|
||||
|
||||
Use `read_console_messages` to check for JS errors after page load or interactions.
|
||||
|
||||
### Network requests
|
||||
|
||||
Use `read_network_requests` to inspect API calls, check response codes, and debug loading issues.
|
||||
|
||||
## Typical Verification Workflow
|
||||
|
||||
1. Rebuild bundle: `npm run build` (from `server/` directory)
|
||||
2. Hard reload: `ctrl+shift+r`
|
||||
3. Take screenshot to verify visual changes
|
||||
4. Zoom into specific regions if needed
|
||||
5. Check console for errors
|
||||
Reference in New Issue
Block a user