@zackbart/connecta 0.25.0 → 0.26.1

package/dist/operator-ui/model.d.ts

@@ -6,13 +6,16 @@ import type { CatalogAccessObservation, CatalogDriftReport } from "../types.js";
  * the rule is a second place for it to be wrong.
  *
  * - `runs_in_programs` — explicitly read-only, so `execute_code` may call it.
- * - `needs_approval` — everything else, which crosses `call_destructive_tool`.
+ * - `exempt` — not read-only, but the deployment's `execute.approval` lets a
+ *   program call it without pausing (#566). Still approval-required
+ *   everywhere else.
+ * - `needs_approval` — everything else: a program pauses for
+ *   `resume_execution`, and a direct call crosses `call_destructive_tool`.
  *
- * Planned resumable writes add a third value for a config `approval: "never"`
- * exemption; the badge renders from a table keyed by this union so that value
- * is one entry, not a new branch.
+ * The badge renders from a table keyed by this union, so each value is one
+ * entry, not a branch.
  */
-export type UiToolSafety = "runs_in_programs" | "needs_approval";
+export type UiToolSafety = "runs_in_programs" | "exempt" | "needs_approval";
 export interface UiTool {
     name: string;
     address: string;
@@ -122,6 +125,60 @@ export interface UiData {
      * it with a 404, so the page never enumerates a pool its reader cannot open.
      */
     pools?: string[];
+    /** True when artifact pages are mounted and this identity may open them. */
+    artifactsEnabled?: boolean;
+}
+/**
+ * One row of the artifact library. Every field is a fact the store keeps or
+ * an enum; nothing here is a message, a log line, or a downstream's words.
+ */
+export interface UiArtifactRow {
+    id: string;
+    title: string;
+    kind: "html" | "markdown";
+    viewVersion: number;
+    updatedAt: string;
+    updatedBy: {
+        label: string;
+    };
+    archived: boolean;
+    freshness?: UiArtifactFreshness;
+}
+interface UiArtifactFreshness {
+    state: "unconfigured" | "current" | "stale";
+    schedule?: "manual" | "daily" | "weekly";
+    document?: string;
+    dueAt?: string;
+    last?: {
+        at: string;
+        status: "succeeded" | "unchanged" | "failed" | "superseded";
+    };
+    running?: boolean;
+}
+/** The viewer's payload: the page's facts and the one document its frame loads. */
+export interface UiArtifactView {
+    id: string;
+    title: string;
+    kind: "html" | "markdown";
+    archived: boolean;
+    snapshot: boolean;
+    latestViewVersion: number;
+    view: {
+        version: number;
+        at: string;
+        by: {
+            label: string;
+        };
+    };
+    documents: {
+        name: string;
+        version: number;
+        updatedAt: string;
+    }[];
+    url: string;
+    snapshotUrl: string;
+    document: string;
+    freshness?: UiArtifactFreshness;
 }
 export interface FilteredUiConnector {
     connector: UiConnector;

package/dist/operator-ui/view.js

@@ -1,21 +1,203 @@
+/** Pages the nav lists. A single artifact is reached from the library, not the nav. */
 export const OPERATOR_PAGES = [
     "connections",
     "activity",
+    "artifacts",
 ];
 export const PAGE_META = {
     connections: { path: "/", label: "Connections" },
     activity: { path: "/activity", label: "Activity" },
+    artifacts: { path: "/artifacts", label: "Artifacts" },
+    artifact: { path: "/artifacts", label: "Artifact" },
 };
+/**
+ * What each page is for, in one line under its heading — on the gate as well
+ * as once signed in, so the page an operator lands on reads the same before
+ * and after the session is checked.
+ */
+export function pageDescription(page, productDescription) {
+    if (page === "activity") {
+        return "Every connector tool call, by who made it and how it ended. Arguments and results are never stored.";
+    }
+    if (isArtifactPage(page)) {
+        return "Pages agents published for the team. Each one keeps every version.";
+    }
+    return productDescription;
+}
+/** What the gate says while the session is checked, page by page. */
+export function checkingCopy(page) {
+    if (page === "artifact")
+        return "Loading artifact…";
+    if (page === "artifacts")
+        return "Loading artifacts…";
+    return "Checking your session…";
+}
 export function pageForPath(path) {
+    if (path.startsWith("/artifacts/"))
+        return "artifact";
     const match = OPERATOR_PAGES.find((page) => PAGE_META[page].path === path);
     return match ?? "connections";
 }
+/** Artifact pages load their own data and never ask `/ui/data` whether to open. */
+export function isArtifactPage(page) {
+    return page === "artifacts" || page === "artifact";
+}
+/**
+ * Where a viewer's frame gets its page: `/artifacts/<id>` or a snapshot,
+ * `/artifacts/<id>/v/<version>?d=<name>:<version>…`, mapped to its API call.
+ */
+export function artifactViewRequest(pathname, search) {
+    const match = /^\/artifacts\/([a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?)(?:\/v\/(\d{1,9}))?$/.exec(pathname);
+    if (!match?.[1])
+        return undefined;
+    const params = new URLSearchParams();
+    if (match[2]) {
+        params.set("v", match[2]);
+        for (const pin of new URLSearchParams(search).getAll("d"))
+            params.append("d", pin);
+    }
+    const query = params.toString();
+    return `/artifacts/_api/view/${match[1]}${query ? `?${query}` : ""}`;
+}
 export function info(message) {
     return { message, tone: "info" };
 }
 export function failure(message, fix) {
     return fix ? { message, tone: "error", fix } : { message, tone: "error" };
 }
+const REFUSED_COPY = {
+    oauth_disconnect: "Disconnect didn't finish. If the service refused it, the deployment's log has its reply.",
+    oauth_reconnect: "Authorization couldn't start. If the service refused it, the deployment's log has its reply.",
+    credential_test: "The credential test couldn't run.",
+};
+/**
+ * The route's answer to a finished OAuth action. Its state picks the sentence;
+ * `opened` says whether the authorization page is already in a new tab.
+ */
+export function oauthDoneNotice(action, answer, opened = true) {
+    if (action === "oauth_disconnect") {
+        return info("Disconnected. Connect again whenever you are ready.");
+    }
+    if (answer?.state === "ok")
+        return info("Connected.");
+    return info(opened
+        ? "Finish authorizing in the new tab. This page updates when you come back."
+        : "Your browser blocked the new tab. Open the authorization page from the link here.");
+}
+/** A credential Test's result. `ok` is the only part of the answer it reads. */
+export function credentialTestNotice(connectorId, answer) {
+    return answer?.ok === true
+        ? info("Credential is valid.")
+        : failure("Credential test failed: the service rejected the stored credential, or the test couldn't reach it. The deployment's log has the service's reply.", { kind: "credential_test_failed", connectorId });
+}
+/**
+ * A route that refused one of these actions. A credential Test that found
+ * nothing usable to test names the problem, which picks the same copy and fix
+ * prompt the Connections page uses for it; every other refusal gets the
+ * action's one sentence. `problem` is whatever the response carried, so it is
+ * checked, not trusted.
+ */
+export function refusedNotice(action, connectorId, problem) {
+    if (action === "credential_test" &&
+        (problem === "credential_required" || problem === "credential_mismatch")) {
+        return failure(PROBLEM_COPY[problem], { kind: problem, connectorId });
+    }
+    return failure(REFUSED_COPY[action], {
+        kind: action === "credential_test" ? "credential_test_failed" : "oauth_action_failed",
+        connectorId,
+    });
+}
+/**
+ * A credential save or removal the route refused, by status. The route's
+ * `error` can name a vault failure or echo validation detail, so none of it
+ * is shown; the status is enough to say what to do next.
+ */
+function credentialRefusedCopy(action, status, problem) {
+    if (problem === "credential_mismatch")
+        return PROBLEM_COPY.credential_mismatch;
+    const verb = action === "credential_save" ? "saved" : "removed";
+    if (status === 400 || status === 413 || status === 415) {
+        return action === "credential_save"
+            ? "The credential wasn't saved: a value is empty or not in the expected format. Check it and save again."
+            : "The credential wasn't removed. Refresh the page and try again.";
+    }
+    if (status === 404) {
+        return "This connector no longer has a credential slot. Refresh the page to see its current setup.";
+    }
+    if (status === 503) {
+        return `Credential storage isn't configured on this deployment, so nothing was ${verb}.`;
+    }
+    return `The credential wasn't ${verb}. Try again; if it keeps failing, the deployment's log has the reason.`;
+}
+/**
+ * Every row action's failure, in one voice. The page's own failures — a
+ * lapsed session, a denied identity, a dropped connection — read the same for
+ * every action; a route's refusal picks the action's fixed sentence.
+ */
+export function actionFailedNotice(action, connectorId, facts, productName) {
+    if (facts.kind === "session") {
+        return failure("Your session has ended. Sign in again, then retry.");
+    }
+    if (facts.kind === "forbidden") {
+        return failure("You don't have permission to change this connection's authentication.");
+    }
+    if (facts.kind === "network") {
+        return failure(`Couldn't reach ${productName}. Check your connection and try again.`);
+    }
+    if (action === "credential_save" || action === "credential_remove") {
+        return failure(credentialRefusedCopy(action, facts.status, facts.problem));
+    }
+    return refusedNotice(action, connectorId, facts.problem);
+}
+export function connectorLoadFailureCopy(failure, productName) {
+    return failure === "session"
+        ? "Your session wasn't accepted while loading this connector. Sign in again to see its status."
+        : `Couldn't reach ${productName} to load this connector. Check your connection, then refresh it.`;
+}
+/** The signed-in page's answer when `/ui/data` could not be read. */
+export function loadFailureCopy(failure, productName) {
+    return {
+        title: `Couldn't reach ${productName}`,
+        body: failure === "network"
+            ? "Your browser couldn't connect. Check your connection, then retry."
+            : "The deployment answered with an error. Retry in a moment; if it keeps failing, the deployment's log has the reason.",
+    };
+}
+/** A collection page's load failure: fixed words, whatever the route said. */
+export function collectionFailureCopy(collection, facts, productName) {
+    if (facts.kind === "network") {
+        return `Couldn't reach ${productName}. Check your connection, then retry.`;
+    }
+    if (facts.kind === "session")
+        return "Your session has ended. Sign in again to see this page.";
+    if (facts.kind === "forbidden" || facts.status === 404) {
+        if (collection === "artifact")
+            return "There is no artifact here, or this identity can't open it.";
+        return collection === "activity"
+            ? "Activity isn't available to this identity."
+            : "Artifacts aren't available to this identity.";
+    }
+    return "The deployment answered with an error. Retry in a moment; if it keeps failing, the deployment's log has the reason.";
+}
+/** The confirm's question, naming the connector by its title. */
+export function confirmCopy(action, name) {
+    if (action === "oauth_disconnect") {
+        return {
+            question: `Disconnect ${name}? Its stored grant and any pending authorization are removed, and its tools stop working until it is connected again.`,
+            confirm: "Disconnect",
+        };
+    }
+    if (action === "oauth_restart") {
+        return {
+            question: `Reconnect ${name}? Its current grant stops working until you finish authorizing in the new tab.`,
+            confirm: "Reconnect",
+        };
+    }
+    return {
+        question: `Remove ${name}'s credential? The connector stops authenticating until a replacement is added.`,
+        confirm: "Remove",
+    };
+}
 export function initialState(page) {
     return {
         page,
@@ -23,7 +205,9 @@ export function initialState(page) {
         session: "loading",
         gate: null,
         refreshing: false,
+        loadFailure: null,
         pendingFocus: null,
+        focusIfLost: null,
         ...identityScopedState(),
     };
 }
@@ -37,8 +221,13 @@ function identityScopedState() {
         data: null,
         connectorFilter: "",
         oauthNotice: null,
+        oauthNoticeFor: null,
         oauthBusy: null,
+        oauthBlocked: null,
+        confirming: null,
+        connectorFailures: {},
         credentialNotice: null,
+        credentialNoticeFor: null,
         credentialEditing: null,
         credentialBusy: null,
         activityPhase: "idle",
@@ -46,6 +235,13 @@ function identityScopedState() {
         activityEvents: [],
         activityCursor: null,
         activitySearch: "",
+        artifactPhase: "idle",
+        artifactNotice: null,
+        artifactRows: [],
+        artifactCursor: null,
+        artifactQuery: "",
+        artifactArchived: false,
+        artifactView: null,
     };
 }
 /**
@@ -60,7 +256,9 @@ export function resetIdentity(state, gate = null) {
         session: "gated",
         gate,
         refreshing: false,
+        loadFailure: null,
         pendingFocus: null,
+        focusIfLost: null,
         ...identityScopedState(),
     };
 }
@@ -74,6 +272,8 @@ export function withPage(state, page) {
         page,
         credentialEditing: null,
         credentialNotice: null,
+        credentialNoticeFor: null,
+        confirming: null,
     };
 }
 export function credentialUnavailableCopy(capability) {
@@ -85,13 +285,18 @@ export function credentialUnavailableCopy(capability) {
     }
     return "Credential management requires an interactive user. Bearer-authenticated sessions can inspect connections but cannot manage stored credentials.";
 }
-export function connectorStatusLabel(status) {
+/**
+ * The status badge. An auth-needed connector is named by what it needs, so a
+ * row whose fix is "Add credential" does not say "Authorization needed".
+ */
+export function connectorStatusLabel(status, problem) {
     if (status === "loading")
         return "Loading details";
     if (status === "ok")
         return "Connected";
-    if (status === "auth_required")
-        return "Authorization needed";
+    if (status === "auth_required") {
+        return problem === "credential_required" ? "Credential needed" : "Authorization needed";
+    }
     return "Unavailable";
 }
 export function toolCountLabel(count) {
@@ -111,16 +316,24 @@ export function summarizeConnectors(connectors) {
         total: connectors.length,
         connected: 0,
         attention: 0,
+        credentials: 0,
         unavailable: 0,
+        loading: 0,
         tools: 0,
         drifting: 0,
     };
     for (const connector of connectors) {
         if (connector.status === "ok")
             summary.connected += 1;
-        else if (connector.status === "auth_required")
-            summary.attention += 1;
-        else if (connector.status !== "loading")
+        else if (connector.status === "auth_required") {
+            if (connector.problem === "credential_required")
+                summary.credentials += 1;
+            else
+                summary.attention += 1;
+        }
+        else if (connector.status === "loading")
+            summary.loading += 1;
+        else
             summary.unavailable += 1;
         summary.tools += connector.toolCount || 0;
         if (driftState(connector.catalogDrift) === "warning")
@@ -134,6 +347,16 @@ export function summarizeConnectors(connectors) {
  * zero, so a healthy deployment stays short.
  */
 export function connectorSummaryParts(summary) {
+    // Nothing has answered yet: "0 connected · 0 tools" would be a claim, and
+    // a false one.
+    if (summary.total > 0 && summary.loading === summary.total) {
+        return [
+            {
+                text: `Checking ${summary.total} connector${summary.total === 1 ? "" : "s"}…`,
+                tone: "neutral",
+            },
+        ];
+    }
     return [
         { text: `${summary.connected} connected`, tone: "neutral" },
         ...(summary.attention
@@ -144,15 +367,26 @@ export function connectorSummaryParts(summary) {
                 },
             ]
             : []),
+        ...(summary.credentials
+            ? [
+                {
+                    text: `${summary.credentials} need${summary.credentials === 1 ? "s" : ""} a credential`,
+                    tone: "warn",
+                },
+            ]
+            : []),
         ...(summary.unavailable
             ? [{ text: `${summary.unavailable} unavailable`, tone: "danger" }]
             : []),
         { text: toolCountLabel(summary.tools), tone: "neutral" },
+        ...(summary.loading
+            ? [{ text: `${summary.loading} still loading`, tone: "neutral" }]
+            : []),
     ];
 }
 /**
- * The badge for each call path, keyed by the server's classification so the
- * planned third state is a row here rather than a new branch in a component.
+ * The badge for each call path, keyed by the server's classification so each
+ * state is a row here rather than a branch in a component.
  */
 export const TOOL_SAFETY_BADGE = {
     runs_in_programs: {
@@ -160,10 +394,15 @@ export const TOOL_SAFETY_BADGE = {
         tone: "ok",
         title: "Explicitly read-only: execute_code programs may call it without asking.",
     },
+    exempt: {
+        label: "exempt from approval",
+        tone: "neutral",
+        title: "Not read-only, but this deployment's config lets programs call it without pausing. Each call still counts against the write budget and appears in activity; call_tool still refuses it.",
+    },
     needs_approval: {
-        label: "needs approval",
+        label: "asks for approval",
         tone: "warn",
-        title: "Not explicitly read-only: calls cross call_destructive_tool, where the host asks first.",
+        title: "Not explicitly read-only: a program pauses for resume_execution, and a direct call crosses call_destructive_tool — either way the host asks first.",
     },
 };
 /**
@@ -186,6 +425,18 @@ const PROBLEM_COPY = {
 export function problemCopy(problem) {
     return problem ? PROBLEM_COPY[problem] ?? null : null;
 }
+/**
+ * A problem someone can fix by authorizing is a warning, matching the amber
+ * "Authorization needed" badge above it; one where something broke is an
+ * error. The two used to share the red box, so the row contradicted itself.
+ */
+export function problemTone(problem) {
+    return problem === "oauth_required" ||
+        problem === "credential_required" ||
+        problem === "auth_required"
+        ? "warn"
+        : "danger";
+}
 /** Who owns this connector's downstream credentials, in two words. */
 export function authScopeLabel(scope) {
     return scope === "personal" ? "personal auth" : "shared auth";
@@ -272,14 +523,31 @@ export function formatDate(value) {
     if (!value)
         return "";
     const date = new Date(value);
-    return Number.isNaN(date.valueOf()) ? "" : date.toLocaleString();
+    // Minutes, not seconds: nothing on these pages is read to the second, and
+    // the seconds were most of the noise in every row that carried a date.
+    return Number.isNaN(date.valueOf())
+        ? ""
+        : date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+}
+const ACTOR_KINDS = {
+    clerk: "Clerk",
+    bearer: "Bearer token",
+    "cloudflare-access": "Cloudflare Access",
+    anonymous: "Anonymous",
+};
+/** How a caller signed in, as a person reads it. An unknown kind is shown as sent. */
+function actorKindLabel(kind) {
+    if (!kind)
+        return "Unknown caller";
+    return ACTOR_KINDS[kind] ?? kind;
 }
+/** Who made a call: their name when there is one, and how they signed in. */
 export function actorLabel(actor) {
     if (!actor?.kind)
-        return "unknown";
-    if (actor.label)
-        return `${actor.kind} · ${actor.label}`;
-    return actor.id ? `${actor.kind} · ${actor.id}` : actor.kind;
+        return "Unknown caller";
+    const who = actor.label || actor.id;
+    const kind = actorKindLabel(actor.kind);
+    return who ? `${who} (${kind})` : kind;
 }
 /**
  * The stable id behind a friendly label, shown only when a label or namespace
@@ -308,6 +576,9 @@ function activityMatches(event, query) {
         event.actor?.id,
         event.actor?.namespace,
         event.actor?.label,
+        activityOutcomeBadge(event.outcome).label,
+        activityDetail(event),
+        actorKindLabel(event.actor?.kind),
     ].some((value) => String(value ?? "").toLowerCase().includes(q));
 }
 export function filterActivity(events, query) {
@@ -316,29 +587,102 @@ export function filterActivity(events, query) {
 /** Counts only. What the deployment ran, never what it sent or received. */
 export function activitySummary(events) {
     if (events.length === 0)
-        return "Arguments and results are never stored.";
+        return "";
     const tools = new Set(events.map((event) => event.address)).size;
-    return `${events.length} loaded call${events.length === 1 ? "" : "s"} · ${tools} tool${tools === 1 ? "" : "s"} · no arguments or results stored`;
+    return `${events.length} loaded call${events.length === 1 ? "" : "s"} · ${tools} tool${tools === 1 ? "" : "s"}`;
 }
-const ACTIVITY_OUTCOMES = ["success", "error", "timeout", "cancelled"];
+// A pause and an approval are neither success nor failure: each gets its own
+// class, and the stylesheet paints neither as an error.
+const ACTIVITY_OUTCOMES = [
+    "success",
+    "error",
+    "timeout",
+    "cancelled",
+    "paused",
+    "approved",
+];
 export function activityOutcomeClass(outcome) {
     return ACTIVITY_OUTCOMES.includes(outcome) ? outcome : "error";
 }
-/** The one-line detail under an address: source, retries, and friction. */
+/** Each outcome as a badge: a word a person reads, and a tone that is never alone. */
+const OUTCOME_BADGE = {
+    success: { label: "Succeeded", tone: "ok" },
+    error: { label: "Failed", tone: "danger" },
+    timeout: { label: "Timed out", tone: "danger" },
+    cancelled: { label: "Cancelled", tone: "neutral" },
+    paused: { label: "Waiting for approval", tone: "warn" },
+    approved: { label: "Approved", tone: "ok" },
+};
+export function activityOutcomeBadge(outcome) {
+    return OUTCOME_BADGE[outcome] ?? { label: "Failed", tone: "danger" };
+}
+const SOURCE_LABELS = {
+    execute_code: "In a program",
+    call_tool: "Direct call",
+    call_destructive_tool: "Direct call, approved by the host",
+    resume_execution: "Resumed program",
+    batch_call: "Batch call",
+};
+/**
+ * Friction classes and the error codes an operator meets most, in words. An
+ * unknown code falls back to itself with the underscores taken out, which is
+ * still more readable than the wire form and never a guess at its meaning.
+ */
+const REASON_LABELS = {
+    tool_not_found: "tool not found",
+    unknown_address: "tool not found",
+    unknown_tool: "tool not found",
+    ambiguous_tool_alias: "ambiguous tool name",
+    schema_retry: "arguments didn't match the schema",
+    invalid_args: "arguments didn't match the schema",
+    destructive_reroute: "needed host approval",
+    destructive_tool_requires_approval: "needed host approval",
+    approval_required: "needed approval",
+    auth_required: "needed authorization",
+    result_too_large: "result too large to return inline",
+    timeout: "timed out",
+};
+function reasonLabel(code) {
+    return REASON_LABELS[code] ?? code.replaceAll("_", " ");
+}
+/** The one-line detail under an address: where it ran, retries, and why it stalled. */
 export function activityDetail(event) {
-    const parts = [event.source];
+    const parts = [SOURCE_LABELS[event.source] ?? event.source];
+    if (event.approval === "tool")
+        parts.push("approved for the rest of the run");
+    if (event.approval === "call")
+        parts.push("approved for this call");
     if (event.attempts > 1)
         parts.push(`${event.attempts} attempts`);
-    if (event.friction)
-        parts.push(event.friction);
-    // The friction class and the code coincide for auth_required and
-    // result_too_large. Printing "· auth_required · auth_required" says nothing
-    // twice, so the coarse class stands in for both when they agree.
-    if (event.errorCode && event.errorCode !== event.friction) {
-        parts.push(event.errorCode);
-    }
+    const reasons = [event.friction, event.errorCode]
+        .filter((code) => Boolean(code))
+        .map(reasonLabel);
+    // The friction class and the code often say the same thing in two
+    // vocabularies ("auth_required" twice); once is enough.
+    for (const reason of new Set(reasons))
+        parts.push(reason);
     return parts.join(" · ");
 }
+/**
+ * An artifact's last refresh, when it is worth a badge. Only a failure is: a
+ * success is what "Current data" already says, and a superseded run is
+ * nobody's concern.
+ */
+export function artifactRefreshBadge(last) {
+    return last?.status === "failed" ? { label: "Refresh failed", tone: "danger" } : null;
+}
+/**
+ * A stored credential that cannot be used, by cause. The payload's `error`
+ * beside it is not shown: it can carry a vault's own words.
+ */
+export function credentialProblemCopy(problem) {
+    if (problem === "credential_mismatch")
+        return PROBLEM_COPY.credential_mismatch;
+    if (problem === "credential_unreadable") {
+        return "The stored credential can't be read, so it can't be used. Replace it, or remove it and add a new one.";
+    }
+    return "The stored credential can't be used. Replace it, or remove it and add a new one.";
+}
 export function credentialStateLabel(credential) {
     if (!credential.configured)
         return "not configured";

package/dist/page-styles.js

@@ -0,0 +1,7 @@
+// Generated by scripts/build-operator-ui.mjs. Do not edit.
+// Source: src/operator-ui/tokens.css and src/operator-ui/page.css, which the
+// operator UI's browser.css imports too, so every page reads one token layer.
+/** Custom properties and both palettes; styles no element. */
+export const TOKENS_CSS = ":root{color-scheme:light;--accent: #2f5fe0;--radius: 10px;--sans: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--mono: ui-monospace, \"SF Mono\", Menlo, Monaco, \"Cascadia Code\", Consolas, monospace;--bg: #f6f7f9;--surface: #ffffff;--surface-2: #f1f3f6;--border: #e2e5ea;--border-strong: #cdd2da;--text: #131820;--muted: #5b6472;--ok: #12734a;--warn: #9a5b06;--danger: #bb3226;--on-accent: #ffffff;--link: var(--accent);--tint: color-mix(in srgb, var(--accent) 8%, var(--surface));--shell: 68rem;--pad: 1.25rem;--gap: 1rem}@media(prefers-color-scheme:dark){html:not([data-scheme=light]){color-scheme:dark}}html[data-scheme=dark]{color-scheme:dark}@media(prefers-color-scheme:dark){html:not([data-scheme=light]){--bg: #0d1016;--surface: #151a21;--surface-2: #1c222c;--border: #262d39;--border-strong: #38414f;--text: #e6eaf1;--muted: #97a1b2;--ok: #4cc48c;--warn: #e2a33f;--danger: #f4776c;--link: color-mix(in srgb, var(--accent) 55%, #ffffff);--tint: color-mix(in srgb, var(--accent) 16%, var(--surface))}}html[data-scheme=dark]{--bg: #0d1016;--surface: #151a21;--surface-2: #1c222c;--border: #262d39;--border-strong: #38414f;--text: #e6eaf1;--muted: #97a1b2;--ok: #4cc48c;--warn: #e2a33f;--danger: #f4776c;--link: color-mix(in srgb, var(--accent) 55%, #ffffff);--tint: color-mix(in srgb, var(--accent) 16%, var(--surface))}";
+/** Base typography, the shell, masthead, buttons, badges, and messages. */
+export const PAGE_CSS = "*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}body{margin:0;min-height:100vh}:is(h1,h2,h3,p,ul,ol){margin:0;padding:0}:is(h1,h2,h3){font-weight:600;line-height:1.3}h1{font-size:1.5rem;letter-spacing:-.01em}h2{font-size:1rem}:is(ul,ol){list-style:none}a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}button,input{font:inherit}:is(a,button,input,summary):focus-visible{border-radius:calc(var(--radius) / 2);outline:2px solid var(--link);outline-offset:2px}.skip-link{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);left:var(--pad);padding:.5rem .75rem;position:fixed;top:-4rem;z-index:10}.skip-link:focus{top:var(--pad)}.shell{margin:0 auto;max-width:var(--shell);padding-left:var(--pad);padding-right:var(--pad)}.cap,.meta{color:var(--muted);font-size:.875rem}.mono{font-family:var(--mono);font-size:.8125rem}.visually-hidden{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.masthead{align-items:center;background:var(--surface);border-bottom:1px solid var(--border);display:flex;gap:var(--gap);justify-content:space-between;max-width:none;padding-bottom:.75rem;padding-top:.75rem;position:sticky;top:0;z-index:5}.masthead-inner{align-items:center;display:flex;gap:var(--gap);justify-content:space-between;margin:0 auto;max-width:var(--shell);width:100%}.mast-nav,.mast-actions,.page-nav,.session-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.mast-nav,.mast-actions{gap:var(--gap)}.navlink{background:none;border:0;border-radius:calc(var(--radius) - 2px);color:var(--muted);cursor:pointer;font-size:.9375rem;padding:.35rem .6rem;text-decoration:none}.navlink:hover{background:var(--surface-2);color:var(--text)}.navlink[aria-current=page]{background:var(--tint);color:var(--link);font-weight:500}.brand,.product{padding-left:0;padding-right:0;text-decoration:none}.brand{color:var(--text);font-weight:600}.brand:hover,.product:hover{background:none}.product{color:var(--muted)}.page{padding-bottom:4rem;padding-top:2rem}.lead{margin-bottom:1.5rem}.lead-copy{color:var(--muted);display:grid;gap:.5rem;margin-top:.35rem}.lead-copy p{max-width:60ch}.btn{background:var(--surface);border:1px solid var(--border-strong);border-radius:calc(var(--radius) - 2px);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;font-size:.875rem;gap:.35rem;padding:.35rem .7rem;text-decoration:none;white-space:nowrap}.btn:hover{background:var(--surface-2)}.btn:disabled{cursor:not-allowed;opacity:.55}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,black)}.btn.danger{color:var(--danger)}.btn.danger:hover{background:color-mix(in srgb,var(--danger) 10%,var(--surface))}.btn.quiet{background:none;border-color:var(--border);color:var(--muted)}.btn.quiet:hover{background:var(--surface-2);color:var(--text)}.badge{align-items:center;background:var(--surface-2);border-radius:999px;color:var(--muted);display:inline-flex;font-size:.75rem;gap:.3rem;line-height:1.6;padding:.1rem .5rem;white-space:nowrap}.badge.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surface));color:var(--ok)}.badge.warn{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn)}.badge.danger{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}.badge.accent{background:var(--tint);color:var(--link)}.msg{background:color-mix(in srgb,var(--danger) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 28%,var(--surface));border-radius:calc(var(--radius) - 2px);color:var(--danger);font-size:.875rem;padding:.5rem .75rem}.status-page{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:grid;gap:.75rem;margin:1.5rem auto 0;max-width:34rem;padding:1.5rem}.status-head{align-items:center;display:flex;gap:.6rem}.status-mark{align-items:center;background:var(--surface-2);border-radius:50%;color:var(--muted);display:inline-flex;flex:none;height:2rem;justify-content:center;width:2rem}.status-mark svg{height:1.25rem;width:1.25rem}.status-mark.ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}.status-mark.danger{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}.status-label{color:var(--muted);font-size:.875rem;font-weight:600}.status-label.ok{color:var(--ok)}.status-label.danger{color:var(--danger)}.status-page h1{overflow-wrap:anywhere}.status-copy{color:var(--muted)}.status-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}.status-details{border-top:1px solid var(--border);color:var(--muted);font-size:.875rem;margin-top:.25rem;padding-top:.75rem}.status-details>summary{cursor:pointer;width:fit-content}.status-details>p{margin-top:.5rem}.status-details pre{background:var(--surface-2);border:1px solid var(--border);border-radius:calc(var(--radius) / 2);color:var(--text);font-family:var(--mono);font-size:.75rem;line-height:1.55;margin:.5rem 0 0;max-height:18rem;overflow:auto;overflow-wrap:anywhere;padding:.5rem .6rem;white-space:pre-wrap}@media(max-width:40rem){:root{--pad: 1rem}.status-page{margin-top:0;padding:1.25rem var(--pad)}}";