Side Browser

---
name: side-browser
description: Use the browser pane beside this conversation (terminal-browser in herdr or the Herdr app) to check a front change end to end against the local dev server, on mobile, tablet and desktop sizes, reproduce a bug on a page, read the page the person is looking at, or prepare a review on GitHub for the person to submit. Use it whenever a task needs a real browser and this session runs in herdr or the Herdr app; not when terminal-browser is missing or the person set E2E tests to run in another browser.
---

The person sees this browser beside the conversation and it keeps their sign-ins, so they watch what you do and the pages
you open are already logged in.

<!-- agent: codex -->
**Which browser?** Run `command -v terminal-browser; echo "$HERDR_PANE_ID $HC_TERMINAL_ID"; jq -r '.e2eBrowser // .checksBrowser // "terminal-browser"'
~/.config/cockpit/config.json`. Skip the rest of this skill, and use the browser tooling you have, when terminal-browser is
missing, there is neither a herdr pane id nor a Herdr app terminal id, the setting says `chrome`, or the person asks for
another browser. The setting is `e2eBrowser` in ~/.config/cockpit/config.json (`cockpit setup` asks it).
<!-- /agent -->

<!-- agent: codex -->
**Not for showing results.** Charts, figures, tables and diagrams go through cockpit's show tool, drawn natively beside
the session; a hand-made HTML page here is only for what no show block can draw, or when the person asks for a page.
<!-- /agent -->

**Open a page** with `sh ~/.config/cockpit/herdr/browse.sh <url>`, never with `terminal-browser open`. A URL, a
`localhost:<port>` or an absolute path to an HTML file all work. It opens the page as a tab of the browser already beside
you, or brings the tab to the front when that page is already open, or splits a new pane right of yours sized so herdr
draws it fast (in the Herdr app, a terminal split right of yours). The keyboard stays with the conversation. `--size 0.6` asks for a wider pane, `--reload` reloads the page
when it is already open.

**Drive it** with `terminal-browser action -- <command>`, which targets the active tab of the browser beside you (the
`terminal-browser` skill has the full command list). terminal-browser only knows herdr's panes: in the Herdr app
(`$HC_TERMINAL_ID` set), name the browser on every call, `terminal-browser action --browser <key> -- <command>` and
`terminal-browser new-tab --browser <key> <url>`, with the key `sh ~/.config/cockpit/herdr/browse.sh --beside` prints. `snapshot -i` lists the elements with refs, then `click @e12`,
`fill @e3 "text"`, `press Enter`, `get text @e5`, `eval "document.title"`, `wait --load networkidle`,
`screenshot <path>` to look at the result. Run `terminal-browser action done` after your last action, which clears the
"agent in control" banner the person sees.

**Checking a front change**: make sure the dev server runs, open its local URL, walk the flow the change touches, take
a screenshot at each state that matters and compare it with the Figma frame when the ticket has one. Say what you checked
and what you saw, with the screenshot paths.

**Mobile, tablet and desktop**: emulation sticks to the tab it is set on, so give it a tab of its own:
`terminal-browser new-tab <url>`, then `terminal-browser action -- set device "iPhone 16"` (also `iPad`, `iPad Pro`,
`Pixel 9`, `Galaxy S25`) or `set viewport 1440 900` for a desktop width, `reload`, and `screenshot` at each size. Close
that tab with `terminal-browser action -- tab close` when done, so the
person's tabs keep their own size.

<!-- agent: codex -->
**Before and after, for a PR description**: `sh ~/.config/cockpit/herdr/shots.sh <url> <dir>` screenshots a page at
phone, tablet and desktop sizes in throwaway tabs (`--sizes mobile,desktop`, `--full` for the whole page) and prints the
paths. Take it once for before, into `~/.cache/cockpit/shots/<repo>-<branch>/before`: on `main` with the dev server
still running, or on the production page when the branch must stay checked out. Then once for after, on the branch,
into `…/after`. Dismiss cookie banners first so both sides match. Show them to the person with cockpit's show
tool, one `{type: "compare", title: "Mobile", before, after}` block per size. In the PR description,
GitHub only takes pictures uploaded through its own editor: open the PR's edit form (or the new PR page) beside you,
`upload` the screenshots into the description field, check their links appeared, arrange them in a small Before | After
table, and leave Save or Create to the person.
<!-- /agent -->

**Anything that publishes in the person's name stays theirs**: a GitHub review, a comment, a message, a form that
sends. Fill it in (the review's inline comments, the summary), leave the page on the Submit button and tell the person
it is ready for them to read and submit. Never press Submit, Send, Approve, Merge or Delete yourself.