mockpit 0.0.0-stage → 1.1.0

package/dist/server/feedbackBatch.js

@@ -0,0 +1,98 @@
+// The agent-facing shape of feedback: one batch per mock, in delivery order.
+// The `feedback` verb, the watch long-poll and the write piggyback all return this,
+// so an agent reads one grouped object instead of re-deriving which mock a flat
+// comment list belongs to. Runtime-agnostic (no node imports).
+import { builtinAsk, OTHER_ID, } from "./types.js";
+const ref = (p) => ({ state: p.state, variant: p.variant });
+function answered(reply, mock, posts) {
+    const others = reply.others ?? {};
+    const notes = reply.notes ?? {};
+    const askIds = new Set([
+        ...Object.keys(reply.answers),
+        ...Object.keys(others),
+        ...Object.keys(notes),
+    ]);
+    const out = [];
+    for (const askId of askIds) {
+        const ask = mock?.asks.find((a) => a.id === askId) ?? (mock && builtinAsk(mock, posts, askId));
+        const answer = reply.answers[askId];
+        const ids = answer === undefined ? [] : Array.isArray(answer) ? answer : [answer];
+        const chosen = ids.map((id) => ask?.options.find((o) => o.id === id) ?? { id, label: id });
+        if (others[askId] !== undefined)
+            chosen.push({ id: OTHER_ID, label: others[askId], other: true });
+        out.push({
+            ask: askId,
+            text: ask?.text ?? "",
+            chosen,
+            ...(notes[askId] !== undefined ? { note: notes[askId] } : {}),
+        });
+    }
+    return out;
+}
+// Comments arrive in seq order; keep that order both between batches and inside
+// one. A mock gets a fresh batch whenever a second reply arrives for it, so a
+// batch carries at most one reply and nothing is merged away. A comment whose
+// mock is unknown still gets a batch — feedback is never dropped for want of
+// context.
+export function groupFeedback(comments, mocks, posts) {
+    const batches = [];
+    const open = new Map();
+    for (const c of comments) {
+        const key = c.mockId ?? "";
+        const mock = c.mockId ? mocks.get(c.mockId) : undefined;
+        const mockPosts = (c.mockId && posts.get(c.mockId)) || [];
+        let batch = open.get(key);
+        if (!batch || (c.kind === "reply" && batch.reply)) {
+            batch = {
+                mockId: c.mockId,
+                project: mock?.project ?? null,
+                mock: mock?.slug ?? null,
+                title: mock?.title ?? null,
+                reply: null,
+                comments: [],
+                accepted: [],
+                archived: [],
+            };
+            open.set(key, batch);
+            batches.push(batch);
+        }
+        if (c.kind === "reply" && c.payload) {
+            const { others: _others, notes: _notes, ...payload } = c.payload;
+            batch.reply = {
+                ...payload,
+                seq: c.seq,
+                at: c.createdAt,
+                asks: answered(c.payload, mock, mockPosts),
+            };
+            batch.accepted = mockPosts.filter((p) => p.status === "accepted").map(ref);
+            batch.archived = mockPosts.filter((p) => p.status === "archived").map(ref);
+            continue;
+        }
+        const post = c.postId ? mockPosts.find((p) => p.id === c.postId) : undefined;
+        batch.comments.push({
+            seq: c.seq,
+            text: c.text,
+            state: post?.state ?? null,
+            variant: post?.variant ?? null,
+            version: c.postVersion,
+            ...(c.anchor ? { anchor: c.anchor } : {}),
+            ...(c.anchors.length ? { anchors: c.anchors } : {}),
+            ...(c.viewport != null ? { viewport: c.viewport } : {}),
+        });
+    }
+    return batches;
+}
+export async function buildFeedbackBatches(store, comments) {
+    const mocks = new Map();
+    const posts = new Map();
+    for (const c of comments) {
+        if (!c.mockId || mocks.has(c.mockId))
+            continue;
+        const mock = await store.getMock(c.mockId);
+        if (!mock)
+            continue;
+        mocks.set(c.mockId, mock);
+        posts.set(c.mockId, await store.listPosts({ mockId: c.mockId }));
+    }
+    return groupFeedback(comments, mocks, posts);
+}

package/dist/server/icons.d.ts

@@ -0,0 +1,50 @@
+export interface IconifyProps {
+    width?: number;
+    height?: number;
+    left?: number;
+    top?: number;
+    rotate?: number;
+    hFlip?: boolean;
+    vFlip?: boolean;
+}
+export interface IconifyJSON extends Pick<IconifyProps, "width" | "height" | "left" | "top"> {
+    prefix: string;
+    icons: Record<string, IconifyProps & {
+        body: string;
+        hidden?: boolean;
+    }>;
+    aliases?: Record<string, IconifyProps & {
+        parent: string;
+        hidden?: boolean;
+    }>;
+}
+export interface IconifyIcon {
+    body: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export type IconResolver = (prefix: string, name: string) => IconifyIcon | null;
+export declare const BUNDLED_ICON_PREFIXES: readonly ["lucide", "mage"];
+export declare const isIconName: (s: unknown) => s is string;
+/** A parsed set, or null when `raw` is not a usable Iconify JSON set. */
+export declare function parseIconSet(raw: unknown): IconifyJSON | null;
+/** Icons a listing should show: hidden ones exist only so old names keep resolving. */
+export declare const iconCount: (set: IconifyJSON) => number;
+export declare function bundledIconSets(): Promise<Map<string, IconifyJSON>>;
+/** Resolve `name` in `set`, following aliases and applying their transforms. */
+export declare function iconFromSet(set: IconifyJSON, name: string): IconifyIcon | null;
+/** A resolver over in-memory sets; earlier sets win a prefix. */
+export declare function resolverFor(sets: Iterable<IconifyJSON>): IconResolver;
+/**
+ * Inline every `icon="prefix:name"` element (and the older
+ * `<svg><use href="#mage-name"/></svg>` sprite form) as an `<svg>`. Names the
+ * resolver does not know render as an empty 1em box and are listed in
+ * `unknown`, in first-seen order.
+ */
+export declare const mayHaveIcons: (html: string) => boolean;
+export declare function expandIcons(html: string, resolve: IconResolver): {
+    html: string;
+    unknown: string[];
+};

package/dist/server/icons.js

@@ -0,0 +1,225 @@
+// Icons by name: an agent writes `<i icon="lucide:check"></i>` and the server
+// inlines the SVG from an Iconify JSON set at render time, so an icon costs the
+// agent its name and the frame needs no fetch. Runtime-agnostic (no node
+// imports): it runs inside renderHtmlPage on the Worker too.
+// Served with the server rather than installed per project: lucide (ISC) is
+// what agents reach for by default, mage (Apache-2.0) is what `mockpit init`
+// used to upload as a sprite, so mocks written against it keep rendering.
+export const BUNDLED_ICON_PREFIXES = ["lucide", "mage"];
+const NAME_RE = /^[a-z0-9][a-z0-9-]*$/;
+export const isIconName = (s) => typeof s === "string" && NAME_RE.test(s);
+/** A parsed set, or null when `raw` is not a usable Iconify JSON set. */
+export function parseIconSet(raw) {
+    let data = raw;
+    if (typeof data === "string") {
+        try {
+            data = JSON.parse(data);
+        }
+        catch {
+            return null;
+        }
+    }
+    if (!data || typeof data !== "object")
+        return null;
+    const set = data;
+    if (!isIconName(set.prefix) || !set.icons || typeof set.icons !== "object")
+        return null;
+    return set;
+}
+/** Icons a listing should show: hidden ones exist only so old names keep resolving. */
+export const iconCount = (set) => Object.values(set.icons).filter((i) => !i.hidden).length;
+// Bundled sets are imported on first use, not at module load: they are ~600 KB
+// of JSON each, and a workspace that never renders an icon never pays for it.
+let bundled;
+export function bundledIconSets() {
+    bundled ??= (async () => {
+        const out = new Map();
+        const loaders = {
+            lucide: () => import("@iconify-json/lucide/icons.json", { with: { type: "json" } }),
+            mage: () => import("@iconify-json/mage/icons.json", { with: { type: "json" } }),
+        };
+        for (const prefix of BUNDLED_ICON_PREFIXES) {
+            try {
+                const mod = (await loaders[prefix]());
+                const set = parseIconSet(mod.default);
+                if (set)
+                    out.set(prefix, set);
+            }
+            catch (err) {
+                // A missing package costs that set's icons, never the render.
+                console.warn(`[mockpit] bundled icon set ${prefix} unavailable`, err);
+            }
+        }
+        return out;
+    })();
+    return bundled;
+}
+const MAX_ALIAS_DEPTH = 8;
+/** Resolve `name` in `set`, following aliases and applying their transforms. */
+export function iconFromSet(set, name) {
+    // Aliases stack: the outermost alias's box wins, flips toggle, rotations add.
+    let box = {};
+    let rotate = 0;
+    let hFlip = false;
+    let vFlip = false;
+    let current = name;
+    for (let depth = 0; depth <= MAX_ALIAS_DEPTH; depth++) {
+        const icon = Object.hasOwn(set.icons, current) ? set.icons[current] : undefined;
+        const alias = !icon && set.aliases && Object.hasOwn(set.aliases, current)
+            ? set.aliases[current]
+            : undefined;
+        const props = icon ?? alias;
+        if (!props)
+            return null;
+        box = { width: props.width, height: props.height, left: props.left, top: props.top, ...box };
+        for (const k of ["width", "height", "left", "top"]) {
+            if (box[k] === undefined)
+                delete box[k];
+        }
+        rotate += props.rotate ?? 0;
+        if (props.hFlip)
+            hFlip = !hFlip;
+        if (props.vFlip)
+            vFlip = !vFlip;
+        if (icon) {
+            const width = box.width ?? set.width ?? 16;
+            const height = box.height ?? set.height ?? 16;
+            const left = box.left ?? set.left ?? 0;
+            const top = box.top ?? set.top ?? 0;
+            return transform({ body: icon.body, left, top, width, height }, rotate % 4, hFlip, vFlip);
+        }
+        current = alias.parent;
+    }
+    return null;
+}
+function transform(icon, rotate, hFlip, vFlip) {
+    let { body, left, top, width, height } = icon;
+    const flips = [
+        hFlip ? `translate(${2 * left + width} 0) scale(-1 1)` : "",
+        vFlip ? `translate(0 ${2 * top + height}) scale(1 -1)` : "",
+    ].filter(Boolean);
+    if (flips.length)
+        body = `<g transform="${flips.join(" ")}">${body}</g>`;
+    if (rotate) {
+        const cx = left + width / 2;
+        const cy = top + height / 2;
+        body = `<g transform="rotate(${rotate * 90} ${cx} ${cy})">${body}</g>`;
+        // A quarter turn swaps the box's sides around its center.
+        if (rotate % 2 === 1) {
+            [width, height] = [height, width];
+            left = cx - width / 2;
+            top = cy - height / 2;
+        }
+    }
+    return { body, left, top, width, height };
+}
+/** A resolver over in-memory sets; earlier sets win a prefix. */
+export function resolverFor(sets) {
+    const byPrefix = new Map();
+    for (const set of sets)
+        if (!byPrefix.has(set.prefix))
+            byPrefix.set(set.prefix, set);
+    return (prefix, name) => {
+        const set = byPrefix.get(prefix);
+        return set ? iconFromSet(set, name) : null;
+    };
+}
+// --- expansion -------------------------------------------------------------
+// Script, style and comment bodies are not markup: an icon attribute inside a
+// JS string must stay a string, or the inlined quotes would break the script.
+const OPAQUE_RE = /<script\b[\s\S]*?<\/script\s*>|<style\b[\s\S]*?<\/style\s*>|<!--[\s\S]*?-->/gi;
+const ATTRS = `((?:[^>"']|"[^"]*"|'[^']*')*?)`;
+const TAG_RE = new RegExp(`<([a-zA-Z][\\w-]*)(?:\\s${ATTRS})?(\\/?)>`, "g");
+// The pre-expansion form `mockpit init` taught: a sprite reference.
+const SPRITE_RE = new RegExp(`<svg\\b${ATTRS}>\\s*<use\\b${ATTRS}\\/?>\\s*(?:<\\/use>\\s*)?<\\/svg\\s*>`, "gi");
+const ATTR_RE = /([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+function parseAttrs(text) {
+    const out = [];
+    for (const m of text.matchAll(ATTR_RE)) {
+        out.push({ name: m[1].toLowerCase(), raw: m[0], value: m[2] ?? m[3] ?? m[4] ?? null });
+    }
+    return out;
+}
+const fmt = (n) => String(Math.round(n * 1000) / 1000);
+const viewBox = (i) => `${fmt(i.left)} ${fmt(i.top)} ${fmt(i.width)} ${fmt(i.height)}`;
+// The element's own attributes survive (data-part, style, title…); `class`
+// gains `icon` for the 1em sizing, and a decorative icon is hidden from
+// assistive tech unless the author labelled it.
+function svgFor(attrs, icon) {
+    const kept = attrs.filter((a) => a.name !== "icon" && a.name !== "class");
+    const cls = attrs.find((a) => a.name === "class")?.value?.trim();
+    const has = (n) => attrs.some((a) => a.name === n);
+    const extra = [
+        `class="${!cls ? "icon" : cls.split(/\s+/).includes("icon") ? cls : `icon ${cls}`}"`,
+        ...kept.map((a) => a.raw),
+        has("viewbox") ? "" : `viewBox="${icon ? viewBox(icon) : "0 0 24 24"}"`,
+        has("aria-hidden") || has("role")
+            ? ""
+            : has("aria-label") || has("aria-labelledby")
+                ? 'role="img"'
+                : 'aria-hidden="true"',
+    ].filter(Boolean);
+    return `<svg ${extra.join(" ")}>${icon?.body ?? ""}</svg>`;
+}
+function expandSegment(html, resolve, unknown) {
+    const lookup = (prefix, name) => {
+        const icon = resolve(prefix, name);
+        if (!icon)
+            unknown.add(`${prefix}:${name}`);
+        return icon;
+    };
+    const sprites = html.replace(SPRITE_RE, (whole, svgAttrs, useAttrs) => {
+        const href = parseAttrs(useAttrs).find((a) => a.name === "href" || a.name === "xlink:href");
+        const m = href?.value?.match(/^#mage-(.+)$/);
+        if (!m || !isIconName(m[1]))
+            return whole;
+        const icon = lookup("mage", m[1]);
+        return icon ? svgFor(parseAttrs(svgAttrs), icon) : whole;
+    });
+    let out = "";
+    let last = 0;
+    for (const m of sprites.matchAll(TAG_RE)) {
+        const attrs = m[2] ? parseAttrs(m[2]) : [];
+        const spec = attrs.find((a) => a.name === "icon")?.value;
+        const colon = spec?.indexOf(":") ?? -1;
+        if (!spec || colon < 0)
+            continue;
+        const prefix = spec.slice(0, colon);
+        const name = spec.slice(colon + 1);
+        if (!isIconName(prefix) || !isIconName(name))
+            continue;
+        let end = m.index + m[0].length;
+        // Only an empty element is an icon; one with content is left alone so
+        // nothing the author wrote is dropped.
+        if (!m[3]) {
+            const close = new RegExp(`^\\s*<\\/${m[1]}\\s*>`, "i").exec(sprites.slice(end));
+            if (!close)
+                continue;
+            end += close[0].length;
+        }
+        out += sprites.slice(last, m.index) + svgFor(attrs, lookup(prefix, name));
+        last = end;
+    }
+    return out + sprites.slice(last);
+}
+/**
+ * Inline every `icon="prefix:name"` element (and the older
+ * `<svg><use href="#mage-name"/></svg>` sprite form) as an `<svg>`. Names the
+ * resolver does not know render as an empty 1em box and are listed in
+ * `unknown`, in first-seen order.
+ */
+// Cheap pre-check so html without icons never loads a set.
+export const mayHaveIcons = (html) => html.includes("icon=") || html.includes("#mage-");
+export function expandIcons(html, resolve) {
+    if (!mayHaveIcons(html))
+        return { html, unknown: [] };
+    const unknown = new Set();
+    let out = "";
+    let last = 0;
+    for (const m of html.matchAll(OPAQUE_RE)) {
+        out += expandSegment(html.slice(last, m.index), resolve, unknown) + m[0];
+        last = m.index + m[0].length;
+    }
+    out += expandSegment(html.slice(last), resolve, unknown);
+    return { html: out, unknown: [...unknown] };
+}

package/dist/server/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/server/index.js

@@ -0,0 +1,76 @@
+import { serve } from "@hono/node-server";
+import { readFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import { basename, dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createApp } from "./app.js";
+import { createNodeExecutor } from "./codeRunner.js";
+import { GUIDE_TOPICS } from "./designGuide.js";
+import { createFileLog } from "./logFile.js";
+import { SqlStore } from "./sqlStore.js";
+import { createSqliteStorage } from "./sqliteStorage.js";
+// Source layout puts this file at server/index.ts; the published package runs
+// the compiled copy at dist/server/index.js. viewer/ and guide/ live at the
+// package root either way.
+let root = join(dirname(fileURLToPath(import.meta.url)), "..");
+if (basename(root) === "dist")
+    root = join(root, "..");
+const [viewerHtml, setupText, topicTexts, pkgJson] = await Promise.all([
+    readFile(join(root, "viewer", "dist", "index.html"), "utf8").catch(() => {
+        console.error("viewer build missing — run `npm run build:viewer` first");
+        return process.exit(1);
+    }),
+    readFile(join(root, "guide", "AGENT_SETUP.md"), "utf8"),
+    Promise.all(GUIDE_TOPICS.map((id) => readFile(join(root, "guide", "topics", `${id}.md`), "utf8"))),
+    readFile(join(root, "package.json"), "utf8"),
+]);
+const topics = Object.fromEntries(GUIDE_TOPICS.map((id, i) => [id, topicTexts[i]]));
+const pr = process.env.MOCKPIT_PUBLIC_READ;
+const publicRead = pr === "session" || pr === "full" ? pr : undefined;
+// Storage: SQLite via node:sqlite, the same SqlStore the Cloudflare Durable
+// Object runs, so local mirrors the deploy. MOCKPIT_DB names the file; the
+// default lives in ~/.mockpit/, a user-owned dir that survives reinstalls and
+// is writable however the package was installed.
+const dbPath = process.env.MOCKPIT_DB ?? join(homedir(), ".mockpit", "mockpit.db");
+const store = new SqlStore(createSqliteStorage(dbPath));
+console.log(`mockpit store: SQLite at ${dbPath}`);
+// The event log is on by default, next to the database, so a session can be
+// diagnosed after the fact without having planned to (`scripts/inspect.ts`).
+// MOCKPIT_LOG names another file; "off" disables it. An in-memory database
+// gets none unless asked: it is a throwaway run.
+const logSetting = process.env.MOCKPIT_LOG;
+const logPath = logSetting === "off"
+    ? undefined
+    : logSetting || (dbPath === ":memory:" ? undefined : join(dirname(dbPath), "events.jsonl"));
+if (logPath)
+    console.log(`mockpit event log: ${logPath}`);
+const app = createApp({
+    store,
+    viewerHtml,
+    setupText,
+    topics,
+    authToken: process.env.MOCKPIT_TOKEN,
+    publicRead,
+    // MOCKPIT_VERSION fakes the running version (manual testing of the
+    // notice); set it to the empty string to disable the update check
+    version: process.env.MOCKPIT_VERSION ?? JSON.parse(pkgJson).version,
+    upgradeCommand: "npm install -g mockpit",
+    // `run` scripts execute in QuickJS inside a worker thread per run.
+    executor: createNodeExecutor(),
+    log: logPath ? createFileLog(logPath) : undefined,
+});
+const port = Number(process.env.PORT ?? 8228);
+// MOCKPIT_HOST (or `serve --host`) restricts the listener to one address.
+// Unset keeps the previous behaviour — node's default, every interface — because
+// that is what a container or a LAN-shared instance needs. Set it to 127.0.0.1
+// when the server shares a host with anything you don't want reaching it; that
+// is stronger than the token, which is a single shared secret by design.
+const hostname = process.env.MOCKPIT_HOST || undefined;
+serve({ fetch: app.fetch, port, hostname }, (info) => {
+    // Report the address actually bound. Printing "localhost" unconditionally hid
+    // the fact that the default listens on every interface.
+    const shown = hostname ?? "localhost";
+    const authority = shown.includes(":") ? `[${shown}]` : shown;
+    console.log(`mockpit listening on http://${authority}:${info.port}` +
+        (hostname ? "" : " (all interfaces — set MOCKPIT_HOST to restrict)"));
+});

package/dist/server/kits.d.ts

@@ -0,0 +1,36 @@
+import type { ProjectKit } from "./types.ts";
+export interface Kit {
+    id: string;
+    label: string;
+    summary: string;
+    classes: string;
+    css: string;
+    js?: string;
+    href?: string;
+    script?: string;
+}
+export declare const CORE_CSS = "\n.stack{display:flex;flex-direction:column;gap:8px}.stack.sm{gap:4px}.stack.lg{gap:16px}\n.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row.sm{gap:4px}\n.between{display:flex;align-items:center;justify-content:space-between;gap:12px}\n.grow{flex:1;min-width:0}\n.title{font:500 15px/1.35 var(--font-sans);color:var(--color-text-primary)}\n.dim{color:var(--color-text-secondary)}.faint{color:var(--color-text-tertiary)}\n.mono{font-family:var(--font-mono)}.num{font-variant-numeric:tabular-nums}\n.hr{height:1px;border:0;margin:2px 0;background:var(--color-border-secondary)}\n.kbd{font:400 12px/1 var(--font-mono);padding:2px 6px;border:1px solid var(--color-border-secondary);border-bottom-width:2px;border-radius:6px;background:var(--color-background-secondary);color:var(--color-text-secondary)}\n";
+export declare const KITS: Kit[];
+export declare const isKnownKit: (id: unknown) => id is string;
+export declare const KIT_IDS: string[];
+export declare const kitSummaries: (projectKits?: readonly ProjectKit[]) => ({
+    href?: string | undefined;
+    id: string;
+    source: "bundled";
+    label: string;
+    summary: string;
+    classes: string;
+} | {
+    source: "project";
+    id: string;
+    href: string;
+    script?: string;
+    doc: string;
+})[];
+export declare const RESERVED_KIT_IDS: string[];
+export declare const PROJECT_KIT_DOC_MAX = 1200;
+export declare function checkProjectKit(raw: unknown): ProjectKit | string;
+export declare function kitAssets(ids: readonly string[] | undefined): {
+    css: string;
+    js: string;
+};