@avivbenhamo/polly-kit 0.5.0 → 0.7.0

package/README.md

@@ -244,6 +244,24 @@ import {mountPollyStudio} from '@avivbenhamo/polly-kit/studio/browser';
 mountPollyStudio(document.getElementById('polly')!);
 ```
 
+### Importing a HAR
+
+The editor takes a HAR downloaded from the
+[swagger-recorder](../swagger-recorder/README.md) extension — the plain flavour, not the
+zip — and turns it into a recording. Give it the recording name your app's Polly config
+uses; it creates the recording if there is none, and merges into it if there is. It
+reports what it did: **added 3, replaced 2, skipped 1**.
+
+**Where a request is in both, the imported one wins.** That is usually what you want —
+you re-recorded because the response changed — but it means an import can overwrite a
+response you edited here. The `replaced` count is there so that is never silent.
+
+**Only HARs from that extension can be imported**, and the reason is not caution. Polly
+finds a recorded response by an `_id` that hashes the request body, and a multipart body
+is not in a HAR at all — an upload records with no `postData`. So no importer can derive
+an id; it can only read one that was written at capture time, and that extension is the
+only thing that writes one.
+
 ## API
 
 | Export | From | What |
@@ -259,6 +277,8 @@ mountPollyStudio(document.getElementById('polly')!);
 | `parseHar` / `findEntry` | `./studio` | Reading a HAR, with the Polly-specific quirks handled. |
 | `applyResponsePatch` / `deleteEntry` | `./studio` | Editing an entry, returning a typed `EditError` rather than throwing. |
 | `mountPollyStudio(root)` | `./studio/browser` | The editor with no server at all, against Polly's `persister-local-storage`. |
+| `mergeEntries` / `rejectImport` | `./studio` | The import rules, as pure functions. |
+| `guidForRecording(name)` | `./studio` | The directory Polly looks a recording up in. |
 
 `startPolly` options beyond the policy config: `mode` (required), `alwaysPassthrough`,
 `apiNamespace`, `saveDebounceMs`; on `./node`, `recordingsDir` and `logLevel` instead of

package/dist/studio/client.bundle.js

@@ -47,6 +47,15 @@ function renderRecordingList(recordings) {
   }).join("");
   return `<ul class="recordings">${rows}</ul>`;
 }
+function renderImportResult(result) {
+  const verb = result.created ? "Created" : "Updated";
+  const counts = [`added ${result.added}`, `replaced ${result.replaced}`];
+  if (result.skipped.length > 0)
+    counts.push(`skipped ${result.skipped.length}`);
+  const skips = result.skipped.length === 0 ? "" : `<ul class="ps-import-skips">${result.skipped.map((skip) => `<li><code>${escapeHtml(skip.url)}</code> \u2014 ${escapeHtml(skip.reason)}</li>`).join("")}</ul>`;
+  const rejectWarning = result.pollyWillReject === null ? "" : `<p class="ps-notice warn">Polly will reject this: ${escapeHtml(result.pollyWillReject)}</p>`;
+  return `<p class="ps-import-result">${verb} <code>${escapeHtml(result.id)}</code> \u2014 ${escapeHtml(counts.join(", "))}.</p>${skips}${rejectWarning}`;
+}
 function unrenderable(err) {
   return escapeHtml(err instanceof Error ? err.message : String(err));
 }
@@ -122,6 +131,35 @@ 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");
+  importForm?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    void runImport();
+  });
+  async function runImport() {
+    if (importForm === null || importReport === null)
+      return;
+    importReport.textContent = "";
+    try {
+      const name = importForm.querySelector("#import-name").value;
+      const file = importForm.querySelector("#import-file").files?.[0];
+      if (file === void 0) {
+        throw new Error("choose a .har file to import");
+      }
+      const har = JSON.parse(await file.text());
+      const result = await store.importHar(name, har);
+      importReport.innerHTML = renderImportResult(result);
+      try {
+        await refreshRecordings();
+        await openRecording(result.id);
+      } catch (err) {
+        report(err);
+      }
+    } catch (err) {
+      importReport.textContent = errorMessage(err);
+    }
+  }
   let currentId = null;
   let current = null;
   refreshRecordings().catch(report);
@@ -134,6 +172,11 @@ function mountStudio(root, store) {
     current = { har: read.har, etag: read.etag };
     entries.innerHTML = `<ul>${read.har.log.entries.map(renderEntryRow).join("")}</ul>`;
     detail.innerHTML = "";
+    const recordingName = read.har.log._recordingName;
+    const nameField = importForm === null ? null : importForm.querySelector("#import-name");
+    if (nameField !== null && typeof recordingName === "string" && recordingName !== "") {
+      nameField.value = recordingName;
+    }
   }
   function openEntry(entryId, order) {
     const entry = current?.har.log.entries.find((e) => String(e._id) === entryId && e._order === order);
@@ -166,8 +209,11 @@ function mountStudio(root, store) {
       report(err);
     }
   }
+  function errorMessage(err) {
+    return err instanceof StoreError && err.code === "conflict" ? "the recording changed underneath \u2014 reload and retry" : err instanceof Error ? err.message : String(err);
+  }
   function report(err) {
-    const message = err instanceof StoreError && err.code === "conflict" ? "the recording changed underneath \u2014 reload and retry" : err instanceof Error ? err.message : String(err);
+    const message = errorMessage(err);
     const banner = detail.ownerDocument.createElement("p");
     banner.className = "problem";
     banner.textContent = message;
@@ -266,6 +312,17 @@ var HttpStore = class {
   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 \u2014 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/import.d.ts

@@ -0,0 +1,34 @@
+import type { Har, HarEntry } from './types.js';
+/** The creator name the extension writes. Nothing else may be imported — see spec §3. */
+export declare const IMPORTABLE_CREATOR_NAME = "swagger-recorder";
+export interface ImportSkip {
+    url: string;
+    reason: string;
+}
+export interface ImportOutcome {
+    entries: HarEntry[];
+    added: number;
+    replaced: number;
+    skipped: ImportSkip[];
+}
+/**
+ * Whole-file rejection, null when the file is importable.
+ *
+ * The creator check is not caution, it is a correctness limit. An entry's `_id`
+ * is an md5 over method, url and body, and a multipart body is not in a HAR at
+ * all — so no importer can derive an id, and only this extension writes one.
+ * Accepting a DevTools export would mean writing entries with no id, or guessing.
+ */
+export declare function rejectImport(har: Har): string | null;
+/**
+ * Incoming entries folded into existing ones, keyed on `_id`.
+ *
+ * New wins, and a replacement keeps its position: the UI lists entries in file
+ * order, so a merge that moved them would read as the recording having changed
+ * more than it did.
+ *
+ * Duplicates inside the incoming file collapse rather than appending twice.
+ * Polly's `findEntry` stops at the first `_id` match, so a second copy is an
+ * entry nothing can reach, and re-importing would grow the file without bound.
+ */
+export declare function mergeEntries(existing: HarEntry[], incoming: HarEntry[]): ImportOutcome;

package/dist/studio/import.js

@@ -0,0 +1,93 @@
+/** The creator name the extension writes. Nothing else may be imported — see spec §3. */
+export const IMPORTABLE_CREATOR_NAME = 'swagger-recorder';
+/**
+ * Whole-file rejection, null when the file is importable.
+ *
+ * The creator check is not caution, it is a correctness limit. An entry's `_id`
+ * is an md5 over method, url and body, and a multipart body is not in a HAR at
+ * all — so no importer can derive an id, and only this extension writes one.
+ * Accepting a DevTools export would mean writing entries with no id, or guessing.
+ */
+export function rejectImport(har) {
+    const creator = har.log?.creator?.name;
+    if (creator !== IMPORTABLE_CREATOR_NAME) {
+        return `this HAR's creator is ${JSON.stringify(creator ?? null)} — only HARs downloaded from the swagger-recorder extension can be imported, because only they carry the Polly ids replay needs`;
+    }
+    if (!Array.isArray(har.log.entries) || har.log.entries.length === 0) {
+        return 'this HAR has no entries';
+    }
+    return null;
+}
+/**
+ * Incoming entries folded into existing ones, keyed on `_id`.
+ *
+ * New wins, and a replacement keeps its position: the UI lists entries in file
+ * order, so a merge that moved them would read as the recording having changed
+ * more than it did.
+ *
+ * Duplicates inside the incoming file collapse rather than appending twice.
+ * Polly's `findEntry` stops at the first `_id` match, so a second copy is an
+ * entry nothing can reach, and re-importing would grow the file without bound.
+ */
+export function mergeEntries(existing, incoming) {
+    const entries = [...existing];
+    const positions = new Map();
+    // First-wins, not last-wins: `buildPollyHar` stamps `_order: 0` on every entry
+    // without deduping, so an existing recording can legitimately hold the same
+    // `_id` twice. Polly's `findEntry` (har.ts) resolves an id to the FIRST match,
+    // so that is the index a replacement has to target — overwriting the later
+    // occurrence would report success while changing a slot Polly never reads.
+    entries.forEach((entry, index) => {
+        if (typeof entry?._id === 'string' && !positions.has(entry._id))
+            positions.set(entry._id, index);
+    });
+    const skipped = [];
+    let added = 0;
+    let replaced = 0;
+    for (const candidate of incoming) {
+        const problem = unusable(candidate);
+        if (problem !== null) {
+            skipped.push({ url: urlOf(candidate), reason: problem });
+            continue;
+        }
+        // `_order` is stamped rather than carried: polly-kit sets
+        // `matchRequestsBy.order: false`, so Polly computes 0 for every request.
+        const entry = { ...candidate, _order: 0 };
+        const at = positions.get(entry._id);
+        if (at === undefined) {
+            positions.set(entry._id, entries.length);
+            entries.push(entry);
+            added++;
+            continue;
+        }
+        // A collision with an entry this same import just added counts as neither:
+        // it was already reported as `added`, and reporting it as `replaced` too
+        // would describe one incoming entry twice.
+        const wasJustAdded = at >= existing.length;
+        entries[at] = entry;
+        if (!wasJustAdded)
+            replaced++;
+    }
+    return { entries, added, replaced, skipped };
+}
+/** Null when the entry can be written. A reason naming the cause otherwise. */
+function unusable(entry) {
+    if (entry === null || typeof entry !== 'object') {
+        return 'not an object — this is not a HAR entry';
+    }
+    if (typeof entry._id !== 'string' || entry._id === '') {
+        return 'no _id: recorded by an extension version that did not write one, so Polly could never find it. Record again with the current extension.';
+    }
+    if (entry.request === null || typeof entry.request !== 'object') {
+        return 'no request — this is not a HAR entry';
+    }
+    if (entry.response === null || typeof entry.response !== 'object') {
+        return 'no response, so there is nothing to replay';
+    }
+    return null;
+}
+/** Best-effort label for the skip report. Never throws on a malformed entry. */
+function urlOf(entry) {
+    const url = entry?.request?.url;
+    return typeof url === 'string' ? url : '(unknown url)';
+}

package/dist/studio/index.d.ts

@@ -7,3 +7,7 @@ export { parseHar, findEntry, POLLY_CREATOR_NAME } from './har.js';
 export { applyResponsePatch, deleteEntry } from './edit.js';
 export type { EditError, EditResult } from './edit.js';
 export type { Har, HarEntry, HarLog, HarRequest, HarResponse, HarContent, NvPair, ResponsePatch, } from './types.js';
+export { mergeEntries, rejectImport, IMPORTABLE_CREATOR_NAME } from './import.js';
+export type { ImportOutcome, ImportSkip } from './import.js';
+export { guidForRecording, rejectRecordingName } from './recording-id.js';
+export type { ImportResult } from './stores/types.js';

package/dist/studio/index.js

@@ -3,3 +3,5 @@ export { FsStore, serializeHar } from './stores/fs-store.js';
 export { StoreError } from './stores/types.js';
 export { parseHar, findEntry, POLLY_CREATOR_NAME } from './har.js';
 export { applyResponsePatch, deleteEntry } from './edit.js';
+export { mergeEntries, rejectImport, IMPORTABLE_CREATOR_NAME } from './import.js';
+export { guidForRecording, rejectRecordingName } from './recording-id.js';

package/dist/studio/recording-id.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Trimmed before it reaches Polly's hashing, not just checked: `' my-app '` and
+ * `'my-app'` hash to `my-app_4097172865` and `my-app_4014489609` — the slug half
+ * is identical, so the wrong directory looks right in a listing. Trimming here
+ * rather than in `rejectRecordingName` (a guard, not a transform) means every
+ * caller gets it whether or not they remembered to trim first.
+ */
+export declare function guidForRecording(recordingName: string): string;
+/**
+ * Why an empty name is refused rather than hashed.
+ *
+ * `guidForRecording('')` is `_2166136261` — a valid directory name that would be
+ * created happily and then never read, because no app configures an empty
+ * `recordingName`. Refusing names the mistake at the point it is made.
+ */
+export declare function rejectRecordingName(name: string): string | null;

package/dist/studio/recording-id.js

@@ -0,0 +1,35 @@
+/**
+ * The directory Polly looks a recording up in.
+ *
+ * Taken from Polly's own module rather than copied. The ten lines are easy to
+ * reproduce and easy to reproduce *wrongly*: `@sindresorhus/fnv1a@2`'s default
+ * export is the legacy 32-bit number implementation, which is the one Polly
+ * calls, while its named size exports return BigInt and would yield a different
+ * directory. A copy that drifted would send every recording somewhere nothing
+ * reads — silently, since a missing directory is a normal state.
+ *
+ * `@pollyjs/core` declares no `exports` map, so the deep path resolves.
+ * `test/studio/recording-id.test.ts` pins the result, so a core that moves the
+ * file fails a test rather than changing where recordings go.
+ */
+import guidFor from '@pollyjs/core/src/utils/guid-for-recording.js';
+/**
+ * Trimmed before it reaches Polly's hashing, not just checked: `' my-app '` and
+ * `'my-app'` hash to `my-app_4097172865` and `my-app_4014489609` — the slug half
+ * is identical, so the wrong directory looks right in a listing. Trimming here
+ * rather than in `rejectRecordingName` (a guard, not a transform) means every
+ * caller gets it whether or not they remembered to trim first.
+ */
+export function guidForRecording(recordingName) {
+    return guidFor(recordingName.trim());
+}
+/**
+ * Why an empty name is refused rather than hashed.
+ *
+ * `guidForRecording('')` is `_2166136261` — a valid directory name that would be
+ * created happily and then never read, because no app configures an empty
+ * `recordingName`. Refusing names the mistake at the point it is made.
+ */
+export function rejectRecordingName(name) {
+    return name.trim() === '' ? 'a recording name is required' : null;
+}

package/dist/studio/server.js

@@ -66,6 +66,30 @@ async function handle(req, res, ctx) {
             sendJson(res, 200, { recordings: await ctx.store.list() });
             return;
         }
+        if (path === '/api/import' && req.method === 'POST') {
+            const body = await readJson(req, MAX_IMPORT_BYTES);
+            if (!body.ok) {
+                if (body.status === 413)
+                    res.setHeader('connection', 'close');
+                sendJson(res, body.status, { error: body.error });
+                return;
+            }
+            // A body of `null`, `[]` or `"x"` is valid JSON with no fields. Coercing to
+            // `{}` keeps the destructuring off a non-object, which would throw into the 500.
+            const fields = (typeof body.value === 'object' && body.value !== null ? body.value : {});
+            if (typeof fields.recordingName !== 'string') {
+                sendJson(res, 400, { error: 'recordingName must be a string' });
+                return;
+            }
+            if (fields.har === null || typeof fields.har !== 'object') {
+                sendJson(res, 400, { error: 'har must be a HAR object' });
+                return;
+            }
+            // StoreError from here — a rejected creator, an empty name, a corrupt
+            // target — lands in the catch-all below, which maps `unprocessable` to 422.
+            sendJson(res, 200, await ctx.store.importHar(fields.recordingName, fields.har));
+            return;
+        }
         // /api/recordings/:id  and  /api/recordings/:id/entries/:_id/:_order
         const segments = path.split('/').filter((segment) => segment !== '');
         const rawId = segments[2];
@@ -89,7 +113,7 @@ async function handle(req, res, ctx) {
                 }
                 const order = Number(segments[5]);
                 if (req.method === 'PATCH') {
-                    const body = await readJson(req);
+                    const body = await readJson(req, MAX_EDIT_BYTES);
                     if (!body.ok) {
                         if (body.status === 413)
                             res.setHeader('connection', 'close');
@@ -113,9 +137,10 @@ async function handle(req, res, ctx) {
     }
     catch (err) {
         if (err instanceof StoreError) {
-            // `unprocessable` is unreachable while this handler calls only list/read/write, but
-            // Task 11's HttpStore and any switch to `store.patchEntry` make it reachable — and
-            // it would arrive as a binary-body refusal, which is a 422, not a 403.
+            // `unprocessable` is reachable: `/api/import` calls `store.importHar`, which raises
+            // it for a rejected creator, an empty recording name, or a corrupt target recording.
+            // Each of those — like a binary-body refusal elsewhere on the interface — is a 422,
+            // not a 403.
             const status = err.code === 'not-found'
                 ? 404
                 : err.code === 'conflict'
@@ -196,7 +221,14 @@ function decodeSegment(segment) {
  * The cap on a PATCH body. Generous for the JSON around one edited HAR entry, and far
  * below what it takes to hurt the host process.
  */
-const MAX_BODY_BYTES = 4 * 1024 * 1024;
+const MAX_EDIT_BYTES = 4 * 1024 * 1024;
+/**
+ * The cap on an imported HAR, which is a whole recording rather than one entry.
+ * Matched to the recording store's own 50 MB limit (`src/store.ts`): a file the
+ * store will happily persist must not be refused on the way in, or the feature
+ * fails on exactly the recordings worth importing — the ones with image bodies.
+ */
+const MAX_IMPORT_BYTES = 50 * 1024 * 1024;
 /**
  * The request body, bounded and parsed.
  *
@@ -206,7 +238,7 @@ const MAX_BODY_BYTES = 4 * 1024 * 1024;
  * A `SyntaxError` from `JSON.parse` is the same failure class as the malformed
  * percent-encoding handled in `decodeSegment`: a malformed request, not a server fault.
  */
-async function readJson(req) {
+async function readJson(req, limit) {
     const chunks = [];
     let bytes = 0;
     let overflowed = false;
@@ -215,7 +247,7 @@ async function readJson(req) {
         bytes += buffer.length;
         if (overflowed)
             continue;
-        if (bytes > MAX_BODY_BYTES) {
+        if (bytes > limit) {
             // Drop what was accumulated and stop accumulating, but keep draining. The cap is
             // about retained memory, and this bounds it. Neither `req.destroy()` nor
             // `req.pause()` works here: destroying resets the socket so a client still
@@ -228,7 +260,7 @@ async function readJson(req) {
         chunks.push(buffer);
     }
     if (overflowed) {
-        return { ok: false, status: 413, error: `request body exceeds ${MAX_BODY_BYTES} bytes` };
+        return { ok: false, status: 413, error: `request body exceeds ${limit} bytes` };
     }
     const raw = Buffer.concat(chunks).toString('utf8');
     if (raw === '')

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

@@ -1,6 +1,16 @@
-import type { ReadResult, RecordingStore } from './types.js';
-import type { ResponsePatch } from '../types.js';
+import type { ReadResult, RecordingStore, ImportResult } from './types.js';
+import type { Har, ResponsePatch } from '../types.js';
 type Local = Pick<RecordingStore, 'read' | 'write'>;
 export declare function patchEntryVia(store: Local, id: string, entryId: string, order: number, etag: string, patch: ResponsePatch): Promise<ReadResult>;
 export declare function deleteEntryVia(store: Local, id: string, entryId: string, order: number, etag: string): Promise<ReadResult>;
+type Importable = Pick<RecordingStore, 'read' | 'write' | 'create'>;
+/**
+ * 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 declare function importHarVia(store: Importable & Pick<RecordingStore, 'list'>, recordingName: string, incoming: Har): Promise<ImportResult>;
 export {};

package/dist/studio/stores/apply.js

@@ -1,4 +1,7 @@
 import { applyResponsePatch, deleteEntry as deleteEntryIn } 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));
@@ -18,3 +21,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
@@ -49,6 +50,14 @@ export declare class FsStore implements RecordingStore {
     delete(id: string): Promise<void>;
     patchEntry(id: string, entryId: string, order: number, etag: string, patch: ResponsePatch): 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, importHarVia, patchEntryVia } from './apply.js';
 export { StoreError } from './types.js';
 const FILENAME = 'recording.har';
 /**
@@ -154,6 +154,28 @@ export class FsStore {
     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
@@ -26,5 +26,12 @@ export declare class HttpStore implements RecordingStore {
     delete(id: string): Promise<void>;
     patchEntry(id: string, entryId: string, order: number, etag: string, patch: ResponsePatch): 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

@@ -39,6 +39,17 @@ export class HttpStore {
     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;
@@ -20,6 +20,8 @@ export declare class LocalStorageStore implements RecordingStore {
     delete(id: string): Promise<void>;
     patchEntry(id: string, entryId: string, order: number, etag: string, patch: ResponsePatch): 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, importHarVia, patchEntryVia } from './apply.js';
 /** Polly's default namespace. `persisterOptions.local-storage.key` can change it. */
 const DEFAULT_KEY = 'pollyjs';
 /**
@@ -93,6 +93,18 @@ export class LocalStorageStore {
     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,
@@ -37,6 +46,22 @@ 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>;
+    /**
+     * 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
@@ -77,12 +142,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

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<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    <form id=\"import\" class=\"ps-import\">\n      <label for=\"import-name\">Import a HAR from the swagger-recorder extension</label>\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 id=\"import-report\" aria-live=\"polite\"></div>\n    </form>\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-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/* Import form ------------------------------------------------------------ */\n.polly-studio .ps-import {\n  display: grid; gap: .4rem;\n  padding: .7rem .75rem; margin-top: .4rem;\n  border-top: 1px solid var(--ps-line);\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: start;\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-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

@@ -17,6 +17,13 @@ export const STUDIO_MARKUP = `
   <section class="ps-pane ps-pane--list">
     <h2 class="ps-pane-title">Recordings</h2>
     <nav id="recordings" class="ps-scroll">Loading…</nav>
+    <form id="import" class="ps-import">
+      <label for="import-name">Import a HAR from the swagger-recorder extension</label>
+      <input id="import-name" name="recordingName" placeholder="recording name, e.g. my-app" />
+      <input id="import-file" name="har" type="file" accept=".har,application/json" />
+      <button type="submit">Import</button>
+      <div id="import-report" aria-live="polite"></div>
+    </form>
   </section>
   <section class="ps-pane ps-pane--list">
     <h2 class="ps-pane-title">Requests</h2>
@@ -210,6 +217,55 @@ export const STUDIO_STYLE = `
 }
 .polly-studio .ps-rec-note { margin: .1rem 0 .3rem .5rem; font-size: .75rem; line-height: 1.4; }
 
+/* Import form ------------------------------------------------------------ */
+.polly-studio .ps-import {
+  display: grid; gap: .4rem;
+  padding: .7rem .75rem; margin-top: .4rem;
+  border-top: 1px solid var(--ps-line);
+}
+.polly-studio .ps-import label {
+  font-size: .75rem; font-weight: 600; color: var(--ps-ink-soft);
+}
+.polly-studio .ps-import input {
+  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-import input:hover { border-color: #a9b5c6; }
+.polly-studio .ps-import input:focus {
+  outline: none; border-color: var(--ps-accent); box-shadow: 0 0 0 3px var(--ps-accent-soft);
+}
+.polly-studio .ps-import input[type="file"] { font-size: .75rem; padding: .3rem .4rem; }
+.polly-studio .ps-import button {
+  font: inherit; font-size: .8125rem; font-weight: 600;
+  justify-self: start;
+  padding: .45rem .95rem; border-radius: 8px; cursor: pointer;
+  border: 1px solid transparent;
+  background: var(--ps-accent); color: #fff;
+  transition: background-color .12s ease;
+}
+.polly-studio .ps-import button:hover { background: var(--ps-accent-deep); }
+.polly-studio .ps-import button:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
+.polly-studio .ps-import-result {
+  margin: .2rem 0 0; padding: .5rem .6rem; font-size: .78rem; line-height: 1.5;
+  background: var(--ps-sunken); border: 1px solid var(--ps-line);
+  border-left-width: 3px; border-radius: 0 8px 8px 0;
+}
+/* max-height + overflow-y: auto rather than relying on the pane's own scroll: the pane
+   around this (.ps-pane) is overflow: hidden, so without its own scroll a long skip
+   list would clip silently instead of growing the pane. */
+.polly-studio .ps-import-skips {
+  display: grid; gap: .25rem; margin: .4rem 0 0;
+  max-height: 10rem; overflow-y: auto;
+}
+.polly-studio .ps-import-skips li {
+  padding-left: .5rem; border-left: 2px solid var(--ps-line-strong);
+  font-size: .75rem; line-height: 1.4; color: var(--ps-ink-soft);
+}
+
 /* Request list --------------------------------------------------------- */
 .polly-studio button.entry {
   display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;

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

@@ -1,4 +1,4 @@
-import type { RecordingSummary } from '../stores/types.js';
+import type { ImportResult, 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
@@ -21,5 +21,19 @@ import type { HarEntry } from '../types.js';
  */
 export declare function escapeHtml(value: string | number | boolean | null | undefined): string;
 export declare function renderRecordingList(recordings: RecordingSummary[]): string;
+/**
+ * What an import did, stated rather than implied.
+ *
+ * `replaced` is the line that has to be here: new-wins means an import can
+ * overwrite a response edited in this very UI, and the only thing standing
+ * between that and a silent loss is saying so.
+ *
+ * `pollyWillReject` is the other half: `ImportResult extends ReadResult`, so a
+ * successful import can still land in a file Polly's own `findRecording` will
+ * refuse wholesale — a hand-copied plain HAR whose `creator.name` is still
+ * `swagger-recorder`, say. Without this, the report says "Created" and nothing
+ * else, which reads as success right up until Polly disagrees.
+ */
+export declare function renderImportResult(result: ImportResult): string;
 export declare function renderEntryRow(entry: HarEntry): string;
 export declare function renderEntryDetail(entry: HarEntry): string;

package/dist/studio/ui/render.js

@@ -66,6 +66,34 @@ export function renderRecordingList(recordings) {
         .join('');
     return `<ul class="recordings">${rows}</ul>`;
 }
+/**
+ * What an import did, stated rather than implied.
+ *
+ * `replaced` is the line that has to be here: new-wins means an import can
+ * overwrite a response edited in this very UI, and the only thing standing
+ * between that and a silent loss is saying so.
+ *
+ * `pollyWillReject` is the other half: `ImportResult extends ReadResult`, so a
+ * successful import can still land in a file Polly's own `findRecording` will
+ * refuse wholesale — a hand-copied plain HAR whose `creator.name` is still
+ * `swagger-recorder`, say. Without this, the report says "Created" and nothing
+ * else, which reads as success right up until Polly disagrees.
+ */
+export function renderImportResult(result) {
+    const verb = result.created ? 'Created' : 'Updated';
+    const counts = [`added ${result.added}`, `replaced ${result.replaced}`];
+    if (result.skipped.length > 0)
+        counts.push(`skipped ${result.skipped.length}`);
+    const skips = result.skipped.length === 0
+        ? ''
+        : `<ul class="ps-import-skips">${result.skipped
+            .map((skip) => `<li><code>${escapeHtml(skip.url)}</code> — ${escapeHtml(skip.reason)}</li>`)
+            .join('')}</ul>`;
+    const rejectWarning = result.pollyWillReject === null
+        ? ''
+        : `<p class="ps-notice warn">Polly will reject this: ${escapeHtml(result.pollyWillReject)}</p>`;
+    return `<p class="ps-import-result">${verb} <code>${escapeHtml(result.id)}</code> — ${escapeHtml(counts.join(', '))}.</p>${skips}${rejectWarning}`;
+}
 /**
  * The other half of the same problem `escapeHtml`'s `String(value)` closes, and the half
  * stringifying a leaf cannot reach. `isHarShaped` checks only that `log.entries` is an

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avivbenhamo/polly-kit",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Drop-in record/replay of an app's HTTP traffic with Polly.JS, plus the polly-studio editor. Bring your own host policy.",
   "license": "MIT",
   "type": "module",