mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-01 19:25:10 +02:00
feat: GStack Browser — double-click AI browser with anti-bot stealth (#695)
* feat: CDP inspector module — persistent sessions, CSS cascade, style modification New browse/src/cdp-inspector.ts with full CDP inspection engine: - inspectElement() via CSS.getMatchedStylesForNode + DOM.getBoxModel - modifyStyle() via CSS.setStyleTexts with headless page.evaluate fallback - Persistent CDP session lifecycle (create, reuse, detach on nav, re-create) - Specificity sorting, overridden property detection, UA rule filtering - Modification history with undo support - formatInspectorResult() for CLI output Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: browse server inspector endpoints + inspect/style/cleanup/prettyscreenshot CLI Server endpoints: POST /inspector/pick, GET /inspector, POST /inspector/apply, POST /inspector/reset, GET /inspector/history, GET /inspector/events (SSE). CLI commands: inspect (CDP cascade), style (live CSS mod), cleanup (page clutter removal), prettyscreenshot (clean screenshot pipeline). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: sidebar CSS inspector — element picker, box model, rule cascade, quick edit Extension changes for the visual CSS inspector: - inspector.js: element picker with hover highlight, CSS selector generation, basic mode fallback (getComputedStyle + CSSOM), page alteration handlers - inspector.css: picker overlay styles (blue highlight + tooltip) - background.js: inspector message routing (picker <-> server <-> sidepanel) - sidepanel: Inspector tab with box model viz (gstack palette), matched rules with specificity badges, computed styles, click-to-edit quick edit, Send to Agent/Code button, empty/loading/error states Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: document inspect, style, cleanup, prettyscreenshot browse commands Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: auto-track user-created tabs and handle tab close browser-manager.ts changes: - context.on('page') listener: automatically tracks tabs opened by the user (Cmd+T, right-click open in new tab, window.open). Previously only programmatic newTab() was tracked, so user tabs were invisible. - page.on('close') handler in wirePageEvents: removes closed tabs from the pages map and switches activeTabId to the last remaining tab. - syncActiveTabByUrl: match Chrome extension's active tab URL to the correct Playwright page for accurate tab identity. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: per-tab agent isolation via BROWSE_TAB environment variable Prevents parallel sidebar agents from interfering with each other's tab context. Three-layer fix: - sidebar-agent.ts: passes BROWSE_TAB=<tabId> env var to each claude process, per-tab processing set allows concurrent agents across tabs - cli.ts: reads process.env.BROWSE_TAB and includes tabId in command request body - server.ts: handleCommand() temporarily switches activeTabId when tabId is present, restores after command completes (safe: Bun event loop is single-threaded) Also: per-tab agent state (TabAgentState map), per-tab message queuing, per-tab chat buffers, verbose streaming narration, stop button endpoint. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: sidebar per-tab chat context, tab bar sync, stop button, UX polish Extension changes: - sidepanel.js: per-tab chat history (tabChatHistories map), switchChatTab() swaps entire chat view, browserTabActivated handler for instant tab sync, stop button wired to /sidebar-agent/stop, pollTabs renders tab bar - sidepanel.html: updated banner text ("Browser co-pilot"), stop button markup, input placeholder "Ask about this page..." - sidepanel.css: tab bar styles, stop button styles, loading state fixes - background.js: chrome.tabs.onActivated sends browserTabActivated to sidepanel with tab URL for instant tab switch detection Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: per-tab isolation, BROWSE_TAB pinning, tab tracking, sidebar UX sidebar-agent.test.ts (new tests): - BROWSE_TAB env var passed to claude process - CLI reads BROWSE_TAB and sends tabId in body - handleCommand accepts tabId, saves/restores activeTabId - Tab pinning only activates when tabId provided - Per-tab agent state, queue, concurrency - processingTabs set for parallel agents sidebar-ux.test.ts (new tests): - context.on('page') tracks user-created tabs - page.on('close') removes tabs from pages map - Tab isolation uses BROWSE_TAB not system prompt hack - Per-tab chat context in sidepanel - Tab bar rendering, stop button, banner text Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: resolve merge conflicts — keep security defenses + per-tab isolation Merged main's security improvements (XML escaping, prompt injection defense, allowed commands whitelist, --model opus, Write tool, stderr capture) with our branch's per-tab isolation (BROWSE_TAB env var, processingTabs set, no --resume). Updated test expectations for expanded system prompt. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * chore: bump version and changelog (v0.13.9.0) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: add inspector message types to background.js allowlist Pre-existing bug found by Codex: ALLOWED_TYPES in background.js was missing all inspector message types (startInspector, stopInspector, elementPicked, pickerCancelled, applyStyle, toggleClass, injectCSS, resetAll, inspectResult). Messages were silently rejected, making the inspector broken on ALL pages. Also: separate executeScript and insertCSS into individual try blocks in injectInspector(), store inspectorMode for routing, and add content.js fallback when script injection fails (CSP, chrome:// pages). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: basic element picker in content.js for CSP-restricted pages When inspector.js can't be injected (CSP, chrome:// pages), content.js provides a basic picker using getComputedStyle + CSSOM: - startBasicPicker/stopBasicPicker message handlers - captureBasicData() with ~30 key CSS properties, box model, matched rules - Hover highlight with outline save/restore (never leaves artifacts) - Click uses e.target directly (no re-querying by selector) - Sends inspectResult with mode:'basic' for sidebar rendering - Escape key cancels picker and restores outlines Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: cleanup + screenshot buttons in sidebar inspector toolbar Two action buttons in the inspector toolbar: - Cleanup (🧹): POSTs cleanup --all to server, shows spinner, chat notification on success, resets inspector state (element may be removed) - Screenshot (📸): POSTs screenshot to server, shows spinner, chat notification with saved file path Shared infrastructure: - .inspector-action-btn CSS with loading spinner via ::after pseudo-element - chat-notification type in addChatEntry() for system messages - package.json version bump to 0.13.9.0 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: inspector allowlist, CSP fallback, cleanup/screenshot buttons 16 new tests in sidebar-ux.test.ts: - Inspector message allowlist includes all inspector types - content.js basic picker (startBasicPicker, captureBasicData, CSSOM, outline save/restore, inspectResult with mode basic, Escape cleanup) - background.js CSP fallback (separate try blocks, inspectorMode, fallback) - Cleanup button (POST /command, inspector reset after success) - Screenshot button (POST /command, notification rendering) - Chat notification type and CSS styles Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: update project documentation for v0.13.9.0 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: cleanup + screenshot buttons in chat toolbar (not just inspector) Quick actions toolbar (🧹 Cleanup, 📸 Screenshot) now appears above the chat input, always visible. Both inspector and chat buttons share runCleanup() and runScreenshot() helper functions. Clicking either set shows loading state on both simultaneously. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: chat toolbar buttons, shared helpers, quick-action-btn styles Tests that chat toolbar exists (chat-cleanup-btn, chat-screenshot-btn, quick-actions container), CSS styles (.quick-action-btn, .quick-action-btn.loading), shared runCleanup/runScreenshot helper functions, and cleanup inspector reset. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: aggressive cleanup heuristics — overlays, scroll unlock, blur removal Massively expanded CLEANUP_SELECTORS with patterns from uBlock Origin and Readability.js research: - ads: 30+ selectors (Google, Amazon, Outbrain, Taboola, Criteo, etc.) - cookies: OneTrust, Cookiebot, TrustArc, Quantcast + generic patterns - overlays (NEW): paywalls, newsletter popups, interstitials, push prompts, app download banners, survey modals - social: follow prompts, share tools - Cleanup now defaults to --all when no args (sidebar button fix) - Uses !important on all display:none (overrides inline styles) - Unlocks body/html scroll (overflow:hidden from modal lockout) - Removes blur/filter effects (paywall content blur) - Removes max-height truncation (article teaser truncation) - Collapses empty ad placeholder whitespace (empty divs after ad removal) - Skips gstack-ctrl indicator in sticky removal Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: disable action buttons when disconnected, no error spam - setActionButtonsEnabled() toggles .disabled class on all cleanup/screenshot buttons (both chat toolbar and inspector toolbar) - Called with false in updateConnection when server URL is null - Called with true when connection established - runCleanup/runScreenshot silently return when disconnected instead of showing 'Not connected' error notifications - CSS .disabled style: pointer-events:none, opacity:0.3, cursor:not-allowed Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: cleanup heuristics, button disabled state, overlay selectors 17 new tests: - cleanup defaults to --all on empty args - CLEANUP_SELECTORS overlays category (paywall, newsletter, interstitial) - Major ad networks in selectors (doubleclick, taboola, criteo, etc.) - Major consent frameworks (OneTrust, Cookiebot, TrustArc, Quantcast) - !important override for inline styles - Scroll unlock (body overflow:hidden) - Blur removal (paywall content blur) - Article truncation removal (max-height) - Empty placeholder collapse - gstack-ctrl indicator skip in sticky cleanup - setActionButtonsEnabled function - Buttons disabled when disconnected - No error spam from cleanup/screenshot when disconnected - CSS disabled styles for action buttons Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: LLM-based page cleanup — agent analyzes page semantically Instead of brittle CSS selectors, the cleanup button now sends a prompt to the sidebar agent (which IS an LLM). The agent: 1. Runs deterministic $B cleanup --all as a quick first pass 2. Takes a snapshot to see what's left 3. Analyzes the page semantically to identify remaining clutter 4. Removes elements intelligently, preserving site branding This means cleanup works correctly on any site without site-specific selectors. The LLM understands that "Your Daily Puzzles" is clutter, "ADVERTISEMENT" is junk, but the SF Chronicle masthead should stay. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: aggressive cleanup heuristics + preserve top nav bar Deterministic cleanup improvements (used as first pass before LLM analysis): - New 'clutter' category: audio players, podcast widgets, sidebar puzzles/games, recirculation widgets (taboola, outbrain, nativo), cross-promotion banners - Text-content detection: removes "ADVERTISEMENT", "Article continues below", "Sponsored", "Paid content" labels and their parent wrappers - Sticky fix: preserves the topmost full-width element near viewport top (site nav bar) instead of hiding all sticky/fixed elements. Sorts by vertical position, preserves the first one that spans >80% viewport width. Tests: clutter category, ad label removal, nav bar preservation logic. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: LLM-based cleanup architecture, deterministic heuristics, sticky nav 22 new tests covering: - Cleanup button uses /sidebar-command (agent) not /command (deterministic) - Cleanup prompt includes deterministic first pass + agent snapshot analysis - Cleanup prompt lists specific clutter categories for agent guidance - Cleanup prompt preserves site identity (masthead, headline, body, byline) - Cleanup prompt instructs scroll unlock and $B eval removal - Loading state management (async agent, setTimeout) - Deterministic clutter: audio/podcast, games/puzzles, recirculation - Ad label text patterns (ADVERTISEMENT, Sponsored, Article continues) - Ad label parent wrapper hiding for small containers - Sticky nav preservation (sort by position, first full-width near top) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: GStack Browser stealth + branding — anti-bot patches, custom UA, rebrand - Add GSTACK_CHROMIUM_PATH env var for custom Chromium binary - Add BROWSE_EXTENSIONS_DIR env var for extension path override - Move auth token to /health endpoint (fixes read-only .app bundles) - Anti-bot stealth: disable navigator.webdriver, fake plugins, languages - Custom user agent: Chrome/<version> GStackBrowser (auto-detects version) - Rebrand Chromium plist to "GStack Browser" at launch time - Update security test to match new token-via-health approach * feat: GStack Browser .app bundle — launcher script + build system - scripts/app/gstack-browser: dual-mode launcher (dev + .app bundle) - scripts/build-app.sh: compiles binary, bundles Chromium + extension, creates DMG - Rebrands Chromium plist during build for "GStack Browser" in menu bar - 389MB .app, 189MB compressed DMG, launches in ~5s * docs: GStack Browser V0 master plan — AI-native development browser vision 5-phase roadmap from .app wrapper through Chromium fork, 9 capability visions, competitive landscape, architecture diagrams, design system. * fix: restore package.json and sync version to 0.14.3.0 * chore: bump version and changelog (v0.14.4.0) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: gitignore top-level dist/ (GStack Browser build output) * feat: GStack Browser icon — custom .icns replaces Chromium's Dock icon - Generated 1024px icon: dark terminal window with amber prompt cursor - Converted to .icns with all macOS sizes (16-1024px, 1x and 2x) - build-app.sh copies icon into both the outer .app and bundled Chromium's Resources (Chromium's process owns the Dock icon, not the launcher) - browser-manager.ts patches Chromium's icon at runtime for dev mode too - Both the Dock and Cmd+Tab now show the GStack icon * feat: rename /connect-chrome → /open-gstack-browser - Rename skill directory + update frontmatter name and description - Update SKILL.md.tmpl to reference GStack Browser branding/stealth - Create connect-chrome symlink for backwards compatibility - Setup script creates /connect-chrome alias in .claude/skills/ - Fix package.json version sync (0.14.5.0 → 0.14.6.0) * feat: rename /connect-chrome → /open-gstack-browser across all references Update README skill lists, docs/skills.md deep dive, extension sidepanel banner copy button, and reconnect clipboard text. * feat: left-align sidebar UI + extension-ready event for welcome page - Left-align all sidebar text (chat welcome, loading, empty states, notifications, inspector empty, session placeholder) - Dispatch 'gstack-extension-ready' CustomEvent from content.js so the welcome page can detect when the sidebar is active * chore: add GStack Browser TODOs — CDP stealth patches + Chromium fork P1: rebrowser-style postinstall patcher for Playwright 1.58.2 (suppress Runtime.enable, addBinding context discovery, 6 files, ~200 lines). P2: long-term Chromium fork for permanent stealth + native sidebar. * chore: regenerate open-gstack-browser/SKILL.md from template Fix timeline skill name (connect-chrome → open-gstack-browser) and preamble formatting from merge with main's updated template. * feat: welcome page served from browse server on headed launch - Add /welcome endpoint to server.ts, serves welcome.html - Navigate to /welcome after server starts (not during launchHeaded, which runs before the server is listening) - welcome.html bundled in browse/src/ for portability * feat: auto-open sidebar on every browser launch, not just first install - Add top-level setTimeout in background.js that fires on every service worker startup (onInstalled only fires on install/update) - Remove misaligned arrow from welcome page, replace with text fallback that hides when extension content script fires gstack-extension-ready * fix: sidebar auto-open retry with backoff + welcome page tests - Replace single-attempt sidePanel.open() with autoOpenSidePanel() that retries up to 5 times with 500ms-5000ms backoff - Fire on both onInstalled AND every service worker startup - Remove misaligned arrow from welcome page, replace with text fallback - Add 12 tests: welcome page structure, /welcome endpoint, headed launch navigation timing, sidebar auto-open retry logic, extension-ready event * feat: reload button in sidebar footer Adds a "reload" button next to "debug" and "clear" in the sidebar footer. Calls location.reload() to fully refresh the side panel, re-run connection logic, and clear stale state. * feat: right-pointing arrow hint for sidebar on welcome page Replace invisible text fallback with visible amber bubble + animated right arrow (→) pointing toward where the sidebar opens. Always correct regardless of window size (unlike the old up arrow at toolbar chrome). * fix: sidebar auth race — pass token in getPort response The sidebar called tryConnect() → getPort → got {port, connected} but NO token. All subsequent requests (SSE, chat poll) failed with 401. The token only arrived later via the health broadcast, but by then the SSE connection was already broken. Fix: include authToken in the getPort response so the sidebar has the token from its very first connection attempt. * feat: sidebar debug visibility + auth race tests - Show attempt count in loading screen ("Connecting... attempt 3") - After 5 failed attempts, show debug details (port, connected, token) so stuck users can see exactly what's failing - Add 4 tests: getPort includes token, tryConnect uses token, dead state exists with MAX_RECONNECT_ATTEMPTS, reconnectAttempts visible * fix: startup health check retries every 1s instead of 10s Root cause: extension service worker starts before Bun.serve() is listening. First checkHealth() fails, next attempt is 10 seconds later. User stares at "Connecting..." for 10 seconds. Fix: retry every 1s for up to 15 attempts on startup, then switch to 10s polling once connected (or after 15s gives up). Sidebar should connect within 1-2 seconds of server becoming available. 3 new tests verify the fast-retry → slow-poll transition. * feat: detailed step-by-step status in sidebar loading screen Replace useless "Connecting..." with real-time debug info: - "Looking for browse server... (attempt N)" - Shows port, server responding status, token status - Shows chrome.runtime errors if extension messaging fails - Tells user to run /open-gstack-browser if server not found * fix: sidebar connects directly to /health instead of waiting for background Root cause: sidepanel asked background "are you connected?" but background's health check hadn't succeeded yet (1-10s gap). Sidepanel waited forever. Fix: when background says not connected, sidepanel hits /health directly with fetch(). Gets the token from the response. Bypasses background entirely for initial connection. Shows step-by-step debug info: "Checking server directly... port: 34567 / Trying GET /health..." * fix: suppress fake "session ended" and timeout errors in sidebar Two issues making the sidebar look broken when it's actually working: 1. "Timed out after 300s" error displayed after agent_done — this is a cleanup timer, not a real error. Now suppressed when no active session. 2. "(session ended)" text appended on every idle poll — removed entirely. The thinking spinner is cleaned up silently instead. * fix: sidebar agent passes BROWSE_PORT to child claude Ensures the child claude process connects to the existing headed browse server (port 34567) instead of spawning a new headless one. Without this, sidebar chat commands run in an invisible browser. * feat: BROWSE_NO_AUTOSTART prevents sidebar from spawning headless browser When set, the browse CLI refuses to start a new server and exits with a clear error: "Server not available, run /open-gstack-browser to restart." The sidebar agent sets this so users never get an invisible headless browser when the headed one is closed. * test: BROWSE_NO_AUTOSTART guard in CLI + sidebar-agent env vars 5 tests: CLI checks env var before starting server, shows actionable error, sidebar-agent sets the flag + BROWSE_PORT, guard runs before lock acquisition to prevent stale lock files. * fix: stale auth token causes Unauthorized + invisible error text background.js checkHealth() never refreshed authToken from /health responses, so when the browse server restarted with a new token, all sidebar-command requests got 401 Unauthorized forever. Also: error placeholder text was #3f3f46 on #0C0C0C (nearly invisible). Now shows in red to match the error border. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: replace 40+ silent catch blocks with debug logging Every empty catch {} in sidepanel.js, sidebar-agent.ts now logs with [gstack sidebar] or [sidebar-agent] prefix. Chat poll 401s, stop agent, tab poll, clear chat, SSE parse, refs fetch, stream JSON parse, queue read/parse, process kill — all now visible in console. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: noisy debug logging + auto model routing in browse server Server-side silent catch blocks (22 instances) now log with [browse] prefix: chat persistence, session save/load, agent kill, tab pin/restore, welcome page, buffer flush, worktree cleanup, lock files, SSE streams. Also adds pickSidebarModel() — routes sidebar messages to sonnet for navigation/interaction (click, goto, fill, screenshot) and opus for analysis/comprehension (summarize, describe, find bugs). Sonnet is ~4x faster for action commands with zero quality difference. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: update sidebar tests for model router + longer stopAgent slice - stopAgent slice 800→1000 to accommodate added error logging lines - Replace hardcoded opus assertion with model router assertions Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: sidebar arrow hint stays visible until sidebar actually opens Previously the welcome page arrow hid immediately when the extension's content script loaded — but extension loaded ≠ sidebar open. Now the signal flow is: sidepanel connects → tells background.js → relays to content script → dispatches gstack-extension-ready → arrow hides. Adds welcome-page.test.ts: 14 tests verifying arrow, branding, feature cards, dark theme, and auto-hide behavior via real HTTP server. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: arrow hide signal chain (4-step) + stale session-ended assertion 8 new tests verify the sidebarOpened → background → content → welcome signal chain. Updates stale "(session ended)" test that checked for text removed in a prior commit. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: preserve optimistic UI during tab switch on first message When the user sends a message and the server assigns it to a new tab (because Chrome's active tab changed), switchChatTab() was blowing away the optimistic user bubble and thinking dots with a welcome screen. Now preserves the current DOM if we're mid-send with a thinking indicator. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: sidebar message flow architecture doc + CLAUDE.md pointer SIDEBAR_MESSAGE_FLOW.md documents the full init timeline, message flow (user types → claude responds), auth token chain, arrow hint signal chain, model routing, tab concurrency, and known failure modes. CLAUDE.md now tells you to read it before touching sidebar files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: sidebar chat resets idle timer + shutdown kills sidebar-agent Two fixes for the "browser died while chatting" problem: 1. /sidebar-command now calls resetIdleTimer(). Previously only CLI commands reset it, so the server would shut down after 30 min even while the user was actively chatting in the sidebar. 2. shutdown() now pkills the sidebar-agent daemon. Previously the agent survived server shutdown, kept polling a dead server, and spawned confused claude processes that auto-started headless browsers. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: disable idle timeout in headed mode — browser lives until closed The 30-minute idle timeout only applies to headless mode now. In headed mode the user is looking at the Chrome window, so auto-shutdown is wrong. The browser stays alive until explicit disconnect or window close. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: cookies button in sidebar footer opens cookie picker One-click cookie import from the sidebar. Navigates the headed browser to /cookie-picker where you can select which domains to import from your real Chrome profile. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: update project documentation for GStack Browser improvements README.md: updated Real browser mode and sidebar agent sections with model routing, cookie import button, no idle timeout in headed mode. Updated skill table entries for /browse and /open-gstack-browser. docs/skills.md: updated /open-gstack-browser deep dive with model routing and cookie import details. GSTACK_BROWSER_V0.md: added 6 new SHIPPED items to implementation status table (model routing, debug logging, idle timeout, cookie button, arrow hint, architecture doc). TODOS.md: marked "Sidebar agent Write tool + error visibility" as SHIPPED. Added new P2 TODO for direct API calls to eliminate claude -p startup tax. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add Claude Code terminal example to welcome page TRY IT NOW Fifth example shows the parent agent workflow: navigate, extract CSS, write to file. The other four are all sidebar-only. This one shows co-presence — the Claude Code session that launched the browser can also control it directly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: hide internal tool-result file reads from sidebar activity Claude reads its own ~/.claude/projects/.../tool-results/ files as internal plumbing. These showed up as long unreadable paths in the sidebar. Now: describeToolCall returns empty for tool-result reads, and the sidebar skips rendering tool_use entries with no description. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: collapse tool calls into "See reasoning" disclosure on completion While the agent is working, tool calls stream live so you can watch progress. When the agent finishes, all tool calls collapse into a "See reasoning (N steps)" disclosure. Click to expand and see what the agent did. The final text answer stays visible. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: 17 new tests for recent sidebar fixes Covers: tool-result file filtering, empty tool_use skip, reasoning disclosure collapse, idle timeout headed mode bypass, sidebar-command idle reset, shutdown sidebar-agent kill, cookie button, and model routing analysis-before-action priority. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: move cookies button to quick actions toolbar Cookies now sits next to Cleanup and Screenshot as a primary action button (🍪 Cookies) instead of buried in the footer. Same behavior, more discoverable. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add instructional text to cookie picker page "Select the domains of cookies you want to import to GStack Browser. You'll be able to browse those sites with the same login as your other browser." Also fixes stale test that expected hardcoded '--model', 'opus'. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: 6-card welcome page with cookie import + dual-agent cards 3x2 grid layout (was 2x2). New cards: "Import your cookies" (click 🍪 Cookies to import login sessions from Chrome/Arc/Brave) and "Or use your main agent" (your Claude Code terminal also controls this browser). Responsive: 3 cols > 2 cols > 1 col. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: move sidebar arrow hint to top-right instead of vertically centered The arrow was centered vertically which put it behind the feature cards. Now positioned at top: 80px where there's open space and it's more visible. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
@@ -1,5 +1,6 @@
|
||||
.env
|
||||
node_modules/
|
||||
dist/
|
||||
browse/dist/
|
||||
design/dist/
|
||||
bin/gstack-global-discover
|
||||
|
||||
@@ -95,7 +95,8 @@ gstack/
|
||||
├── cso/ # /cso skill (OWASP Top 10 + STRIDE security audit)
|
||||
├── design-consultation/ # /design-consultation skill (design system from scratch)
|
||||
├── design-shotgun/ # /design-shotgun skill (visual design exploration)
|
||||
├── connect-chrome/ # /connect-chrome skill (headed Chrome with side panel)
|
||||
├── open-gstack-browser/ # /open-gstack-browser skill (launch GStack Browser)
|
||||
├── connect-chrome/ # symlink → open-gstack-browser (backwards compat)
|
||||
├── design/ # Design binary CLI (GPT Image API)
|
||||
│ ├── src/ # CLI + commands (generate, variants, compare, serve, etc.)
|
||||
│ ├── test/ # Integration tests
|
||||
@@ -167,6 +168,14 @@ When you need to interact with a browser (QA, dogfooding, cookie setup), use the
|
||||
`mcp__claude-in-chrome__*` tools — they are slow, unreliable, and not what this
|
||||
project uses.
|
||||
|
||||
**Sidebar architecture:** Before modifying `sidepanel.js`, `background.js`,
|
||||
`content.js`, `sidebar-agent.ts`, or sidebar-related server endpoints, read
|
||||
`docs/designs/SIDEBAR_MESSAGE_FLOW.md`. It documents the full initialization
|
||||
timeline, message flow, auth token chain, tab concurrency model, and known
|
||||
failure modes. The sidebar spans 5 files across 2 codebases (extension + server)
|
||||
with non-obvious ordering dependencies. The doc exists to prevent the kind of
|
||||
silent failures that come from not understanding the cross-component flow.
|
||||
|
||||
## Vendored symlink awareness
|
||||
|
||||
When developing gstack, `.claude/skills/gstack` may be a symlink back to this
|
||||
|
||||
@@ -183,7 +183,7 @@ Each skill feeds into the next. `/office-hours` writes a design doc that `/plan-
|
||||
| `/benchmark` | **Performance Engineer** | Baseline page load times, Core Web Vitals, and resource sizes. Compare before/after on every PR. |
|
||||
| `/document-release` | **Technical Writer** | Update all project docs to match what you just shipped. Catches stale READMEs automatically. |
|
||||
| `/retro` | **Eng Manager** | Team-aware weekly retro. Per-person breakdowns, shipping streaks, test health trends, growth opportunities. `/retro global` runs across all your projects and AI tools (Claude Code, Codex, Gemini). |
|
||||
| `/browse` | **QA Engineer** | Give the agent eyes. Real Chromium browser, real clicks, real screenshots. ~100ms per command. `$B connect` launches your real Chrome as a headed window — watch every action live. |
|
||||
| `/browse` | **QA Engineer** | Give the agent eyes. Real Chromium browser, real clicks, real screenshots. ~100ms per command. `/open-gstack-browser` launches GStack Browser with sidebar, anti-bot stealth, and auto model routing. |
|
||||
| `/setup-browser-cookies` | **Session Manager** | Import cookies from your real browser (Chrome, Arc, Brave, Edge) into the headless session. Test authenticated pages. |
|
||||
| `/autoplan` | **Review Pipeline** | One command, fully reviewed plan. Runs CEO → design → eng review automatically with encoded decision principles. Surfaces only taste decisions for your approval. |
|
||||
| `/learn` | **Memory** | Manage what gstack learned across sessions. Review, search, prune, and export project-specific patterns, pitfalls, and preferences. Learnings compound across sessions so gstack gets smarter on your codebase over time. |
|
||||
@@ -206,7 +206,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 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. |
|
||||
| `/open-gstack-browser` | **GStack Browser** — launch GStack Browser with sidebar, anti-bot stealth, auto model routing (Sonnet for actions, Opus for analysis), one-click cookie import, and Claude Code integration. Clean up pages, take smart screenshots, edit CSS, and pass info back to your terminal. |
|
||||
| `/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. |
|
||||
|
||||
@@ -226,11 +226,11 @@ gstack works well with one sprint. It gets interesting with ten running at once.
|
||||
|
||||
**`/document-release` is the engineer you never had.** It reads every doc file in your project, cross-references the diff, and updates everything that drifted. README, ARCHITECTURE, CONTRIBUTING, CLAUDE.md, TODOS — all kept current automatically. And now `/ship` auto-invokes it — docs stay current without an extra command.
|
||||
|
||||
**Real browser mode.** `$B connect` launches your actual Chrome as a headed window controlled by Playwright. You watch Claude click, fill, and navigate in real time — same window, same screen. A subtle green shimmer at the top edge tells you which Chrome window gstack controls. All existing browse commands work unchanged. `$B disconnect` returns to headless. A Chrome extension Side Panel shows a live activity feed of every command and a chat sidebar where you can direct Claude. This is co-presence — Claude isn't remote-controlling a hidden browser, it's sitting next to you in the same cockpit.
|
||||
**Real browser mode.** `/open-gstack-browser` launches GStack Browser, an AI-controlled Chromium with anti-bot stealth, custom branding, and the sidebar extension baked in. Sites like Google and NYTimes work without captchas. The menu bar says "GStack Browser" instead of "Chrome for Testing." Your regular Chrome stays untouched. All existing browse commands work unchanged. `$B disconnect` returns to headless. The browser stays alive as long as the window is open... no idle timeout killing it while you're working.
|
||||
|
||||
**Sidebar agent — your AI browser assistant.** Type natural language instructions in the Chrome side panel and a child Claude instance executes them. "Navigate to the settings page and screenshot it." "Fill out this form with test data." "Go through every item in this list and extract the prices." Each task gets up to 5 minutes. The sidebar agent runs in an isolated session, so it won't interfere with your main Claude Code window. It's like having a second pair of hands in the browser.
|
||||
**Sidebar agent — your AI browser assistant.** Type natural language in the Chrome side panel and a child Claude instance executes it. "Navigate to the settings page and screenshot it." "Fill out this form with test data." "Go through every item in this list and extract the prices." The sidebar auto-routes to the right model: Sonnet for fast actions (click, navigate, screenshot) and Opus for reading and analysis. Each task gets up to 5 minutes. The sidebar agent runs in an isolated session, so it won't interfere with your main Claude Code window. One-click cookie import right from the sidebar footer.
|
||||
|
||||
**Personal automation.** The sidebar agent isn't just for dev workflows. Example: "Browse my kid's school parent portal and add all the other parents' names, phone numbers, and photos to my Google Contacts." Two ways to get authenticated: (1) log in once in the headed browser — your session persists, or (2) run `/setup-browser-cookies` to import cookies from your real Chrome. Once authenticated, Claude navigates the directory, extracts the data, and creates the contacts.
|
||||
**Personal automation.** The sidebar agent isn't just for dev workflows. Example: "Browse my kid's school parent portal and add all the other parents' names, phone numbers, and photos to my Google Contacts." Two ways to get authenticated: (1) log in once in the headed browser, your session persists, or (2) click the "cookies" button in the sidebar footer to import cookies from your real Chrome. Once authenticated, Claude navigates the directory, extracts the data, and creates the contacts.
|
||||
|
||||
**Browser handoff when the AI gets stuck.** Hit a CAPTCHA, auth wall, or MFA prompt? `$B handoff` opens a visible Chrome at the exact same page with all your cookies and tabs intact. Solve the problem, tell Claude you're done, `$B resume` picks up right where it left off. The agent even suggests it automatically after 3 consecutive failures.
|
||||
|
||||
@@ -306,7 +306,7 @@ Data is stored in [Supabase](https://supabase.com) (open source Firebase alterna
|
||||
Use /browse from gstack for all web browsing. Never use mcp__claude-in-chrome__* tools.
|
||||
Available skills: /office-hours, /plan-ceo-review, /plan-eng-review, /plan-design-review,
|
||||
/design-consultation, /design-shotgun, /design-html, /review, /ship, /land-and-deploy,
|
||||
/canary, /benchmark, /browse, /connect-chrome, /qa, /qa-only, /design-review,
|
||||
/canary, /benchmark, /browse, /open-gstack-browser, /qa, /qa-only, /design-review,
|
||||
/setup-browser-cookies, /setup-deploy, /retro, /investigate, /document-release, /codex,
|
||||
/cso, /autoplan, /careful, /freeze, /guard, /unfreeze, /gstack-upgrade, /learn.
|
||||
```
|
||||
|
||||
@@ -199,16 +199,22 @@ Sidebar agent writes structured messages to `.context/sidebar-inbox/`. Workspace
|
||||
**Priority:** P3
|
||||
**Depends on:** Headed mode (shipped)
|
||||
|
||||
### Sidebar agent needs Write tool + better error visibility
|
||||
### Sidebar agent needs Write tool + better error visibility — SHIPPED
|
||||
|
||||
**What:** Two issues with the sidebar agent (`sidebar-agent.ts`): (1) `--allowedTools` is hardcoded to `Bash,Read,Glob,Grep`, missing `Write`. Claude can't create files (like CSVs) when asked. (2) When Claude errors or returns empty, the sidebar UI shows nothing, just a green dot. No error message, no "I tried but failed", nothing.
|
||||
|
||||
**Why:** Users ask "write this to a CSV" and the sidebar silently can't. Then they think it's broken. The UI needs to surface errors visibly, and Claude needs the tools to actually do what's asked.
|
||||
**Completed:** v0.15.4.0 (2026-04-04). Write tool added to allowedTools. 40+ empty catch blocks replaced with `[gstack sidebar]`, `[gstack bg]`, `[browse]`, `[sidebar-agent]` prefixed console logging across all 4 files (sidepanel.js, background.js, server.ts, sidebar-agent.ts). Error placeholder text now shows in red. Auth token stale-refresh bug fixed.
|
||||
|
||||
**Context:** `sidebar-agent.ts:163` hardcodes `--allowedTools`. The event relay (`handleStreamEvent`) handles `agent_done` and `agent_error` but the extension's sidepanel.js may not be rendering error states. The sidebar should show "Error: ..." or "Claude finished but produced no output" instead of staying on the green dot forever.
|
||||
### Sidebar direct API calls (eliminate claude -p startup tax)
|
||||
|
||||
**Effort:** S (human: ~2h / CC: ~10min)
|
||||
**Priority:** P1
|
||||
**What:** Each sidebar message spawns a fresh `claude -p` process (~2-3s cold start overhead). For "click @e24" that's absurd. Direct Anthropic API calls would be sub-second.
|
||||
|
||||
**Why:** The `claude -p` startup cost is: process spawn (~100ms) + CLI init (~500ms-1s) + API connection (~200ms) + first token. Model routing (Sonnet for actions) helps but doesn't fix the CLI overhead.
|
||||
|
||||
**Context:** `server.ts:spawnClaude()` builds args and writes to queue file. `sidebar-agent.ts:askClaude()` spawns `claude -p`. Replace with direct `fetch('https://api.anthropic.com/...')` with tool use. Requires `ANTHROPIC_API_KEY` accessible to the browse server.
|
||||
|
||||
**Effort:** M (human: ~1 week / CC: ~30min)
|
||||
**Priority:** P2
|
||||
**Depends on:** None
|
||||
|
||||
### Chrome Web Store publishing
|
||||
@@ -790,6 +796,32 @@ Shipped in v0.6.5. TemplateContext in gen-skill-docs.ts bakes skill name into pr
|
||||
**Priority:** P3
|
||||
**Depends on:** --host factory
|
||||
|
||||
## GStack Browser
|
||||
|
||||
### Anti-bot stealth: Playwright CDP patches (rebrowser-style)
|
||||
|
||||
**What:** Write a postinstall script that patches Playwright's CDP layer to suppress `Runtime.enable` and use `addBinding` for context ID discovery, same approach as rebrowser-patches. Eliminates the `navigator.webdriver`, `cdc_` markers, and other CDP artifacts that sites like Google use to detect automation.
|
||||
|
||||
**Why:** Our current stealth patches (UA override, navigator.webdriver=false, fake plugins) work on most sites but Google still triggers captchas. The real detection is at the CDP protocol level. rebrowser-patches proved the approach works but their patches target Playwright 1.52.0 and don't apply to our 1.58.2. We need our own patcher using string matching instead of line-number diffs. 6 files, ~200 lines of patches total.
|
||||
|
||||
**Context:** Full analysis of rebrowser-patches source: patches 6 files in `playwright-core/lib/server/` (crConnection.js, crDevTools.js, crPage.js, crServiceWorker.js, frames.js, page.js). Key technique: suppress `Runtime.enable` (the main CDP detection vector), use `Runtime.addBinding` + `CustomEvent` trick to discover execution context IDs without it. Our extension communicates via Chrome extension APIs, not CDP Runtime, so it should be unaffected. Write E2E tests that verify: (1) extension still loads and connects, (2) Google.com loads without captcha, (3) sidebar chat still works.
|
||||
|
||||
**Effort:** L (human: ~2 weeks / CC: ~3 hours)
|
||||
**Priority:** P1
|
||||
**Depends on:** None
|
||||
|
||||
### Chromium fork (long-term alternative to CDP patches)
|
||||
|
||||
**What:** Maintain a Chromium fork where anti-bot stealth, GStack Browser branding, and native sidebar support live in the source code, not as runtime monkey-patches.
|
||||
|
||||
**Why:** The CDP patches are brittle. They break on every Playwright upgrade and target compiled JS with fragile string matching. A proper fork means: (1) stealth is permanent, not patched, (2) branding is native (no plist hacking at launch), (3) native sidebar replaces the extension (Phase 4 of V0 roadmap), (4) custom protocols (gstack://) for internal pages. Companies like Brave, Arc, and Vivaldi maintain Chromium forks with small teams. With CC, the rebase-on-upstream maintenance could be largely automated.
|
||||
|
||||
**Context:** Trigger criteria from V0 design doc: fork when extension side panel becomes the bottleneck, when anti-bot patches need to live deeper than CDP, or when native UI integration (sidebar, status bar) can't be done via extension. The Chromium build takes ~4 hours on a 32-core machine and produces ~50GB of build artifacts. CI would need dedicated build infra. See `docs/designs/GSTACK_BROWSER_V0.md` Phase 5 for full analysis.
|
||||
|
||||
**Effort:** XL (human: ~1 quarter / CC: ~2-3 weeks of focused work)
|
||||
**Priority:** P2
|
||||
**Depends on:** CDP patches proving the value of anti-bot stealth first
|
||||
|
||||
## Completed
|
||||
|
||||
### CI eval pipeline (v0.9.9.0)
|
||||
|
||||
+134
-18
@@ -107,6 +107,8 @@ export class BrowserManager {
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const candidates = [
|
||||
// Explicit override via env var (used by GStack Browser.app bundle)
|
||||
process.env.BROWSE_EXTENSIONS_DIR || '',
|
||||
// Relative to this source file (dev mode: browse/src/ -> ../../extension)
|
||||
path.resolve(__dirname, '..', '..', 'extension'),
|
||||
// Global gstack install
|
||||
@@ -219,17 +221,26 @@ export class BrowserManager {
|
||||
|
||||
// Find the gstack extension directory for auto-loading
|
||||
const extensionPath = this.findExtensionPath();
|
||||
const launchArgs = ['--hide-crash-restore-bubble'];
|
||||
const launchArgs = [
|
||||
'--hide-crash-restore-bubble',
|
||||
// Anti-bot-detection: remove the navigator.webdriver flag that Playwright sets.
|
||||
// Sites like Google and NYTimes check this to block automation browsers.
|
||||
'--disable-blink-features=AutomationControlled',
|
||||
];
|
||||
if (extensionPath) {
|
||||
launchArgs.push(`--disable-extensions-except=${extensionPath}`);
|
||||
launchArgs.push(`--load-extension=${extensionPath}`);
|
||||
// Write auth token for extension bootstrap (read via chrome.runtime.getURL)
|
||||
// Write auth token for extension bootstrap.
|
||||
// Write to ~/.gstack/.auth.json (not the extension dir, which may be read-only
|
||||
// in .app bundles and breaks codesigning).
|
||||
if (authToken) {
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const authFile = path.join(extensionPath, '.auth.json');
|
||||
const gstackDir = path.join(process.env.HOME || '/tmp', '.gstack');
|
||||
fs.mkdirSync(gstackDir, { recursive: true });
|
||||
const authFile = path.join(gstackDir, '.auth.json');
|
||||
try {
|
||||
fs.writeFileSync(authFile, JSON.stringify({ token: authToken }), { mode: 0o600 });
|
||||
fs.writeFileSync(authFile, JSON.stringify({ token: authToken, port: this.serverPort || 34567 }), { mode: 0o600 });
|
||||
} catch (err: any) {
|
||||
console.warn(`[browse] Could not write .auth.json: ${err.message}`);
|
||||
}
|
||||
@@ -245,10 +256,74 @@ export class BrowserManager {
|
||||
const userDataDir = path.join(process.env.HOME || '/tmp', '.gstack', 'chromium-profile');
|
||||
fs.mkdirSync(userDataDir, { recursive: true });
|
||||
|
||||
// Support custom Chromium binary via GSTACK_CHROMIUM_PATH env var.
|
||||
// Used by GStack Browser.app to point at the bundled Chromium.
|
||||
const executablePath = process.env.GSTACK_CHROMIUM_PATH || undefined;
|
||||
|
||||
// Rebrand Chromium → GStack Browser in macOS menu bar / Dock / Cmd+Tab.
|
||||
// Patch the Chromium .app's Info.plist so macOS shows our name.
|
||||
// This works for both dev mode (system Playwright cache) and .app bundle.
|
||||
const chromePath = executablePath || chromium.executablePath();
|
||||
try {
|
||||
// Walk up from binary to the .app's Info.plist
|
||||
// e.g. .../Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing
|
||||
// → .../Google Chrome for Testing.app/Contents/Info.plist
|
||||
const chromeContentsDir = path.resolve(path.dirname(chromePath), '..');
|
||||
const chromePlist = path.join(chromeContentsDir, 'Info.plist');
|
||||
if (fs.existsSync(chromePlist)) {
|
||||
const plistContent = fs.readFileSync(chromePlist, 'utf-8');
|
||||
if (plistContent.includes('Google Chrome for Testing')) {
|
||||
const patched = plistContent
|
||||
.replace(/Google Chrome for Testing/g, 'GStack Browser');
|
||||
fs.writeFileSync(chromePlist, patched);
|
||||
}
|
||||
// Replace Chromium's Dock icon with ours (Chromium's process owns the Dock icon)
|
||||
const iconCandidates = [
|
||||
path.join(__dirname, '..', '..', 'scripts', 'app', 'icon.icns'), // repo dev mode
|
||||
path.join(process.env.HOME || '', '.claude', 'skills', 'gstack', 'scripts', 'app', 'icon.icns'), // global install
|
||||
];
|
||||
const iconSrc = iconCandidates.find(p => fs.existsSync(p));
|
||||
if (iconSrc) {
|
||||
const chromeResources = path.join(chromeContentsDir, 'Resources');
|
||||
// Read original icon name from plist
|
||||
const iconMatch = plistContent.match(/<key>CFBundleIconFile<\/key>\s*<string>([^<]+)<\/string>/);
|
||||
let origIcon = iconMatch ? iconMatch[1] : 'app';
|
||||
if (!origIcon.endsWith('.icns')) origIcon += '.icns';
|
||||
const destIcon = path.join(chromeResources, origIcon);
|
||||
try { fs.copyFileSync(iconSrc, destIcon); } catch { /* non-fatal */ }
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Non-fatal: app name just stays as Chrome for Testing
|
||||
}
|
||||
|
||||
// Build custom user agent: keep Chrome version for site compatibility,
|
||||
// but replace "Chrome for Testing" branding with "GStackBrowser"
|
||||
let customUA: string | undefined;
|
||||
if (!this.customUserAgent) {
|
||||
// Detect Chrome version from the Chromium binary
|
||||
const chromePath = executablePath || chromium.executablePath();
|
||||
try {
|
||||
const versionProc = Bun.spawnSync([chromePath, '--version'], {
|
||||
stdout: 'pipe', stderr: 'pipe', timeout: 5000,
|
||||
});
|
||||
const versionOutput = versionProc.stdout.toString().trim();
|
||||
// Output like: "Google Chrome for Testing 145.0.6422.0" or "Chromium 145.0.6422.0"
|
||||
const versionMatch = versionOutput.match(/(\d+\.\d+\.\d+\.\d+)/);
|
||||
const chromeVersion = versionMatch ? versionMatch[1] : '131.0.0.0';
|
||||
customUA = `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${chromeVersion} Safari/537.36 GStackBrowser`;
|
||||
} catch {
|
||||
// Fallback: generic modern Chrome UA
|
||||
customUA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 GStackBrowser';
|
||||
}
|
||||
}
|
||||
|
||||
this.context = await chromium.launchPersistentContext(userDataDir, {
|
||||
headless: false,
|
||||
args: launchArgs,
|
||||
viewport: null, // Use browser's default viewport (real window size)
|
||||
userAgent: this.customUserAgent || customUA,
|
||||
...(executablePath ? { executablePath } : {}),
|
||||
// Playwright adds flags that block extension loading
|
||||
ignoreDefaultArgs: [
|
||||
'--disable-extensions',
|
||||
@@ -259,6 +334,59 @@ export class BrowserManager {
|
||||
this.connectionMode = 'headed';
|
||||
this.intentionalDisconnect = false;
|
||||
|
||||
// ─── Anti-bot-detection stealth patches ───────────────────────
|
||||
// Playwright's Chromium is detected by sites like Google/NYTimes via:
|
||||
// 1. navigator.webdriver = true (handled by --disable-blink-features above)
|
||||
// 2. Missing plugins array (real Chrome has PDF viewer, etc.)
|
||||
// 3. Missing languages
|
||||
// 4. CDP runtime detection (window.cdc_* variables)
|
||||
// 5. Permissions API returning 'denied' for notifications
|
||||
await this.context.addInitScript(() => {
|
||||
// Fake plugins array (real Chrome has at least PDF Viewer)
|
||||
Object.defineProperty(navigator, 'plugins', {
|
||||
get: () => {
|
||||
const plugins = [
|
||||
{ name: 'PDF Viewer', filename: 'internal-pdf-viewer', description: 'Portable Document Format' },
|
||||
{ name: 'Chrome PDF Viewer', filename: 'internal-pdf-viewer', description: '' },
|
||||
{ name: 'Chromium PDF Viewer', filename: 'internal-pdf-viewer', description: '' },
|
||||
];
|
||||
(plugins as any).namedItem = (name: string) => plugins.find(p => p.name === name) || null;
|
||||
(plugins as any).refresh = () => {};
|
||||
return plugins;
|
||||
},
|
||||
});
|
||||
|
||||
// Fake languages (Playwright sometimes sends empty)
|
||||
Object.defineProperty(navigator, 'languages', {
|
||||
get: () => ['en-US', 'en'],
|
||||
});
|
||||
|
||||
// Remove CDP runtime artifacts that automation detectors look for
|
||||
// cdc_ prefixed vars are injected by ChromeDriver/CDP
|
||||
const cleanup = () => {
|
||||
for (const key of Object.keys(window)) {
|
||||
if (key.startsWith('cdc_') || key.startsWith('__webdriver')) {
|
||||
try { delete (window as any)[key]; } catch {}
|
||||
}
|
||||
}
|
||||
};
|
||||
cleanup();
|
||||
// Re-clean after a tick in case they're injected late
|
||||
setTimeout(cleanup, 0);
|
||||
|
||||
// Override Permissions API to return 'prompt' for notifications
|
||||
// (automation browsers return 'denied' which is a fingerprint)
|
||||
const originalQuery = window.navigator.permissions?.query;
|
||||
if (originalQuery) {
|
||||
(window.navigator.permissions as any).query = (params: any) => {
|
||||
if (params.name === 'notifications') {
|
||||
return Promise.resolve({ state: 'prompt', onchange: null } as PermissionStatus);
|
||||
}
|
||||
return originalQuery.call(window.navigator.permissions, params);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Inject visual indicator — subtle top-edge amber gradient
|
||||
// Extension's content script handles the floating pill
|
||||
const indicatorScript = () => {
|
||||
@@ -825,20 +953,8 @@ export class BrowserManager {
|
||||
if (extensionPath) {
|
||||
launchArgs.push(`--disable-extensions-except=${extensionPath}`);
|
||||
launchArgs.push(`--load-extension=${extensionPath}`);
|
||||
// Write auth token for extension bootstrap during handoff
|
||||
if (this.serverPort) {
|
||||
try {
|
||||
const { resolveConfig } = require('./config');
|
||||
const config = resolveConfig();
|
||||
const stateFile = path.join(config.stateDir, 'browse.json');
|
||||
if (fs.existsSync(stateFile)) {
|
||||
const stateData = JSON.parse(fs.readFileSync(stateFile, 'utf-8'));
|
||||
if (stateData.token) {
|
||||
fs.writeFileSync(path.join(extensionPath, '.auth.json'), JSON.stringify({ token: stateData.token }), { mode: 0o600 });
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
// Auth token is served via /health endpoint now (no file write needed).
|
||||
// Extension reads token from /health on connect.
|
||||
console.log(`[browse] Handoff: loading extension from ${extensionPath}`);
|
||||
} else {
|
||||
console.log('[browse] Handoff: extension not found — headed mode without side panel');
|
||||
|
||||
+10
-1
@@ -330,12 +330,21 @@ async function ensureServer(): Promise<ServerState> {
|
||||
return state;
|
||||
}
|
||||
|
||||
// BROWSE_NO_AUTOSTART: sidebar agent sets this so the child claude never
|
||||
// spawns an invisible headless browser. If the headed server is down,
|
||||
// fail fast with a clear error instead of silently starting a new one.
|
||||
if (process.env.BROWSE_NO_AUTOSTART === '1') {
|
||||
console.error('[browse] Server not available and BROWSE_NO_AUTOSTART is set.');
|
||||
console.error('[browse] The headed browser may have been closed. Run /open-gstack-browser to restart.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Guard: never silently replace a headed server with a headless one.
|
||||
// Headed mode means a user-visible Chrome window is (or was) controlled.
|
||||
// Silently replacing it would be confusing — tell the user to reconnect.
|
||||
if (state && state.mode === 'headed' && isProcessAlive(state.pid)) {
|
||||
console.error(`[browse] Headed server running (PID ${state.pid}) but not responding.`);
|
||||
console.error(`[browse] Run '$B connect' to restart.`);
|
||||
console.error(`[browse] Run '/open-gstack-browser' to restart.`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
|
||||
@@ -46,6 +46,15 @@ export function getCookiePickerHTML(serverPort: number, authToken?: string): str
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
padding: 10px 24px 12px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #222;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
/* ─── Layout ──────────────────────────── */
|
||||
.container {
|
||||
display: flex;
|
||||
@@ -300,6 +309,8 @@ export function getCookiePickerHTML(serverPort: number, authToken?: string): str
|
||||
<span class="port">localhost:${serverPort}</span>
|
||||
</div>
|
||||
|
||||
<p class="subtitle">Select the domains of cookies you want to import to GStack Browser. You'll be able to browse those sites with the same login as your other browser.</p>
|
||||
|
||||
<div id="banner" class="banner"></div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
+198
-39
@@ -46,6 +46,31 @@ function validateAuth(req: Request): boolean {
|
||||
return header === `Bearer ${AUTH_TOKEN}`;
|
||||
}
|
||||
|
||||
// ─── Sidebar Model Router ────────────────────────────────────────
|
||||
// Fast model for navigation/interaction, smart model for reading/analysis.
|
||||
// The delta between sonnet and opus on "click @e24" is 5-10x in latency
|
||||
// and cost, with zero quality difference. Save opus for when you need it.
|
||||
|
||||
const ANALYSIS_WORDS = /\b(what|why|how|explain|describe|summarize|analyze|compare|review|read\b.*\b(and|then)|tell\s*me|find.*bugs?|check.*for|assess|evaluate|report)\b/i;
|
||||
const ACTION_PATTERNS = /^(go\s*to|open|navigate|click|tap|press|fill|type|enter|scroll|screenshot|snap|reload|refresh|back|forward|close|submit|select|toggle|expand|collapse|dismiss|accept|upload|download|focus|hover|cleanup|clean\s*up)\b/i;
|
||||
const ACTION_ANYWHERE = /\b(go\s*to|click|tap|fill\s*(in|out)?|type\s*in|navigate\s*to|open\s*(the|this|that)?|take\s*a?\s*screenshot|scroll\s*(down|up|to)|reload|refresh|submit|press\s*(the|enter|button))\b/i;
|
||||
|
||||
function pickSidebarModel(message: string): string {
|
||||
const msg = message.trim();
|
||||
|
||||
// Analysis/comprehension always gets opus — regardless of action verbs mixed in
|
||||
if (ANALYSIS_WORDS.test(msg)) return 'opus';
|
||||
|
||||
// Short action commands (under ~80 chars, starts with an action verb)
|
||||
if (msg.length < 80 && ACTION_PATTERNS.test(msg)) return 'sonnet';
|
||||
|
||||
// Longer messages that are clearly action-oriented (no analysis words already checked above)
|
||||
if (ACTION_ANYWHERE.test(msg)) return 'sonnet';
|
||||
|
||||
// Everything else: multi-step, ambiguous, or complex
|
||||
return 'opus';
|
||||
}
|
||||
|
||||
// ─── Help text (auto-generated from COMMAND_DESCRIPTIONS) ────────
|
||||
function generateHelpText(): string {
|
||||
// Group commands by category
|
||||
@@ -246,7 +271,9 @@ function addChatEntry(entry: Omit<ChatEntry, 'id'>, tabId?: number): ChatEntry {
|
||||
// Persist to disk (best-effort)
|
||||
if (sidebarSession) {
|
||||
const chatFile = path.join(SESSIONS_DIR, sidebarSession.id, 'chat.jsonl');
|
||||
try { fs.appendFileSync(chatFile, JSON.stringify(full) + '\n'); } catch {}
|
||||
try { fs.appendFileSync(chatFile, JSON.stringify(full) + '\n'); } catch (err: any) {
|
||||
console.error('[browse] Failed to persist chat entry:', err.message);
|
||||
}
|
||||
}
|
||||
return full;
|
||||
}
|
||||
@@ -271,11 +298,17 @@ function loadSession(): SidebarSession | null {
|
||||
const chatFile = path.join(SESSIONS_DIR, session.id, 'chat.jsonl');
|
||||
try {
|
||||
const lines = fs.readFileSync(chatFile, 'utf-8').split('\n').filter(Boolean);
|
||||
chatBuffer = lines.map(line => { try { return JSON.parse(line); } catch { return null; } }).filter(Boolean);
|
||||
const parsed = lines.map(line => { try { return JSON.parse(line); } catch { return null; } });
|
||||
const discarded = parsed.filter(x => x === null).length;
|
||||
if (discarded > 0) console.warn(`[browse] Discarding ${discarded} corrupted chat entries during load`);
|
||||
chatBuffer = parsed.filter(Boolean);
|
||||
chatNextId = chatBuffer.length > 0 ? Math.max(...chatBuffer.map(e => e.id)) + 1 : 0;
|
||||
} catch {}
|
||||
} catch (err: any) {
|
||||
if (err.code !== 'ENOENT') console.warn('[browse] Chat history not loaded:', err.message);
|
||||
}
|
||||
return session;
|
||||
} catch {
|
||||
} catch (err: any) {
|
||||
if (err.code !== 'ENOENT') console.error('[browse] Failed to load session:', err.message);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -303,7 +336,9 @@ function createWorktree(sessionId: string): string | null {
|
||||
Bun.spawnSync(['git', 'worktree', 'remove', '--force', worktreeDir], {
|
||||
cwd: repoRoot, stdout: 'pipe', stderr: 'pipe', timeout: 5000,
|
||||
});
|
||||
try { fs.rmSync(worktreeDir, { recursive: true, force: true }); } catch {}
|
||||
try { fs.rmSync(worktreeDir, { recursive: true, force: true }); } catch (err: any) {
|
||||
console.warn('[browse] Failed to clean stale worktree dir:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Get current branch/commit
|
||||
@@ -343,8 +378,12 @@ function removeWorktree(worktreePath: string | null): void {
|
||||
});
|
||||
}
|
||||
// Cleanup dir if git worktree remove didn't
|
||||
try { fs.rmSync(worktreePath, { recursive: true, force: true }); } catch {}
|
||||
} catch {}
|
||||
try { fs.rmSync(worktreePath, { recursive: true, force: true }); } catch (err: any) {
|
||||
console.warn('[browse] Failed to remove worktree dir:', worktreePath, err.message);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.warn('[browse] Worktree removal error:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function createSession(): SidebarSession {
|
||||
@@ -372,7 +411,9 @@ function saveSession(): void {
|
||||
if (!sidebarSession) return;
|
||||
sidebarSession.lastActiveAt = new Date().toISOString();
|
||||
const sessionFile = path.join(SESSIONS_DIR, sidebarSession.id, 'session.json');
|
||||
try { fs.writeFileSync(sessionFile, JSON.stringify(sidebarSession, null, 2)); } catch {}
|
||||
try { fs.writeFileSync(sessionFile, JSON.stringify(sidebarSession, null, 2)); } catch (err: any) {
|
||||
console.error('[browse] Failed to save session:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function listSessions(): Array<SidebarSession & { chatLines: number }> {
|
||||
@@ -382,11 +423,16 @@ function listSessions(): Array<SidebarSession & { chatLines: number }> {
|
||||
try {
|
||||
const session = JSON.parse(fs.readFileSync(path.join(SESSIONS_DIR, d, 'session.json'), 'utf-8'));
|
||||
let chatLines = 0;
|
||||
try { chatLines = fs.readFileSync(path.join(SESSIONS_DIR, d, 'chat.jsonl'), 'utf-8').split('\n').filter(Boolean).length; } catch {}
|
||||
try { chatLines = fs.readFileSync(path.join(SESSIONS_DIR, d, 'chat.jsonl'), 'utf-8').split('\n').filter(Boolean).length; } catch {
|
||||
// Expected: no chat file yet
|
||||
}
|
||||
return { ...session, chatLines };
|
||||
} catch { return null; }
|
||||
}).filter(Boolean);
|
||||
} catch { return []; }
|
||||
} catch (err: any) {
|
||||
console.warn('[browse] Failed to list sessions:', err.message);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function processAgentEvent(event: any): void {
|
||||
@@ -482,7 +528,14 @@ function spawnClaude(userMessage: string, extensionUrl?: string | null, forTabId
|
||||
const prompt = `${systemPrompt}\n\n<user-message>\n${escapedMessage}\n</user-message>`;
|
||||
// Never resume — each message is a fresh context. Resuming carries stale
|
||||
// page URLs and old navigation state that makes the agent fight the user.
|
||||
const args = ['-p', prompt, '--model', 'opus', '--output-format', 'stream-json', '--verbose',
|
||||
|
||||
// Auto model routing: fast model for navigation/interaction, smart model for reading/analysis.
|
||||
// Navigation, clicking, filling forms, screenshots = deterministic tool calls, no thinking needed.
|
||||
// Reading, summarizing, analyzing, explaining = needs comprehension.
|
||||
const model = pickSidebarModel(userMessage);
|
||||
console.log(`[browse] Sidebar model: ${model} for "${userMessage.slice(0, 60)}"`);
|
||||
|
||||
const args = ['-p', prompt, '--model', model, '--output-format', 'stream-json', '--verbose',
|
||||
'--allowedTools', 'Bash,Read,Glob,Grep'];
|
||||
|
||||
addChatEntry({ ts: new Date().toISOString(), role: 'agent', type: 'agent_start' });
|
||||
@@ -521,8 +574,12 @@ function spawnClaude(userMessage: string, extensionUrl?: string | null, forTabId
|
||||
|
||||
function killAgent(): void {
|
||||
if (agentProcess) {
|
||||
try { agentProcess.kill('SIGTERM'); } catch {}
|
||||
setTimeout(() => { try { agentProcess?.kill('SIGKILL'); } catch {} }, 3000);
|
||||
try { agentProcess.kill('SIGTERM'); } catch (err: any) {
|
||||
console.warn('[browse] Failed to SIGTERM agent:', err.message);
|
||||
}
|
||||
setTimeout(() => { try { agentProcess?.kill('SIGKILL'); } catch (err: any) {
|
||||
console.warn('[browse] Failed to SIGKILL agent:', err.message);
|
||||
} }, 3000);
|
||||
}
|
||||
agentProcess = null;
|
||||
agentStartTime = null;
|
||||
@@ -600,8 +657,8 @@ async function flushBuffers() {
|
||||
fs.appendFileSync(DIALOG_LOG_PATH, lines);
|
||||
lastDialogFlushed = dialogBuffer.totalAdded;
|
||||
}
|
||||
} catch {
|
||||
// Flush failures are non-fatal — buffers are in memory
|
||||
} catch (err: any) {
|
||||
console.error('[browse] Buffer flush failed:', err.message);
|
||||
} finally {
|
||||
flushInProgress = false;
|
||||
}
|
||||
@@ -618,6 +675,9 @@ function resetIdleTimer() {
|
||||
}
|
||||
|
||||
const idleCheckInterval = setInterval(() => {
|
||||
// Headed mode: the user is looking at the browser. Never auto-die.
|
||||
// Only shut down when the user explicitly disconnects or closes the window.
|
||||
if (browserManager.getConnectionMode() === 'headed') return;
|
||||
if (Date.now() - lastActivity > IDLE_TIMEOUT_MS) {
|
||||
console.log(`[browse] Idle for ${IDLE_TIMEOUT_MS / 1000}s, shutting down`);
|
||||
shutdown();
|
||||
@@ -639,7 +699,9 @@ const inspectorSubscribers = new Set<InspectorSubscriber>();
|
||||
function emitInspectorEvent(event: any): void {
|
||||
for (const notify of inspectorSubscribers) {
|
||||
queueMicrotask(() => {
|
||||
try { notify(event); } catch {}
|
||||
try { notify(event); } catch (err: any) {
|
||||
console.error('[browse] Inspector event subscriber threw:', err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -725,7 +787,9 @@ async function handleCommand(body: any): Promise<Response> {
|
||||
if (tabId !== undefined && tabId !== null) {
|
||||
savedTabId = browserManager.getActiveTabId();
|
||||
// bringToFront: false — internal tab pinning must NOT steal window focus
|
||||
try { browserManager.switchTab(tabId, { bringToFront: false }); } catch {}
|
||||
try { browserManager.switchTab(tabId, { bringToFront: false }); } catch (err: any) {
|
||||
console.warn('[browse] Failed to pin tab', tabId, ':', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Block mutation commands while watching (read-only observation mode)
|
||||
@@ -809,7 +873,9 @@ async function handleCommand(body: any): Promise<Response> {
|
||||
browserManager.resetFailures();
|
||||
// Restore original active tab if we pinned to a specific one
|
||||
if (savedTabId !== null) {
|
||||
try { browserManager.switchTab(savedTabId, { bringToFront: false }); } catch {}
|
||||
try { browserManager.switchTab(savedTabId, { bringToFront: false }); } catch (restoreErr: any) {
|
||||
console.warn('[browse] Failed to restore tab after command:', restoreErr.message);
|
||||
}
|
||||
}
|
||||
return new Response(result, {
|
||||
status: 200,
|
||||
@@ -818,7 +884,9 @@ async function handleCommand(body: any): Promise<Response> {
|
||||
} catch (err: any) {
|
||||
// Restore original active tab even on error
|
||||
if (savedTabId !== null) {
|
||||
try { browserManager.switchTab(savedTabId, { bringToFront: false }); } catch {}
|
||||
try { browserManager.switchTab(savedTabId, { bringToFront: false }); } catch (restoreErr: any) {
|
||||
console.warn('[browse] Failed to restore tab after error:', restoreErr.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Activity: emit command_end (error)
|
||||
@@ -850,8 +918,19 @@ async function shutdown() {
|
||||
isShuttingDown = true;
|
||||
|
||||
console.log('[browse] Shutting down...');
|
||||
// Kill the sidebar-agent daemon process (spawned by cli.ts, detached).
|
||||
// Without this, the agent keeps polling a dead server and spawns confused
|
||||
// claude processes that auto-start headless browsers.
|
||||
try {
|
||||
const { spawnSync } = require('child_process');
|
||||
spawnSync('pkill', ['-f', 'sidebar-agent\\.ts'], { stdio: 'ignore', timeout: 3000 });
|
||||
} catch (err: any) {
|
||||
console.warn('[browse] Failed to kill sidebar-agent:', err.message);
|
||||
}
|
||||
// Clean up CDP inspector sessions
|
||||
try { detachSession(); } catch {}
|
||||
try { detachSession(); } catch (err: any) {
|
||||
console.warn('[browse] Failed to detach CDP session:', err.message);
|
||||
}
|
||||
inspectorSubscribers.clear();
|
||||
// Stop watch mode if active
|
||||
if (browserManager.isWatching()) browserManager.stopWatch();
|
||||
@@ -869,11 +948,15 @@ async function shutdown() {
|
||||
// Clean up Chromium profile locks (prevent SingletonLock on next launch)
|
||||
const profileDir = path.join(process.env.HOME || '/tmp', '.gstack', 'chromium-profile');
|
||||
for (const lockFile of ['SingletonLock', 'SingletonSocket', 'SingletonCookie']) {
|
||||
try { fs.unlinkSync(path.join(profileDir, lockFile)); } catch {}
|
||||
try { fs.unlinkSync(path.join(profileDir, lockFile)); } catch (err: any) {
|
||||
console.debug('[browse] Lock cleanup:', lockFile, err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up state file
|
||||
try { fs.unlinkSync(config.stateFile); } catch {}
|
||||
try { fs.unlinkSync(config.stateFile); } catch (err: any) {
|
||||
console.debug('[browse] State file cleanup:', err.message);
|
||||
}
|
||||
|
||||
process.exit(0);
|
||||
}
|
||||
@@ -885,7 +968,9 @@ process.on('SIGINT', shutdown);
|
||||
// Defense-in-depth — primary cleanup is the CLI's stale-state detection via health check.
|
||||
if (process.platform === 'win32') {
|
||||
process.on('exit', () => {
|
||||
try { fs.unlinkSync(config.stateFile); } catch {}
|
||||
try { fs.unlinkSync(config.stateFile); } catch {
|
||||
// Best-effort on exit
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -894,15 +979,23 @@ function emergencyCleanup() {
|
||||
if (isShuttingDown) return;
|
||||
isShuttingDown = true;
|
||||
// Kill agent subprocess if running
|
||||
try { killAgent(); } catch {}
|
||||
try { killAgent(); } catch (err: any) {
|
||||
console.error('[browse] Emergency: failed to kill agent:', err.message);
|
||||
}
|
||||
// Save session state so chat history persists across crashes
|
||||
try { saveSession(); } catch {}
|
||||
try { saveSession(); } catch (err: any) {
|
||||
console.error('[browse] Emergency: failed to save session:', err.message);
|
||||
}
|
||||
// Clean Chromium profile locks
|
||||
const profileDir = path.join(process.env.HOME || '/tmp', '.gstack', 'chromium-profile');
|
||||
for (const lockFile of ['SingletonLock', 'SingletonSocket', 'SingletonCookie']) {
|
||||
try { fs.unlinkSync(path.join(profileDir, lockFile)); } catch {}
|
||||
try { fs.unlinkSync(path.join(profileDir, lockFile)); } catch (err: any) {
|
||||
console.debug('[browse] Emergency lock cleanup:', lockFile, err.message);
|
||||
}
|
||||
}
|
||||
try { fs.unlinkSync(config.stateFile); } catch (err: any) {
|
||||
console.debug('[browse] Emergency state cleanup:', err.message);
|
||||
}
|
||||
try { fs.unlinkSync(config.stateFile); } catch {}
|
||||
}
|
||||
process.on('uncaughtException', (err) => {
|
||||
console.error('[browse] FATAL uncaught exception:', err.message);
|
||||
@@ -918,9 +1011,15 @@ process.on('unhandledRejection', (err: any) => {
|
||||
// ─── Start ─────────────────────────────────────────────────────
|
||||
async function start() {
|
||||
// Clear old log files
|
||||
try { fs.unlinkSync(CONSOLE_LOG_PATH); } catch {}
|
||||
try { fs.unlinkSync(NETWORK_LOG_PATH); } catch {}
|
||||
try { fs.unlinkSync(DIALOG_LOG_PATH); } catch {}
|
||||
try { fs.unlinkSync(CONSOLE_LOG_PATH); } catch (err: any) {
|
||||
if (err.code !== 'ENOENT') console.debug('[browse] Log cleanup console:', err.message);
|
||||
}
|
||||
try { fs.unlinkSync(NETWORK_LOG_PATH); } catch (err: any) {
|
||||
if (err.code !== 'ENOENT') console.debug('[browse] Log cleanup network:', err.message);
|
||||
}
|
||||
try { fs.unlinkSync(DIALOG_LOG_PATH); } catch (err: any) {
|
||||
if (err.code !== 'ENOENT') console.debug('[browse] Log cleanup dialog:', err.message);
|
||||
}
|
||||
|
||||
const port = await findPort();
|
||||
|
||||
@@ -949,6 +1048,35 @@ async function start() {
|
||||
return handleCookiePickerRoute(url, req, browserManager, AUTH_TOKEN);
|
||||
}
|
||||
|
||||
// Welcome page — served when GStack Browser launches in headed mode
|
||||
if (url.pathname === '/welcome') {
|
||||
const welcomePath = (() => {
|
||||
// Check project-local designs first, then global
|
||||
const slug = process.env.GSTACK_SLUG || 'unknown';
|
||||
const projectWelcome = `${process.env.HOME}/.gstack/projects/${slug}/designs/welcome-page-20260331/finalized.html`;
|
||||
try { if (require('fs').existsSync(projectWelcome)) return projectWelcome; } catch (err: any) {
|
||||
console.warn('[browse] Error checking project welcome page:', err.message);
|
||||
}
|
||||
// Fallback: built-in welcome page from gstack install
|
||||
const skillRoot = process.env.GSTACK_SKILL_ROOT || `${process.env.HOME}/.claude/skills/gstack`;
|
||||
const builtinWelcome = `${skillRoot}/browse/src/welcome.html`;
|
||||
try { if (require('fs').existsSync(builtinWelcome)) return builtinWelcome; } catch (err: any) {
|
||||
console.warn('[browse] Error checking builtin welcome page:', err.message);
|
||||
}
|
||||
return null;
|
||||
})();
|
||||
if (welcomePath) {
|
||||
try {
|
||||
const html = require('fs').readFileSync(welcomePath, 'utf-8');
|
||||
return new Response(html, { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
|
||||
} catch (err: any) {
|
||||
console.error('[browse] Failed to read welcome page:', welcomePath, err.message);
|
||||
}
|
||||
}
|
||||
// No welcome page found — redirect to about:blank
|
||||
return new Response('', { status: 302, headers: { 'Location': 'about:blank' } });
|
||||
}
|
||||
|
||||
// Health check — no auth required, does NOT reset idle timer
|
||||
if (url.pathname === '/health') {
|
||||
const healthy = await browserManager.isHealthy();
|
||||
@@ -958,7 +1086,10 @@ async function start() {
|
||||
uptime: Math.floor((Date.now() - startTime) / 1000),
|
||||
tabs: browserManager.getTabCount(),
|
||||
currentUrl: browserManager.getCurrentUrl(),
|
||||
// token removed — see .auth.json for extension bootstrap
|
||||
// Auth token for extension bootstrap. Safe: /health is localhost-only.
|
||||
// Previously served via .auth.json in extension dir, but that breaks
|
||||
// read-only .app bundles and codesigning. Extension reads token from here.
|
||||
token: AUTH_TOKEN,
|
||||
chatEnabled: true,
|
||||
agent: {
|
||||
status: agentStatus,
|
||||
@@ -1020,7 +1151,8 @@ async function start() {
|
||||
const unsubscribe = subscribe((entry) => {
|
||||
try {
|
||||
controller.enqueue(encoder.encode(`event: activity\ndata: ${JSON.stringify(entry)}\n\n`));
|
||||
} catch {
|
||||
} catch (err: any) {
|
||||
console.debug('[browse] Activity SSE stream error, unsubscribing:', err.message);
|
||||
unsubscribe();
|
||||
}
|
||||
});
|
||||
@@ -1029,7 +1161,8 @@ async function start() {
|
||||
const heartbeat = setInterval(() => {
|
||||
try {
|
||||
controller.enqueue(encoder.encode(`: heartbeat\n\n`));
|
||||
} catch {
|
||||
} catch (err: any) {
|
||||
console.debug('[browse] Activity SSE heartbeat failed:', err.message);
|
||||
clearInterval(heartbeat);
|
||||
unsubscribe();
|
||||
}
|
||||
@@ -1039,7 +1172,9 @@ async function start() {
|
||||
req.signal.addEventListener('abort', () => {
|
||||
clearInterval(heartbeat);
|
||||
unsubscribe();
|
||||
try { controller.close(); } catch {}
|
||||
try { controller.close(); } catch {
|
||||
// Expected: stream already closed
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -1142,6 +1277,7 @@ async function start() {
|
||||
if (!validateAuth(req)) {
|
||||
return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' } });
|
||||
}
|
||||
resetIdleTimer(); // Sidebar chat is real user activity
|
||||
const body = await req.json();
|
||||
const msg = body.message?.trim();
|
||||
if (!msg) {
|
||||
@@ -1188,7 +1324,9 @@ async function start() {
|
||||
chatBuffer = [];
|
||||
chatNextId = 0;
|
||||
if (sidebarSession) {
|
||||
try { fs.writeFileSync(path.join(SESSIONS_DIR, sidebarSession.id, 'chat.jsonl'), ''); } catch {}
|
||||
try { fs.writeFileSync(path.join(SESSIONS_DIR, sidebarSession.id, 'chat.jsonl'), ''); } catch (err: any) {
|
||||
console.error('[browse] Failed to clear chat file:', err.message);
|
||||
}
|
||||
}
|
||||
return new Response(JSON.stringify({ ok: true }), { status: 200, headers: { 'Content-Type': 'application/json' } });
|
||||
}
|
||||
@@ -1429,7 +1567,8 @@ async function start() {
|
||||
controller.enqueue(encoder.encode(
|
||||
`event: inspector\ndata: ${JSON.stringify(event)}\n\n`
|
||||
));
|
||||
} catch {
|
||||
} catch (err: any) {
|
||||
console.debug('[browse] Inspector SSE stream error:', err.message);
|
||||
inspectorSubscribers.delete(notify);
|
||||
}
|
||||
};
|
||||
@@ -1439,7 +1578,8 @@ async function start() {
|
||||
const heartbeat = setInterval(() => {
|
||||
try {
|
||||
controller.enqueue(encoder.encode(`: heartbeat\n\n`));
|
||||
} catch {
|
||||
} catch (err: any) {
|
||||
console.debug('[browse] Inspector SSE heartbeat failed:', err.message);
|
||||
clearInterval(heartbeat);
|
||||
inspectorSubscribers.delete(notify);
|
||||
}
|
||||
@@ -1449,7 +1589,9 @@ async function start() {
|
||||
req.signal.addEventListener('abort', () => {
|
||||
clearInterval(heartbeat);
|
||||
inspectorSubscribers.delete(notify);
|
||||
try { controller.close(); } catch {}
|
||||
try { controller.close(); } catch (err: any) {
|
||||
// Expected: stream already closed
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -1491,6 +1633,21 @@ async function start() {
|
||||
|
||||
browserManager.serverPort = port;
|
||||
|
||||
// Navigate to welcome page if in headed mode and still on about:blank
|
||||
if (browserManager.getConnectionMode() === 'headed') {
|
||||
try {
|
||||
const currentUrl = browserManager.getCurrentUrl();
|
||||
if (currentUrl === 'about:blank' || currentUrl === '') {
|
||||
const page = browserManager.getPage();
|
||||
page.goto(`http://127.0.0.1:${port}/welcome`, { timeout: 3000 }).catch((err: any) => {
|
||||
console.warn('[browse] Failed to navigate to welcome page:', err.message);
|
||||
});
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.warn('[browse] Welcome page navigation setup failed:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up stale state files (older than 7 days)
|
||||
try {
|
||||
const stateDir = path.join(config.stateDir, 'browse-states');
|
||||
@@ -1505,7 +1662,9 @@ async function start() {
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
} catch (err: any) {
|
||||
console.warn('[browse] Failed to clean stale state files:', err.message);
|
||||
}
|
||||
|
||||
console.log(`[browse] Server running on http://127.0.0.1:${port} (PID: ${process.pid})`);
|
||||
console.log(`[browse] State file: ${config.stateFile}`);
|
||||
|
||||
+40
-10
@@ -30,7 +30,8 @@ function getGitRoot(): string | null {
|
||||
try {
|
||||
const { execSync } = require('child_process');
|
||||
return execSync('git rev-parse --show-toplevel', { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim();
|
||||
} catch {
|
||||
} catch (err: any) {
|
||||
console.debug('[sidebar-agent] Not in a git repo:', err.message);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -74,7 +75,8 @@ async function refreshToken(): Promise<string | null> {
|
||||
const data = JSON.parse(fs.readFileSync(stateFile, 'utf-8'));
|
||||
authToken = data.token || null;
|
||||
return authToken;
|
||||
} catch {
|
||||
} catch (err: any) {
|
||||
console.error('[sidebar-agent] Failed to refresh auth token:', err.message);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -165,7 +167,11 @@ function describeToolCall(tool: string, input: any): string {
|
||||
return short.length > 100 ? short.slice(0, 100) + '…' : short;
|
||||
}
|
||||
|
||||
if (tool === 'Read' && input.file_path) return `Reading ${shorten(input.file_path)}`;
|
||||
if (tool === 'Read' && input.file_path) {
|
||||
// Skip Claude's internal tool-result file reads — they're plumbing, not user-facing
|
||||
if (input.file_path.includes('/tool-results/') || input.file_path.includes('/.claude/projects/')) return '';
|
||||
return `Reading ${shorten(input.file_path)}`;
|
||||
}
|
||||
if (tool === 'Edit' && input.file_path) return `Editing ${shorten(input.file_path)}`;
|
||||
if (tool === 'Write' && input.file_path) return `Writing ${shorten(input.file_path)}`;
|
||||
if (tool === 'Grep' && input.pattern) return `Searching for "${input.pattern}"`;
|
||||
@@ -234,7 +240,10 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
|
||||
// Validate cwd exists — queue may reference a stale worktree
|
||||
let effectiveCwd = cwd || process.cwd();
|
||||
try { fs.accessSync(effectiveCwd); } catch { effectiveCwd = process.cwd(); }
|
||||
try { fs.accessSync(effectiveCwd); } catch (err: any) {
|
||||
console.warn('[sidebar-agent] Worktree path inaccessible, falling back to cwd:', effectiveCwd, err.message);
|
||||
effectiveCwd = process.cwd();
|
||||
}
|
||||
|
||||
const proc = spawn('claude', claudeArgs, {
|
||||
stdio: ['pipe', 'pipe', 'pipe'],
|
||||
@@ -242,6 +251,12 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
env: {
|
||||
...process.env,
|
||||
BROWSE_STATE_FILE: stateFile || '',
|
||||
// Connect to the existing headed browse server, never start a new one.
|
||||
// BROWSE_PORT tells the CLI which port to check.
|
||||
// BROWSE_NO_AUTOSTART prevents spawning an invisible headless browser
|
||||
// if the headed server is down — fail fast with a clear error instead.
|
||||
BROWSE_PORT: process.env.BROWSE_PORT || '34567',
|
||||
BROWSE_NO_AUTOSTART: '1',
|
||||
// Pin this agent to its tab — prevents cross-tab interference
|
||||
// when multiple agents run simultaneously
|
||||
BROWSE_TAB: String(tid),
|
||||
@@ -258,7 +273,9 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
buffer = lines.pop() || '';
|
||||
for (const line of lines) {
|
||||
if (!line.trim()) continue;
|
||||
try { handleStreamEvent(JSON.parse(line), tid); } catch {}
|
||||
try { handleStreamEvent(JSON.parse(line), tid); } catch (err: any) {
|
||||
console.error(`[sidebar-agent] Tab ${tid}: Failed to parse stream line:`, line.slice(0, 100), err.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -269,7 +286,9 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
|
||||
proc.on('close', (code) => {
|
||||
if (buffer.trim()) {
|
||||
try { handleStreamEvent(JSON.parse(buffer), tid); } catch {}
|
||||
try { handleStreamEvent(JSON.parse(buffer), tid); } catch (err: any) {
|
||||
console.error(`[sidebar-agent] Tab ${tid}: Failed to parse final buffer:`, buffer.slice(0, 100), err.message);
|
||||
}
|
||||
}
|
||||
const doneEvent: Record<string, any> = { type: 'agent_done' };
|
||||
if (code !== 0 && stderrBuffer.trim()) {
|
||||
@@ -294,7 +313,9 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
// Timeout (default 300s / 5 min — multi-page tasks need time)
|
||||
const timeoutMs = parseInt(process.env.SIDEBAR_AGENT_TIMEOUT || '300000', 10);
|
||||
setTimeout(() => {
|
||||
try { proc.kill(); } catch {}
|
||||
try { proc.kill(); } catch (killErr: any) {
|
||||
console.warn(`[sidebar-agent] Tab ${tid}: Failed to kill timed-out process:`, killErr.message);
|
||||
}
|
||||
const timeoutMsg = stderrBuffer.trim()
|
||||
? `Timed out after ${timeoutMs / 1000}s\nstderr: ${stderrBuffer.trim().slice(-500)}`
|
||||
: `Timed out after ${timeoutMs / 1000}s`;
|
||||
@@ -311,14 +332,20 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
function countLines(): number {
|
||||
try {
|
||||
return fs.readFileSync(QUEUE, 'utf-8').split('\n').filter(Boolean).length;
|
||||
} catch { return 0; }
|
||||
} catch (err: any) {
|
||||
console.error('[sidebar-agent] Failed to read queue file:', err.message);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function readLine(n: number): string | null {
|
||||
try {
|
||||
const lines = fs.readFileSync(QUEUE, 'utf-8').split('\n').filter(Boolean);
|
||||
return lines[n - 1] || null;
|
||||
} catch { return null; }
|
||||
} catch (err: any) {
|
||||
console.error(`[sidebar-agent] Failed to read queue line ${n}:`, err.message);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function poll() {
|
||||
@@ -331,7 +358,10 @@ async function poll() {
|
||||
if (!line) continue;
|
||||
|
||||
let entry: any;
|
||||
try { entry = JSON.parse(line); } catch { continue; }
|
||||
try { entry = JSON.parse(line); } catch (err: any) {
|
||||
console.warn(`[sidebar-agent] Skipping malformed queue entry at line ${lastLine}:`, line.slice(0, 80), err.message);
|
||||
continue;
|
||||
}
|
||||
if (!entry.message && !entry.prompt) continue;
|
||||
|
||||
const tid = entry.tabId ?? 0;
|
||||
|
||||
@@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GStack Browser</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@700,900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--amber-400: #FBBF24;
|
||||
--amber-500: #F59E0B;
|
||||
--zinc-400: #A1A1AA;
|
||||
--zinc-600: #52525B;
|
||||
--zinc-800: #27272A;
|
||||
--surface: #141414;
|
||||
--base: #0C0C0C;
|
||||
--border: #262626;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
body {
|
||||
background: var(--base);
|
||||
color: #e4e4e7;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
opacity: 0.03;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 128px 128px;
|
||||
}
|
||||
.page { width: 100%; max-width: 1060px; padding: 0 40px; }
|
||||
|
||||
/* Sidebar prompt — points RIGHT toward where sidebar opens */
|
||||
.sidebar-prompt {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: opacity 300ms ease-out;
|
||||
}
|
||||
.sidebar-prompt .bubble {
|
||||
background: var(--amber-500);
|
||||
color: #000;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
max-width: 220px;
|
||||
text-align: left;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.sidebar-prompt .arrow-right {
|
||||
font-size: 28px;
|
||||
color: var(--amber-500);
|
||||
animation: nudge 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes nudge {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
50% { transform: translateX(6px); }
|
||||
}
|
||||
.sidebar-prompt.hidden { opacity: 0; pointer-events: none; }
|
||||
|
||||
/* Hero */
|
||||
.hero { margin-bottom: 36px; }
|
||||
.logo-row { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.logo-dot {
|
||||
width: 10px; height: 10px; border-radius: 50%; background: var(--amber-500);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
|
||||
50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(245,158,11,0); }
|
||||
}
|
||||
.logo-text { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 28px; color: #fff; letter-spacing: -0.5px; }
|
||||
.tagline { font-size: 15px; color: var(--zinc-400); max-width: 560px; line-height: 1.6; }
|
||||
|
||||
/* Feature cards — 3 columns for 6 cards */
|
||||
.features { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 28px; }
|
||||
.feat {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
.feat-title {
|
||||
font-family: 'Satoshi', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.feat p { font-size: 13px; color: var(--zinc-400); line-height: 1.5; }
|
||||
.feat .hl { color: #e4e4e7; font-weight: 500; }
|
||||
.feat code {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
color: var(--amber-400);
|
||||
background: rgba(245,158,11,0.08);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Try it strip */
|
||||
.try-strip {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.try-title {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
color: var(--amber-400);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.try-items { display: flex; flex-direction: column; gap: 8px; }
|
||||
.try-item {
|
||||
font-size: 13px;
|
||||
color: var(--zinc-400);
|
||||
line-height: 1.5;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.try-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--zinc-600);
|
||||
}
|
||||
.try-item .hl { color: #e4e4e7; font-weight: 500; }
|
||||
|
||||
/* Footer */
|
||||
.footer {}
|
||||
.footer p { font-size: 12px; color: var(--zinc-600); }
|
||||
.footer a { color: var(--zinc-400); text-decoration: none; }
|
||||
.footer a:hover { color: var(--amber-400); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.features { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.features { grid-template-columns: 1fr; }
|
||||
html, body { overflow: auto; }
|
||||
.sidebar-prompt { right: 40px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="sidebar-prompt" id="sidebar-prompt">
|
||||
<div class="bubble">Open the sidebar to get started. Click the puzzle piece icon in the toolbar, then pin gstack browse.</div>
|
||||
<span class="arrow-right">→</span>
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
<header class="hero">
|
||||
<div class="logo-row">
|
||||
<div class="logo-dot"></div>
|
||||
<span class="logo-text">GStack Browser</span>
|
||||
</div>
|
||||
<p class="tagline">This browser is connected to your Claude Code session. The sidebar is your co-pilot: it can control this window, read pages, edit CSS, and pass everything back to your terminal.</p>
|
||||
</header>
|
||||
|
||||
<div class="features">
|
||||
<div class="feat">
|
||||
<div class="feat-title">Talk to the sidebar</div>
|
||||
<p>The sidebar chat is a Claude instance that <span class="hl">controls this browser</span>. Say "go to my app and check if login works" and watch it navigate, click, fill forms, and report back.</p>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<div class="feat-title">Or use your main agent</div>
|
||||
<p>Your Claude Code terminal <span class="hl">also controls this browser</span>. Run <code>/qa</code>, <code>/design-review</code>, or any skill and watch every action happen here. Two agents, one browser.</p>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<div class="feat-title">Import your cookies</div>
|
||||
<p>Click <span class="hl">🍪 Cookies</span> in the sidebar to import login sessions from Chrome, Arc, or Brave. Browse authenticated pages <span class="hl">without logging in again</span>.</p>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<div class="feat-title">Clean up any page</div>
|
||||
<p>Click <span class="hl">Cleanup</span> in the sidebar. AI identifies overlays, paywalls, cookie banners, and clutter, then <span class="hl">removes them</span>. Articles become readable.</p>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<div class="feat-title">Smart screenshots</div>
|
||||
<p>The <span class="hl">Screenshot</span> button captures a cleaned screenshot and sends it to your Claude Code session as context. "What's wrong with this page?" now has a visual answer.</p>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<div class="feat-title">Modify any page</div>
|
||||
<p>The sidebar can <span class="hl">edit CSS and DOM</span> on any page. "Make the header sticky" or "change the font to Inter." Changes happen live, reported back to your terminal.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="try-strip">
|
||||
<div class="try-title">Try it now</div>
|
||||
<div class="try-items">
|
||||
<div class="try-item">Open the sidebar and type: <span class="hl">"Go to news.ycombinator.com, open the top story, clean up the article, and summarize the key points back to my terminal"</span></div>
|
||||
<div class="try-item">On any article page, click <span class="hl">Cleanup</span> to strip away the noise</div>
|
||||
<div class="try-item">Click <span class="hl">Screenshot</span> to capture the page and send it to your Claude Code session</div>
|
||||
<div class="try-item">Ask the sidebar: <span class="hl">"Inspect the CSS on this page and send the color palette to my terminal"</span></div>
|
||||
<div class="try-item">From your Claude Code terminal: <span class="hl">"Navigate to my app, extract the full CSS design system, and write it to DESIGN.md"</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<p><a href="https://github.com/garrytan/gstack">gstack</a> is open source. Built by <a href="https://x.com/garrytan">Garry Tan</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Hide sidebar prompt ONLY when the sidebar is actually opened.
|
||||
// The content script dispatches 'gstack-extension-ready' when it receives
|
||||
// a 'sidebarOpened' message from the side panel (via background.js).
|
||||
// This means the arrow stays visible until the user actually opens the sidebar.
|
||||
document.addEventListener('gstack-extension-ready', () => {
|
||||
const prompt = document.getElementById('sidebar-prompt');
|
||||
if (prompt) prompt.classList.add('hidden');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -21,13 +21,14 @@ function sliceBetween(source: string, startMarker: string, endMarker: string): s
|
||||
}
|
||||
|
||||
describe('Server auth security', () => {
|
||||
// Test 1: /health response must not leak the auth token
|
||||
test('/health response must not contain token field', () => {
|
||||
// Test 1: /health serves auth token for extension bootstrap (localhost-only, safe)
|
||||
// Previously token was removed from /health, but extension needs it since
|
||||
// .auth.json in the extension dir breaks read-only .app bundles and codesigning.
|
||||
test('/health serves auth token with safety comment', () => {
|
||||
const healthBlock = sliceBetween(SERVER_SRC, "url.pathname === '/health'", "url.pathname === '/refs'");
|
||||
// The old pattern was: token: AUTH_TOKEN
|
||||
// The new pattern should have a comment indicating token was removed
|
||||
expect(healthBlock).not.toContain('token: AUTH_TOKEN');
|
||||
expect(healthBlock).toContain('token removed');
|
||||
expect(healthBlock).toContain('token: AUTH_TOKEN');
|
||||
// Must have a comment explaining why this is safe
|
||||
expect(healthBlock).toContain('localhost-only');
|
||||
});
|
||||
|
||||
// Test 2: /refs endpoint requires auth via validateAuth
|
||||
|
||||
@@ -86,9 +86,11 @@ describe('Sidebar prompt injection defense', () => {
|
||||
|
||||
// --- Model Selection ---
|
||||
|
||||
test('default model is opus', () => {
|
||||
// The args array should include --model opus
|
||||
expect(SERVER_SRC).toContain("'--model', 'opus'");
|
||||
test('model routing defaults to opus for analysis tasks', () => {
|
||||
// pickSidebarModel returns opus for ambiguous/analysis messages
|
||||
expect(SERVER_SRC).toContain("return 'opus'");
|
||||
// spawnClaude uses the model router
|
||||
expect(SERVER_SRC).toContain("'--model', model");
|
||||
});
|
||||
|
||||
// --- Trust Boundary ---
|
||||
|
||||
@@ -165,8 +165,10 @@ describe('sidebar JS (sidepanel.js)', () => {
|
||||
expect(js).toContain("data.agentStatus !== 'processing'");
|
||||
});
|
||||
|
||||
test('orphaned thinking cleanup adds (session ended) notice', () => {
|
||||
expect(js).toContain('(session ended)');
|
||||
test('orphaned thinking cleanup removes thinking dots silently', () => {
|
||||
// Thinking dots are removed when agent is idle — no "(session ended)"
|
||||
// notice, which was removed as noisy false-positive UX
|
||||
expect(js).toContain('thinking.remove()');
|
||||
});
|
||||
|
||||
test('sendMessage renders user bubble + thinking dots optimistically', () => {
|
||||
@@ -296,7 +298,7 @@ describe('TTFO latency chain', () => {
|
||||
test('stopAgent also calls stopFastPoll', () => {
|
||||
const stopFn = js.slice(
|
||||
js.indexOf('async function stopAgent()'),
|
||||
js.indexOf('async function stopAgent()') + 800,
|
||||
js.indexOf('async function stopAgent()') + 1000,
|
||||
);
|
||||
expect(stopFn).toContain('stopFastPoll');
|
||||
});
|
||||
@@ -989,12 +991,17 @@ describe('sidebar agent conciseness + no focus stealing', () => {
|
||||
expect(promptSection).toContain('Do NOT keep exploring');
|
||||
});
|
||||
|
||||
test('sidebar agent uses opus (not sonnet) for prompt injection resistance', () => {
|
||||
test('sidebar agent auto-routes model based on message type', () => {
|
||||
// Model router exists and defaults to opus for analysis tasks
|
||||
expect(serverSrc).toContain('function pickSidebarModel(');
|
||||
expect(serverSrc).toContain("return 'opus'");
|
||||
expect(serverSrc).toContain("return 'sonnet'");
|
||||
// spawnClaude uses the router, not a hardcoded model
|
||||
const spawnFn = serverSrc.slice(
|
||||
serverSrc.indexOf('function spawnClaude('),
|
||||
serverSrc.indexOf('\nfunction ', serverSrc.indexOf('function spawnClaude(') + 1),
|
||||
);
|
||||
expect(spawnFn).toContain("'opus'");
|
||||
expect(spawnFn).toContain('pickSidebarModel(userMessage)');
|
||||
});
|
||||
|
||||
test('switchTab has bringToFront option', () => {
|
||||
@@ -1192,3 +1199,471 @@ describe('LLM-based cleanup (smart agent cleanup)', () => {
|
||||
expect(wcSrc).toContain("role') === 'navigation'");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Welcome page + sidebar auto-open ────────────────────────────
|
||||
|
||||
describe('welcome page', () => {
|
||||
const welcomePath = path.join(ROOT, 'src', 'welcome.html');
|
||||
const welcomeExists = fs.existsSync(welcomePath);
|
||||
const welcomeSrc = welcomeExists ? fs.readFileSync(welcomePath, 'utf-8') : '';
|
||||
|
||||
test('welcome.html exists in browse/src/', () => {
|
||||
expect(welcomeExists).toBe(true);
|
||||
});
|
||||
|
||||
test('welcome page has GStack Browser branding', () => {
|
||||
expect(welcomeSrc).toContain('GStack Browser');
|
||||
});
|
||||
|
||||
test('welcome page has extension-ready listener to hide prompt', () => {
|
||||
expect(welcomeSrc).toContain('gstack-extension-ready');
|
||||
expect(welcomeSrc).toContain('sidebar-prompt');
|
||||
});
|
||||
|
||||
test('welcome page points RIGHT toward sidebar (not UP at toolbar)', () => {
|
||||
// Up arrow can never align with browser chrome. Right arrow always
|
||||
// points toward the sidebar area regardless of window size.
|
||||
expect(welcomeSrc).not.toContain('arrow-up');
|
||||
expect(welcomeSrc).toContain('arrow-right');
|
||||
});
|
||||
|
||||
test('welcome page has left-aligned text (no center-align on headings)', () => {
|
||||
// User preference: always left-align, never center
|
||||
expect(welcomeSrc).not.toMatch(/text-align:\s*center/);
|
||||
});
|
||||
|
||||
test('welcome page uses dark theme', () => {
|
||||
expect(welcomeSrc).toContain('#0C0C0C'); // --base (near-black)
|
||||
expect(welcomeSrc).toContain('#141414'); // --surface (card bg)
|
||||
});
|
||||
});
|
||||
|
||||
describe('server /welcome endpoint', () => {
|
||||
const serverSrc = fs.readFileSync(path.join(ROOT, 'src', 'server.ts'), 'utf-8');
|
||||
|
||||
test('/welcome endpoint exists in server.ts', () => {
|
||||
expect(serverSrc).toContain("url.pathname === '/welcome'");
|
||||
});
|
||||
|
||||
test('/welcome serves HTML content type', () => {
|
||||
const welcomeSection = serverSrc.slice(
|
||||
serverSrc.indexOf("url.pathname === '/welcome'"),
|
||||
serverSrc.indexOf("url.pathname === '/health'"),
|
||||
);
|
||||
expect(welcomeSection).toContain("'Content-Type': 'text/html");
|
||||
});
|
||||
|
||||
test('/welcome redirects to about:blank if no welcome file found', () => {
|
||||
const welcomeSection = serverSrc.slice(
|
||||
serverSrc.indexOf("url.pathname === '/welcome'"),
|
||||
serverSrc.indexOf("url.pathname === '/health'"),
|
||||
);
|
||||
expect(welcomeSection).toContain('302');
|
||||
expect(welcomeSection).toContain('about:blank');
|
||||
});
|
||||
});
|
||||
|
||||
describe('headed launch navigates to welcome page', () => {
|
||||
const serverSrc = fs.readFileSync(path.join(ROOT, 'src', 'server.ts'), 'utf-8');
|
||||
|
||||
test('server navigates to /welcome after startup in headed mode', () => {
|
||||
// Navigation must happen AFTER Bun.serve() starts (not during launchHeaded)
|
||||
// because the HTTP server needs to be listening before the browser requests /welcome
|
||||
const afterServe = serverSrc.slice(serverSrc.indexOf('Bun.serve('));
|
||||
expect(afterServe).toContain('/welcome');
|
||||
expect(afterServe).toContain("getConnectionMode() === 'headed'");
|
||||
});
|
||||
|
||||
test('welcome navigation does NOT happen in browser-manager (too early)', () => {
|
||||
const bmSrc = fs.readFileSync(path.join(ROOT, 'src', 'browser-manager.ts'), 'utf-8');
|
||||
// browser-manager.ts should NOT navigate to /welcome because the server
|
||||
// isn't listening yet when launchHeaded() runs
|
||||
const launchHeadedSection = bmSrc.slice(
|
||||
bmSrc.indexOf('async launchHeaded('),
|
||||
bmSrc.indexOf('// Browser disconnect handler'),
|
||||
);
|
||||
expect(launchHeadedSection).not.toContain('/welcome');
|
||||
});
|
||||
});
|
||||
|
||||
describe('sidebar auto-open (background.js)', () => {
|
||||
const bgSrc = fs.readFileSync(path.join(ROOT, '..', 'extension', 'background.js'), 'utf-8');
|
||||
|
||||
test('autoOpenSidePanel function exists with retry logic', () => {
|
||||
expect(bgSrc).toContain('async function autoOpenSidePanel');
|
||||
expect(bgSrc).toContain('attempt < 5');
|
||||
});
|
||||
|
||||
test('auto-open fires on install AND on every service worker startup', () => {
|
||||
// onInstalled fires on first install / extension update
|
||||
expect(bgSrc).toContain('chrome.runtime.onInstalled.addListener');
|
||||
expect(bgSrc).toContain('autoOpenSidePanel()');
|
||||
// Top-level call fires on every service worker startup
|
||||
const topLevelCalls = bgSrc.match(/^autoOpenSidePanel\(\)/gm);
|
||||
expect(topLevelCalls).not.toBeNull();
|
||||
expect(topLevelCalls!.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
test('retry uses backoff delays (not fixed interval)', () => {
|
||||
expect(bgSrc).toContain('500');
|
||||
expect(bgSrc).toContain('1000');
|
||||
expect(bgSrc).toContain('2000');
|
||||
expect(bgSrc).toContain('3000');
|
||||
expect(bgSrc).toContain('5000');
|
||||
});
|
||||
|
||||
test('auto-open uses chrome.sidePanel.open with windowId', () => {
|
||||
expect(bgSrc).toContain('chrome.sidePanel.open');
|
||||
expect(bgSrc).toContain('windowId');
|
||||
});
|
||||
|
||||
test('auto-open logs success and failure for debugging', () => {
|
||||
expect(bgSrc).toContain('Side panel opened on attempt');
|
||||
expect(bgSrc).toContain('Side panel auto-open failed');
|
||||
});
|
||||
});
|
||||
|
||||
describe('sidebar arrow hint hide flow (4-step signal chain)', () => {
|
||||
// The arrow hint on the welcome page should ONLY hide when the sidebar
|
||||
// is actually opened, not when the extension content script loads.
|
||||
//
|
||||
// Signal flow:
|
||||
// 1. sidepanel.js connects → sends { type: 'sidebarOpened' } to background
|
||||
// 2. background.js receives → relays to active tab's content script
|
||||
// 3. content.js receives 'sidebarOpened' → dispatches 'gstack-extension-ready'
|
||||
// 4. welcome.html listens for 'gstack-extension-ready' → hides arrow
|
||||
//
|
||||
const contentSrc = fs.readFileSync(path.join(ROOT, '..', 'extension', 'content.js'), 'utf-8');
|
||||
const bgSrc = fs.readFileSync(path.join(ROOT, '..', 'extension', 'background.js'), 'utf-8');
|
||||
const spSrc = fs.readFileSync(path.join(ROOT, '..', 'extension', 'sidepanel.js'), 'utf-8');
|
||||
const welcomeSrc = fs.readFileSync(path.join(ROOT, 'src', 'welcome.html'), 'utf-8');
|
||||
|
||||
// Step 1: sidepanel sends sidebarOpened when connected
|
||||
test('step 1: sidepanel sends sidebarOpened message on connect', () => {
|
||||
expect(spSrc).toContain("{ type: 'sidebarOpened' }");
|
||||
// Should be in updateConnection, after setConnState('connected')
|
||||
const connectFn = spSrc.slice(
|
||||
spSrc.indexOf('function updateConnection('),
|
||||
spSrc.indexOf('function updateConnection(') + 800,
|
||||
);
|
||||
expect(connectFn).toContain('sidebarOpened');
|
||||
});
|
||||
|
||||
// Step 2: background.js accepts and relays sidebarOpened
|
||||
test('step 2: background.js allows sidebarOpened message type', () => {
|
||||
expect(bgSrc).toContain("'sidebarOpened'");
|
||||
// Must be in ALLOWED_TYPES
|
||||
const allowedBlock = bgSrc.slice(
|
||||
bgSrc.indexOf('ALLOWED_TYPES'),
|
||||
bgSrc.indexOf('ALLOWED_TYPES') + 300,
|
||||
);
|
||||
expect(allowedBlock).toContain('sidebarOpened');
|
||||
});
|
||||
|
||||
test('step 2: background.js relays sidebarOpened to active tab content script', () => {
|
||||
expect(bgSrc).toContain("msg.type === 'sidebarOpened'");
|
||||
// Should send to active tab via chrome.tabs.sendMessage
|
||||
const handler = bgSrc.slice(
|
||||
bgSrc.indexOf("msg.type === 'sidebarOpened'"),
|
||||
bgSrc.indexOf("msg.type === 'sidebarOpened'") + 400,
|
||||
);
|
||||
expect(handler).toContain('chrome.tabs.sendMessage');
|
||||
expect(handler).toContain("{ type: 'sidebarOpened' }");
|
||||
});
|
||||
|
||||
// Step 3: content.js fires gstack-extension-ready ONLY on sidebarOpened
|
||||
test('step 3: content.js dispatches extension-ready on sidebarOpened message', () => {
|
||||
expect(contentSrc).toContain("msg.type === 'sidebarOpened'");
|
||||
expect(contentSrc).toContain("new CustomEvent('gstack-extension-ready')");
|
||||
});
|
||||
|
||||
test('step 3: content.js does NOT auto-fire extension-ready on load', () => {
|
||||
// The old pattern was: fire immediately when content script loads.
|
||||
// Now it should only fire when sidebarOpened message arrives.
|
||||
// Check there's no top-level dispatchEvent outside the message handler.
|
||||
const beforeListener = contentSrc.slice(0, contentSrc.indexOf('chrome.runtime.onMessage'));
|
||||
expect(beforeListener).not.toContain("dispatchEvent(new CustomEvent('gstack-extension-ready'))");
|
||||
});
|
||||
|
||||
// Step 4: welcome page hides arrow on gstack-extension-ready
|
||||
test('step 4: welcome page hides arrow on gstack-extension-ready event', () => {
|
||||
expect(welcomeSrc).toContain("'gstack-extension-ready'");
|
||||
expect(welcomeSrc).toContain("classList.add('hidden')");
|
||||
});
|
||||
|
||||
test('step 4: welcome page does NOT auto-hide via status pill polling', () => {
|
||||
// The old fallback (checkPill/gstack-status-pill) would hide the arrow
|
||||
// as soon as the content script injected the pill, even without sidebar open.
|
||||
expect(welcomeSrc).not.toContain('checkPill');
|
||||
expect(welcomeSrc).not.toContain('gstack-status-pill');
|
||||
});
|
||||
});
|
||||
|
||||
describe('sidebar auth race prevention', () => {
|
||||
const bgSrc = fs.readFileSync(path.join(ROOT, '..', 'extension', 'background.js'), 'utf-8');
|
||||
const spSrc = fs.readFileSync(path.join(ROOT, '..', 'extension', 'sidepanel.js'), 'utf-8');
|
||||
|
||||
test('getPort response includes authToken (not just port + connected)', () => {
|
||||
// The auth race: sidepanel calls getPort, gets {port, connected} but no token.
|
||||
// All subsequent requests fail 401. Token must be in the getPort response.
|
||||
const getPortHandler = bgSrc.slice(
|
||||
bgSrc.indexOf("msg.type === 'getPort'"),
|
||||
bgSrc.indexOf("msg.type === 'setPort'"),
|
||||
);
|
||||
expect(getPortHandler).toContain('token: authToken');
|
||||
});
|
||||
|
||||
test('tryConnect uses token from getPort response', () => {
|
||||
// Sidepanel must pass resp.token to updateConnection, not null
|
||||
const start = spSrc.indexOf('function tryConnect()');
|
||||
const end = spSrc.indexOf('\ntryConnect();', start); // top-level call after the function
|
||||
const tryConnectFn = spSrc.slice(start, end);
|
||||
expect(tryConnectFn).toContain('resp.token');
|
||||
expect(tryConnectFn).not.toContain('updateConnection(url, null)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('startup health check fast-retry', () => {
|
||||
const bgSrc = fs.readFileSync(path.join(ROOT, '..', 'extension', 'background.js'), 'utf-8');
|
||||
|
||||
test('initial health check retries every 1s (not 10s)', () => {
|
||||
// The server may not be listening when the extension starts because
|
||||
// Chromium launches before Bun.serve(). A 10s gap means the user
|
||||
// stares at "Connecting..." for 10 seconds. 1s retry fixes this.
|
||||
expect(bgSrc).toContain('startupAttempts');
|
||||
expect(bgSrc).toContain('setInterval(async ()');
|
||||
// Fast retry uses 1000ms, not the 10000ms slow poll
|
||||
expect(bgSrc).toContain('}, 1000);');
|
||||
});
|
||||
|
||||
test('startup retry stops after connection or max attempts', () => {
|
||||
expect(bgSrc).toContain('isConnected || startupAttempts >= 15');
|
||||
expect(bgSrc).toContain('clearInterval(startupCheck)');
|
||||
});
|
||||
|
||||
test('slow 10s polling only starts after startup phase completes', () => {
|
||||
expect(bgSrc).toContain('if (!healthInterval)');
|
||||
expect(bgSrc).toContain('setInterval(checkHealth, 10000)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('sidebar debug visibility when stuck', () => {
|
||||
const spSrc = fs.readFileSync(path.join(ROOT, '..', 'extension', 'sidepanel.js'), 'utf-8');
|
||||
|
||||
test('connection state machine has a dead state with user-visible message', () => {
|
||||
expect(spSrc).toContain("'dead'");
|
||||
expect(spSrc).toContain('MAX_RECONNECT_ATTEMPTS');
|
||||
});
|
||||
|
||||
test('reconnect attempt counter is visible in the UI', () => {
|
||||
// The banner should show attempt count so user knows something is happening
|
||||
expect(spSrc).toContain('reconnectAttempts');
|
||||
});
|
||||
});
|
||||
|
||||
describe('BROWSE_NO_AUTOSTART (sidebar headless prevention)', () => {
|
||||
const cliSrc = fs.readFileSync(path.join(ROOT, 'src', 'cli.ts'), 'utf-8');
|
||||
const agentSrc = fs.readFileSync(path.join(ROOT, 'src', 'sidebar-agent.ts'), 'utf-8');
|
||||
|
||||
test('cli.ts checks BROWSE_NO_AUTOSTART before starting a new server', () => {
|
||||
// ensureServer must check this env var BEFORE calling startServer()
|
||||
const ensureServerFn = cliSrc.slice(
|
||||
cliSrc.indexOf('async function ensureServer()'),
|
||||
cliSrc.indexOf('async function startServer()'),
|
||||
);
|
||||
expect(ensureServerFn).toContain('BROWSE_NO_AUTOSTART');
|
||||
expect(ensureServerFn).toContain('process.exit(1)');
|
||||
});
|
||||
|
||||
test('cli.ts shows actionable error message when BROWSE_NO_AUTOSTART blocks', () => {
|
||||
expect(cliSrc).toContain('/open-gstack-browser');
|
||||
expect(cliSrc).toContain('BROWSE_NO_AUTOSTART is set');
|
||||
});
|
||||
|
||||
test('sidebar-agent.ts sets BROWSE_NO_AUTOSTART=1', () => {
|
||||
expect(agentSrc).toContain("BROWSE_NO_AUTOSTART: '1'");
|
||||
});
|
||||
|
||||
test('sidebar-agent.ts sets BROWSE_PORT for headed server reuse', () => {
|
||||
expect(agentSrc).toContain('BROWSE_PORT');
|
||||
});
|
||||
|
||||
test('BROWSE_NO_AUTOSTART check happens before lock acquisition', () => {
|
||||
// The guard must be BEFORE the lock acquisition. If it's after,
|
||||
// we'd acquire a lock and then exit, leaving a stale lock file.
|
||||
const ensureServerStart = cliSrc.indexOf('async function ensureServer()');
|
||||
const noAutoStart = cliSrc.indexOf('BROWSE_NO_AUTOSTART', ensureServerStart);
|
||||
const lockAcquisition = cliSrc.indexOf('Acquire lock', ensureServerStart);
|
||||
expect(noAutoStart).toBeGreaterThan(0);
|
||||
expect(lockAcquisition).toBeGreaterThan(0);
|
||||
expect(noAutoStart).toBeLessThan(lockAcquisition);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Tool-result file filtering (sidebar-agent.ts) ──────────────
|
||||
|
||||
describe('sidebar-agent hides internal tool-result reads', () => {
|
||||
const agentSrc = fs.readFileSync(path.join(ROOT, 'src', 'sidebar-agent.ts'), 'utf-8');
|
||||
|
||||
test('describeToolCall returns empty for tool-results paths', () => {
|
||||
expect(agentSrc).toContain("input.file_path.includes('/tool-results/')");
|
||||
});
|
||||
|
||||
test('describeToolCall returns empty for .claude/projects paths', () => {
|
||||
expect(agentSrc).toContain("input.file_path.includes('/.claude/projects/')");
|
||||
});
|
||||
|
||||
test('empty description causes early return (no event sent)', () => {
|
||||
// describeToolCall returns '' for internal reads, which means
|
||||
// summarizeToolInput returns '', which means event.input is ''
|
||||
const readHandler = agentSrc.slice(
|
||||
agentSrc.indexOf("if (tool === 'Read'"),
|
||||
agentSrc.indexOf("if (tool === 'Edit'"),
|
||||
);
|
||||
expect(readHandler).toContain("return ''");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Sidebar skips empty tool_use entries (sidepanel.js) ────────
|
||||
|
||||
describe('sidebar skips empty tool_use descriptions', () => {
|
||||
const js = fs.readFileSync(path.join(ROOT, '..', 'extension', 'sidepanel.js'), 'utf-8');
|
||||
|
||||
test('tool_use with no input returns early', () => {
|
||||
const toolUseHandler = js.slice(
|
||||
js.indexOf("entry.type === 'tool_use'"),
|
||||
js.indexOf("entry.type === 'tool_use'") + 400,
|
||||
);
|
||||
expect(toolUseHandler).toContain("if (!toolInput) return");
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Tool calls collapse into "See reasoning" on agent_done ─────
|
||||
|
||||
describe('tool calls collapse into reasoning disclosure', () => {
|
||||
const js = fs.readFileSync(path.join(ROOT, '..', 'extension', 'sidepanel.js'), 'utf-8');
|
||||
const css = fs.readFileSync(path.join(ROOT, '..', 'extension', 'sidepanel.css'), 'utf-8');
|
||||
|
||||
test('agent_done wraps tool calls in <details> element', () => {
|
||||
const doneHandler = js.slice(
|
||||
js.indexOf("entry.type === 'agent_done'"),
|
||||
js.indexOf("entry.type === 'agent_done'") + 1200,
|
||||
);
|
||||
expect(doneHandler).toContain("createElement('details')");
|
||||
expect(doneHandler).toContain('agent-reasoning');
|
||||
});
|
||||
|
||||
test('disclosure summary shows step count', () => {
|
||||
const doneHandler = js.slice(
|
||||
js.indexOf("entry.type === 'agent_done'"),
|
||||
js.indexOf("entry.type === 'agent_done'") + 1200,
|
||||
);
|
||||
expect(doneHandler).toContain('See reasoning');
|
||||
expect(doneHandler).toContain('tools.length');
|
||||
});
|
||||
|
||||
test('disclosure inserts before text response', () => {
|
||||
const doneHandler = js.slice(
|
||||
js.indexOf("entry.type === 'agent_done'"),
|
||||
js.indexOf("entry.type === 'agent_done'") + 1200,
|
||||
);
|
||||
// Tool calls should appear before the text answer, not after
|
||||
expect(doneHandler).toContain("querySelector('.agent-text')");
|
||||
expect(doneHandler).toContain('insertBefore(details, textEl)');
|
||||
});
|
||||
|
||||
test('CSS styles the reasoning disclosure', () => {
|
||||
expect(css).toContain('.agent-reasoning');
|
||||
expect(css).toContain('.agent-reasoning summary');
|
||||
// Starts collapsed (no [open] by default)
|
||||
expect(css).toContain('.agent-reasoning[open]');
|
||||
});
|
||||
|
||||
test('disclosure uses custom triangle markers', () => {
|
||||
// No default list-style, custom ▶/▼ via ::before
|
||||
expect(css).toContain('list-style: none');
|
||||
expect(css).toMatch(/agent-reasoning summary::before/);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Idle timeout disabled in headed mode (server.ts) ───────────
|
||||
|
||||
describe('idle timeout behavior (server.ts)', () => {
|
||||
const serverSrc = fs.readFileSync(path.join(ROOT, 'src', 'server.ts'), 'utf-8');
|
||||
|
||||
test('idle check skips in headed mode', () => {
|
||||
const idleCheck = serverSrc.slice(
|
||||
serverSrc.indexOf('idleCheckInterval'),
|
||||
serverSrc.indexOf('idleCheckInterval') + 300,
|
||||
);
|
||||
expect(idleCheck).toContain("=== 'headed'");
|
||||
expect(idleCheck).toContain('return');
|
||||
});
|
||||
|
||||
test('sidebar-command resets idle timer', () => {
|
||||
const sidebarCmd = serverSrc.slice(
|
||||
serverSrc.indexOf("url.pathname === '/sidebar-command'"),
|
||||
serverSrc.indexOf("url.pathname === '/sidebar-command'") + 300,
|
||||
);
|
||||
expect(sidebarCmd).toContain('resetIdleTimer');
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Shutdown kills sidebar-agent daemon (server.ts) ────────────
|
||||
|
||||
describe('shutdown cleanup (server.ts)', () => {
|
||||
const serverSrc = fs.readFileSync(path.join(ROOT, 'src', 'server.ts'), 'utf-8');
|
||||
|
||||
test('shutdown kills sidebar-agent daemon process', () => {
|
||||
const shutdownFn = serverSrc.slice(
|
||||
serverSrc.indexOf('async function shutdown()'),
|
||||
serverSrc.indexOf('async function shutdown()') + 800,
|
||||
);
|
||||
expect(shutdownFn).toContain('sidebar-agent');
|
||||
expect(shutdownFn).toContain('pkill');
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Cookie button in sidebar footer ────────────────────────────
|
||||
|
||||
describe('cookie import button (sidebar)', () => {
|
||||
const html = fs.readFileSync(path.join(ROOT, '..', 'extension', 'sidepanel.html'), 'utf-8');
|
||||
const js = fs.readFileSync(path.join(ROOT, '..', 'extension', 'sidepanel.js'), 'utf-8');
|
||||
|
||||
test('quick actions toolbar has cookies button', () => {
|
||||
expect(html).toContain('id="chat-cookies-btn"');
|
||||
expect(html).toContain('Cookies');
|
||||
});
|
||||
|
||||
test('cookies button navigates to cookie-picker', () => {
|
||||
expect(js).toContain("'chat-cookies-btn'");
|
||||
expect(js).toContain('cookie-picker');
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Model routing (server.ts) ──────────────────────────────────
|
||||
|
||||
describe('sidebar model routing (server.ts)', () => {
|
||||
const serverSrc = fs.readFileSync(path.join(ROOT, 'src', 'server.ts'), 'utf-8');
|
||||
|
||||
test('pickSidebarModel routes actions to sonnet', () => {
|
||||
expect(serverSrc).toContain("return 'sonnet'");
|
||||
});
|
||||
|
||||
test('pickSidebarModel routes analysis to opus', () => {
|
||||
expect(serverSrc).toContain("return 'opus'");
|
||||
});
|
||||
|
||||
test('analysis words override action verbs', () => {
|
||||
// ANALYSIS_WORDS check comes before ACTION_PATTERNS
|
||||
const routerFn = serverSrc.slice(
|
||||
serverSrc.indexOf('function pickSidebarModel('),
|
||||
serverSrc.indexOf('function pickSidebarModel(') + 600,
|
||||
);
|
||||
const analysisCheck = routerFn.indexOf('ANALYSIS_WORDS');
|
||||
const actionCheck = routerFn.indexOf('ACTION_PATTERNS');
|
||||
expect(analysisCheck).toBeGreaterThan(0);
|
||||
expect(actionCheck).toBeGreaterThan(0);
|
||||
expect(analysisCheck).toBeLessThan(actionCheck);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* Welcome page E2E test — verifies the sidebar arrow hint and key elements
|
||||
* render correctly when the welcome page is served via HTTP.
|
||||
*
|
||||
* Spins up a real Bun.serve, fetches the HTML, and parses it to verify
|
||||
* the sidebar prompt arrow, feature cards, and branding are present.
|
||||
*/
|
||||
|
||||
import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
const WELCOME_PATH = path.join(import.meta.dir, '../src/welcome.html');
|
||||
const welcomeHtml = fs.readFileSync(WELCOME_PATH, 'utf-8');
|
||||
|
||||
let server: ReturnType<typeof Bun.serve>;
|
||||
let baseUrl: string;
|
||||
|
||||
beforeAll(() => {
|
||||
// Serve the welcome page exactly as the browse server does
|
||||
server = Bun.serve({
|
||||
port: 0,
|
||||
hostname: '127.0.0.1',
|
||||
fetch() {
|
||||
return new Response(welcomeHtml, {
|
||||
headers: { 'Content-Type': 'text/html; charset=utf-8' },
|
||||
});
|
||||
},
|
||||
});
|
||||
baseUrl = `http://127.0.0.1:${server.port}`;
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
server?.stop();
|
||||
});
|
||||
|
||||
describe('welcome page served via HTTP', () => {
|
||||
let html: string;
|
||||
|
||||
beforeAll(async () => {
|
||||
const resp = await fetch(baseUrl);
|
||||
expect(resp.ok).toBe(true);
|
||||
expect(resp.headers.get('content-type')).toContain('text/html');
|
||||
html = await resp.text();
|
||||
});
|
||||
|
||||
// ─── Sidebar arrow hint (the bug that triggered this test) ────────
|
||||
|
||||
test('sidebar prompt arrow is present and visible', () => {
|
||||
// The arrow element with class "arrow-right" must exist
|
||||
expect(html).toContain('class="arrow-right"');
|
||||
// It should contain the right-arrow character (→ = →)
|
||||
expect(html).toContain('→');
|
||||
});
|
||||
|
||||
test('sidebar prompt container is visible by default (no hidden class)', () => {
|
||||
// The prompt div should NOT have the "hidden" class on initial load
|
||||
expect(html).toContain('id="sidebar-prompt"');
|
||||
// Check it doesn't start hidden
|
||||
expect(html).not.toMatch(/class="sidebar-prompt[^"]*hidden/);
|
||||
});
|
||||
|
||||
test('sidebar prompt has instruction text', () => {
|
||||
expect(html).toContain('Open the sidebar to get started');
|
||||
expect(html).toContain('puzzle piece');
|
||||
});
|
||||
|
||||
test('sidebar prompt is positioned on the right side', () => {
|
||||
// CSS should position it on the right
|
||||
expect(html).toMatch(/\.sidebar-prompt\s*\{[^}]*right:\s*\d+px/);
|
||||
});
|
||||
|
||||
test('arrow has nudge animation', () => {
|
||||
expect(html).toContain('@keyframes nudge');
|
||||
expect(html).toMatch(/\.arrow-right\s*\{[^}]*animation:\s*nudge/);
|
||||
});
|
||||
|
||||
// ─── Branding ─────────────────────────────────────────────────────
|
||||
|
||||
test('has GStack Browser title and branding', () => {
|
||||
expect(html).toContain('<title>GStack Browser</title>');
|
||||
expect(html).toContain('GStack Browser');
|
||||
});
|
||||
|
||||
test('has amber dot logo', () => {
|
||||
expect(html).toContain('class="logo-dot"');
|
||||
expect(html).toContain('class="logo-text"');
|
||||
});
|
||||
|
||||
// ─── Feature cards ────────────────────────────────────────────────
|
||||
|
||||
test('has all six feature cards', () => {
|
||||
expect(html).toContain('Talk to the sidebar');
|
||||
expect(html).toContain('Or use your main agent');
|
||||
expect(html).toContain('Import your cookies');
|
||||
expect(html).toContain('Clean up any page');
|
||||
expect(html).toContain('Smart screenshots');
|
||||
expect(html).toContain('Modify any page');
|
||||
});
|
||||
|
||||
// ─── Try it section ───────────────────────────────────────────────
|
||||
|
||||
test('has try-it section with example prompts', () => {
|
||||
expect(html).toContain('Try it now');
|
||||
expect(html).toContain('news.ycombinator.com');
|
||||
});
|
||||
|
||||
// ─── Extension auto-hide ──────────────────────────────────────────
|
||||
|
||||
test('hides sidebar prompt when extension is detected', () => {
|
||||
// Should listen for the extension-ready event
|
||||
expect(html).toContain("'gstack-extension-ready'");
|
||||
// Should add 'hidden' class to sidebar-prompt
|
||||
expect(html).toContain("classList.add('hidden')");
|
||||
});
|
||||
|
||||
test('does NOT auto-hide based on extension detection alone', () => {
|
||||
// The arrow should only hide when the sidebar actually opens,
|
||||
// not when the content script loads (which happens on every page)
|
||||
expect(html).not.toContain('gstack-status-pill');
|
||||
expect(html).not.toContain('checkPill');
|
||||
});
|
||||
|
||||
// ─── Dark theme ───────────────────────────────────────────────────
|
||||
|
||||
test('uses dark theme colors', () => {
|
||||
expect(html).toContain('--base: #0C0C0C');
|
||||
expect(html).toContain('--surface: #141414');
|
||||
});
|
||||
|
||||
// ─── Left-aligned text ────────────────────────────────────────────
|
||||
|
||||
test('text is left-aligned, not centered', () => {
|
||||
expect(html).not.toMatch(/text-align:\s*center/);
|
||||
});
|
||||
|
||||
// ─── Footer ───────────────────────────────────────────────────────
|
||||
|
||||
test('has footer with attribution', () => {
|
||||
expect(html).toContain('Garry Tan');
|
||||
expect(html).toContain('github.com/garrytan/gstack');
|
||||
});
|
||||
});
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
open-gstack-browser
|
||||
@@ -0,0 +1,376 @@
|
||||
# GStack Browser V0 — The AI-Native Development Browser
|
||||
|
||||
**Date:** 2026-03-30
|
||||
**Author:** Garry Tan + Claude Code
|
||||
**Status:** Phase 1a shipped, Phase 1b in progress
|
||||
**Branch:** garrytan/gstack-as-browser
|
||||
|
||||
## The Thesis
|
||||
|
||||
Every other AI browser (Atlas, Dia, Comet, Chrome Auto Browse) starts with a
|
||||
consumer browser and bolts AI onto it. GStack Browser inverts this. It starts
|
||||
with Claude Code as the runtime and gives it a browser viewport.
|
||||
|
||||
The agent is the primary citizen. The browser is the canvas. Skills are
|
||||
first-class capabilities. You don't "use a browser with AI help." You use
|
||||
an AI that can see and interact with the web.
|
||||
|
||||
This is the IDE for the post-IDE era. Code lives in the terminal. The product
|
||||
lives in the browser. The AI works across both simultaneously. What Cursor did
|
||||
for text editors, GStack Browser does for the browser.
|
||||
|
||||
## What It Is Today (Phase 1a, shipped)
|
||||
|
||||
A double-clickable macOS .app that wraps Playwright's Chromium with the gstack
|
||||
sidebar extension baked in. You open it and Claude Code can see your screen,
|
||||
navigate pages, fill forms, take screenshots, inspect CSS, clean up overlays,
|
||||
and run any gstack skill. All without touching a terminal.
|
||||
|
||||
```
|
||||
GStack Browser.app (389MB, 189MB DMG)
|
||||
├── Compiled browse binary (58MB) — CLI + HTTP server
|
||||
├── Chrome extension (172KB) — sidebar, activity feed, inspector
|
||||
├── Playwright's Chromium (330MB) — the actual browser
|
||||
└── Launcher script — binds project dir, sets env vars
|
||||
```
|
||||
|
||||
Launch → Chromium opens with sidebar → extension auto-connects to browse server
|
||||
→ agent ready in ~5 seconds.
|
||||
|
||||
## What It Will Be
|
||||
|
||||
### Phase 1b: Developer UX (next)
|
||||
|
||||
**Command Palette (Cmd+K):** The signature interaction. Opens a fuzzy-filtered
|
||||
skill picker. Type "/qa" to start QA testing, "/investigate" to debug, "/ship"
|
||||
to create a PR. Skills are fetched from the browse server, not hardcoded. The
|
||||
palette is the entry point to everything.
|
||||
|
||||
**Quick Screenshot (Cmd+Shift+S):** Capture the current viewport and pipe it into
|
||||
the sidebar chat with "What do you see?" context. The AI analyzes the screenshot
|
||||
and gives you actionable feedback. Visual bug reports in one keystroke.
|
||||
|
||||
**Status Bar:** A persistent 30px bar at the bottom of every page. Shows agent
|
||||
status (idle/thinking), workspace name, current branch, and auto-detected dev
|
||||
servers. Click a dev server pill to navigate. Always-visible context about what
|
||||
the AI is doing.
|
||||
|
||||
**Auto-Detect Dev Servers:** On launch, scans common ports (3000, 3001, 4200,
|
||||
5173, 5174, 8000, 8080). If exactly one server is found, auto-navigates to it.
|
||||
Dev server pills in the status bar for one-click switching.
|
||||
|
||||
### Phase 2: BoomLooper Integration
|
||||
|
||||
The sidebar connects to BoomLooper's Phoenix/Elixir APIs instead of a local
|
||||
`claude -p` subprocess. BoomLooper provides:
|
||||
|
||||
- **Multi-agent orchestration.** Spawn 5 agents in parallel, each with its own
|
||||
browser tab. One runs QA, one does design review, one watches for regressions.
|
||||
- **Docker infrastructure.** Each agent gets an isolated container. The browser
|
||||
inside the container tests the dev server. No port conflicts, no state leakage.
|
||||
- **Session persistence.** Agent conversations survive browser restarts. Pick up
|
||||
where you left off.
|
||||
- **Team visibility.** Your teammates can watch what your agents are doing in
|
||||
real-time. Like pair programming, but the pair is 5 AI agents and you're the
|
||||
conductor.
|
||||
|
||||
### Phase 3: Browse as BoomLooper Tool
|
||||
|
||||
The browse binary becomes an MCP tool in BoomLooper. Agents in Docker containers
|
||||
use browse commands to test dev servers, take screenshots, fill forms, and verify
|
||||
deployments. Cross-platform compilation (linux-arm64/x64) required.
|
||||
|
||||
### Phase 4: Chromium Fork (trigger-gated)
|
||||
|
||||
When the extension side panel hits hard API limits, GStack Browser ships to
|
||||
external users, build infra exists, and the business justifies maintenance:
|
||||
fork Chromium. Brave's `chromium_src` override pattern, CC-powered 6-week
|
||||
rebases (2-4 hours with CC vs 1-2 weeks human). ~20-30 files modified.
|
||||
|
||||
### Phase 5: Native Shell
|
||||
|
||||
SwiftUI/AppKit app shell with native sidebar, isolated Chromium service. Full
|
||||
platform integration. May be superseded by Phase 4 if the Chromium fork includes
|
||||
a native sidebar.
|
||||
|
||||
## Vision: What an AI Browser Can Do
|
||||
|
||||
### 1. See What You See
|
||||
|
||||
The browser is the AI's eyes. Not through screenshots (though it can do that),
|
||||
but through DOM access, CSS inspection, network monitoring, and accessibility
|
||||
tree parsing. The AI understands the page structure, not just the pixels.
|
||||
|
||||
**Today:** `snapshot` command returns an accessibility-tree representation of any
|
||||
page. The AI can "see" every button, link, form field, and text element. Element
|
||||
references (`@e1`, `@e2`) let the AI click, fill, and interact.
|
||||
|
||||
**Next:** Real-time page observation. The AI notices when a page changes, when an
|
||||
error appears in the console, when a network request fails. Proactive debugging
|
||||
without being asked.
|
||||
|
||||
**Future:** Visual understanding. The AI compares before/after screenshots to catch
|
||||
visual regressions. Pixel-level design review. "This button moved 3px left and the
|
||||
font changed from 14px to 13px."
|
||||
|
||||
### 2. Act on What It Sees
|
||||
|
||||
Not just reading pages, but interacting with them like a human user would.
|
||||
|
||||
**Today:** Click, fill, select, hover, type, scroll, upload files, handle dialogs,
|
||||
navigate, manage tabs. All via simple commands through the browse server.
|
||||
|
||||
**Next:** Multi-step user flows. "Log in, go to settings, change the timezone,
|
||||
verify the confirmation message." The AI chains commands with verification at each
|
||||
step.
|
||||
|
||||
**Future:** Autonomous QA agent. "Test every link on this page. Fill every form.
|
||||
Try to break it." The AI runs exhaustive interaction testing without a script.
|
||||
Finds bugs a human tester would miss because it tries combinations humans don't
|
||||
think of.
|
||||
|
||||
### 3. Write Code While Browsing
|
||||
|
||||
This is the key differentiator. The AI can see the bug in the browser AND fix it
|
||||
in the code simultaneously.
|
||||
|
||||
**Today:** The sidebar chat connects to Claude Code. You say "this button is
|
||||
misaligned" and the AI reads the CSS, identifies the issue, and proposes a fix.
|
||||
The `/design-review` skill takes screenshots, identifies visual issues, and
|
||||
commits fixes with before/after evidence.
|
||||
|
||||
**Next:** Live reload loop. The AI edits CSS/HTML, the browser auto-reloads, the
|
||||
AI verifies the fix visually. No human in the loop for simple visual fixes.
|
||||
"Fix every spacing issue on this page" becomes a 30-second task.
|
||||
|
||||
**Future:** Full-stack debugging. The AI sees a 500 error in the browser, reads
|
||||
the server logs, traces to the failing line, writes the fix, and verifies in the
|
||||
browser. One command: "This page is broken. Fix it."
|
||||
|
||||
### 4. Understand the Whole Stack
|
||||
|
||||
The browser isn't just a viewport. It's a window into the application's health.
|
||||
|
||||
**Today:**
|
||||
- Console log capture — every `console.log`, `console.error`, and warning
|
||||
- Network request monitoring — every XHR, fetch, websocket, and static asset
|
||||
- Performance metrics — Core Web Vitals, resource timing, paint events
|
||||
- Cookie and storage inspection — read and write localStorage, sessionStorage
|
||||
- CSS inspection — computed styles, box model, rule cascade
|
||||
|
||||
**Next:**
|
||||
- Network request replay — "replay this failing request with different params"
|
||||
- Performance regression detection — "this page is 200ms slower than yesterday"
|
||||
- Dependency auditing — "this page loads 47 third-party scripts"
|
||||
- Accessibility auditing — "this form has no labels, these colors fail contrast"
|
||||
|
||||
**Future:**
|
||||
- Full application telemetry — CPU, memory, GPU usage in real-time
|
||||
- Cross-browser testing — same test suite across Chrome, Firefox, Safari
|
||||
- Real user monitoring correlation — "this bug affects 12% of production users"
|
||||
|
||||
### 5. The Workspace Model
|
||||
|
||||
The browser IS the workspace. Not a tab in a workspace. The workspace itself.
|
||||
|
||||
**Today:** Each browser session is bound to a project directory. The sidebar shows
|
||||
the current branch. The status bar shows detected dev servers.
|
||||
|
||||
**Next:** Multi-project support. Switch between projects without closing the
|
||||
browser. Each project gets its own set of tabs, its own agent, its own context.
|
||||
Like VSCode workspaces, but for the browser.
|
||||
|
||||
**Future:** Team workspaces. Multiple developers share a browser workspace. See
|
||||
each other's agents working. Collaborative debugging where one person navigates
|
||||
and the other watches the AI fix things in real-time.
|
||||
|
||||
### 6. Skills as Browser Capabilities
|
||||
|
||||
Every gstack skill becomes a browser capability.
|
||||
|
||||
| Skill | Browser Capability |
|
||||
|-------|-------------------|
|
||||
| `/qa` | Test every page, find bugs, fix them, verify fixes |
|
||||
| `/design-review` | Screenshot → analyze → fix CSS → screenshot again |
|
||||
| `/investigate` | See the error in browser → trace to code → fix → verify |
|
||||
| `/benchmark` | Measure page performance → detect regressions → alert |
|
||||
| `/canary` | Monitor deployed site → screenshot periodically → alert on changes |
|
||||
| `/ship` | Run tests → review diff → create PR → verify deployment in browser |
|
||||
| `/cso` | Audit page for XSS, open redirects, clickjacking in real browser |
|
||||
| `/office-hours` | Browse competitor sites → synthesize observations → design doc |
|
||||
|
||||
The command palette (Cmd+K) is the hub. You don't need to know the skills exist.
|
||||
You type what you want, the fuzzy filter finds the right skill, and the AI runs it
|
||||
with the browser as context.
|
||||
|
||||
### 7. The Design Loop
|
||||
|
||||
AI-powered design is a loop, not a handoff.
|
||||
|
||||
```
|
||||
Generate mockup (GPT Image API)
|
||||
→ Review in browser (side-by-side with live site)
|
||||
→ Iterate with feedback ("make the header taller")
|
||||
→ Approve direction
|
||||
→ Generate production HTML/CSS
|
||||
→ Preview in browser
|
||||
→ Fine-tune with /design-review
|
||||
→ Ship
|
||||
```
|
||||
|
||||
The browser closes the gap between "what it looks like in Figma" and "what it
|
||||
looks like in production." Because the AI can see both simultaneously.
|
||||
|
||||
### 8. The Security Loop
|
||||
|
||||
CSO review in a real browser, not just static analysis.
|
||||
|
||||
- Inject XSS payloads into every input field, check if they execute
|
||||
- Test CSRF by replaying requests from a different origin
|
||||
- Check for open redirects by navigating to crafted URLs
|
||||
- Verify CSP headers are actually enforced (not just present)
|
||||
- Test auth flows by manipulating cookies and tokens in real-time
|
||||
- Check for clickjacking by loading the site in an iframe
|
||||
|
||||
Static analysis catches patterns. Browser testing catches reality.
|
||||
|
||||
### 9. The Monitoring Loop
|
||||
|
||||
Post-deploy canary monitoring, in a real browser.
|
||||
|
||||
```
|
||||
Deploy → Browser loads production URL
|
||||
→ Screenshot baseline
|
||||
→ Every 5 minutes: screenshot, compare, check console
|
||||
→ Alert on: visual regression, new console errors, performance drop
|
||||
→ Auto-rollback if critical error detected
|
||||
```
|
||||
|
||||
Synthetic monitoring with AI judgment. Not just "did the page return 200" but
|
||||
"does the page look right and work correctly."
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
+-------------------------------------------------------+
|
||||
| GStack Browser |
|
||||
| |
|
||||
| +------------------+ +---------------------------+ |
|
||||
| | Chromium | | Extension Side Panel | |
|
||||
| | (Playwright) | | ├── Chat (Claude Code) | |
|
||||
| | | | ├── Activity Feed | |
|
||||
| | ┌────────────┐ | | ├── Element Refs | |
|
||||
| | │ Status Bar │ | | ├── CSS Inspector | |
|
||||
| | └────────────┘ | | ├── Command Palette | |
|
||||
| +--------┬──────────+ | └── Settings | |
|
||||
| │ +-------------┬--------------+ |
|
||||
+-----------┼────────────────────────────┼─────────────────+
|
||||
│ │
|
||||
v v
|
||||
+---------┴-----------+ +-----------┴-----------+
|
||||
| Browse Server | | Sidebar Agent |
|
||||
| (HTTP + SSE) | | (claude -p wrapper) |
|
||||
| :34567 | | Runs gstack skills |
|
||||
| | | Per-tab isolation |
|
||||
| Commands: | | |
|
||||
| goto, click, fill | | Future: BoomLooper |
|
||||
| snapshot, screenshot| | GenServer agents |
|
||||
| css, inspect, eval | | |
|
||||
+---------┬-----------+ +-----------┬-----------+
|
||||
│ │
|
||||
v v
|
||||
+---------┴-----------+ +-----------┴-----------+
|
||||
| User's App | | Claude Code |
|
||||
| localhost:3000 | | (reads/writes code) |
|
||||
| (or any URL) | | |
|
||||
+---------------------+ +-----------------------+
|
||||
```
|
||||
|
||||
## Competitive Landscape
|
||||
|
||||
| Browser | Approach | Differentiator | Weakness |
|
||||
|---------|----------|---------------|----------|
|
||||
| **Atlas** | Chromium fork + AI layer | Agentic browser, "OWL" isolated Chromium | Consumer-focused, no code integration |
|
||||
| **Dia** | AI-native browser | Clean UI, built for AI interaction | No dev tools, no code editing |
|
||||
| **Comet** | AI browser | Multi-agent browsing | Early, unclear dev workflow |
|
||||
| **Chrome Auto Browse** | Extension | Google's own, deep Chrome integration | Extension-only, no code editing |
|
||||
| **Cursor** | VSCode fork + AI | Best-in-class code editing | No browser viewport |
|
||||
| **GStack Browser** | CC runtime + browser viewport | See bug in browser, fix in code, verify | Currently macOS-only, no consumer features |
|
||||
|
||||
GStack Browser doesn't compete with consumer browsers. It competes with the
|
||||
workflow of switching between browser and editor. The goal is to make that switch
|
||||
invisible.
|
||||
|
||||
## Design System
|
||||
|
||||
From DESIGN.md:
|
||||
- **Primary accent:** Amber-500 (#F59E0B) — agent active, focus states, pulse
|
||||
- **Background:** Zinc-950 (#09090B) through Zinc-800 (#27272A) — dark, dense
|
||||
- **Typography:** JetBrains Mono (code/status), DM Sans (UI/labels)
|
||||
- **Border radius:** 8px (md), 12px (lg), full (pills)
|
||||
- **Motion:** Pulse animation on agent active, 200ms transitions
|
||||
- **Layout:** Sidebar (right), status bar (bottom), palette (centered overlay)
|
||||
|
||||
## Implementation Status
|
||||
|
||||
| Component | Status | Notes |
|
||||
|-----------|--------|-------|
|
||||
| .app bundle | **SHIPPED** | 389MB, launches in ~5s |
|
||||
| DMG packaging | **SHIPPED** | 189MB compressed |
|
||||
| `GSTACK_CHROMIUM_PATH` | **SHIPPED** | Custom Chromium binary support |
|
||||
| `BROWSE_EXTENSIONS_DIR` | **SHIPPED** | Extension path override |
|
||||
| Auth via `/health` | **SHIPPED** | Replaces .auth.json file approach, auto-refreshes on server restart |
|
||||
| Build script | **SHIPPED** | `scripts/build-app.sh` |
|
||||
| Model routing | **SHIPPED** | Sonnet for actions, Opus for analysis (`pickSidebarModel`) |
|
||||
| Debug logging | **SHIPPED** | 40+ silent catches → prefixed console logging across 4 files |
|
||||
| No idle timeout (headed) | **SHIPPED** | Browser stays alive as long as window is open |
|
||||
| Cookie import button | **SHIPPED** | One-click in sidebar footer, opens `/cookie-picker` |
|
||||
| Sidebar arrow hint | **SHIPPED** | Points to sidebar, hides only when sidebar actually opens |
|
||||
| Architecture doc | **SHIPPED** | `docs/designs/SIDEBAR_MESSAGE_FLOW.md` |
|
||||
| Command palette | Planned | Phase 1b |
|
||||
| Quick screenshot | Planned | Phase 1b |
|
||||
| Status bar | Planned | Phase 1b |
|
||||
| Dev server detection | Planned | Phase 1b |
|
||||
| BoomLooper integration | Future | Phase 2 |
|
||||
| Cross-platform | Future | Phase 3 |
|
||||
| Chromium fork | Trigger-gated | Phase 4 |
|
||||
| Native shell | Deferred | Phase 5 |
|
||||
|
||||
## The 12-Month Vision
|
||||
|
||||
```
|
||||
TODAY (Phase 1) 6 MONTHS (Phase 2-3) 12 MONTHS (Phase 4-5)
|
||||
───────────── ────────────────── ────────────────────
|
||||
macOS .app wrapper BoomLooper multi-agent Chromium fork OR
|
||||
Extension sidebar Docker containers Native SwiftUI shell
|
||||
Local claude -p agent Team workspaces Cross-platform
|
||||
Single project Linux/x64 browse Auto-update
|
||||
Manual skill invocation Autonomous QA loops Skill marketplace
|
||||
Performance monitoring Plugin API
|
||||
Real-time collaboration Enterprise features
|
||||
```
|
||||
|
||||
The 12-month ideal: you open GStack Browser, it detects your project, starts
|
||||
your dev server, runs your test suite, and reports what's broken. You say "fix
|
||||
it" and the AI fixes every bug, verifies each fix visually, and creates a PR.
|
||||
You review the PR in the same browser, approve it, and the AI deploys it and
|
||||
monitors the canary. All in one window.
|
||||
|
||||
That's the browser as AI workspace. Not a browser with AI bolted on. An AI
|
||||
with a browser bolted on.
|
||||
|
||||
## Review History
|
||||
|
||||
This plan went through 4 reviews:
|
||||
|
||||
1. **CEO Review** (`/plan-ceo-review`, SELECTIVE EXPANSION) — 9 scope proposals,
|
||||
3 accepted (Cmd+K, Cmd+Shift+S, status bar), 5 deferred, 1 skipped
|
||||
2. **Design Review** (`/plan-design-review`) — scored 5/10 → 8/10, 9 design
|
||||
decisions added, 2 approved mockups generated
|
||||
3. **Eng Review** (`/plan-eng-review`) — 4 issues found, 0 critical gaps,
|
||||
test plan produced
|
||||
4. **Codex Review** (outside voice) — 9 findings, 3 critical gaps caught
|
||||
(server bundling, auth file location, project binding). All resolved.
|
||||
|
||||
The Codex review caught 3 real architecture gaps that survived 3 prior reviews.
|
||||
Cross-model review works.
|
||||
@@ -0,0 +1,190 @@
|
||||
# Sidebar Message Flow
|
||||
|
||||
How the GStack Browser sidebar actually works. Read this before touching
|
||||
sidepanel.js, background.js, content.js, server.ts sidebar endpoints,
|
||||
or sidebar-agent.ts.
|
||||
|
||||
## Components
|
||||
|
||||
```
|
||||
┌─────────────────┐ ┌──────────────┐ ┌─────────────┐ ┌────────────────┐
|
||||
│ sidepanel.js │────▶│ background.js│────▶│ server.ts │────▶│sidebar-agent.ts│
|
||||
│ (Chrome panel) │ │ (svc worker) │ │ (Bun HTTP) │ │ (Bun process) │
|
||||
└─────────────────┘ └──────────────┘ └─────────────┘ └────────────────┘
|
||||
▲ │ │
|
||||
│ polls /sidebar-chat │ polls queue file │
|
||||
└───────────────────────────────────────────┘ │
|
||||
◀──────────────────────┘
|
||||
POST /sidebar-agent/event
|
||||
```
|
||||
|
||||
## Startup Timeline
|
||||
|
||||
```
|
||||
T+0ms CLI runs `$B connect`
|
||||
├── Server starts on port 34567
|
||||
├── Writes state to .gstack/browse.json (pid, port, token)
|
||||
├── Launches headed Chromium with extension
|
||||
└── Clears sidebar-agent-queue.jsonl
|
||||
|
||||
T+500ms sidebar-agent.ts spawned by CLI
|
||||
├── Reads auth token from .gstack/browse.json
|
||||
├── Creates queue file if missing
|
||||
├── Sets lastLine = current line count
|
||||
└── Starts polling every 200ms
|
||||
|
||||
T+1-3s Extension loads in Chromium
|
||||
├── background.js: health poll every 1s (fast startup)
|
||||
│ └── GET /health → gets auth token
|
||||
├── content.js: injects on welcome page
|
||||
│ └── Does NOT fire gstack-extension-ready (waits for sidebar)
|
||||
└── Side panel: may auto-open via chrome.sidePanel.open()
|
||||
|
||||
T+2-10s Side panel connects
|
||||
├── tryConnect() → asks background for port/token
|
||||
├── Fallback: direct GET /health for token
|
||||
├── updateConnection(url, token)
|
||||
│ ├── Starts chat polling (1s interval)
|
||||
│ ├── Starts tab polling (2s interval)
|
||||
│ ├── Connects SSE activity stream
|
||||
│ └── Sends { type: 'sidebarOpened' } to background
|
||||
└── background relays to content script → hides welcome arrow
|
||||
|
||||
T+10s+ Ready for messages
|
||||
```
|
||||
|
||||
## Message Flow: User Types → Claude Responds
|
||||
|
||||
```
|
||||
1. User types "go to hn" in sidebar, hits Enter
|
||||
|
||||
2. sidepanel.js sendMessage()
|
||||
├── Renders user bubble immediately (optimistic)
|
||||
├── Renders thinking dots immediately
|
||||
├── Switches to fast poll (300ms)
|
||||
└── chrome.runtime.sendMessage({ type: 'sidebar-command', message, tabId })
|
||||
|
||||
3. background.js
|
||||
├── Gets active Chrome tab URL
|
||||
└── POST /sidebar-command { message, activeTabUrl }
|
||||
with Authorization: Bearer ${authToken}
|
||||
|
||||
4. server.ts /sidebar-command handler
|
||||
├── validateAuth(req)
|
||||
├── syncActiveTabByUrl(extensionUrl) — syncs Playwright tab to Chrome tab
|
||||
├── pickSidebarModel(message) — 'sonnet' for actions, 'opus' for analysis
|
||||
├── Adds user message to chat buffer
|
||||
├── Builds system prompt + args
|
||||
└── Appends JSON to ~/.gstack/sidebar-agent-queue.jsonl
|
||||
|
||||
5. sidebar-agent.ts poll() (within 200ms)
|
||||
├── Reads new line from queue file
|
||||
├── Parses JSON entry
|
||||
├── Checks processingTabs — skips if tab already has agent running
|
||||
└── askClaude(entry) — fire and forget
|
||||
|
||||
6. sidebar-agent.ts askClaude()
|
||||
├── spawn('claude', ['-p', prompt, '--model', model, ...])
|
||||
├── Streams stdout line-by-line (stream-json format)
|
||||
├── For each event: POST /sidebar-agent/event { type, tool, text, tabId }
|
||||
└── On close: POST /sidebar-agent/event { type: 'agent_done' }
|
||||
|
||||
7. server.ts processAgentEvent()
|
||||
├── Adds entry to chat buffer (in-memory + disk)
|
||||
├── On agent_done: sets tab status to 'idle'
|
||||
└── On agent_done: processes next queued message for that tab
|
||||
|
||||
8. sidepanel.js pollChat() (every 300ms during fast poll)
|
||||
├── GET /sidebar-chat?after=${chatLineCount}&tabId=${tabId}
|
||||
├── Renders new entries (text, tool_use, agent_done)
|
||||
└── On agent idle: removes thinking dots, stops fast poll
|
||||
```
|
||||
|
||||
## Arrow Hint Hide Flow (4-step signal chain)
|
||||
|
||||
The welcome page shows a right-pointing arrow until the sidebar opens.
|
||||
|
||||
```
|
||||
1. sidepanel.js updateConnection()
|
||||
└── chrome.runtime.sendMessage({ type: 'sidebarOpened' })
|
||||
|
||||
2. background.js
|
||||
└── chrome.tabs.sendMessage(activeTabId, { type: 'sidebarOpened' })
|
||||
|
||||
3. content.js onMessage handler
|
||||
└── document.dispatchEvent(new CustomEvent('gstack-extension-ready'))
|
||||
|
||||
4. welcome.html script
|
||||
└── addEventListener('gstack-extension-ready', () => arrow.classList.add('hidden'))
|
||||
```
|
||||
|
||||
The arrow does NOT hide when the extension loads. Only when the sidebar connects.
|
||||
|
||||
## Auth Token Flow
|
||||
|
||||
```
|
||||
Server starts → AUTH_TOKEN = crypto.randomUUID()
|
||||
│
|
||||
├── GET /health (no auth) → returns { token: AUTH_TOKEN }
|
||||
│
|
||||
├── background.js checkHealth() → authToken = data.token
|
||||
│ └── Refreshes on EVERY health poll (fixes stale token on restart)
|
||||
│
|
||||
├── sidepanel.js tryConnect() → serverToken from background or /health
|
||||
│ └── Used for chat polling: Authorization: Bearer ${serverToken}
|
||||
│
|
||||
└── sidebar-agent.ts refreshToken() → reads from .gstack/browse.json
|
||||
└── Used for event relay: Authorization: Bearer ${authToken}
|
||||
```
|
||||
|
||||
If the server restarts, all three components get fresh tokens within 10s
|
||||
(background health poll interval).
|
||||
|
||||
## Model Routing
|
||||
|
||||
`pickSidebarModel(message)` in server.ts classifies messages:
|
||||
|
||||
| Pattern | Model | Why |
|
||||
|---------|-------|-----|
|
||||
| "click @e24", "go to hn", "screenshot" | sonnet | Deterministic tool calls, no thinking needed |
|
||||
| "what does this page say?", "summarize" | opus | Needs comprehension |
|
||||
| "find bugs", "check for broken links" | opus | Analysis task |
|
||||
| "navigate to X and fill the form" | sonnet | Action-oriented, no analysis words |
|
||||
|
||||
Analysis words (`what`, `why`, `how`, `summarize`, `describe`, `analyze`, `read X and Y`)
|
||||
always override action verbs and force opus.
|
||||
|
||||
## Known Failure Modes
|
||||
|
||||
| Failure | Symptom | Root Cause | Fix |
|
||||
|---------|---------|------------|-----|
|
||||
| Stale auth token | "Unauthorized" in input | Server restarted, background had old token | background.js refreshes token on every health poll |
|
||||
| Tab ID mismatch | Message sent, no response visible | Server assigned tabId 1, sidebar polling tabId 0 | switchChatTab preserves optimistic UI during switch |
|
||||
| Sidebar agent not running | Messages queue forever | Agent process failed to spawn or crashed | Check `ps aux | grep sidebar-agent` |
|
||||
| Agent stale token | Agent runs but no events appear in sidebar | sidebar-agent has old token from .gstack/browse.json | Agent re-reads token before each event POST |
|
||||
| Queue file missing | spawnClaude fails | Race between server start and agent start | Both sides create file if missing |
|
||||
| Optimistic UI blown away | User bubble + dots vanish | switchChatTab replaced DOM with welcome screen | Preserved DOM when lastOptimisticMsg is set |
|
||||
|
||||
## Per-Tab Concurrency
|
||||
|
||||
Each browser tab can run its own agent simultaneously:
|
||||
|
||||
- Server: `tabAgents: Map<number, TabAgentState>` with per-tab queue (max 5)
|
||||
- sidebar-agent: `processingTabs: Set<number>` prevents duplicate spawns
|
||||
- Two messages on same tab: queued sequentially, processed in order
|
||||
- Two messages on different tabs: run concurrently
|
||||
|
||||
## File Locations
|
||||
|
||||
| Component | File | Runs in |
|
||||
|-----------|------|---------|
|
||||
| Sidebar UI | `extension/sidepanel.js` | Chrome side panel |
|
||||
| Service worker | `extension/background.js` | Chrome background |
|
||||
| Content script | `extension/content.js` | Page context |
|
||||
| Welcome page | `browse/src/welcome.html` | Page context |
|
||||
| HTTP server | `browse/src/server.ts` | Bun (compiled binary) |
|
||||
| Agent process | `browse/src/sidebar-agent.ts` | Bun (non-compiled, can spawn) |
|
||||
| CLI entry | `browse/src/cli.ts` | Bun (compiled binary) |
|
||||
| Queue file | `~/.gstack/sidebar-agent-queue.jsonl` | Filesystem |
|
||||
| State file | `.gstack/browse.json` | Filesystem |
|
||||
| Chat log | `~/.gstack/sessions/<id>/chat.jsonl` | Filesystem |
|
||||
+9
-9
@@ -36,7 +36,7 @@ Detailed guides for every gstack skill — philosophy, workflow, and examples.
|
||||
| [`/freeze`](#safety--guardrails) | **Edit Lock** | Restrict all file edits to a single directory. Blocks Edit and Write outside the boundary. Accident prevention for debugging. |
|
||||
| [`/guard`](#safety--guardrails) | **Full Safety** | Combines /careful + /freeze in one command. Maximum safety for prod work. |
|
||||
| [`/unfreeze`](#safety--guardrails) | **Unlock** | Remove the /freeze boundary, allowing edits everywhere again. |
|
||||
| [`/connect-chrome`](#connect-chrome) | **Chrome Controller** | Launch your real Chrome controlled by gstack with the Side Panel extension. Watch every action live. |
|
||||
| [`/open-gstack-browser`](#open-gstack-browser) | **GStack Browser** | Launch GStack Browser with sidebar, anti-bot stealth, auto model routing, cookie import, and Claude Code integration. Watch every action live. |
|
||||
| [`/setup-deploy`](#setup-deploy) | **Deploy Configurator** | One-time setup for `/land-and-deploy`. Detects your platform, production URL, and deploy commands. |
|
||||
| [`/gstack-upgrade`](#gstack-upgrade) | **Self-Updater** | Upgrade gstack to the latest version. Detects global vs vendored install, syncs both, shows what changed. |
|
||||
|
||||
@@ -955,21 +955,21 @@ Claude: 23 learnings for this project (14 high confidence, 6 medium, 3 low)
|
||||
|
||||
---
|
||||
|
||||
## `/connect-chrome`
|
||||
## `/open-gstack-browser`
|
||||
|
||||
This is my **co-presence mode**.
|
||||
|
||||
`/browse` runs headless by default. You don't see what the agent sees. `/connect-chrome` changes that. It launches your actual Chrome browser controlled by Playwright, with the gstack Side Panel extension auto-loaded. You watch every action in real time... same screen, same window.
|
||||
`/browse` runs headless by default. You don't see what the agent sees. `/open-gstack-browser` changes that. It launches GStack Browser (rebranded Chromium with anti-bot stealth) controlled by Playwright, with the sidebar extension auto-loaded. You watch every action in real time.
|
||||
|
||||
A subtle green shimmer at the top edge tells you which Chrome window gstack controls. All existing browse commands work unchanged. The Side Panel shows a live activity feed of every command and a chat sidebar where you can direct Claude with natural language instructions.
|
||||
The sidebar chat is a Claude instance that controls the browser. It auto-routes to the right model: Sonnet for navigation and actions (click, goto, fill, screenshot), Opus for reading and analysis (summarize, find bugs, describe). One-click cookie import from the sidebar footer. The browser stays alive as long as the window is open... no idle timeout in headed mode. The menu bar says "GStack Browser" instead of "Chrome for Testing."
|
||||
|
||||
```
|
||||
You: /connect-chrome
|
||||
You: /open-gstack-browser
|
||||
|
||||
Claude: Launched Chrome with Side Panel extension.
|
||||
Green shimmer indicates the controlled window.
|
||||
All $B commands now run in headed mode.
|
||||
Type in the Side Panel to direct the browser agent.
|
||||
Claude: Launched GStack Browser with sidebar extension.
|
||||
Anti-bot stealth active. All $B commands run in headed mode.
|
||||
Type in the sidebar to direct the browser agent.
|
||||
Sidebar model routing: sonnet for actions, opus for analysis.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
+135
-39
@@ -34,13 +34,20 @@ function getBaseUrl() {
|
||||
|
||||
async function loadAuthToken() {
|
||||
if (authToken) return;
|
||||
// Get token from browse server /health endpoint (localhost-only, safe).
|
||||
// Previously read from .auth.json in extension dir, but that breaks
|
||||
// read-only .app bundles and codesigning.
|
||||
const base = getBaseUrl();
|
||||
if (!base) return;
|
||||
try {
|
||||
const resp = await fetch(chrome.runtime.getURL('.auth.json'));
|
||||
const resp = await fetch(`${base}/health`, { signal: AbortSignal.timeout(3000) });
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
if (data.token) authToken = data.token;
|
||||
}
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack bg] Failed to load auth token:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Health Polling ────────────────────────────────────────────
|
||||
@@ -60,12 +67,16 @@ async function checkHealth() {
|
||||
if (!resp.ok) { setDisconnected(); return; }
|
||||
const data = await resp.json();
|
||||
if (data.status === 'healthy') {
|
||||
// Always refresh auth token from /health — the server generates a new
|
||||
// token on each restart, so the old one becomes stale.
|
||||
if (data.token) authToken = data.token;
|
||||
// Forward chatEnabled so sidepanel can show/hide chat tab
|
||||
setConnected({ ...data, chatEnabled: !!data.chatEnabled });
|
||||
} else {
|
||||
setDisconnected();
|
||||
}
|
||||
} catch {
|
||||
} catch (err) {
|
||||
console.error('[gstack bg] Health check failed:', err.message);
|
||||
setDisconnected();
|
||||
}
|
||||
}
|
||||
@@ -77,7 +88,9 @@ function setConnected(healthData) {
|
||||
chrome.action.setBadgeText({ text: ' ' });
|
||||
|
||||
// Broadcast health to popup and side panel (include token for sidepanel auth)
|
||||
chrome.runtime.sendMessage({ type: 'health', data: { ...healthData, token: authToken } }).catch(() => {});
|
||||
chrome.runtime.sendMessage({ type: 'health', data: { ...healthData, token: authToken } }).catch((err) => {
|
||||
console.debug('[gstack bg] No listener for health broadcast:', err.message);
|
||||
});
|
||||
|
||||
// Notify content scripts on connection change
|
||||
if (wasDisconnected) {
|
||||
@@ -88,10 +101,12 @@ function setConnected(healthData) {
|
||||
function setDisconnected() {
|
||||
const wasConnected = isConnected;
|
||||
isConnected = false;
|
||||
// Keep authToken — it comes from .auth.json, not /health
|
||||
// Keep authToken — it persists across reconnections
|
||||
chrome.action.setBadgeText({ text: '' });
|
||||
|
||||
chrome.runtime.sendMessage({ type: 'health', data: null }).catch(() => {});
|
||||
chrome.runtime.sendMessage({ type: 'health', data: null }).catch((err) => {
|
||||
console.debug('[gstack bg] No listener for disconnect broadcast:', err.message);
|
||||
});
|
||||
|
||||
// Notify content scripts on disconnection
|
||||
if (wasConnected) {
|
||||
@@ -104,10 +119,14 @@ async function notifyContentScripts(type) {
|
||||
const tabs = await chrome.tabs.query({});
|
||||
for (const tab of tabs) {
|
||||
if (tab.id) {
|
||||
chrome.tabs.sendMessage(tab.id, { type }).catch(() => {});
|
||||
chrome.tabs.sendMessage(tab.id, { type }).catch(() => {
|
||||
// Expected: tabs without content script
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack bg] Failed to query tabs for notification:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Command Proxy ─────────────────────────────────────────────
|
||||
@@ -145,17 +164,24 @@ async function fetchAndRelayRefs() {
|
||||
const headers = {};
|
||||
if (authToken) headers['Authorization'] = `Bearer ${authToken}`;
|
||||
const resp = await fetch(`${base}/refs`, { signal: AbortSignal.timeout(3000), headers });
|
||||
if (!resp.ok) return;
|
||||
if (!resp.ok) {
|
||||
console.warn(`[gstack bg] Refs endpoint returned ${resp.status}`);
|
||||
return;
|
||||
}
|
||||
const data = await resp.json();
|
||||
|
||||
// Send to all tabs' content scripts
|
||||
const tabs = await chrome.tabs.query({});
|
||||
for (const tab of tabs) {
|
||||
if (tab.id) {
|
||||
chrome.tabs.sendMessage(tab.id, { type: 'refs', data }).catch(() => {});
|
||||
chrome.tabs.sendMessage(tab.id, { type: 'refs', data }).catch(() => {
|
||||
// Expected: tabs without content script
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack bg] Failed to fetch/relay refs:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Inspector ──────────────────────────────────────────────────
|
||||
@@ -176,21 +202,26 @@ async function injectInspector(tabId) {
|
||||
target: { tabId, allFrames: true },
|
||||
files: ['inspector.css'],
|
||||
});
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.debug('[gstack bg] Inspector CSS injection failed (non-fatal):', err.message);
|
||||
}
|
||||
// Send startPicker to the injected inspector.js
|
||||
try {
|
||||
await chrome.tabs.sendMessage(tabId, { type: 'startPicker' });
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.warn('[gstack bg] Failed to send startPicker:', err.message);
|
||||
}
|
||||
inspectorMode = 'full';
|
||||
return { ok: true, mode: 'full' };
|
||||
} catch {
|
||||
} catch (err) {
|
||||
// Script injection failed (CSP, chrome:// page, etc.)
|
||||
// Fall back to content.js basic picker (loaded by manifest on most pages)
|
||||
try {
|
||||
await chrome.tabs.sendMessage(tabId, { type: 'startBasicPicker' });
|
||||
inspectorMode = 'basic';
|
||||
return { ok: true, mode: 'basic' };
|
||||
} catch {
|
||||
} catch (err2) {
|
||||
console.error('[gstack bg] Inspector injection failed completely:', err.message, '| Basic fallback:', err2.message);
|
||||
inspectorMode = 'full';
|
||||
return { error: 'Cannot inspect this page' };
|
||||
}
|
||||
@@ -200,7 +231,9 @@ async function injectInspector(tabId) {
|
||||
async function stopInspector(tabId) {
|
||||
try {
|
||||
await chrome.tabs.sendMessage(tabId, { type: 'stopPicker' });
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.debug('[gstack bg] Failed to stop picker on tab', tabId, ':', err.message);
|
||||
}
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
@@ -227,8 +260,8 @@ async function postInspectorPick(selector, frameInfo, basicData, activeTabUrl) {
|
||||
}
|
||||
const data = await resp.json();
|
||||
return { mode: 'cdp', ...data };
|
||||
} catch {
|
||||
// No server or timeout — fall back to basic mode
|
||||
} catch (err) {
|
||||
console.debug('[gstack bg] Inspector pick server unavailable, using basic mode:', err.message);
|
||||
return { mode: 'basic', selector, basicData, frameInfo };
|
||||
}
|
||||
}
|
||||
@@ -253,7 +286,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
|
||||
const ALLOWED_TYPES = new Set([
|
||||
'getPort', 'setPort', 'getServerUrl', 'fetchRefs',
|
||||
'openSidePanel', 'command', 'sidebar-command',
|
||||
'openSidePanel', 'sidebarOpened', 'command', 'sidebar-command',
|
||||
// Inspector message types
|
||||
'startInspector', 'stopInspector', 'elementPicked', 'pickerCancelled',
|
||||
'applyStyle', 'toggleClass', 'injectCSS', 'resetAll',
|
||||
@@ -265,7 +298,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
}
|
||||
|
||||
if (msg.type === 'getPort') {
|
||||
sendResponse({ port: serverPort, connected: isConnected });
|
||||
sendResponse({ port: serverPort, connected: isConnected, token: authToken });
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -292,11 +325,27 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
// Open side panel from content script pill click
|
||||
if (msg.type === 'openSidePanel') {
|
||||
if (chrome.sidePanel?.open && sender.tab) {
|
||||
chrome.sidePanel.open({ tabId: sender.tab.id }).catch(() => {});
|
||||
chrome.sidePanel.open({ tabId: sender.tab.id }).catch((err) => {
|
||||
console.warn('[gstack bg] Failed to open side panel:', err.message);
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Sidebar opened — tell active tab's content script so the welcome page
|
||||
// can hide its arrow hint. Only fires when the sidebar actually connects.
|
||||
if (msg.type === 'sidebarOpened') {
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
const tabId = tabs?.[0]?.id;
|
||||
if (tabId) {
|
||||
chrome.tabs.sendMessage(tabId, { type: 'sidebarOpened' }).catch(() => {
|
||||
// Expected: tab may not have content script
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Inspector: inject + start picker
|
||||
if (msg.type === 'startInspector') {
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
@@ -337,7 +386,9 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
basicData: msg.basicData,
|
||||
frameInfo,
|
||||
},
|
||||
}).catch(() => {});
|
||||
}).catch((err) => {
|
||||
console.warn('[gstack bg] Failed to forward inspectResult to sidepanel:', err.message);
|
||||
});
|
||||
sendResponse({ ok: true });
|
||||
});
|
||||
});
|
||||
@@ -346,7 +397,9 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
|
||||
// Inspector: picker cancelled
|
||||
if (msg.type === 'pickerCancelled') {
|
||||
chrome.runtime.sendMessage({ type: 'pickerCancelled' }).catch(() => {});
|
||||
chrome.runtime.sendMessage({ type: 'pickerCancelled' }).catch((err) => {
|
||||
console.debug('[gstack bg] No listener for pickerCancelled:', err.message);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -386,9 +439,18 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
},
|
||||
body: JSON.stringify({ message: msg.message, activeTabUrl }),
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(r => {
|
||||
if (!r.ok) {
|
||||
console.error(`[gstack bg] sidebar-command failed: ${r.status} ${r.statusText}`);
|
||||
return r.json().catch(() => ({ error: `Server returned ${r.status}` }));
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(data => sendResponse(data))
|
||||
.catch(err => sendResponse({ error: err.message }));
|
||||
.catch(err => {
|
||||
console.error('[gstack bg] sidebar-command error:', err.message);
|
||||
sendResponse({ error: err.message });
|
||||
});
|
||||
});
|
||||
return true;
|
||||
}
|
||||
@@ -398,22 +460,41 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
|
||||
// Click extension icon → open side panel directly (no popup)
|
||||
if (chrome.sidePanel && chrome.sidePanel.setPanelBehavior) {
|
||||
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(() => {});
|
||||
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch((err) => {
|
||||
console.warn('[gstack bg] Failed to set panel behavior:', err.message);
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-open side panel on install/update — zero friction
|
||||
chrome.runtime.onInstalled.addListener(async () => {
|
||||
// Small delay to let the browser window fully initialize
|
||||
setTimeout(async () => {
|
||||
// Auto-open side panel with retry. chrome.sidePanel.open() can fail silently
|
||||
// if the window/tab isn't fully ready yet. Retry up to 5 times with backoff.
|
||||
async function autoOpenSidePanel() {
|
||||
if (!chrome.sidePanel?.open) return;
|
||||
for (let attempt = 0; attempt < 5; attempt++) {
|
||||
try {
|
||||
const [win] = await chrome.windows.getAll({ windowTypes: ['normal'] });
|
||||
if (win && chrome.sidePanel?.open) {
|
||||
await chrome.sidePanel.open({ windowId: win.id });
|
||||
const wins = await chrome.windows.getAll({ windowTypes: ['normal'] });
|
||||
if (wins.length > 0) {
|
||||
await chrome.sidePanel.open({ windowId: wins[0].id });
|
||||
console.log(`[gstack] Side panel opened on attempt ${attempt + 1}`);
|
||||
return; // success
|
||||
}
|
||||
} catch {}
|
||||
}, 1000);
|
||||
} catch (e) {
|
||||
// May throw if window isn't ready or user gesture required
|
||||
console.log(`[gstack] Side panel open attempt ${attempt + 1} failed:`, e.message);
|
||||
}
|
||||
// Backoff: 500ms, 1000ms, 2000ms, 3000ms, 5000ms
|
||||
await new Promise(r => setTimeout(r, [500, 1000, 2000, 3000, 5000][attempt]));
|
||||
}
|
||||
console.log('[gstack] Side panel auto-open failed after 5 attempts');
|
||||
}
|
||||
|
||||
// Fire on install/update
|
||||
chrome.runtime.onInstalled.addListener(() => {
|
||||
autoOpenSidePanel();
|
||||
});
|
||||
|
||||
// Fire on every service worker startup (covers persistent context reuse)
|
||||
autoOpenSidePanel();
|
||||
|
||||
// ─── Tab Switch Detection ────────────────────────────────────────
|
||||
// Notify sidepanel instantly when the user switches tabs in the browser.
|
||||
// This is faster than polling — the sidebar swaps chat context immediately.
|
||||
@@ -426,16 +507,31 @@ chrome.tabs.onActivated.addListener((activeInfo) => {
|
||||
tabId: activeInfo.tabId,
|
||||
url: tab.url || '',
|
||||
title: tab.title || '',
|
||||
}).catch(() => {}); // sidepanel may not be open
|
||||
}).catch(() => {}); // expected: sidepanel may not be open
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Startup ────────────────────────────────────────────────────
|
||||
|
||||
// Load auth token BEFORE first health poll (token no longer in /health response)
|
||||
// Fast-retry health check on startup. The server may not be listening yet
|
||||
// (Chromium launches before Bun.serve starts). Retry every 1s for the
|
||||
// first 15 seconds, then switch to 10s polling.
|
||||
loadAuthToken().then(() => {
|
||||
loadPort().then(() => {
|
||||
checkHealth();
|
||||
healthInterval = setInterval(checkHealth, 10000);
|
||||
let startupAttempts = 0;
|
||||
const startupCheck = setInterval(async () => {
|
||||
startupAttempts++;
|
||||
await checkHealth();
|
||||
if (isConnected || startupAttempts >= 15) {
|
||||
clearInterval(startupCheck);
|
||||
// Switch to slow polling now that we're connected (or gave up)
|
||||
if (!healthInterval) {
|
||||
healthInterval = setInterval(checkHealth, 10000);
|
||||
}
|
||||
if (!isConnected) {
|
||||
console.log('[gstack] Startup health checks failed after 15 attempts, falling back to 10s polling');
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -326,8 +326,18 @@ function startBasicPicker() {
|
||||
document.addEventListener('keydown', onBasicKeydown, true);
|
||||
}
|
||||
|
||||
// Do NOT dispatch gstack-extension-ready here — the extension being loaded
|
||||
// does not mean the sidebar is open. The welcome page arrow hint should only
|
||||
// hide when the sidebar is actually open. We dispatch it when we receive
|
||||
// a 'sidebarOpened' message from background.js.
|
||||
|
||||
// Listen for messages from background worker
|
||||
chrome.runtime.onMessage.addListener((msg) => {
|
||||
// Sidebar actually opened — now hide the welcome page arrow hint
|
||||
if (msg.type === 'sidebarOpened') {
|
||||
document.dispatchEvent(new CustomEvent('gstack-extension-ready'));
|
||||
return;
|
||||
}
|
||||
if (msg.type === 'startBasicPicker') {
|
||||
startBasicPicker();
|
||||
return;
|
||||
|
||||
+43
-12
@@ -161,13 +161,14 @@ body::after {
|
||||
.chat-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
color: var(--text-meta);
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
padding: 24px;
|
||||
}
|
||||
.chat-loading-spinner {
|
||||
width: 24px;
|
||||
@@ -183,10 +184,10 @@ body::after {
|
||||
.chat-welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
color: var(--text-label);
|
||||
gap: 8px;
|
||||
padding: 24px;
|
||||
@@ -222,7 +223,7 @@ body::after {
|
||||
border-bottom-right-radius: var(--radius-sm);
|
||||
}
|
||||
.chat-notification {
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
color: var(--text-meta);
|
||||
padding: 4px 12px;
|
||||
@@ -289,6 +290,32 @@ body::after {
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
}
|
||||
/* Collapsed reasoning disclosure */
|
||||
.agent-reasoning {
|
||||
margin: 4px 0;
|
||||
}
|
||||
.agent-reasoning summary {
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-meta);
|
||||
padding: 3px 0;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
}
|
||||
.agent-reasoning summary::before {
|
||||
content: '▶ ';
|
||||
font-size: 9px;
|
||||
}
|
||||
.agent-reasoning[open] summary::before {
|
||||
content: '▼ ';
|
||||
}
|
||||
.agent-reasoning summary:hover {
|
||||
color: var(--text-label);
|
||||
}
|
||||
.agent-reasoning .agent-tool {
|
||||
margin-left: 4px;
|
||||
}
|
||||
/* Legacy classes kept for compat */
|
||||
.tool-name {
|
||||
color: var(--amber-500);
|
||||
@@ -545,10 +572,10 @@ body::after {
|
||||
.session-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
color: var(--text-label);
|
||||
padding: 24px;
|
||||
gap: 8px;
|
||||
@@ -559,10 +586,10 @@ body::after {
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
color: var(--text-label);
|
||||
gap: 4px;
|
||||
}
|
||||
@@ -688,6 +715,10 @@ body::after {
|
||||
border-color: var(--error);
|
||||
animation: shake 300ms ease;
|
||||
}
|
||||
.command-input.error::placeholder {
|
||||
color: var(--error);
|
||||
opacity: 0.8;
|
||||
}
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
@@ -787,7 +818,7 @@ footer {
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
margin: 6px 12px;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -964,10 +995,10 @@ footer {
|
||||
.inspector-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<span class="conn-banner-text" id="conn-banner-text">Reconnecting...</span>
|
||||
<div class="conn-banner-actions" id="conn-banner-actions" style="display:none">
|
||||
<button class="conn-btn" id="conn-reconnect">Reconnect</button>
|
||||
<button class="conn-btn conn-copy" id="conn-copy" title="Copy command">/connect-chrome</button>
|
||||
<button class="conn-btn conn-copy" id="conn-copy" title="Copy command">/open-gstack-browser</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,8 @@
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="chat-loading" id="chat-loading">
|
||||
<div class="chat-loading-spinner"></div>
|
||||
<p>Connecting...</p>
|
||||
<p id="loading-status">Looking for browse server...</p>
|
||||
<pre id="loading-debug" class="muted" style="font-size:11px; font-family:'JetBrains Mono',monospace; white-space:pre-wrap; margin-top:8px; color:#71717A;"></pre>
|
||||
</div>
|
||||
<div class="chat-welcome" id="chat-welcome" style="display:none">
|
||||
<div class="chat-welcome-icon">G</div>
|
||||
@@ -140,6 +141,7 @@
|
||||
<div class="quick-actions" id="quick-actions">
|
||||
<button id="chat-cleanup-btn" class="quick-action-btn" title="Remove ads, banners, popups">🧹 Cleanup</button>
|
||||
<button id="chat-screenshot-btn" class="quick-action-btn" title="Take a screenshot">📸 Screenshot</button>
|
||||
<button id="chat-cookies-btn" class="quick-action-btn" title="Import cookies from your browser">🍪 Cookies</button>
|
||||
</div>
|
||||
|
||||
<!-- Command Bar -->
|
||||
@@ -154,6 +156,7 @@
|
||||
<div class="footer-left">
|
||||
<button class="debug-toggle" id="debug-toggle" title="Toggle debug panels">debug</button>
|
||||
<button class="footer-btn" id="clear-chat" title="Clear chat">clear</button>
|
||||
<button class="footer-btn" id="reload-sidebar" title="Reload sidebar">reload</button>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<span class="dot" id="footer-dot"></span>
|
||||
|
||||
+213
-49
@@ -196,8 +196,27 @@ function handleAgentEvent(entry) {
|
||||
if (thinking) thinking.remove();
|
||||
updateStopButton(false);
|
||||
stopFastPoll();
|
||||
// Add timestamp
|
||||
// Collapse tool calls into a "See reasoning" disclosure
|
||||
if (agentContainer) {
|
||||
const tools = agentContainer.querySelectorAll('.agent-tool');
|
||||
if (tools.length > 0) {
|
||||
const details = document.createElement('details');
|
||||
details.className = 'agent-reasoning';
|
||||
const summary = document.createElement('summary');
|
||||
summary.textContent = `See reasoning (${tools.length} step${tools.length > 1 ? 's' : ''})`;
|
||||
details.appendChild(summary);
|
||||
for (const tool of tools) {
|
||||
details.appendChild(tool);
|
||||
}
|
||||
// Insert the disclosure before the text response (if any)
|
||||
const textEl = agentContainer.querySelector('.agent-text');
|
||||
if (textEl) {
|
||||
agentContainer.insertBefore(details, textEl);
|
||||
} else {
|
||||
agentContainer.appendChild(details);
|
||||
}
|
||||
}
|
||||
// Add timestamp
|
||||
const ts = document.createElement('span');
|
||||
ts.className = 'chat-time';
|
||||
ts.textContent = formatChatTime(entry.ts);
|
||||
@@ -209,6 +228,10 @@ function handleAgentEvent(entry) {
|
||||
}
|
||||
|
||||
if (entry.type === 'agent_error') {
|
||||
// Suppress timeout errors that fire after agent_done (cleanup noise)
|
||||
if (entry.error && entry.error.includes('Timed out') && !agentContainer) {
|
||||
return;
|
||||
}
|
||||
const thinking = document.getElementById('agent-thinking');
|
||||
if (thinking) thinking.remove();
|
||||
updateStopButton(false);
|
||||
@@ -237,11 +260,15 @@ function handleAgentEvent(entry) {
|
||||
if (thinking) thinking.remove();
|
||||
|
||||
if (entry.type === 'tool_use') {
|
||||
const toolEl = document.createElement('div');
|
||||
toolEl.className = 'agent-tool';
|
||||
const toolName = entry.tool || 'Tool';
|
||||
const toolInput = entry.input || '';
|
||||
|
||||
// Skip tool uses with no description (e.g. internal tool-result file reads)
|
||||
if (!toolInput) return;
|
||||
|
||||
const toolEl = document.createElement('div');
|
||||
toolEl.className = 'agent-tool';
|
||||
|
||||
// Use the verbose description as the primary text
|
||||
// The tool name becomes a subtle badge
|
||||
const toolIcon = toolName === 'Bash' ? '▸' : toolName === 'Read' ? '📄' : toolName === 'Grep' ? '🔍' : toolName === 'Glob' ? '📁' : '⚡';
|
||||
@@ -371,13 +398,19 @@ async function pollChat() {
|
||||
headers: authHeaders(),
|
||||
signal: AbortSignal.timeout(3000),
|
||||
});
|
||||
if (!resp.ok) return;
|
||||
if (!resp.ok) {
|
||||
console.warn(`[gstack sidebar] Chat poll failed: ${resp.status} ${resp.statusText}`);
|
||||
return;
|
||||
}
|
||||
const data = await resp.json();
|
||||
|
||||
// Detect tab switch from server — swap chat context
|
||||
// Detect tab switch from server — swap chat context.
|
||||
// IMPORTANT: return before cleaning up thinking dots — the agent may be
|
||||
// processing on the NEW tab while the OLD tab is idle. Removing the
|
||||
// thinking indicator here would kill the optimistic UI before the switch.
|
||||
if (data.activeTabId !== undefined && data.activeTabId !== sidebarActiveTabId) {
|
||||
switchChatTab(data.activeTabId);
|
||||
return; // switchChatTab triggers a fresh poll
|
||||
return; // switchChatTab triggers a fresh poll on the correct tab
|
||||
}
|
||||
|
||||
// First successful poll — hide loading spinner
|
||||
@@ -402,24 +435,21 @@ async function pollChat() {
|
||||
}
|
||||
|
||||
// Clean up orphaned thinking indicators after replay.
|
||||
// Only remove if we're on the CORRECT tab and the agent is truly idle.
|
||||
// Don't clean up during tab switches — the agent may be processing on
|
||||
// the new tab while the old tab shows idle.
|
||||
const thinking = document.getElementById('agent-thinking');
|
||||
if (thinking && data.agentStatus !== 'processing') {
|
||||
thinking.remove();
|
||||
if (agentContainer) {
|
||||
const notice = document.createElement('div');
|
||||
notice.className = 'agent-text';
|
||||
notice.style.color = 'var(--text-meta)';
|
||||
notice.style.fontStyle = 'italic';
|
||||
notice.textContent = '(session ended)';
|
||||
agentContainer.appendChild(notice);
|
||||
agentContainer = null;
|
||||
agentTextEl = null;
|
||||
}
|
||||
agentContainer = null;
|
||||
agentTextEl = null;
|
||||
}
|
||||
|
||||
// Show/hide stop button based on agent status
|
||||
updateStopButton(data.agentStatus === 'processing');
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Chat poll error:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
/** Switch the sidebar to show a different tab's chat context */
|
||||
@@ -434,10 +464,21 @@ function switchChatTab(newTabId) {
|
||||
|
||||
sidebarActiveTabId = newTabId;
|
||||
|
||||
// Restore saved chat for new tab, or show welcome
|
||||
// Restore saved chat for new tab, or carry over current DOM if we're
|
||||
// mid-message (the server may have switched tabs because the user's
|
||||
// Chrome tab changed, but we still want to show the optimistic UI).
|
||||
if (chatDomByTab[newTabId]) {
|
||||
chatMessages.innerHTML = chatDomByTab[newTabId];
|
||||
chatLineCount = chatLineCountByTab[newTabId] || 0;
|
||||
// Reset agent state for restored tab
|
||||
agentContainer = null;
|
||||
agentTextEl = null;
|
||||
agentText = '';
|
||||
} else if (lastOptimisticMsg && document.getElementById('agent-thinking')) {
|
||||
// We're mid-send with optimistic UI — keep it, don't blow it away.
|
||||
// The poll for the new tab will pick up the entries and sync naturally.
|
||||
chatLineCount = 0;
|
||||
// agentContainer/agentTextEl are already set from sendMessage()
|
||||
} else {
|
||||
chatMessages.innerHTML = `
|
||||
<div class="chat-welcome" id="chat-welcome">
|
||||
@@ -446,13 +487,12 @@ function switchChatTab(newTabId) {
|
||||
<p class="muted">Each tab has its own conversation.</p>
|
||||
</div>`;
|
||||
chatLineCount = 0;
|
||||
// Reset agent state for fresh tab
|
||||
agentContainer = null;
|
||||
agentTextEl = null;
|
||||
agentText = '';
|
||||
}
|
||||
|
||||
// Reset agent state for this tab
|
||||
agentContainer = null;
|
||||
agentTextEl = null;
|
||||
agentText = '';
|
||||
|
||||
// Immediately poll the new tab's chat
|
||||
pollChat();
|
||||
}
|
||||
@@ -466,8 +506,11 @@ function updateStopButton(agentRunning) {
|
||||
async function stopAgent() {
|
||||
if (!serverUrl) return;
|
||||
try {
|
||||
await fetch(`${serverUrl}/sidebar-agent/stop`, { method: 'POST', headers: authHeaders() });
|
||||
} catch {}
|
||||
const resp = await fetch(`${serverUrl}/sidebar-agent/stop`, { method: 'POST', headers: authHeaders() });
|
||||
if (!resp.ok) console.warn(`[gstack sidebar] Stop agent failed: ${resp.status}`);
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Stop agent error:', err.message);
|
||||
}
|
||||
// Immediately clean up UI
|
||||
const thinking = document.getElementById('agent-thinking');
|
||||
if (thinking) thinking.remove();
|
||||
@@ -513,13 +556,18 @@ async function pollTabs() {
|
||||
try {
|
||||
const chromeTabs = await chrome.tabs.query({ active: true, currentWindow: true });
|
||||
activeTabUrl = chromeTabs?.[0]?.url || null;
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.debug('[gstack sidebar] Failed to get active tab URL:', err.message);
|
||||
}
|
||||
|
||||
const resp = await fetch(`${serverUrl}/sidebar-tabs${activeTabUrl ? '?activeUrl=' + encodeURIComponent(activeTabUrl) : ''}`, {
|
||||
headers: authHeaders(),
|
||||
signal: AbortSignal.timeout(2000),
|
||||
});
|
||||
if (!resp.ok) return;
|
||||
if (!resp.ok) {
|
||||
console.warn(`[gstack sidebar] Tab poll failed: ${resp.status} ${resp.statusText}`);
|
||||
return;
|
||||
}
|
||||
const data = await resp.json();
|
||||
if (!data.tabs) return;
|
||||
|
||||
@@ -529,7 +577,9 @@ async function pollTabs() {
|
||||
lastTabJson = json;
|
||||
|
||||
renderTabBar(data.tabs);
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Tab poll error:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function renderTabBar(tabs) {
|
||||
@@ -575,7 +625,9 @@ async function switchBrowserTab(tabId) {
|
||||
// Switch chat context + re-poll tabs
|
||||
switchChatTab(tabId);
|
||||
pollTabs();
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Failed to switch browser tab:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Clear Chat ─────────────────────────────────────────────────
|
||||
@@ -583,8 +635,11 @@ async function switchBrowserTab(tabId) {
|
||||
document.getElementById('clear-chat').addEventListener('click', async () => {
|
||||
if (!serverUrl) return;
|
||||
try {
|
||||
await fetch(`${serverUrl}/sidebar-chat/clear`, { method: 'POST', headers: authHeaders() });
|
||||
} catch {}
|
||||
const resp = await fetch(`${serverUrl}/sidebar-chat/clear`, { method: 'POST', headers: authHeaders() });
|
||||
if (!resp.ok) console.warn(`[gstack sidebar] Clear chat failed: ${resp.status}`);
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Clear chat error:', err.message);
|
||||
}
|
||||
// Reset local state
|
||||
chatLineCount = 0;
|
||||
renderedEntryIds.clear();
|
||||
@@ -599,6 +654,26 @@ document.getElementById('clear-chat').addEventListener('click', async () => {
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// ─── Reload Sidebar ─────────────────────────────────────────────
|
||||
document.getElementById('reload-sidebar').addEventListener('click', () => {
|
||||
location.reload();
|
||||
});
|
||||
|
||||
// ─── Copy Cookies ───────────────────────────────────────────────
|
||||
document.getElementById('chat-cookies-btn').addEventListener('click', async () => {
|
||||
if (!serverUrl) return;
|
||||
// Navigate the browser to the cookie picker page hosted by the browse server
|
||||
try {
|
||||
await fetch(`${serverUrl}/command`, {
|
||||
method: 'POST',
|
||||
headers: authHeaders(),
|
||||
body: JSON.stringify({ command: 'goto', args: [`${serverUrl}/cookie-picker`] }),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Failed to open cookie picker:', err.message);
|
||||
}
|
||||
});
|
||||
|
||||
// ─── Debug Tabs ─────────────────────────────────────────────────
|
||||
|
||||
const debugToggle = document.getElementById('debug-toggle');
|
||||
@@ -731,7 +806,9 @@ function connectSSE() {
|
||||
eventSource = new EventSource(url);
|
||||
|
||||
eventSource.addEventListener('activity', (e) => {
|
||||
try { addEntry(JSON.parse(e.data)); } catch {}
|
||||
try { addEntry(JSON.parse(e.data)); } catch (err) {
|
||||
console.error('[gstack sidebar] Failed to parse activity event:', err.message);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener('gap', (e) => {
|
||||
@@ -742,7 +819,9 @@ function connectSSE() {
|
||||
banner.className = 'gap-banner';
|
||||
banner.textContent = `Missed ${data.availableFrom - data.gapFrom} events`;
|
||||
feed.appendChild(banner);
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Failed to parse gap event:', err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -777,7 +856,9 @@ async function fetchRefs() {
|
||||
</div>
|
||||
`).join('');
|
||||
footer.textContent = `${data.refs.length} refs`;
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Failed to fetch refs:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Inspector Tab ──────────────────────────────────────────────
|
||||
@@ -1289,15 +1370,17 @@ function connectInspectorSSE() {
|
||||
try {
|
||||
const data = JSON.parse(e.data);
|
||||
inspectorShowData(data);
|
||||
} catch {}
|
||||
} catch (err) {
|
||||
console.error('[gstack sidebar] Failed to parse inspectResult:', err.message);
|
||||
}
|
||||
});
|
||||
|
||||
inspectorSSE.addEventListener('error', () => {
|
||||
// SSE connection failed — inspector works without it (basic mode)
|
||||
if (inspectorSSE) { inspectorSSE.close(); inspectorSSE = null; }
|
||||
});
|
||||
} catch {
|
||||
// SSE not available — that's fine
|
||||
} catch (err) {
|
||||
console.debug('[gstack sidebar] Inspector SSE not available:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1321,6 +1404,9 @@ function updateConnection(url, token) {
|
||||
document.getElementById('footer-port').textContent = `:${port}`;
|
||||
setConnState('connected');
|
||||
setActionButtonsEnabled(true);
|
||||
// Tell the active tab's content script the sidebar is open — this hides
|
||||
// the welcome page arrow hint. Only fires on actual sidebar connection.
|
||||
chrome.runtime.sendMessage({ type: 'sidebarOpened' }).catch(() => {});
|
||||
connectSSE();
|
||||
connectInspectorSSE();
|
||||
if (chatPollInterval) clearInterval(chatPollInterval);
|
||||
@@ -1379,24 +1465,102 @@ document.getElementById('conn-reconnect').addEventListener('click', () => {
|
||||
});
|
||||
|
||||
document.getElementById('conn-copy').addEventListener('click', () => {
|
||||
navigator.clipboard.writeText('/connect-chrome').then(() => {
|
||||
navigator.clipboard.writeText('/open-gstack-browser').then(() => {
|
||||
const btn = document.getElementById('conn-copy');
|
||||
btn.textContent = 'copied!';
|
||||
setTimeout(() => { btn.textContent = '/connect-chrome'; }, 2000);
|
||||
setTimeout(() => { btn.textContent = '/open-gstack-browser'; }, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
// Try to connect immediately, retry every 2s until connected
|
||||
function tryConnect() {
|
||||
chrome.runtime.sendMessage({ type: 'getPort' }, (resp) => {
|
||||
if (resp && resp.port && resp.connected) {
|
||||
const url = `http://127.0.0.1:${resp.port}`;
|
||||
// Token arrives via health broadcast from background.js
|
||||
updateConnection(url, null);
|
||||
} else {
|
||||
setTimeout(tryConnect, 2000);
|
||||
}
|
||||
// Try to connect immediately, retry every 2s until connected.
|
||||
// Show exactly what's happening at each step so the user is never
|
||||
// staring at a blank "Connecting..." with no info.
|
||||
let connectAttempts = 0;
|
||||
function setLoadingStatus(msg, debug) {
|
||||
const status = document.getElementById('loading-status');
|
||||
const dbg = document.getElementById('loading-debug');
|
||||
if (status) status.textContent = msg;
|
||||
if (dbg && debug !== undefined) dbg.textContent = debug;
|
||||
}
|
||||
|
||||
async function tryConnect() {
|
||||
connectAttempts++;
|
||||
setLoadingStatus(
|
||||
`Looking for browse server... (attempt ${connectAttempts})`,
|
||||
`Asking background.js for server port...`
|
||||
);
|
||||
|
||||
// Step 1: Ask background for the port
|
||||
const resp = await new Promise(resolve => {
|
||||
chrome.runtime.sendMessage({ type: 'getPort' }, (r) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
resolve({ error: chrome.runtime.lastError.message });
|
||||
} else {
|
||||
resolve(r || {});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (resp.error) {
|
||||
setLoadingStatus(
|
||||
`Extension error (attempt ${connectAttempts})`,
|
||||
`chrome.runtime.sendMessage failed:\n${resp.error}`
|
||||
);
|
||||
setTimeout(tryConnect, 2000);
|
||||
return;
|
||||
}
|
||||
|
||||
const port = resp.port || 34567;
|
||||
|
||||
// Step 2: If background says connected + has token, use that
|
||||
if (resp.port && resp.connected && resp.token) {
|
||||
setLoadingStatus(
|
||||
`Server found on port ${port}, connecting...`,
|
||||
`token: yes\nStarting SSE + chat polling...`
|
||||
);
|
||||
updateConnection(`http://127.0.0.1:${port}`, resp.token);
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 3: Background not connected yet. Try hitting /health directly.
|
||||
// This bypasses the background.js health poll timing gap.
|
||||
setLoadingStatus(
|
||||
`Checking server directly... (attempt ${connectAttempts})`,
|
||||
`port: ${port}\nbackground connected: ${resp.connected || false}\nTrying GET http://127.0.0.1:${port}/health ...`
|
||||
);
|
||||
|
||||
try {
|
||||
const healthResp = await fetch(`http://127.0.0.1:${port}/health`, {
|
||||
signal: AbortSignal.timeout(2000)
|
||||
});
|
||||
if (healthResp.ok) {
|
||||
const data = await healthResp.json();
|
||||
if (data.status === 'healthy' && data.token) {
|
||||
setLoadingStatus(
|
||||
`Server healthy on port ${port}, connecting...`,
|
||||
`token: yes (from /health)\nStarting SSE + chat polling...`
|
||||
);
|
||||
updateConnection(`http://127.0.0.1:${port}`, data.token);
|
||||
return;
|
||||
}
|
||||
setLoadingStatus(
|
||||
`Server responded but not healthy (attempt ${connectAttempts})`,
|
||||
`status: ${data.status}\ntoken: ${data.token ? 'yes' : 'no'}`
|
||||
);
|
||||
} else {
|
||||
setLoadingStatus(
|
||||
`Server returned ${healthResp.status} (attempt ${connectAttempts})`,
|
||||
`GET /health → ${healthResp.status} ${healthResp.statusText}`
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
setLoadingStatus(
|
||||
`Server not reachable on port ${port} (attempt ${connectAttempts})`,
|
||||
`GET /health failed: ${e.message}\n\nThe browse server may still be starting.\nRun /open-gstack-browser in Claude Code.`
|
||||
);
|
||||
}
|
||||
|
||||
setTimeout(tryConnect, 2000);
|
||||
}
|
||||
tryConnect();
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
name: connect-chrome
|
||||
version: 0.1.0
|
||||
name: open-gstack-browser
|
||||
version: 0.2.0
|
||||
description: |
|
||||
Launch real Chrome controlled by gstack with the Side Panel extension auto-loaded.
|
||||
One command: connects Claude to a visible Chrome window where you can watch every
|
||||
action in real time. The extension shows a live activity feed in the Side Panel.
|
||||
Use when asked to "connect chrome", "open chrome", "real browser", "launch chrome",
|
||||
"side panel", or "control my browser".
|
||||
Launch GStack Browser — AI-controlled Chromium with the sidebar extension baked in.
|
||||
Opens a visible browser window where you can watch every action in real time.
|
||||
The sidebar shows a live activity feed and chat. Anti-bot stealth built in.
|
||||
Use when asked to "open gstack browser", "launch browser", "connect chrome",
|
||||
"open chrome", "real browser", "launch chrome", "side panel", or "control my browser".
|
||||
Voice triggers (speech-to-text aliases): "show me the browser".
|
||||
allowed-tools:
|
||||
- Bash
|
||||
@@ -47,7 +47,7 @@ echo "TELEMETRY: ${_TEL:-off}"
|
||||
echo "TEL_PROMPTED: $_TEL_PROMPTED"
|
||||
mkdir -p ~/.gstack/analytics
|
||||
if [ "$_TEL" != "off" ]; then
|
||||
echo '{"skill":"connect-chrome","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","repo":"'$(basename "$(git rev-parse --show-toplevel 2>/dev/null)" 2>/dev/null || echo "unknown")'"}' >> ~/.gstack/analytics/skill-usage.jsonl 2>/dev/null || true
|
||||
echo '{"skill":"open-gstack-browser","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","repo":"'$(basename "$(git rev-parse --show-toplevel 2>/dev/null)" 2>/dev/null || echo "unknown")'"}' >> ~/.gstack/analytics/skill-usage.jsonl 2>/dev/null || true
|
||||
fi
|
||||
# zsh-compatible: use find instead of glob to avoid NOMATCH error
|
||||
for _PF in $(find ~/.gstack/analytics -maxdepth 1 -name '.pending-*' 2>/dev/null); do
|
||||
@@ -72,7 +72,7 @@ else
|
||||
echo "LEARNINGS: 0"
|
||||
fi
|
||||
# Session timeline: record skill start (local-only, never sent anywhere)
|
||||
~/.claude/skills/gstack/bin/gstack-timeline-log '{"skill":"connect-chrome","event":"started","branch":"'"$_BRANCH"'","session":"'"$_SESSION_ID"'"}' 2>/dev/null &
|
||||
~/.claude/skills/gstack/bin/gstack-timeline-log '{"skill":"open-gstack-browser","event":"started","branch":"'"$_BRANCH"'","session":"'"$_SESSION_ID"'"}' 2>/dev/null &
|
||||
# Check if CLAUDE.md has routing rules
|
||||
_HAS_ROUTING="no"
|
||||
if [ -f CLAUDE.md ] && grep -q "## Skill routing" CLAUDE.md 2>/dev/null; then
|
||||
@@ -475,10 +475,10 @@ Then write a `## GSTACK REVIEW REPORT` section to the end of the plan file:
|
||||
file you are allowed to edit in plan mode. The plan file review report is part of the
|
||||
plan's living status.
|
||||
|
||||
# /connect-chrome — Launch Real Chrome with Side Panel
|
||||
# /open-gstack-browser — Launch GStack Browser
|
||||
|
||||
Connect Claude to a visible Chrome window with the gstack extension auto-loaded.
|
||||
You see every click, every navigation, every action in real time.
|
||||
Launch GStack Browser — AI-controlled Chromium with the sidebar extension,
|
||||
anti-bot stealth, and custom branding. You see every action in real time.
|
||||
|
||||
## SETUP (run this check BEFORE any browse command)
|
||||
|
||||
@@ -545,10 +545,11 @@ echo "Pre-flight cleanup done"
|
||||
$B connect
|
||||
```
|
||||
|
||||
This launches Playwright's bundled Chromium in headed mode with:
|
||||
This launches GStack Browser (rebranded Chromium) in headed mode with:
|
||||
- A visible window you can watch (not your regular Chrome — it stays untouched)
|
||||
- The gstack Chrome extension auto-loaded via `launchPersistentContext`
|
||||
- A golden shimmer line at the top of every page so you know which window is controlled
|
||||
- The gstack sidebar extension auto-loaded via `launchPersistentContext`
|
||||
- Anti-bot stealth patches (sites like Google and NYTimes work without captchas)
|
||||
- Custom user agent and GStack Browser branding in Dock/menu bar
|
||||
- A sidebar agent process for chat commands
|
||||
|
||||
The `connect` command auto-discovers the extension from the gstack install
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
name: connect-chrome
|
||||
version: 0.1.0
|
||||
name: open-gstack-browser
|
||||
version: 0.2.0
|
||||
description: |
|
||||
Launch real Chrome controlled by gstack with the Side Panel extension auto-loaded.
|
||||
One command: connects Claude to a visible Chrome window where you can watch every
|
||||
action in real time. The extension shows a live activity feed in the Side Panel.
|
||||
Use when asked to "connect chrome", "open chrome", "real browser", "launch chrome",
|
||||
"side panel", or "control my browser".
|
||||
Launch GStack Browser — AI-controlled Chromium with the sidebar extension baked in.
|
||||
Opens a visible browser window where you can watch every action in real time.
|
||||
The sidebar shows a live activity feed and chat. Anti-bot stealth built in.
|
||||
Use when asked to "open gstack browser", "launch browser", "connect chrome",
|
||||
"open chrome", "real browser", "launch chrome", "side panel", or "control my browser".
|
||||
voice-triggers:
|
||||
- "show me the browser"
|
||||
allowed-tools:
|
||||
@@ -18,10 +18,10 @@ allowed-tools:
|
||||
|
||||
{{PREAMBLE}}
|
||||
|
||||
# /connect-chrome — Launch Real Chrome with Side Panel
|
||||
# /open-gstack-browser — Launch GStack Browser
|
||||
|
||||
Connect Claude to a visible Chrome window with the gstack extension auto-loaded.
|
||||
You see every click, every navigation, every action in real time.
|
||||
Launch GStack Browser — AI-controlled Chromium with the sidebar extension,
|
||||
anti-bot stealth, and custom branding. You see every action in real time.
|
||||
|
||||
{{BROWSE_SETUP}}
|
||||
|
||||
@@ -54,10 +54,11 @@ echo "Pre-flight cleanup done"
|
||||
$B connect
|
||||
```
|
||||
|
||||
This launches Playwright's bundled Chromium in headed mode with:
|
||||
This launches GStack Browser (rebranded Chromium) in headed mode with:
|
||||
- A visible window you can watch (not your regular Chrome — it stays untouched)
|
||||
- The gstack Chrome extension auto-loaded via `launchPersistentContext`
|
||||
- A golden shimmer line at the top of every page so you know which window is controlled
|
||||
- The gstack sidebar extension auto-loaded via `launchPersistentContext`
|
||||
- Anti-bot stealth patches (sites like Google and NYTimes work without captchas)
|
||||
- Custom user agent and GStack Browser branding in Dock/menu bar
|
||||
- A sidebar agent process for chat commands
|
||||
|
||||
The `connect` command auto-discovers the extension from the gstack install
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "gstack",
|
||||
"version": "0.15.3.0",
|
||||
"version": "0.15.4.0",
|
||||
"description": "Garry's Stack — Claude Code skills + fast headless browser. One repo, one install, entire AI engineering workflow.",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
|
||||
Executable
+75
@@ -0,0 +1,75 @@
|
||||
#!/bin/bash
|
||||
# GStack Browser launcher — starts browse server + headed Chromium with extension
|
||||
#
|
||||
# Works in two modes:
|
||||
# 1. Inside .app bundle: Contents/MacOS/gstack-browser → Resources are at ../Resources/
|
||||
# 2. Dev mode (run directly): uses global gstack install at ~/.claude/skills/gstack/
|
||||
#
|
||||
# Usage:
|
||||
# open "GStack Browser.app" # .app bundle mode
|
||||
# scripts/app/gstack-browser # dev mode (uses global gstack install)
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
|
||||
# Detect mode: .app bundle or dev
|
||||
if [ -d "$SCRIPT_DIR/../Resources" ]; then
|
||||
# .app bundle mode — resources are alongside in the bundle
|
||||
DIR="$(cd "$SCRIPT_DIR/../Resources" && pwd)"
|
||||
else
|
||||
# Dev mode — use global gstack install
|
||||
DIR="$HOME/.claude/skills/gstack"
|
||||
fi
|
||||
|
||||
# Point Playwright at bundled Chromium (only in .app mode)
|
||||
if [ -d "$DIR/chromium" ]; then
|
||||
CHROMIUM_APP=$(ls -d "$DIR/chromium/"*.app 2>/dev/null | head -1)
|
||||
if [ -n "$CHROMIUM_APP" ]; then
|
||||
export GSTACK_CHROMIUM_PATH="$CHROMIUM_APP/Contents/MacOS/$(ls "$CHROMIUM_APP/Contents/MacOS/" | head -1)"
|
||||
fi
|
||||
fi
|
||||
|
||||
# Browse server config
|
||||
export BROWSE_PORT=34567
|
||||
export BROWSE_HEADED=1
|
||||
|
||||
# Extension: bundled first, then global install
|
||||
if [ -d "$DIR/extension" ]; then
|
||||
export BROWSE_EXTENSIONS_DIR="$DIR/extension"
|
||||
fi
|
||||
|
||||
# Server script: bundled source first, then global install
|
||||
if [ -f "$DIR/src/server.ts" ]; then
|
||||
export BROWSE_SERVER_SCRIPT="$DIR/src/server.ts"
|
||||
elif [ -f "$HOME/.claude/skills/gstack/browse/src/server.ts" ]; then
|
||||
export BROWSE_SERVER_SCRIPT="$HOME/.claude/skills/gstack/browse/src/server.ts"
|
||||
fi
|
||||
|
||||
# Browse binary: bundled .app first, then global install
|
||||
# Note: -x on a directory is true, so check -f (regular file) too
|
||||
BROWSE_BIN=""
|
||||
for candidate in "$DIR/browse" "$DIR/browse/dist/browse" "$HOME/.claude/skills/gstack/browse/dist/browse"; do
|
||||
if [ -f "$candidate" ] && [ -x "$candidate" ]; then
|
||||
BROWSE_BIN="$candidate"
|
||||
break
|
||||
fi
|
||||
done
|
||||
|
||||
if [ -z "$BROWSE_BIN" ]; then
|
||||
echo "ERROR: browse binary not found. Run 'bun run build' in the gstack repo or reinstall GStack Browser."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Ensure profile directory
|
||||
mkdir -p ~/.gstack/chromium-profile
|
||||
|
||||
# Project binding: use last-used project dir, default to home
|
||||
PROJECT_DIR=$(cat ~/.gstack/last-project 2>/dev/null || echo "$HOME")
|
||||
if [ ! -d "$PROJECT_DIR" ]; then
|
||||
PROJECT_DIR="$HOME"
|
||||
fi
|
||||
cd "$PROJECT_DIR"
|
||||
|
||||
# Launch browse in connect mode
|
||||
exec "$BROWSE_BIN" connect "$@"
|
||||
Binary file not shown.
Executable
+195
@@ -0,0 +1,195 @@
|
||||
#!/bin/bash
|
||||
# Build GStack Browser.app — macOS application bundle
|
||||
#
|
||||
# Creates a self-contained .app with:
|
||||
# - Compiled browse binary
|
||||
# - Playwright's bundled Chromium
|
||||
# - Chrome extension (sidebar)
|
||||
# - Info.plist with bundle ID
|
||||
#
|
||||
# Output: dist/GStack Browser.app and dist/GStack-Browser.dmg
|
||||
#
|
||||
# Usage:
|
||||
# ./scripts/build-app.sh # Build .app + DMG
|
||||
# ./scripts/build-app.sh --no-dmg # Build .app only
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
APP_NAME="GStack Browser"
|
||||
BUNDLE_ID="com.gstack.browser"
|
||||
VERSION=$(cat "$ROOT/VERSION" 2>/dev/null || echo "0.0.1")
|
||||
BUILD_DIR="$ROOT/dist"
|
||||
APP_DIR="$BUILD_DIR/$APP_NAME.app"
|
||||
|
||||
echo "Building $APP_NAME v$VERSION..."
|
||||
|
||||
# ─── Step 1: Compile browse binary ─────────────────────────────
|
||||
echo " Compiling browse binary..."
|
||||
cd "$ROOT/browse"
|
||||
bun build --compile src/cli.ts --outfile "$BUILD_DIR/browse-app" --target=bun 2>/dev/null
|
||||
cd "$ROOT"
|
||||
|
||||
# ─── Step 2: Find Playwright's Chromium ─────────────────────────
|
||||
echo " Locating Playwright Chromium..."
|
||||
PW_CACHE="$HOME/Library/Caches/ms-playwright"
|
||||
CHROMIUM_DIR=$(ls -d "$PW_CACHE"/chromium-*/chrome-mac-arm64 2>/dev/null | sort -V | tail -1)
|
||||
|
||||
if [ -z "$CHROMIUM_DIR" ]; then
|
||||
echo "ERROR: Playwright Chromium not found in $PW_CACHE"
|
||||
echo "Run: bunx playwright install chromium"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
CHROME_APP=$(ls -d "$CHROMIUM_DIR"/*.app 2>/dev/null | head -1)
|
||||
if [ -z "$CHROME_APP" ]; then
|
||||
echo "ERROR: Chrome .app not found in $CHROMIUM_DIR"
|
||||
exit 1
|
||||
fi
|
||||
echo " Found: $(basename "$CHROME_APP")"
|
||||
|
||||
# ─── Step 3: Create .app structure ──────────────────────────────
|
||||
echo " Building .app bundle..."
|
||||
rm -rf "$APP_DIR"
|
||||
mkdir -p "$APP_DIR/Contents/MacOS"
|
||||
mkdir -p "$APP_DIR/Contents/Resources"
|
||||
|
||||
# Launcher script
|
||||
cp "$ROOT/scripts/app/gstack-browser" "$APP_DIR/Contents/MacOS/gstack-browser"
|
||||
chmod +x "$APP_DIR/Contents/MacOS/gstack-browser"
|
||||
|
||||
# Browse binary
|
||||
cp "$BUILD_DIR/browse-app" "$APP_DIR/Contents/Resources/browse"
|
||||
chmod +x "$APP_DIR/Contents/Resources/browse"
|
||||
|
||||
# Extension
|
||||
cp -r "$ROOT/extension" "$APP_DIR/Contents/Resources/extension"
|
||||
# Remove .auth.json if present (auth now via /health endpoint)
|
||||
rm -f "$APP_DIR/Contents/Resources/extension/.auth.json"
|
||||
|
||||
# Server source (needed for `bun run server.ts` subprocess)
|
||||
# The launcher sets BROWSE_SERVER_SCRIPT to point at this.
|
||||
# Copy the full src/ directory since server.ts imports other modules.
|
||||
echo " Copying browse source..."
|
||||
cp -r "$ROOT/browse/src" "$APP_DIR/Contents/Resources/src"
|
||||
# Also need package.json for module resolution
|
||||
cp "$ROOT/browse/package.json" "$APP_DIR/Contents/Resources/" 2>/dev/null || true
|
||||
|
||||
# Chromium
|
||||
mkdir -p "$APP_DIR/Contents/Resources/chromium"
|
||||
echo " Copying Chromium (~330MB)..."
|
||||
cp -a "$CHROME_APP" "$APP_DIR/Contents/Resources/chromium/"
|
||||
|
||||
# ─── Step 3b: Rebrand Chromium ────────────────────────────────────
|
||||
# Patch the bundled Chromium's Info.plist so macOS shows "GStack Browser"
|
||||
# in the menu bar, Dock, and Cmd+Tab instead of "Google Chrome for Testing"
|
||||
CHROMIUM_PLIST="$APP_DIR/Contents/Resources/chromium/$(basename "$CHROME_APP")/Contents/Info.plist"
|
||||
if [ -f "$CHROMIUM_PLIST" ]; then
|
||||
echo " Rebranding Chromium → $APP_NAME..."
|
||||
/usr/libexec/PlistBuddy -c "Set :CFBundleName '$APP_NAME'" "$CHROMIUM_PLIST"
|
||||
/usr/libexec/PlistBuddy -c "Set :CFBundleDisplayName '$APP_NAME'" "$CHROMIUM_PLIST"
|
||||
# Also update the localized strings if present
|
||||
CHROMIUM_STRINGS="$APP_DIR/Contents/Resources/chromium/$(basename "$CHROME_APP")/Contents/Resources/en.lproj/InfoPlist.strings"
|
||||
if [ -f "$CHROMIUM_STRINGS" ]; then
|
||||
# InfoPlist.strings may be binary plist, convert to xml first
|
||||
plutil -convert xml1 "$CHROMIUM_STRINGS" 2>/dev/null || true
|
||||
sed -i '' "s/Google Chrome for Testing/$APP_NAME/g" "$CHROMIUM_STRINGS" 2>/dev/null || true
|
||||
fi
|
||||
# Replace Chromium's icon with ours so the Dock shows the GStack icon
|
||||
# (Chromium's process owns the Dock icon, not our launcher)
|
||||
ICON_SRC="$SCRIPT_DIR/app/icon.icns"
|
||||
if [ -f "$ICON_SRC" ]; then
|
||||
CHROMIUM_RESOURCES="$APP_DIR/Contents/Resources/chromium/$(basename "$CHROME_APP")/Contents/Resources"
|
||||
# Find the original icon filename from Chromium's plist
|
||||
ORIG_ICON=$(/usr/libexec/PlistBuddy -c "Print :CFBundleIconFile" "$CHROMIUM_PLIST" 2>/dev/null || echo "app")
|
||||
# Add .icns extension if not present
|
||||
[[ "$ORIG_ICON" != *.icns ]] && ORIG_ICON="${ORIG_ICON}.icns"
|
||||
cp "$ICON_SRC" "$CHROMIUM_RESOURCES/$ORIG_ICON"
|
||||
echo " Replaced Chromium icon → $ORIG_ICON"
|
||||
fi
|
||||
fi
|
||||
|
||||
# ─── Step 3c: App icon ────────────────────────────────────────────
|
||||
ICON_SRC="$SCRIPT_DIR/app/icon.icns"
|
||||
if [ -f "$ICON_SRC" ]; then
|
||||
cp "$ICON_SRC" "$APP_DIR/Contents/Resources/icon.icns"
|
||||
echo " App icon installed"
|
||||
else
|
||||
echo " WARNING: No icon.icns found at $ICON_SRC — app will use default icon"
|
||||
fi
|
||||
|
||||
# ─── Step 4: Info.plist ──────────────────────────────────────────
|
||||
cat > "$APP_DIR/Contents/Info.plist" << PLIST
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>CFBundleName</key>
|
||||
<string>$APP_NAME</string>
|
||||
<key>CFBundleDisplayName</key>
|
||||
<string>$APP_NAME</string>
|
||||
<key>CFBundleIdentifier</key>
|
||||
<string>$BUNDLE_ID</string>
|
||||
<key>CFBundleVersion</key>
|
||||
<string>$VERSION</string>
|
||||
<key>CFBundleShortVersionString</key>
|
||||
<string>$VERSION</string>
|
||||
<key>CFBundleExecutable</key>
|
||||
<string>gstack-browser</string>
|
||||
<key>CFBundlePackageType</key>
|
||||
<string>APPL</string>
|
||||
<key>CFBundleSignature</key>
|
||||
<string>????</string>
|
||||
<key>LSMinimumSystemVersion</key>
|
||||
<string>12.0</string>
|
||||
<key>CFBundleIconFile</key>
|
||||
<string>icon</string>
|
||||
<key>NSHighResolutionCapable</key>
|
||||
<true/>
|
||||
<key>LSApplicationCategoryType</key>
|
||||
<string>public.app-category.developer-tools</string>
|
||||
<key>NSSupportsAutomaticTermination</key>
|
||||
<false/>
|
||||
</dict>
|
||||
</plist>
|
||||
PLIST
|
||||
|
||||
# ─── Step 5: App size report ────────────────────────────────────
|
||||
APP_SIZE=$(du -sh "$APP_DIR" | cut -f1)
|
||||
echo ""
|
||||
echo " $APP_NAME.app: $APP_SIZE"
|
||||
echo " Contents/MacOS/gstack-browser (launcher)"
|
||||
echo " Contents/Resources/browse ($(du -sh "$APP_DIR/Contents/Resources/browse" | cut -f1))"
|
||||
echo " Contents/Resources/extension/ ($(du -sh "$APP_DIR/Contents/Resources/extension" | cut -f1))"
|
||||
echo " Contents/Resources/chromium/ ($(du -sh "$APP_DIR/Contents/Resources/chromium" | cut -f1))"
|
||||
|
||||
# ─── Step 6: DMG (optional) ─────────────────────────────────────
|
||||
if [ "${1:-}" = "--no-dmg" ]; then
|
||||
echo ""
|
||||
echo "Done. App at: $APP_DIR"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
DMG_PATH="$BUILD_DIR/GStack-Browser.dmg"
|
||||
echo ""
|
||||
echo " Creating DMG..."
|
||||
rm -f "$DMG_PATH"
|
||||
|
||||
# Create a temporary directory for DMG contents
|
||||
DMG_TMP=$(mktemp -d)
|
||||
cp -a "$APP_DIR" "$DMG_TMP/"
|
||||
ln -s /Applications "$DMG_TMP/Applications"
|
||||
|
||||
hdiutil create -volname "$APP_NAME" \
|
||||
-srcfolder "$DMG_TMP" \
|
||||
-ov -format UDZO \
|
||||
"$DMG_PATH" \
|
||||
> /dev/null 2>&1
|
||||
|
||||
rm -rf "$DMG_TMP"
|
||||
|
||||
DMG_SIZE=$(du -sh "$DMG_PATH" | cut -f1)
|
||||
echo " DMG: $DMG_SIZE → $DMG_PATH"
|
||||
echo ""
|
||||
echo "Done. Install: open $DMG_PATH"
|
||||
@@ -595,6 +595,14 @@ if [ "$INSTALL_CLAUDE" -eq 1 ]; then
|
||||
# reads the correct (patched) name: values for symlink naming
|
||||
"$SOURCE_GSTACK_DIR/bin/gstack-patch-names" "$SOURCE_GSTACK_DIR" "$SKILL_PREFIX"
|
||||
link_claude_skill_dirs "$SOURCE_GSTACK_DIR" "$INSTALL_SKILLS_DIR"
|
||||
# Backwards-compat alias: /connect-chrome → /open-gstack-browser
|
||||
_OGB_LINK="$INSTALL_SKILLS_DIR/connect-chrome"
|
||||
if [ "$SKILL_PREFIX" -eq 1 ]; then
|
||||
_OGB_LINK="$INSTALL_SKILLS_DIR/gstack-connect-chrome"
|
||||
fi
|
||||
if [ -L "$_OGB_LINK" ] || [ ! -e "$_OGB_LINK" ]; then
|
||||
ln -snf "gstack/open-gstack-browser" "$_OGB_LINK"
|
||||
fi
|
||||
if [ "$LOCAL_INSTALL" -eq 1 ]; then
|
||||
echo "gstack ready (project-local)."
|
||||
echo " skills: $INSTALL_SKILLS_DIR"
|
||||
|
||||
Reference in New Issue
Block a user