---
name: connect-chrome
version: 0.1.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".
allowed-tools:
  - Bash
  - Read
  - AskUserQuestion

---

{{PREAMBLE}}

# /connect-chrome — Launch Real Chrome with Side Panel

Connect Claude to a visible Chrome window with the gstack extension auto-loaded.
You see every click, every navigation, every action in real time.

{{BROWSE_SETUP}}

## Step 1: Connect

```bash
$B connect
```

This launches your system Chrome via Playwright with:
- A visible window (headed mode, not headless)
- The gstack Chrome extension pre-loaded
- A green shimmer line + "gstack" pill so you know which window is controlled

If Chrome is already running, the server restarts in headed mode with a fresh
Chrome instance. Your regular Chrome stays untouched.

After connecting, print the output to the user.

## Step 2: Verify

```bash
$B status
```

Confirm the output shows `Mode: cdp`. Print the port number — the user may need
it for the Side Panel.

## Step 3: Guide the user to the Side Panel

Use AskUserQuestion:

> Chrome is launched with gstack control. You should see a green shimmer line at the
> top of the Chrome window and a small "gstack" pill in the bottom-right corner.
>
> The Side Panel extension is pre-loaded. To open it:
> 1. Look for the **puzzle piece icon** (Extensions) in Chrome's toolbar
> 2. Click it → find **gstack browse** → click the **pin icon** to pin it
> 3. Click the **gstack icon** in the toolbar
> 4. Click **Open Side Panel**
>
> The Side Panel shows a live feed of every browse command in real time.
>
> **Port:** The browse server is on port {PORT} — the extension auto-detects it
> if you're using the Playwright-controlled Chrome. If the badge stays gray, click
> the gstack icon and enter port {PORT} manually.

Options:
- A) I can see the Side Panel — let's go!
- B) I can see Chrome but can't find the extension
- C) Something went wrong

If B: Tell the user:
> The extension should be auto-loaded, but Chrome sometimes doesn't show it
> immediately. Try:
> 1. Type `chrome://extensions` in the address bar
> 2. Look for "gstack browse" — it should be listed and enabled
> 3. If not listed, click "Load unpacked" → navigate to the extension folder
>    (press Cmd+Shift+G in the file picker, paste this path):
>    `{EXTENSION_PATH}`
>
> Then pin it from the puzzle piece icon and open the Side Panel.

If C: Run `$B status` and show the output. Check if the server is healthy.

## Step 4: Demo

After the user confirms the Side Panel is working, run a quick demo so they
can see the activity feed in action:

```bash
$B goto https://news.ycombinator.com
```

Wait 2 seconds, then:

```bash
$B snapshot -i
```

Tell the user: "Check the Side Panel — you should see the `goto` and `snapshot`
commands appear in the activity feed. Every command Claude runs will show up here
in real time."

## Step 5: Sidebar chat

After the activity feed demo, tell the user about the sidebar chat:

> The Side Panel also has a **chat tab**. Try typing a message like "take a
> snapshot and describe this page." A child Claude instance will execute your
> request in the browser — you'll see the commands appear in the activity feed.
>
> The sidebar agent can navigate pages, click buttons, fill forms, and read
> content. Each task gets up to 5 minutes. It runs in an isolated session, so
> it won't interfere with this Claude Code window.

## Step 6: What's next

Tell the user:

> You're all set! Chrome is under Claude's control with the Side Panel showing
> live activity and a chat sidebar for direct commands. Here's what you can do:
>
> - **Chat in the sidebar** — type natural language instructions and Claude
>   executes them in the browser
> - **Run any browse command** — `$B goto`, `$B click`, `$B snapshot` — and
>   watch it happen in Chrome + the Side Panel
> - **Use /qa or /design-review** — they'll run in the visible Chrome window
>   instead of headless. No cookie import needed.
> - **`$B focus`** — bring Chrome to the foreground anytime
> - **`$B disconnect`** — return to headless mode when done

Then proceed with whatever the user asked to do. If they didn't specify a task,
ask what they'd like to test or browse.