@avivbenhamo/polly-kit 0.6.0 → 0.8.0

package/dist/studio/stores/apply.js

@@ -1,4 +1,7 @@
-import { applyResponsePatch, deleteEntry as deleteEntryIn } from '../edit.js';
+import { applyResponsePatch, deleteEntry as deleteEntryIn, duplicateEntry as duplicateEntryIn, } from '../edit.js';
+import { POLLY_CREATOR_NAME } from '../har.js';
+import { mergeEntries, rejectImport } from '../import.js';
+import { guidForRecording, rejectRecordingName } from '../recording-id.js';
 import { StoreError } from './types.js';
 export function patchEntryVia(store, id, entryId, order, etag, patch) {
     return applyEntryEdit(store, id, etag, (har) => applyResponsePatch(har, entryId, order, patch));
@@ -6,6 +9,9 @@ export function patchEntryVia(store, id, entryId, order, etag, patch) {
 export function deleteEntryVia(store, id, entryId, order, etag) {
     return applyEntryEdit(store, id, etag, (har) => deleteEntryIn(har, entryId, order));
 }
+export function duplicateEntryVia(store, id, entryId, order, etag) {
+    return applyEntryEdit(store, id, etag, (har) => duplicateEntryIn(har, entryId, order));
+}
 async function applyEntryEdit(store, id, etag, apply) {
     const read = await store.read(id);
     if (read.etag !== etag) {
@@ -18,3 +24,64 @@ async function applyEntryEdit(store, id, etag, apply) {
     await store.write(id, result.har, read.etag);
     return store.read(id);
 }
+/**
+ * The read-merge-write cycle, shared by every store that owns its own storage.
+ *
+ * A corrupt existing file is refused rather than overwritten. `read` reports
+ * unparseable JSON as `not-found`, which is indistinguishable from "absent" at
+ * this layer, so absence is established by `list` instead — the one call that
+ * tells a recording that cannot be parsed apart from one that was never written.
+ */
+export async function importHarVia(store, recordingName, incoming) {
+    const badName = rejectRecordingName(recordingName);
+    if (badName !== null)
+        throw new StoreError('unprocessable', badName);
+    // Trimmed once, here, rather than left for `guidForRecording` to trim on its own:
+    // without this, a padded name would hash to the correct (trimmed) directory but
+    // `newRecording` below would still write the untrimmed name into `_recordingName`
+    // — a file that disagrees with its own location, and one that would then round-trip
+    // the padding straight back into the import form's prefill (`openRecording`, I-2b).
+    const name = recordingName.trim();
+    const rejection = rejectImport(incoming);
+    if (rejection !== null)
+        throw new StoreError('unprocessable', rejection);
+    const id = guidForRecording(name);
+    const summary = (await store.list()).find((candidate) => candidate.id === id);
+    if (summary !== undefined && summary.problem !== null) {
+        throw new StoreError('unprocessable', `recording ${id} is on disk but unreadable (${summary.problem}) — repair or delete it before importing, rather than having this overwrite it`);
+    }
+    const existing = summary === undefined ? null : await store.read(id);
+    const outcome = mergeEntries(existing?.har.log.entries ?? [], incoming.log.entries);
+    if (existing === null) {
+        await store.create(id, newRecording(name, outcome.entries));
+    }
+    else {
+        await store.write(id, { ...existing.har, log: { ...existing.har.log, entries: outcome.entries } }, existing.etag);
+    }
+    const after = await store.read(id);
+    return {
+        ...after,
+        id,
+        added: outcome.added,
+        replaced: outcome.replaced,
+        skipped: outcome.skipped,
+        created: existing === null,
+    };
+}
+/**
+ * The log shell real Polly writes, minus `browser` and `pages`: Polly emits them,
+ * nothing reads them, and swagger-recorder's Polly flavour already proves a
+ * recording without them replays.
+ */
+function newRecording(recordingName, entries) {
+    return {
+        log: {
+            _recordingName: recordingName,
+            version: '1.2',
+            // Asserted on by `Persister.findRecording`. Anything else and Polly asks
+            // the user to delete the file.
+            creator: { name: POLLY_CREATOR_NAME, version: '6.0.6', comment: 'persister:rest' },
+            entries,
+        },
+    };
+}

package/dist/studio/stores/fs-store.d.ts

@@ -1,7 +1,8 @@
-import type { RecordingStore, RecordingSummary, ReadResult } from './types.js';
+import type { RecordingStore, RecordingSummary, ReadResult, ImportResult } from './types.js';
 import type { Har, ResponsePatch } from '../types.js';
 export { StoreError } from './types.js';
 export type { RecordingStore, RecordingSummary, ReadResult } from './types.js';
+export type { ImportResult } from './types.js';
 /**
  * Polly's node-server writes with `fs.outputJsonSync(path, data, { spaces: 2 })`, which
  * routes through `jsonfile`'s `stringify` — `JSON.stringify(obj, null, 2)` plus a final
@@ -48,7 +49,16 @@ export declare class FsStore implements RecordingStore {
      */
     delete(id: string): Promise<void>;
     patchEntry(id: string, entryId: string, order: number, etag: string, patch: ResponsePatch): Promise<ReadResult>;
+    duplicateEntry(id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
     deleteEntry(id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
+    /**
+     * `write` is read-compare-write and refuses a file that is not there, which is
+     * right for an edit and wrong for a creation. `wx` is what makes this a creation
+     * rather than a truncation: if the file appeared since `importHarVia` looked, the
+     * open fails instead of discarding whatever landed.
+     */
+    create(id: string, har: Har): Promise<void>;
+    importHar(recordingName: string, incoming: Har): Promise<ImportResult>;
     /**
      * Polly's own node-server does `path.join(recordingsDir, recording, 'recording.har')`
      * with no sanitisation, and here the id arrives off an HTTP request. Resolving and

package/dist/studio/stores/fs-store.js

@@ -4,7 +4,7 @@ import { randomUUID } from 'node:crypto';
 import { parseHar } from '../har.js';
 import { etagFor } from '../etag.js';
 import { StoreError } from './types.js';
-import { deleteEntryVia, patchEntryVia } from './apply.js';
+import { deleteEntryVia, duplicateEntryVia, importHarVia, patchEntryVia } from './apply.js';
 export { StoreError } from './types.js';
 const FILENAME = 'recording.har';
 /**
@@ -151,9 +151,34 @@ export class FsStore {
     patchEntry(id, entryId, order, etag, patch) {
         return patchEntryVia(this, id, entryId, order, etag, patch);
     }
+    duplicateEntry(id, entryId, order, etag) {
+        return duplicateEntryVia(this, id, entryId, order, etag);
+    }
     deleteEntry(id, entryId, order, etag) {
         return deleteEntryVia(this, id, entryId, order, etag);
     }
+    /**
+     * `write` is read-compare-write and refuses a file that is not there, which is
+     * right for an edit and wrong for a creation. `wx` is what makes this a creation
+     * rather than a truncation: if the file appeared since `importHarVia` looked, the
+     * open fails instead of discarding whatever landed.
+     */
+    async create(id, har) {
+        const path = this.pathFor(id);
+        await mkdir(join(path, '..'), { recursive: true });
+        try {
+            await writeFile(path, serializeHar(har), { encoding: 'utf8', flag: 'wx' });
+        }
+        catch (err) {
+            if (err.code === 'EEXIST') {
+                throw new StoreError('conflict', `recording ${id} appeared while it was being created — reload and retry`);
+            }
+            throw err;
+        }
+    }
+    importHar(recordingName, incoming) {
+        return importHarVia(this, recordingName, incoming);
+    }
     /**
      * Polly's own node-server does `path.join(recordingsDir, recording, 'recording.har')`
      * with no sanitisation, and here the id arrives off an HTTP request. Resolving and

package/dist/studio/stores/http-store.d.ts

@@ -1,4 +1,4 @@
-import type { RecordingStore, RecordingSummary, ReadResult } from './types.js';
+import type { RecordingStore, RecordingSummary, ReadResult, ImportResult } from './types.js';
 import type { Har, ResponsePatch } from '../types.js';
 /**
  * The store the page uses under the Node mount. It exists so `mountStudio` can be
@@ -25,6 +25,15 @@ export declare class HttpStore implements RecordingStore {
     write(id: string, har: Har, etag: string): Promise<void>;
     delete(id: string): Promise<void>;
     patchEntry(id: string, entryId: string, order: number, etag: string, patch: ResponsePatch): Promise<ReadResult>;
+    /** POST to the entry being copied: this adds a member to its group. */
+    duplicateEntry(id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
     deleteEntry(id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
+    /**
+     * Not on the wire protocol: creation happens inside `/api/import`, server-side,
+     * the same way `write` happens inside PATCH. Declared so a caller holding a
+     * concrete HttpStore still type-checks against the interface's arity.
+     */
+    create(id: string, har: Har): Promise<void>;
+    importHar(recordingName: string, incoming: Har): Promise<ImportResult>;
     private json;
 }

package/dist/studio/stores/http-store.js

@@ -36,9 +36,24 @@ export class HttpStore {
     async patchEntry(id, entryId, order, etag, patch) {
         return (await this.json('PATCH', `/api/recordings/${encodeURIComponent(id)}/entries/${encodeURIComponent(entryId)}/${order}`, { etag, patch }));
     }
+    /** POST to the entry being copied: this adds a member to its group. */
+    async duplicateEntry(id, entryId, order, etag) {
+        return (await this.json('POST', `/api/recordings/${encodeURIComponent(id)}/entries/${encodeURIComponent(entryId)}/${order}?etag=${encodeURIComponent(etag)}`));
+    }
     async deleteEntry(id, entryId, order, etag) {
         return (await this.json('DELETE', `/api/recordings/${encodeURIComponent(id)}/entries/${encodeURIComponent(entryId)}/${order}?etag=${encodeURIComponent(etag)}`));
     }
+    /**
+     * Not on the wire protocol: creation happens inside `/api/import`, server-side,
+     * the same way `write` happens inside PATCH. Declared so a caller holding a
+     * concrete HttpStore still type-checks against the interface's arity.
+     */
+    async create(id, har) {
+        throw new StoreError('forbidden', 'the HTTP API creates recordings through import — use importHar');
+    }
+    async importHar(recordingName, incoming) {
+        return (await this.json('POST', '/api/import', { recordingName, har: incoming }));
+    }
     async json(method, path, body) {
         const res = await fetch(`${this.basePath}${path}`, {
             method,

package/dist/studio/stores/local-storage-store.d.ts

@@ -1,4 +1,4 @@
-import type { RecordingStore, RecordingSummary, ReadResult } from './types.js';
+import type { RecordingStore, RecordingSummary, ReadResult, ImportResult } from './types.js';
 import type { Har, ResponsePatch } from '../types.js';
 export interface LocalStorageStoreOptions {
     key?: string;
@@ -19,7 +19,10 @@ export declare class LocalStorageStore implements RecordingStore {
     write(id: string, har: Har, etag: string): Promise<void>;
     delete(id: string): Promise<void>;
     patchEntry(id: string, entryId: string, order: number, etag: string, patch: ResponsePatch): Promise<ReadResult>;
+    duplicateEntry(id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
     deleteEntry(id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
+    create(id: string, har: Har): Promise<void>;
+    importHar(recordingName: string, incoming: Har): Promise<ImportResult>;
     /** `null` means the key holds something that is not JSON, which `list` reports. */
     private db;
 }

package/dist/studio/stores/local-storage-store.js

@@ -1,7 +1,7 @@
 import { parseHar } from '../har.js';
 import { etagFor } from '../etag.js';
 import { StoreError } from './types.js';
-import { deleteEntryVia, patchEntryVia } from './apply.js';
+import { deleteEntryVia, duplicateEntryVia, importHarVia, patchEntryVia } from './apply.js';
 /** Polly's default namespace. `persisterOptions.local-storage.key` can change it. */
 const DEFAULT_KEY = 'pollyjs';
 /**
@@ -90,9 +90,24 @@ export class LocalStorageStore {
     patchEntry(id, entryId, order, etag, patch) {
         return patchEntryVia(this, id, entryId, order, etag, patch);
     }
+    duplicateEntry(id, entryId, order, etag) {
+        return duplicateEntryVia(this, id, entryId, order, etag);
+    }
     deleteEntry(id, entryId, order, etag) {
         return deleteEntryVia(this, id, entryId, order, etag);
     }
+    async create(id, har) {
+        const db = this.db();
+        if (db === null)
+            throw new StoreError('unprocessable', `localStorage[${this.key}] is not valid JSON`);
+        if (id in db) {
+            throw new StoreError('conflict', `recording ${id} appeared while it was being created — reload and retry`);
+        }
+        this.storage.setItem(this.key, JSON.stringify({ ...db, [id]: har }));
+    }
+    importHar(recordingName, incoming) {
+        return importHarVia(this, recordingName, incoming);
+    }
     /** `null` means the key holds something that is not JSON, which `list` reports. */
     db() {
         const raw = this.storage.getItem(this.key);

package/dist/studio/stores/types.d.ts

@@ -1,4 +1,5 @@
 import type { Har, ResponsePatch } from '../types.js';
+import type { ImportSkip } from '../import.js';
 export interface RecordingSummary {
     /** The recordingId. May contain slashes: Polly builds it from describe/it names. */
     id: string;
@@ -15,6 +16,14 @@ export interface ReadResult {
     etag: string;
     pollyWillReject: string | null;
 }
+export interface ImportResult extends ReadResult {
+    /** The recordingId the name resolved to, so the UI can open what it just wrote. */
+    id: string;
+    added: number;
+    replaced: number;
+    skipped: ImportSkip[];
+    created: boolean;
+}
 /**
  * The one interface the page renders against. Three implementations exist — the
  * filesystem, localStorage, and an HTTP client — and the page cannot tell them apart,
@@ -26,7 +35,7 @@ export interface RecordingStore {
     write(id: string, har: Har, etag: string): Promise<void>;
     delete(id: string): Promise<void>;
     /**
-     * The two edits the UI performs, as store operations rather than as "read, apply, and
+     * The three edits the UI performs, as store operations rather than as "read, apply, and
      * hand a whole HAR back".
      *
      * They are on the interface so `mountStudio` never has to ask which store it holds.
@@ -37,6 +46,28 @@ export interface RecordingStore {
      */
     patchEntry(id: string, entryId: string, order: number, etag: string, patch: ResponsePatch): Promise<ReadResult>;
     deleteEntry(id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
+    /**
+     * Copy an entry to the end of its own `_id` group: the next identical request
+     * replays this one instead. Never a way to make a *different* request — see
+     * `duplicateEntry` in edit.ts.
+     */
+    duplicateEntry(id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
+    /**
+     * Write a recording that does not exist yet. Unlike `write` there is no etag to
+     * compare, because there is nothing to compare against — and it must fail rather
+     * than truncate if the file appeared since the caller last looked.
+     */
+    create(id: string, har: Har): Promise<void>;
+    /**
+     * Import a HAR from the swagger-recorder extension, creating the recording or
+     * merging into it.
+     *
+     * Takes a NAME, not an id: the name is what the user knows and what the app's
+     * Polly config holds, while the id is a hash the UI should never compute. On the
+     * interface for the same reason `patchEntry` and `deleteEntry` are — the
+     * read-merge-write cycle belongs on the server side of the network.
+     */
+    importHar(recordingName: string, incoming: Har): Promise<ImportResult>;
 }
 export type StoreErrorCode = 'not-found' | 'conflict' | 'forbidden' | 'unprocessable';
 export declare class StoreError extends Error {

package/dist/studio/types.d.ts

@@ -71,7 +71,9 @@ export interface HarLog {
     };
     _recordingName?: string;
     entries: HarEntry[];
-    pages: unknown[];
+    /** Optional: real Polly emits it, nothing in this package reads it, and the shell
+     * `newRecording` (`stores/apply.ts`) writes on import omits it entirely. */
+    pages?: unknown[];
     browser?: {
         name: string;
         version: string;

package/dist/studio/ui/app.js

@@ -1,4 +1,4 @@
-import { renderEntryDetail, renderEntryRow, renderRecordingList } from './render.js';
+import { renderEntryDetail, renderEntryRow, renderImportResult, renderRecordingList, } from './render.js';
 import { StoreError } from '../stores/types.js';
 /**
  * The page's behaviour, written against `RecordingStore` and nothing else. Under the
@@ -14,6 +14,58 @@ export function mountStudio(root, store) {
     const recordings = required(root, '#recordings');
     const entries = required(root, '#entries');
     const detail = required(root, '#detail');
+    const importForm = root.querySelector('#import');
+    const importReport = root.querySelector('#import-report');
+    // Optional: the Node mount (`page.ts`'s `STUDIO_MARKUP`) and the browser-only mount
+    // (`browser.ts`, which injects that same `STUDIO_MARKUP`) both ship this form, so
+    // `#import` is present and `LocalStorageStore.importHar` reachable in either. The only
+    // root that lacks it is a test fake that predates this markup, and a missing form must
+    // not throw the whole page away before a single recording has been listed.
+    importForm?.addEventListener('submit', (event) => {
+        event.preventDefault();
+        void runImport();
+    });
+    async function runImport() {
+        if (importForm === null || importReport === null)
+            return;
+        // Cleared before the attempt, not just on success: a failed import must not leave
+        // the previous import's success line sitting next to a form that just failed — see
+        // Final whole-branch review, Finding I-4.
+        importReport.textContent = '';
+        try {
+            // The field reads live inside the try along with everything else: a missing
+            // `#import-name` or `#import-file` must surface the same way any other import
+            // failure does, not as an unhandled rejection — see Finding M-2.
+            const name = importForm.querySelector('#import-name').value;
+            const file = importForm.querySelector('#import-file').files?.[0];
+            if (file === undefined) {
+                throw new Error('choose a .har file to import');
+            }
+            // Parsed here rather than posted raw so a file that is not JSON fails with
+            // a message naming the file, before a 50 MB upload.
+            const har = JSON.parse(await file.text());
+            const result = await store.importHar(name, har);
+            importReport.innerHTML = renderImportResult(result);
+            try {
+                // A separate try: the import itself already succeeded and `importReport`
+                // already shows that. A failure refreshing the list or opening the result is
+                // a different problem — reported the normal way, rather than the outer catch
+                // overwriting the success line with what would read as the import having failed.
+                await refreshRecordings();
+                await openRecording(result.id);
+            }
+            catch (err) {
+                report(err);
+            }
+        }
+        catch (err) {
+            // Into `#import-report`, right next to the form that failed, rather than the
+            // distant `detail` banner `report()` uses for everything else — see Finding I-4.
+            // `textContent`, never `innerHTML`: this is an error message, not markup `render.ts`
+            // already escaped.
+            importReport.textContent = errorMessage(err);
+        }
+    }
     let currentId = null;
     let current = null;
     // `.catch(report)` rather than a bare `void`: an unawaited rejection here would be an
@@ -33,6 +85,19 @@ export function mountStudio(root, store) {
         current = { har: read.har, etag: read.etag };
         entries.innerHTML = `<ul>${read.har.log.entries.map(renderEntryRow).join('')}</ul>`;
         detail.innerHTML = '';
+        // Spec §5.5: the import name prefills from the opened recording's `_recordingName`,
+        // so merging is one gesture and creating is one gesture plus typing a name. This is
+        // also the spec's own ergonomic defence against Finding I-2 (a padded name hashing
+        // to a different, identical-looking directory) — prefilling from a name Polly itself
+        // already wrote means fewer names get typed by hand at all.
+        const recordingName = read.har.log._recordingName;
+        // `importForm?.querySelector(...)` is `undefined`, not `null`, when `importForm`
+        // itself is absent — `=== null` alone would miss that and then dereference
+        // `undefined` below, so the guard checks `importForm` directly.
+        const nameField = importForm === null ? null : importForm.querySelector('#import-name');
+        if (nameField !== null && typeof recordingName === 'string' && recordingName !== '') {
+            nameField.value = recordingName;
+        }
     }
     /**
      * `entryId` always arrives as a string, because it came off `dataset`. `e._id` is
@@ -66,6 +131,24 @@ export function mountStudio(root, store) {
             report(err);
         }
     }
+    /**
+     * The copy lands at the end of its group, and that is the one we open: the
+     * entry you were looking at is unchanged, and the thing you are about to edit
+     * is the new answer, not the old one.
+     */
+    async function duplicate(entryId, order) {
+        if (currentId === null || current === null)
+            return;
+        try {
+            const { har } = await store.duplicateEntry(currentId, entryId, order, current.etag);
+            const added = har.log.entries.filter((entry) => String(entry._id) === entryId).length - 1;
+            await openRecording(currentId);
+            openEntry(entryId, added);
+        }
+        catch (err) {
+            report(err);
+        }
+    }
     async function remove(entryId, order) {
         if (currentId === null || current === null)
             return;
@@ -77,12 +160,17 @@ export function mountStudio(root, store) {
             report(err);
         }
     }
-    function report(err) {
-        const message = err instanceof StoreError && err.code === 'conflict'
+    // Shared by `report` (the `detail`-pane banner) and `runImport`'s catch (`#import-report`):
+    // both want the same friendlier wording for a conflict, neither wants a raw stack string.
+    function errorMessage(err) {
+        return err instanceof StoreError && err.code === 'conflict'
             ? 'the recording changed underneath — reload and retry'
             : err instanceof Error
                 ? err.message
                 : String(err);
+    }
+    function report(err) {
+        const message = errorMessage(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
@@ -124,6 +212,8 @@ export function mountStudio(root, store) {
         const order = Number(section.dataset['order']);
         if (target.getAttribute('name') === 'save')
             void save(entryId, order);
+        if (target.getAttribute('name') === 'duplicate')
+            void duplicate(entryId, order);
         if (target.getAttribute('name') === 'delete')
             void remove(entryId, order);
     });

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

@@ -2,7 +2,7 @@
  * 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>";
+export declare const STUDIO_MARKUP = "\n<div class=\"polly-studio\">\n<!--\n  Import sits beside the title, not inside the recordings list.\n  It makes a recording rather than picking one, so under the list it read as a\n  footer of that list \u2014 something you do *to* the thing above it \u2014 and it\n  pushed the list it was supposedly part of into a shorter and shorter box.\n-->\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  <form id=\"import\" class=\"ps-import\">\n    <h2 class=\"ps-import-title\">Import</h2>\n    <label for=\"import-name\">A HAR from the swagger-recorder extension</label>\n    <div class=\"ps-import-row\">\n      <input id=\"import-name\" name=\"recordingName\" placeholder=\"recording name, e.g. my-app\" />\n      <input id=\"import-file\" name=\"har\" type=\"file\" accept=\".har,application/json\" />\n      <button type=\"submit\">Import</button>\n    </div>\n    <div id=\"import-report\" aria-live=\"polite\"></div>\n  </form>\n</header>\n<p class=\"warn banner\">Polly's <code>keepUnusedRequests</code> defaults to <code>false</code>:\nthe next record run deletes every entry it did not exercise, including the ones you edit here.\nSet <code>persisterOptions.keepUnusedRequests: true</code> before editing.</p>\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.
  *
@@ -50,4 +50,4 @@ export declare const PAGE_STYLE = "\nhtml { color-scheme: light; }\nhtml, 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";
+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-lift: 0 1px 2px rgba(17,23,34,.05), 0 10px 22px -14px rgba(17,23,34,.35);\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/* The title on the left, import on the right, and the warning on its own line\n   underneath: three things competing for one row left the import squeezed into\n   whatever the banner had not taken. */\n.polly-studio .ps-bar {\n  display: flex; flex-wrap: wrap; align-items: flex-start;\n  justify-content: space-between; gap: .9rem 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  margin: .9rem 1.25rem 0; 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  /* Lifted off the paper, so where one region ends and the next begins is a\n     shadow rather than a hairline somebody has to look for. */\n  box-shadow: var(--ps-lift);\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/* Import form ------------------------------------------------------------ */\n/* A card of its own in the title bar. Bounded width so a long page does not\n   stretch it across the screen, and wide enough that the three controls sit on\n   one line at the sizes this is actually used at. */\n.polly-studio .ps-import {\n  display: grid; gap: .35rem;\n  flex: 0 1 34rem; min-width: 17rem;\n  padding: .6rem .7rem;\n  background: var(--ps-sunken);\n  border: 1px solid var(--ps-line); border-radius: 12px;\n  box-shadow: var(--ps-lift);\n}\n.polly-studio .ps-import-title {\n  margin: 0; font-size: .8125rem; font-weight: 650; color: var(--ps-ink);\n}\n.polly-studio .ps-import-row {\n  display: grid; gap: .4rem;\n  grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 1.2fr) auto;\n  align-items: center;\n}\n.polly-studio .ps-import label {\n  font-size: .75rem; font-weight: 600; color: var(--ps-ink-soft);\n}\n.polly-studio .ps-import input {\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-import input:hover { border-color: #a9b5c6; }\n.polly-studio .ps-import input:focus {\n  outline: none; border-color: var(--ps-accent); box-shadow: 0 0 0 3px var(--ps-accent-soft);\n}\n.polly-studio .ps-import input[type=\"file\"] { font-size: .75rem; padding: .3rem .4rem; }\n.polly-studio .ps-import button {\n  font: inherit; font-size: .8125rem; font-weight: 600;\n  justify-self: stretch; white-space: nowrap;\n  padding: .45rem .95rem; border-radius: 8px; cursor: pointer;\n  border: 1px solid transparent;\n  background: var(--ps-accent); color: #fff;\n  transition: background-color .12s ease;\n}\n.polly-studio .ps-import button:hover { background: var(--ps-accent-deep); }\n.polly-studio .ps-import button:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }\n.polly-studio .ps-import-result {\n  margin: .2rem 0 0; padding: .5rem .6rem; font-size: .78rem; line-height: 1.5;\n  background: var(--ps-sunken); border: 1px solid var(--ps-line);\n  border-left-width: 3px; border-radius: 0 8px 8px 0;\n}\n/* max-height + overflow-y: auto rather than relying on the pane's own scroll: the pane\n   around this (.ps-pane) is overflow: hidden, so without its own scroll a long skip\n   list would clip silently instead of growing the pane. */\n.polly-studio .ps-import-skips {\n  display: grid; gap: .25rem; margin: .4rem 0 0;\n  max-height: 10rem; overflow-y: auto;\n}\n.polly-studio .ps-import-skips li {\n  padding-left: .5rem; border-left: 2px solid var(--ps-line-strong);\n  font-size: .75rem; line-height: 1.4; color: var(--ps-ink-soft);\n}\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-import-row { grid-template-columns: minmax(0, 1fr); }\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";