pastilhasandClaude Opus 5
52934f52dc
Your own Chrome, driven from Officer. Not a headless one: it attaches to the browser you are already
signed into, which is the whole difference from /scrape, and /scrape stays behind in the platform.
The relay is a sidecar now, and that is the point. It was a second Bun.serve inside the platform
process on its own port, which is exactly why it was switched off on 2026-08-13 — "the platform serves
one port". A sidecar is a process allowed its own listeners, so the objection stops applying instead of
being argued with.
The boundary across it is deliberately small: two questions, who is connected and what tabs they have,
because only those live in memory on the relay side. Screenshots, evaluation and navigation still go
straight down cdp.ts's own WebSocket to the relay's /cdp endpoint, exactly as before — routing page
bytes through the platform would be work for nothing.
Three normally-breaking changes taken now because now they are free, each already recommended in a
comment by whoever switched the relay off. Its own signing key instead of borrowing getKey('jwt'). Its
own table instead of the platform's user_integrations. And the port kept at 18792 on purpose, because
the port is an input to the token HMAC as well as an address — moving it fails every pairing silently,
and the extension blames the address. user_integrations held zero browser-relay rows, checked in
Postgres rather than assumed, so there was nothing to unpair.
The screen became panels. BrowserScreen.tsx rendered TabList and TabPreview through appType: null
placeholders; both components were already self-contained and took no props, so the screen had nothing
to pass and simply went.
Not tested end to end — no browser has been paired since the move, and that needs a Chrome and a
person. BLOCKERS.md says so rather than the commit implying otherwise.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
210 lines
6.1 KiB
HTML
210 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Officer Browser Relay</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light dark;
|
|
--accent: #06b6d4;
|
|
--panel: color-mix(in oklab, canvas 92%, canvasText 8%);
|
|
--border: color-mix(in oklab, canvasText 18%, transparent);
|
|
--muted: color-mix(in oklab, canvasText 70%, transparent);
|
|
--shadow: 0 10px 30px color-mix(in oklab, canvasText 18%, transparent);
|
|
font-family: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
|
|
"SF Pro Display", "Segoe UI", sans-serif;
|
|
line-height: 1.4;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(1000px 500px at 10% 0%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%),
|
|
radial-gradient(900px 450px at 90% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 75%),
|
|
canvas;
|
|
color: canvasText;
|
|
}
|
|
.wrap {
|
|
max-width: 820px;
|
|
margin: 36px auto;
|
|
padding: 0 24px 48px 24px;
|
|
}
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.logo {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 14px;
|
|
background: color-mix(in oklab, var(--accent) 18%, transparent);
|
|
border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
|
|
box-shadow: var(--shadow);
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 24px;
|
|
}
|
|
h1 {
|
|
font-size: 20px;
|
|
margin: 0;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.subtitle {
|
|
margin: 2px 0 0 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
}
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.card h2 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 14px;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.card p {
|
|
margin: 8px 0 0 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
input {
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
background: color-mix(in oklab, canvas 92%, canvasText 8%);
|
|
color: canvasText;
|
|
outline: none;
|
|
}
|
|
input:focus {
|
|
border-color: color-mix(in oklab, var(--accent) 70%, transparent);
|
|
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
|
|
}
|
|
input.host-input {
|
|
width: 240px;
|
|
}
|
|
input.port-input {
|
|
width: 100px;
|
|
}
|
|
input.token-input {
|
|
width: min(520px, 100%);
|
|
}
|
|
button {
|
|
padding: 10px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
|
|
background: linear-gradient(
|
|
180deg,
|
|
color-mix(in oklab, var(--accent) 80%, white 20%),
|
|
var(--accent)
|
|
);
|
|
color: white;
|
|
font-weight: 650;
|
|
letter-spacing: 0.01em;
|
|
cursor: pointer;
|
|
}
|
|
button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.hint {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
code {
|
|
font-family: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", monospace;
|
|
font-size: 12px;
|
|
}
|
|
a {
|
|
color: color-mix(in oklab, var(--accent) 85%, canvasText 15%);
|
|
}
|
|
.status {
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: color-mix(in oklab, var(--accent) 70%, canvasText 30%);
|
|
min-height: 16px;
|
|
}
|
|
.status[data-kind='ok'] {
|
|
color: color-mix(in oklab, #16a34a 75%, canvasText 25%);
|
|
}
|
|
.status[data-kind='error'] {
|
|
color: color-mix(in oklab, #ef4444 75%, canvasText 25%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header>
|
|
<div class="logo" aria-hidden="true">🌐</div>
|
|
<div>
|
|
<h1>Officer Browser Relay</h1>
|
|
<p class="subtitle">Click the toolbar button on a tab to attach / detach.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h2>Getting started</h2>
|
|
<p>
|
|
If you see a red <code>!</code> badge on the extension icon, the relay server is not reachable.
|
|
Make sure Officer is running and enter the correct server address, port, and relay token below.
|
|
</p>
|
|
<p>
|
|
You can find your relay token in the Officer dashboard under <strong>Browser</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Relay connection</h2>
|
|
|
|
<label for="host">Server address</label>
|
|
<div class="row">
|
|
<input id="host" class="host-input" placeholder="e.g. 100.64.0.1" />
|
|
</div>
|
|
|
|
<label for="port" style="margin-top: 10px">Port</label>
|
|
<div class="row">
|
|
<input id="port" class="port-input" inputmode="numeric" pattern="[0-9]*" />
|
|
</div>
|
|
|
|
<label for="token" style="margin-top: 10px">Relay token</label>
|
|
<div class="row">
|
|
<input id="token" class="token-input" type="password" autocomplete="off" />
|
|
<button id="save" type="button">Save</button>
|
|
</div>
|
|
|
|
<div class="hint">
|
|
Default port: <code>18792</code>. Extension connects to: <code id="relay-url">http://<host>:<port>/</code>.
|
|
</div>
|
|
<div class="status" id="status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="options.js"></script>
|
|
</div>
|
|
</body>
|
|
</html>
|