diff --git a/BROWSER.md b/BROWSER.md index 8e82a638..cb90aa44 100644 --- a/BROWSER.md +++ b/BROWSER.md @@ -10,7 +10,8 @@ This document covers the command reference and internals of gstack's headless br | Read | `text`, `html`, `links`, `forms`, `accessibility` | Extract content | | Snapshot | `snapshot [-i] [-c] [-d N] [-s sel] [-D] [-a] [-o] [-C]` | Get refs, diff, annotate | | Interact | `click`, `fill`, `select`, `hover`, `type`, `press`, `scroll`, `wait`, `viewport`, `upload` | Use the page | -| Inspect | `js`, `eval`, `css`, `attrs`, `is`, `console`, `network`, `dialog`, `cookies`, `storage`, `perf` | Debug and verify | +| Inspect | `js`, `eval`, `css`, `attrs`, `is`, `console`, `network`, `dialog`, `cookies`, `storage`, `perf`, `inspect [selector] [--all]` | Debug and verify | +| Style | `style `, `style --undo [N]`, `cleanup [--all]`, `prettyscreenshot` | Live CSS editing and page cleanup | | Visual | `screenshot [--viewport] [--clip x,y,w,h] [sel\|@ref] [path]`, `pdf`, `responsive` | See what Claude sees | | Compare | `diff ` | Spot differences between environments | | Dialogs | `dialog-accept [text]`, `dialog-dismiss` | Control alert/confirm/prompt handling | diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d9ca24c..327811a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,13 @@ The sidebar is now a visual design tool. Pick any element on the page and see th - **Page cleanup.** `$B cleanup --all` removes ads, cookie banners, sticky headers, and social widgets for clean screenshots. - **Pretty screenshots.** `$B prettyscreenshot --cleanup --scroll-to ".pricing" ~/Desktop/hero.png` combines cleanup, scroll positioning, and screenshot in one command. - **Stop button.** A red stop button appears in the sidebar when an agent is working. Click it to cancel the current task. +- **CSP fallback for inspector.** Sites with strict Content Security Policy (like SF Chronicle) now get a basic picker via the always-loaded content script. You see computed styles, box model, and same-origin CSS rules. Full CDP mode on sites that allow it. +- **Cleanup button in sidebar.** One click removes ads, cookie banners, sticky headers, and social widgets. Spinner while it works, notification when done. +- **Screenshot button in sidebar.** One click captures a screenshot. Shows the saved file path in the chat. + +### Fixed + +- **Inspector message allowlist.** The background.js allowlist was missing all inspector message types, silently rejecting them. The inspector was broken for all pages, not just CSP-restricted ones. (Found by Codex review.) ### Changed diff --git a/CLAUDE.md b/CLAUDE.md index 0ea420c7..b5162aa9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -100,7 +100,7 @@ gstack/ │ ├── src/ # CLI + commands (generate, variants, compare, serve, etc.) │ ├── test/ # Integration tests │ └── dist/ # Compiled binary -├── extension/ # Chrome extension (side panel + activity feed) +├── extension/ # Chrome extension (side panel + activity feed + CSS inspector) ├── lib/ # Shared libraries (worktree.ts) ├── docs/designs/ # Design documents ├── setup-deploy/ # /setup-deploy skill (one-time deploy config) diff --git a/README.md b/README.md index de015e14..6a9bd313 100644 --- a/README.md +++ b/README.md @@ -187,7 +187,7 @@ Each skill feeds into the next. `/office-hours` writes a design doc that `/plan- | `/freeze` | **Edit Lock** — restrict file edits to one directory. Prevents accidental changes outside scope while debugging. | | `/guard` | **Full Safety** — `/careful` + `/freeze` in one command. Maximum safety for prod work. | | `/unfreeze` | **Unlock** — remove the `/freeze` boundary. | -| `/connect-chrome` | **Chrome Controller** — launch your real Chrome controlled by gstack with the Side Panel extension. Watch every action live. | +| `/connect-chrome` | **Chrome Controller** — launch Chrome with the Side Panel extension. Watch every action live, inspect CSS on any element, clean up pages, and take screenshots. Each tab gets its own agent. | | `/setup-deploy` | **Deploy Configurator** — one-time setup for `/land-and-deploy`. Detects your platform, production URL, and deploy commands. | | `/gstack-upgrade` | **Self-Updater** — upgrade gstack to latest. Detects global vs vendored install, syncs both, shows what changed. |