@schedulespark/observability 0.0.2-beta-1-0-0

package/dist/dashboard/core.js

@@ -0,0 +1,40 @@
+import { createNotifier } from "../alerts/index.js";
+import { captureInputSchema, DEFAULT_PROJECT_ID } from "../core/index.js";
+import { addComment, assignIssue, createSavedView, deleteSavedView, findProjectByApiKey, getIssueWithEvents, listIssues, listLogs, listMetricRollups, listProjects, listSavedViews, listTransactions, updateIssueStatus } from "../storage/index.js";
+/**
+ * Builds the dashboard operations bound to a storage handle. Ingested events notify
+ * any configured alert channels the same way the Node SDK does, so alerts fire
+ * regardless of whether an event arrived in-process or over HTTP.
+ */
+export function createDashboard(storage, options = {}) {
+    const notifier = createNotifier(options.channels ?? []);
+    return {
+        async ingest(payload, projectId) {
+            const parsed = captureInputSchema.safeParse(payload);
+            if (!parsed.success) {
+                return { ok: false, error: parsed.error.message };
+            }
+            await notifier.recordEvent(storage, parsed.data, projectId);
+            return { ok: true };
+        },
+        listIssues: (filters) => listIssues(storage, filters),
+        getIssue: (id) => getIssueWithEvents(storage, id),
+        updateIssueStatus: (id, status) => updateIssueStatus(storage, id, status),
+        assignIssue: (id, assignee) => assignIssue(storage, id, assignee),
+        addComment: (id, input) => addComment(storage, id, input),
+        listTransactions: () => listTransactions(storage),
+        listProjects: () => listProjects(storage),
+        async resolveProjectId(apiKey) {
+            if (!apiKey) {
+                return DEFAULT_PROJECT_ID;
+            }
+            const project = await findProjectByApiKey(storage, apiKey);
+            return project?.id ?? DEFAULT_PROJECT_ID;
+        },
+        listSavedViews: () => listSavedViews(storage),
+        createSavedView: (name, filters) => createSavedView(storage, name, filters),
+        deleteSavedView: (id) => deleteSavedView(storage, id),
+        listLogs: (filters) => listLogs(storage, filters),
+        listMetricRollups: (filters) => listMetricRollups(storage, filters)
+    };
+}

package/dist/dashboard/fastify.d.ts

@@ -0,0 +1,17 @@
+import type { Dashboard } from "./core.js";
+import type { FastifyInstance, FastifyRequest } from "fastify";
+/**
+ * Options for mounting the dashboard into a Fastify instance.
+ */
+export interface FastifyDashboardOptions {
+    prefix?: string;
+    authorize?: (request: FastifyRequest) => boolean | Promise<boolean>;
+    ingestKey?: string;
+}
+/**
+ * Registers the ingestion endpoint and the HTML dashboard (issue list, issue detail,
+ * status/assignee updates, comments) on a Fastify instance. Can be mounted at any
+ * prefix inside a host app's own server, or on a bare Fastify instance for standalone
+ * mode.
+ */
+export declare function registerDashboard(app: FastifyInstance, dashboard: Dashboard, options?: FastifyDashboardOptions): void;

package/dist/dashboard/fastify.js

@@ -0,0 +1,247 @@
+import { renderLogsPage, renderMetricsPage, renderTransactionsPage } from "./html-secondary.js";
+import { renderIssuePage, renderIssuesPage } from "./html.js";
+const ISSUE_STATUSES = ["unresolved", "resolved", "ignored"];
+const LOG_LEVELS = ["trace", "debug", "info", "warn", "error", "fatal"];
+const METRIC_BUCKET_SIZES = ["hour", "day"];
+const BEARER_PREFIX = "Bearer ";
+/**
+ * Registers the ingestion endpoint and the HTML dashboard (issue list, issue detail,
+ * status/assignee updates, comments) on a Fastify instance. Can be mounted at any
+ * prefix inside a host app's own server, or on a bare Fastify instance for standalone
+ * mode.
+ */
+export function registerDashboard(app, dashboard, options = {}) {
+    const ctx = { dashboard, options, basePath: options.prefix ?? "" };
+    app.post(`${ctx.basePath}/ingest`, async (request, reply) => {
+        if (!guardIngest(ctx, request, reply)) {
+            return;
+        }
+        const projectId = await dashboard.resolveProjectId(extractBearerToken(request));
+        const result = await dashboard.ingest(request.body, projectId);
+        await reply.status(result.ok ? 202 : 400).send(result);
+    });
+    app.get(ctx.basePath === "" ? "/" : ctx.basePath, (request, reply) => handleIssuesPage(ctx, request, reply));
+    app.get(`${ctx.basePath}/transactions`, (request, reply) => handleTransactionsPage(ctx, request, reply));
+    app.get(`${ctx.basePath}/logs`, (request, reply) => handleLogsPage(ctx, request, reply));
+    app.get(`${ctx.basePath}/metrics`, (request, reply) => handleMetricsPage(ctx, request, reply));
+    app.get(`${ctx.basePath}/issues/:id`, (request, reply) => handleIssuePage(ctx, request, reply));
+    app.post(`${ctx.basePath}/issues/:id/status`, (request, reply) => handleStatusUpdate(ctx, request, reply));
+    app.post(`${ctx.basePath}/issues/:id/assign`, (request, reply) => handleAssign(ctx, request, reply));
+    app.post(`${ctx.basePath}/issues/:id/comments`, (request, reply) => handleAddComment(ctx, request, reply));
+    app.post(`${ctx.basePath}/views`, (request, reply) => handleCreateSavedView(ctx, request, reply));
+    app.post(`${ctx.basePath}/views/:id/delete`, (request, reply) => handleDeleteSavedView(ctx, request, reply));
+    app.get(`${ctx.basePath}/api/issues`, async (request, reply) => {
+        if (!(await guard(ctx, request, reply)))
+            return;
+        const { project } = request.query;
+        await reply.send(await dashboard.listIssues({ projectId: project }));
+    });
+}
+/**
+ * Handles `GET /` (or the configured prefix): renders the searchable issues list.
+ */
+async function handleIssuesPage(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { q, project, status } = request.query;
+    const statusFilter = isIssueStatus(status) ? status : undefined;
+    const [issues, projects, savedViews] = await Promise.all([
+        ctx.dashboard.listIssues({ q, projectId: project, status: statusFilter }),
+        ctx.dashboard.listProjects(),
+        ctx.dashboard.listSavedViews()
+    ]);
+    await reply.type("text/html").send(renderIssuesPage(issues, ctx.basePath, {
+        q,
+        projects,
+        selectedProjectId: project,
+        savedViews,
+        currentFilters: { q, projectId: project, status: statusFilter }
+    }));
+}
+/**
+ * Handles `GET /transactions`: renders the recorded root-span (transaction) list.
+ */
+async function handleTransactionsPage(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const transactions = await ctx.dashboard.listTransactions();
+    await reply.type("text/html").send(renderTransactionsPage(transactions, ctx.basePath));
+}
+/**
+ * Handles `GET /logs`: renders the structured log list, optionally filtered by
+ * `?level=`.
+ */
+async function handleLogsPage(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { level } = request.query;
+    const levelFilter = isLogLevel(level) ? level : undefined;
+    const logs = await ctx.dashboard.listLogs({ level: levelFilter });
+    await reply.type("text/html").send(renderLogsPage(logs, ctx.basePath, levelFilter));
+}
+/**
+ * Type guard for a valid `LogLevel` string.
+ */
+function isLogLevel(value) {
+    return typeof value === "string" && LOG_LEVELS.includes(value);
+}
+/**
+ * Handles `GET /metrics`: renders the metric rollups table, optionally filtered by
+ * `?bucket=`.
+ */
+async function handleMetricsPage(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { bucket } = request.query;
+    const bucketFilter = isMetricBucketSize(bucket) ? bucket : undefined;
+    const rollups = await ctx.dashboard.listMetricRollups({ bucketSize: bucketFilter });
+    await reply.type("text/html").send(renderMetricsPage(rollups, ctx.basePath, bucketFilter));
+}
+/**
+ * Type guard for a valid `MetricBucketSize` string.
+ */
+function isMetricBucketSize(value) {
+    return typeof value === "string" && METRIC_BUCKET_SIZES.includes(value);
+}
+/**
+ * Handles `GET /issues/:id`: renders a single issue's detail page.
+ */
+async function handleIssuePage(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { id } = request.params;
+    const detail = await ctx.dashboard.getIssue(id);
+    if (!detail) {
+        await reply.status(404).send();
+        return;
+    }
+    await reply
+        .type("text/html")
+        .send(renderIssuePage(detail.issue, detail.events, detail.comments, ctx.basePath));
+}
+/**
+ * Handles `POST /issues/:id/status`: updates an issue's workflow status.
+ */
+async function handleStatusUpdate(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { id } = request.params;
+    const { status } = request.body;
+    if (!isIssueStatus(status)) {
+        await reply.status(400).send();
+        return;
+    }
+    await ctx.dashboard.updateIssueStatus(id, status);
+    await reply.redirect(`${ctx.basePath}/issues/${id}`);
+}
+/**
+ * Handles `POST /issues/:id/assign`: sets (or clears, on an empty value) an issue's
+ * assignee.
+ */
+async function handleAssign(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { id } = request.params;
+    const { assignee } = request.body;
+    await ctx.dashboard.assignIssue(id, toAssigneeOrNull(assignee));
+    await reply.redirect(`${ctx.basePath}/issues/${id}`);
+}
+/**
+ * Treats an empty assignee field as "unassign" rather than storing an empty string.
+ */
+function toAssigneeOrNull(assignee) {
+    return assignee && assignee.length > 0 ? assignee : null;
+}
+/**
+ * Handles `POST /issues/:id/comments`: adds a comment to an issue.
+ */
+async function handleAddComment(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { id } = request.params;
+    const { author, body } = request.body;
+    if (!author || !body) {
+        await reply.status(400).send();
+        return;
+    }
+    await ctx.dashboard.addComment(id, { author, body });
+    await reply.redirect(`${ctx.basePath}/issues/${id}`);
+}
+/**
+ * Handles `POST /views`: saves the current issues-list filters under a name.
+ */
+async function handleCreateSavedView(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { name, q, project, status } = request.body;
+    if (!name) {
+        await reply.status(400).send();
+        return;
+    }
+    await ctx.dashboard.createSavedView(name, {
+        q: toNonEmptyOrUndefined(q),
+        projectId: toNonEmptyOrUndefined(project),
+        status: isIssueStatus(status) ? status : undefined
+    });
+    await reply.redirect(ctx.basePath === "" ? "/" : ctx.basePath);
+}
+/**
+ * Treats an empty string the same as "not provided" — used when persisting a saved
+ * view's filters, so an unused filter field is omitted rather than stored as `""`.
+ */
+function toNonEmptyOrUndefined(value) {
+    return value && value.length > 0 ? value : undefined;
+}
+/**
+ * Handles `POST /views/:id/delete`: removes a saved view.
+ */
+async function handleDeleteSavedView(ctx, request, reply) {
+    if (!(await guard(ctx, request, reply)))
+        return;
+    const { id } = request.params;
+    await ctx.dashboard.deleteSavedView(id);
+    await reply.redirect(ctx.basePath === "" ? "/" : ctx.basePath);
+}
+/**
+ * Runs the caller-supplied `authorize` hook, sending a 401 and returning `false` when
+ * it denies the request. Requests are allowed through when no hook is configured.
+ */
+async function guard(ctx, request, reply) {
+    const allowed = ctx.options.authorize ? await ctx.options.authorize(request) : true;
+    if (!allowed) {
+        await reply.status(401).send();
+    }
+    return allowed;
+}
+/**
+ * Checks the ingestion request's `Authorization: Bearer <ingestKey>` header against
+ * the configured key — the same scheme the browser SDK's `apiKey` option and the
+ * standalone CLI's `--token` already use — sending a 401 and returning `false` on a
+ * mismatch. With no `ingestKey` configured, every request is allowed, matching the
+ * package's zero-config default; deployers opt into locking it down.
+ */
+function guardIngest(ctx, request, reply) {
+    if (!ctx.options.ingestKey) {
+        return true;
+    }
+    if (extractBearerToken(request) !== ctx.options.ingestKey) {
+        reply.status(401).send({ ok: false, error: "missing or invalid ingestion key" });
+        return false;
+    }
+    return true;
+}
+/**
+ * Extracts the `Authorization: Bearer <token>` header value, if present. Used both
+ * for the global `ingestKey` check above and, separately, to resolve which project an
+ * ingested event belongs to by its own per-project API key.
+ */
+function extractBearerToken(request) {
+    const header = request.headers.authorization;
+    return header?.startsWith(BEARER_PREFIX) ? header.slice(BEARER_PREFIX.length) : undefined;
+}
+/**
+ * Type guard for a valid `IssueStatus` string.
+ */
+function isIssueStatus(value) {
+    return typeof value === "string" && ISSUE_STATUSES.includes(value);
+}

package/dist/dashboard/html-secondary.d.ts

@@ -0,0 +1,15 @@
+import type { LogEntry, MetricRollup, RecordedSpan } from "../core/index.js";
+/**
+ * Renders the transactions list page (root spans only, no drill-down into child
+ * spans yet).
+ */
+export declare function renderTransactionsPage(transactions: RecordedSpan[], basePath: string): string;
+/**
+ * Renders the structured log list, optionally filtered by `?level=`.
+ */
+export declare function renderLogsPage(logs: LogEntry[], basePath: string, selectedLevel?: string): string;
+/**
+ * Renders the metric rollups list: the latest bucket per name/tags combination,
+ * optionally filtered by `?bucket=`.
+ */
+export declare function renderMetricsPage(rollups: MetricRollup[], basePath: string, selectedBucket?: string): string;

package/dist/dashboard/html-secondary.js

@@ -0,0 +1,85 @@
+import { escapeHtml, page } from "./html-shared.js";
+/**
+ * Renders the transactions list page (root spans only, no drill-down into child
+ * spans yet).
+ */
+export function renderTransactionsPage(transactions, basePath) {
+    const rows = transactions.map((tx) => renderTransactionRow(tx)).join("");
+    return page("Transactions", `<p><a href="${basePath}">&larr; issues</a></p><h1>Transactions</h1><table><thead><tr><th>Name</th><th>Status</th><th>Duration (ms)</th><th>Started</th></tr></thead><tbody>${rows}</tbody></table>`);
+}
+/**
+ * Renders a single row of the transactions list table.
+ */
+function renderTransactionRow(tx) {
+    const statusClass = tx.status === "error" ? "badge-error" : "badge-info";
+    return `<tr>
+    <td>${escapeHtml(tx.name)}</td>
+    <td><span class="badge ${statusClass}">${escapeHtml(tx.status)}</span></td>
+    <td>${String(tx.durationMs)}</td>
+    <td>${escapeHtml(tx.startedAt)}</td>
+  </tr>`;
+}
+const LOG_LEVEL_OPTIONS = ["trace", "debug", "info", "warn", "error", "fatal"];
+const LOG_LEVEL_BADGE_CLASS = {
+    trace: "badge-info",
+    debug: "badge-info",
+    info: "badge-info",
+    warn: "badge-warning",
+    error: "badge-error",
+    fatal: "badge-error"
+};
+/**
+ * Renders the structured log list, optionally filtered by `?level=`.
+ */
+export function renderLogsPage(logs, basePath, selectedLevel) {
+    const rows = logs.map((entry) => renderLogRow(entry)).join("");
+    const levelFilter = `<form method="get" action="${basePath}/logs">
+    <select name="level" onchange="this.form.submit()">
+      <option value="">Any level</option>
+      ${LOG_LEVEL_OPTIONS.map((level) => `<option value="${level}"${level === selectedLevel ? " selected" : ""}>${level}</option>`).join("")}
+    </select>
+  </form>`;
+    return page("Logs", `<p><a href="${basePath}">&larr; issues</a></p><h1>Logs</h1>${levelFilter}<table><thead><tr><th>Level</th><th>Message</th><th>Logged at</th></tr></thead><tbody>${rows}</tbody></table>`);
+}
+/**
+ * Renders a single row of the logs table.
+ */
+function renderLogRow(entry) {
+    const badgeClass = LOG_LEVEL_BADGE_CLASS[entry.level] ?? "badge-info";
+    const context = Object.keys(entry.context).length > 0 ? `<pre>${escapeHtml(JSON.stringify(entry.context))}</pre>` : "";
+    return `<tr>
+    <td><span class="badge ${badgeClass}">${escapeHtml(entry.level)}</span></td>
+    <td>${escapeHtml(entry.message)}${context}</td>
+    <td>${escapeHtml(entry.loggedAt)}</td>
+  </tr>`;
+}
+/**
+ * Renders the metric rollups list: the latest bucket per name/tags combination,
+ * optionally filtered by `?bucket=`.
+ */
+export function renderMetricsPage(rollups, basePath, selectedBucket) {
+    const rows = rollups.map((rollup) => renderMetricRollupRow(rollup)).join("");
+    const bucketFilter = `<form method="get" action="${basePath}/metrics">
+    <select name="bucket" onchange="this.form.submit()">
+      <option value="">Any bucket size</option>
+      <option value="hour"${selectedBucket === "hour" ? " selected" : ""}>hour</option>
+      <option value="day"${selectedBucket === "day" ? " selected" : ""}>day</option>
+    </select>
+  </form>`;
+    return page("Metrics", `<p><a href="${basePath}">&larr; issues</a></p><h1>Metrics</h1>${bucketFilter}<table><thead><tr><th>Name</th><th>Kind</th><th>Bucket</th><th>Sum</th><th>Count</th><th>Min</th><th>Max</th><th>Avg</th></tr></thead><tbody>${rows}</tbody></table>`);
+}
+/**
+ * Renders a single row of the metric rollups table.
+ */
+function renderMetricRollupRow(rollup) {
+    return `<tr>
+    <td>${escapeHtml(rollup.name)}</td>
+    <td>${escapeHtml(rollup.kind)}</td>
+    <td>${escapeHtml(rollup.bucketStart)} (${escapeHtml(rollup.bucketSize)})</td>
+    <td>${String(rollup.sum)}</td>
+    <td>${String(rollup.count)}</td>
+    <td>${String(rollup.min)}</td>
+    <td>${String(rollup.max)}</td>
+    <td>${rollup.avg.toFixed(2)}</td>
+  </tr>`;
+}

package/dist/dashboard/html-shared.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Escapes HTML-significant characters. Every captured field (message, stack trace,
+ * title) is untrusted, attacker-reachable input, so it must always pass through this
+ * before being interpolated into a rendered page.
+ */
+export declare function escapeHtml(value: string): string;
+/**
+ * Wraps page content in a minimal shared HTML shell.
+ */
+export declare function page(title: string, body: string): string;
+/**
+ * Renders a small colored badge for an event/issue level.
+ */
+export declare function levelBadge(level: string): string;

package/dist/dashboard/html-shared.js

@@ -0,0 +1,39 @@
+const HTML_ESCAPES = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+};
+/**
+ * Escapes HTML-significant characters. Every captured field (message, stack trace,
+ * title) is untrusted, attacker-reachable input, so it must always pass through this
+ * before being interpolated into a rendered page.
+ */
+export function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (char) => HTML_ESCAPES[char]);
+}
+const PAGE_STYLE = `
+  body { font: 14px/1.5 -apple-system, sans-serif; margin: 2rem; color: #1a1a1a; }
+  table { border-collapse: collapse; width: 100%; }
+  th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #e5e5e5; }
+  a { color: #4f46e5; text-decoration: none; }
+  pre { background: #f5f5f5; padding: 1rem; overflow-x: auto; white-space: pre-wrap; }
+  .badge { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 12px; }
+  .badge-error { background: #fee2e2; color: #991b1b; }
+  .badge-warning { background: #fef3c7; color: #92400e; }
+  .badge-info { background: #e0e7ff; color: #3730a3; }
+  .comment { border-top: 1px solid #e5e5e5; padding: 0.75rem 0; }
+`;
+/**
+ * Wraps page content in a minimal shared HTML shell.
+ */
+export function page(title, body) {
+    return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml(title)}</title><style>${PAGE_STYLE}</style></head><body>${body}</body></html>`;
+}
+/**
+ * Renders a small colored badge for an event/issue level.
+ */
+export function levelBadge(level) {
+    return `<span class="badge badge-${escapeHtml(level)}">${escapeHtml(level)}</span>`;
+}

package/dist/dashboard/html.d.ts

@@ -0,0 +1,18 @@
+import type { CapturedEvent, Comment, Issue, Project, SavedView, SavedViewFilters } from "../core/index.js";
+export { escapeHtml } from "./html-shared.js";
+/**
+ * Renders the issues list page, with a search box (and, once more than one project
+ * exists, a project filter) that preserves the current query on submit.
+ */
+export declare function renderIssuesPage(issues: Issue[], basePath: string, filters?: {
+    q?: string;
+    projects?: Project[];
+    selectedProjectId?: string;
+    savedViews?: SavedView[];
+    currentFilters?: SavedViewFilters;
+}): string;
+/**
+ * Renders a single issue's detail page: status/assignee controls, recent events, and
+ * its comment thread.
+ */
+export declare function renderIssuePage(issue: Issue, events: CapturedEvent[], comments: Comment[], basePath: string): string;

package/dist/dashboard/html.js

@@ -0,0 +1,161 @@
+import { escapeHtml, levelBadge, page } from "./html-shared.js";
+export { escapeHtml } from "./html-shared.js";
+const ISSUE_STATUS_OPTIONS = ["unresolved", "resolved", "ignored"];
+/**
+ * Renders the issues list page, with a search box (and, once more than one project
+ * exists, a project filter) that preserves the current query on submit.
+ */
+export function renderIssuesPage(issues, basePath, filters = {}) {
+    const { q, projects = [], selectedProjectId, savedViews = [], currentFilters } = filters;
+    const rows = issues.map((issue) => renderIssueRow(issue, basePath)).join("");
+    const projectFilter = projects.length > 1 ? renderProjectFilter(projects, selectedProjectId) : "";
+    const searchBox = `<form method="get" action="${basePath}">
+    <input type="search" name="q" placeholder="Search titles…" value="${escapeHtml(q ?? "")}">
+    ${renderStatusFilter(currentFilters?.status)}
+    ${projectFilter}
+    <button type="submit">Search</button>
+  </form>`;
+    const savedViewsBlock = renderSavedViewsBlock(savedViews, basePath, currentFilters);
+    return page("Issues", `<h1>Issues</h1><p><a href="${basePath}/transactions">Transactions &rarr;</a> · <a href="${basePath}/logs">Logs &rarr;</a> · <a href="${basePath}/metrics">Metrics &rarr;</a></p>${savedViewsBlock}${searchBox}<table><thead><tr><th>Level</th><th>Title</th><th>Status</th><th>Assignee</th><th>Events</th><th>Last seen</th></tr></thead><tbody>${rows}</tbody></table>`);
+}
+/**
+ * Renders the `?status=` dropdown on the issues list search form.
+ */
+function renderStatusFilter(selectedStatus) {
+    const options = ISSUE_STATUS_OPTIONS.map((status) => `<option value="${status}"${status === selectedStatus ? " selected" : ""}>${status}</option>`).join("");
+    return `<select name="status"><option value="">Any status</option>${options}</select>`;
+}
+/**
+ * Renders the saved-views list (each entry a link that applies its filters, plus a
+ * delete button) and the "save this search" form, which carries the currently active
+ * filters as hidden fields.
+ */
+function renderSavedViewsBlock(savedViews, basePath, currentFilters) {
+    const list = savedViews.length > 0
+        ? `<ul>${savedViews.map((view) => renderSavedViewItem(view, basePath)).join("")}</ul>`
+        : "";
+    return `<div><strong>Saved views</strong>${list}${renderSaveViewForm(basePath, currentFilters)}</div>`;
+}
+/**
+ * Renders a single saved view: a link applying its filters, and a delete button.
+ */
+function renderSavedViewItem(view, basePath) {
+    const params = new URLSearchParams();
+    if (view.filters.q) {
+        params.set("q", view.filters.q);
+    }
+    if (view.filters.projectId) {
+        params.set("project", view.filters.projectId);
+    }
+    if (view.filters.status) {
+        params.set("status", view.filters.status);
+    }
+    const query = params.toString();
+    return `<li><a href="${basePath}${query ? `?${query}` : ""}">${escapeHtml(view.name)}</a>
+    <form method="post" action="${basePath}/views/${escapeHtml(view.id)}/delete" style="display:inline">
+      <button type="submit">delete</button>
+    </form>
+  </li>`;
+}
+/**
+ * Renders the "save this search" form, carrying the current `q`/`project`/`status`
+ * filters as hidden fields so saving doesn't require re-entering them.
+ */
+function renderSaveViewForm(basePath, currentFilters) {
+    return `<form method="post" action="${basePath}/views">
+    <input type="text" name="name" placeholder="Save this search as…" required>
+    <input type="hidden" name="q" value="${escapeHtml(currentFilters?.q ?? "")}">
+    <input type="hidden" name="project" value="${escapeHtml(currentFilters?.projectId ?? "")}">
+    <input type="hidden" name="status" value="${escapeHtml(currentFilters?.status ?? "")}">
+    <button type="submit">Save view</button>
+  </form>`;
+}
+/**
+ * Renders the `?project=` dropdown, populated from every configured project.
+ */
+function renderProjectFilter(projects, selectedProjectId) {
+    const options = projects
+        .map((project) => `<option value="${escapeHtml(project.id)}"${project.id === selectedProjectId ? " selected" : ""}>${escapeHtml(project.name)}</option>`)
+        .join("");
+    return `<select name="project"><option value="">All projects</option>${options}</select>`;
+}
+/**
+ * Renders a single row of the issues list table.
+ */
+function renderIssueRow(issue, basePath) {
+    return `<tr>
+    <td>${levelBadge(issue.level)}</td>
+    <td><a href="${basePath}/issues/${escapeHtml(issue.id)}">${escapeHtml(issue.title)}</a></td>
+    <td>${escapeHtml(issue.status)}</td>
+    <td>${escapeHtml(issue.assignee ?? "—")}</td>
+    <td>${String(issue.eventCount)}</td>
+    <td>${escapeHtml(issue.lastSeen)}</td>
+  </tr>`;
+}
+/**
+ * Renders a single issue's detail page: status/assignee controls, recent events, and
+ * its comment thread.
+ */
+export function renderIssuePage(issue, events, comments, basePath) {
+    const eventsHtml = events.map((event) => renderEvent(event)).join("");
+    const body = `<p><a href="${basePath}">&larr; back</a></p>
+    <h1>${levelBadge(issue.level)} ${escapeHtml(issue.title)}</h1>
+    <p>${renderStatusForm(issue, basePath)}</p>
+    <p>${renderAssignForm(issue, basePath)}</p>
+    <h2>Events (${String(events.length)})</h2>${eventsHtml}
+    <h2>Comments (${String(comments.length)})</h2>${renderComments(comments)}${renderCommentForm(issue, basePath)}`;
+    return page(issue.title, body);
+}
+/**
+ * Renders the resolve/ignore/unresolve status buttons.
+ */
+function renderStatusForm(issue, basePath) {
+    return ["unresolved", "resolved", "ignored"]
+        .map((status) => `<form method="post" action="${basePath}/issues/${escapeHtml(issue.id)}/status" style="display:inline">
+        <input type="hidden" name="status" value="${status}">
+        <button type="submit"${status === issue.status ? " disabled" : ""}>${status}</button>
+      </form>`)
+        .join(" ");
+}
+/**
+ * Renders the assignee text field and submit button.
+ */
+function renderAssignForm(issue, basePath) {
+    return `<form method="post" action="${basePath}/issues/${escapeHtml(issue.id)}/assign" style="display:inline">
+    <input type="text" name="assignee" placeholder="Assignee" value="${escapeHtml(issue.assignee ?? "")}">
+    <button type="submit">Assign</button>
+  </form>`;
+}
+/**
+ * Renders the comment thread, or a placeholder when there are no comments yet.
+ */
+function renderComments(comments) {
+    if (comments.length === 0) {
+        return "<p>No comments yet.</p>";
+    }
+    return comments
+        .map((comment) => `<div class="comment"><strong>${escapeHtml(comment.author)}</strong>
+        <span>${escapeHtml(comment.createdAt)}</span><p>${escapeHtml(comment.body)}</p></div>`)
+        .join("");
+}
+/**
+ * Renders the "add a comment" form.
+ */
+function renderCommentForm(issue, basePath) {
+    return `<form method="post" action="${basePath}/issues/${escapeHtml(issue.id)}/comments">
+    <input type="text" name="author" placeholder="Your name" required>
+    <br><textarea name="body" placeholder="Add a comment…" required></textarea>
+    <br><button type="submit">Comment</button>
+  </form>`;
+}
+/**
+ * Renders a single event within an issue's detail page.
+ */
+function renderEvent(event) {
+    const stack = event.stackTrace ? `<pre>${escapeHtml(event.stackTrace)}</pre>` : "";
+    const context = `<pre>${escapeHtml(JSON.stringify(event.context, null, 2))}</pre>`;
+    const breadcrumbs = event.breadcrumbs.length > 0
+        ? `<pre>${escapeHtml(JSON.stringify(event.breadcrumbs, null, 2))}</pre>`
+        : "";
+    return `<div><p><strong>${escapeHtml(event.capturedAt)}</strong> ${escapeHtml(event.message)}</p>${stack}${context}${breadcrumbs}</div>`;
+}

package/dist/dashboard/index.d.ts

@@ -0,0 +1,5 @@
+export { createDashboard } from "./core.js";
+export { registerDashboard } from "./fastify.js";
+export { escapeHtml } from "./html.js";
+export type { Dashboard, DashboardOptions, IngestResult, ListIssuesOptions } from "./core.js";
+export type { FastifyDashboardOptions } from "./fastify.js";

package/dist/dashboard/index.js

@@ -0,0 +1,3 @@
+export { createDashboard } from "./core.js";
+export { registerDashboard } from "./fastify.js";
+export { escapeHtml } from "./html.js";