@volter/twin-sentry 0.1.0

package/dist/client/sentry-mirror.css

@@ -0,0 +1,99 @@
+:root {
+  --bg: #1d1127;
+  --panel: #251a35;
+  --panel-2: #2e2140;
+  --border: #3a2d50;
+  --text: #ebe6f2;
+  --muted: #a094b3;
+  --accent: #6c5fc7;
+  --fatal: #c84b48;
+  --error: #e4774e;
+  --warning: #e2c14f;
+  --info: #5b9bd5;
+  --debug: #8a7fb0;
+  --resolved: #3aa76d;
+  --ignored: #6b5f82;
+}
+* { box-sizing: border-box; }
+body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
+.mono { font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
+.app { display: flex; flex-direction: column; height: 100vh; }
+.topbar { display: flex; align-items: center; gap: 16px; padding: 0 18px; height: 52px; background: var(--panel); border-bottom: 1px solid var(--border); }
+.brand { font-weight: 700; font-size: 16px; }
+.badge { font-size: 11px; background: var(--accent); padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
+.org { color: var(--muted); font-size: 13px; }
+.body { display: flex; flex: 1; min-height: 0; }
+.sidenav { width: 180px; background: var(--panel); border-right: 1px solid var(--border); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; }
+.nav-item { text-align: left; background: none; border: none; color: var(--muted); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; }
+.nav-item:hover { background: var(--panel-2); color: var(--text); }
+.nav-item.active { background: var(--accent); color: #fff; }
+.content { flex: 1; min-width: 0; overflow: hidden; display: flex; }
+.split { display: flex; flex: 1; min-width: 0; }
+.list { width: 480px; border-right: 1px solid var(--border); overflow-y: auto; }
+.list.full { width: 100%; padding: 18px; }
+.detail { flex: 1; overflow-y: auto; padding: 22px; }
+.search-bar { padding: 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
+.search-input { width: 100%; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: monospace; }
+.issue-row { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); padding: 12px 14px; cursor: pointer; }
+.issue-row:hover { background: var(--panel-2); }
+.issue-row.selected { background: var(--panel-2); border-left: 3px solid var(--accent); }
+.issue-title { font-weight: 600; font-size: 14px; }
+.issue-culprit { color: var(--muted); font-size: 12px; margin-top: 2px; }
+.issue-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+.issue-count, .issue-lastseen { color: var(--muted); font-size: 12px; }
+.pill { font-size: 11px; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; font-weight: 600; }
+.level-fatal { background: var(--fatal); color: #fff; }
+.level-error { background: var(--error); color: #fff; }
+.level-warning { background: var(--warning); color: #1d1127; }
+.level-info { background: var(--info); color: #fff; }
+.level-debug, .level-muted { background: var(--debug); color: #fff; }
+.status-unresolved { background: #43354f; color: var(--text); }
+.status-resolved { background: var(--resolved); color: #fff; }
+.status-ignored, .status-muted { background: var(--ignored); color: #fff; }
+.detail-title { margin: 0 0 4px; font-size: 20px; }
+.detail-sub { color: var(--muted); margin-bottom: 16px; }
+.detail-stats { display: flex; gap: 26px; margin-bottom: 22px; }
+.detail-stats .stat-label { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
+.detail-stats .stat-value { font-size: 18px; font-weight: 600; }
+.stacktrace { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+.frame { display: flex; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
+.frame:last-child { border-bottom: none; }
+.frame-fn { color: var(--accent); }
+.frame-file { color: var(--muted); }
+.tags { display: flex; flex-wrap: wrap; gap: 8px; }
+.tag { background: var(--panel); border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; font-size: 12px; }
+.empty { color: var(--muted); padding: 24px; text-align: center; }
+.screen-title { margin: 0 0 16px; }
+.release-row, .project-row { display: flex; gap: 18px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
+.release-version, .project-name { font-weight: 600; min-width: 200px; }
+.release-commits, .release-date, .project-slug, .project-platform { color: var(--muted); font-size: 13px; }
+h3 { margin: 22px 0 10px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
+.alerts-sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
+.alert-rule-row { display: flex; gap: 18px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
+.alert-rule-name { font-weight: 600; min-width: 200px; }
+.alert-rule-triggers { display: flex; gap: 6px; }
+.alert-trigger { background: #43354f; color: var(--text); }
+.alert-rule-endpoints { color: var(--muted); font-size: 13px; }
+.settings-section { margin-bottom: 24px; }
+.setting-field, .dsn-row { display: flex; gap: 18px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); }
+.setting-label, .dsn-name { color: var(--muted); min-width: 120px; }
+.setting-value, .dsn-public { font-weight: 500; }
+.dsn-public { color: var(--accent); font-size: 12px; }
+.env-list { display: flex; flex-wrap: wrap; gap: 8px; }
+.env-item { background: var(--panel); border: 1px solid var(--border); color: var(--text); }
+.dashboards-sub, .discover-results-note { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
+.dashboard-row { padding: 14px; border-bottom: 1px solid var(--border); }
+.dashboard-title { font-weight: 600; font-size: 15px; display: block; margin-bottom: 10px; }
+.dashboard-widgets { display: flex; flex-wrap: wrap; gap: 10px; }
+.widget-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-width: 160px; background: #1c1530; border: 1px solid var(--border); border-radius: 8px; }
+.widget-title { font-weight: 500; }
+.widget-type { background: #43354f; color: var(--text); align-self: flex-start; }
+.discover-builder { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #1c1530; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px; }
+.discover-field { display: flex; flex-direction: column; gap: 6px; }
+.discover-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
+.discover-columns, .discover-query { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); background: #120c22; color: var(--text); font: inherit; }
+.discover-columns-preview { display: flex; flex-wrap: wrap; gap: 6px; }
+.discover-column-chip { padding: 4px 8px; background: #2a2140; border-radius: 5px; font-size: 12px; }
+.saved-query-row { display: flex; gap: 18px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
+.saved-query-name { font-weight: 600; min-width: 180px; }
+.saved-query-fields { color: var(--muted); font-size: 12px; }

package/dist/client/sentry-mirror.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare function ReleasesView({ releases }: {
+    releases: any[];
+}): React.JSX.Element;
+export declare function ProjectsView({ projects }: {
+    projects: any[];
+}): React.JSX.Element;
+export declare function DashboardsView({ dashboards }: {
+    dashboards: any[];
+}): React.JSX.Element;
+export declare function DiscoverView({ saved, fields, query, onFields, onQuery }: {
+    saved: any[];
+    fields?: string;
+    query?: string;
+    onFields?: (v: string) => void;
+    onQuery?: (v: string) => void;
+}): React.JSX.Element;

package/dist/client/sentry-mirror.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Sentry UI mirror — React/TSX client (Bun-bundled). A Sentry-dashboard-style view:
+// top bar + left nav + an Issues stream (grouped errors with count / last-seen / level /
+// status), an Issue detail (latest event stacktrace + tags), and Releases — all backed by
+// REAL twin state via the twin's own Web API (/api/0/...). API↔UI parity.
+//
+// Pure format/level helpers live in ../src/sentry-mirror-ui.ts (Bun tree-shakes the
+// server-only exports out of this browser bundle).
+import { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { levelTone, statusTone, formatCount, timeAgo, latestStacktrace, eventTags, MIRROR_DEFAULT_ORG, MIRROR_DEFAULT_PROJECT, } from "../src/sentry-mirror-ui.js";
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative, as
+// before); served under a path prefix with a <base> tag every read and write resolves inside that
+// prefix instead of escaping it.
+const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
+const NAV = [
+    { key: 'issues', label: 'Issues' },
+    { key: 'dashboards', label: 'Dashboards' },
+    { key: 'discover', label: 'Discover' },
+    { key: 'releases', label: 'Releases' },
+    { key: 'projects', label: 'Projects' },
+    { key: 'alerts', label: 'Alerts' },
+    { key: 'settings', label: 'Settings' },
+];
+async function api(path) {
+    const res = await fetch(`${WIRE_BASE}/api/0${path}`);
+    try {
+        return await res.json();
+    }
+    catch {
+        return null;
+    }
+}
+function LevelPill({ level }) {
+    return _jsx("span", { className: `pill level-${levelTone(level)}`, children: String(level ?? '').toUpperCase() || '—' });
+}
+function StatusPill({ status }) {
+    return _jsx("span", { className: `pill status-${statusTone(status)}`, children: String(status ?? '').replace(/_/g, ' ') || '—' });
+}
+function IssueRowView({ issue, selected, onSelect }) {
+    return (_jsxs("button", { className: `issue-row ${selected ? 'selected' : ''}`, onClick: onSelect, children: [_jsxs("div", { className: "issue-main", children: [_jsx("div", { className: "issue-title", children: issue.title }), _jsx("div", { className: "issue-culprit mono", children: issue.culprit || issue.shortId })] }), _jsxs("div", { className: "issue-meta", children: [_jsx(LevelPill, { level: issue.level }), _jsx(StatusPill, { status: issue.status }), _jsxs("span", { className: "issue-count", title: "event count", children: [formatCount(issue.count), " events"] }), _jsx("span", { className: "issue-lastseen", children: timeAgo(issue.lastSeen) })] })] }));
+}
+function Stacktrace({ frames }) {
+    if (frames.length === 0)
+        return _jsx("div", { className: "empty", children: "No stacktrace" });
+    return (_jsx("div", { className: "stacktrace", children: frames.map((f, i) => (_jsxs("div", { className: "frame mono", children: [_jsx("span", { className: "frame-fn", children: f.function ?? '?' }), _jsxs("span", { className: "frame-file", children: [f.filename ?? f.module ?? '', f.lineno ? `:${f.lineno}` : ''] })] }, i))) }));
+}
+function IssueDetail({ issue }) {
+    const [event, setEvent] = useState(null);
+    useEffect(() => {
+        let live = true;
+        api(`/issues/${issue.id}/events/latest/`).then((e) => { if (live)
+            setEvent(e); });
+        return () => { live = false; };
+    }, [issue.id]);
+    const frames = useMemo(() => latestStacktrace(event), [event]);
+    const tags = useMemo(() => eventTags(event), [event]);
+    return (_jsxs("div", { className: "issue-detail", children: [_jsx("h2", { className: "detail-title", children: issue.title }), _jsx("div", { className: "detail-sub mono", children: issue.culprit }), _jsxs("div", { className: "detail-stats", children: [_jsxs("div", { children: [_jsx("span", { className: "stat-label", children: "Events" }), _jsx("span", { className: "stat-value", children: formatCount(issue.count) })] }), _jsxs("div", { children: [_jsx("span", { className: "stat-label", children: "First seen" }), _jsx("span", { className: "stat-value", children: timeAgo(issue.firstSeen) })] }), _jsxs("div", { children: [_jsx("span", { className: "stat-label", children: "Last seen" }), _jsx("span", { className: "stat-value", children: timeAgo(issue.lastSeen) })] }), _jsxs("div", { children: [_jsx("span", { className: "stat-label", children: "Status" }), _jsx(StatusPill, { status: issue.status })] })] }), _jsx("h3", { children: "Latest Event Stacktrace" }), _jsx(Stacktrace, { frames: frames }), _jsx("h3", { children: "Tags" }), tags.length === 0 ? _jsx("div", { className: "empty", children: "No tags" }) : (_jsx("div", { className: "tags", children: tags.map((t) => _jsxs("span", { className: "tag mono", children: [t.key, ": ", t.value] }, t.key)) }))] }));
+}
+function IssuesScreen() {
+    const [issues, setIssues] = useState([]);
+    const [selected, setSelected] = useState(null);
+    const [query, setQuery] = useState('is:unresolved');
+    useEffect(() => {
+        api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/issues/?query=${encodeURIComponent(query)}`)
+            .then((rows) => setIssues(Array.isArray(rows) ? rows : []));
+    }, [query]);
+    const current = issues.find((i) => i.id === selected) ?? issues[0];
+    return (_jsxs("div", { className: "split", children: [_jsxs("div", { className: "list", children: [_jsx("div", { className: "search-bar", children: _jsx("input", { className: "search-input", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "is:unresolved level:error ..." }) }), issues.length === 0 ? _jsx("div", { className: "empty", children: "No issues" }) :
+                        issues.map((i) => _jsx(IssueRowView, { issue: i, selected: current?.id === i.id, onSelect: () => setSelected(i.id) }, i.id))] }), _jsx("div", { className: "detail", children: current ? _jsx(IssueDetail, { issue: current }) : _jsx("div", { className: "empty", children: "Select an issue" }) })] }));
+}
+// Presentational (data-in, no fetch): the Releases screen rendered over a given list of
+// releases. Exported so verify() can render it offline over seeded twin state with
+// react-dom/server and assert one `release-row` per seeded release carrying its version.
+export function ReleasesView({ releases }) {
+    return (_jsxs("div", { className: "list full", children: [_jsx("h2", { className: "screen-title", children: "Releases" }), releases.length === 0 ? _jsx("div", { className: "empty", children: "No releases" }) :
+                releases.map((r) => (_jsxs("div", { className: "release-row", children: [_jsx("span", { className: "release-version mono", children: r.version }), _jsxs("span", { className: "release-commits", children: [r.commitCount ?? 0, " commits"] }), _jsx("span", { className: "release-date", children: timeAgo(r.dateCreated) })] }, r.id)))] }));
+}
+function ReleasesScreen() {
+    const [releases, setReleases] = useState([]);
+    useEffect(() => { api(`/organizations/${MIRROR_DEFAULT_ORG}/releases/`).then((r) => setReleases(Array.isArray(r) ? r : [])); }, []);
+    return _jsx(ReleasesView, { releases: releases });
+}
+// Presentational (data-in, no fetch): the Projects screen rendered over a given list of
+// projects. Exported so verify() can render it offline over seeded twin state with
+// react-dom/server and assert one `project-row` per seeded project carrying its slug.
+export function ProjectsView({ projects }) {
+    return (_jsxs("div", { className: "list full", children: [_jsx("h2", { className: "screen-title", children: "Projects" }), projects.length === 0 ? _jsx("div", { className: "empty", children: "No projects" }) :
+                projects.map((p) => (_jsxs("div", { className: "project-row", children: [_jsx("span", { className: "project-name", children: p.name }), _jsx("span", { className: "project-slug mono", children: p.slug }), _jsx("span", { className: "project-platform", children: p.platform ?? '—' })] }, p.id)))] }));
+}
+function ProjectsScreen() {
+    const [projects, setProjects] = useState([]);
+    useEffect(() => { api(`/projects/`).then((p) => setProjects(Array.isArray(p) ? p : [])); }, []);
+    return _jsx(ProjectsView, { projects: projects });
+}
+function AlertsScreen() {
+    const [rules, setRules] = useState([]);
+    useEffect(() => { api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/rules/`).then((r) => setRules(Array.isArray(r) ? r : [])); }, []);
+    return (_jsxs("div", { className: "list full alerts-screen", children: [_jsx("h2", { className: "screen-title", children: "Alerts" }), _jsxs("div", { className: "alerts-sub", children: ["Issue alert rules for ", MIRROR_DEFAULT_PROJECT] }), rules.length === 0 ? _jsx("div", { className: "empty", children: "No alert rules" }) :
+                rules.map((r) => (_jsxs("div", { className: "alert-rule-row", children: [_jsx("span", { className: "alert-rule-name", children: r.name }), _jsx("span", { className: "alert-rule-triggers", children: (Array.isArray(r.triggers) ? r.triggers : []).map((t) => _jsx("span", { className: "alert-trigger pill", children: t }, t)) }), _jsxs("span", { className: "alert-rule-endpoints mono", children: [(Array.isArray(r.endpoints) ? r.endpoints : []).length, " endpoint(s)"] })] }, r.id)))] }));
+}
+function SettingsScreen() {
+    const [project, setProject] = useState(null);
+    const [keys, setKeys] = useState([]);
+    const [envs, setEnvs] = useState([]);
+    useEffect(() => {
+        api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/`).then(setProject);
+        api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/keys/`).then((k) => setKeys(Array.isArray(k) ? k : []));
+        api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/environments/`).then((e) => setEnvs(Array.isArray(e) ? e : []));
+    }, []);
+    return (_jsxs("div", { className: "list full settings-screen", children: [_jsx("h2", { className: "screen-title", children: "Settings" }), _jsxs("section", { className: "settings-section", children: [_jsx("h3", { children: "General" }), _jsxs("div", { className: "setting-field", children: [_jsx("span", { className: "setting-label", children: "Name" }), _jsx("span", { className: "setting-value", children: project?.name ?? '—' })] }), _jsxs("div", { className: "setting-field", children: [_jsx("span", { className: "setting-label", children: "Slug" }), _jsx("span", { className: "setting-value mono", children: project?.slug ?? '—' })] }), _jsxs("div", { className: "setting-field", children: [_jsx("span", { className: "setting-label", children: "Platform" }), _jsx("span", { className: "setting-value", children: project?.platform ?? '—' })] })] }), _jsxs("section", { className: "settings-section", children: [_jsx("h3", { children: "Client Keys (DSN)" }), keys.length === 0 ? _jsx("div", { className: "empty", children: "No keys" }) :
+                        keys.map((k) => (_jsxs("div", { className: "dsn-row", children: [_jsx("span", { className: "dsn-name", children: k.name }), _jsx("span", { className: "dsn-public mono", children: k.dsn?.public }), _jsx("span", { className: `pill ${k.isActive === false ? 'status-ignored' : 'status-resolved'}`, children: k.isActive === false ? 'revoked' : 'active' })] }, k.id)))] }), _jsxs("section", { className: "settings-section", children: [_jsx("h3", { children: "Environments" }), envs.length === 0 ? _jsx("div", { className: "empty", children: "No environments" }) :
+                        _jsx("div", { className: "env-list", children: envs.map((e) => _jsx("span", { className: "env-item pill", children: e.name }, e.id)) })] })] }));
+}
+// Presentational (data-in, no fetch): the Dashboards screen rendered over a given list of
+// dashboards. Exported so verify() can render it offline over seeded twin state with
+// react-dom/server and assert one `dashboard-row` per seeded dashboard (+ its widgets).
+export function DashboardsView({ dashboards }) {
+    return (_jsxs("div", { className: "list full dashboards-screen", children: [_jsx("h2", { className: "screen-title", children: "Dashboards" }), _jsxs("div", { className: "dashboards-sub", children: ["Custom dashboards & widgets for ", MIRROR_DEFAULT_ORG] }), dashboards.length === 0 ? _jsx("div", { className: "empty", children: "No dashboards" }) :
+                dashboards.map((d) => (_jsxs("div", { className: "dashboard-row", children: [_jsx("span", { className: "dashboard-title", children: d.title }), _jsxs("div", { className: "dashboard-widgets", children: [(Array.isArray(d.widgets) ? d.widgets : []).map((w, i) => (_jsxs("div", { className: "widget-card", children: [_jsx("span", { className: "widget-title", children: w.title }), _jsx("span", { className: "widget-type pill", children: w.displayType })] }, i))), (!Array.isArray(d.widgets) || d.widgets.length === 0) && _jsx("span", { className: "empty", children: "No widgets" })] })] }, d.id)))] }));
+}
+function DashboardsScreen() {
+    const [dashboards, setDashboards] = useState([]);
+    useEffect(() => { api(`/organizations/${MIRROR_DEFAULT_ORG}/dashboards/`).then((d) => setDashboards(Array.isArray(d) ? d : [])); }, []);
+    return _jsx(DashboardsView, { dashboards: dashboards });
+}
+// Presentational (data-in, no fetch): the Discover screen rendered over a given query-builder
+// state + list of saved queries. Exported so verify() can render it offline over seeded twin
+// state and assert one `saved-query-row` per seeded saved query. The builder is purely local
+// editor state in the live screen (column/query inputs); we accept it as props so the render is
+// deterministic and self-contained.
+export function DiscoverView({ saved, fields = 'title, count(), last_seen()', query = 'event.type:error', onFields, onQuery }) {
+    const columns = fields.split(',').map((c) => c.trim()).filter(Boolean);
+    return (_jsxs("div", { className: "list full discover-screen", children: [_jsx("h2", { className: "screen-title", children: "Discover" }), _jsxs("div", { className: "discover-builder", children: [_jsxs("div", { className: "discover-field", children: [_jsx("label", { className: "discover-label", children: "Columns" }), _jsx("input", { className: "discover-columns", value: fields, onChange: onFields ? (e) => onFields(e.target.value) : undefined, placeholder: "title, count(), last_seen()", readOnly: !onFields })] }), _jsxs("div", { className: "discover-field", children: [_jsx("label", { className: "discover-label", children: "Query" }), _jsx("input", { className: "discover-query", value: query, onChange: onQuery ? (e) => onQuery(e.target.value) : undefined, placeholder: "event.type:error", readOnly: !onQuery })] }), _jsx("div", { className: "discover-columns-preview", children: columns.map((c) => _jsx("span", { className: "discover-column-chip mono", children: c }, c)) })] }), _jsx("div", { className: "discover-results-note empty", children: "Live query execution requires the data-plane query engine (not built yet) \u2014 the query builder config is faithful and saved queries persist." }), _jsx("h3", { children: "Saved Queries" }), saved.length === 0 ? _jsx("div", { className: "empty", children: "No saved queries" }) :
+                saved.map((q) => (_jsxs("div", { className: "saved-query-row", children: [_jsx("span", { className: "saved-query-name", children: q.name }), _jsx("span", { className: "saved-query-fields mono", children: (Array.isArray(q.fields) ? q.fields : []).join(', ') })] }, q.id)))] }));
+}
+function DiscoverScreen() {
+    const [saved, setSaved] = useState([]);
+    const [fields, setFields] = useState('title, count(), last_seen()');
+    const [query, setQuery] = useState('event.type:error');
+    useEffect(() => { api(`/organizations/${MIRROR_DEFAULT_ORG}/discover/saved/`).then((q) => setSaved(Array.isArray(q) ? q : [])); }, []);
+    return _jsx(DiscoverView, { saved: saved, fields: fields, query: query, onFields: setFields, onQuery: setQuery });
+}
+function App() {
+    const [nav, setNav] = useState('issues');
+    return (_jsxs("div", { className: "app", children: [_jsxs("header", { className: "topbar", children: [_jsxs("span", { className: "brand", children: ["Sentry ", _jsx("span", { className: "badge", children: "twin" })] }), _jsx("span", { className: "org mono", children: MIRROR_DEFAULT_ORG })] }), _jsxs("div", { className: "body", children: [_jsx("nav", { className: "sidenav", children: NAV.map((n) => (_jsx("button", { className: `nav-item ${nav === n.key ? 'active' : ''}`, onClick: () => setNav(n.key), children: n.label }, n.key))) }), _jsxs("main", { className: "content", children: [nav === 'issues' && _jsx(IssuesScreen, {}), nav === 'dashboards' && _jsx(DashboardsScreen, {}), nav === 'discover' && _jsx(DiscoverScreen, {}), nav === 'releases' && _jsx(ReleasesScreen, {}), nav === 'projects' && _jsx(ProjectsScreen, {}), nav === 'alerts' && _jsx(AlertsScreen, {}), nav === 'settings' && _jsx(SettingsScreen, {})] })] })] }));
+}
+// Browser-only mount. Guarded so the presentational components above (DashboardsView,
+// DiscoverView, …) can be imported and renderToStaticMarkup'd in a DOM-less test/SSR
+// environment without this top-level `document` access throwing. The browser bundle still
+// mounts exactly as before.
+if (typeof document !== 'undefined') {
+    const rootEl = document.getElementById('root');
+    if (rootEl)
+        createRoot(rootEl).render(_jsx(App, {}));
+}

package/dist/client/sentry-mirror.tsx

@@ -0,0 +1,352 @@
+// Sentry UI mirror — React/TSX client (Bun-bundled). A Sentry-dashboard-style view:
+// top bar + left nav + an Issues stream (grouped errors with count / last-seen / level /
+// status), an Issue detail (latest event stacktrace + tags), and Releases — all backed by
+// REAL twin state via the twin's own Web API (/api/0/...). API↔UI parity.
+//
+// Pure format/level helpers live in ../src/sentry-mirror-ui.ts (Bun tree-shakes the
+// server-only exports out of this browser bundle).
+import React, { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  levelTone, statusTone, formatCount, timeAgo, latestStacktrace, eventTags,
+  MIRROR_DEFAULT_ORG, MIRROR_DEFAULT_PROJECT,
+  type IssueRow, type StackFrame,
+} from '../src/sentry-mirror-ui.ts';
+
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative, as
+// before); served under a path prefix with a <base> tag every read and write resolves inside that
+// prefix instead of escaping it.
+const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
+
+type Nav = 'issues' | 'dashboards' | 'discover' | 'releases' | 'projects' | 'alerts' | 'settings';
+
+const NAV: Array<{ key: Nav; label: string }> = [
+  { key: 'issues', label: 'Issues' },
+  { key: 'dashboards', label: 'Dashboards' },
+  { key: 'discover', label: 'Discover' },
+  { key: 'releases', label: 'Releases' },
+  { key: 'projects', label: 'Projects' },
+  { key: 'alerts', label: 'Alerts' },
+  { key: 'settings', label: 'Settings' },
+];
+
+async function api(path: string): Promise<any> {
+  const res = await fetch(`${WIRE_BASE}/api/0${path}`);
+  try { return await res.json(); } catch { return null; }
+}
+
+function LevelPill({ level }: { level: any }) {
+  return <span className={`pill level-${levelTone(level)}`}>{String(level ?? '').toUpperCase() || '—'}</span>;
+}
+function StatusPill({ status }: { status: any }) {
+  return <span className={`pill status-${statusTone(status)}`}>{String(status ?? '').replace(/_/g, ' ') || '—'}</span>;
+}
+
+function IssueRowView({ issue, selected, onSelect }: { issue: IssueRow; selected: boolean; onSelect: () => void }) {
+  return (
+    <button className={`issue-row ${selected ? 'selected' : ''}`} onClick={onSelect}>
+      <div className="issue-main">
+        <div className="issue-title">{issue.title}</div>
+        <div className="issue-culprit mono">{issue.culprit || issue.shortId}</div>
+      </div>
+      <div className="issue-meta">
+        <LevelPill level={issue.level} />
+        <StatusPill status={issue.status} />
+        <span className="issue-count" title="event count">{formatCount(issue.count)} events</span>
+        <span className="issue-lastseen">{timeAgo(issue.lastSeen)}</span>
+      </div>
+    </button>
+  );
+}
+
+function Stacktrace({ frames }: { frames: StackFrame[] }) {
+  if (frames.length === 0) return <div className="empty">No stacktrace</div>;
+  return (
+    <div className="stacktrace">
+      {frames.map((f, i) => (
+        <div className="frame mono" key={i}>
+          <span className="frame-fn">{f.function ?? '?'}</span>
+          <span className="frame-file">{f.filename ?? f.module ?? ''}{f.lineno ? `:${f.lineno}` : ''}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function IssueDetail({ issue }: { issue: IssueRow }) {
+  const [event, setEvent] = useState<any>(null);
+  useEffect(() => {
+    let live = true;
+    api(`/issues/${issue.id}/events/latest/`).then((e) => { if (live) setEvent(e); });
+    return () => { live = false; };
+  }, [issue.id]);
+  const frames = useMemo(() => latestStacktrace(event), [event]);
+  const tags = useMemo(() => eventTags(event), [event]);
+  return (
+    <div className="issue-detail">
+      <h2 className="detail-title">{issue.title}</h2>
+      <div className="detail-sub mono">{issue.culprit}</div>
+      <div className="detail-stats">
+        <div><span className="stat-label">Events</span><span className="stat-value">{formatCount(issue.count)}</span></div>
+        <div><span className="stat-label">First seen</span><span className="stat-value">{timeAgo(issue.firstSeen)}</span></div>
+        <div><span className="stat-label">Last seen</span><span className="stat-value">{timeAgo(issue.lastSeen)}</span></div>
+        <div><span className="stat-label">Status</span><StatusPill status={issue.status} /></div>
+      </div>
+      <h3>Latest Event Stacktrace</h3>
+      <Stacktrace frames={frames} />
+      <h3>Tags</h3>
+      {tags.length === 0 ? <div className="empty">No tags</div> : (
+        <div className="tags">{tags.map((t) => <span className="tag mono" key={t.key}>{t.key}: {t.value}</span>)}</div>
+      )}
+    </div>
+  );
+}
+
+function IssuesScreen() {
+  const [issues, setIssues] = useState<IssueRow[]>([]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [query, setQuery] = useState('is:unresolved');
+  useEffect(() => {
+    api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/issues/?query=${encodeURIComponent(query)}`)
+      .then((rows) => setIssues(Array.isArray(rows) ? rows : []));
+  }, [query]);
+  const current = issues.find((i) => i.id === selected) ?? issues[0];
+  return (
+    <div className="split">
+      <div className="list">
+        <div className="search-bar">
+          <input className="search-input" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="is:unresolved level:error ..." />
+        </div>
+        {issues.length === 0 ? <div className="empty">No issues</div> :
+          issues.map((i) => <IssueRowView key={i.id} issue={i} selected={current?.id === i.id} onSelect={() => setSelected(i.id)} />)}
+      </div>
+      <div className="detail">{current ? <IssueDetail issue={current} /> : <div className="empty">Select an issue</div>}</div>
+    </div>
+  );
+}
+
+// Presentational (data-in, no fetch): the Releases screen rendered over a given list of
+// releases. Exported so verify() can render it offline over seeded twin state with
+// react-dom/server and assert one `release-row` per seeded release carrying its version.
+export function ReleasesView({ releases }: { releases: any[] }) {
+  return (
+    <div className="list full">
+      <h2 className="screen-title">Releases</h2>
+      {releases.length === 0 ? <div className="empty">No releases</div> :
+        releases.map((r) => (
+          <div className="release-row" key={r.id}>
+            <span className="release-version mono">{r.version}</span>
+            <span className="release-commits">{r.commitCount ?? 0} commits</span>
+            <span className="release-date">{timeAgo(r.dateCreated)}</span>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+function ReleasesScreen() {
+  const [releases, setReleases] = useState<any[]>([]);
+  useEffect(() => { api(`/organizations/${MIRROR_DEFAULT_ORG}/releases/`).then((r) => setReleases(Array.isArray(r) ? r : [])); }, []);
+  return <ReleasesView releases={releases} />;
+}
+
+// Presentational (data-in, no fetch): the Projects screen rendered over a given list of
+// projects. Exported so verify() can render it offline over seeded twin state with
+// react-dom/server and assert one `project-row` per seeded project carrying its slug.
+export function ProjectsView({ projects }: { projects: any[] }) {
+  return (
+    <div className="list full">
+      <h2 className="screen-title">Projects</h2>
+      {projects.length === 0 ? <div className="empty">No projects</div> :
+        projects.map((p) => (
+          <div className="project-row" key={p.id}>
+            <span className="project-name">{p.name}</span>
+            <span className="project-slug mono">{p.slug}</span>
+            <span className="project-platform">{p.platform ?? '—'}</span>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+function ProjectsScreen() {
+  const [projects, setProjects] = useState<any[]>([]);
+  useEffect(() => { api(`/projects/`).then((p) => setProjects(Array.isArray(p) ? p : [])); }, []);
+  return <ProjectsView projects={projects} />;
+}
+
+function AlertsScreen() {
+  const [rules, setRules] = useState<any[]>([]);
+  useEffect(() => { api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/rules/`).then((r) => setRules(Array.isArray(r) ? r : [])); }, []);
+  return (
+    <div className="list full alerts-screen">
+      <h2 className="screen-title">Alerts</h2>
+      <div className="alerts-sub">Issue alert rules for {MIRROR_DEFAULT_PROJECT}</div>
+      {rules.length === 0 ? <div className="empty">No alert rules</div> :
+        rules.map((r) => (
+          <div className="alert-rule-row" key={r.id}>
+            <span className="alert-rule-name">{r.name}</span>
+            <span className="alert-rule-triggers">
+              {(Array.isArray(r.triggers) ? r.triggers : []).map((t: string) => <span className="alert-trigger pill" key={t}>{t}</span>)}
+            </span>
+            <span className="alert-rule-endpoints mono">{(Array.isArray(r.endpoints) ? r.endpoints : []).length} endpoint(s)</span>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+function SettingsScreen() {
+  const [project, setProject] = useState<any>(null);
+  const [keys, setKeys] = useState<any[]>([]);
+  const [envs, setEnvs] = useState<any[]>([]);
+  useEffect(() => {
+    api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/`).then(setProject);
+    api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/keys/`).then((k) => setKeys(Array.isArray(k) ? k : []));
+    api(`/projects/${MIRROR_DEFAULT_ORG}/${MIRROR_DEFAULT_PROJECT}/environments/`).then((e) => setEnvs(Array.isArray(e) ? e : []));
+  }, []);
+  return (
+    <div className="list full settings-screen">
+      <h2 className="screen-title">Settings</h2>
+      <section className="settings-section">
+        <h3>General</h3>
+        <div className="setting-field"><span className="setting-label">Name</span><span className="setting-value">{project?.name ?? '—'}</span></div>
+        <div className="setting-field"><span className="setting-label">Slug</span><span className="setting-value mono">{project?.slug ?? '—'}</span></div>
+        <div className="setting-field"><span className="setting-label">Platform</span><span className="setting-value">{project?.platform ?? '—'}</span></div>
+      </section>
+      <section className="settings-section">
+        <h3>Client Keys (DSN)</h3>
+        {keys.length === 0 ? <div className="empty">No keys</div> :
+          keys.map((k) => (
+            <div className="dsn-row" key={k.id}>
+              <span className="dsn-name">{k.name}</span>
+              <span className="dsn-public mono">{k.dsn?.public}</span>
+              <span className={`pill ${k.isActive === false ? 'status-ignored' : 'status-resolved'}`}>{k.isActive === false ? 'revoked' : 'active'}</span>
+            </div>
+          ))}
+      </section>
+      <section className="settings-section">
+        <h3>Environments</h3>
+        {envs.length === 0 ? <div className="empty">No environments</div> :
+          <div className="env-list">{envs.map((e) => <span className="env-item pill" key={e.id}>{e.name}</span>)}</div>}
+      </section>
+    </div>
+  );
+}
+
+// Presentational (data-in, no fetch): the Dashboards screen rendered over a given list of
+// dashboards. Exported so verify() can render it offline over seeded twin state with
+// react-dom/server and assert one `dashboard-row` per seeded dashboard (+ its widgets).
+export function DashboardsView({ dashboards }: { dashboards: any[] }) {
+  return (
+    <div className="list full dashboards-screen">
+      <h2 className="screen-title">Dashboards</h2>
+      <div className="dashboards-sub">Custom dashboards & widgets for {MIRROR_DEFAULT_ORG}</div>
+      {dashboards.length === 0 ? <div className="empty">No dashboards</div> :
+        dashboards.map((d) => (
+          <div className="dashboard-row" key={d.id}>
+            <span className="dashboard-title">{d.title}</span>
+            <div className="dashboard-widgets">
+              {(Array.isArray(d.widgets) ? d.widgets : []).map((w: any, i: number) => (
+                <div className="widget-card" key={i}>
+                  <span className="widget-title">{w.title}</span>
+                  <span className="widget-type pill">{w.displayType}</span>
+                </div>
+              ))}
+              {(!Array.isArray(d.widgets) || d.widgets.length === 0) && <span className="empty">No widgets</span>}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+function DashboardsScreen() {
+  const [dashboards, setDashboards] = useState<any[]>([]);
+  useEffect(() => { api(`/organizations/${MIRROR_DEFAULT_ORG}/dashboards/`).then((d) => setDashboards(Array.isArray(d) ? d : [])); }, []);
+  return <DashboardsView dashboards={dashboards} />;
+}
+
+// Presentational (data-in, no fetch): the Discover screen rendered over a given query-builder
+// state + list of saved queries. Exported so verify() can render it offline over seeded twin
+// state and assert one `saved-query-row` per seeded saved query. The builder is purely local
+// editor state in the live screen (column/query inputs); we accept it as props so the render is
+// deterministic and self-contained.
+export function DiscoverView({ saved, fields = 'title, count(), last_seen()', query = 'event.type:error', onFields, onQuery }: { saved: any[]; fields?: string; query?: string; onFields?: (v: string) => void; onQuery?: (v: string) => void }) {
+  const columns = fields.split(',').map((c) => c.trim()).filter(Boolean);
+  return (
+    <div className="list full discover-screen">
+      <h2 className="screen-title">Discover</h2>
+      <div className="discover-builder">
+        <div className="discover-field">
+          <label className="discover-label">Columns</label>
+          <input className="discover-columns" value={fields} onChange={onFields ? (e) => onFields(e.target.value) : undefined} placeholder="title, count(), last_seen()" readOnly={!onFields} />
+        </div>
+        <div className="discover-field">
+          <label className="discover-label">Query</label>
+          <input className="discover-query" value={query} onChange={onQuery ? (e) => onQuery(e.target.value) : undefined} placeholder="event.type:error" readOnly={!onQuery} />
+        </div>
+        <div className="discover-columns-preview">
+          {columns.map((c) => <span className="discover-column-chip mono" key={c}>{c}</span>)}
+        </div>
+      </div>
+      <div className="discover-results-note empty">
+        Live query execution requires the data-plane query engine (not built yet) — the query builder
+        config is faithful and saved queries persist.
+      </div>
+      <h3>Saved Queries</h3>
+      {saved.length === 0 ? <div className="empty">No saved queries</div> :
+        saved.map((q) => (
+          <div className="saved-query-row" key={q.id}>
+            <span className="saved-query-name">{q.name}</span>
+            <span className="saved-query-fields mono">{(Array.isArray(q.fields) ? q.fields : []).join(', ')}</span>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+function DiscoverScreen() {
+  const [saved, setSaved] = useState<any[]>([]);
+  const [fields, setFields] = useState('title, count(), last_seen()');
+  const [query, setQuery] = useState('event.type:error');
+  useEffect(() => { api(`/organizations/${MIRROR_DEFAULT_ORG}/discover/saved/`).then((q) => setSaved(Array.isArray(q) ? q : [])); }, []);
+  return <DiscoverView saved={saved} fields={fields} query={query} onFields={setFields} onQuery={setQuery} />;
+}
+
+function App() {
+  const [nav, setNav] = useState<Nav>('issues');
+  return (
+    <div className="app">
+      <header className="topbar">
+        <span className="brand">Sentry <span className="badge">twin</span></span>
+        <span className="org mono">{MIRROR_DEFAULT_ORG}</span>
+      </header>
+      <div className="body">
+        <nav className="sidenav">
+          {NAV.map((n) => (
+            <button key={n.key} className={`nav-item ${nav === n.key ? 'active' : ''}`} onClick={() => setNav(n.key)}>{n.label}</button>
+          ))}
+        </nav>
+        <main className="content">
+          {nav === 'issues' && <IssuesScreen />}
+          {nav === 'dashboards' && <DashboardsScreen />}
+          {nav === 'discover' && <DiscoverScreen />}
+          {nav === 'releases' && <ReleasesScreen />}
+          {nav === 'projects' && <ProjectsScreen />}
+          {nav === 'alerts' && <AlertsScreen />}
+          {nav === 'settings' && <SettingsScreen />}
+        </main>
+      </div>
+    </div>
+  );
+}
+
+// Browser-only mount. Guarded so the presentational components above (DashboardsView,
+// DiscoverView, …) can be imported and renderToStaticMarkup'd in a DOM-less test/SSR
+// environment without this top-level `document` access throwing. The browser bundle still
+// mounts exactly as before.
+if (typeof document !== 'undefined') {
+  const rootEl = document.getElementById('root');
+  if (rootEl) createRoot(rootEl).render(<App />);
+}

package/dist/src/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};