@hozu/devtools 0.12.0 → 0.13.0

package/dist/overlay/effects.js

@@ -1,15 +1,9 @@
-var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
-    if (typeof path === "string" && /^\.\.?\//.test(path)) {
-        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
-            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
-        });
-    }
-    return path;
-};
-import { h } from './dom.js';
-export const effects = (path) => fetch(`/_hozu/dev/effects?path=${encodeURIComponent(path)}`)
+import { h, read, write } from './dom.js';
+import { curl, traced } from './trace.js';
+const getJson = (path) => fetch(path)
     .then((r) => (r.ok ? r.json() : null))
     .catch(() => null);
+export const effects = (path) => getJson(`/_hozu/dev/effects?path=${encodeURIComponent(path)}`);
 const payloadOf = (doc) => {
     try {
         return JSON.parse(doc.getElementById('hozu-payload')?.textContent ?? 'null');
@@ -18,32 +12,23 @@ const payloadOf = (doc) => {
         return null;
     }
 };
-/** The input the page is using for a query, from its payload; else an example from the schema. */
-function inputFor(effect, doc) {
-    const data = (payloadOf(doc)?.data ?? []);
-    const key = data
-        .map(([k]) => k)
-        .find((k) => k.startsWith(effect.ref) && '{['.includes(k[effect.ref.length] ?? ''));
-    if (key) {
-        try {
-            return JSON.parse(key.slice(effect.ref.length));
-        }
-        catch { }
-    }
-    return example(effect.input);
-}
-function example(schema) {
+export function example(schema) {
+    if (!schema)
+        return null;
     if (schema.default !== undefined)
         return schema.default;
     if (Array.isArray(schema.enum))
         return schema.enum[0];
     if ('const' in schema)
         return schema.const;
+    const alternatives = schema.anyOf ?? schema.oneOf;
+    if (Array.isArray(alternatives))
+        return example(alternatives.find((a) => a.type !== 'null') ?? alternatives[0]);
     const type = Array.isArray(schema.type) ? schema.type[0] : schema.type;
     if (type === 'object')
         return Object.fromEntries(Object.entries((schema.properties ?? {})).map(([k, v]) => [k, example(v)]));
     if (type === 'array')
-        return [];
+        return schema.items ? [example(schema.items)] : [];
     if (type === 'number' || type === 'integer')
         return 0;
     if (type === 'boolean')
@@ -52,105 +37,296 @@ function example(schema) {
         return null;
     return '';
 }
+/** The input the page uses for a query (from its payload), else an example from the schema. */
+function startInput(effect, doc) {
+    const data = (payloadOf(doc)?.data ?? []);
+    const key = data
+        .map(([k]) => k)
+        .find((k) => k.startsWith(effect.ref) && '{['.includes(k[effect.ref.length] ?? ''));
+    if (key)
+        try {
+            return JSON.parse(key.slice(effect.ref.length));
+        }
+        catch { }
+    return example(effect.input);
+}
 const scalar = (s) => ['string', 'number', 'integer', 'boolean'].includes(s.type) || Array.isArray(s.enum);
-/** Server effects go through the app's own endpoints; browser-run ones load the page's fetch bundle. */
-export async function call(effect, input, doc) {
+const flat = (schema) => schema.type === 'object' && Object.values((schema.properties ?? {})).every((p) => scalar(p));
+const hookOf = (win) => win.__hozu;
+/** Runs an effect the way the page would: through the page's client when it has one, else the app's endpoints. */
+async function call(effect, input, win) {
     const started = performance.now();
-    const elapsed = () => Math.round(performance.now() - started);
-    if (effect.runs === 'browser') {
-        const payload = payloadOf(doc);
-        const feature = effect.ref.slice(0, effect.ref.indexOf('.'));
-        const url = payload?.fetches?.[feature];
-        if (!url)
-            return {
+    const hook = hookOf(win);
+    const where = effect.runs === 'server' ? 'server' : 'browser';
+    const base = {
+        ref: effect.ref,
+        kind: effect.kind,
+        runs: effect.runs,
+        input,
+        where,
+        status: null,
+        headers: [],
+    };
+    const done = (result, tags, refreshed) => ({
+        ...base,
+        ok: result.ok,
+        error: result.ok ? null : result.error,
+        value: result.ok ? result.value : result.data,
+        ms: Math.round(performance.now() - started),
+        tags,
+        refreshed,
+    });
+    try {
+        if (hook?.invoke && hook.query) {
+            if (effect.kind === 'mutation') {
+                const { result, tags } = await hook.invoke(effect.ref, input);
+                return done(result, tags, true);
+            }
+            return done(await hook.query(effect.ref, input), [], false);
+        }
+        if (effect.runs === 'browser')
+            return done({
                 ok: false,
                 error: 'Unexpected',
-                value: 'This page has no fetch bundle',
-                ms: 0,
-                invalidated: [],
-                where: 'browser',
-            };
-        const failed = Symbol('fail');
+                data: { message: 'This page has no client: browser-run effects need one' },
+            }, [], false);
+        const query = effect.kind === 'query';
+        const response = await win.fetch(query ? '/_hozu/query' : '/_hozu/effect', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(query ? { query: effect.ref, input } : { effect: effect.ref, input, keys: [] }),
+        });
+        if (!response.ok)
+            return done({ ok: false, error: 'Unexpected', data: { message: await response.text() } }, [], false);
+        const body = (await response.json());
+        return {
+            ...done((query ? body : body.result), body.tags ?? [], false),
+            where: 'server',
+        };
+    }
+    catch (error) {
+        return done({ ok: false, error: 'Unexpected', data: { message: String(error) } }, [], false);
+    }
+}
+const parsed = (text) => {
+    try {
+        return JSON.parse(text);
+    }
+    catch {
+        return text;
+    }
+};
+const paramsOf = (path) => [...path.matchAll(/:([A-Za-z_]\w*)/g)].map((m) => m[1]);
+/** Sends a request to a declared endpoint, as a client of the app would (cookies included). */
+async function send(endpoint, request, win) {
+    const started = performance.now();
+    let path = endpoint.path;
+    for (const [name, value] of Object.entries(request.params))
+        path = path.replace(`:${name}`, encodeURIComponent(value));
+    const url = new URL(path, win.location.origin);
+    let body = null;
+    const headers = new Headers(request.headers.filter(([k]) => k.trim()));
+    if (endpoint.method === 'GET') {
         try {
-            const module = (await import(__rewriteRelativeImportExtension(/* @vite-ignore */ url)));
-            const value = await module[effect.ref.slice(feature.length + 1)](input, {
-                fail: (error, data) => {
-                    throw { [failed]: { error, data } };
-                },
-                signal: new AbortController().signal,
-                env: payload?.env ?? {},
-            });
-            return { ok: true, error: null, value, ms: elapsed(), invalidated: [], where: 'browser' };
+            const query = JSON.parse(request.body || '{}');
+            for (const [k, v] of Object.entries(query))
+                for (const one of Array.isArray(v) ? v : [v])
+                    url.searchParams.append(k, String(one));
         }
-        catch (thrown) {
-            const marked = thrown?.[failed];
-            return marked
-                ? {
-                    ok: false,
-                    error: marked.error,
-                    value: marked.data,
-                    ms: elapsed(),
-                    invalidated: [],
-                    where: 'browser',
-                }
-                : {
-                    ok: false,
-                    error: 'Unexpected',
-                    value: String(thrown),
-                    ms: elapsed(),
-                    invalidated: [],
-                    where: 'browser',
-                };
+        catch { }
+    }
+    else {
+        body = request.body;
+        if (!headers.has('content-type') && !endpoint.raw)
+            headers.set('content-type', 'application/json');
+    }
+    const base = {
+        ref: endpoint.ref,
+        kind: 'endpoint',
+        runs: 'server',
+        input: parsed(request.body),
+        where: 'server',
+        tags: [],
+        refreshed: false,
+        url: url.href,
+    };
+    try {
+        const response = await win.fetch(url, { method: endpoint.method, headers, body, redirect: 'manual' });
+        if (response.type === 'opaqueredirect')
+            return {
+                ...base,
+                ok: true,
+                error: null,
+                value: 'A redirect (the browser does not show where to; open the endpoint URL to follow it)',
+                ms: Math.round(performance.now() - started),
+                status: 0,
+                headers: [],
+            };
+        const text = await response.text();
+        let value = text;
+        try {
+            value = JSON.parse(text);
         }
+        catch { }
+        return {
+            ...base,
+            ok: response.ok,
+            error: response.ok ? null : `HTTP ${response.status}`,
+            value,
+            ms: Math.round(performance.now() - started),
+            status: response.status,
+            headers: [...response.headers],
+        };
     }
-    const query = effect.kind === 'query';
-    const response = await fetch(query ? '/_hozu/query' : '/_hozu/effect', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify(query ? { query: effect.ref, input } : { effect: effect.ref, input, keys: [] }),
-    });
-    if (!response.ok)
+    catch (error) {
         return {
+            ...base,
             ok: false,
             error: 'Unexpected',
-            value: await response.text(),
-            ms: elapsed(),
-            invalidated: [],
-            where: 'server',
+            value: String(error),
+            ms: Math.round(performance.now() - started),
+            status: null,
+            headers: [],
         };
-    const body = (await response.json());
-    const result = (query ? body : body.result);
+    }
+}
+export const hozuCall = (r, scope) => `npx hozu call ${r.ref} --input '${JSON.stringify(r.input).replace(/'/g, "'\\''")}'${scope === 'user' ? ` --session '<the session JSON>'` : ''}${r.kind === 'mutation' ? ' --write' : ''}`;
+const KEY = `hozu-devtools-api:${location.host}`;
+/** A record saved by this or an older DevTools, with every field present; null when it is not one. */
+const normal = (r) => {
+    const o = r;
+    if (!o || typeof o.ref !== 'string' || typeof o.id !== 'number')
+        return null;
     return {
-        ok: result.ok === true,
-        error: result.ok ? null : String(result.error),
-        value: result.ok ? result.value : result.data,
-        ms: elapsed(),
-        invalidated: query ? [] : (body.tags ?? []),
+        kind: 'query',
+        runs: 'server',
+        input: null,
+        ok: false,
+        error: null,
+        value: null,
+        ms: 0,
         where: 'server',
+        tags: [],
+        refreshed: false,
+        status: null,
+        headers: [],
+        requests: [],
+        at: o.id,
+        ...o,
     };
-}
-const where = (runs, plain) => runs === 'server'
-    ? plain
-        ? 'on your server'
-        : 'runs: server'
-    : runs === 'browser'
-        ? plain
-            ? 'in the browser'
-            : 'runs: browser'
-        : plain
-            ? 'server first, then the browser'
-            : 'runs: either';
-function fields(effect, start, onChange) {
-    const schema = effect.input;
-    const props = (schema.properties ?? {});
-    if (schema.type === 'object' && Object.values(props).every(scalar)) {
-        const value = { ...start };
+};
+export function drawer(host) {
+    const saved = read(KEY, {});
+    const ui = {
+        tab: saved.tab ?? 'query',
+        view: saved.view ?? 'table',
+        height: saved.height ?? 340,
+        open: saved.open ?? false,
+        history: (Array.isArray(saved.history) ? saved.history : []).flatMap((r) => normal(r) ?? []),
+    };
+    if (!['query', 'mutation', 'endpoint', 'history'].includes(ui.tab))
+        ui.tab = 'query';
+    const persist = () => write(KEY, { ...ui, history: ui.history.slice(0, 50) });
+    let list = null;
+    let endpoints = [];
+    let session = null;
+    let sessionOpen = false;
+    let sessionError = null;
+    let selected = ui.history[0]?.id ?? null;
+    let confirming = null;
+    const inputs = new Map();
+    const asJson = new Set();
+    const requests = new Map();
+    const running = new Set();
+    const el = h('section', { class: 'api', 'aria-label': 'API', hidden: true });
+    let shown = false;
+    const height = () => (shown ? Math.min(ui.height, innerHeight - 120) : 0);
+    const resize = () => {
+        el.style.height = `${height()}px`;
+        host.resized();
+    };
+    const where = (runs) => host.plain() ? { server: 'server', either: 'server, then browser', browser: 'browser' }[runs] : runs;
+    const remember = (outcome, sent) => {
+        const record = { ...outcome, requests: sent, id: Date.now(), at: Date.now() };
+        ui.history.unshift(record);
+        ui.history = ui.history.slice(0, 50);
+        selected = record.id;
+        persist();
+    };
+    async function run(effect) {
+        const input = inputs.get(effect.ref) ?? startInput(effect, host.win().document);
+        running.add(effect.ref);
+        confirming = null;
+        draw();
+        const { value, requests: sent } = await traced(host.win(), () => call(effect, input, host.win()));
+        running.delete(effect.ref);
+        remember(value, sent);
+        draw();
+    }
+    async function sendTo(endpoint) {
+        running.add(endpoint.ref);
+        draw();
+        const { value, requests: sent } = await traced(host.win(), () => send(endpoint, requestOf(endpoint), host.win()));
+        running.delete(endpoint.ref);
+        const { url: _, ...outcome } = value;
+        remember(outcome, sent.filter((r) => r.side === 'server'));
+        draw();
+    }
+    const requestOf = (endpoint) => {
+        let r = requests.get(endpoint.ref);
+        if (!r) {
+            r = {
+                params: Object.fromEntries(paramsOf(endpoint.path).map((p) => [p, ''])),
+                body: endpoint.raw ? '' : JSON.stringify(example(endpoint.input) ?? {}, null, 2),
+                headers: [['', '']],
+            };
+            requests.set(endpoint.ref, r);
+        }
+        return r;
+    };
+    const invalidOf = (last) => last && !last.ok && last.error === 'Invalid'
+        ? (last.value?.fields ?? {})
+        : {};
+    const jsonEditor = (label, value, onValid, rows = 5) => {
+        const area = h('textarea', { class: 'api-json-input', rows: String(rows), spellcheck: 'false', 'aria-label': label }, [value]);
+        area.addEventListener('input', () => {
+            try {
+                JSON.parse(area.value);
+                area.removeAttribute('aria-invalid');
+            }
+            catch {
+                area.setAttribute('aria-invalid', 'true');
+            }
+            onValid(area.value);
+        });
+        return area;
+    };
+    const fieldsOf = (effect, last) => {
+        const schema = effect.input;
+        const props = (schema.properties ?? {});
+        const value = (inputs.get(effect.ref) ?? startInput(effect, host.win().document));
+        const invalid = invalidOf(last);
+        if (!flat(schema) || asJson.has(effect.ref))
+            return h('div', { class: 'api-fields' }, [
+                jsonEditor(`${effect.ref} input (JSON)`, JSON.stringify(value, null, 2), (text) => {
+                    try {
+                        inputs.set(effect.ref, JSON.parse(text));
+                    }
+                    catch { }
+                }),
+                Object.keys(invalid).length
+                    ? h('em', { class: 'api-invalid' }, Object.entries(invalid)
+                        .filter(([, m]) => m)
+                        .map(([k, m]) => `${k}: ${m}. `))
+                    : null,
+            ]);
         if (!Object.keys(props).length)
-            return h('div', { class: 'plain' }, ['No input.']);
-        return h('div', { class: 'fields' }, Object.entries(props).map(([name, s]) => {
-            const id = `hz-api-${effect.ref}-${name}`;
+            return h('span', { class: 'api-none' }, ['no input']);
+        const current = { ...value };
+        return h('div', { class: 'api-fields' }, Object.entries(props).map(([name, s]) => {
+            const id = `api-${effect.ref}-${name}`;
             const control = Array.isArray(s.enum)
-                ? h('select', { id }, s.enum.map((o) => h('option', { value: String(o), selected: value[name] === o }, [String(o)])))
+                ? h('select', { id }, s.enum.map((o) => h('option', { value: String(o), selected: current[name] === o }, [String(o)])))
                 : h('input', {
                     id,
                     type: s.type === 'boolean'
@@ -158,103 +334,498 @@ function fields(effect, start, onChange) {
                         : s.type === 'number' || s.type === 'integer'
                             ? 'number'
                             : 'text',
+                    placeholder: s.type === 'string' ? name : '',
                     ...(s.type === 'boolean'
-                        ? { checked: value[name] === true }
-                        : { value: String(value[name] ?? '') }),
+                        ? { checked: current[name] === true }
+                        : { value: String(current[name] ?? '') }),
+                    'aria-invalid': invalid[name] ? 'true' : undefined,
                 });
-            control.addEventListener('input', () => {
-                const el = control;
-                value[name] =
+            const update = () => {
+                const c = control;
+                current[name] =
                     s.type === 'boolean'
-                        ? el.checked
+                        ? c.checked
                         : s.type === 'number' || s.type === 'integer'
-                            ? Number(el.value)
-                            : el.value;
-                onChange({ ...value });
+                            ? Number(c.value)
+                            : c.value;
+                inputs.set(effect.ref, { ...current });
+            };
+            control.addEventListener('input', update);
+            control.addEventListener('change', update);
+            control.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    update();
+                    ask(effect);
+                }
             });
-            return h('label', { class: 'field', for: id }, [h('span', {}, [name]), control]);
+            return h('label', { class: 'api-field', for: id }, [
+                h('span', {}, [name]),
+                control,
+                invalid[name] ? h('em', { class: 'api-invalid' }, [invalid[name]]) : null,
+            ]);
         }));
-    }
-    const area = h('textarea', { class: 'json', rows: '4', 'aria-label': 'Input (JSON)' }, [
-        JSON.stringify(start, null, 2),
-    ]);
-    area.addEventListener('input', () => {
-        try {
-            onChange(JSON.parse(area.value));
-            area.removeAttribute('aria-invalid');
-        }
-        catch {
-            area.setAttribute('aria-invalid', 'true');
+    };
+    const ask = (effect) => {
+        if (effect.kind === 'mutation' && confirming !== effect.ref) {
+            confirming = effect.ref;
+            return draw();
         }
-    });
-    return area;
-}
-export function renderEffects(panel, list, host) {
-    const outcome = (r) => h('div', { class: `result ${r.ok ? 'ok' : 'bad'}`, role: 'status' }, [
-        h('div', { class: 'label' }, [
-            r.ok ? 'OK' : r.error === 'Unexpected' ? 'Unexpected error' : `Declared error: ${r.error}`,
-            ` · ${r.ms} ms · ${r.where === 'server' ? 'through the server' : 'in this browser (not checked against the schema)'}`,
-        ]),
-        h('pre', { class: 'value' }, [JSON.stringify(r.value, null, 2) ?? 'undefined']),
-        r.invalidated.length
-            ? h('div', { class: 'plain' }, [
-                `Invalidated ${r.invalidated.join(', ')}. `,
-                h('button', { class: 'link', type: 'button', onclick: host.reload }, [
-                    'Reload the page to see it',
+        void run(effect);
+    };
+    const row = (effect) => {
+        const last = ui.history.find((r) => r.ref === effect.ref);
+        const busy = running.has(effect.ref);
+        const asking = confirming === effect.ref;
+        const canForm = flat(effect.input) && Object.keys(effect.input.properties ?? {}).length > 0;
+        return h('div', { class: `api-row${last && last.id === selected ? ' on' : ''}`, 'data-effect': effect.ref }, [
+            h('span', { class: `api-dot ${last ? (last.ok ? 'ok' : 'bad') : ''}`, 'aria-hidden': 'true' }),
+            h('div', { class: 'api-name' }, [
+                h('b', {}, [host.plain() ? effect.label : effect.ref]),
+                h('span', { class: `api-kind ${effect.kind === 'query' ? 'read' : 'write'}` }, [
+                    effect.kind === 'query' ? 'read' : 'write',
+                ]),
+                h('span', { class: `api-runs ${effect.runs}`, title: `runs: ${effect.runs}` }, [
+                    where(effect.runs),
+                ]),
+                effect.kind === 'query' ? h('span', { class: 'api-tag' }, [effect.freshness]) : null,
+                effect.implemented
+                    ? h('span', { class: 'api-where', title: 'Where it is implemented' }, [
+                        `${effect.implemented.file}:${effect.implemented.line}`,
+                    ])
+                    : null,
+                canForm
+                    ? h('button', {
+                        type: 'button',
+                        class: 'api-switch',
+                        title: 'JSON sends any value, also one the schema rejects',
+                        onclick: () => {
+                            if (asJson.has(effect.ref))
+                                asJson.delete(effect.ref);
+                            else
+                                asJson.add(effect.ref);
+                            draw();
+                        },
+                    }, [asJson.has(effect.ref) ? 'Form' : 'JSON'])
+                    : null,
+            ]),
+            fieldsOf(effect, last),
+            asking
+                ? h('div', { class: 'api-confirm', role: 'alert' }, [
+                    h('span', {}, ['Writes your development data.']),
+                    h('button', {
+                        type: 'button',
+                        class: 'api-ghost',
+                        onclick: () => {
+                            confirming = null;
+                            draw();
+                        },
+                    }, ['Cancel']),
+                    h('button', { type: 'button', class: 'api-run warn', onclick: () => void run(effect) }, [
+                        'Run',
+                    ]),
+                ])
+                : h('button', {
+                    type: 'button',
+                    class: `api-run${effect.kind === 'mutation' ? ' warn' : ''}`,
+                    disabled: busy,
+                    onclick: () => ask(effect),
+                }, [busy ? 'Running…' : 'Run ▶']),
+        ]);
+    };
+    const endpointRow = (endpoint) => {
+        const r = requestOf(endpoint);
+        const last = ui.history.find((x) => x.ref === endpoint.ref);
+        const busy = running.has(endpoint.ref);
+        const headerRows = r.headers.map((pair, i) => {
+            const key = h('input', {
+                value: pair[0],
+                placeholder: 'Header',
+                'aria-label': 'Header name',
+            });
+            const val = h('input', {
+                value: pair[1],
+                placeholder: 'Value',
+                'aria-label': 'Header value',
+            });
+            key.addEventListener('input', () => {
+                r.headers[i] = [key.value, val.value];
+            });
+            val.addEventListener('input', () => {
+                r.headers[i] = [key.value, val.value];
+            });
+            return h('div', { class: 'api-header' }, [key, val]);
+        });
+        return h('div', {
+            class: `api-row endpoint${last && last.id === selected ? ' on' : ''}`,
+            'data-endpoint': endpoint.ref,
+        }, [
+            h('span', { class: `api-dot ${last ? (last.ok ? 'ok' : 'bad') : ''}`, 'aria-hidden': 'true' }),
+            h('div', { class: 'api-name' }, [
+                h('span', { class: `api-method ${endpoint.method.toLowerCase()}` }, [endpoint.method]),
+                h('b', {}, [endpoint.path]),
+                h('span', { class: 'api-tag' }, [host.plain() ? endpoint.ref.split('.').pop() : endpoint.ref]),
+            ]),
+            h('div', { class: 'api-fields' }, [
+                ...Object.keys(r.params).map((p) => {
+                    const input = h('input', {
+                        value: r.params[p],
+                        placeholder: p,
+                        'aria-label': `Path :${p}`,
+                    });
+                    input.addEventListener('input', () => {
+                        r.params[p] = input.value;
+                    });
+                    return h('label', { class: 'api-field' }, [h('span', {}, [`:${p}`]), input]);
+                }),
+                h('div', { class: 'api-field wide' }, [
+                    h('span', {}, [
+                        endpoint.method === 'GET' ? 'Query (JSON)' : endpoint.raw ? 'Body' : 'Body (JSON)',
+                    ]),
+                    jsonEditor(`${endpoint.ref} body`, r.body, (text) => {
+                        r.body = text;
+                    }),
+                ]),
+                h('div', { class: 'api-field wide' }, [
+                    h('span', {}, ['Headers']),
+                    ...headerRows,
+                    h('button', {
+                        type: 'button',
+                        class: 'api-ghost',
+                        onclick: () => {
+                            r.headers.push(['', '']);
+                            draw();
+                        },
+                    }, ['+ Header']),
                 ]),
-            ])
-            : null,
-    ]);
-    const card = (effect) => {
-        let input = inputFor(effect, host.doc);
-        const out = h('div');
-        const writes = effect.kind === 'mutation';
-        const run = h('button', {
-            class: writes ? 'warn' : '',
+            ]),
+            h('button', { type: 'button', class: 'api-run', disabled: busy, onclick: () => void sendTo(endpoint) }, [busy ? 'Sending…' : 'Send ▶']),
+        ]);
+    };
+    const cell = (v) => v === null || v === undefined ? '' : typeof v === 'object' ? JSON.stringify(v) : String(v);
+    function table(value) {
+        if (Array.isArray(value) &&
+            value.length &&
+            value.every((r) => r && typeof r === 'object' && !Array.isArray(r))) {
+            const columns = [...new Set(value.flatMap((r) => Object.keys(r)))].slice(0, 8);
+            return h('table', { class: 'api-table' }, [
+                h('thead', {}, [
+                    h('tr', {}, columns.map((c) => h('th', {}, [c]))),
+                ]),
+                h('tbody', {}, value.map((r) => h('tr', {}, columns.map((c) => h('td', {}, [cell(r[c])]))))),
+            ]);
+        }
+        if (value && typeof value === 'object' && !Array.isArray(value))
+            return h('table', { class: 'api-table kv' }, [
+                h('tbody', {}, Object.entries(value).map(([k, v]) => h('tr', {}, [h('th', {}, [k]), h('td', {}, [cell(v)])]))),
+            ]);
+        return null;
+    }
+    const copyButton = (label, text, disabled = false, title = '') => {
+        const button = h('button', {
             type: 'button',
+            class: 'api-ghost',
+            disabled,
+            title,
             onclick: async () => {
-                if (writes && !confirm(`${effect.label} writes your development data. Run it?`))
-                    return;
-                run.setAttribute('disabled', '');
-                out.replaceChildren(h('div', { class: 'plain' }, ['Running…']));
-                out.replaceChildren(outcome(await call(effect, input, host.doc)));
-                run.removeAttribute('disabled');
+                await navigator.clipboard.writeText(text()).catch(() => { });
+                button.textContent = 'Copied';
             },
-        }, [writes ? 'Run · writes your development data' : 'Run']);
-        return h('details', { class: 'effect', 'data-effect': effect.ref }, [
-            h('summary', {}, [
-                h('b', {}, [host.plain ? effect.label : effect.ref]),
-                h('span', { class: 'badge-ref' }, [where(effect.runs, host.plain)]),
-                host.plain ? null : h('span', { class: 'badge-ref' }, [effect.scope, ' · ', effect.freshness]),
+        }, [label]);
+        return button;
+    };
+    const sentList = (r) => r.requests.length
+        ? h('div', { class: 'api-sent' }, [
+            h('div', { class: 'api-label' }, ['Requests it sent']),
+            ...r.requests.map((t) => h('details', { class: 'api-request' }, [
+                h('summary', {}, [
+                    h('span', { class: `api-method ${t.method.toLowerCase()}` }, [t.method]),
+                    h('code', {}, [t.url]),
+                    h('span', { class: `api-code ${t.status && t.status < 400 ? 'ok' : 'bad'}` }, [
+                        t.error ? 'failed' : String(t.status),
+                    ]),
+                    h('span', { class: 'api-tag' }, [
+                        `${t.ms} ms · ${t.side === 'server' ? 'from the server' : 'from this browser'}`,
+                    ]),
+                ]),
+                h('div', { class: 'api-request-body' }, [
+                    t.error ? h('em', { class: 'api-invalid' }, [t.error]) : null,
+                    h('b', {}, ['Request headers']),
+                    h('pre', {}, [t.requestHeaders.map(([k, v]) => `${k}: ${v}`).join('\n') || '(none)']),
+                    t.requestBody ? h('b', {}, ['Request body']) : null,
+                    t.requestBody ? h('pre', {}, [t.requestBody]) : null,
+                    h('b', {}, ['Response headers']),
+                    h('pre', {}, [t.responseHeaders.map(([k, v]) => `${k}: ${v}`).join('\n') || '(none)']),
+                    t.responseBody ? h('b', {}, ['Response body']) : null,
+                    t.responseBody ? h('pre', {}, [t.responseBody]) : null,
+                    copyButton('Copy as curl', () => curl(t)),
+                ]),
+            ])),
+        ])
+        : null;
+    function result(r) {
+        if (!r)
+            return h('div', { class: 'api-empty' }, ['Run something to see its answer here.']);
+        const effect = list?.find((e) => e.ref === r.ref);
+        const status = r.kind === 'endpoint'
+            ? `${r.status === 0 ? 'Redirect' : (r.status ?? 'No answer')}${r.ok ? '' : ` · ${r.error}`}`
+            : r.ok
+                ? 'OK'
+                : r.error === 'Unexpected'
+                    ? 'Unexpected error'
+                    : `Declared error: ${r.error}`;
+        const grid = typeof r.value === 'object' ? table(r.value) : null;
+        return h('div', { class: 'api-result' }, [
+            h('div', { class: `api-status ${r.ok ? 'ok' : 'bad'}`, role: 'status' }, [
+                h('b', {}, [status]),
+                ` · ${r.ms} ms · ${r.kind === 'endpoint' ? 'HTTP' : r.where === 'server' ? 'through the server' : 'in this browser'} · ${host.plain() ? (effect?.label ?? r.ref) : r.ref}`,
             ]),
-            host.plain
-                ? null
-                : h('div', { class: 'meta' }, [
-                    effect.tags.length ? `tags ${effect.tags.join(', ')} · ` : '',
-                    effect.invalidates.length ? `invalidates ${effect.invalidates.join(', ')} · ` : '',
-                    `errors ${effect.errors.join(', ')} · used by ${effect.usedBy.join(', ')}`,
+            r.tags.length
+                ? h('div', { class: 'api-note' }, [
+                    `Invalidated ${r.tags.join(', ')}`,
+                    r.refreshed
+                        ? ' · the page re-read it'
+                        : h('button', { type: 'button', class: 'api-link', onclick: () => host.win().location.reload() }, [' · reload the page to see it']),
+                ])
+                : null,
+            h('div', { class: 'api-tools' }, [
+                h('div', { class: 'api-seg', role: 'group', 'aria-label': 'View' }, [
+                    ...['table', 'json'].map((v) => h('button', {
+                        type: 'button',
+                        'aria-pressed': ui.view === v ? 'true' : 'false',
+                        disabled: v === 'table' && !grid,
+                        onclick: () => {
+                            ui.view = v;
+                            persist();
+                            draw();
+                        },
+                    }, [v === 'table' ? 'Table' : 'JSON'])),
                 ]),
-            fields(effect, input, (v) => {
-                input = v;
-            }),
-            h('div', { class: 'actions' }, [run]),
-            out,
+                r.kind === 'endpoint'
+                    ? null
+                    : copyButton('Copy as hozu call', () => hozuCall(r, effect?.scope ?? 'public'), r.runs === 'browser', r.runs === 'browser'
+                        ? 'hozu call runs server and either effects; this one needs the browser'
+                        : ''),
+            ]),
+            ui.view === 'table' && grid
+                ? h('div', { class: 'api-scroll' }, [grid])
+                : h('pre', { class: 'api-scroll api-pre' }, [
+                    typeof r.value === 'string' ? r.value : (JSON.stringify(r.value, null, 2) ?? 'undefined'),
+                ]),
+            r.kind === 'endpoint' && r.headers.length
+                ? h('details', { class: 'api-request' }, [
+                    h('summary', {}, ['Response headers']),
+                    h('pre', {}, [r.headers.map(([k, v]) => `${k}: ${v}`).join('\n')]),
+                ])
+                : null,
+            sentList(r),
         ]);
-    };
-    const queries = (list ?? []).filter((e) => e.kind === 'query');
-    const mutations = (list ?? []).filter((e) => e.kind === 'mutation');
-    panel.hidden = false;
-    panel.replaceChildren(h('div', { class: 'head' }, [
-        h('div', { class: 'kicker' }, [location.pathname]),
-        h('h2', { class: 'title' }, ['API']),
-        h('button', { class: 'close', type: 'button', 'aria-label': 'Close', onclick: host.close }, ['×']),
-    ]), list === null
-        ? h('div', { class: 'empty' }, ['This page is not a Hozu page.'])
-        : h('div', { class: 'sec' }, [
-            h('div', { class: 'label' }, [host.plain ? 'Data this page reads' : 'Queries']),
-            ...(queries.length ? queries.map(card) : [h('div', { class: 'plain' }, ['None.'])]),
-            h('div', { class: 'label' }, [host.plain ? 'Changes this page can make' : 'Mutations']),
-            ...(mutations.length ? mutations.map(card) : [h('div', { class: 'plain' }, ['None.'])]),
+    }
+    function historyList() {
+        if (!ui.history.length)
+            return [h('div', { class: 'api-empty' }, ['No calls yet.'])];
+        return ui.history.map((r) => h('div', { class: `api-row history${r.id === selected ? ' on' : ''}` }, [
+            h('span', { class: `api-dot ${r.ok ? 'ok' : 'bad'}`, 'aria-hidden': 'true' }),
+            h('button', {
+                type: 'button',
+                class: 'api-open',
+                onclick: () => {
+                    selected = r.id;
+                    draw();
+                },
+            }, [
+                h('b', {}, [r.ref]),
+                h('span', { class: 'api-tag' }, [new Date(r.at).toLocaleTimeString()]),
+                h('span', { class: 'api-tag' }, [`${r.ms} ms`]),
+                h('code', {}, [JSON.stringify(r.input)]),
+            ]),
+            r.kind === 'endpoint'
+                ? null
+                : h('button', {
+                    type: 'button',
+                    class: 'api-ghost',
+                    onclick: () => {
+                        const effect = list?.find((e) => e.ref === r.ref);
+                        if (!effect)
+                            return;
+                        inputs.set(r.ref, r.input);
+                        ui.tab = effect.kind;
+                        ask(effect);
+                    },
+                }, ['Run again']),
+        ]));
+    }
+    function sessionBox() {
+        if (!session?.declared || !sessionOpen)
+            return null;
+        let text = JSON.stringify(session.current ?? example(session.schema), null, 2);
+        const apply = async (value) => {
+            const response = await fetch('/_hozu/dev/session', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ session: value }),
+            });
+            if (!response.ok) {
+                sessionError =
+                    (await response.json().catch(() => ({}))).error ?? response.statusText;
+                return draw();
+            }
+            sessionError = null;
+            sessionOpen = false;
+            host.win().location.reload();
+        };
+        return h('div', { class: 'api-row session' }, [
+            h('span', {}),
+            h('div', { class: 'api-name' }, [
+                h('b', {}, ['Act as']),
+                h('span', { class: 'api-tag' }, ['development only: sets this browser’s session cookie']),
+            ]),
+            h('div', { class: 'api-fields' }, [
+                jsonEditor('Session (JSON)', text, (t) => {
+                    text = t;
+                }),
+                sessionError ? h('em', { class: 'api-invalid' }, [sessionError]) : null,
+            ]),
+            h('div', { class: 'api-confirm' }, [
+                h('button', { type: 'button', class: 'api-ghost', onclick: () => void apply(null) }, ['Sign out']),
+                h('button', {
+                    type: 'button',
+                    class: 'api-run',
+                    onclick: () => {
+                        try {
+                            void apply(JSON.parse(text));
+                        }
+                        catch {
+                            sessionError = 'The session is not valid JSON';
+                            draw();
+                        }
+                    },
+                }, ['Act as']),
+            ]),
+        ]);
+    }
+    function draw() {
+        try {
+            paint();
+        }
+        catch (error) {
+            el.replaceChildren(h('div', { class: 'api-empty', role: 'alert' }, [
+                `The API drawer could not draw: ${error instanceof Error ? error.message : String(error)}. `,
+                h('button', {
+                    type: 'button',
+                    class: 'api-link',
+                    onclick: () => {
+                        ui.history = [];
+                        selected = null;
+                        persist();
+                        draw();
+                    },
+                }, ['Clear its saved state']),
+            ]));
+        }
+    }
+    function paint() {
+        const queries = (list ?? []).filter((e) => e.kind === 'query');
+        const mutations = (list ?? []).filter((e) => e.kind === 'mutation');
+        const tab = (id, label, count) => h('button', {
+            type: 'button',
+            role: 'tab',
+            'aria-selected': ui.tab === id ? 'true' : 'false',
+            onclick: () => {
+                ui.tab = id;
+                persist();
+                draw();
+            },
+        }, [label, h('span', { class: 'count' }, [String(count)])]);
+        const grip = h('div', { class: 'api-grip', title: 'Drag to resize', 'aria-hidden': 'true' });
+        grip.addEventListener('pointerdown', (event) => {
+            event.preventDefault();
+            grip.setPointerCapture(event.pointerId);
+            const move = (e) => {
+                ui.height = Math.max(160, Math.min(innerHeight - 120, innerHeight - e.clientY));
+                resize();
+            };
+            const up = () => {
+                grip.removeEventListener('pointermove', move);
+                grip.removeEventListener('pointerup', up);
+                persist();
+            };
+            grip.addEventListener('pointermove', move);
+            grip.addEventListener('pointerup', up);
+        });
+        const rows = ui.tab === 'history'
+            ? historyList()
+            : ui.tab === 'endpoint'
+                ? endpoints.map(endpointRow)
+                : list === null
+                    ? [h('div', { class: 'api-empty' }, ['This page is not a Hozu page.'])]
+                    : (ui.tab === 'query' ? queries : mutations).map(row);
+        const who = session?.declared &&
+            h('button', {
+                type: 'button',
+                class: `api-session${sessionOpen ? ' on' : ''}`,
+                title: 'The session this browser sends; act as someone else',
+                onclick: () => {
+                    sessionOpen = !sessionOpen;
+                    draw();
+                },
+            }, [session.current === null ? 'Signed out' : `As ${JSON.stringify(session.current)}`]);
+        el.replaceChildren(grip, h('div', { class: 'api-head' }, [
+            h('b', { class: 'api-title' }, ['API']),
+            h('div', { class: 'api-tabs', role: 'tablist' }, [
+                tab('query', host.plain() ? 'Reads' : 'Queries', queries.length),
+                tab('mutation', host.plain() ? 'Changes' : 'Mutations', mutations.length),
+                endpoints.length ? tab('endpoint', 'Endpoints', endpoints.length) : null,
+                tab('history', 'History', ui.history.length),
+            ]),
+            h('span', { class: 'api-path' }, [host.path()]),
+            who || null,
+            h('button', {
+                type: 'button',
+                class: 'api-close',
+                'aria-label': 'Close the API drawer',
+                onclick: () => show(false),
+            }, ['×']),
+        ]), h('div', { class: 'api-body' }, [
+            h('div', { class: 'api-list' }, [
+                sessionBox(),
+                ...(rows.length ? rows : [h('div', { class: 'api-empty' }, ['None on this page.'])]),
+            ]),
+            result(ui.history.find((r) => r.id === selected)),
         ]));
+    }
+    async function reload() {
+        if (!shown)
+            return;
+        [list, endpoints, session] = await Promise.all([
+            effects(host.path()),
+            getJson('/_hozu/dev/endpoints').then((e) => e ?? []),
+            getJson('/_hozu/dev/session'),
+        ]);
+        inputs.clear();
+        if (ui.tab === 'endpoint' && !endpoints.length)
+            ui.tab = 'query';
+        draw();
+    }
+    function show(open) {
+        shown = open;
+        ui.open = open;
+        persist();
+        el.hidden = !open;
+        resize();
+        if (open)
+            void reload();
+        else
+            host.closed();
+    }
+    return {
+        el,
+        show,
+        reload,
+        toggle: () => show(!shown),
+        isOpen: () => shown,
+        height,
+        restore: () => ui.open && show(true),
+    };
 }
 //# sourceMappingURL=effects.js.map