@volter/twin-sentry 0.1.0

package/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 />);
+}