@avivbenhamo/polly-kit 0.1.0 → 0.3.0

package/dist/studio/ui/app.js

@@ -0,0 +1,180 @@
+import { renderEntryDetail, renderEntryRow, renderRecordingList } from './render.js';
+import { StoreError } from '../stores/types.js';
+/**
+ * The page's behaviour, written against `RecordingStore` and nothing else. Under the
+ * Node mount the store is an `HttpStore`; in a browser-only app it is a
+ * `LocalStorageStore`. Nothing below can tell the difference — no branch on which store
+ * it holds, which is why `patchEntry` and `deleteEntry` are on the interface rather than
+ * being assembled here out of `read` and `write`.
+ *
+ * Every mutation re-reads afterwards rather than trusting the local copy: the etag that
+ * the next save depends on comes from the store, never from here.
+ */
+export function mountStudio(root, store) {
+    const recordings = required(root, '#recordings');
+    const entries = required(root, '#entries');
+    const detail = required(root, '#detail');
+    let currentId = null;
+    let current = null;
+    // `.catch(report)` rather than a bare `void`: an unawaited rejection here would be an
+    // unhandled rejection the page never shows, and the user would be left staring at
+    // whatever placeholder markup the page shipped with — see Task 11 review, Finding 1.
+    refreshRecordings().catch(report);
+    async function refreshRecordings() {
+        recordings.innerHTML = renderRecordingList(await store.list());
+    }
+    async function openRecording(id) {
+        // `currentId` moves only once the read has actually succeeded. Setting it before
+        // the `await` would leave a failed open pointing `currentId` at a recording whose
+        // `har`/`etag` were never fetched, while `current` still held the previous one — a
+        // state no other code path expects, and one a subsequent Save could act on.
+        const read = await store.read(id);
+        currentId = id;
+        current = { har: read.har, etag: read.etag };
+        entries.innerHTML = `<ul>${read.har.log.entries.map(renderEntryRow).join('')}</ul>`;
+        detail.innerHTML = '';
+    }
+    /**
+     * `entryId` always arrives as a string, because it came off `dataset`. `e._id` is
+     * whatever the file says — `isHarShaped` (`src/har.ts`) checks only that `log.entries`
+     * is an array — so a HAR with a numeric `_id` renders a row, emits `data-id="12345"`,
+     * and then fails `12345 === '12345'`. Comparing the string forms makes the click
+     * resolve; reporting the miss means the cases that still do not resolve say so instead
+     * of blanking the pane, which is indistinguishable from a dead button.
+     */
+    function openEntry(entryId, order) {
+        const entry = current?.har.log.entries.find((e) => String(e._id) === entryId && e._order === order);
+        if (entry === undefined) {
+            detail.innerHTML = '';
+            report(new Error(`no entry with _id ${entryId} and _order ${order} in this recording`));
+            return;
+        }
+        detail.innerHTML = renderEntryDetail(entry);
+    }
+    async function save(entryId, order) {
+        if (currentId === null || current === null)
+            return;
+        try {
+            // Reading the form back can itself fail — an out-of-range status, say — so it
+            // shares this try/catch rather than running ahead of it unguarded.
+            const patch = readPatch(detail, entryId, order, current.har);
+            await store.patchEntry(currentId, entryId, order, current.etag, patch);
+            await openRecording(currentId);
+            openEntry(entryId, order);
+        }
+        catch (err) {
+            report(err);
+        }
+    }
+    async function remove(entryId, order) {
+        if (currentId === null || current === null)
+            return;
+        try {
+            await store.deleteEntry(currentId, entryId, order, current.etag);
+            await openRecording(currentId);
+        }
+        catch (err) {
+            report(err);
+        }
+    }
+    function report(err) {
+        const message = err instanceof StoreError && err.code === 'conflict'
+            ? 'the recording changed underneath — reload and retry'
+            : err instanceof Error
+                ? err.message
+                : String(err);
+        // `document.createElement` would reach past `root` for a document `mountStudio`
+        // was never given — harmless today since the Node mount and the browser mount
+        // both happen to run in one document, but `root` exists precisely so this
+        // function need not assume that. `detail`'s own document is always the right one.
+        const banner = detail.ownerDocument.createElement('p');
+        banner.className = 'problem';
+        banner.textContent = message;
+        detail.prepend(banner);
+    }
+    root.addEventListener('click', (event) => {
+        const target = event.target?.closest('button');
+        if (target === null || target === undefined)
+            return;
+        if (target.classList.contains('recording')) {
+            openRecording(target.dataset['id']).catch(report);
+            return;
+        }
+        if (target.classList.contains('entry')) {
+            // The one synchronous call in this listener, and so the one that `.catch(report)`
+            // cannot cover. Without this it was also the only unguarded one: a throw out of
+            // `renderEntryDetail` became an uncaught exception with no banner and a detail
+            // pane still showing the previously opened entry — the reader has no way to tell
+            // the click did nothing from the click having worked. `renderEntryDetail` now
+            // guards itself per entry (`src/ui/render.ts`), which makes this the second line
+            // of defence rather than the only one; it stays because "every failure in this
+            // listener reports" should not depend on which function happens to be total.
+            try {
+                openEntry(target.dataset['id'], Number(target.dataset['order']));
+            }
+            catch (err) {
+                report(err);
+            }
+            return;
+        }
+        const section = target.closest('.detail');
+        if (section === null)
+            return;
+        const entryId = section.dataset['id'];
+        const order = Number(section.dataset['order']);
+        if (target.getAttribute('name') === 'save')
+            void save(entryId, order);
+        if (target.getAttribute('name') === 'delete')
+            void remove(entryId, order);
+    });
+}
+/** `root.querySelector` returns `Element | null`; this is the "or throw" version. */
+function required(root, selector) {
+    const el = root.querySelector(selector);
+    if (el === null) {
+        throw new Error(`polly-studio: mountStudio could not find "${selector}" in the given root`);
+    }
+    return el;
+}
+/**
+ * Reads the form back into a patch. `bodyText` is omitted for a binary entry — there is
+ * no textarea for one — so a save on a binary body changes status and headers and
+ * leaves the recorded bytes alone.
+ *
+ * A cleared `status` input reports `.value === ''`, not `undefined` — `Number('')` is
+ * `0`, and nothing downstream (`applyResponsePatch` in `edit.ts`) range checks it, so an
+ * unguarded read would silently persist `response.status = 0`. `''` is treated as "no
+ * status change requested", the same as the field being absent; a value that parses but
+ * falls outside 100–599 is treated as a bad edit and reported the way a rejected save
+ * already is, through `report`, via the throw `save` catches.
+ */
+function readPatch(root, entryId, order, har) {
+    const value = (name) => root.querySelector(`[name="${name}"]`)?.value;
+    const headers = [];
+    for (let index = 0;; index++) {
+        const name = value(`headerName${index}`);
+        if (name === undefined)
+            break;
+        const existing = har.log.entries
+            // String-compared for the same reason as `openEntry`: `entryId` came off `dataset`.
+            .find((e) => String(e._id) === entryId && e._order === order)
+            ?.response.headers[index];
+        headers.push({
+            ...(existing?._fromType === 'array' ? { _fromType: 'array' } : {}),
+            name,
+            value: value(`headerValue${index}`) ?? '',
+        });
+    }
+    const rawStatus = value('status');
+    const status = rawStatus === undefined || rawStatus === '' ? undefined : Number(rawStatus);
+    if (status !== undefined && (!Number.isFinite(status) || status < 100 || status > 599)) {
+        throw new Error(`status must be a number between 100 and 599, got "${rawStatus}"`);
+    }
+    const bodyText = value('bodyText');
+    return {
+        ...(status === undefined ? {} : { status }),
+        ...(value('statusText') === undefined ? {} : { statusText: value('statusText') }),
+        headers,
+        ...(bodyText === undefined ? {} : { bodyText }),
+    };
+}

package/dist/studio/ui/client.d.ts

@@ -0,0 +1,2 @@
+/** The entry point the served page imports. */
+export declare function start(basePath: string): void;

package/dist/studio/ui/client.js

@@ -0,0 +1,6 @@
+import { mountStudio } from './app.js';
+import { HttpStore } from '../stores/http-store.js';
+/** The entry point the served page imports. */
+export function start(basePath) {
+    mountStudio(document, new HttpStore(basePath));
+}

package/dist/studio/ui/page.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The body, shared with the browser-only mount in Task 12 so the two cannot drift into
+ * two different editors.
+ */
+export declare const STUDIO_MARKUP = "\n<div class=\"polly-studio\">\n<header class=\"ps-bar\">\n  <div class=\"ps-brand\">\n    <h1>polly-studio</h1>\n    <p class=\"ps-tagline\">Change what a recorded request replies with, then save it back to the HAR.</p>\n  </div>\n  <p class=\"warn banner\">Polly's <code>keepUnusedRequests</code> defaults to <code>false</code>:\n  the next record run deletes every entry it did not exercise, including the ones you edit here.\n  Set <code>persisterOptions.keepUnusedRequests: true</code> before editing.</p>\n</header>\n<main class=\"ps-panes\">\n  <section class=\"ps-pane ps-pane--list\">\n    <h2 class=\"ps-pane-title\">Recordings</h2>\n    <nav id=\"recordings\" class=\"ps-scroll\">Loading\u2026</nav>\n  </section>\n  <section class=\"ps-pane ps-pane--list\">\n    <h2 class=\"ps-pane-title\">Requests</h2>\n    <div id=\"entries\" class=\"ps-scroll\"></div>\n  </section>\n  <section class=\"ps-pane ps-pane--editor\">\n    <h2 class=\"ps-pane-title\">Recorded exchange</h2>\n    <div id=\"detail\" class=\"ps-scroll\"></div>\n  </section>\n</main>\n</div>";
+/**
+ * The HTML shell.
+ *
+ * `clientScript` is the bundled `client.ts`, inlined rather than linked. The handler has
+ * no way to know what URL a browser would have to request for it: mounted with
+ * `app.use('/__polly', ...)`, Express strips the prefix before the handler sees the
+ * request, so nothing on the server side still knows the page is at `/__polly`.
+ *
+ * `location.pathname` does know, and it is evaluated in the browser, so the API base is
+ * derived there. The same expression is correct when the handler is mounted at the root,
+ * behind a prefix, or reached with a trailing slash.
+ *
+ * `clientScript` is split on a literal `</script`, not because a recording can reach
+ * this string — it can't; this is build-time bundle text, not runtime HAR data — but
+ * because Task 12's browser mount imports `STUDIO_MARKUP`/`STUDIO_STYLE` from this same
+ * file, which means `page.ts` itself can end up bundled into the very `clientScript`
+ * this function inlines. HTML's script-end-tag detection is lexical, not JS-aware, so an
+ * un-split `</script` anywhere in that text — in code, a string, or a comment — would
+ * truncate the tag regardless of a bundler's own escaping. The replacement is lossless:
+ * `<\/script` is identical JavaScript to `</script`, just not a tag boundary to the HTML
+ * parser.
+ *
+ * The trailer's regex is written `/\\/+$/` — doubled backslash — and must stay that way.
+ * It sits inside a template literal, so the literal consumes one backslash and the page
+ * receives `/\/+$/`, the escaped forward slash the browser needs. Written the way it
+ * reads as code, `/\/+$/`, the emitted text is `//+$/`: `//` opens a line comment, the
+ * closing paren is swallowed, and the browser reports `SyntaxError: Unexpected end of
+ * input` before anything runs. That is the bug this doubling fixes, and it was
+ * introduced by checking the expression as code rather than as template text. The
+ * `vm.Script` test in `test/render.test.ts` pins the emitted form.
+ */
+export declare function renderPage(clientScript: string): string;
+/**
+ * Rules that only make sense when this package owns the whole document, which is true of
+ * the served page and false of `mountPollyStudio` (`src/browser.ts`), where the same
+ * `STUDIO_STYLE` is injected into somebody else's app. Splitting them is what lets
+ * `STUDIO_STYLE` below be entirely scoped: a host page keeps its own body background,
+ * type and box-sizing, and the editor still fills the viewport when it is the page.
+ */
+export declare const PAGE_STYLE = "\nhtml { color-scheme: light; }\nhtml, body { height: 100%; }\nbody { margin: 0; background: #eaeef5; }\n";
+/**
+ * Every selector is scoped under `.polly-studio`, the wrapper `STUDIO_MARKUP` opens with.
+ * `src/browser.ts` injects this stylesheet with `innerHTML` into an arbitrary element of
+ * a host application, where it is document-global regardless — the previous `:root`/`body`
+ * rules restyled the host app's own type and margins as a side effect of mounting an
+ * editor. Scoping is the only thing preventing that, so new rules need the prefix too.
+ */
+export declare const STUDIO_STYLE = "\n.polly-studio, .polly-studio *, .polly-studio *::before, .polly-studio *::after { box-sizing: border-box; }\n.polly-studio {\n  --ps-paper: #eaeef5;\n  --ps-surface: #ffffff;\n  --ps-sunken: #f1f5fb;\n  --ps-ink: #111722;\n  --ps-ink-soft: #4d5867;\n  --ps-ink-faint: #838e9d;\n  --ps-line: #dce3ed;\n  --ps-line-strong: #c3ccda;\n  --ps-accent: #3d2fbd;\n  --ps-accent-deep: #2e2298;\n  --ps-accent-line: #c8c2f0;\n  --ps-accent-soft: #eeecfb;\n  --ps-ok: #0a6b3d; --ps-ok-line: #b6ddc6; --ps-ok-soft: #e8f4ed;\n  --ps-warn: #875700; --ps-warn-line: #ecd3a3; --ps-warn-soft: #fbf2e1;\n  --ps-bad: #b3261e; --ps-bad-line: #edbdb9; --ps-bad-soft: #fceceb;\n  --ps-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n\n  color-scheme: light;\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 15px;\n  line-height: 1.5;\n  color: var(--ps-ink);\n  background: var(--ps-paper);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 34rem;\n}\n\n/* Title bar ------------------------------------------------------------ */\n.polly-studio .ps-bar {\n  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.75rem;\n  padding: .8rem 1.25rem;\n  background: var(--ps-surface);\n  border-bottom: 1px solid var(--ps-line);\n}\n.polly-studio .ps-brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .75rem; }\n.polly-studio h1 { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; }\n.polly-studio .ps-tagline { margin: 0; font-size: .8125rem; color: var(--ps-ink-soft); }\n.polly-studio .banner {\n  flex: 1 1 26rem; min-width: 16rem; margin: 0;\n  padding: .45rem .7rem;\n  font-size: .78rem; line-height: 1.45;\n  background: var(--ps-warn-soft);\n  border: 1px solid var(--ps-warn-line); border-left-width: 3px;\n  border-radius: 0 7px 7px 0;\n}\n.polly-studio code {\n  font-family: var(--ps-mono); font-size: .92em;\n  background: rgba(17,23,34,.05); border-radius: 4px; padding: 0 .22em;\n}\n\n/* Panes ---------------------------------------------------------------- */\n.polly-studio .ps-panes {\n  flex: 1; min-height: 0;\n  display: grid; gap: .9rem;\n  grid-template-columns: 17rem 24rem minmax(0, 1fr);\n  padding: .9rem 1.25rem 1.25rem;\n}\n.polly-studio .ps-pane {\n  display: flex; flex-direction: column; min-height: 0;\n  border: 1px solid var(--ps-line); border-radius: 12px;\n  background: var(--ps-surface);\n  overflow: hidden;\n}\n/* The two browsers read as one surface you pick from; the editor reads as the page you\n   work on. Same border, different floor \u2014 not three identical cards. */\n.polly-studio .ps-pane--list { background: var(--ps-sunken); }\n.polly-studio .ps-pane-title {\n  margin: 0; padding: .5rem .75rem;\n  font-size: .8125rem; font-weight: 600; color: var(--ps-ink-soft);\n  background: var(--ps-surface);\n  border-bottom: 1px solid var(--ps-line);\n}\n.polly-studio .ps-pane--editor .ps-pane-title { box-shadow: inset 3px 0 0 var(--ps-accent); }\n.polly-studio .ps-scroll { flex: 1; min-height: 0; overflow: auto; padding: .5rem; }\n.polly-studio .ps-pane--editor .ps-scroll { padding: .9rem 1rem 1.25rem; }\n\n/* Recording list ------------------------------------------------------- */\n.polly-studio ul { list-style: none; margin: 0; padding: 0; }\n.polly-studio .recordings, .polly-studio #entries ul { display: grid; gap: .3rem; }\n/* Each row is its own bordered card rather than a hover-only highlight: a recorded URL\n   wraps to three or four lines often enough that without one, two rows read as one. */\n.polly-studio button.recording, .polly-studio button.entry {\n  width: 100%; text-align: left; font: inherit;\n  color: var(--ps-ink); background: var(--ps-surface);\n  border: 1px solid var(--ps-line); border-radius: 8px;\n  padding: .4rem .5rem; cursor: pointer;\n  transition: background-color .12s ease, border-color .12s ease;\n}\n.polly-studio button.recording:hover, .polly-studio button.entry:hover {\n  border-color: var(--ps-line-strong);\n}\n/* :focus, not :focus-visible \u2014 a click selects, and the selection has to be visible\n   whether it came from the mouse or the keyboard. app.ts keeps no selected state. */\n.polly-studio button.recording:focus, .polly-studio button.entry:focus {\n  outline: none; background: var(--ps-accent-soft); border-color: var(--ps-accent-line);\n}\n.polly-studio button.recording:focus-visible, .polly-studio button.entry:focus-visible {\n  outline: 2px solid var(--ps-accent); outline-offset: 1px;\n}\n.polly-studio button.recording { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; }\n.polly-studio .ps-rec-name { font-family: var(--ps-mono); font-size: .8125rem; overflow-wrap: anywhere; }\n.polly-studio .count {\n  font-family: var(--ps-mono); font-size: .6875rem; color: var(--ps-ink-soft);\n  background: var(--ps-paper); border: 1px solid var(--ps-line);\n  border-radius: 999px; padding: 0 .42rem;\n}\n.polly-studio .ps-rec-note { margin: .1rem 0 .3rem .5rem; font-size: .75rem; line-height: 1.4; }\n\n/* Request list --------------------------------------------------------- */\n.polly-studio button.entry {\n  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;\n  align-items: baseline; gap: .1rem .5rem;\n}\n.polly-studio .method {\n  font-family: var(--ps-mono); font-size: .6875rem; font-weight: 700;\n  letter-spacing: .02em; color: var(--ps-ink-soft); min-width: 2.6rem;\n}\n.polly-studio .status {\n  font-family: var(--ps-mono); font-size: .6875rem; font-weight: 700;\n  border: 1px solid; border-radius: 5px; padding: 0 .3rem;\n}\n.polly-studio .status.s2 { color: var(--ps-ok); background: var(--ps-ok-soft); border-color: var(--ps-ok-line); }\n.polly-studio .status.s3 { color: var(--ps-warn); background: var(--ps-warn-soft); border-color: var(--ps-warn-line); }\n.polly-studio .status.s4, .polly-studio .status.s5 { color: var(--ps-bad); background: var(--ps-bad-soft); border-color: var(--ps-bad-line); }\n.polly-studio .url { font-family: var(--ps-mono); font-size: .78rem; overflow-wrap: anywhere; }\n.polly-studio .order { font-family: var(--ps-mono); font-size: .6875rem; color: var(--ps-ink-faint); }\n\n/* Detail --------------------------------------------------------------- */\n.polly-studio .detail { display: grid; gap: .85rem; }\n.polly-studio .ps-block {\n  border: 1px solid var(--ps-line); border-radius: 10px;\n  padding: .85rem .95rem 1rem;\n}\n.polly-studio .ps-block--request { background: var(--ps-sunken); }\n.polly-studio .detail h2 {\n  margin: 0 0 .45rem; font-size: .9375rem; font-weight: 650; letter-spacing: -.01em;\n  display: flex; align-items: baseline; gap: .5rem;\n}\n.polly-studio .detail h2 small {\n  font-size: .6875rem; font-weight: 500; color: var(--ps-ink-soft);\n  background: var(--ps-paper); border: 1px solid var(--ps-line);\n  border-radius: 999px; padding: .05rem .45rem;\n}\n.polly-studio .note { margin: 0 0 .75rem; font-size: .78rem; line-height: 1.5; color: var(--ps-ink-soft); max-width: 68ch; }\n.polly-studio dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .9rem; margin: 0; font-size: .8125rem; }\n.polly-studio dt { font-weight: 600; color: var(--ps-ink-soft); }\n.polly-studio dd { margin: 0; font-family: var(--ps-mono); overflow-wrap: anywhere; }\n.polly-studio .ps-group-title {\n  margin: 1rem 0 .4rem; font-size: .75rem; font-weight: 600; color: var(--ps-ink-soft);\n}\n\n/* Fields --------------------------------------------------------------- */\n.polly-studio .ps-fields { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .55rem; }\n.polly-studio label.ps-field { display: grid; gap: .25rem; margin: 0; }\n.polly-studio .ps-field-label { font-size: .75rem; font-weight: 600; color: var(--ps-ink-soft); }\n.polly-studio .ps-input, .polly-studio textarea {\n  width: 100%; min-width: 0;\n  font-family: var(--ps-mono); font-size: .8125rem; color: var(--ps-ink);\n  background: var(--ps-surface);\n  border: 1px solid var(--ps-line-strong); border-radius: 8px;\n  padding: .4rem .55rem;\n  transition: border-color .12s ease, box-shadow .12s ease;\n}\n.polly-studio .ps-input:hover, .polly-studio textarea:hover, .polly-studio .header-row:hover { border-color: #a9b5c6; }\n.polly-studio .ps-input:focus, .polly-studio textarea:focus {\n  outline: none; border-color: var(--ps-accent); box-shadow: 0 0 0 3px var(--ps-accent-soft);\n}\n.polly-studio textarea { display: block; line-height: 1.55; resize: vertical; min-height: 11rem; tab-size: 2; }\n\n/* A header is one name:value pair, so it is one control split by a hairline, not two\n   inputs that happen to sit side by side. */\n.polly-studio .headers { display: grid; gap: .35rem; }\n.polly-studio .header-row {\n  display: grid; grid-template-columns: minmax(6rem, 13rem) minmax(0, 1fr);\n  background: var(--ps-surface);\n  border: 1px solid var(--ps-line-strong); border-radius: 8px;\n  overflow: hidden;\n  transition: border-color .12s ease, box-shadow .12s ease;\n}\n.polly-studio .header-row:focus-within { border-color: var(--ps-accent); box-shadow: 0 0 0 3px var(--ps-accent-soft); }\n.polly-studio .header-row input {\n  width: 100%; min-width: 0;\n  font-family: var(--ps-mono); font-size: .8125rem; color: var(--ps-ink);\n  background: transparent; border: 0; padding: .38rem .55rem;\n}\n.polly-studio .header-row input:focus { outline: none; }\n.polly-studio .header-row input[name^=\"headerName\"] {\n  color: var(--ps-accent-deep); font-weight: 600;\n  background: var(--ps-sunken); border-right: 1px solid var(--ps-line);\n}\n\n/* Actions -------------------------------------------------------------- */\n.polly-studio .actions {\n  display: flex; flex-wrap: wrap; gap: .5rem;\n  margin-top: 1rem; padding-top: .9rem;\n  border-top: 1px solid var(--ps-line);\n}\n.polly-studio .actions button {\n  font: inherit; font-size: .8125rem; font-weight: 600;\n  padding: .45rem .95rem; border-radius: 8px; cursor: pointer;\n  border: 1px solid transparent;\n  transition: background-color .12s ease, border-color .12s ease;\n}\n.polly-studio .actions button[name=\"save\"] { background: var(--ps-accent); color: #fff; }\n.polly-studio .actions button[name=\"save\"]:hover { background: var(--ps-accent-deep); }\n.polly-studio .actions button.danger { background: var(--ps-surface); color: var(--ps-bad); border-color: var(--ps-bad-line); }\n.polly-studio .actions button.danger:hover { background: var(--ps-bad-soft); }\n.polly-studio .actions button:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }\n\n/* Notices and empty states --------------------------------------------- */\n.polly-studio .warn { color: var(--ps-warn); }\n.polly-studio .problem { color: var(--ps-bad); }\n.polly-studio .ps-notice {\n  margin: 0; padding: .55rem .7rem; font-size: .8125rem; line-height: 1.5;\n  background: var(--ps-warn-soft); border: 1px solid var(--ps-warn-line);\n  border-left-width: 3px; border-radius: 0 8px 8px 0;\n}\n/* report() prepends a bare <p class=\"problem\"> here; it is the only alert the page has. */\n.polly-studio #detail > .problem {\n  margin: 0 0 .85rem; padding: .55rem .7rem; font-size: .8125rem;\n  background: var(--ps-bad-soft); border: 1px solid var(--ps-bad-line);\n  border-left-width: 3px; border-radius: 0 8px 8px 0;\n}\n.polly-studio section.problem { margin: 0; }\n.polly-studio li.problem { padding: .4rem .5rem; font-size: .8125rem; }\n.polly-studio .empty {\n  margin: 0; padding: 1.5rem .75rem; text-align: center;\n  font-size: .8125rem; line-height: 1.55; color: var(--ps-ink-faint);\n}\n/* The same class inside the editor is a field standing in for a control, not a pane with\n   nothing in it \u2014 centring it there would read as a broken row between two left-aligned\n   groups. */\n.polly-studio .ps-block .empty { padding: .3rem 0 .1rem; text-align: left; }\n/* The two panes app.ts blanks rather than filling with a placeholder. ::before keeps the\n   hint out of the markup, so nothing here has to be re-added after every innerHTML wipe. */\n.polly-studio #entries:empty::before, .polly-studio #detail:empty::before {\n  display: block; padding: 1.75rem .75rem; text-align: center;\n  font-size: .8125rem; color: var(--ps-ink-faint);\n}\n.polly-studio #entries:empty::before { content: \"Pick a recording to see the requests it captured.\"; }\n.polly-studio #detail:empty::before { content: \"Pick a request to edit the response it replays.\"; }\n\n@media (max-width: 72rem) {\n  .polly-studio { height: auto; }\n  .polly-studio .ps-panes { grid-template-columns: minmax(0, 1fr); }\n  .polly-studio .ps-pane--list .ps-scroll { max-height: 18rem; }\n}\n@media (max-width: 34rem) {\n  .polly-studio .ps-fields { grid-template-columns: minmax(0, 1fr); }\n  .polly-studio .header-row { grid-template-columns: minmax(0, 1fr); }\n  .polly-studio .header-row input[name^=\"headerName\"] { border-right: 0; border-bottom: 1px solid var(--ps-line); }\n}\n@media (prefers-reduced-motion: reduce) {\n  .polly-studio * { transition: none !important; }\n}\n";

package/dist/studio/ui/page.js

@@ -0,0 +1,360 @@
+/**
+ * The body, shared with the browser-only mount in Task 12 so the two cannot drift into
+ * two different editors.
+ */
+export const STUDIO_MARKUP = `
+<div class="polly-studio">
+<header class="ps-bar">
+  <div class="ps-brand">
+    <h1>polly-studio</h1>
+    <p class="ps-tagline">Change what a recorded request replies with, then save it back to the HAR.</p>
+  </div>
+  <p class="warn banner">Polly's <code>keepUnusedRequests</code> defaults to <code>false</code>:
+  the next record run deletes every entry it did not exercise, including the ones you edit here.
+  Set <code>persisterOptions.keepUnusedRequests: true</code> before editing.</p>
+</header>
+<main class="ps-panes">
+  <section class="ps-pane ps-pane--list">
+    <h2 class="ps-pane-title">Recordings</h2>
+    <nav id="recordings" class="ps-scroll">Loading…</nav>
+  </section>
+  <section class="ps-pane ps-pane--list">
+    <h2 class="ps-pane-title">Requests</h2>
+    <div id="entries" class="ps-scroll"></div>
+  </section>
+  <section class="ps-pane ps-pane--editor">
+    <h2 class="ps-pane-title">Recorded exchange</h2>
+    <div id="detail" class="ps-scroll"></div>
+  </section>
+</main>
+</div>`;
+/**
+ * The HTML shell.
+ *
+ * `clientScript` is the bundled `client.ts`, inlined rather than linked. The handler has
+ * no way to know what URL a browser would have to request for it: mounted with
+ * `app.use('/__polly', ...)`, Express strips the prefix before the handler sees the
+ * request, so nothing on the server side still knows the page is at `/__polly`.
+ *
+ * `location.pathname` does know, and it is evaluated in the browser, so the API base is
+ * derived there. The same expression is correct when the handler is mounted at the root,
+ * behind a prefix, or reached with a trailing slash.
+ *
+ * `clientScript` is split on a literal `</script`, not because a recording can reach
+ * this string — it can't; this is build-time bundle text, not runtime HAR data — but
+ * because Task 12's browser mount imports `STUDIO_MARKUP`/`STUDIO_STYLE` from this same
+ * file, which means `page.ts` itself can end up bundled into the very `clientScript`
+ * this function inlines. HTML's script-end-tag detection is lexical, not JS-aware, so an
+ * un-split `</script` anywhere in that text — in code, a string, or a comment — would
+ * truncate the tag regardless of a bundler's own escaping. The replacement is lossless:
+ * `<\/script` is identical JavaScript to `</script`, just not a tag boundary to the HTML
+ * parser.
+ *
+ * The trailer's regex is written `/\\/+$/` — doubled backslash — and must stay that way.
+ * It sits inside a template literal, so the literal consumes one backslash and the page
+ * receives `/\/+$/`, the escaped forward slash the browser needs. Written the way it
+ * reads as code, `/\/+$/`, the emitted text is `//+$/`: `//` opens a line comment, the
+ * closing paren is swallowed, and the browser reports `SyntaxError: Unexpected end of
+ * input` before anything runs. That is the bug this doubling fixes, and it was
+ * introduced by checking the expression as code rather than as template text. The
+ * `vm.Script` test in `test/render.test.ts` pins the emitted form.
+ */
+export function renderPage(clientScript) {
+    const safeScript = clientScript.replaceAll('</script', '<\\/script');
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>polly-studio</title>
+<style>${PAGE_STYLE}${STUDIO_STYLE}</style>
+</head>
+<body>
+${STUDIO_MARKUP}
+<script type="module">
+${safeScript}
+start(location.pathname.replace(/\\/+$/, ''))
+</script>
+</body>
+</html>`;
+}
+/**
+ * Rules that only make sense when this package owns the whole document, which is true of
+ * the served page and false of `mountPollyStudio` (`src/browser.ts`), where the same
+ * `STUDIO_STYLE` is injected into somebody else's app. Splitting them is what lets
+ * `STUDIO_STYLE` below be entirely scoped: a host page keeps its own body background,
+ * type and box-sizing, and the editor still fills the viewport when it is the page.
+ */
+export const PAGE_STYLE = `
+html { color-scheme: light; }
+html, body { height: 100%; }
+body { margin: 0; background: #eaeef5; }
+`;
+/**
+ * Every selector is scoped under `.polly-studio`, the wrapper `STUDIO_MARKUP` opens with.
+ * `src/browser.ts` injects this stylesheet with `innerHTML` into an arbitrary element of
+ * a host application, where it is document-global regardless — the previous `:root`/`body`
+ * rules restyled the host app's own type and margins as a side effect of mounting an
+ * editor. Scoping is the only thing preventing that, so new rules need the prefix too.
+ */
+export const STUDIO_STYLE = `
+.polly-studio, .polly-studio *, .polly-studio *::before, .polly-studio *::after { box-sizing: border-box; }
+.polly-studio {
+  --ps-paper: #eaeef5;
+  --ps-surface: #ffffff;
+  --ps-sunken: #f1f5fb;
+  --ps-ink: #111722;
+  --ps-ink-soft: #4d5867;
+  --ps-ink-faint: #838e9d;
+  --ps-line: #dce3ed;
+  --ps-line-strong: #c3ccda;
+  --ps-accent: #3d2fbd;
+  --ps-accent-deep: #2e2298;
+  --ps-accent-line: #c8c2f0;
+  --ps-accent-soft: #eeecfb;
+  --ps-ok: #0a6b3d; --ps-ok-line: #b6ddc6; --ps-ok-soft: #e8f4ed;
+  --ps-warn: #875700; --ps-warn-line: #ecd3a3; --ps-warn-soft: #fbf2e1;
+  --ps-bad: #b3261e; --ps-bad-line: #edbdb9; --ps-bad-soft: #fceceb;
+  --ps-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  color-scheme: light;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--ps-ink);
+  background: var(--ps-paper);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 34rem;
+}
+
+/* Title bar ------------------------------------------------------------ */
+.polly-studio .ps-bar {
+  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.75rem;
+  padding: .8rem 1.25rem;
+  background: var(--ps-surface);
+  border-bottom: 1px solid var(--ps-line);
+}
+.polly-studio .ps-brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .75rem; }
+.polly-studio h1 { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; }
+.polly-studio .ps-tagline { margin: 0; font-size: .8125rem; color: var(--ps-ink-soft); }
+.polly-studio .banner {
+  flex: 1 1 26rem; min-width: 16rem; margin: 0;
+  padding: .45rem .7rem;
+  font-size: .78rem; line-height: 1.45;
+  background: var(--ps-warn-soft);
+  border: 1px solid var(--ps-warn-line); border-left-width: 3px;
+  border-radius: 0 7px 7px 0;
+}
+.polly-studio code {
+  font-family: var(--ps-mono); font-size: .92em;
+  background: rgba(17,23,34,.05); border-radius: 4px; padding: 0 .22em;
+}
+
+/* Panes ---------------------------------------------------------------- */
+.polly-studio .ps-panes {
+  flex: 1; min-height: 0;
+  display: grid; gap: .9rem;
+  grid-template-columns: 17rem 24rem minmax(0, 1fr);
+  padding: .9rem 1.25rem 1.25rem;
+}
+.polly-studio .ps-pane {
+  display: flex; flex-direction: column; min-height: 0;
+  border: 1px solid var(--ps-line); border-radius: 12px;
+  background: var(--ps-surface);
+  overflow: hidden;
+}
+/* The two browsers read as one surface you pick from; the editor reads as the page you
+   work on. Same border, different floor — not three identical cards. */
+.polly-studio .ps-pane--list { background: var(--ps-sunken); }
+.polly-studio .ps-pane-title {
+  margin: 0; padding: .5rem .75rem;
+  font-size: .8125rem; font-weight: 600; color: var(--ps-ink-soft);
+  background: var(--ps-surface);
+  border-bottom: 1px solid var(--ps-line);
+}
+.polly-studio .ps-pane--editor .ps-pane-title { box-shadow: inset 3px 0 0 var(--ps-accent); }
+.polly-studio .ps-scroll { flex: 1; min-height: 0; overflow: auto; padding: .5rem; }
+.polly-studio .ps-pane--editor .ps-scroll { padding: .9rem 1rem 1.25rem; }
+
+/* Recording list ------------------------------------------------------- */
+.polly-studio ul { list-style: none; margin: 0; padding: 0; }
+.polly-studio .recordings, .polly-studio #entries ul { display: grid; gap: .3rem; }
+/* Each row is its own bordered card rather than a hover-only highlight: a recorded URL
+   wraps to three or four lines often enough that without one, two rows read as one. */
+.polly-studio button.recording, .polly-studio button.entry {
+  width: 100%; text-align: left; font: inherit;
+  color: var(--ps-ink); background: var(--ps-surface);
+  border: 1px solid var(--ps-line); border-radius: 8px;
+  padding: .4rem .5rem; cursor: pointer;
+  transition: background-color .12s ease, border-color .12s ease;
+}
+.polly-studio button.recording:hover, .polly-studio button.entry:hover {
+  border-color: var(--ps-line-strong);
+}
+/* :focus, not :focus-visible — a click selects, and the selection has to be visible
+   whether it came from the mouse or the keyboard. app.ts keeps no selected state. */
+.polly-studio button.recording:focus, .polly-studio button.entry:focus {
+  outline: none; background: var(--ps-accent-soft); border-color: var(--ps-accent-line);
+}
+.polly-studio button.recording:focus-visible, .polly-studio button.entry:focus-visible {
+  outline: 2px solid var(--ps-accent); outline-offset: 1px;
+}
+.polly-studio button.recording { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
+.polly-studio .ps-rec-name { font-family: var(--ps-mono); font-size: .8125rem; overflow-wrap: anywhere; }
+.polly-studio .count {
+  font-family: var(--ps-mono); font-size: .6875rem; color: var(--ps-ink-soft);
+  background: var(--ps-paper); border: 1px solid var(--ps-line);
+  border-radius: 999px; padding: 0 .42rem;
+}
+.polly-studio .ps-rec-note { margin: .1rem 0 .3rem .5rem; font-size: .75rem; line-height: 1.4; }
+
+/* Request list --------------------------------------------------------- */
+.polly-studio button.entry {
+  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: baseline; gap: .1rem .5rem;
+}
+.polly-studio .method {
+  font-family: var(--ps-mono); font-size: .6875rem; font-weight: 700;
+  letter-spacing: .02em; color: var(--ps-ink-soft); min-width: 2.6rem;
+}
+.polly-studio .status {
+  font-family: var(--ps-mono); font-size: .6875rem; font-weight: 700;
+  border: 1px solid; border-radius: 5px; padding: 0 .3rem;
+}
+.polly-studio .status.s2 { color: var(--ps-ok); background: var(--ps-ok-soft); border-color: var(--ps-ok-line); }
+.polly-studio .status.s3 { color: var(--ps-warn); background: var(--ps-warn-soft); border-color: var(--ps-warn-line); }
+.polly-studio .status.s4, .polly-studio .status.s5 { color: var(--ps-bad); background: var(--ps-bad-soft); border-color: var(--ps-bad-line); }
+.polly-studio .url { font-family: var(--ps-mono); font-size: .78rem; overflow-wrap: anywhere; }
+.polly-studio .order { font-family: var(--ps-mono); font-size: .6875rem; color: var(--ps-ink-faint); }
+
+/* Detail --------------------------------------------------------------- */
+.polly-studio .detail { display: grid; gap: .85rem; }
+.polly-studio .ps-block {
+  border: 1px solid var(--ps-line); border-radius: 10px;
+  padding: .85rem .95rem 1rem;
+}
+.polly-studio .ps-block--request { background: var(--ps-sunken); }
+.polly-studio .detail h2 {
+  margin: 0 0 .45rem; font-size: .9375rem; font-weight: 650; letter-spacing: -.01em;
+  display: flex; align-items: baseline; gap: .5rem;
+}
+.polly-studio .detail h2 small {
+  font-size: .6875rem; font-weight: 500; color: var(--ps-ink-soft);
+  background: var(--ps-paper); border: 1px solid var(--ps-line);
+  border-radius: 999px; padding: .05rem .45rem;
+}
+.polly-studio .note { margin: 0 0 .75rem; font-size: .78rem; line-height: 1.5; color: var(--ps-ink-soft); max-width: 68ch; }
+.polly-studio dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .9rem; margin: 0; font-size: .8125rem; }
+.polly-studio dt { font-weight: 600; color: var(--ps-ink-soft); }
+.polly-studio dd { margin: 0; font-family: var(--ps-mono); overflow-wrap: anywhere; }
+.polly-studio .ps-group-title {
+  margin: 1rem 0 .4rem; font-size: .75rem; font-weight: 600; color: var(--ps-ink-soft);
+}
+
+/* Fields --------------------------------------------------------------- */
+.polly-studio .ps-fields { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .55rem; }
+.polly-studio label.ps-field { display: grid; gap: .25rem; margin: 0; }
+.polly-studio .ps-field-label { font-size: .75rem; font-weight: 600; color: var(--ps-ink-soft); }
+.polly-studio .ps-input, .polly-studio textarea {
+  width: 100%; min-width: 0;
+  font-family: var(--ps-mono); font-size: .8125rem; color: var(--ps-ink);
+  background: var(--ps-surface);
+  border: 1px solid var(--ps-line-strong); border-radius: 8px;
+  padding: .4rem .55rem;
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.polly-studio .ps-input:hover, .polly-studio textarea:hover, .polly-studio .header-row:hover { border-color: #a9b5c6; }
+.polly-studio .ps-input:focus, .polly-studio textarea:focus {
+  outline: none; border-color: var(--ps-accent); box-shadow: 0 0 0 3px var(--ps-accent-soft);
+}
+.polly-studio textarea { display: block; line-height: 1.55; resize: vertical; min-height: 11rem; tab-size: 2; }
+
+/* A header is one name:value pair, so it is one control split by a hairline, not two
+   inputs that happen to sit side by side. */
+.polly-studio .headers { display: grid; gap: .35rem; }
+.polly-studio .header-row {
+  display: grid; grid-template-columns: minmax(6rem, 13rem) minmax(0, 1fr);
+  background: var(--ps-surface);
+  border: 1px solid var(--ps-line-strong); border-radius: 8px;
+  overflow: hidden;
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.polly-studio .header-row:focus-within { border-color: var(--ps-accent); box-shadow: 0 0 0 3px var(--ps-accent-soft); }
+.polly-studio .header-row input {
+  width: 100%; min-width: 0;
+  font-family: var(--ps-mono); font-size: .8125rem; color: var(--ps-ink);
+  background: transparent; border: 0; padding: .38rem .55rem;
+}
+.polly-studio .header-row input:focus { outline: none; }
+.polly-studio .header-row input[name^="headerName"] {
+  color: var(--ps-accent-deep); font-weight: 600;
+  background: var(--ps-sunken); border-right: 1px solid var(--ps-line);
+}
+
+/* Actions -------------------------------------------------------------- */
+.polly-studio .actions {
+  display: flex; flex-wrap: wrap; gap: .5rem;
+  margin-top: 1rem; padding-top: .9rem;
+  border-top: 1px solid var(--ps-line);
+}
+.polly-studio .actions button {
+  font: inherit; font-size: .8125rem; font-weight: 600;
+  padding: .45rem .95rem; border-radius: 8px; cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color .12s ease, border-color .12s ease;
+}
+.polly-studio .actions button[name="save"] { background: var(--ps-accent); color: #fff; }
+.polly-studio .actions button[name="save"]:hover { background: var(--ps-accent-deep); }
+.polly-studio .actions button.danger { background: var(--ps-surface); color: var(--ps-bad); border-color: var(--ps-bad-line); }
+.polly-studio .actions button.danger:hover { background: var(--ps-bad-soft); }
+.polly-studio .actions button:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
+
+/* Notices and empty states --------------------------------------------- */
+.polly-studio .warn { color: var(--ps-warn); }
+.polly-studio .problem { color: var(--ps-bad); }
+.polly-studio .ps-notice {
+  margin: 0; padding: .55rem .7rem; font-size: .8125rem; line-height: 1.5;
+  background: var(--ps-warn-soft); border: 1px solid var(--ps-warn-line);
+  border-left-width: 3px; border-radius: 0 8px 8px 0;
+}
+/* report() prepends a bare <p class="problem"> here; it is the only alert the page has. */
+.polly-studio #detail > .problem {
+  margin: 0 0 .85rem; padding: .55rem .7rem; font-size: .8125rem;
+  background: var(--ps-bad-soft); border: 1px solid var(--ps-bad-line);
+  border-left-width: 3px; border-radius: 0 8px 8px 0;
+}
+.polly-studio section.problem { margin: 0; }
+.polly-studio li.problem { padding: .4rem .5rem; font-size: .8125rem; }
+.polly-studio .empty {
+  margin: 0; padding: 1.5rem .75rem; text-align: center;
+  font-size: .8125rem; line-height: 1.55; color: var(--ps-ink-faint);
+}
+/* The same class inside the editor is a field standing in for a control, not a pane with
+   nothing in it — centring it there would read as a broken row between two left-aligned
+   groups. */
+.polly-studio .ps-block .empty { padding: .3rem 0 .1rem; text-align: left; }
+/* The two panes app.ts blanks rather than filling with a placeholder. ::before keeps the
+   hint out of the markup, so nothing here has to be re-added after every innerHTML wipe. */
+.polly-studio #entries:empty::before, .polly-studio #detail:empty::before {
+  display: block; padding: 1.75rem .75rem; text-align: center;
+  font-size: .8125rem; color: var(--ps-ink-faint);
+}
+.polly-studio #entries:empty::before { content: "Pick a recording to see the requests it captured."; }
+.polly-studio #detail:empty::before { content: "Pick a request to edit the response it replays."; }
+
+@media (max-width: 72rem) {
+  .polly-studio { height: auto; }
+  .polly-studio .ps-panes { grid-template-columns: minmax(0, 1fr); }
+  .polly-studio .ps-pane--list .ps-scroll { max-height: 18rem; }
+}
+@media (max-width: 34rem) {
+  .polly-studio .ps-fields { grid-template-columns: minmax(0, 1fr); }
+  .polly-studio .header-row { grid-template-columns: minmax(0, 1fr); }
+  .polly-studio .header-row input[name^="headerName"] { border-right: 0; border-bottom: 1px solid var(--ps-line); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .polly-studio * { transition: none !important; }
+}
+`;

package/dist/studio/ui/render.d.ts

@@ -0,0 +1,25 @@
+import type { RecordingSummary } from '../stores/types.js';
+import type { HarEntry } from '../types.js';
+/**
+ * Rendering is string-in, string-out and lives apart from the DOM so it can be tested
+ * without a browser. Recorded bodies are attacker-shaped by nature — they came off the
+ * network — so everything interpolated goes through `escapeHtml`.
+ *
+ * The parameter is not `string`, and the body opens with `String(value)`. `parseHar`'s
+ * `isHarShaped` (`src/har.ts`) is a shape check, not a schema validator: it confirms
+ * `log.entries` is an array and casts the rest of the parsed JSON to `Har`, so a field
+ * this module's types call `string` can be a number, `null` or `undefined` on disk — and
+ * `.replaceAll` does not exist on any of those. Design spec §7 requires the UI to open
+ * exactly the recordings Polly would reject, so that is an expected input.
+ *
+ * It is a union of the JSON primitives rather than `unknown`, which is the narrowest
+ * type that accepts everything a malformed HAR can put in a text field while still
+ * failing the build on `escapeHtml(someObject)` — a call that is always a mistake, and
+ * that `unknown` would have accepted silently as `[object Object]`. Callers holding an
+ * `unknown` say `String(value)` themselves, which makes the coercion visible at the site
+ * that chose it.
+ */
+export declare function escapeHtml(value: string | number | boolean | null | undefined): string;
+export declare function renderRecordingList(recordings: RecordingSummary[]): string;
+export declare function renderEntryRow(entry: HarEntry): string;
+export declare function renderEntryDetail(entry: HarEntry): string;