Metadata-Version: 2.3
Name: devpanel
Version: 0.1.0
Summary: Chrome DevTools panel with terminal and browser context injection for Claude Code
Author: Fredrik Angelsen
Author-email: Fredrik Angelsen <fredrikangelsen@gmail.com>
Requires-Python: >=3.12
Description-Content-Type: text/markdown

# devpanel

Chrome DevTools panel with an embedded terminal and browser context injection for Claude Code.

## What it does

Opens a terminal inside Chrome DevTools. Claude Code runs in that terminal with a hook that automatically injects browser context into every prompt.

**Pin elements** — select in Elements panel, click Pin, `$0` (selector + HTML + bounds) queues for the next prompt.

**Capture network** — snapshot requests from `devtools.network.getHAR()` into the queue.

**Screenshot nodes** — CDP `Page.captureScreenshot` with clip from `DOM.getBoxModel`, queued.

Everything drains on prompt submit. Claude Code sees the browser context without you describing it.

## Architecture

```
DevTools panel (Svelte 5, xterm.js)
  ├── Terminal ──ws──→ PTY daemon (:random)
  ├── Pin $0 ──http──→ /stack (push)
  └── Capture ──http─→ /stack (push)

Claude Code (inside PTY)
  └── hook: curl /stack (drain + clear)
```

Three pieces, no coupling:

| Component | Role |
|-----------|------|
| **Extension** | DevTools panel UI, pushes context to stack |
| **PTY daemon** | WebSocket terminal + `/stack` HTTP endpoint |
| **Hook** | `claude` wrapper drains stack into prompt |

No relay, no auth, no content scripts. DevTools APIs (`inspectedWindow.eval`, `network.getHAR`, `chrome.debugger`) replace all of it.

## Install

```bash
uv tool install devpanel
devpanel install   # registers native messaging host, prints extension path
```

Then load the extension in `chrome://extensions` → Load unpacked → point to the printed path.

## Dev

```bash
# Extension (CRXJS + Svelte 5 + Tailwind)
cd extension-src
npm install && npm run dev

# Daemon
cd src/devpanel
uv run devpanel start
```

## Build

```bash
make build
# 1. npm run build in extension-src/
# 2. copies dist/ → src/devpanel/extension/
# 3. uv build
```

Built extension is bundled as package data. `uv tool install` gives you the CLI, daemon, and extension files. One install.
