sourcemonkey 0.0.0-stage → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jeff Shute
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,88 @@
-# Temporary Holding Version
+# SourceMonkey developer tools for userscripts
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Develop, test and debug userscripts in a real browser, running in the
+real [SourceMonkey](https://github.com/jshute96/SourceMonkey) extension,
+using real `GM_*` APIs and other features.
+
+Use these tools with coding agents (like Claude Code) to enable fully agentic
+userscript development.
+
+This package includes:
+
+- **`sm-dev` command-line tool**
+  - Run a userscript against a live page and watch what it does.
+  - Or run against a saved page snapshot (for example, on pages that require login).
+  - Drive and inspect the page, and read userscript state and stored values.
+  - Run and manage scripts under Tampermonkey or Violentmonkey too.
+- **A Playwright test fixture**
+  - Write tests that load userscripts on a page, and check for expected results.
+  - Test against live pages or snapshots.
+  - Catch changes on the live page that break your scripts.
+- **Agent skills**
+  - Use with coding agents, so they can develop, test and debug
+    userscripts using `sm-dev`, against live pages or snapshots.
+
+## Install
+
+Needs Node 22 or newer.
+
+In a repo of userscripts, install it with Playwright, and the Chromium
+build Playwright drives:
+
+```sh
+pnpm add -D sourcemonkey @playwright/test
+pnpm exec playwright install chromium
+pnpm sm-dev --help
+```
+
+Or run `sm-dev` without installing anything:
+
+```sh
+npx sm-dev --help
+```
+
+Commands that launch a browser require Chromium. They'll report the command
+to install the required version, if it's not already installed.
+
+## Run a script
+
+```sh
+pnpm sm-dev start path/script.user.js [http://example.com]
+```
+
+This launches a browser with SourceMonkey loaded, loads the script,
+and opens the given URL (or the script's `@match` target page, by default).
+This streams the page's console, and lets you interact with the
+page and the loaded userscripts.
+
+At the prompt:
+
+```
+> status              # Browser info, loaded scripts, and tab status
+> snapshot --visible  # What's on screen, with element refs (e12)
+> click e12           # Click one, and wait for the page to settle
+> menu                # The script's menu commands
+> values              # What the script stored
+> help                # See other commands
+```
+
+## Write a test
+
+```js
+import { test, expect } from 'sourcemonkey/harness';
+
+test('adds the button to the toolbar', async ({ page, loadUserscript, gm, reports }) => {
+  await loadUserscript('sites/example.com/add-button.user.js');
+  await page.goto('https://example.com/items/42');
+  await reports.waitForStart();
+  await expect(page.locator('#add-button')).toBeVisible();
+  expect(await gm.get('lastItem')).toBe('42');
+});
+```
+
+## More
+
+- [The SourceMonkey extension](https://github.com/jshute96/SourceMonkey):
+  the default userscript manager these tools use.
+- [Harness guide](https://github.com/jshute96/SourceMonkey/blob/main/docs/harness-guide.md):
+  details on setup, browsers, all `sm-dev` commands, and the test fixture.

package/dist/bytes.js

@@ -0,0 +1,37 @@
+// Small byte / crypto helpers shared across modules so the SHA-256 and
+// binary→base64 logic lives in one place (script content hashes in
+// script-store, @require/@resource byte hashes + transport in
+// external-files, GM_xmlhttpRequest response transport in gm-xhr).
+// SHA-256 → lowercase hex. Accepts a string (UTF-8 encoded first) or
+// bytes. Async because SubtleCrypto has no sync form on the web
+// platform.
+export async function sha256Hex(data) {
+    const bytes = typeof data === 'string' ? new TextEncoder().encode(data) : data;
+    const digest = await crypto.subtle.digest('SHA-256', bytes);
+    let out = '';
+    for (const b of new Uint8Array(digest))
+        out += b.toString(16).padStart(2, '0');
+    return out;
+}
+// base64→binary. The inverse of `bytesToBase64`, used on the receiving
+// end of message hops that can't carry an ArrayBuffer, and to rebuild a
+// stored `@resource` body when a conditional GET answers 304 and the
+// server sends no bytes of its own.
+export function base64ToBytes(base64) {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++)
+        bytes[i] = binary.charCodeAt(i);
+    return bytes.buffer;
+}
+// Chunked binary→base64. `String.fromCharCode(...hugeArray)` throws
+// "Maximum call stack size exceeded" past ~125k args in V8, so we walk
+// the buffer in 32 KiB slices and concatenate. Linear and bounded.
+export function bytesToBase64(bytes) {
+    let binary = '';
+    const CHUNK = 0x8000;
+    for (let i = 0; i < bytes.length; i += CHUNK) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+    }
+    return btoa(binary);
+}

package/dist/channel-placeholder.js

@@ -0,0 +1,5 @@
+// The stand-in for the channel key in the static wrapper files
+// (src/extension/channel.ts swaps the real key in when it registers
+// them). Its own module so the harness, which loads a wrapper under
+// Node, can call the registry gate with it.
+export const CHANNEL_KEY_PLACEHOLDER = '__SM_KEY__';

package/dist/collection-scan.js

@@ -0,0 +1,17 @@
+// Shared scan primitives used by every collection-kind scanner.
+//
+// Lives in its own module because both `directories.ts` (local
+// directory / manifest scanner) and `github-provider.ts` (Contents-API
+// scanner) need them — importing them directly between the two
+// scanner modules would create a runtime ES-module cycle, since
+// `directories.ts` also imports the github dispatcher from
+// `github-provider.ts`.
+// How many subdirectory levels below the root a scanner walks before
+// stopping. Applies to local directory collections AND GitHub directory
+// collections (the cost model is different but the cap keeps both
+// bounded).
+export const MAX_SCAN_DEPTH = 2;
+// The one and only filename SourceMonkey recognises as a userscript
+// manifest. Lives here (not in `directories.ts`) so `github-provider.ts`
+// can import it without forming a runtime cycle with `directories.ts`.
+export const MANIFEST_FILENAME = 'script_manifest.json';

package/dist/collections.html

@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>SourceMonkey | Collections</title>
+    <link rel="stylesheet" href="styles.css" />
+    <style>
+      /* Full-bleed body; the header bar and `.page-body` (styles.css)
+         each centre their own contents on the shared `--page-width`
+         column. */
+      body { font: 14px system-ui, sans-serif; margin: 0; color: #222; --page-width: 720px; }
+      /* Grid layout so a long display name that needs to wrap stays
+         inside the right-hand column instead of dropping back to the
+         row's left edge. Column 1 sizes to the bubble; column 2 takes
+         the remaining space and is where the name wraps. */
+      h2 {
+        font-size: 1em;
+        margin: 0;
+        word-break: break-all;
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        column-gap: 0.5em;
+        align-items: baseline;
+      }
+      /* `.collection-type-bubble` + colored `.bubble-*` variants +
+         `.collection-display-name` typography are in styles.css (the
+         cross-page shared stylesheet). */
+      /* Height, surface, hover and press are shared across the two
+         pages (styles.css); this is just this page's roomier
+         horizontal padding on text buttons. */
+      button { font: inherit; padding: 0 11px; cursor: pointer; }
+      input[type="text"] { font: inherit; padding: 4px 7px; }
+      .placeholder { color: #666; }
+      .add-form { display: flex; gap: 0.5em; margin-bottom: 1em; align-items: center; }
+      .add-form input[type="text"] { flex: 1 1 auto; }
+      .collection { border: 1px solid #ddd; border-radius: 6px; padding: 11px 14px; margin-bottom: 11px; }
+      .collection-header { display: flex; justify-content: flex-start; align-items: center; gap: 0.6em; margin-bottom: 7px; }
+      .collection-header h2 { flex: 1 1 auto; min-width: 0; }
+      .collection-toggle { flex: 0 0 auto; }
+      .collection-buttons { display: flex; gap: 0.4em; flex: 0 0 auto; margin-left: auto; align-items: center; }
+      /* The ⋯ menus (src/extension/more-menu.ts): square, like the
+         glyph buttons beside them. */
+      button.more-menu { width: var(--icon-btn-size); padding: 0; font-size: 16px; }
+      button.more-menu[aria-expanded="true"] { background: var(--btn-bg-hover); }
+      /* Up/Down arrow buttons. They wear `.icon-btn` like the rest of
+         the header row, so the box and the disabled state come from
+         styles.css; the class is what the reorder code and the tests
+         address them by. */
+      /* Whole-px vertical metrics on this page, and `separate` borders rather
+         than `collapse` (a collapsed border is split half into each adjacent
+         cell, landing rows on half pixels) — see docs/architecture.md,
+         "Extension-page styling". */
+      /* A can inside a script row is a row control, not a control in a
+         button row: at the shared 26px it makes its row 7px taller than
+         the rows around it, and only SOME rows have one (a `missing`
+         row, a local copy), so the table comes out ragged. Shrinking
+         the pair here puts it back inside the row's own line box —
+         this is the escape hatch styles.css describes. */
+      .script-table { --icon-btn-size: 18px; --icon-btn-glyph: 14px; }
+      .script-table { width: 100%; border-collapse: separate; border-spacing: 0; }
+      .script-table th, .script-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
+      .script-table th { font-weight: 600; color: #555; font-size: 0.9em; line-height: 16px; }
+      .script-table tbody tr:last-child td { border-bottom-color: transparent; }
+      .script-table td.size-cell, .script-table td.status-cell, .script-table td.toggle-cell, .script-table td.action-cell, .script-table td.scheme-cell { white-space: nowrap; width: 1%; }
+      /* Container-collection action column: the per-row remove button.
+         Right-aligned so the trash icon hugs the table edge regardless
+         of how narrow / wide the name column wants to be. */
+      .script-table td.action-cell { text-align: right; padding-left: 3px; }
+      .script-table th:last-child { width: 1%; }
+      .script-table td.toggle-cell { padding-right: 3px; }
+      /* When a collection is off, its whole section dims; when a script is off, just the row dims.
+         The toggle itself stays at full opacity so users can flip it back. */
+      .collection.disabled .collection-header h2,
+      .script-table tr.disabled td:not(.toggle-cell) { opacity: 0.45; }
+      .toggle { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
+      .toggle input[type="checkbox"] { cursor: pointer; margin: 0; }
+      .toggle-disabled { cursor: not-allowed; opacity: 0.5; }
+      .toggle-disabled input[type="checkbox"] { cursor: not-allowed; }
+      /* Bulk-toggle button in the script-table header. Sized like the
+         per-row checkbox so the column lines up. */
+      /* vertical-align keeps the button's place in the header line box
+         independent of its text: baseline-aligned, an empty inline-flex
+         button sits a fraction lower and resizes the header row, which
+         shifts every collection below. */
+      .bulk-toggle { vertical-align: middle; width: 14px; height: 14px; padding: 0; font: inherit; font-weight: 700; line-height: 1; border: 1px solid #888; border-radius: 2px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+      .bulk-toggle:hover:not(:disabled) { background: #f0f0f0; }
+      .bulk-toggle:disabled { cursor: not-allowed; opacity: 0.5; }
+      .script-table th.toggle-cell { white-space: nowrap; width: 1%; padding-right: 3px; }
+      /* Column of site favicons to the left of the name link. One
+         16px icon per distinct site the script targets (see
+         `MAX_SITE_ICONS`), side by side with a 2px gap. Each icon is
+         a clickable <a class="site-icon-inner"> when its @match yields
+         a usable origin; a script with no site holds one inert
+         <span class="site-icon-inner">. Every inner starts as a globe
+         placeholder that is swapped for the real favicon on load.
+         The slot is as wide as this table's widest row needs
+         (`--icon-cols`, set per table by collections.ts), so the
+         names in one collection share a straight left edge. */
+      .script-table { --icon-cols: 1; --icon-gap: 2px; }
+      .site-icon {
+        display: inline-flex;
+        gap: var(--icon-gap);
+        width: calc(var(--icon-cols) * 16px + (var(--icon-cols) - 1) * var(--icon-gap));
+        height: 16px;
+        margin-right: 0.4em;
+        vertical-align: text-bottom;
+        flex: 0 0 auto;
+        /* text-indent inherits, and this is a block container: reset it
+           so the name cell's negative hanging indent can't shift the
+           icon if a future inner is ever inline rather than
+           display:block. */
+        text-indent: 0;
+      }
+      /* The icons inside the slot (`.site-icon-inner`, the globe, the
+         <img>) are styled once for every page in styles.css. */
+      /* Script names come from the file/URL and can be arbitrarily long
+         (web-installed scripts often carry a whole marketing title).
+         Let them wrap rather than force the table wider than its
+         `.collection` card, which pushed Size / Status outside the box.
+         `<wbr>` markers after each `/` (appendWithSlashBreaks) give
+         preferred break points before a mid-word break is needed.
+         The hanging indent keeps continuation lines aligned with the
+         first line's text instead of tucking under the favicon. */
+      .script-table td.name-cell {
+        overflow-wrap: anywhere;
+        word-break: normal;
+        /* `--icon-w` is the slot's width incl. its right margin; the
+           hanging indent must track the icon column so wrapped lines
+           still align under the first line's text. */
+        --icon-w: calc(var(--icon-cols) * 16px + (var(--icon-cols) - 1) * var(--icon-gap) + 0.4em);
+        padding-left: calc(8px + var(--icon-w));
+        text-indent: calc(-1 * var(--icon-w));
+      }
+      .status-ok { color: #166534; }
+      .status-invalid, .status-rejected, .status-error { color: #b00; }
+      .status-warning, .status-outdated { color: #b67200; }
+      .status-refresh-failed { color: #c2410c; }
+      /* The Status cell content is a link to that script's Log tab.
+         Keep the link looking like status text (not blue underlined). */
+      .status-cell a { text-decoration: none; color: inherit; cursor: pointer; }
+      .status-cell a:hover { text-decoration: underline; }
+      .empty { color: #666; font-style: italic; }
+      .error { color: #b00; }
+      /* A collection's failure line: a hint can start a line of its own,
+         and the address it couldn't read is a link. */
+      p.error[data-message-kind] { white-space: pre-line; }
+      p.error[data-message-kind] a { color: inherit; }
+      /* The banner box itself is in styles.css (shared with the
+         viewer). These are the collections-page-only parts: a roomier
+         gap before the collection list, and the raw-API-error line in the
+         "Allow User Scripts" banner. */
+      .banner { margin-bottom: 1em; }
+      .banner.banner-error .banner-detail { color: #b71c1c; }
+      .banner .banner-detail { color: #92400e; font-size: 0.85em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-top: 0.5em; }
+      /* Inline busy spinner for individual controls (toggles, add form).
+         `@keyframes sm-spin` is in styles.css, shared with the dialog
+         spinner and the glyph buttons' spin state. */
+      .busy-spinner { display: inline-block; width: 12px; height: 12px; margin-left: 6px; border: 2px solid #ccc; border-top-color: #555; border-radius: 50%; animation: sm-spin 0.7s linear infinite; vertical-align: middle; box-sizing: border-box; }
+      /* Bulk-toggle button shows its spinner in place of the +/- glyph. */
+      .bulk-toggle.busy { position: relative; color: transparent; }
+      .bulk-toggle.busy::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; border: 2px solid #ccc; border-top-color: #555; border-radius: 50%; animation: sm-spin 0.7s linear infinite; box-sizing: border-box; }
+      /* A toggle's spinner is overlaid on its own checkbox rather than
+         appended beside it. The script table's toggle cell sizes to its
+         content, so an in-flow spinner widened that column and shifted
+         every row in the collection a few pixels right (and back) for as
+         long as the write was in flight. */
+      .toggle .busy-spinner { position: absolute; inset: 0; width: auto; height: auto; margin: 0; }
+      .toggle:has(.busy-spinner) input[type="checkbox"] { opacity: 0.3; }
+      /* While a collection is being removed, dim the whole section and block further clicks. */
+      .collection.removing { opacity: 0.5; pointer-events: none; }
+      /* Highlight rows that changed during a refresh. The color
+         persists until the next refresh clears it, so the
+         user can leave the page and come back without losing the
+         what-changed signal.
+
+         Two independent signals: `row-added` / `row-updated` say what
+         happened, `row-failed` says how it came out. `row-failed` is
+         listed after both so it wins the wash — a script that arrived
+         broken is red, and keeps its "New" chip to say it is also new.
+         (`row-removed` sits last and never shares a row with any of
+         them.) */
+      .script-table tr.row-added   td { background: #cdebcf; }
+      .script-table tr.row-updated td { background: #d7e7f7; }
+      .script-table tr.row-failed  td { background: #f5c2c7; }
+      .script-table tr.row-removed td { background: #f0f0ef; }
+      /* The accent bar rides on the row's first cell as an inset
+         shadow, so it costs no column width and can't shift the table. */
+      .script-table tr.row-added   td:first-child { box-shadow: inset 3px 0 0 #166534; }
+      .script-table tr.row-updated td:first-child { box-shadow: inset 3px 0 0 #2b6cb0; }
+      .script-table tr.row-failed  td:first-child { box-shadow: inset 3px 0 0 #b00; }
+      .script-table tr.row-removed td:first-child { box-shadow: inset 3px 0 0 #9ca3af; }
+      /* What a refresh did to the row, said in words as well as colour.
+         New / Updated are pseudo-elements rather than real nodes: their
+         Status cell is rebuilt from stored state on every repaint, which
+         would discard a chip element, while the class lives on the `<tr>`
+         the repaint preserves. A tombstone's `Removed` chip IS a real
+         element (`.change-chip`) — nothing repaints that row, and there
+         the chip is the whole status, so it has to be selectable and
+         readable by a screen reader. One rule for the three, so they
+         can't drift apart. */
+      .script-table tr.row-added   td.status-cell::after,
+      .script-table tr.row-updated td.status-cell::after,
+      .script-table .change-chip {
+        display: inline-block;
+        margin-left: 6px;
+        padding: 0 6px;
+        border-radius: 8px;
+        font-size: 10px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        color: #fff;
+        vertical-align: 1px;
+      }
+      .script-table tr.row-added   td.status-cell::after { content: 'New'; background: #166534; }
+      .script-table tr.row-updated td.status-cell::after { content: 'Updated'; background: #2b6cb0; }
+      /* A dropped row has no status of its own, so its chip stands
+         alone in the cell rather than beside a status word. */
+      .script-table .chip-removed { background: #9ca3af; margin-left: 0; }
+      /* Tombstone: the ghost of a script this refresh dropped. Struck
+         through and greyed, with nothing on it to click — the checkbox
+         is disabled and the favicon is de-linked in `renderTombstoneRow`.
+         Lives in the DOM only: the next refresh clears it and a reload
+         never rebuilds it. */
+      .script-table tr.row-removed td { color: #6b7280; }
+      /* The strike is drawn on the name and size themselves, not on the
+         cells: a decoration inherited by a cell is painted straight
+         across the favicon (an atomic inline the line can't skip), and
+         the chip and checkbox have nothing to strike through. */
+      .script-table tr.row-removed .tombstone-name,
+      .script-table tr.row-removed td.size-cell { text-decoration: line-through; }
+      /* Sizes line up on their units. */
+      .script-table .size-cell { text-align: right; font-variant-numeric: tabular-nums; }
+      /* The favicon stays — it's what the eye finds the row by — but
+         muted, so a dead row never draws attention ahead of a live one. */
+      .script-table tr.row-removed .site-icon { filter: grayscale(1); opacity: 0.55; }
+      .script-table tr.row-removed td.toggle-cell input { opacity: 0.5; }
+      /* The live rows' toggle box without the `.toggle` class the bulk
+         census counts — see `renderTombstoneRow`. Same box AND the same
+         zeroed checkbox margin: the UA's default margin on an
+         `<input type="checkbox">` is what `.toggle` above cancels, and
+         without cancelling it here too the ghost's box sits a few pixels
+         down and right of every other row's. */
+      .toggle-ghost { display: inline-flex; align-items: center; }
+      .toggle-ghost input[type="checkbox"] { margin: 0; }
+      .script-table tr.row-removed .scheme-chip { opacity: 0.55; }
+    </style>
+  </head>
+  <body>
+    <!-- Shared glyph sprite: the one copy of every inline SVG glyph in the
+     extension. scripts/build.mjs inlines it into each page wherever the
+     page writes an `#include glyph-sprite` marker comment. (Spelling
+     that marker out here would be nice, but its own closing `--` plus
+     `>` would end THIS comment and spill the rest onto the page.)
+
+     One source of truth: the markup used to be copy-pasted into each
+     page's HTML, which is how two pages end up with glyphs that have
+     quietly drifted apart.
+
+     Each symbol is defined once per page and referenced by a `use`
+     element, so a hundred rows share one copy of the path data instead
+     of inlining it per row.
+
+       #sm-globe      favicon placeholder until a site icon loads, and
+                      the permanent icon for a script with no resolvable
+                      origin (src/extension/site-icon.ts; styling on
+                      `.site-icon-globe`).
+       #sm-trash      remove SourceMonkey's record of a script.
+       #sm-trash-file delete the script FILE from disk — the same can,
+                      badged with a disk. Both painted by
+                      src/extension/delete-icon.ts, which explains the pair.
+                      The can is drawn ~19% smaller than #sm-trash — its
+                      own inner scale(.9) inside the normalizing
+                      wrapper's scale(.9) — so the badge has a corner to
+                      sit in without swallowing the can. Deliberate: the two appear in the same
+                      column in the "Other versions" panel, and the
+                      badged one has to stay a can at 15px.
+       #sm-copy       the viewer's "copy this to the clipboard" button,
+       #sm-check      and the checkmark it flashes on success
+                      (src/extension/copy-button.ts).
+       #sm-refresh    refetch a collection, a script, or one row of the
+                      "Other versions" table. Its busy state is this
+                      same arc spinning (`.btn-glyph.spinning`), so the
+                      button never changes shape mid-refresh.
+       #sm-gear       open a collection's rename / options dialog.
+       #sm-open       open a location in a new tab (the collection
+                      dialog's button beside its location box).
+       #sm-swap       the compare page's "swap the two sides" button:
+                      two arrows, one each way, the same width so their
+                      ends line up.
+
+     Colour comes from `currentColor`, so a button's own `color` (and
+     its hover) drives the glyph.
+
+     OPTICAL SIZING — read before editing a path or a stroke width.
+     Identical 16px boxes do not make icons look the same size; the ink
+     inside them has to match too. As drawn, these ranged from 18 to
+     23.3 units of 24, and the gear read ~22% larger than the arrow. So
+     a glyph that needed resizing is wrapped in
+       <g transform="translate(12 12) scale(k) translate(-12 -12)">
+     and its `stroke-width` is DIVIDED by the same k. Consequences:
+     - The number in the file is not the number that renders. Every
+       glyph here strokes at 1.75 units once its wrapper is applied
+       (1.9/... , 1.95/.9, 1.667*1.05, 1.825*.959). Change a stroke
+       width and you break that unless you change k with it.
+     - #sm-refresh translates by -13, not -12: Feather's rotate-cw is
+       drawn a unit right of centre, and this puts it back. It is not
+       a typo.
+     - #sm-copy and #sm-check are deliberately outside this: they
+       stroke at 2.0 in the 14px copy button. That button sits beside
+       the 1.75 set only in the collection dialog, next to #sm-open,
+       where the smaller box evens out the heavier stroke. -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+<symbol id="sm-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></symbol>
+<symbol id="sm-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6h17"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path><path d="M10 10.5v7"></path><path d="M14 10.5v7"></path></symbol>
+<symbol id="sm-trash-file" viewBox="0 0 24 24"><g transform="translate(12 12) scale(.9) translate(-12 -12)"><mask id="sm-trash-file-cut" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="#fff"></rect><circle cx="19.6" cy="19.6" r="5.2" fill="#000"></circle></mask><g mask="url(#sm-trash-file-cut)" transform="translate(-.7 -1.5) scale(.9)" fill="none" stroke="currentColor" stroke-width="2.167" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6h17"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path><path d="M10 10.5v7"></path><path d="M14 10.5v7"></path></g><g transform="translate(14.53 14.36) scale(.422)" fill="none" stroke="currentColor" stroke-width="4.611" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5"></path></g></g></symbol>
+<symbol id="sm-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></symbol>
+<symbol id="sm-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></symbol>
+<symbol id="sm-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.667" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(12 12) scale(1.05) translate(-13 -12)"><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path><polyline points="23 4 23 10 17 10"></polyline></g></symbol>
+<symbol id="sm-swap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5h18"></path><path d="M16.5 3l4.5 4.5-4.5 4.5"></path><path d="M21 16.5H3"></path><path d="M7.5 12L3 16.5 7.5 21"></path></symbol>
+<symbol id="sm-gear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.825" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(12 12) scale(.959) translate(-12 -12)"><circle cx="12" cy="12" r="3.1"></circle><path d="M19.4 14.6a1.6 1.6 0 0 0 .32 1.77l.06.06a1.95 1.95 0 1 1-2.76 2.76l-.06-.06a1.6 1.6 0 0 0-1.77-.32 1.6 1.6 0 0 0-.97 1.47V21a1.95 1.95 0 1 1-3.9 0v-.1a1.6 1.6 0 0 0-1.05-1.47 1.6 1.6 0 0 0-1.77.32l-.06.06a1.95 1.95 0 1 1-2.76-2.76l.06-.06a1.6 1.6 0 0 0 .32-1.77 1.6 1.6 0 0 0-1.47-.97H3a1.95 1.95 0 1 1 0-3.9h.1a1.6 1.6 0 0 0 1.47-1.05 1.6 1.6 0 0 0-.32-1.77l-.06-.06a1.95 1.95 0 1 1 2.76-2.76l.06.06a1.6 1.6 0 0 0 1.77.32H9a1.6 1.6 0 0 0 .97-1.47V3a1.95 1.95 0 1 1 3.9 0v.1a1.6 1.6 0 0 0 .97 1.47 1.6 1.6 0 0 0 1.77-.32l.06-.06a1.95 1.95 0 1 1 2.76 2.76l-.06.06a1.6 1.6 0 0 0-.32 1.77V9a1.6 1.6 0 0 0 1.47.97H21a1.95 1.95 0 1 1 0 3.9h-.1a1.6 1.6 0 0 0-1.47.97z"></path></g></symbol>
+<symbol id="sm-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><path d="M10 14L21 3"></path></symbol>
+</svg>
+    <header class="page-header">
+      <div class="page-header-inner">
+        <img class="page-icon" src="icons/icon-48.png" alt="" />
+        <h1><span class="brand">SourceMonkey |</span> Collections</h1>
+        <div class="page-header-actions">
+          <button id="open-options" type="button" title="Open the options page">Options</button>
+          <!-- The label ships in the markup so the button is never blank:
+               collections.js is a deferred module, and `setGlyphButton`
+               (src/extension/collections.ts) replaces this text with the same word
+               beside a glyph once it runs. -->
+          <button id="refresh-all" type="button">Refresh All</button>
+        </div>
+      </div>
+    </header>
+
+    <div class="page-body">
+      <div id="banner-slot"></div>
+
+      <form id="add-form" class="add-form">
+        <input id="add-path" type="text" placeholder="A .user.js file, a directory, a script_manifest.json, or a name for a new collection" autocomplete="off" spellcheck="false" />
+        <button type="submit">Add</button>
+      </form>
+      <p id="add-error" class="error" hidden></p>
+
+      <div id="collections"></div>
+    </div>
+
+    <script src="extension/collections.js" type="module"></script>
+  </body>
+</html>