karnstack · karngyan · Sep 28, 2026 · Sep 28, 2026
diff --git a/docs/CHROME_WEB_STORE.md b/docs/CHROME_WEB_STORE.md
@@ -101,21 +101,30 @@ repo must be public for it to resolve).
 ## Graphic assets
 
 The **Graphic assets** section of the listing form. Ready-made, branded assets
-live in [`packages/extension/store-assets/`](../packages/extension/store-assets)
-(regenerate with `python3 packages/extension/store-assets/generate.py`).
+live in [`packages/extension/store-assets/`](../packages/extension/store-assets).
+All of them are HTML in `store-assets/screens/` (the popup screenshot frames
+the real `popup.css`); re-render with `store-assets/screens/render.sh`.
 
 | Slot | Required | Size | Format | Use |
 |---|---|---|---|---|
 | **Store icon** | ✅ | 128×128 | PNG | `packages/extension/icons/icon-128.png` |
-| **Screenshots** (≤5) | ✅ (≥1) | 1280×800 or 640×400 | JPEG / 24-bit PNG, no alpha | `store-assets/screenshot-1280x800.png` |
+| **Screenshots** (≤5) | ✅ (≥1) | 1280×800 or 640×400 | JPEG / 24-bit PNG, no alpha | `store-assets/screenshot-{1..5}-1280x800.png`, uploaded in order |
 | **Small promo tile** | optional | 440×280 | JPEG / 24-bit PNG, no alpha | `store-assets/small-tile-440x280.png` |
 | **Marquee promo tile** | optional | 1400×560 | JPEG / 24-bit PNG, no alpha | `store-assets/marquee-1400x560.png` |
 | Global promo video | optional | — | YouTube URL | skip |
 
-The generated screenshot is a **branded hero** — enough to submit. For a
-stronger listing, add real captures too (up to 5): the toolbar popover in its
-connected state, and an agent driving a page. Capture at exactly 1280×800 (or
-640×400) with no alpha channel.
+The five screenshots, in upload order:
+
+1. **Hero**: an agent driving a signed-in page, refs on the elements, Chrome's
+   debugging banner showing.
+2. **Site permissions**: the popup, connected, with deny / read / full rules.
+3. **`reins do`**: one command for a whole task, with the benchmark medians.
+4. **Debugging**: console errors and a failing request, read from the shell.
+5. **Local-only**: agent → daemon on 127.0.0.1 → extension, and the facts.
+
+Terminal output in them follows the CLI's real formats; if a formatter
+changes, update the matching slide. Slide 3's figures come from
+`packages/web/src/routes/docs/benchmarks.tsx`.
 
 ## Store listing description (paste-ready)
 

diff --git a/packages/extension/store-assets/generate.py b/packages/extension/store-assets/generate.py
diff --git a/packages/extension/store-assets/marquee-1400x560.png b/packages/extension/store-assets/marquee-1400x560.png
diff --git a/packages/extension/store-assets/screens/1-hero.html b/packages/extension/store-assets/screens/1-hero.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<link rel="stylesheet" href="shared.css" />
+<style>
+  .stage { position: relative; height: 560px; margin-top: 40px; }
+  .browser { position: absolute; left: 290px; top: 0; width: 846px; height: 620px; }
+  .term { position: absolute; left: -8px; top: 120px; width: 440px; z-index: 5; }
+
+  .app { display: grid; grid-template-columns: 180px 1fr; height: 100%; }
+  .side { background: #fafafa; border-right: 1px solid #eee; padding: 18px 14px; font-size: 13px; color: #52525b; }
+  .side .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #18181b; margin-bottom: 22px; }
+  .side .logo i { width: 20px; height: 20px; border-radius: 6px; background: #18181b; }
+  .side .item { position: relative; display: block; padding: 7px 10px; border-radius: 6px; margin-bottom: 2px; }
+  .side .item.on { background: #fff; color: #18181b; font-weight: 600; box-shadow: 0 0 0 1px #e4e4e7; }
+  .main { padding: 20px 26px; position: relative; }
+  .top { display: flex; align-items: center; justify-content: space-between; }
+  .top h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
+  .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #52525b; }
+  .who i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ef4444); }
+  .bar { display: flex; gap: 10px; margin-top: 18px; position: relative; }
+  .search { position: relative; flex: 1; height: 34px; border: 1px solid #e4e4e7; border-radius: 7px; padding: 0 12px; display: flex; align-items: center; font-size: 13px; color: #a1a1aa; }
+  .btn { position: relative; height: 34px; padding: 0 14px; border-radius: 7px; display: flex; align-items: center; font-size: 13px; font-weight: 600; }
+  .btn--pri { background: #18181b; color: #fff; }
+  table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 13px; }
+  th { text-align: left; font-weight: 500; color: #71717a; padding: 8px 6px; border-bottom: 1px solid #e4e4e7; }
+  td { padding: 11px 6px; border-bottom: 1px solid #f1f1f3; color: #27272a; }
+  td.num { font-variant-numeric: tabular-nums; }
+  .pill { padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
+  .paid { background: #dcfce7; color: #166534; }
+  .due { background: #fef3c7; color: #92400e; }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="meta">
+    <span class="brand"><img src="logo.svg" width="26" height="26" alt="" />reins</span>
+    <span>reins.tech</span>
+  </div>
+  <h1 class="headline"><span class="hash">#</span>Drive the browser you're signed in to</h1>
+  <p class="sub">Your coding agent gets your real Chrome, logins and all. No debug profile, no launch flags, no signing in again.</p>
+
+  <div class="stage">
+    <div class="browser">
+      <div class="tabs">
+        <div class="lights"><i></i><i></i><i></i></div>
+        <div class="tab"><span class="fav" style="background:#24292f"></span>Pull requests</div>
+        <span class="group-chip">agent</span>
+        <div class="tab tab--active group-line"><span class="fav" style="background:#18181b"></span>Invoices · Acme</div>
+        <div class="tab group-line"><span class="fav" style="background:#f97316"></span>Stripe export</div>
+      </div>
+      <div class="toolbar">
+        <div class="nav">←&nbsp; →&nbsp; ↻</div>
+        <div class="omnibox"><span class="lock">🔒</span><span class="host">app.acme.dev</span><span class="path">/billing/invoices</span></div>
+        <div class="ext ext--on"><img src="logo.svg" width="20" height="20" alt="" /></div>
+      </div>
+      <div class="debugbar"><span class="icon"></span>"reins" started debugging this browser<span class="cancel">Cancel</span></div>
+      <div class="app">
+        <div class="side">
+          <div class="logo"><i></i>Acme</div>
+          <span class="item">Overview</span>
+          <span class="item">Customers</span>
+          <span class="item on">Invoices</span>
+          <span class="item">Payouts</span>
+          <span class="item">Settings</span>
+        </div>
+        <div class="main">
+          <div class="top"><h2>Invoices</h2><span class="who"><i></i>maya@acme.dev</span></div>
+          <div class="bar">
+            <div class="search"><span class="ref" style="left:-8px;top:-10px">e9</span>Search invoices</div>
+            <div class="btn" style="box-shadow:0 0 0 1px #e4e4e7">Filter</div>
+            <div class="btn btn--pri outlined"><span class="ref" style="right:-10px;top:-12px">e7</span>Export CSV</div>
+            <svg aria-hidden="true" class="cursor" style="right:-6px;top:24px" viewBox="0 0 16 16"><path d="M1 1l4.5 13 2.2-5.3L13 6.5 1 1z" fill="#fff" stroke="#000" stroke-width="1" stroke-linejoin="round"/></svg>
+          </div>
+          <table>
+            <tr><th>Invoice</th><th>Customer</th><th>Amount</th><th>Status</th></tr>
+            <tr><td style="position:relative"><span class="ref" style="left:78px;top:10px">e12</span>INV-2041</td><td>Northwind</td><td class="num">$4,200.00</td><td><span class="pill paid">Paid</span></td></tr>
+            <tr><td>INV-2040</td><td>Globex</td><td class="num">$1,180.00</td><td><span class="pill due">Due</span></td></tr>
+            <tr><td>INV-2039</td><td>Initech</td><td class="num">$9,640.00</td><td><span class="pill paid">Paid</span></td></tr>
+            <tr><td>INV-2038</td><td>Umbrella</td><td class="num">$720.00</td><td><span class="pill paid">Paid</span></td></tr>
+            <tr><td>INV-2037</td><td>Hooli</td><td class="num">$3,015.00</td><td><span class="pill due">Due</span></td></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div class="term">
+      <div class="term__bar"><i></i><i></i><i></i><span>claude — ~/acme</span></div>
+<pre><span class="p">$</span> <span class="c">reins snapshot</span>
+<span class="o">e7: button "Export CSV"</span>
+<span class="o">e9: textbox "Search invoices"</span>
+<span class="o">e12: link "INV-2041"</span>
+<span class="p">$</span> <span class="c">reins click --ref e7</span>
+<span class="ok">ok</span>
+<span class="p">$</span> <span class="c">reins text</span>
+<span class="o">Export ready: invoices-2026-09.csv</span>
+<span class="p">$</span> <span class="caret"></span></pre>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/extension/store-assets/screens/2-popup.html b/packages/extension/store-assets/screens/2-popup.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<link rel="stylesheet" href="shared.css" />
+<style>
+  .cols { display: grid; grid-template-columns: 560px 1fr; gap: 40px; }
+  .headline { font-size: 38px; }
+  .tiers { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
+  .tiers li { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.45; color: var(--ink-2); }
+  .tier { justify-self: start; padding: 3px 10px; border-radius: 6px; font-size: 15px; font-weight: 600; }
+  .t-deny { background: rgb(220 38 38 / 0.08); color: #b91c1c; }
+  .t-read { background: rgb(245 158 11 / 0.16); color: #9a4b00; }
+  .t-full { background: rgb(124 58 237 / 0.1); color: #6d28d9; }
+
+  .right { position: relative; height: 800px; margin-top: -56px; }
+  .browser { position: absolute; left: 0; right: -120px; top: 56px; border-radius: 12px 0 0 0; box-shadow: 0 0 0 1px var(--line-strong); }
+  .page { height: 700px; background: #fafafa; }
+  .pop { position: absolute; right: 26px; top: 146px; width: 446px; height: 780px; border-radius: 12px; overflow: hidden; background: #fff;
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 24px 60px -12px rgb(24 24 27 / 0.35), 0 8px 20px -8px rgb(24 24 27 / 0.2); }
+  .pop iframe { border: 0; width: 372px; height: 680px; transform: scale(1.2); transform-origin: 0 0; }
+  .ext--on { outline: 2px solid #c4b5fd; }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="cols">
+    <div>
+      <div class="meta"><span class="brand"><img src="logo.svg" width="26" height="26" alt="" />reins</span></div>
+      <h1 class="headline"><span class="hash">#</span>You decide what it can touch</h1>
+      <p class="sub">Every site resolves to one tier, checked inside the extension before a command reaches the tab. Granting more takes a click here. An agent in your shell can't make one.</p>
+      <ul class="tiers">
+        <li><span class="tier t-deny">deny</span><span>Nothing. The site's tabs are hidden from the agent.</span></li>
+        <li><span class="tier t-read">read</span><span>Snapshot, text, screenshot. No clicks, no typing.</span></li>
+        <li><span class="tier t-full">full</span><span>Everything, including eval and raw CDP.</span></li>
+      </ul>
+    </div>
+    <div class="right">
+      <div class="browser">
+        <div class="tabs">
+          <div class="lights"><i></i><i></i><i></i></div>
+          <div class="tab tab--active"><span class="fav" style="background:#0f766e"></span>My Bank · Accounts</div>
+        </div>
+        <div class="toolbar">
+          <div class="nav">←&nbsp; →&nbsp; ↻</div>
+          <div class="omnibox"><span class="lock">🔒</span><span class="host">mybank.com</span><span class="path">/accounts</span></div>
+          <div class="ext ext--on" style="margin-right:112px"><img src="logo.svg" width="20" height="20" alt="" /></div>
+        </div>
+        <div class="page"></div>
+      </div>
+      <div class="pop"><iframe src="popup-frame.html" title="reins popup"></iframe></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>