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>

contexts/chrome-tools.md

@@ -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

contexts/frontend.md

@@ -157,6 +157,53 @@ document.addEventListener('languageChanged', () => {
 
 Static HTML using `data-i18n` attributes is handled automatically by the i18n system. Only dynamically generated HTML needs this pattern.
 
+## Bundling & Development Workflow
+
+The frontend uses **esbuild** to bundle all JS modules and CSS files into single files for production.
+
+### Files
+
+- **Entry points:** `static/js/app.js` (JS), `static/css/all.css` (CSS imports all individual sheets)
+- **Output:** `static/dist/app.bundle.js` and `static/dist/app.bundle.css` (minified + source maps)
+- **Config:** `server/esbuild.mjs`
+- **HTML:** `templates/index.html` references the bundles, not individual source files
+
+### Commands (from `server/` directory)
+
+| Command | Description |
+|---|---|
+| `npm run build` | One-shot bundle + minify (~30ms) |
+| `npm run watch` | Watch mode — auto-rebuilds on any JS/CSS file save |
+
+### Development workflow
+
+1. Run `npm run watch` in a terminal (stays running)
+2. Edit source files in `static/js/` or `static/css/` as usual
+3. esbuild rebuilds the bundle automatically (~30ms)
+4. Refresh the browser to see changes
+
+### Dependencies
+
+All JS/CSS dependencies are bundled — **no CDN or external requests** at runtime:
+
+- **Chart.js** — imported in `perf-charts.js`, exposed as `window.Chart` for `targets.js` and `dashboard.js`
+- **ELK.js** — imported in `graph-layout.js` for graph auto-layout
+- **Fonts** — DM Sans (400-700) and Orbitron (700) woff2 files in `static/fonts/`, declared in `css/fonts.css`
+
+When adding a new JS dependency: `npm install <pkg>` in `server/`, then `import` it in the relevant source file. esbuild bundles it automatically.
+
+### Notes
+
+- The `dist/` directory is gitignored — bundles are build artifacts, run `npm run build` after clone
+- Source maps are generated so browser DevTools show original source files
+- The server sets `Cache-Control: no-cache` on static JS/CSS/JSON to prevent stale browser caches during development
+- GZip compression middleware reduces transfer sizes by ~75%
+- **Do not edit files in `static/dist/`** — they are overwritten by the build
+
+## Chrome Browser Tools
+
+See [`contexts/chrome-tools.md`](chrome-tools.md) for Chrome MCP tool usage, browser tricks (hard reload, zoom, console), and verification workflow.
+
 ## Visual Graph Editor
 
 See [`contexts/graph-editor.md`](graph-editor.md) for full graph editor architecture and conventions.