From d161ccb631a1c24cf1ec8536cd0c8cdc98ce017e Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 11:36:32 -0700 Subject: [PATCH 01/30] feat(local): Add browser session switching Discover running and retained sessions through a separate browser capability and switch isolated feeds in local and hosted viewers. Co-Authored-By: GPT-6 Codex --- .../src/App.sessions.integration.test.tsx | 240 ++++++++++++++++++ apps/local/src/App.tsx | 21 +- .../local/src/components/session-switcher.tsx | 114 +++++++++ apps/local/src/lib/session-directory.test.ts | 65 +++++ apps/local/src/lib/session-directory.ts | 113 +++++++++ docs/cli/local-control-plane.md | 31 ++- .../cli/src/commands/local/control-plane.ts | 104 +++++--- packages/cli/src/commands/local/daemon.ts | 2 + packages/cli/src/commands/local/run.ts | 8 +- packages/cli/src/commands/local/server.ts | 6 +- packages/cli/src/commands/local/ui.ts | 37 ++- .../test/commands/local/control-plane.test.ts | 95 +++++++ .../cli/test/commands/local/server.test.ts | 51 ++++ packages/cli/test/commands/local/ui.test.ts | 35 +++ packages/cli/test/e2e/local.test.ts | 87 +++++++ 15 files changed, 965 insertions(+), 44 deletions(-) create mode 100644 apps/local/src/App.sessions.integration.test.tsx create mode 100644 apps/local/src/components/session-switcher.tsx create mode 100644 apps/local/src/lib/session-directory.test.ts create mode 100644 apps/local/src/lib/session-directory.ts diff --git a/apps/local/src/App.sessions.integration.test.tsx b/apps/local/src/App.sessions.integration.test.tsx new file mode 100644 index 000000000..e9558afb3 --- /dev/null +++ b/apps/local/src/App.sessions.integration.test.tsx @@ -0,0 +1,240 @@ +// @vitest-environment-options {"url":"https://local.sentry.dev"} +import { createServer } from "node:net"; +import { EventSource as NodeEventSource } from "eventsource"; +import { afterEach, beforeEach, expect, test, vi } from "vitest"; +import { + cleanup, + fireEvent, + render, + screen, + waitFor, +} from "@testing-library/react"; +import { NuqsAdapter } from "nuqs/adapters/react"; +import { NuqsTestingAdapter } from "nuqs/adapters/testing"; +import { BrowserRouter } from "react-router"; +import { ThemeProvider } from "./components/theme-provider.tsx"; +import { LocalWorkspaceRoute } from "./routes/local-workspace-route.tsx"; +import { createLocalControlPlane } from "../../../packages/cli/src/commands/local/control-plane.ts"; +import { tryListen } from "../../../packages/cli/src/commands/local/server.ts"; +import { + createLocalSessionStore, + SESSION_RETENTION_MS, +} from "../../../packages/cli/src/commands/local/session-store.ts"; +import App from "./App.tsx"; + +const headers = { Authorization: "Bearer session-switcher-test" }; +async function startDaemon(now = Date.now) { + const reservation = createServer(); + await new Promise((r) => reservation.listen(0, "127.0.0.1", r)); + const address = reservation.address(); + if (!address || typeof address === "string") + throw new Error("Expected TCP address"); + const port = address.port; + await new Promise((r) => reservation.close(() => r())); + const plane = createLocalControlPlane({ + controlToken: "session-switcher-test", + host: "127.0.0.1", + port, + sessionStore: createLocalSessionStore({ now }), + }); + const { server } = await tryListen(plane.app, port, "127.0.0.1"); + const create = async (label: string, maxEnvelopes = 500) => { + const response = await fetch( + `http://127.0.0.1:${port}/_local/v1/sessions`, + { + method: "POST", + headers, + body: JSON.stringify({ + label, + cwd: `/projects/${label}`, + maxEnvelopes, + }), + }, + ); + return response.json() as Promise<{ + id: string; + streamUrl: string; + ingestUrl: string; + directoryUrl: string; + }>; + }; + const ingest = async ( + session: { ingestUrl: string }, + transaction: string, + ) => { + expect( + ( + await fetch(session.ingestUrl, { + method: "POST", + headers: { "Content-Type": "application/x-sentry-envelope" }, + body: `${JSON.stringify({ event_id: crypto.randomUUID() })}\n{"type":"transaction"}\n${JSON.stringify({ transaction })}\n`, + }) + ).status, + ).toBe(204); + }; + return { + plane, + create, + ingest, + stop: () => + new Promise((resolve, reject) => { + server.close((error) => (error ? reject(error) : resolve())); + server.closeAllConnections(); + }), + }; +} +function renderSession(session: { streamUrl: string; directoryUrl?: string }) { + window.history.replaceState( + null, + "", + `/#${new URLSearchParams({ stream: session.streamUrl, ...(session.directoryUrl ? { directory: session.directoryUrl } : {}) })}`, + ); + return render( + + + + + + + + + , + ); +} +beforeEach(() => { + render({null}).unmount(); + window.localStorage.clear(); + window.sessionStorage.clear(); + vi.stubGlobal("EventSource", NodeEventSource); + vi.stubGlobal("matchMedia", () => ({ + matches: false, + media: "", + onchange: null, + addListener() {}, + removeListener() {}, + addEventListener() {}, + removeEventListener() {}, + dispatchEvent() { + return false; + }, + })); +}); +afterEach(() => { + cleanup(); + vi.unstubAllGlobals(); + window.history.replaceState(null, "", "/"); +}); + +test("hosted viewer switches live sessions without mixing events and replays retained data", async () => { + const daemon = await startDaemon(); + try { + const web = await daemon.create("web"); + const worker = await daemon.create("worker", 1000); + await daemon.ingest(web, "/web-request"); + await daemon.ingest(worker, "/worker-job"); + expect(window.location.origin).toBe("https://local.sentry.dev"); + renderSession(web); + await screen.findAllByText("/web-request"); + const picker = await screen.findByRole("combobox", { name: "Session" }); + expect(window.location.hash).toBe(""); + expect(screen.queryByText("/worker-job")).toBeNull(); + fireEvent.change(picker, { target: { value: worker.id } }); + await screen.findAllByText("/worker-job"); + expect(screen.queryByText("/web-request")).toBeNull(); + await screen.findByText(/Retention limit: 1,000 envelopes/); + expect(screen.queryByLabelText("Retention limit")).toBeNull(); + await daemon.ingest(web, "/web-after-switch"); + await daemon.ingest(worker, "/worker-after-switch"); + await screen.findAllByText("/worker-after-switch"); + expect(screen.queryByText("/web-after-switch")).toBeNull(); + fireEvent.change(picker, { target: { value: web.id } }); + await screen.findAllByText("/web-after-switch"); + await screen.findAllByText("/web-request"); + expect(screen.queryByText("/worker-job")).toBeNull(); + const api = await daemon.create("api"); + await screen.findByRole( + "option", + { name: /api.*Running/ }, + { timeout: 7000 }, + ); + daemon.plane.sessionStore.close(worker.id); + fireEvent.click(screen.getByRole("button", { name: "Refresh sessions" })); + await screen.findByRole("option", { name: /worker.*Retained/ }); + fireEvent.change(picker, { target: { value: worker.id } }); + await screen.findAllByText("/worker-job"); + await screen.findAllByText("/worker-after-switch"); + expect( + daemon.plane.sessionStore.getBuffer(web.id).read({ all: true }), + ).toHaveLength(2); + expect( + daemon.plane.sessionStore.getBuffer(worker.id).read({ all: true }), + ).toHaveLength(2); + expect(daemon.plane.sessionStore.resolve(api.id).state).toBe("open"); + cleanup(); + renderSession({ streamUrl: worker.streamUrl }); + await screen.findByRole("combobox", { name: "Session" }); + await screen.findAllByText("/worker-job"); + } finally { + cleanup(); + await daemon.stop(); + } +}, 15_000); + +test("a discovery failure keeps the selected feed readable and can be retried", async () => { + const daemon = await startDaemon(); + try { + const web = await daemon.create("web"); + await daemon.ingest(web, "/still-readable"); + const directory = new URL(web.directoryUrl); + directory.searchParams.set("cap", "expired"); + renderSession({ ...web, directoryUrl: directory.toString() }); + await screen.findAllByText("/still-readable"); + await screen.findByText(/Could not refresh sessions/); + fireEvent.click(screen.getByRole("button", { name: "Refresh sessions" })); + await waitFor(() => + expect(screen.getAllByText("/still-readable").length).toBeGreaterThan(0), + ); + expect( + daemon.plane.sessionStore.getBuffer(web.id).read({ all: true }), + ).toHaveLength(1); + } finally { + cleanup(); + await daemon.stop(); + } +}); + +test("a scoped stream alone never enables sibling discovery", async () => { + const daemon = await startDaemon(); + try { + const web = await daemon.create("web"); + await daemon.ingest(web, "/scoped-only"); + renderSession({ streamUrl: web.streamUrl }); + await screen.findAllByText("/scoped-only"); + expect(screen.queryByRole("combobox", { name: "Session" })).toBeNull(); + } finally { + cleanup(); + await daemon.stop(); + } +}); + +test("expired sessions disappear without clearing already displayed telemetry", async () => { + let now = 1000; + const daemon = await startDaemon(() => now); + try { + const web = await daemon.create("web"); + await daemon.ingest(web, "/retained-in-viewer"); + renderSession(web); + await screen.findAllByText("/retained-in-viewer"); + await screen.findByRole("option", { name: /web.*Running/ }); + daemon.plane.sessionStore.close(web.id); + now += SESSION_RETENTION_MS; + fireEvent.click(screen.getByRole("button", { name: "Refresh sessions" })); + await screen.findByRole("option", { name: "No sessions available" }); + expect(screen.getAllByText("/retained-in-viewer").length).toBeGreaterThan( + 0, + ); + } finally { + cleanup(); + await daemon.stop(); + } +}); diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index 4d56c3a32..69dc65ff7 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -1,3 +1,8 @@ +import { SessionSwitcher } from "./components/session-switcher.tsx"; +import { + getInitialSessionDirectory, + parseSessionDirectoryUrl, +} from "./lib/session-directory.ts"; import { RetentionSettings } from "./components/retention-settings.tsx"; import { DEFAULT_MAX_ENVELOPES, @@ -725,6 +730,8 @@ export default function App() { getSavedRemoteStream(), ), ); + const [directoryUrl] = useState(() => getInitialSessionDirectory(streamUrl)); + const activeDirectoryUrl = parseSessionDirectoryUrl(directoryUrl, streamUrl); const connectionGeneration = useRef(0); const [connectionAttempt, setConnectionAttempt] = useState(0); const [connection, setConnection] = useState("connecting"); @@ -928,8 +935,8 @@ export default function App() { isLoopbackHost(window.location.hostname) && isScopedSessionStream(new URL(currentEndpoint.url).pathname); - const connectToDraft = () => { - const endpoint = parseStreamEndpoint(draftEndpoint); + const connectToEndpoint = (nextStreamUrl: string) => { + const endpoint = parseStreamEndpoint(nextStreamUrl); if (!endpoint) { setConnectionError( "Enter a loopback stream or an HTTPS remote stream ending in /stream.", @@ -1233,6 +1240,14 @@ export default function App() { className="flex min-h-0 flex-1 flex-col" aria-label="Local Sentry events" > + {activeDirectoryUrl ? ( + + ) : null} {hasRetentionSettings ? ( connectToEndpoint(draftEndpoint)} /> ) : !hasRetainedItems ? (
diff --git a/apps/local/src/components/session-switcher.tsx b/apps/local/src/components/session-switcher.tsx new file mode 100644 index 000000000..36ae7dea6 --- /dev/null +++ b/apps/local/src/components/session-switcher.tsx @@ -0,0 +1,114 @@ +import { useEffect, useState } from "react"; +import { RefreshCw } from "lucide-react"; +import { + parseViewerSessions, + saveSessionDirectory, + type ViewerSession, +} from "../lib/session-directory.ts"; + +/** A read-only directory remains independent of the selected telemetry stream. */ +export function SessionSwitcher({ + directoryUrl, + streamUrl, + onSelect, +}: { + directoryUrl: string; + streamUrl: string; + onSelect: (streamUrl: string) => void; +}) { + const [sessions, setSessions] = useState([]); + const [error, setError] = useState(false); + const [loaded, setLoaded] = useState(false); + const [refresh, setRefresh] = useState(0); + useEffect(() => { + let active = true; + let timer: ReturnType | undefined; + let controller: AbortController | undefined; + async function load() { + controller = new AbortController(); + const timeout = setTimeout(() => controller?.abort(), 10_000); + try { + const response = await fetch(directoryUrl, { + signal: controller.signal, + credentials: "omit", + cache: "no-store", + redirect: "error", + referrerPolicy: "no-referrer", + }); + if (!response.ok) throw new Error("Session discovery unavailable"); + const next = parseViewerSessions(await response.json(), directoryUrl); + if (!active) return; + setSessions(next); + setLoaded(true); + setError(false); + saveSessionDirectory(directoryUrl); + } catch { + if (active) setError(true); + } finally { + clearTimeout(timeout); + if (active) timer = setTimeout(() => void load(), 5000); + } + } + void load(); + return () => { + active = false; + controller?.abort(); + clearTimeout(timer); + }; + }, [directoryUrl, refresh]); + const current = sessions.find((s) => s.streamUrl === streamUrl); + return ( +
+ + + + {error ? ( +

+ Could not refresh sessions. The selected feed is unchanged. Retry with + Refresh sessions. +

+ ) : null} +
+ ); +} diff --git a/apps/local/src/lib/session-directory.test.ts b/apps/local/src/lib/session-directory.test.ts new file mode 100644 index 000000000..7aa6e5c0f --- /dev/null +++ b/apps/local/src/lib/session-directory.test.ts @@ -0,0 +1,65 @@ +import { beforeEach, expect, test } from "vitest"; +import { + parseSessionDirectoryUrl, + parseViewerSessions, + getInitialSessionDirectory, + saveSessionDirectory, +} from "./session-directory.ts"; +const stream = + "http://127.0.0.1:8969/_local/v1/sessions/web/stream?cap=web-secret"; +const directory = + "http://127.0.0.1:8969/_local/v1/ui/sessions?cap=directory-secret"; +beforeEach(() => { + window.sessionStorage.clear(); + window.history.replaceState(null, "", "/"); +}); +test("discovery never sends its capability to a different receiver or remote host", () => { + expect(parseSessionDirectoryUrl(directory, stream)).toBe(directory); + for (const target of [ + "https://evil.example/_local/v1/ui/sessions?cap=secret", + "http://127.0.0.1:9999/_local/v1/ui/sessions?cap=secret", + "http://127.0.0.1:8969/_local/v1/sessions?cap=secret", + "http://127.0.0.1:8969/_local/v1/ui/sessions", + ]) { + expect(parseSessionDirectoryUrl(target, stream)).toBeUndefined(); + } +}); +test("returned stream targets must belong to the listed session on the connected daemon", () => { + const web = { + id: "web", + label: "same name", + cwd: "/web", + state: "open", + streamUrl: stream, + }; + expect(parseViewerSessions({ sessions: [web] }, directory)).toEqual([web]); + for (const streamUrl of [ + stream.replace(":8969", ":9999"), + stream.replace("/web/", "/worker/"), + "https://evil.example/stream", + ]) { + expect(() => + parseViewerSessions({ sessions: [{ ...web, streamUrl }] }, directory), + ).toThrow(); + } + expect(() => + parseViewerSessions( + { sessions: [{ ...web, state: "invalid" }] }, + directory, + ), + ).toThrow(); +}); +test("explicit discovery is tab-scoped and cannot follow a saved directory to another daemon", () => { + window.history.replaceState( + null, + "", + `/#${new URLSearchParams({ stream, directory })}`, + ); + expect(getInitialSessionDirectory(stream)).toBe(directory); + saveSessionDirectory(directory); + window.history.replaceState(null, "", "/"); + expect(getInitialSessionDirectory(stream)).toBe(directory); + expect( + getInitialSessionDirectory(stream.replace(":8969", ":9999")), + ).toBeUndefined(); +}); diff --git a/apps/local/src/lib/session-directory.ts b/apps/local/src/lib/session-directory.ts new file mode 100644 index 000000000..ae080158a --- /dev/null +++ b/apps/local/src/lib/session-directory.ts @@ -0,0 +1,113 @@ +import { isLoopbackHost, parseStreamEndpoint } from "./spotlight.ts"; + +const DIRECTORY_STORAGE_KEY = "sentry.local.session-directory"; +export type ViewerSession = { + id: string; + label: string; + cwd: string; + state: "open" | "retained"; + streamUrl: string; +}; + +/** Discovery is opt-in and stays on the already selected loopback daemon. */ +export function parseSessionDirectoryUrl( + value: string | null | undefined, + streamUrl: string, +): string | undefined { + if (!value) return; + try { + const directory = new URL(value); + const stream = parseStreamEndpoint(streamUrl); + if ( + stream?.kind !== "loopback" || + !isLoopbackHost(directory.hostname) || + directory.origin !== new URL(stream.url).origin || + directory.username || + directory.password || + directory.hash || + directory.pathname !== "/_local/v1/ui/sessions" || + !directory.searchParams.get("cap") + ) + return; + return directory.toString(); + } catch { + return; + } +} + +export function getInitialSessionDirectory( + streamUrl: string, +): string | undefined { + const fragment = new URLSearchParams(window.location.hash.slice(1)); + let saved: string | null = null; + try { + saved = window.sessionStorage.getItem(DIRECTORY_STORAGE_KEY); + } catch { + /* Storage may be disabled. */ + } + return parseSessionDirectoryUrl( + fragment.has("directory") ? fragment.get("directory") : saved, + streamUrl, + ); +} + +export function saveSessionDirectory(directoryUrl: string): void { + try { + window.sessionStorage.setItem(DIRECTORY_STORAGE_KEY, directoryUrl); + } catch { + /* Current tab still works without storage. */ + } +} + +/** Treat daemon responses as untrusted; never follow off-daemon stream URLs. */ +export function parseViewerSessions( + value: unknown, + directoryUrl: string, +): ViewerSession[] { + if ( + !value || + typeof value !== "object" || + !("sessions" in value) || + !Array.isArray(value.sessions) + ) + throw new Error("Invalid session directory"); + const origin = new URL(directoryUrl).origin; + return value.sessions + .map((entry: unknown): ViewerSession => { + if (!entry || typeof entry !== "object" || Array.isArray(entry)) + throw new Error("Invalid session"); + const session = entry as Record; + if ( + typeof session.id !== "string" || + !session.id || + typeof session.label !== "string" || + typeof session.cwd !== "string" || + (session.state !== "open" && session.state !== "retained") || + typeof session.streamUrl !== "string" + ) + throw new Error("Invalid session"); + const stream = parseStreamEndpoint(session.streamUrl); + if (stream?.kind !== "loopback") + throw new Error("Invalid session stream"); + const url = new URL(stream.url); + if ( + url.origin !== origin || + url.pathname !== + `/_local/v1/sessions/${encodeURIComponent(session.id)}/stream` + ) + throw new Error("Invalid session stream"); + return { + id: session.id, + label: session.label, + cwd: session.cwd, + state: session.state, + streamUrl: stream.url, + }; + }) + .sort( + (a, b) => + Number(a.state !== "open") - Number(b.state !== "open") || + a.label.localeCompare(b.label) || + a.id.localeCompare(b.id), + ); +} diff --git a/docs/cli/local-control-plane.md b/docs/cli/local-control-plane.md index 9fcca1a80..745aae648 100644 --- a/docs/cli/local-control-plane.md +++ b/docs/cli/local-control-plane.md @@ -22,8 +22,8 @@ sentry local daemon stop `--session` or `--open`. Invalid combinations are rejected before a receiver or application is started. Omit `--verify` to capture into a retained daemon session. -`local session create --json` returns distinct `ingestUrl` and `streamUrl` -capabilities for SDK ingestion and viewer reads. The ingest capability lives in +`local session create --json` returns distinct `ingestUrl`, `streamUrl`, and `directoryUrl` +capabilities for SDK ingestion, single-session streaming, and browser session discovery. The ingest capability lives in the URL path so SDK transports that omit query parameters still deliver events. Treat those URLs as credentials. Use `--clientId ` to make session creation idempotent for retries. Once a @@ -93,6 +93,31 @@ The independently served viewer lives in `apps/local`. Run CLI builds use ; publishing the migrated app requires that hosting project to use Toolkit and `apps/local` as its root directory. +### Switching sessions + +Run either command with `--session --open` to open a viewer with a Session +picker. It works in the local development viewer and on . +The picker lists running and retained sessions from that daemon, including sessions +created after the viewer opens. It refreshes every five seconds; Refresh sessions +updates it immediately. Labels include the working directory and a short session ID +to distinguish runs with the same name. Picking a session replaces only the viewer's +feed, searches, and selection; the daemon retains every session's captured data. +Switching back replays its retained envelopes. Retention follows the selected session. +A failed refresh leaves the current feed readable. Expired sessions leave the list; +the viewer keeps already displayed telemetry and does not silently switch runs. + +Discovery requires the separate `directoryUrl` capability returned by session create +and session view. `--open` passes it alongside the initial stream in the URL fragment, +which is removed after startup and is never sent to the hosting server. The directory +is kept only in tab session storage, so reloads can retain the picker. The capability +allows discovery of all sessions and their stream capabilities on this daemon; treat +it as a credential. It does not grant ingestion or the CLI control API, and expires +when the daemon stops. By themselves, existing scoped stream links do not grant sibling discovery. +An older CLI/daemon or a plain receiver can still connect without a picker; reopen +with an updated CLI and daemon to enable discovery. An already-running older daemon +needs a restart after upgrading; restarting clears its in-memory telemetry. One picker +covers one daemon, not receivers on other ports or computers. + A loopback-served viewer can reset and close its scoped session. The hosted viewer can read the stream and clear its own displayed feed; it cannot mutate retained receiver data. Remote HTTPS streams stay read-only. @@ -112,7 +137,7 @@ spans as failures. The AI workspace matches AI namespaces (`ai`, `gen_ai`, `pnpm --filter sentry test:e2e` builds the npm bundle and runs the CLI process suite. `test/e2e/local.test.ts` covers concurrent startup, session isolation, -capability checks, retained queries, scoped browser controls, wrapped applications, +capability checks, hosted-origin session discovery and isolated stream switching, retained queries, scoped browser controls, wrapped applications, real Sentry Node SDK ingestion, restart, and singleton ownership. The Local workflow repeats these tests against npm and native binaries on Linux, macOS, and Windows. diff --git a/packages/cli/src/commands/local/control-plane.ts b/packages/cli/src/commands/local/control-plane.ts index da8b850c5..bf66e9b6a 100644 --- a/packages/cli/src/commands/local/control-plane.ts +++ b/packages/cli/src/commands/local/control-plane.ts @@ -5,6 +5,7 @@ * its bearer-protected API while SDKs receive only scoped ingestion URLs. */ +import { randomBytes } from "node:crypto"; import { Buffer } from "node:buffer"; import { pushToSpotlightBuffer } from "@spotlightjs/spotlight/sdk"; import { type Context, Hono } from "hono"; @@ -33,6 +34,7 @@ const LOOPBACK_ORIGIN_RE = const SESSION_UI_ACTION_RE = /^\/_local\/v1\/sessions\/[^/]+\/ui\/(reset|close|retention)$/; const SESSION_INGEST_RE = /^\/_local\/v1\/sessions\/[^/]+\/ingest\/[^/]+$/; +const VIEWER_SESSIONS_PATH = "/_local/v1/ui/sessions"; const SESSION_STREAM_RE = /^\/_local\/v1\/sessions\/[^/]+\/stream$/; /** Authenticated HTTP application and its in-memory session registry. */ @@ -115,6 +117,10 @@ export function createLocalControlPlane({ }: CreateLocalControlPlaneOptions): LocalControlPlane { const app = new Hono(); const baseUrl = formatLocalServerUrl(host, port); + // Separate opt-in capability: a scoped stream never grants sibling discovery. + // This token dies with the daemon and never authorizes the control API. + const viewerCapability = randomBytes(24).toString("base64url"); + const directoryUrl = `${baseUrl}${VIEWER_SESSIONS_PATH}?cap=${viewerCapability}`; const sessionExists = (reference: string): boolean => { sessionStore.pruneExpired(); try { @@ -138,6 +144,7 @@ export function createLocalControlPlane({ app.use(`${CONTROL_PLANE_PREFIX}/*`, async (c, next) => { if ( + c.req.path === VIEWER_SESSIONS_PATH || SESSION_STREAM_RE.test(c.req.path) || ((c.req.method === "POST" || c.req.method === "OPTIONS") && SESSION_INGEST_RE.test(c.req.path)) || @@ -175,39 +182,56 @@ export function createLocalControlPlane({ allowMethods: ["GET", "OPTIONS"], origin: (origin) => (isHostedUiOrigin(origin) ? origin : null), }); - app.use(`${CONTROL_PLANE_PREFIX}/sessions/:id/stream`, async (c, next) => { - const origin = c.req.header("origin") ?? ""; - const isWrite = - c.req.method === "POST" || - (c.req.method === "OPTIONS" && - c.req.header("access-control-request-method") !== "GET"); - if (isWrite && !isLoopbackBrowserRequest(c.req.raw)) { - return c.body(null, 403); - } - if (!isHostedUiOrigin(origin)) { - return loopbackCors(c, next); - } - if (c.req.method === "OPTIONS") { - if (c.req.header("access-control-request-method") !== "GET") { + for (const path of [ + `${CONTROL_PLANE_PREFIX}/sessions/:id/stream`, + VIEWER_SESSIONS_PATH, + ]) + app.use(path, async (c, next) => { + if (c.req.path === VIEWER_SESSIONS_PATH) { + if ( + (c.req.method !== "GET" && c.req.method !== "OPTIONS") || + (c.req.method === "OPTIONS" && + c.req.header("access-control-request-method") !== "GET") + ) + return c.body(null, 403); + if ( + !isLoopbackBrowserRequest(c.req.raw) && + !isHostedUiOrigin(c.req.header("origin") ?? "") + ) + return c.body(null, 403); + } + const origin = c.req.header("origin") ?? ""; + const isWrite = + c.req.method === "POST" || + (c.req.method === "OPTIONS" && + c.req.header("access-control-request-method") !== "GET"); + if (isWrite && !isLoopbackBrowserRequest(c.req.raw)) { return c.body(null, 403); } - c.header("Access-Control-Allow-Origin", origin); - c.header("Access-Control-Allow-Methods", "GET, OPTIONS"); - c.header("Access-Control-Allow-Headers", "Last-Event-ID"); - if (c.req.header("access-control-request-private-network") === "true") { - c.header("Access-Control-Allow-Private-Network", "true"); + if (!isHostedUiOrigin(origin)) { + return loopbackCors(c, next); } - c.header( - "Vary", - "Origin, Access-Control-Request-Headers, Access-Control-Request-Private-Network", - ); - return c.body(null, 204); - } - if (c.req.method !== "GET") { - return c.body(null, 403); - } - return hostedCors(c, next); - }); + if (c.req.method === "OPTIONS") { + if (c.req.header("access-control-request-method") !== "GET") { + return c.body(null, 403); + } + c.header("Access-Control-Allow-Origin", origin); + c.header("Access-Control-Allow-Methods", "GET, OPTIONS"); + c.header("Access-Control-Allow-Headers", "Last-Event-ID"); + if (c.req.header("access-control-request-private-network") === "true") { + c.header("Access-Control-Allow-Private-Network", "true"); + } + c.header( + "Vary", + "Origin, Access-Control-Request-Headers, Access-Control-Request-Private-Network", + ); + return c.body(null, 204); + } + if (c.req.method !== "GET") { + return c.body(null, 403); + } + return hostedCors(c, next); + }); app.use( `${CONTROL_PLANE_PREFIX}/sessions/:id/ui/*`, cors({ @@ -217,6 +241,24 @@ export function createLocalControlPlane({ }), ); + app.get(VIEWER_SESSIONS_PATH, (c) => { + if (c.req.query("cap") !== viewerCapability) return c.body(null, 401); + sessionStore.pruneExpired(); + c.header("Cache-Control", "no-store"); + return c.json({ + sessions: sessionStore + .list() + .map(({ id, label, cwd, state, createdAt }) => ({ + id, + label, + cwd, + state, + createdAt, + streamUrl: `${baseUrl}${CONTROL_PLANE_PREFIX}/sessions/${id}/stream?cap=${sessionStore.getCapabilities(id).stream}`, + })), + }); + }); + app.get(`${CONTROL_PLANE_PREFIX}/sessions`, (c) => { sessionStore.pruneExpired(); return c.json({ sessions: sessionStore.list() }); @@ -231,6 +273,7 @@ export function createLocalControlPlane({ const path = `${CONTROL_PLANE_PREFIX}/sessions/${session.id}`; return c.json({ ...session, + directoryUrl, ingestUrl: `${baseUrl}${path}/ingest/${capabilities.ingest}`, streamUrl: `${baseUrl}${path}/stream?cap=${capabilities.stream}`, }); @@ -274,6 +317,7 @@ export function createLocalControlPlane({ return c.json( { ...session, + directoryUrl, ingestUrl: `${baseUrl}${path}/ingest/${capabilities.ingest}`, streamUrl: `${baseUrl}${path}/stream?cap=${capabilities.stream}`, }, diff --git a/packages/cli/src/commands/local/daemon.ts b/packages/cli/src/commands/local/daemon.ts index d30237e54..ad5f5350f 100644 --- a/packages/cli/src/commands/local/daemon.ts +++ b/packages/cli/src/commands/local/daemon.ts @@ -62,6 +62,8 @@ export type LocalDaemonSession = { readonly ingestUrl: string; readonly label: string; readonly streamUrl: string; + /** Older daemon versions do not advertise browser discovery. */ + readonly directoryUrl?: string; }; function statePath(directory: string): string { diff --git a/packages/cli/src/commands/local/run.ts b/packages/cli/src/commands/local/run.ts index 0ed949819..26e8c93ed 100644 --- a/packages/cli/src/commands/local/run.ts +++ b/packages/cli/src/commands/local/run.ts @@ -499,6 +499,7 @@ export const runCommand = buildCommand({ let daemonSessionId: string | undefined; let daemonIngestUrl: string | undefined; let daemonStreamUrl: string | undefined; + let daemonDirectoryUrl: string | undefined; const useJson = flags.format === "json"; const activeFilters = new Set(flags.filter); @@ -514,6 +515,7 @@ export const runCommand = buildCommand({ daemonSessionId = session.id; daemonIngestUrl = session.ingestUrl; daemonStreamUrl = session.streamUrl; + daemonDirectoryUrl = session.directoryUrl; return attachToExistingServer({ activeFilters, showAttributes: flags.attributes, @@ -532,7 +534,11 @@ export const runCommand = buildCommand({ }); url = tail.url; - await openLocalUiIfRequested(flags.open, daemonStreamUrl ?? url); + await openLocalUiIfRequested( + flags.open, + daemonStreamUrl ?? url, + daemonDirectoryUrl, + ); const spotlightUrl = daemonIngestUrl ?? `${url}/stream`; const wrangler = await injectWranglerSpotlightBinding( diff --git a/packages/cli/src/commands/local/server.ts b/packages/cli/src/commands/local/server.ts index 28a1e1a63..a5d4363c3 100644 --- a/packages/cli/src/commands/local/server.ts +++ b/packages/cli/src/commands/local/server.ts @@ -1071,7 +1071,11 @@ export const serverCommand = buildCommand({ ` Capabilities: sentry local session view ${session.id} --json`, ); logger.info("Press Ctrl-C to stop."); - await openLocalUiIfRequested(flags.open, session.streamUrl); + await openLocalUiIfRequested( + flags.open, + session.streamUrl, + session.directoryUrl, + ); const controller = new AbortController(); const stop = () => controller.abort(); diff --git a/packages/cli/src/commands/local/ui.ts b/packages/cli/src/commands/local/ui.ts index b0db5fdc5..b5efb6f4e 100644 --- a/packages/cli/src/commands/local/ui.ts +++ b/packages/cli/src/commands/local/ui.ts @@ -41,7 +41,10 @@ export function getLocalUiBaseUrl( } /** Build the browser URL without exposing the local stream to the UI host. */ -export function buildLocalUiUrl(receiverUrl: string): string { +export function buildLocalUiUrl( + receiverUrl: string, + directoryUrl?: string, +): string { const receiver = new URL(receiverUrl); assertLoopbackHostForUi(receiver.hostname); @@ -49,13 +52,34 @@ export function buildLocalUiUrl(receiverUrl: string): string { ? receiver.toString() : new URL("/stream", receiver).toString(); const uiUrl = new URL(getLocalUiBaseUrl()); - uiUrl.hash = new URLSearchParams({ stream: streamUrl }).toString(); + const fragment = new URLSearchParams({ stream: streamUrl }); + if (directoryUrl) { + const directory = new URL(directoryUrl); + if ( + directory.origin !== receiver.origin || + directory.pathname !== "/_local/v1/ui/sessions" || + !directory.searchParams.get("cap") || + directory.username || + directory.password || + directory.hash + ) { + throw new ValidationError( + "Session discovery must use the same loopback receiver.", + "directory", + ); + } + fragment.set("directory", directory.toString()); + } + uiUrl.hash = fragment.toString(); return uiUrl.toString(); } /** Open the independently served local UI without affecting capture on failure. */ -export async function openLocalUi(receiverUrl: string): Promise { - const uiUrl = buildLocalUiUrl(receiverUrl); +export async function openLocalUi( + receiverUrl: string, + directoryUrl?: string, +): Promise { + const uiUrl = buildLocalUiUrl(receiverUrl, directoryUrl); let opened = false; try { opened = await openBrowser(uiUrl); @@ -67,7 +91,7 @@ export async function openLocalUi(receiverUrl: string): Promise { return; } const streamUrl = new URL(receiverUrl); - if (streamUrl.searchParams.has("cap")) { + if (streamUrl.searchParams.has("cap") || directoryUrl) { logger.warn( "Could not open browser. Use sentry local session view --json to retrieve its stream URL.", ); @@ -80,8 +104,9 @@ export async function openLocalUi(receiverUrl: string): Promise { export async function openLocalUiIfRequested( requested: boolean, receiverUrl: string, + directoryUrl?: string, ): Promise { if (requested) { - await openLocalUi(receiverUrl); + await openLocalUi(receiverUrl, directoryUrl); } } diff --git a/packages/cli/test/commands/local/control-plane.test.ts b/packages/cli/test/commands/local/control-plane.test.ts index a87781093..bbd182db0 100644 --- a/packages/cli/test/commands/local/control-plane.test.ts +++ b/packages/cli/test/commands/local/control-plane.test.ts @@ -14,6 +14,101 @@ function controlHeaders() { } describe("Local control plane", () => { + test("discovers sibling streams only with the explicit browser directory capability", async () => { + const plane = createLocalControlPlane({ controlToken: CONTROL_TOKEN }); + const create = async (label: string) => + ( + await plane.app.request("/_local/v1/sessions", { + method: "POST", + headers: controlHeaders(), + body: JSON.stringify({ label, cwd: `/${label}` }), + }) + ).json(); + const web = await create("web"); + const worker = await create("worker"); + expect(web.directoryUrl).toEqual(expect.any(String)); + const directoryCap = new URL(web.directoryUrl).searchParams.get("cap"); + expect( + ( + await plane.app.request("/_local/v1/sessions", { + headers: { Authorization: `Bearer ${directoryCap}` }, + }) + ).status, + ).toBe(401); + for (const cap of [ + "", + CONTROL_TOKEN, + new URL(web.streamUrl).searchParams.get("cap")!, + new URL(web.ingestUrl).pathname.split("/").at(-1)!, + ]) { + const url = new URL(web.directoryUrl); + url.searchParams.set("cap", cap); + expect((await plane.app.request(url.toString())).status).toBe(401); + } + const response = await plane.app.request(web.directoryUrl, { + headers: { Origin: "https://local.sentry.dev" }, + }); + expect(response.status).toBe(200); + expect(response.headers.get("Access-Control-Allow-Origin")).toBe( + "https://local.sentry.dev", + ); + expect(response.headers.get("Cache-Control")).toBe("no-store"); + const body = await response.json(); + expect(body.sessions).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + id: web.id, + label: "web", + state: "open", + streamUrl: web.streamUrl, + }), + expect.objectContaining({ + id: worker.id, + label: "worker", + state: "open", + streamUrl: worker.streamUrl, + }), + ]), + ); + expect(JSON.stringify(body)).not.toContain("ingestUrl"); + expect(JSON.stringify(body)).not.toContain(CONTROL_TOKEN); + expect( + ( + await plane.app.request(web.directoryUrl, { + headers: { Origin: "https://evil.example" }, + }) + ).status, + ).toBe(403); + const preflight = await plane.app.request(web.directoryUrl, { + method: "OPTIONS", + headers: { + Origin: "https://local.sentry.dev", + "Access-Control-Request-Method": "GET", + "Access-Control-Request-Private-Network": "true", + }, + }); + expect(preflight.status).toBe(204); + expect(preflight.headers.get("Access-Control-Allow-Private-Network")).toBe( + "true", + ); + expect( + ( + await plane.app.request(web.directoryUrl, { + method: "POST", + headers: { Origin: "https://local.sentry.dev" }, + }) + ).status, + ).toBe(403); + plane.sessionStore.close(worker.id); + expect( + (await (await plane.app.request(web.directoryUrl)).json()).sessions, + ).toEqual( + expect.arrayContaining([ + expect.objectContaining({ id: worker.id, state: "retained" }), + ]), + ); + }); + test("replaces expired clientId sessions with usable fresh capabilities on creation", async () => { let now = 1000; const sessionStore = createLocalSessionStore({ now: () => now }); diff --git a/packages/cli/test/commands/local/server.test.ts b/packages/cli/test/commands/local/server.test.ts index 3519c03e4..837f937ed 100644 --- a/packages/cli/test/commands/local/server.test.ts +++ b/packages/cli/test/commands/local/server.test.ts @@ -38,6 +38,7 @@ type ServeFunc = ( format: "human" | "json"; attributes: boolean; open: boolean; + session?: string; }, ) => Promise; @@ -142,6 +143,56 @@ describe("sentry local serve --open", () => { open: true, }; + test("scoped serve opens the viewer with explicit session discovery", async () => { + const daemon = await import("../../../src/commands/local/daemon.js"); + const { server, port } = await tryListen( + buildApp(createSpotlightBuffer(5)), + 0, + "127.0.0.1", + ); + const streamUrl = `http://127.0.0.1:${port}/stream`; + const directoryUrl = `http://127.0.0.1:${port}/_local/v1/ui/sessions?cap=directory-secret`; + const create = vi + .spyOn(daemon, "createLocalDaemonSession") + .mockResolvedValue({ + id: "web", + cwd: "/web", + label: "web", + streamUrl, + ingestUrl: streamUrl, + directoryUrl, + }); + const retain = vi + .spyOn(daemon, "retainLocalDaemonSession") + .mockResolvedValue(undefined); + const signal = interceptShutdownSignal(); + const opener = vi.mocked(openBrowser); + opener.mockClear(); + const func = (await serverCommand.loader()) as unknown as ServeFunc; + try { + const command = func.call( + { cwd: "/web" }, + { ...flags, port, session: "web" }, + ); + await vi.waitFor(() => expect(opener).toHaveBeenCalledTimes(1)); + signal.trigger(); + await command; + const url = new URL(opener.mock.calls[0]![0]); + expect(new URLSearchParams(url.hash.slice(1)).get("directory")).toBe( + directoryUrl, + ); + expect(url.search).toBe(""); + } finally { + signal.restore(); + create.mockRestore(); + retain.mockRestore(); + await new Promise((r) => { + server.close(() => r()); + server.closeAllConnections(); + }); + } + }); + test("opens the UI after starting an owned receiver", async () => { const signal = interceptShutdownSignal(); const openBrowserMock = vi.mocked(openBrowser); diff --git a/packages/cli/test/commands/local/ui.test.ts b/packages/cli/test/commands/local/ui.test.ts index b59575e52..2b0314537 100644 --- a/packages/cli/test/commands/local/ui.test.ts +++ b/packages/cli/test/commands/local/ui.test.ts @@ -6,6 +6,7 @@ import { getLocalUiBaseUrl, openLocalUi, } from "../../../src/commands/local/ui.js"; +import { logger } from "../../../src/lib/logger.js"; import { openBrowser } from "../../../src/lib/browser.js"; vi.mock("../../../src/lib/browser.js", () => ({ @@ -13,6 +14,40 @@ vi.mock("../../../src/lib/browser.js", () => ({ })); describe("local UI URLs", () => { + test("never logs a directory capability when a browser launch fails", async () => { + vi.mocked(openBrowser).mockResolvedValueOnce(false); + const warn = vi.spyOn(logger, "warn").mockImplementation(() => {}); + try { + await openLocalUi( + "http://localhost:8969/stream", + "http://localhost:8969/_local/v1/ui/sessions?cap=directory-secret", + ); + expect( + warn.mock.calls.map((call) => String(call[0])).join("\n"), + ).not.toContain("directory-secret"); + } finally { + warn.mockRestore(); + } + }); + + test("keeps browser session discovery in the fragment alongside its scoped stream", () => { + const stream = + "http://localhost:8969/_local/v1/sessions/web/stream?cap=stream-secret"; + const directory = + "http://localhost:8969/_local/v1/ui/sessions?cap=directory-secret"; + const url = new URL(buildLocalUiUrl(stream, directory)); + expect(url.search).toBe(""); + const fragment = new URLSearchParams(url.hash.slice(1)); + expect(fragment.get("stream")).toBe(stream); + expect(fragment.get("directory")).toBe(directory); + expect(() => + buildLocalUiUrl( + stream, + "http://localhost:9999/_local/v1/ui/sessions?cap=other", + ), + ).toThrow(); + }); + test("uses the Vite UI in development", () => { expect(getLocalUiBaseUrl("development")).toBe("http://localhost:5173"); }); diff --git a/packages/cli/test/e2e/local.test.ts b/packages/cli/test/e2e/local.test.ts index 81f76c617..27c47957d 100644 --- a/packages/cli/test/e2e/local.test.ts +++ b/packages/cli/test/e2e/local.test.ts @@ -14,6 +14,7 @@ type Session = { id: string; ingestUrl: string; streamUrl: string; + directoryUrl: string; }; const fetch = (globalThis as { __originalFetch: typeof globalThis.fetch }) @@ -91,6 +92,92 @@ afterEach(async () => { }); describe("Local daemon E2E", () => { + test("hosted session discovery switches isolated streams and preserves retained sessions", async () => { + const port = await availablePort(); + const web = await createSession("web", port); + const worker = await createSession("worker", port); + await ingest(web, "web-id", "web-only"); + await ingest(worker, "worker-id", "worker-only"); + const origin = { Origin: "https://local.sentry.dev" }; + const response = await fetch(web.directoryUrl, { headers: origin }); + expect(response.status).toBe(200); + expect(response.headers.get("Access-Control-Allow-Origin")).toBe( + "https://local.sentry.dev", + ); + const directory = (await response.json()) as { + sessions: { + id: string; + label: string; + state: string; + streamUrl: string; + }[]; + }; + expect(directory.sessions).toHaveLength(2); + expect(JSON.stringify(directory)).not.toContain("ingestUrl"); + for (const [id, expected, excluded] of [ + [web.id, "web-only", "worker-only"], + [worker.id, "worker-only", "web-only"], + [web.id, "web-only", "worker-only"], + ]) { + const session = directory.sessions.find((s) => s.id === id)!; + const stream = await fetch(session.streamUrl, { + headers: origin, + signal: AbortSignal.timeout(5000), + }); + const reader = stream.body!.getReader(); + try { + let text = ""; + while (!text.includes(expected!)) { + const chunk = await reader.read(); + if (chunk.done) throw new Error("Stream closed"); + text += new TextDecoder().decode(chunk.value); + } + expect(text).not.toContain(excluded!); + } finally { + await reader.cancel(); + } + } + const wrong = new URL(web.directoryUrl); + wrong.searchParams.set( + "cap", + new URL(web.streamUrl).searchParams.get("cap")!, + ); + expect((await fetch(wrong, { headers: origin })).status).toBe(401); + const preflight = await fetch(web.directoryUrl, { + method: "OPTIONS", + headers: { + ...origin, + "Access-Control-Request-Method": "GET", + "Access-Control-Request-Private-Network": "true", + }, + }); + expect(preflight.status).toBe(204); + expect(preflight.headers.get("Access-Control-Allow-Private-Network")).toBe( + "true", + ); + expect( + ( + await fetch(web.directoryUrl, { + headers: { Origin: "https://evil.example" }, + }) + ).status, + ).toBe(403); + expect( + (await fetch(web.directoryUrl, { method: "POST", headers: origin })) + .status, + ).toBe(403); + expect((await cli("session", "close", worker.id)).exitCode).toBe(0); + const refreshed = (await ( + await fetch(web.directoryUrl, { headers: origin }) + ).json()) as typeof directory; + expect(refreshed.sessions.find((s) => s.id === worker.id)?.state).toBe( + "retained", + ); + expect( + JSON.parse((await cli("event", "list", worker.id)).stdout).events, + ).toHaveLength(1); + }, 30_000); + test.each( ["stop", "restart"].flatMap((command) => ["delayed", "rejected", "never", "hung"].map((mode) => ({ From 8124a15e4933e9637a034eaa5f70ea9310f095da Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 11:56:35 -0700 Subject: [PATCH 02/30] feat(local): Add a searchable session picker Use the existing shadcn Command and Button components with a Radix popover, keep session paths in the menu, and constrain the workspace width. Co-Authored-By: GPT-6 Codex --- apps/local/package.json | 1 + .../src/App.sessions.integration.test.tsx | 48 +++- apps/local/src/App.tsx | 4 +- .../local/src/components/session-switcher.tsx | 165 ++++++++++---- apps/local/src/components/ui/popover.tsx | 34 +++ pnpm-lock.yaml | 214 +++++++++++++++++- 6 files changed, 421 insertions(+), 45 deletions(-) create mode 100644 apps/local/src/components/ui/popover.tsx diff --git a/apps/local/package.json b/apps/local/package.json index adc9a7e19..d37fa3fd9 100644 --- a/apps/local/package.json +++ b/apps/local/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@radix-ui/react-dialog": "^1.1.23", + "@radix-ui/react-popover": "^1.3.1", "@radix-ui/react-slot": "^1.3.3", "@shikijs/core": "^3.23.0", "@shikijs/engine-javascript": "^3.23.0", diff --git a/apps/local/src/App.sessions.integration.test.tsx b/apps/local/src/App.sessions.integration.test.tsx index e9558afb3..6fb64d439 100644 --- a/apps/local/src/App.sessions.integration.test.tsx +++ b/apps/local/src/App.sessions.integration.test.tsx @@ -101,6 +101,16 @@ function renderSession(session: { streamUrl: string; directoryUrl?: string }) { , ); } +async function selectSession(label: string) { + if (!screen.queryByRole("listbox")) + fireEvent.click( + screen.getByRole("combobox", { name: "Session", exact: true }), + ); + fireEvent.click( + await screen.findByRole("option", { name: new RegExp(`^${label} ·`) }), + ); +} + beforeEach(() => { render({null}).unmount(); window.localStorage.clear(); @@ -138,7 +148,7 @@ test("hosted viewer switches live sessions without mixing events and replays ret const picker = await screen.findByRole("combobox", { name: "Session" }); expect(window.location.hash).toBe(""); expect(screen.queryByText("/worker-job")).toBeNull(); - fireEvent.change(picker, { target: { value: worker.id } }); + await selectSession("worker"); await screen.findAllByText("/worker-job"); expect(screen.queryByText("/web-request")).toBeNull(); await screen.findByText(/Retention limit: 1,000 envelopes/); @@ -147,20 +157,43 @@ test("hosted viewer switches live sessions without mixing events and replays ret await daemon.ingest(worker, "/worker-after-switch"); await screen.findAllByText("/worker-after-switch"); expect(screen.queryByText("/web-after-switch")).toBeNull(); - fireEvent.change(picker, { target: { value: web.id } }); + await selectSession("web"); await screen.findAllByText("/web-after-switch"); await screen.findAllByText("/web-request"); expect(screen.queryByText("/worker-job")).toBeNull(); const api = await daemon.create("api"); + fireEvent.click(picker); await screen.findByRole( "option", { name: /api.*Running/ }, { timeout: 7000 }, ); + const search = screen.getByRole("combobox", { + name: "Search sessions", + exact: true, + }); + fireEvent.change(search, { target: { value: "api" } }); + await waitFor(() => + expect(screen.queryByRole("option", { name: /^worker ·/ })).toBeNull(), + ); + fireEvent.keyDown(search, { key: "Enter" }); + await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull()); + await waitFor(() => expect(document.activeElement).toBe(picker)); + expect( + screen.getByRole("combobox", { name: "Session", exact: true }) + .textContent, + ).toContain("api"); daemon.plane.sessionStore.close(worker.id); fireEvent.click(screen.getByRole("button", { name: "Refresh sessions" })); + fireEvent.click(picker); await screen.findByRole("option", { name: /worker.*Retained/ }); - fireEvent.change(picker, { target: { value: worker.id } }); + fireEvent.keyDown( + screen.getByRole("combobox", { name: "Search sessions", exact: true }), + { key: "Escape" }, + ); + await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull()); + await waitFor(() => expect(document.activeElement).toBe(picker)); + await selectSession("worker"); await screen.findAllByText("/worker-job"); await screen.findAllByText("/worker-after-switch"); expect( @@ -225,11 +258,18 @@ test("expired sessions disappear without clearing already displayed telemetry", await daemon.ingest(web, "/retained-in-viewer"); renderSession(web); await screen.findAllByText("/retained-in-viewer"); + fireEvent.click( + screen.getByRole("combobox", { name: "Session", exact: true }), + ); await screen.findByRole("option", { name: /web.*Running/ }); + await selectSession("web"); daemon.plane.sessionStore.close(web.id); now += SESSION_RETENTION_MS; fireEvent.click(screen.getByRole("button", { name: "Refresh sessions" })); - await screen.findByRole("option", { name: "No sessions available" }); + fireEvent.click( + screen.getByRole("combobox", { name: "Session", exact: true }), + ); + await screen.findByText("No sessions available."); expect(screen.getAllByText("/retained-in-viewer").length).toBeGreaterThan( 0, ); diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index 69dc65ff7..7cae26e4d 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -1235,9 +1235,9 @@ export default function App() {
) : null} -
+
{activeDirectoryUrl ? ( diff --git a/apps/local/src/components/session-switcher.tsx b/apps/local/src/components/session-switcher.tsx index 36ae7dea6..6d7a2f449 100644 --- a/apps/local/src/components/session-switcher.tsx +++ b/apps/local/src/components/session-switcher.tsx @@ -1,5 +1,16 @@ import { useEffect, useState } from "react"; -import { RefreshCw } from "lucide-react"; +import { Check, ChevronsUpDown, Layers3, RefreshCw } from "lucide-react"; +import { Button } from "./ui/button.tsx"; +import { Badge } from "./ui/badge.tsx"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "./ui/command.tsx"; +import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.tsx"; import { parseViewerSessions, saveSessionDirectory, @@ -16,6 +27,7 @@ export function SessionSwitcher({ streamUrl: string; onSelect: (streamUrl: string) => void; }) { + const [open, setOpen] = useState(false); const [sessions, setSessions] = useState([]); const [error, setError] = useState(false); const [loaded, setLoaded] = useState(false); @@ -60,49 +72,126 @@ export function SessionSwitcher({ return (
- - - + + + + + + + {error + ? "Sessions unavailable." + : !loaded + ? "Loading sessions…" + : sessions.length + ? "No matching sessions." + : "No sessions available."} + + {(["open", "retained"] as const).map((state) => { + const entries = sessions.filter( + (session) => session.state === state, + ); + return entries.length ? ( + + {entries.map((session) => ( + { + if (session.streamUrl !== streamUrl) + onSelect(session.streamUrl); + setOpen(false); + }} + > + + ))} + + ) : null; + })} + + +

+ {sessions.length} {sessions.length === 1 ? "session" : "sessions"}{" "} + on this receiver +

+ + + +
))} -
-
- - - {onCloseSession ? ( - - ) : null} -
+ +
+ ), + )}
); From ae71daa944990434ae2a8091452f8f6a835d61bf Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 12:11:15 -0700 Subject: [PATCH 04/30] fix(local): Keep secondary receiver actions compact Give Change receiver a full button and retain accessible icon controls for clearing events and closing sessions. Co-Authored-By: GPT-6 Codex --- apps/local/src/App.tsx | 88 +++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 52 deletions(-) diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index f9ebcd577..584089bb1 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -15,9 +15,9 @@ import { ChevronRight, Copy, Menu, - Plug, - Eraser, - CircleStop, + Radio, + Trash2, + X, Search, Terminal, } from "lucide-react"; @@ -516,35 +516,20 @@ function WorkspaceSidebar({ onSelect, onToggle, }: WorkspaceSidebarProps) { - const receiverActions = [ - { - label: "Change receiver", - accessibleLabel: "Change receiver connection", - Icon: Plug, - onClick: onChangeReceiver, - disabled: false, - destructive: false, - separate: false, - }, + const sessionActions = [ { label: "Clear events", - accessibleLabel: "Clear events", - Icon: Eraser, + Icon: Trash2, onClick: onClear, disabled: retainedItemCount === 0, - destructive: true, - separate: false, }, ...(onCloseSession ? [ { - label: "Close session", - accessibleLabel: "Close telemetry session", - Icon: CircleStop, + label: "Close telemetry session", + Icon: X, onClick: onCloseSession, disabled: false, - destructive: true, - separate: true, }, ] : []), @@ -691,37 +676,36 @@ function WorkspaceSidebar({ aria-label="Receiver actions" className="shrink-0 space-y-1 border-t border-border p-2" > - {receiverActions.map( - ({ - label, - accessibleLabel, - Icon, - onClick, - disabled, - destructive, - separate, - }) => ( -
+
); From 71289e1132130f702277271fb39323968313dc38 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 12:18:05 -0700 Subject: [PATCH 05/30] fix(local): Align receiver actions in one flex row Let Change fill the available space beside fixed-size Clear and Close icon buttons. Co-Authored-By: GPT-6 Codex --- apps/local/src/App.tsx | 42 +++++++++++++++++++----------------------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index 584089bb1..37fdb8302 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -674,38 +674,34 @@ function WorkspaceSidebar({
-
- {sessionActions.map(({ label, Icon, onClick, disabled }) => ( - - ))} -
+ {sessionActions.map(({ label, Icon, onClick, disabled }) => ( + + ))}
); From 6abe93389c02a6cf2660364f6676ff011f77c4a2 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 12:46:04 -0700 Subject: [PATCH 06/30] feat(local): Discover sessions from receiver connections Move retention into validated sidebar settings and add tooltips to receiver actions. Preserve discovery across reloads and same-port daemon restarts. Co-Authored-By: GPT-6 Codex --- apps/local/package.json | 6 +- apps/local/src/App.integration.test.tsx | 36 +++- .../src/App.sessions.integration.test.tsx | 140 ++++++++++++- apps/local/src/App.tsx | 198 ++++++++++++++---- apps/local/src/components/local-settings.tsx | 56 +++++ .../src/components/receiver-controls.tsx | 21 +- .../components/retention-settings.test.tsx | 82 ++++++++ .../src/components/retention-settings.tsx | 150 +++++++------ .../local/src/components/session-switcher.tsx | 9 +- apps/local/src/components/ui/input.tsx | 17 ++ apps/local/src/components/ui/tooltip.tsx | 27 +++ apps/local/src/lib/session-directory.test.ts | 13 +- apps/local/src/lib/session-directory.ts | 6 +- docs/cli/local-control-plane.md | 22 +- .../cli/src/commands/local/control-plane.ts | 28 ++- .../cli/src/commands/local/viewer-protocol.ts | 2 + .../test/commands/local/control-plane.test.ts | 58 +++++ packages/cli/test/e2e/local.test.ts | 47 ++++- pnpm-lock.yaml | 178 ++++++++++++++++ 19 files changed, 965 insertions(+), 131 deletions(-) create mode 100644 apps/local/src/components/local-settings.tsx create mode 100644 apps/local/src/components/retention-settings.test.tsx create mode 100644 apps/local/src/components/ui/input.tsx create mode 100644 apps/local/src/components/ui/tooltip.tsx create mode 100644 packages/cli/src/commands/local/viewer-protocol.ts diff --git a/apps/local/package.json b/apps/local/package.json index d37fa3fd9..acb574759 100644 --- a/apps/local/package.json +++ b/apps/local/package.json @@ -16,9 +16,11 @@ "node": "^20.19.0 || >=22.12.0" }, "dependencies": { + "@hookform/resolvers": "^5.9.1", "@radix-ui/react-dialog": "^1.1.23", "@radix-ui/react-popover": "^1.3.1", "@radix-ui/react-slot": "^1.3.3", + "@radix-ui/react-tooltip": "^1.4.1", "@shikijs/core": "^3.23.0", "@shikijs/engine-javascript": "^3.23.0", "@shikijs/langs": "^3.23.0", @@ -34,10 +36,12 @@ "nuqs": "^2.10.1", "react": "^19.2.8", "react-dom": "^19.2.8", + "react-hook-form": "^7.90.0", "react-router": "^7.18.3", "tailwind-merge": "^3.6.0", "tailwindcss": "^4.3.3", - "tslib": "^2.8.1" + "tslib": "^2.8.1", + "valibot": "catalog:" }, "devDependencies": { "@spotlightjs/spotlight": "^4.11.7", diff --git a/apps/local/src/App.integration.test.tsx b/apps/local/src/App.integration.test.tsx index d7688861c..3474c0d88 100644 --- a/apps/local/src/App.integration.test.tsx +++ b/apps/local/src/App.integration.test.tsx @@ -843,12 +843,14 @@ describe("local receiver to viewer integration", () => { for (let index = 0; index < 501; index++) await sendEnvelope(receiver.port, `retained-${index}`); renderViewer(receiver.port, "/explorer/events"); + fireEvent.click( + await screen.findByRole("button", { name: "Settings", exact: true }), + ); await screen.findByText( /Retention limit: 1,000 envelopes · 501 displayed/, {}, { timeout: 10000 }, ); - fireEvent.click(screen.getByText(/Retention limit: 1,000 envelopes/)); fireEvent.change(screen.getByLabelText("Retention limit"), { target: { value: "2000" }, }); @@ -904,7 +906,9 @@ describe("local receiver to viewer integration", () => { }), ); }); - fireEvent.click(await screen.findByText(/Retention limit: 500 envelopes/)); + fireEvent.click( + await screen.findByRole("button", { name: "Settings", exact: true }), + ); fireEvent.change(screen.getByLabelText("Retention limit"), { target: { value: "1" }, }); @@ -930,6 +934,19 @@ describe("local receiver to viewer integration", () => { ), ); await screen.findByText(/Retention limit: 1,000 envelopes/); + fireEvent.click(screen.getByRole("button", { name: "Close", exact: true })); + await waitFor(() => + expect(document.activeElement).toBe( + screen.getByRole("button", { name: "Settings", exact: true }), + ), + ); + const clearButton = screen.getByRole("button", { + name: "Clear events", + exact: true, + }); + fireEvent.focus(clearButton); + await screen.findByRole("tooltip", { name: "Clear events", exact: true }); + fireEvent.blur(clearButton); expect( screen.getAllByRole("button", { name: "View event event" }), ).toHaveLength(2); @@ -961,12 +978,13 @@ describe("local receiver to viewer integration", () => { source?.onerror?.(new Event("error")); }); fireEvent.click( - await screen.findByText(/Retention limit: 1,000 envelopes/), + await screen.findByRole("button", { name: "Settings", exact: true }), ); await screen.findByText("Reconnect to this receiver to change retention."); expect( screen.queryByRole("button", { name: "Apply retention limit" }), ).toBeNull(); + fireEvent.click(screen.getByRole("button", { name: "Close", exact: true })); expect( screen.getByRole("button", { name: "View event event" }), ).not.toBeNull(); @@ -994,7 +1012,7 @@ describe("local receiver to viewer integration", () => { ); }); fireEvent.click( - await screen.findByText(/Retention limit: 500 envelopes/), + await screen.findByRole("button", { name: "Settings", exact: true }), ); fireEvent.change(screen.getByLabelText("Retention limit"), { target: { value: "1" }, @@ -1004,6 +1022,9 @@ describe("local receiver to viewer integration", () => { ); await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1)); if (switchReceiver) { + fireEvent.click( + screen.getByRole("button", { name: "Close", exact: true }), + ); fireEvent.click( screen.getByRole("button", { name: "Change receiver" }), ); @@ -1023,7 +1044,14 @@ describe("local receiver to viewer integration", () => { respond(new Response('{"maxEnvelopes":1}', { status: 200 })); await pending; }); + if (switchReceiver) + fireEvent.click( + await screen.findByRole("button", { name: "Settings", exact: true }), + ); await screen.findByText(/Retention limit: 1,000 envelopes/); + fireEvent.click( + screen.getByRole("button", { name: "Close", exact: true }), + ); await act(async () => { for (const id of ["one", "two"]) source?.dispatchEvent( diff --git a/apps/local/src/App.sessions.integration.test.tsx b/apps/local/src/App.sessions.integration.test.tsx index 6fb64d439..0186ea5e2 100644 --- a/apps/local/src/App.sessions.integration.test.tsx +++ b/apps/local/src/App.sessions.integration.test.tsx @@ -23,9 +23,11 @@ import { import App from "./App.tsx"; const headers = { Authorization: "Bearer session-switcher-test" }; -async function startDaemon(now = Date.now) { +async function startDaemon(now = Date.now, preferredPort = 0) { const reservation = createServer(); - await new Promise((r) => reservation.listen(0, "127.0.0.1", r)); + await new Promise((r) => + reservation.listen(preferredPort, "127.0.0.1", r), + ); const address = reservation.address(); if (!address || typeof address === "string") throw new Error("Expected TCP address"); @@ -73,6 +75,7 @@ async function startDaemon(now = Date.now) { ).toBe(204); }; return { + port, plane, create, ingest, @@ -151,8 +154,12 @@ test("hosted viewer switches live sessions without mixing events and replays ret await selectSession("worker"); await screen.findAllByText("/worker-job"); expect(screen.queryByText("/web-request")).toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Settings", exact: true }), + ); await screen.findByText(/Retention limit: 1,000 envelopes/); expect(screen.queryByLabelText("Retention limit")).toBeNull(); + fireEvent.click(screen.getByRole("button", { name: "Close", exact: true })); await daemon.ingest(web, "/web-after-switch"); await daemon.ingest(worker, "/worker-after-switch"); await screen.findAllByText("/worker-after-switch"); @@ -278,3 +285,132 @@ test("expired sessions disappear without clearing already displayed telemetry", await daemon.stop(); } }); + +test("pasting a plain receiver discovers active sessions and waits for newly started runs", async () => { + const daemon = await startDaemon(); + try { + const web = await daemon.create("web"); + const worker = await daemon.create("worker"); + await daemon.ingest(web, "/plain-web"); + await daemon.ingest(worker, "/plain-worker"); + const stream = new URL("/stream", web.streamUrl).toString(); + renderSession({ streamUrl: web.streamUrl }); + await screen.findAllByText("/plain-web"); + expect( + screen.queryByRole("combobox", { name: "Session", exact: true }), + ).toBeNull(); + fireEvent.click( + screen.getByRole("button", { + name: "Change receiver connection", + exact: true, + }), + ); + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: stream }, + }); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + await screen.findByRole("combobox", { name: "Session", exact: true }); + await selectSession("worker"); + await screen.findAllByText("/plain-worker"); + expect(screen.queryByText("/plain-web")).toBeNull(); + expect( + screen.getByRole("combobox", { name: "Session", exact: true }) + .textContent, + ).toContain("worker"); + expect(screen.queryByText(/Retention limit:/)).toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Settings", exact: true }), + ); + await screen.findByRole("dialog", { name: "Settings", exact: true }); + await screen.findByText(/Retention limit: 500 envelopes/); + expect(screen.queryByLabelText("Retention limit")).toBeNull(); + await screen.findByText( + "Change retention from a locally served viewer or the CLI.", + ); + } finally { + cleanup(); + await daemon.stop(); + } +}, 15_000); + +test("an empty receiver discovers the first session when it starts without reconnecting manually", async () => { + let now = Date.now(); + const daemon = await startDaemon(() => now); + try { + const reservation = await daemon.create("expired"); + daemon.plane.sessionStore.close(reservation.id); + now += SESSION_RETENTION_MS + 1; + daemon.plane.sessionStore.pruneExpired(); + renderSession({ + streamUrl: new URL("/stream", reservation.streamUrl).toString(), + }); + await screen.findByRole("combobox", { name: "Session", exact: true }); + fireEvent.click( + screen.getByRole("combobox", { name: "Session", exact: true }), + ); + await screen.findByText("No sessions available."); + const web = await daemon.create("new-run"); + await daemon.ingest(web, "/late-start"); + fireEvent.keyDown( + screen.getByRole("combobox", { name: "Search sessions", exact: true }), + { key: "Escape" }, + ); + fireEvent.click(screen.getByRole("button", { name: "Refresh sessions" })); + await screen.findAllByText("/late-start"); + } finally { + cleanup(); + await daemon.stop(); + } +}, 15_000); + +test("reconnecting a plain receiver after daemon restart never selects a stale directory entry", async () => { + const first = await startDaemon(); + let second: Awaited> | undefined; + try { + const old = await first.create("old-run"); + await first.ingest(old, "/before-restart"); + renderSession(old); + await screen.findAllByText("/before-restart"); + await screen.findByRole("combobox", { name: "Session", exact: true }); + fireEvent.click( + screen.getByRole("combobox", { name: "Session", exact: true }), + ); + await screen.findByRole("option", { name: /^old-run ·/ }); + fireEvent.keyDown( + screen.getByRole("combobox", { name: "Search sessions", exact: true }), + { key: "Escape" }, + ); + await first.stop(); + await screen.findByRole("status", { + name: "Receiver unavailable", + exact: true, + }); + second = await startDaemon(Date.now, first.port); + const current = await second.create("current-run"); + await second.ingest(current, "/after-restart"); + fireEvent.click( + screen.getByRole("button", { + name: "Change receiver connection", + exact: true, + }), + ); + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: `http://127.0.0.1:${first.port}/stream` }, + }); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + await screen.findAllByText("/after-restart"); + expect(screen.queryByText("/before-restart")).toBeNull(); + expect( + screen.getByRole("combobox", { name: "Session", exact: true }) + .textContent, + ).toContain("current-run"); + } finally { + cleanup(); + if (second) await second.stop(); + else await first.stop(); + } +}, 15_000); diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index 37fdb8302..bba13debd 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -2,8 +2,10 @@ import { SessionSwitcher } from "./components/session-switcher.tsx"; import { getInitialSessionDirectory, parseSessionDirectoryUrl, + saveSessionDirectory, } from "./lib/session-directory.ts"; -import { RetentionSettings } from "./components/retention-settings.tsx"; +import { LocalSettings } from "./components/local-settings.tsx"; +import { LOCAL_DIRECTORY_EVENT } from "../../../packages/cli/src/commands/local/viewer-protocol.ts"; import { DEFAULT_MAX_ENVELOPES, isValidMaxEnvelopes, @@ -16,6 +18,7 @@ import { Copy, Menu, Radio, + Settings, Trash2, X, Search, @@ -46,6 +49,12 @@ import { TraceWorkspace } from "@/components/trace-workspace.tsx"; import { TraceWaterfall } from "@/components/trace-waterfall.tsx"; import { Badge } from "@/components/ui/badge.tsx"; import { Button } from "@/components/ui/button.tsx"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip.tsx"; import { getConnectionPresentation, type ConnectionPresentation, @@ -496,6 +505,7 @@ type WorkspaceSidebarProps = { onClear: () => void; onCloseSession?: () => void; onChangeReceiver: () => void; + onOpenSettings: (trigger: HTMLButtonElement) => void; onOpenCommand: (trigger: HTMLButtonElement) => void; onSelect: (view: WorkspaceView) => void; onToggle: () => void; @@ -512,6 +522,7 @@ function WorkspaceSidebar({ onClear, onCloseSession, onChangeReceiver, + onOpenSettings, onOpenCommand, onSelect, onToggle, @@ -671,38 +682,77 @@ function WorkspaceSidebar({ ))} -
- - {sessionActions.map(({ label, Icon, onClick, disabled }) => ( - + + {collapsed ? ( + Change receiver + ) : null} + +
-
+ + + + + + Settings + + + {!collapsed ? : null} + {sessionActions.map(({ label, Icon, onClick, disabled }) => ( + + + + + + + + {label === "Close telemetry session" + ? "Close session" + : label} + + + ))} +
+ + ); } @@ -730,7 +780,9 @@ export default function App() { getSavedRemoteStream(), ), ); - const [directoryUrl] = useState(() => getInitialSessionDirectory(streamUrl)); + const [directoryUrl, setDirectoryUrl] = useState(() => + getInitialSessionDirectory(streamUrl), + ); const activeDirectoryUrl = parseSessionDirectoryUrl(directoryUrl, streamUrl); const connectionGeneration = useRef(0); const [connectionAttempt, setConnectionAttempt] = useState(0); @@ -758,6 +810,12 @@ export default function App() { ); const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false); const [isCommandOpen, setIsCommandOpen] = useState(false); + const [isSettingsOpen, setIsSettingsOpen] = useState(false); + const settingsTriggerRef = useRef(null); + const openSettings = (trigger: HTMLButtonElement) => { + settingsTriggerRef.current = trigger; + setIsSettingsOpen(true); + }; const [message, setMessage] = useState(); const fallbackEventId = useRef(0); const commandTriggerRef = useRef(null); @@ -948,6 +1006,15 @@ export default function App() { return; } connectionGeneration.current += 1; + setIsSettingsOpen(false); + if ( + endpoint.kind === "loopback" && + new URL(endpoint.url).pathname === "/stream" + ) { + // A reconnect can target a new daemon on the same port. Wait for its + // metadata rather than auto-selecting an entry from the old directory. + setDirectoryUrl(undefined); + } if (endpoint.url !== streamUrl) { telemetryStore.clear(); telemetryStore.setLimit(DEFAULT_MAX_ENVELOPES); @@ -1013,6 +1080,36 @@ export default function App() { /* Ignore malformed optional metadata from external receivers. */ } }; + const onDirectory = (event: Event) => { + if (!isActiveConnection()) return; + const endpoint = parseStreamEndpoint(streamUrl); + if ( + endpoint?.kind !== "loopback" || + new URL(endpoint.url).pathname !== "/stream" + ) + return; + try { + const value: unknown = JSON.parse((event as MessageEvent).data); + if ( + value && + typeof value === "object" && + "directoryUrl" in value && + typeof value.directoryUrl === "string" + ) { + const directory = parseSessionDirectoryUrl( + value.directoryUrl, + streamUrl, + ); + if (directory) { + saveSessionDirectory(directory); + setDirectoryUrl(directory); + } + } + } catch { + /* Optional metadata from legacy/external receivers may be malformed. */ + } + }; + source.addEventListener(LOCAL_DIRECTORY_EVENT, onDirectory); source.addEventListener(LOCAL_RETENTION_EVENT, onRetention); const timeoutId = window.setTimeout(() => { if (!isActiveConnection()) { @@ -1093,6 +1190,7 @@ export default function App() { window.clearTimeout(timeoutId); source.removeEventListener(SENTRY_ENVELOPE_EVENT, onEnvelope); source.removeEventListener(LOCAL_RETENTION_EVENT, onRetention); + source.removeEventListener(LOCAL_DIRECTORY_EVENT, onDirectory); source.close(); }; }, [connectionAttempt, isConnectionEnabled, streamUrl, telemetryStore]); @@ -1122,6 +1220,22 @@ export default function App() { return (
+
setIsEditingReceiver(true)} + onOpenSettings={openSettings} onOpenCommand={openCommand} onSelect={selectWorkspace} onToggle={() => setIsSidebarCollapsed((collapsed) => !collapsed)} @@ -1199,6 +1314,7 @@ export default function App() { onCloseSession={ hasScopedSession ? closeScopedSession : undefined } + onOpenSettings={openSettings} showStatusRole={false} />
@@ -1245,21 +1361,11 @@ export default function App() { key={activeDirectoryUrl} directoryUrl={activeDirectoryUrl} streamUrl={streamUrl} - onSelect={connectToEndpoint} - /> - ) : null} - {hasRetentionSettings ? ( - ) : null} {connectionError && diff --git a/apps/local/src/components/local-settings.tsx b/apps/local/src/components/local-settings.tsx new file mode 100644 index 000000000..aeb437e04 --- /dev/null +++ b/apps/local/src/components/local-settings.tsx @@ -0,0 +1,56 @@ +import type { RefObject } from "react"; +import { RetentionSettings } from "./retention-settings.tsx"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "./ui/dialog.tsx"; + +type Props = { + triggerRef: RefObject; + open: boolean; + onOpenChange: (open: boolean) => void; + streamUrl: string; + limit: number; + count: number; + editable: boolean; + supported: boolean; + unavailableReason?: string; +}; + +export function LocalSettings({ + open, + onOpenChange, + supported, + triggerRef, + ...retention +}: Props) { + return ( + + { + if (triggerRef.current?.isConnected) { + event.preventDefault(); + triggerRef.current.focus(); + } + }} + > + + Settings + + Manage retention for the selected session. + + + {supported ? ( + + ) : ( +

+ This receiver does not provide retention settings. +

+ )} + + + ); +} diff --git a/apps/local/src/components/receiver-controls.tsx b/apps/local/src/components/receiver-controls.tsx index 744209db5..788084c68 100644 --- a/apps/local/src/components/receiver-controls.tsx +++ b/apps/local/src/components/receiver-controls.tsx @@ -1,4 +1,4 @@ -import { ChevronDown, Moon, Sun, Trash2, X } from "lucide-react"; +import { ChevronDown, Moon, Sun, Settings, Trash2, X } from "lucide-react"; import { useEffect, useId, useRef, useState } from "react"; import { useTheme } from "next-themes"; import type { ConnectionPresentation } from "@/lib/presentation.ts"; @@ -8,6 +8,7 @@ type ReceiverControlsProps = { connection: ConnectionPresentation; retainedItemCount: number; onClear: () => void; + onOpenSettings?: (trigger: HTMLButtonElement) => void; onCloseSession?: () => void; showStatusRole?: boolean; }; @@ -18,6 +19,7 @@ export function ReceiverControls({ connection, retainedItemCount, onClear, + onOpenSettings, onCloseSession, showStatusRole = true, }: ReceiverControlsProps) { @@ -128,6 +130,23 @@ export function ReceiverControls({ {isDark ? : } Use {isDark ? "light" : "dark"} mode + {onOpenSettings ? ( + + ) : null} -

- Existing envelopes stay available. A lower limit requires clearing - enough envelopes first. -

- {error ? ( -

- {error} + +

+ + +

+ Maximum envelopes kept in this session. Existing envelopes stay + available. A lower limit requires clearing enough envelopes first.

- ) : null} + {error ? ( + + ) : null} +
+
+ +
) : ( -

+

{unavailableReason ?? "Change retention from a locally served viewer or the CLI."}

)} - + ); } diff --git a/apps/local/src/components/session-switcher.tsx b/apps/local/src/components/session-switcher.tsx index 6d7a2f449..a162bd932 100644 --- a/apps/local/src/components/session-switcher.tsx +++ b/apps/local/src/components/session-switcher.tsx @@ -13,7 +13,6 @@ import { import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.tsx"; import { parseViewerSessions, - saveSessionDirectory, type ViewerSession, } from "../lib/session-directory.ts"; @@ -22,7 +21,9 @@ export function SessionSwitcher({ directoryUrl, streamUrl, onSelect, + selectInitialSession = false, }: { + selectInitialSession?: boolean; directoryUrl: string; streamUrl: string; onSelect: (streamUrl: string) => void; @@ -53,7 +54,6 @@ export function SessionSwitcher({ setSessions(next); setLoaded(true); setError(false); - saveSessionDirectory(directoryUrl); } catch { if (active) setError(true); } finally { @@ -68,6 +68,11 @@ export function SessionSwitcher({ clearTimeout(timer); }; }, [directoryUrl, refresh]); + useEffect(() => { + // Only the daemon-wide /stream entry point selects an initial run. Expiring + // or closing a selected scoped session must never silently change feeds. + if (selectInitialSession && sessions[0]) onSelect(sessions[0].streamUrl); + }, [selectInitialSession, sessions, onSelect]); const current = sessions.find((s) => s.streamUrl === streamUrl); return (
) { + return ( + + ); +} +export { Input }; diff --git a/apps/local/src/components/ui/tooltip.tsx b/apps/local/src/components/ui/tooltip.tsx new file mode 100644 index 000000000..0e446d1d2 --- /dev/null +++ b/apps/local/src/components/ui/tooltip.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; +import { cn } from "@/lib/utils.ts"; + +const TooltipProvider = TooltipPrimitive.Provider; +const Tooltip = TooltipPrimitive.Root; +const TooltipTrigger = TooltipPrimitive.Trigger; + +function TooltipContent({ + className, + sideOffset = 6, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} +export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent }; diff --git a/apps/local/src/lib/session-directory.test.ts b/apps/local/src/lib/session-directory.test.ts index 7aa6e5c0f..3aeeb9348 100644 --- a/apps/local/src/lib/session-directory.test.ts +++ b/apps/local/src/lib/session-directory.test.ts @@ -3,7 +3,6 @@ import { parseSessionDirectoryUrl, parseViewerSessions, getInitialSessionDirectory, - saveSessionDirectory, } from "./session-directory.ts"; const stream = "http://127.0.0.1:8969/_local/v1/sessions/web/stream?cap=web-secret"; @@ -56,10 +55,20 @@ test("explicit discovery is tab-scoped and cannot follow a saved directory to an `/#${new URLSearchParams({ stream, directory })}`, ); expect(getInitialSessionDirectory(stream)).toBe(directory); - saveSessionDirectory(directory); window.history.replaceState(null, "", "/"); expect(getInitialSessionDirectory(stream)).toBe(directory); expect( getInitialSessionDirectory(stream.replace(":8969", ":9999")), ).toBeUndefined(); }); + +test("invalid fragment discovery is never persisted", () => { + window.history.replaceState( + null, + "", + `/#${new URLSearchParams({ directory: directory.replace(":8969", ":9999") })}`, + ); + expect(getInitialSessionDirectory(stream)).toBeUndefined(); + window.history.replaceState(null, "", "/"); + expect(getInitialSessionDirectory(stream)).toBeUndefined(); +}); diff --git a/apps/local/src/lib/session-directory.ts b/apps/local/src/lib/session-directory.ts index ae080158a..182018c25 100644 --- a/apps/local/src/lib/session-directory.ts +++ b/apps/local/src/lib/session-directory.ts @@ -45,10 +45,14 @@ export function getInitialSessionDirectory( } catch { /* Storage may be disabled. */ } - return parseSessionDirectoryUrl( + const directory = parseSessionDirectoryUrl( fragment.has("directory") ? fragment.get("directory") : saved, streamUrl, ); + // The startup effect removes the fragment before discovery can finish. Save + // its validated capability now so an early reload cannot lose the picker. + if (directory && fragment.has("directory")) saveSessionDirectory(directory); + return directory; } export function saveSessionDirectory(directoryUrl: string): void { diff --git a/docs/cli/local-control-plane.md b/docs/cli/local-control-plane.md index 745aae648..2f67d5eb3 100644 --- a/docs/cli/local-control-plane.md +++ b/docs/cli/local-control-plane.md @@ -95,8 +95,12 @@ that hosting project to use Toolkit and `apps/local` as its root directory. ### Switching sessions -Run either command with `--session --open` to open a viewer with a Session -picker. It works in the local development viewer and on . +Connect to the daemon's plain `http://127.0.0.1:8969/stream` endpoint (using its +actual host and port) to discover running sessions automatically. The viewer +selects the first running session and fills the Session picker. If no sessions +exist yet, it waits and discovers them as they start. This works in the local +development viewer and on . Alternatively, run either +command with `--session --open` to start on that specific session. The picker lists running and retained sessions from that daemon, including sessions created after the viewer opens. It refreshes every five seconds; Refresh sessions updates it immediately. Labels include the working directory and a short session ID @@ -106,8 +110,10 @@ Switching back replays its retained envelopes. Retention follows the selected se A failed refresh leaves the current feed readable. Expired sessions leave the list; the viewer keeps already displayed telemetry and does not silently switch runs. -Discovery requires the separate `directoryUrl` capability returned by session create -and session view. `--open` passes it alongside the initial stream in the URL fragment, +The daemon-wide `/stream` emits discovery metadata to loopback viewers and the +trusted hosted Local origins. Other browser origins cannot read it. Discovery +uses a separate `directoryUrl` capability, also returned by session create and +session view. `--open` passes it alongside the initial stream in the URL fragment, which is removed after startup and is never sent to the hosting server. The directory is kept only in tab session storage, so reloads can retain the picker. The capability allows discovery of all sessions and their stream capabilities on this daemon; treat @@ -118,6 +124,14 @@ with an updated CLI and daemon to enable discovery. An already-running older dae needs a restart after upgrading; restarting clears its in-memory telemetry. One picker covers one daemon, not receivers on other ports or computers. +Open Settings with the sidebar gear (or Session settings in the mobile receiver +menu) to view retention for the selected session. A locally served viewer can +change the limit at runtime with validation; increases preserve captured data, +and lowering it below the retained count is rejected until enough data is cleared. +Settings are read-only in the hosted viewer; use the CLI to change retention there. +The sidebar keeps Change receiver on its own row, with Settings at the left and +Clear/Close icons at the right beneath it. Icon tooltips also work with keyboard focus. + A loopback-served viewer can reset and close its scoped session. The hosted viewer can read the stream and clear its own displayed feed; it cannot mutate retained receiver data. Remote HTTPS streams stay read-only. diff --git a/packages/cli/src/commands/local/control-plane.ts b/packages/cli/src/commands/local/control-plane.ts index bf66e9b6a..c9fefd2c4 100644 --- a/packages/cli/src/commands/local/control-plane.ts +++ b/packages/cli/src/commands/local/control-plane.ts @@ -22,6 +22,7 @@ import { type LocalSessionStore, } from "./session-store.js"; +import { LOCAL_DIRECTORY_EVENT } from "./viewer-protocol.js"; import { LOCAL_RETENTION_EVENT } from "./retention-limits.js"; import { RetentionLimitError, @@ -185,9 +186,10 @@ export function createLocalControlPlane({ for (const path of [ `${CONTROL_PLANE_PREFIX}/sessions/:id/stream`, VIEWER_SESSIONS_PATH, + "/stream", ]) app.use(path, async (c, next) => { - if (c.req.path === VIEWER_SESSIONS_PATH) { + if (c.req.path === VIEWER_SESSIONS_PATH || c.req.path === "/stream") { if ( (c.req.method !== "GET" && c.req.method !== "OPTIONS") || (c.req.method === "OPTIONS" && @@ -241,10 +243,32 @@ export function createLocalControlPlane({ }), ); + // Choosing the daemon-wide entry point opts into discovering its sessions. + // Browser origins remain restricted; scoped streams never emit this metadata. + app.get("/stream", (c) => { + const response = streamSSE(c, async (stream) => { + await stream.writeSSE({ + event: LOCAL_DIRECTORY_EVENT, + data: JSON.stringify({ + directoryUrl: new URL( + `${VIEWER_SESSIONS_PATH}?cap=${viewerCapability}`, + c.req.url, + ).toString(), + }), + }); + await new Promise((resolve) => stream.onAbort(resolve)); + }); + c.header("Cache-Control", "no-store"); + response.headers.set("Cache-Control", "no-store"); + return response; + }); + app.get(VIEWER_SESSIONS_PATH, (c) => { if (c.req.query("cap") !== viewerCapability) return c.body(null, 401); sessionStore.pruneExpired(); c.header("Cache-Control", "no-store"); + // Stay on the exact loopback origin the viewer chose (localhost/127.0.0.1/::1). + const viewerBaseUrl = new URL(c.req.url).origin; return c.json({ sessions: sessionStore .list() @@ -254,7 +278,7 @@ export function createLocalControlPlane({ cwd, state, createdAt, - streamUrl: `${baseUrl}${CONTROL_PLANE_PREFIX}/sessions/${id}/stream?cap=${sessionStore.getCapabilities(id).stream}`, + streamUrl: `${viewerBaseUrl}${CONTROL_PLANE_PREFIX}/sessions/${id}/stream?cap=${sessionStore.getCapabilities(id).stream}`, })), }); }); diff --git a/packages/cli/src/commands/local/viewer-protocol.ts b/packages/cli/src/commands/local/viewer-protocol.ts new file mode 100644 index 000000000..d1b475d8d --- /dev/null +++ b/packages/cli/src/commands/local/viewer-protocol.ts @@ -0,0 +1,2 @@ +/** Optional SSE metadata used to bootstrap the Local session picker. */ +export const LOCAL_DIRECTORY_EVENT = "sentry.local.directory"; diff --git a/packages/cli/test/commands/local/control-plane.test.ts b/packages/cli/test/commands/local/control-plane.test.ts index bbd182db0..ef3aa85c2 100644 --- a/packages/cli/test/commands/local/control-plane.test.ts +++ b/packages/cli/test/commands/local/control-plane.test.ts @@ -14,6 +14,64 @@ function controlHeaders() { } describe("Local control plane", () => { + test("a plain stream bootstraps discovery for trusted viewers without a control token", async () => { + const plane = createLocalControlPlane({ controlToken: CONTROL_TOKEN }); + const session = plane.sessionStore.create({ label: "web", cwd: "/web" }); + const controller = new AbortController(); + // The daemon may advertise localhost while the user connects via 127.0.0.1. + const response = await plane.app.request("http://127.0.0.1:8969/stream", { + headers: { Origin: "https://local.sentry.dev" }, + signal: controller.signal, + }); + expect(response.status).toBe(200); + expect(response.headers.get("Access-Control-Allow-Origin")).toBe( + "https://local.sentry.dev", + ); + expect(response.headers.get("Cache-Control")).toBe("no-store"); + const reader = response.body!.getReader(); + try { + const chunk = new TextDecoder().decode((await reader.read()).value); + expect(chunk).toContain("event: sentry.local.directory"); + const data = JSON.parse(chunk.match(/data: (.+)/)![1]!); + expect(new URL(data.directoryUrl).pathname).toBe( + "/_local/v1/ui/sessions", + ); + expect(new URL(data.directoryUrl).origin).toBe("http://127.0.0.1:8969"); + const listing = await plane.app.request(data.directoryUrl); + expect(listing.status).toBe(200); + const directory = await listing.json(); + expect(directory.sessions[0].id).toBe(session.id); + expect(new URL(directory.sessions[0].streamUrl).origin).toBe( + "http://127.0.0.1:8969", + ); + expect(chunk).not.toContain(CONTROL_TOKEN); + } finally { + controller.abort(); + await reader.cancel(); + } + for (const headers of [ + { Origin: "https://evil.example" }, + { Origin: "http://local.sentry.dev.evil.example" }, + ]) + expect((await plane.app.request("/stream", { headers })).status).toBe( + 403, + ); + expect( + (await plane.app.request("/stream", { method: "POST" })).status, + ).toBe(403); + const preflight = await plane.app.request("/stream", { + method: "OPTIONS", + headers: { + Origin: "https://local.sentry.dev", + "Access-Control-Request-Method": "GET", + "Access-Control-Request-Private-Network": "true", + }, + }); + expect(preflight.status).toBe(204); + expect(preflight.headers.get("Access-Control-Allow-Private-Network")).toBe( + "true", + ); + }); test("discovers sibling streams only with the explicit browser directory capability", async () => { const plane = createLocalControlPlane({ controlToken: CONTROL_TOKEN }); const create = async (label: string) => diff --git a/packages/cli/test/e2e/local.test.ts b/packages/cli/test/e2e/local.test.ts index 27c47957d..c1645f33b 100644 --- a/packages/cli/test/e2e/local.test.ts +++ b/packages/cli/test/e2e/local.test.ts @@ -99,7 +99,52 @@ describe("Local daemon E2E", () => { await ingest(web, "web-id", "web-only"); await ingest(worker, "worker-id", "worker-only"); const origin = { Origin: "https://local.sentry.dev" }; - const response = await fetch(web.directoryUrl, { headers: origin }); + // A user only needs the daemon address; /stream supplies discovery metadata. + const bootstrap = await fetch(`http://127.0.0.1:${port}/stream`, { + headers: origin, + signal: AbortSignal.timeout(5000), + }); + expect(bootstrap.status).toBe(200); + expect(bootstrap.headers.get("Access-Control-Allow-Origin")).toBe( + "https://local.sentry.dev", + ); + const bootstrapReader = bootstrap.body!.getReader(); + let directoryUrl: string; + try { + let text = ""; + while (!text.includes("\n\n")) { + const chunk = await bootstrapReader.read(); + if (chunk.done) throw new Error("Bootstrap stream closed"); + text += new TextDecoder().decode(chunk.value); + } + expect(text).toContain("event: sentry.local.directory"); + directoryUrl = ( + JSON.parse(text.match(/data: (.+)/)![1]!) as { directoryUrl: string } + ).directoryUrl; + } finally { + await bootstrapReader.cancel(); + } + expect(directoryUrl).toBe(web.directoryUrl); + expect( + ( + await fetch(`http://127.0.0.1:${port}/stream`, { + headers: { Origin: "https://evil.example" }, + }) + ).status, + ).toBe(403); + const bootstrapPreflight = await fetch(`http://127.0.0.1:${port}/stream`, { + method: "OPTIONS", + headers: { + ...origin, + "Access-Control-Request-Method": "GET", + "Access-Control-Request-Private-Network": "true", + }, + }); + expect(bootstrapPreflight.status).toBe(204); + expect( + bootstrapPreflight.headers.get("Access-Control-Allow-Private-Network"), + ).toBe("true"); + const response = await fetch(directoryUrl, { headers: origin }); expect(response.status).toBe(200); expect(response.headers.get("Access-Control-Allow-Origin")).toBe( "https://local.sentry.dev", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2d1f9fadf..925de8fae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -274,6 +274,9 @@ importers: apps/local: dependencies: + '@hookform/resolvers': + specifier: ^5.9.1 + version: 5.9.1(@standard-schema/spec@1.1.0)(ajv@8.20.0)(react-hook-form@7.90.0(@types/react@19.3.0)(react@19.2.8))(valibot@1.4.2(typescript@5.8.3))(zod@4.6.5) '@radix-ui/react-dialog': specifier: ^1.1.23 version: 1.3.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) @@ -283,6 +286,9 @@ importers: '@radix-ui/react-slot': specifier: ^1.3.3 version: 1.3.3(@types/react@19.3.0)(react@19.2.8) + '@radix-ui/react-tooltip': + specifier: ^1.4.1 + version: 1.4.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@shikijs/core': specifier: ^3.23.0 version: 3.23.0 @@ -328,6 +334,9 @@ importers: react-dom: specifier: ^19.2.8 version: 19.2.8(react@19.2.8) + react-hook-form: + specifier: ^7.90.0 + version: 7.90.0(@types/react@19.3.0)(react@19.2.8) react-router: specifier: ^7.18.3 version: 7.18.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8) @@ -340,6 +349,9 @@ importers: tslib: specifier: ^2.8.1 version: 2.8.1 + valibot: + specifier: 'catalog:' + version: 1.4.2(typescript@5.8.3) devDependencies: '@spotlightjs/spotlight': specifier: ^4.11.7 @@ -2521,6 +2533,84 @@ packages: peerDependencies: hono: ^4 + '@hookform/resolvers@5.9.1': + resolution: {integrity: sha512-7b7vsbraJxKgjVSA1Nur9tLwj539WGJUBLA7QNvXnFoT2pM5Z7G+6rlukk4B2/QrTZy6huRtH6wKeESPKuIr6w==} + peerDependencies: + '@sinclair/typebox': '>=0.25.24' + '@standard-schema/spec': ^1.0.0 + '@typeschema/main': '>=0.13.7' + '@vinejs/vine': ^2.0.0 || ^3.0.0 || ^4.0.0 + ajv: ^8.12.0 + ajv-errors: ^3.0.0 + ajv-formats: ^2.1.1 + arktype: ^2.0.0 + ata-validator: ^1.2.0 + class-transformer: '>=0.4.0' + class-validator: '>=0.12.0' + computed-types: ^1.0.0 + effect: ^3.10.3 + fluentvalidation-ts: ^3.0.0 + fp-ts: ^2.7.0 + io-ts: ^2.0.0 + joi: ^17.0.0 || ^18.0.0 + nope-validator: '>=0.12.0' + react-hook-form: ^7.55.0 + superstruct: '>=0.12.0' + typanion: ^3.3.2 + valibot: '>=0.31.0 || ^1.0.0-beta.4 || ^1.0.0-rc' + vest: '>=6.0.0' + yup: ^1.0.0 + zod: ^3.25.0 || ^4.0.0 + peerDependenciesMeta: + '@sinclair/typebox': + optional: true + '@standard-schema/spec': + optional: true + '@typeschema/main': + optional: true + '@vinejs/vine': + optional: true + ajv: + optional: true + ajv-errors: + optional: true + ajv-formats: + optional: true + arktype: + optional: true + ata-validator: + optional: true + class-transformer: + optional: true + class-validator: + optional: true + computed-types: + optional: true + effect: + optional: true + fluentvalidation-ts: + optional: true + fp-ts: + optional: true + io-ts: + optional: true + joi: + optional: true + nope-validator: + optional: true + superstruct: + optional: true + typanion: + optional: true + valibot: + optional: true + vest: + optional: true + yup: + optional: true + zod: + optional: true + '@img/colour@1.1.0': resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==} engines: {node: '>=18'} @@ -3650,6 +3740,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-tooltip@1.4.1': + resolution: {integrity: sha512-NxLFGSFtZ78zVfcoOhTwR1xwqo5qx1Jh8Pw6FMZ9McCaqfRzz7/gIRahs2Oy5XlPgQ+8QkUcKbN5B0U44J/kCg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-use-callback-ref@1.1.5': resolution: {integrity: sha512-Y5GBf4NKeADoXI1geiMlMuMoURT3k9MizzzKhGb/m55H94aGigZ01PIpkvsO6lML13BA6XYAXSJ6gza7vTn5nw==} peerDependencies: @@ -3713,6 +3816,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-visually-hidden@1.2.13': + resolution: {integrity: sha512-feijiN1oPk4rck4u9Dm9tsU4mT6Wp9oeEEhaz1WUEs1VuqLf8xzsFG+Qk+uWq6TnMH9O+WRECRg0NftyP9E4Fw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/rect@1.1.3': resolution: {integrity: sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==} @@ -4541,6 +4657,9 @@ packages: '@standard-schema/spec@1.1.0': resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} + '@standard-schema/utils@0.3.0': + resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==} + '@stricli/auto-complete@1.3.0': resolution: {integrity: sha512-egN+fdP2USbP08DkhSH+y9XsiXSrJMgbR1E5SuOD2kqI4AckufhOIKokDzmzmUT6yMa7j0jmWu29phT/jXwzqQ==} hasBin: true @@ -7804,6 +7923,16 @@ packages: peerDependencies: react: ^19.2.8 + react-hook-form@7.90.0: + resolution: {integrity: sha512-+NdG0FLzCPhFOp2NNxaUYLF9fyZhNjx9FTBBSYWF71/l6BBlmIc/j6xlp3DbaHWLJbIG7Zd8oznA19xJClU97w==} + engines: {node: '>=18.0.0'} + peerDependencies: + '@types/react': '*' + react: ^16.8.0 || ^17 || ^18 || ^19 + peerDependenciesMeta: + '@types/react': + optional: true + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -10642,6 +10771,16 @@ snapshots: dependencies: hono: 4.13.8 + '@hookform/resolvers@5.9.1(@standard-schema/spec@1.1.0)(ajv@8.20.0)(react-hook-form@7.90.0(@types/react@19.3.0)(react@19.2.8))(valibot@1.4.2(typescript@5.8.3))(zod@4.6.5)': + dependencies: + '@standard-schema/utils': 0.3.0 + react-hook-form: 7.90.0(@types/react@19.3.0)(react@19.2.8) + optionalDependencies: + '@standard-schema/spec': 1.1.0 + ajv: 8.20.0 + valibot: 1.4.2(typescript@5.8.3) + zod: 4.6.5 + '@img/colour@1.1.0': {} '@img/sharp-darwin-arm64@0.35.4': @@ -11695,6 +11834,28 @@ snapshots: optionalDependencies: '@types/react': 19.3.0 + '@radix-ui/react-tooltip@1.4.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + dependencies: + '@radix-ui/primitive': 1.2.0 + '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.2.8) + '@radix-ui/react-context': 1.3.0(@types/react@19.3.0)(react@19.2.8) + '@radix-ui/react-dismissable-layer': 1.2.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-focus-scope': 1.3.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.2.8) + '@radix-ui/react-popper': 1.4.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-portal': 1.2.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-presence': 1.1.11(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-primitive': 2.2.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@radix-ui/react-slot': 1.5.0(@types/react@19.3.0)(react@19.2.8) + '@radix-ui/react-use-controllable-state': 1.3.0(@types/react@19.3.0)(react@19.2.8) + '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.2.8) + '@radix-ui/react-visually-hidden': 1.2.13(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + react: 19.2.8 + react-dom: 19.2.8(react@19.2.8) + optionalDependencies: + '@types/react': 19.3.0 + '@types/react-dom': 19.3.0(@types/react@19.3.0) + '@radix-ui/react-use-callback-ref@1.1.5(@types/react@19.3.0)(react@19.2.8)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.2.8) @@ -11760,6 +11921,15 @@ snapshots: optionalDependencies: '@types/react': 19.3.0 + '@radix-ui/react-visually-hidden@1.2.13(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + dependencies: + '@radix-ui/react-primitive': 2.2.0(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + react: 19.2.8 + react-dom: 19.2.8(react@19.2.8) + optionalDependencies: + '@types/react': 19.3.0 + '@types/react-dom': 19.3.0(@types/react@19.3.0) + '@radix-ui/rect@1.1.3': {} '@remix-run/node-fetch-server@0.8.1': {} @@ -12509,6 +12679,8 @@ snapshots: '@standard-schema/spec@1.1.0': {} + '@standard-schema/utils@0.3.0': {} + '@stricli/auto-complete@1.3.0': dependencies: '@stricli/core': 1.3.0 @@ -16361,6 +16533,12 @@ snapshots: react: 19.2.8 scheduler: 0.27.0 + react-hook-form@7.90.0(@types/react@19.3.0)(react@19.2.8): + dependencies: + react: 19.2.8 + optionalDependencies: + '@types/react': 19.3.0 + react-is@16.13.1: {} react-is@17.0.2: {} From df0d845886b780280c68b98715f78abdca88e93b Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 13:18:17 -0700 Subject: [PATCH 07/30] feat(local): Print hosted viewer links in command output Point human Local output at the hosted viewer with the actual loopback port. Accept plain receiver query links and consume them after pairing so reloads preserve the selected session without exposing capabilities or changing JSON output. Co-Authored-By: GPT-6 Codex --- .../src/App.sessions.integration.test.tsx | 46 ++++++++++++++++++- apps/local/src/App.tsx | 12 ++--- apps/local/src/lib/spotlight.test.ts | 19 ++++++++ apps/local/src/lib/spotlight.ts | 10 ++++ docs/cli/local-control-plane.md | 14 ++++++ packages/cli/src/commands/local/management.ts | 7 +-- packages/cli/src/commands/local/run.ts | 3 ++ packages/cli/src/commands/local/server.ts | 4 ++ packages/cli/src/commands/local/ui.ts | 24 ++++++++++ packages/cli/src/lib/formatters/local.ts | 40 ++++++++++++++++ packages/cli/test/commands/local/run.test.ts | 32 +++++++++++++ .../cli/test/commands/local/server.test.ts | 22 ++++++++- packages/cli/test/commands/local/ui.test.ts | 17 +++++++ packages/cli/test/e2e/local.test.ts | 41 +++++++++++++++++ 14 files changed, 277 insertions(+), 14 deletions(-) diff --git a/apps/local/src/App.sessions.integration.test.tsx b/apps/local/src/App.sessions.integration.test.tsx index 0186ea5e2..477f8fd7b 100644 --- a/apps/local/src/App.sessions.integration.test.tsx +++ b/apps/local/src/App.sessions.integration.test.tsx @@ -86,12 +86,20 @@ async function startDaemon(now = Date.now, preferredPort = 0) { }), }; } -function renderSession(session: { streamUrl: string; directoryUrl?: string }) { +function renderSession( + session: { streamUrl: string; directoryUrl?: string }, + fromQuery = false, +) { window.history.replaceState( null, "", - `/#${new URLSearchParams({ stream: session.streamUrl, ...(session.directoryUrl ? { directory: session.directoryUrl } : {}) })}`, + fromQuery + ? `/?${new URLSearchParams({ url: session.streamUrl })}` + : `/#${new URLSearchParams({ stream: session.streamUrl, ...(session.directoryUrl ? { directory: session.directoryUrl } : {}) })}`, ); + return renderViewer(); +} +function renderViewer() { return render( @@ -414,3 +422,37 @@ test("reconnecting a plain receiver after daemon restart never selects a stale d else await first.stop(); } }, 15_000); + +test("a CLI viewer query link discovers both runs and does not override the selected session after reload", async () => { + const daemon = await startDaemon(); + try { + const web = await daemon.create("web"); + const worker = await daemon.create("worker"); + await daemon.ingest(web, "/link-web"); + await daemon.ingest(worker, "/link-worker"); + window.localStorage.setItem( + "sentry.local.stream-url", + "http://127.0.0.1:1/stream", + ); + renderSession( + { streamUrl: new URL("/stream", web.streamUrl).toString() }, + true, + ); + await screen.findAllByText("/link-web"); + expect(window.location.search).toBe(""); + await selectSession("worker"); + await screen.findAllByText("/link-worker"); + expect(window.location.search).toBe(""); + cleanup(); + renderViewer(); + await screen.findAllByText("/link-worker"); + expect(screen.queryByText("/link-web")).toBeNull(); + expect( + screen.getByRole("combobox", { name: "Session", exact: true }) + .textContent, + ).toContain("worker"); + } finally { + cleanup(); + await daemon.stop(); + } +}, 15_000); diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index bba13debd..621e81b80 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -778,6 +778,7 @@ export default function App() { window.location.hash, getSavedStream(), getSavedRemoteStream(), + window.location.search, ), ); const [directoryUrl, setDirectoryUrl] = useState(() => @@ -1037,12 +1038,11 @@ export default function App() { }; useEffect(() => { - if (window.location.hash) { - window.history.replaceState( - null, - "", - `${window.location.pathname}${window.location.search}`, - ); + const url = new URL(window.location.href); + if (url.hash || url.searchParams.has("url")) { + url.hash = ""; + url.searchParams.delete("url"); + window.history.replaceState(null, "", `${url.pathname}${url.search}`); } }, []); diff --git a/apps/local/src/lib/spotlight.test.ts b/apps/local/src/lib/spotlight.test.ts index f37a7eb1d..58d67bc5f 100644 --- a/apps/local/src/lib/spotlight.test.ts +++ b/apps/local/src/lib/spotlight.test.ts @@ -6,6 +6,7 @@ import { getPreferredStreamUrl, resolveInitialStreamUrl, getStreamUrlFromHash, + getStreamUrlFromQuery, getStreamUrlFromStorage, } from "./spotlight.js"; @@ -75,6 +76,24 @@ describe("getStreamUrlFromHash", () => { ).toBe("http://localhost:9000/stream"); }); + test("accepts a plain loopback url query over saved connections without accepting credentials or remote targets", () => { + const query = `?${new URLSearchParams({ url: "http://localhost:9012/stream" })}`; + expect(getStreamUrlFromQuery(query)).toBe("http://localhost:9012/stream"); + expect( + resolveInitialStreamUrl("", "http://localhost:8969/stream", null, query), + ).toBe("http://localhost:9012/stream"); + for (const target of [ + "https://evil.example/stream", + "http://user:password@localhost:9012/stream", + "http://localhost:9012/_local/v1/sessions/web/stream?cap=secret", + "http://localhost:9012/stream?token=secret", + ]) { + expect( + getStreamUrlFromQuery(`?${new URLSearchParams({ url: target })}`), + ).toBeUndefined(); + } + }); + test("uses CLI pairing, saved endpoints, then the default in priority order", () => { expect( resolveInitialStreamUrl( diff --git a/apps/local/src/lib/spotlight.ts b/apps/local/src/lib/spotlight.ts index 40f5e75ca..9525ac0a6 100644 --- a/apps/local/src/lib/spotlight.ts +++ b/apps/local/src/lib/spotlight.ts @@ -207,6 +207,14 @@ export function getStreamUrlFromHash(hash: string): string | undefined { ); } +/** Public viewer query links may select only a credential-free loopback receiver. */ +export function getStreamUrlFromQuery(search: string): string | undefined { + const endpoint = parseStreamEndpoint(new URLSearchParams(search).get("url")); + if (endpoint?.kind !== "loopback") return; + const url = new URL(endpoint.url); + return url.pathname === "/stream" && !url.search ? endpoint.url : undefined; +} + /** Validate a stream endpoint saved by an earlier CLI-launched tab. */ export function getStreamUrlFromStorage( stream: string | null, @@ -234,9 +242,11 @@ export function resolveInitialStreamUrl( hash: string, savedLoopbackStream: string | null, savedRemoteStream: string | null, + search = "", ): string { return ( getStreamUrlFromHash(hash) ?? + getStreamUrlFromQuery(search) ?? getStreamUrlFromStorage(savedLoopbackStream) ?? getRemoteStreamUrlFromStorage(savedRemoteStream) ?? DEFAULT_STREAM_URL diff --git a/docs/cli/local-control-plane.md b/docs/cli/local-control-plane.md index 2f67d5eb3..28af19c51 100644 --- a/docs/cli/local-control-plane.md +++ b/docs/cli/local-control-plane.md @@ -95,6 +95,20 @@ that hosting project to use Toolkit and `apps/local` as its root directory. ### Switching sessions +Human-readable `local run` and `local serve` output prints a **View events at** +link with the receiver's actual port, for example: + +```text +View events at https://local.sentry.dev/?url=http%3A%2F%2Flocalhost%3A8969%2Fstream +``` + +Session create/view and daemon start/status summaries include the same link. +It opens the hosted viewer and connects to the plain receiver address, so named +sessions appear in the picker automatically. The public `url` query accepts only +credential-free loopback `/stream` addresses; session capabilities still use the +existing fragment connection flow. The viewer consumes the query at startup so +reloading keeps the selected session. JSON and NDJSON output stay unchanged. + Connect to the daemon's plain `http://127.0.0.1:8969/stream` endpoint (using its actual host and port) to discover running sessions automatically. The viewer selects the first running session and fills the Session picker. If no sessions diff --git a/packages/cli/src/commands/local/management.ts b/packages/cli/src/commands/local/management.ts index 5c6e67425..f96359288 100644 --- a/packages/cli/src/commands/local/management.ts +++ b/packages/cli/src/commands/local/management.ts @@ -4,6 +4,7 @@ import { basename } from "node:path"; import type { SentryContext } from "../../context.js"; import { buildCommand } from "../../lib/command.js"; import { CliError, ValidationError } from "../../lib/errors.js"; +import { formatLocalControlResult } from "../../lib/formatters/local.js"; import { CommandOutput } from "../../lib/formatters/output.js"; import { buildRouteMap } from "../../lib/route-map.js"; import { @@ -45,13 +46,9 @@ function publicDaemonState({ return { host, pid, port, version }; } -function formatHuman(data: ControlResult): string { - return JSON.stringify(data, null, 2); -} - const CONTROL_COMMAND_DEFAULTS = { auth: false, - output: { human: formatHuman }, + output: { human: formatLocalControlResult }, } as const; const DAEMON_CONNECTION_FLAGS = { diff --git a/packages/cli/src/commands/local/run.ts b/packages/cli/src/commands/local/run.ts index 26e8c93ed..5cbd1169c 100644 --- a/packages/cli/src/commands/local/run.ts +++ b/packages/cli/src/commands/local/run.ts @@ -26,6 +26,7 @@ import { detectDevCommand } from "../../lib/dev-script.js"; import { CliError, EXIT, ValidationError } from "../../lib/errors.js"; import { bold } from "../../lib/formatters/colors.js"; import { + printLocalViewerHint, type FilterValue, type FormatValue, formatEnvelopeLines, @@ -533,6 +534,7 @@ export const runCommand = buildCommand({ showAttributes: flags.attributes, }); url = tail.url; + printLocalViewerHint(url, useJson); await openLocalUiIfRequested( flags.open, @@ -692,6 +694,7 @@ async function* runWithVerify( ); const url = formatLocalServerUrl(flags.host, boundPort); logger.info(`Verify server listening on ${bold(url)}`); + printLocalViewerHint(url, flags.format === "json"); const spotlightUrl = `${url}/stream`; diff --git a/packages/cli/src/commands/local/server.ts b/packages/cli/src/commands/local/server.ts index a5d4363c3..d30d052fa 100644 --- a/packages/cli/src/commands/local/server.ts +++ b/packages/cli/src/commands/local/server.ts @@ -32,6 +32,7 @@ import type { FilterValue, FormatValue } from "../../lib/formatters/local.js"; import { FILTER_VALUES, FORMAT_VALUES, + printLocalViewerHint, formatEnvelopeLines, formatEnvelopeLinesJson, formatItem, @@ -1066,6 +1067,7 @@ export const serverCommand = buildCommand({ port: flags.port, }); logger.info("Sentry Local telemetry session"); + printLocalViewerHint(session.streamUrl, flags.format === "json"); logger.info(` Session: ${bold(session.id)} (${session.label})`); logger.info( ` Capabilities: sentry local session view ${session.id} --json`, @@ -1102,6 +1104,7 @@ export const serverCommand = buildCommand({ if (await isServerRunning(url)) { await configureExistingRetention(url, flags["max-envelopes"]); logger.info(`Connected to existing server at ${bold(url)}`); + printLocalViewerHint(url, flags.format === "json"); await openLocalUiIfRequested(flags.open, url); if (activeFilters.size > 0) { logger.info(`Filtering: ${[...activeFilters].join(", ")}`); @@ -1170,6 +1173,7 @@ export const serverCommand = buildCommand({ const listenUrl = formatLocalServerUrl(flags.host, boundPort); logger.info("Sentry Local Dev Server"); + printLocalViewerHint(listenUrl, useJson); logger.info(` Ingest: ${bold(`${listenUrl}/stream`)}`); logger.info(` Events: ${bold(`${listenUrl}/stream`)} (SSE)`); logger.info(""); diff --git a/packages/cli/src/commands/local/ui.ts b/packages/cli/src/commands/local/ui.ts index b5efb6f4e..41d86609b 100644 --- a/packages/cli/src/commands/local/ui.ts +++ b/packages/cli/src/commands/local/ui.ts @@ -74,6 +74,30 @@ export function buildLocalUiUrl( return uiUrl.toString(); } +/** A shareable hosted-viewer link contains only the daemon's plain address. */ +export function getLocalUiConnectionUrl( + receiverUrl: string, +): string | undefined { + try { + const receiver = new URL(receiverUrl); + if ( + !isLoopbackHost(receiver.hostname) || + receiver.username || + receiver.password || + !["http:", "https:"].includes(receiver.protocol) + ) + return; + const ui = new URL(PRODUCTION_UI_URL); + ui.searchParams.set("url", new URL("/stream", receiver).toString()); + return ui.toString(); + } catch { + logger.debug( + "Skipping Local viewer hint because the receiver URL is invalid.", + ); + return; + } +} + /** Open the independently served local UI without affecting capture on failure. */ export async function openLocalUi( receiverUrl: string, diff --git a/packages/cli/src/lib/formatters/local.ts b/packages/cli/src/lib/formatters/local.ts index 99d42be60..dea8a318f 100644 --- a/packages/cli/src/lib/formatters/local.ts +++ b/packages/cli/src/lib/formatters/local.ts @@ -1,5 +1,9 @@ /** Tail formatters for the local dev server. */ +import { + formatLocalServerUrl, + getLocalUiConnectionUrl, +} from "../../commands/local/ui.js"; import { logger } from "../logger.js"; import { blue, bold, cyan, green, muted, red, yellow } from "./colors.js"; import { stripAnsi } from "./plain-detect.js"; @@ -1213,3 +1217,39 @@ export function formatEnvelopeLines( } return [formatFallbackLine(resolveUnparseableLabel(container))]; } + +/** Human control-plane summaries add a viewer link without altering JSON data. */ +export function formatLocalControlResult( + data: Record, +): string { + const daemon = + data.daemon && + typeof data.daemon === "object" && + !Array.isArray(data.daemon) + ? (data.daemon as Record) + : data; + const receiverUrl = + typeof data.streamUrl === "string" + ? data.streamUrl + : typeof daemon.host === "string" && typeof daemon.port === "number" + ? formatLocalServerUrl(daemon.host, daemon.port) + : undefined; + const hint = receiverUrl ? formatLocalViewerHint(receiverUrl) : undefined; + return JSON.stringify(data, null, 2) + (hint ? `\n\n${hint}` : ""); +} + +/** Point human Local command output to a credential-free receiver connection. */ +export function formatLocalViewerHint(receiverUrl: string): string | undefined { + const url = getLocalUiConnectionUrl(receiverUrl); + return url ? `View events at ${url}` : undefined; +} + +/** Streaming commands cannot defer their hint until the generator returns. */ +export function printLocalViewerHint( + receiverUrl: string, + useJson: boolean, +): void { + if (useJson) return; + const hint = formatLocalViewerHint(receiverUrl); + if (hint) logger.info(hint); +} diff --git a/packages/cli/test/commands/local/run.test.ts b/packages/cli/test/commands/local/run.test.ts index 4aae718c2..abfc8ed82 100644 --- a/packages/cli/test/commands/local/run.test.ts +++ b/packages/cli/test/commands/local/run.test.ts @@ -17,6 +17,7 @@ import { } from "../../../src/commands/local/run.js"; import { buildApp, tryListen } from "../../../src/commands/local/server.js"; import { openBrowser } from "../../../src/lib/browser.js"; +import { logger } from "../../../src/lib/logger.js"; import { CliError, ValidationError } from "../../../src/lib/errors.js"; import { SENTRY_CONTENT_TYPE } from "../../../src/lib/formatters/local.js"; import { TEST_TMP_DIR } from "../../constants.js"; @@ -101,6 +102,37 @@ describe("sentry local run", () => { spawnCapture.stdio = undefined; }); + test.each(["human", "json"] as const)( + "prints a credential-free viewer link only for human tails (%s)", + async (format) => { + const info = vi.spyOn(logger, "info").mockImplementation(() => {}); + try { + const func = (await runCommand.loader()) as unknown as RunFunc; + await func.call( + makeContext(), + { port: 0, host: "127.0.0.1", verify: false, timeout: 0, format }, + process.execPath, + "-e", + "process.exit(0)", + ); + const hints = info.mock.calls + .map((c) => String(c[0])) + .filter((line) => line.startsWith("View events at ")); + expect(hints).toHaveLength(format === "human" ? 1 : 0); + if (hints[0]) { + const url = new URL(hints[0].slice("View events at ".length)); + const receiver = new URL(url.searchParams.get("url")!); + expect(url.origin).toBe("https://local.sentry.dev"); + expect(receiver.pathname).toBe("/stream"); + expect(Number(receiver.port)).toBeGreaterThan(0); + expect(receiver.search).toBe(""); + } + } finally { + info.mockRestore(); + } + }, + ); + test("throws ValidationError when no command and no auto-detect", async () => { const func = (await runCommand.loader()) as unknown as RunFunc; const ctx = makeContext(); diff --git a/packages/cli/test/commands/local/server.test.ts b/packages/cli/test/commands/local/server.test.ts index 837f937ed..f2f1a4d88 100644 --- a/packages/cli/test/commands/local/server.test.ts +++ b/packages/cli/test/commands/local/server.test.ts @@ -7,8 +7,9 @@ import { createSpotlightBuffer } from "@spotlightjs/spotlight/sdk"; import { createLocalRetentionBuffer } from "../../../src/commands/local/retention-buffer.js"; +import { logger } from "../../../src/lib/logger.js"; import { Hono } from "hono"; -import { describe, expect, test, vi } from "vitest"; +import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"; import { buildApp, consumeSSE, @@ -134,6 +135,22 @@ describe("parsePort", () => { }); describe("sentry local serve --open", () => { + let info: ReturnType; + beforeEach(() => { + info = vi.spyOn(logger, "info").mockImplementation(() => {}); + }); + afterEach(() => { + info.mockRestore(); + }); + function expectViewerHint() { + const hints = info.mock.calls + .map((c) => String(c[0])) + .filter((line) => line.startsWith("View events at ")); + expect(hints).toHaveLength(1); + const url = new URL(hints[0]!.slice("View events at ".length)); + expect(url.origin).toBe("https://local.sentry.dev"); + expect(new URL(url.searchParams.get("url")!).pathname).toBe("/stream"); + } const flags = { host: "127.0.0.1", quiet: true, @@ -177,6 +194,7 @@ describe("sentry local serve --open", () => { await vi.waitFor(() => expect(opener).toHaveBeenCalledTimes(1)); signal.trigger(); await command; + expectViewerHint(); const url = new URL(opener.mock.calls[0]![0]); expect(new URLSearchParams(url.hash.slice(1)).get("directory")).toBe( directoryUrl, @@ -204,6 +222,7 @@ describe("sentry local serve --open", () => { await vi.waitFor(() => expect(openBrowserMock).toHaveBeenCalledTimes(1)); signal.trigger(); await command; + expectViewerHint(); } finally { signal.restore(); } @@ -238,6 +257,7 @@ describe("sentry local serve --open", () => { await vi.waitFor(() => expect(openBrowserMock).toHaveBeenCalledTimes(1)); signal.trigger(); await command; + expectViewerHint(); } finally { signal.restore(); globalThis.fetch = savedFetch; diff --git a/packages/cli/test/commands/local/ui.test.ts b/packages/cli/test/commands/local/ui.test.ts index 2b0314537..289816338 100644 --- a/packages/cli/test/commands/local/ui.test.ts +++ b/packages/cli/test/commands/local/ui.test.ts @@ -4,6 +4,7 @@ import { buildLocalUiUrl, formatLocalServerUrl, getLocalUiBaseUrl, + getLocalUiConnectionUrl, openLocalUi, } from "../../../src/commands/local/ui.js"; import { logger } from "../../../src/lib/logger.js"; @@ -14,6 +15,22 @@ vi.mock("../../../src/lib/browser.js", () => ({ })); describe("local UI URLs", () => { + test("builds a hosted connection link with the actual receiver port and no session capabilities", () => { + const url = new URL( + getLocalUiConnectionUrl( + "http://127.0.0.1:9012/_local/v1/sessions/web/stream?cap=stream-secret", + )!, + ); + expect(url.origin).toBe("https://local.sentry.dev"); + expect(url.searchParams.get("url")).toBe("http://127.0.0.1:9012/stream"); + expect(url.toString()).not.toContain("stream-secret"); + expect( + new URL(getLocalUiConnectionUrl("http://[::1]:9012")!).searchParams.get( + "url", + ), + ).toBe("http://[::1]:9012/stream"); + expect(getLocalUiConnectionUrl("http://0.0.0.0:9012")).toBeUndefined(); + }); test("never logs a directory capability when a browser launch fails", async () => { vi.mocked(openBrowser).mockResolvedValueOnce(false); const warn = vi.spyOn(logger, "warn").mockImplementation(() => {}); diff --git a/packages/cli/test/e2e/local.test.ts b/packages/cli/test/e2e/local.test.ts index c1645f33b..716a9250d 100644 --- a/packages/cli/test/e2e/local.test.ts +++ b/packages/cli/test/e2e/local.test.ts @@ -92,6 +92,47 @@ afterEach(async () => { }); describe("Local daemon E2E", () => { + test("human session and daemon summaries advertise a plain viewer link without changing JSON", async () => { + const port = await availablePort(); + const env = { + SENTRY_CONFIG_DIR: getConfigDir(), + SENTRY_CLI_NO_TELEMETRY: "1", + SENTRY_AUTH_TOKEN: "", + SENTRY_TOKEN: "", + }; + const created = await runCli( + [ + "local", + "session", + "create", + "viewer-link", + "--host", + "127.0.0.1", + "--port", + String(port), + ], + { env }, + ); + expect(created.exitCode, created.stderr).toBe(0); + for (const result of [ + created, + await runCli(["local", "session", "view", "viewer-link"], { env }), + await runCli(["local", "daemon", "status"], { env }), + ]) { + expect(result.exitCode, result.stderr).toBe(0); + const link = result.stdout.match(/View events at (https:\/\/\S+)/)?.[1]; + expect(link).toBeTruthy(); + const url = new URL(link!); + expect(url.origin).toBe("https://local.sentry.dev"); + expect(url.searchParams.get("url")).toBe( + `http://127.0.0.1:${port}/stream`, + ); + } + const json = await cli("session", "view", "viewer-link"); + expect(json.stdout).not.toContain("View events at"); + expect(JSON.parse(json.stdout).label).toBe("viewer-link"); + }, 30_000); + test("hosted session discovery switches isolated streams and preserves retained sessions", async () => { const port = await availablePort(); const web = await createSession("web", port); From 15701e24411efe75a8f2252299469ce4fce6f514 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 13:30:50 -0700 Subject: [PATCH 08/30] feat(local): Add appearance controls to Settings Offer Light, Dark, and System themes through the existing viewer theme provider. Persist the preference without reconnecting the receiver and cover the Settings flow with an integration regression. Co-Authored-By: GPT-6 Codex --- apps/local/src/App.integration.test.tsx | 50 ++++++++++++++++++++ apps/local/src/components/local-settings.tsx | 50 ++++++++++++++++---- docs/cli/local-control-plane.md | 3 ++ 3 files changed, 95 insertions(+), 8 deletions(-) diff --git a/apps/local/src/App.integration.test.tsx b/apps/local/src/App.integration.test.tsx index 3474c0d88..38268a235 100644 --- a/apps/local/src/App.integration.test.tsx +++ b/apps/local/src/App.integration.test.tsx @@ -186,6 +186,56 @@ describe("local receiver to viewer integration", () => { window.history.replaceState(null, "", "/"); }); + test("Settings changes and persists the viewer theme without reconnecting the receiver", async () => { + ControllableEventSource.instances = []; + vi.stubGlobal("EventSource", ControllableEventSource); + renderViewer(8969); + await act(async () => + ControllableEventSource.instances.at(-1)?.onopen?.(new Event("open")), + ); + fireEvent.click( + await screen.findByRole("button", { name: "Settings", exact: true }), + ); + fireEvent.click(screen.getByRole("button", { name: "Dark", exact: true })); + await waitFor(() => + expect(document.documentElement.classList.contains("dark")).toBe(true), + ); + expect(window.localStorage.getItem("theme")).toBe("dark"); + expect(ControllableEventSource.instances).toHaveLength(1); + expect(ControllableEventSource.instances[0]?.closed).toBe(false); + + cleanup(); + renderViewer(8969); + await act(async () => + ControllableEventSource.instances.at(-1)?.onopen?.(new Event("open")), + ); + fireEvent.click( + await screen.findByRole("button", { name: "Settings", exact: true }), + ); + expect( + screen + .getByRole("button", { name: "Dark", exact: true }) + .getAttribute("aria-pressed"), + ).toBe("true"); + fireEvent.click(screen.getByRole("button", { name: "Light", exact: true })); + await waitFor(() => + expect(document.documentElement.classList.contains("light")).toBe(true), + ); + expect(window.localStorage.getItem("theme")).toBe("light"); + fireEvent.click( + screen.getByRole("button", { name: "System", exact: true }), + ); + expect(window.localStorage.getItem("theme")).toBe("system"); + expect( + screen + .getByRole("button", { name: "System", exact: true }) + .getAttribute("aria-pressed"), + ).toBe("true"); + expect(document.documentElement.classList.contains("light")).toBe(true); + expect(ControllableEventSource.instances).toHaveLength(2); + expect(ControllableEventSource.instances[1]?.closed).toBe(false); + }); + test("keeps the selected live transaction open in the detail pane", async () => { const { server, port } = await startReceiver(); diff --git a/apps/local/src/components/local-settings.tsx b/apps/local/src/components/local-settings.tsx index aeb437e04..43426ac81 100644 --- a/apps/local/src/components/local-settings.tsx +++ b/apps/local/src/components/local-settings.tsx @@ -1,4 +1,7 @@ import type { RefObject } from "react"; +import { Monitor, Moon, Sun } from "lucide-react"; +import { useTheme } from "next-themes"; +import { Button } from "./ui/button.tsx"; import { RetentionSettings } from "./retention-settings.tsx"; import { Dialog, @@ -8,6 +11,12 @@ import { DialogTitle, } from "./ui/dialog.tsx"; +const THEME_OPTIONS = [ + { value: "light", label: "Light", Icon: Sun }, + { value: "dark", label: "Dark", Icon: Moon }, + { value: "system", label: "System", Icon: Monitor }, +] as const; + type Props = { triggerRef: RefObject; open: boolean; @@ -27,6 +36,7 @@ export function LocalSettings({ triggerRef, ...retention }: Props) { + const { theme, setTheme } = useTheme(); return ( Settings - Manage retention for the selected session. + Customize viewer appearance and manage session retention. - {supported ? ( - - ) : ( -

- This receiver does not provide retention settings. -

- )} +
+

Appearance

+
+ {THEME_OPTIONS.map(({ value, label, Icon }) => ( + + ))} +
+
+
+ {supported ? ( + + ) : ( +

+ This receiver does not provide retention settings. +

+ )} +
); diff --git a/docs/cli/local-control-plane.md b/docs/cli/local-control-plane.md index 28af19c51..33800e1a1 100644 --- a/docs/cli/local-control-plane.md +++ b/docs/cli/local-control-plane.md @@ -93,6 +93,9 @@ The independently served viewer lives in `apps/local`. Run CLI builds use ; publishing the migrated app requires that hosting project to use Toolkit and `apps/local` as its root directory. +The Settings dialog also offers Light, Dark, and System appearance options. +The choice applies immediately and persists in the browser across reloads. + ### Switching sessions Human-readable `local run` and `local serve` output prints a **View events at** From d4f5ddec0d3cdc0f7785e697b211b5f59d2466af Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 13:57:01 -0700 Subject: [PATCH 09/30] fix(local): Complete receiver connection and session recovery flows Use a dismissible Add receiver modal with a shared connection form and tab-scoped history. Probe replacement streams before switching, preserve retained-session context, and guard cancelled or stale lifecycle actions. Keep Settings accessible on the landing and cover modal, history, replay, and session-state transitions with regressions. Co-Authored-By: GPT-6 Codex --- apps/local/src/App.integration.test.tsx | 333 ++++++++++++++++-- .../src/App.sessions.integration.test.tsx | 47 ++- apps/local/src/App.tsx | 260 +++++++++++--- .../src/components/connection-landing.tsx | 287 ++++++++++----- apps/local/src/components/local-settings.tsx | 1 + .../src/components/receiver-controls.tsx | 34 +- apps/local/src/components/receiver-dialog.tsx | 46 +++ .../local/src/components/session-switcher.tsx | 9 +- apps/local/src/components/ui/dialog.tsx | 2 +- apps/local/src/lib/connection-history.test.ts | 54 +++ apps/local/src/lib/connection-history.ts | 63 ++++ apps/local/src/lib/use-receiver-probe.ts | 57 +++ docs/cli/local-control-plane.md | 27 +- 13 files changed, 1038 insertions(+), 182 deletions(-) create mode 100644 apps/local/src/components/receiver-dialog.tsx create mode 100644 apps/local/src/lib/connection-history.test.ts create mode 100644 apps/local/src/lib/connection-history.ts create mode 100644 apps/local/src/lib/use-receiver-probe.ts diff --git a/apps/local/src/App.integration.test.tsx b/apps/local/src/App.integration.test.tsx index 38268a235..fa6d85fbb 100644 --- a/apps/local/src/App.integration.test.tsx +++ b/apps/local/src/App.integration.test.tsx @@ -156,6 +156,16 @@ class ControllableEventSource extends EventTarget { } } +/** Open the replacement probe, then the committed replay stream when one is created. */ +async function openLatestReceiver() { + const probe = ControllableEventSource.instances.at(-1)!; + await act(async () => probe.onopen?.(new Event("open"))); + const current = ControllableEventSource.instances.at(-1)!; + if (current !== probe) + await act(async () => current.onopen?.(new Event("open"))); + return current; +} + describe("local receiver to viewer integration", () => { beforeEach(() => { // Nuqs shares pending URL updates across mounts. Reset them between tests @@ -186,6 +196,150 @@ describe("local receiver to viewer integration", () => { window.history.replaceState(null, "", "/"); }); + test("Add receiver is a dismissible modal that keeps the live feed and restores focus", async () => { + const receiver = await startReceiver(); + try { + renderViewer(receiver.port); + await screen.findByText("Connected to local receiver"); + await sendEnvelope(receiver.port, "GET /keep-live"); + await screen.findByLabelText("View transaction event"); + const trigger = screen.getByRole("button", { + name: "Add receiver", + exact: true, + }); + fireEvent.click(trigger); + const dialog = screen.getByRole("dialog", { name: "Add receiver" }); + expect(document.body.style.pointerEvents).toBe("none"); + expect(screen.queryByRole("button", { name: "Clear events" })).toBeNull(); + fireEvent.keyDown(dialog, { key: "Escape" }); + await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull()); + expect(document.activeElement).toBe(trigger); + expect(screen.getByTestId("event-list").textContent).toContain( + "/keep-live", + ); + fireEvent.click(trigger); + fireEvent.click( + screen.getByRole("button", { name: "Close", exact: true }), + ); + await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull()); + fireEvent.click(trigger); + const overlay = document.querySelector('[data-slot="dialog-overlay"]')!; + // Radix registers outside-pointer listeners on the next task. + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 0)); + }); + fireEvent.pointerDown(overlay, { pointerType: "mouse", button: 0 }); + fireEvent.click(overlay); + await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull()); + } finally { + cleanup(); + await stopReceiver(receiver.server); + } + }); + + test("a failed or cancelled Add receiver attempt keeps the current stream and events", async () => { + ControllableEventSource.instances = []; + vi.stubGlobal("EventSource", ControllableEventSource); + renderBareViewer(); + const first = ControllableEventSource.instances[0]!; + await act(async () => { + first.onopen?.(new Event("open")); + first.dispatchEvent( + new MessageEvent(SENTRY_CONTENT_TYPE, { + data: JSON.stringify([ + {}, + [[{ type: "event" }, { message: "keep this event" }]], + ]), + }), + ); + }); + fireEvent.click( + screen.getByRole("button", { name: "Add receiver", exact: true }), + ); + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: "http://127.0.0.1:8970/stream" }, + }); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + const candidate = ControllableEventSource.instances.at(-1)!; + await act(async () => candidate.onerror?.(new Event("error"))); + expect(first.closed).toBe(false); + expect(screen.getByRole("dialog", { name: "Add receiver" })).not.toBeNull(); + expect( + screen.getByRole("alert", { name: "Receiver connection error" }) + .textContent, + ).toContain("Could not connect"); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + const cancelled = ControllableEventSource.instances.at(-1)!; + fireEvent.click(screen.getByRole("button", { name: "Close", exact: true })); + expect(cancelled.closed).toBe(true); + await act(async () => cancelled.onopen?.(new Event("open"))); + expect(first.closed).toBe(false); + expect(screen.getByTestId("event-list").textContent).toContain( + "keep this event", + ); + expect(screen.queryByRole("dialog")).toBeNull(); + }); + + test("Settings blocks the background, closes on outside click and restores its trigger", async () => { + vi.stubGlobal("EventSource", OpeningEventSource); + renderBareViewer(); + await screen.findByText("Connected to local receiver"); + const trigger = screen.getByRole("button", { + name: "Settings", + exact: true, + }); + fireEvent.click(trigger); + expect(document.body.style.pointerEvents).toBe("none"); + expect(screen.queryByRole("button", { name: "Clear events" })).toBeNull(); + const overlay = document.querySelector('[data-slot="dialog-overlay"]')!; + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 0)); + }); + fireEvent.pointerDown(overlay, { pointerType: "mouse", button: 0 }); + fireEvent.click(overlay); + await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull()); + expect(document.activeElement).toBe(trigger); + }); + + test("editing the connection landing prevents a late automatic connection from dismissing it", async () => { + ControllableEventSource.instances = []; + vi.stubGlobal("EventSource", ControllableEventSource); + renderBareViewer(); + const automatic = ControllableEventSource.instances[0]!; + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: "http://127.0.0.1:8970/stream" }, + }); + expect(automatic.closed).toBe(true); + await act(async () => automatic.onopen?.(new Event("open"))); + expect(screen.getByLabelText("Receiver endpoint")).not.toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + await openLatestReceiver(); + await screen.findByText("Connected to local receiver"); + expect(window.localStorage.getItem(STREAM_STORAGE_KEY)).toBe( + "http://127.0.0.1:8970/stream", + ); + }); + + test("appearance Settings remain available without a connected receiver", () => { + vi.stubGlobal("EventSource", ControllableEventSource); + renderBareViewer(); + fireEvent.click( + screen.getByRole("button", { name: "Settings", exact: true }), + ); + expect(screen.getByRole("dialog", { name: "Settings" })).not.toBeNull(); + fireEvent.click(screen.getByRole("button", { name: "Dark", exact: true })); + expect(document.documentElement.classList.contains("dark")).toBe(true); + expect( + screen.getByText("This receiver does not provide retention settings."), + ).not.toBeNull(); + }); + test("Settings changes and persists the viewer theme without reconnecting the receiver", async () => { ControllableEventSource.instances = []; vi.stubGlobal("EventSource", ControllableEventSource); @@ -324,9 +478,7 @@ describe("local receiver to viewer integration", () => { ?.getAttribute("aria-label"), ).toBe("Connected to local receiver"); expect( - sidebar.querySelector( - 'button[aria-label="Change receiver connection"]', - ), + sidebar.querySelector('button[aria-label="Add receiver"]'), ).not.toBeNull(); expect( sidebar.querySelector('button[aria-label="Clear events"]'), @@ -343,11 +495,9 @@ describe("local receiver to viewer integration", () => { ?.className, ).toContain("mx-auto"); - fireEvent.click( - screen.getByRole("button", { name: "Change receiver connection" }), - ); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); expect( - await screen.findByRole("heading", { name: "Connect a receiver" }), + await screen.findByRole("dialog", { name: "Add receiver" }), ).not.toBeNull(); } finally { cleanup(); @@ -382,7 +532,7 @@ describe("local receiver to viewer integration", () => { expect(connectButton.getAttribute("aria-busy")).toBe("false"); expect( screen.getByText( - "Defaults to your local receiver. You can paste another local or HTTPS stream above.", + "Use your local receiver's plain /stream address to discover its sessions, or enter an HTTPS stream.", ), ).not.toBeNull(); expect( @@ -452,12 +602,90 @@ describe("local receiver to viewer integration", () => { } }); + test("past connections survive reload and reconnect isolated feeds without pasting endpoints", async () => { + const first = await startReceiver(); + const second = await startReceiver(); + try { + await sendEnvelope(first.port, "GET /past-first"); + await sendEnvelope(second.port, "GET /past-second"); + renderViewer(first.port); + await screen.findByLabelText("View transaction event"); + fireEvent.click( + screen.getByRole("button", { name: "Add receiver", exact: true }), + ); + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: `http://127.0.0.1:${second.port}/stream` }, + }); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + await waitFor(() => + expect(screen.getByTestId("event-list").textContent).toContain( + "/past-second", + ), + ); + cleanup(); + renderBareViewer(); + await screen.findByLabelText("View transaction event"); + fireEvent.click( + screen.getByRole("button", { name: "Add receiver", exact: true }), + ); + const firstLabel = `http://127.0.0.1:${first.port}/stream`; + const secondLabel = `http://127.0.0.1:${second.port}/stream`; + expect( + screen.getByRole("button", { + name: `Reconnect to ${secondLabel}`, + exact: true, + }), + ).not.toBeNull(); + fireEvent.click( + screen.getByRole("button", { + name: `Reconnect to ${firstLabel}`, + exact: true, + }), + ); + await waitFor(() => + expect(screen.getByTestId("event-list").textContent).toContain( + "/past-first", + ), + ); + expect(screen.getByTestId("event-list").textContent).not.toContain( + "/past-second", + ); + fireEvent.click( + screen.getByRole("button", { name: "Add receiver", exact: true }), + ); + fireEvent.click( + screen.getByRole("button", { + name: `Forget ${secondLabel}`, + exact: true, + }), + ); + expect( + screen.queryByRole("button", { + name: `Reconnect to ${secondLabel}`, + exact: true, + }), + ).toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Close", exact: true }), + ); + expect(screen.getByTestId("event-list").textContent).toContain( + "/past-first", + ); + } finally { + cleanup(); + await stopReceiver(first.server); + await stopReceiver(second.server); + } + }); + test("keeps a successfully opened remote receiver only for this browser session", async () => { vi.stubGlobal("EventSource", OpeningEventSource); renderBareViewer(); await screen.findByText("Connected to local receiver"); window.localStorage.clear(); - fireEvent.click(screen.getByRole("button", { name: "Change receiver" })); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: "https://receiver.example/stream?token=abc" }, @@ -548,7 +776,7 @@ describe("local receiver to viewer integration", () => { expect(source).toBeDefined(); await act(async () => source?.onopen?.(new Event("open"))); await screen.findByText("Connected to local receiver"); - fireEvent.click(screen.getByRole("button", { name: "Change receiver" })); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); await act(async () => { source?.dispatchEvent( @@ -579,9 +807,7 @@ describe("local receiver to viewer integration", () => { await act(async () => source?.onopen?.(new Event("open"))); await screen.findByText("Connected to local receiver"); - fireEvent.click( - screen.getByRole("button", { name: "Change receiver connection" }), - ); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: "http://127.0.0.1:8970/stream" }, }); @@ -602,7 +828,7 @@ describe("local receiver to viewer integration", () => { expect(source).toBeDefined(); await act(async () => source?.onopen?.(new Event("open"))); await screen.findByText("Connected to local receiver"); - fireEvent.click(screen.getByRole("button", { name: "Change receiver" })); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: "http://receiver.example/stream" }, }); @@ -610,7 +836,7 @@ describe("local receiver to viewer integration", () => { expect(source?.closed).toBe(false); expect( - screen.getByRole("status", { name: "Connected to local receiver" }), + screen.getAllByLabelText("Connected to local receiver")[0], ).not.toBeNull(); }); @@ -1075,14 +1301,12 @@ describe("local receiver to viewer integration", () => { fireEvent.click( screen.getByRole("button", { name: "Close", exact: true }), ); - fireEvent.click( - screen.getByRole("button", { name: "Change receiver" }), - ); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: "http://127.0.0.1:8970/stream" }, }); fireEvent.click(screen.getByRole("button", { name: "Connect" })); - source = ControllableEventSource.instances[1]; + source = await openLatestReceiver(); } await act(async () => { source?.onopen?.(new Event("open")); @@ -1137,15 +1361,13 @@ describe("local receiver to viewer integration", () => { ); async function connect(url: string) { fireEvent.click( - screen.getAllByRole("button", { name: /^Change receiver/ })[0]!, + screen.getAllByRole("button", { name: /^Add receiver/ })[0]!, ); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: url }, }); fireEvent.click(screen.getByRole("button", { name: "Connect" })); - const source = ControllableEventSource.instances.at(-1)!; - await act(async () => source.onopen?.(new Event("open"))); - return source; + return openLatestReceiver(); } const firstUrl = "http://127.0.0.1:8969/_local/v1/sessions/first/stream?cap=read"; @@ -1224,7 +1446,7 @@ describe("local receiver to viewer integration", () => { const initialSource = ControllableEventSource.instances[0]; expect(initialSource).toBeDefined(); await act(async () => initialSource?.onopen?.(new Event("open"))); - fireEvent.click(screen.getByRole("button", { name: "Change receiver" })); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); const streamUrl = "http://127.0.0.1:8969/_local/v1/sessions/session-1/stream?cap=read-capability"; @@ -1233,9 +1455,7 @@ describe("local receiver to viewer integration", () => { }); fireEvent.click(screen.getByRole("button", { name: "Connect" })); - const scopedSource = ControllableEventSource.instances[1]; - expect(scopedSource).toBeDefined(); - await act(async () => scopedSource?.onopen?.(new Event("open"))); + const scopedSource = await openLatestReceiver(); await act(async () => { scopedSource?.dispatchEvent( new MessageEvent(SENTRY_CONTENT_TYPE, { @@ -1268,9 +1488,33 @@ describe("local receiver to viewer integration", () => { expect(String(fetchMock.mock.calls[1]?.[0])).toBe( "http://127.0.0.1:8969/_local/v1/sessions/session-1/ui/close?cap=read-capability", ); - expect(fetchMock.mock.calls[1]?.[1]).toEqual({ method: "POST" }); + expect(fetchMock.mock.calls[1]?.[1]).toEqual( + expect.objectContaining({ + method: "POST", + signal: expect.any(AbortSignal), + }), + ); await waitFor(() => expect(scopedSource?.closed).toBe(true)); - await screen.findByRole("heading", { name: "Connect a receiver" }); + await screen.findByRole("heading", { name: "Session closed" }); + expect( + screen.queryByText( + "Telemetry session closed. Retained events remain available for three hours.", + ), + ).toBeNull(); + expect( + screen.getByRole("region", { name: "Past connections" }), + ).not.toBeNull(); + expect( + screen.getByRole("button", { name: "Reconnect to session" }), + ).not.toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Reconnect to session" }), + ); + await openLatestReceiver(); + expect( + screen.getByRole("heading", { name: "Session closed" }), + ).not.toBeNull(); + expect(screen.queryByText("Waiting for events")).toBeNull(); expect(screen.queryByText("Waiting for events")).toBeNull(); expect(screen.getByLabelText("Receiver endpoint")).not.toBeNull(); await waitFor(() => @@ -1340,7 +1584,7 @@ describe("local receiver to viewer integration", () => { await act(async () => ControllableEventSource.instances[0]?.onopen?.(new Event("open")), ); - fireEvent.click(screen.getByRole("button", { name: "Change receiver" })); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: @@ -1348,9 +1592,8 @@ describe("local receiver to viewer integration", () => { }, }); fireEvent.click(screen.getByRole("button", { name: "Connect" })); - const source = ControllableEventSource.instances[1]; + const source = await openLatestReceiver(); await act(async () => { - source?.onopen?.(new Event("open")); for (const transaction of ["GET /alpha", "GET /beta"]) { source?.dispatchEvent( new MessageEvent(SENTRY_CONTENT_TYPE, { @@ -1388,6 +1631,24 @@ describe("local receiver to viewer integration", () => { screen.getByRole("button", { name: "Close telemetry session" }), ); await waitFor(() => expect(source?.closed).toBe(true)); + await screen.findByRole("heading", { name: "Session closed" }); + expect(screen.getAllByLabelText("View transaction event")).toHaveLength( + 1, + ); + expect( + screen.queryByRole("button", { name: "Close telemetry session" }), + ).toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Reconnect", exact: true }), + ); + const replay = await openLatestReceiver(); + await act(async () => replay.onerror?.(new Event("error"))); + expect(screen.getByRole("alert").textContent).toContain( + "Could not connect to this receiver", + ); + expect(screen.getAllByLabelText("View transaction event")).toHaveLength( + 1, + ); } else { await act(async () => source?.onerror?.(new Event("error"))); } @@ -1630,9 +1891,7 @@ describe("local receiver to viewer integration", () => { renderViewer(first.port); await screen.findByText("Connected to local receiver"); await screen.findByLabelText("View transaction event"); - fireEvent.click( - screen.getByRole("button", { name: "Change receiver connection" }), - ); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); fireEvent.click(screen.getByRole("button", { name: "Connect" })); await screen.findByText("Connected to local receiver"); expect(screen.getByTestId("event-list").textContent).toContain( @@ -1641,9 +1900,7 @@ describe("local receiver to viewer integration", () => { expect(screen.getAllByLabelText("View transaction event")).toHaveLength( 1, ); - fireEvent.click( - screen.getByRole("button", { name: "Change receiver connection" }), - ); + fireEvent.click(screen.getByRole("button", { name: "Add receiver" })); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: `http://127.0.0.1:${second.port}/stream` }, }); diff --git a/apps/local/src/App.sessions.integration.test.tsx b/apps/local/src/App.sessions.integration.test.tsx index 477f8fd7b..9cdde7825 100644 --- a/apps/local/src/App.sessions.integration.test.tsx +++ b/apps/local/src/App.sessions.integration.test.tsx @@ -1,3 +1,4 @@ +import { SessionSwitcher } from "./components/session-switcher.tsx"; // @vitest-environment-options {"url":"https://local.sentry.dev"} import { createServer } from "node:net"; import { EventSource as NodeEventSource } from "eventsource"; @@ -309,7 +310,7 @@ test("pasting a plain receiver discovers active sessions and waits for newly sta ).toBeNull(); fireEvent.click( screen.getByRole("button", { - name: "Change receiver connection", + name: "Add receiver", exact: true, }), ); @@ -400,7 +401,7 @@ test("reconnecting a plain receiver after daemon restart never selects a stale d await second.ingest(current, "/after-restart"); fireEvent.click( screen.getByRole("button", { - name: "Change receiver connection", + name: "Add receiver", exact: true, }), ); @@ -456,3 +457,45 @@ test("a CLI viewer query link discovers both runs and does not override the sele await daemon.stop(); } }, 15_000); + +test("a session lifecycle refresh immediately replaces a stale Running badge with Retained", async () => { + const daemon = await startDaemon(); + try { + const session = await daemon.create("close-preview"); + const view = render( + {}} + />, + ); + await waitFor(() => + expect( + screen.getByRole("combobox", { name: "Session", exact: true }) + .textContent, + ).toContain("Running"), + ); + const response = await fetch( + `http://127.0.0.1:${daemon.port}/_local/v1/sessions/${session.id}/close`, + { method: "POST", headers }, + ); + expect(response.ok).toBe(true); + view.rerender( + {}} + refreshKey="closed" + />, + ); + await waitFor(() => + expect( + screen.getByRole("combobox", { name: "Session", exact: true }) + .textContent, + ).toContain("Retained"), + ); + } finally { + cleanup(); + await daemon.stop(); + } +}); diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index 621e81b80..641ca60fc 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -1,3 +1,11 @@ +import { useReceiverProbe } from "./lib/use-receiver-probe.ts"; +import { ReceiverDialog } from "./components/receiver-dialog.tsx"; +import { + readConnectionHistory, + rememberConnection, + saveConnectionHistory, + receiverAddress, +} from "./lib/connection-history.ts"; import { SessionSwitcher } from "./components/session-switcher.tsx"; import { getInitialSessionDirectory, @@ -504,7 +512,8 @@ type WorkspaceSidebarProps = { traceCount: number; onClear: () => void; onCloseSession?: () => void; - onChangeReceiver: () => void; + onChangeReceiver: (trigger: HTMLButtonElement) => void; + isClosingSession: boolean; onOpenSettings: (trigger: HTMLButtonElement) => void; onOpenCommand: (trigger: HTMLButtonElement) => void; onSelect: (view: WorkspaceView) => void; @@ -522,6 +531,7 @@ function WorkspaceSidebar({ onClear, onCloseSession, onChangeReceiver, + isClosingSession, onOpenSettings, onOpenCommand, onSelect, @@ -540,7 +550,7 @@ function WorkspaceSidebar({ label: "Close telemetry session", Icon: X, onClick: onCloseSession, - disabled: false, + disabled: isClosingSession, }, ] : []), @@ -693,16 +703,16 @@ function WorkspaceSidebar({ {collapsed ? ( - Change receiver + Add receiver ) : null}
("connecting"); - const [draftEndpoint, setDraftEndpoint] = useState(streamUrl); + const [draftEndpoint, setDraftEndpoint] = useState(() => + receiverAddress(streamUrl), + ); + const [recentConnections, setRecentConnections] = useState( + readConnectionHistory, + ); + const [receiverError, setReceiverError] = useState(); + const { + isPending: isAddingReceiver, + cancel: cancelReceiverAttempt, + probe: probeReceiver, + } = useReceiverProbe(CONNECTION_TIMEOUT_MS); + const receiverTriggerRef = useRef(null); + const [closedSessionUrl, setClosedSessionUrl] = useState(); + const [isClosingSession, setIsClosingSession] = useState(false); + const closingGeneration = useRef(undefined); const [isEditingReceiver, setIsEditingReceiver] = useState(false); const [isConnectionEnabled, setIsConnectionEnabled] = useState(true); const [isConnecting, setIsConnecting] = useState(false); @@ -820,7 +845,24 @@ export default function App() { const [message, setMessage] = useState(); const fallbackEventId = useRef(0); const commandTriggerRef = useRef(null); - const presentation = getConnectionPresentation(connection); + const isClosedSession = closedSessionUrl === streamUrl; + const presentation = getConnectionPresentation( + isClosedSession ? "closed" : connection, + ); + const setReceiverDialogOpen = (open: boolean) => { + if (!open) cancelReceiverAttempt(); + setReceiverError(undefined); + setIsEditingReceiver(open); + }; + const openReceiverDialog = (trigger: HTMLButtonElement) => { + receiverTriggerRef.current = trigger; + setDraftEndpoint(receiverAddress(streamUrl)); + setReceiverDialogOpen(true); + }; + useEffect( + () => saveConnectionHistory(recentConnections), + [recentConnections], + ); const traces = useMemo(() => buildTraceGroups(items), [items]); const searchQuery = workspaceQuery.query; const activeWorkspace = workspaceNavigation.find( @@ -966,22 +1008,32 @@ export default function App() { } closeUrl.pathname = closeUrl.pathname.replace(/\/stream$/, "/ui/close"); const generation = connectionGeneration.current; - void fetch(closeUrl, { method: "POST" }) + if (closingGeneration.current === generation) return; + closingGeneration.current = generation; + setIsClosingSession(true); + void fetch(closeUrl, { method: "POST", signal: AbortSignal.timeout(5000) }) .then((response) => { if (connectionGeneration.current !== generation) return; if (!response.ok) { throw new Error(`Session close failed with HTTP ${response.status}`); } + connectionGeneration.current += 1; setIsConnectionEnabled(false); setIsConnecting(false); setConnection("closed"); - setMessage( - "Telemetry session closed. Retained events remain available for three hours.", - ); + setClosedSessionUrl(streamUrl); + setConnectionError(undefined); + setMessage(undefined); }) .catch(() => { if (connectionGeneration.current !== generation) return; setMessage("Could not close this telemetry session."); + }) + .finally(() => { + if (closingGeneration.current === generation) { + closingGeneration.current = undefined; + setIsClosingSession(false); + } }); }; @@ -997,7 +1049,7 @@ export default function App() { const connectToEndpoint = (nextStreamUrl: string) => { const endpoint = parseStreamEndpoint(nextStreamUrl); if (!endpoint) { - setConnectionError( + setReceiverError( "Enter a loopback stream or an HTTPS remote stream ending in /stream.", ); if (connection !== "connected") { @@ -1006,8 +1058,13 @@ export default function App() { } return; } + cancelReceiverAttempt(); connectionGeneration.current += 1; + closingGeneration.current = undefined; + setIsClosingSession(false); setIsSettingsOpen(false); + setReceiverError(undefined); + setMessage(undefined); if ( endpoint.kind === "loopback" && new URL(endpoint.url).pathname === "/stream" @@ -1017,6 +1074,7 @@ export default function App() { setDirectoryUrl(undefined); } if (endpoint.url !== streamUrl) { + setClosedSessionUrl(undefined); telemetryStore.clear(); telemetryStore.setLimit(DEFAULT_MAX_ENVELOPES); setRetentionLimit(DEFAULT_MAX_ENVELOPES); @@ -1027,7 +1085,7 @@ export default function App() { setCommandSearchQuery(""); void workspaceQuery.clearWorkspace(); } - setDraftEndpoint(endpoint.url); + setDraftEndpoint(receiverAddress(endpoint.url)); setStreamUrl(endpoint.url); setConnectionAttempt((attempt) => attempt + 1); setIsConnectionEnabled(true); @@ -1037,6 +1095,56 @@ export default function App() { setIsEditingReceiver(false); }; + const connectReceiver = (url: string) => { + const endpoint = parseStreamEndpoint(url); + if (!endpoint || (connection !== "connected" && !hasRetainedItems)) { + connectToEndpoint(url); + return; + } + if ( + connection === "connected" && + (endpoint.url === streamUrl || + (activeDirectoryUrl && endpoint.url === receiverAddress(streamUrl))) + ) { + setReceiverDialogOpen(false); + return; + } + setReceiverError(undefined); + probeReceiver( + endpoint.url, + () => connectToEndpoint(endpoint.url), + setReceiverError, + ); + }; + const connectionForm = { + endpoint: draftEndpoint, + error: receiverError ?? (isEditingReceiver ? undefined : connectionError), + isConnecting: isConnecting || isAddingReceiver, + onEndpointChange: (value: string) => { + setDraftEndpoint(value); + setReceiverError(undefined); + cancelReceiverAttempt(); + if ( + !isEditingReceiver && + connection === "connecting" && + !hasRetainedItems + ) { + // Editing the landing owns the next attempt; a late automatic probe must not dismiss it. + connectionGeneration.current += 1; + setIsConnectionEnabled(false); + setIsConnecting(false); + setConnection("missing"); + } + }, + onConnect: () => connectReceiver(draftEndpoint), + recentConnections, + onReconnect: connectReceiver, + onForget: (url: string) => + setRecentConnections((history) => + history.filter((entry) => entry !== url), + ), + }; + useEffect(() => { const url = new URL(window.location.href); if (url.hash || url.searchParams.has("url")) { @@ -1164,6 +1272,7 @@ export default function App() { } else if (endpoint?.kind === "remote") { saveRemoteStreamUrl(endpoint.url); } + setRecentConnections((history) => rememberConnection(history, streamUrl)); setConnection("connected"); setConnectionError(undefined); setMessage(undefined); @@ -1196,14 +1305,11 @@ export default function App() { }, [connectionAttempt, isConnectionEnabled, streamUrl, telemetryStore]); const showConnectionLanding = - isEditingReceiver || - (!hasRetainedItems && - (connection === "connecting" || - connection === "failed" || - connection === "closed")); + !hasRetainedItems && (isClosedSession || connection !== "connected"); const isReceiverUnavailable = - connection !== "connected" && !isConnecting && !hasRetainedItems; - const canSearch = hasRetainedItems && !isEditingReceiver; + !hasRetainedItems && + (isClosedSession || (connection !== "connected" && !isConnecting)); + const canSearch = hasRetainedItems && !isEditingReceiver && !isSettingsOpen; const commandNavigation: CommandNavigationItem[] = workspaceNavigation.map( ({ icon, id, label }) => ({ icon, id, label }), ); @@ -1220,6 +1326,12 @@ export default function App() { return (
+ setIsEditingReceiver(true)} + onCloseSession={ + hasScopedSession && !isClosedSession + ? closeScopedSession + : undefined + } + isClosingSession={isClosingSession} + onChangeReceiver={openReceiverDialog} onOpenSettings={openSettings} onOpenCommand={openCommand} onSelect={selectWorkspace} @@ -1280,6 +1397,23 @@ export default function App() { height="20" />
+ + + + + + Settings + + ) : (
@@ -1312,8 +1446,12 @@ export default function App() { retainedItemCount={retainedItemCount} onClear={clearItems} onCloseSession={ - hasScopedSession ? closeScopedSession : undefined + hasScopedSession && !isClosedSession + ? closeScopedSession + : undefined } + isClosingSession={isClosingSession} + onAddReceiver={openReceiverDialog} onOpenSettings={openSettings} showStatusRole={false} /> @@ -1359,23 +1497,52 @@ export default function App() { {activeDirectoryUrl ? ( ) : null} - {connectionError && - connection === "failed" && - hasRetainedItems ? ( + {hasRetainedItems && + (isClosedSession || connection === "failed") ? (
- {connectionError} +
+

+ {isClosedSession + ? "Session closed" + : "Receiver disconnected"} +

+

+ {isClosedSession + ? "Capture has stopped. You can keep inspecting these events or reconnect to retained data for up to three hours." + : connectionError} +

+ {isClosedSession && + connection === "failed" && + connectionError ? ( +

+ {connectionError} +

+ ) : null} +
+
) : null} {message ? ( @@ -1389,18 +1556,21 @@ export default function App() { {showConnectionLanding ? ( connectToEndpoint(streamUrl) + : undefined } - endpoint={draftEndpoint} - error={connectionError} - isConnecting={isConnecting} - onEndpointChange={setDraftEndpoint} - onConnect={() => connectToEndpoint(draftEndpoint)} /> ) : !hasRetainedItems ? (
@@ -1409,13 +1579,9 @@ export default function App() { aria-hidden="true" />

Waiting for events

- +

+ Send events to the selected receiver to see them here. +

) : workspaceView === "traces" ? ( void; onEndpointChange: (value: string) => void; + recentConnections: string[]; + onReconnect: (url: string) => void; + onForget: (url: string) => void; }; -/** A compact, explicit receiver picker for bare Local viewer visits. */ -export function ConnectionLanding({ +/** Shared receiver entry and recent connections for the landing and modal. */ +export function ConnectionForm({ endpoint, error, isConnecting, - phase, onConnect, onEndpointChange, -}: ConnectionLandingProps) { + recentConnections, + onReconnect, + onForget, +}: ConnectionFormProps) { + const inputId = useId(); + const errorId = useId(); const [copied, setCopied] = useState(false); const [, copyToClipboard] = useCopyToClipboard(); - const isProbing = phase === "probing"; - const submit = (event: FormEvent) => { event.preventDefault(); - if (isConnecting) { - return; - } - onConnect(); + if (!isConnecting) onConnect(); }; + return ( +
+
+ +
+ onEndpointChange(event.target.value)} + className="min-w-0 flex-1 font-mono" + placeholder="http://localhost:8969/stream" + /> + +
+ {error ? ( + + ) : null} +

+ Use your local receiver's plain /stream address to discover its + sessions, or enter an HTTPS stream. +

+
+ {recentConnections.length ? ( +
+

+

+

+ Recent receivers in this tab. Reconnect to discover available + sessions. +

+ +
    + {recentConnections.map((url) => ( +
  • + + + + + + Forget connection + +
    • + ))} +
+ +
+ ) : null} +
+ + sentry local serve --open + + +
+
+ ); +} +export type ConnectionLandingProps = ConnectionFormProps & { + phase: "probing" | "failed" | "editing" | "closed"; + onReconnectSession?: () => void; +}; + +/** A focused landing when no captured events are available to inspect. */ +export function ConnectionLanding({ + phase, + onReconnectSession, + ...form +}: ConnectionLandingProps) { + const titleId = useId(); + const isProbing = phase === "probing"; + const closed = phase === "closed"; return (
-
+
) : null} -

Sentry Local

-

- {isProbing ? "Looking for Sentry Local" : "Connect a receiver"} +

+ {isProbing + ? "Looking for Sentry Local" + : closed + ? "Session closed" + : "Connect a receiver"}

{isProbing ? "Checking the selected receiver." - : "Connect this read-only viewer to an event stream."} + : closed + ? "Capture has stopped. Retained events remain available for up to three hours. Reconnect to inspect them or choose another receiver below." + : "Connect this viewer to a local receiver or an HTTPS event stream."}

- - {error ? ( -

- {error} -

- ) : null} - -
- -
- onEndpointChange(event.target.value)} - className="h-9 min-w-0 flex-1 border border-border bg-background px-3 font-mono text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20" - /> - -
-
- -

- Defaults to your local receiver. You can paste another local or HTTPS - stream above. -

- -
- - sentry local serve --open - - -
+ Reconnect to session + + ) : null} +
); diff --git a/apps/local/src/components/local-settings.tsx b/apps/local/src/components/local-settings.tsx index 43426ac81..3b41f471d 100644 --- a/apps/local/src/components/local-settings.tsx +++ b/apps/local/src/components/local-settings.tsx @@ -40,6 +40,7 @@ export function LocalSettings({ return ( { if (triggerRef.current?.isConnected) { event.preventDefault(); diff --git a/apps/local/src/components/receiver-controls.tsx b/apps/local/src/components/receiver-controls.tsx index 788084c68..067d5d118 100644 --- a/apps/local/src/components/receiver-controls.tsx +++ b/apps/local/src/components/receiver-controls.tsx @@ -1,4 +1,12 @@ -import { ChevronDown, Moon, Sun, Settings, Trash2, X } from "lucide-react"; +import { + ChevronDown, + Moon, + Sun, + Settings, + Trash2, + X, + Radio, +} from "lucide-react"; import { useEffect, useId, useRef, useState } from "react"; import { useTheme } from "next-themes"; import type { ConnectionPresentation } from "@/lib/presentation.ts"; @@ -10,6 +18,8 @@ type ReceiverControlsProps = { onClear: () => void; onOpenSettings?: (trigger: HTMLButtonElement) => void; onCloseSession?: () => void; + isClosingSession?: boolean; + onAddReceiver?: (trigger: HTMLButtonElement) => void; showStatusRole?: boolean; }; @@ -21,6 +31,8 @@ export function ReceiverControls({ onClear, onOpenSettings, onCloseSession, + isClosingSession = false, + onAddReceiver, showStatusRole = true, }: ReceiverControlsProps) { const [isOpen, setIsOpen] = useState(false); @@ -130,6 +142,23 @@ export function ReceiverControls({ {isDark ? : } Use {isDark ? "light" : "dark"} mode + {onAddReceiver ? ( + + ) : null} {onOpenSettings ? (
); From 04aedafd613f96216f6d7a814c92ecf79d4508e3 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 15:22:25 -0700 Subject: [PATCH 12/30] fix(local): Clear stale receiver errors while editing Clear a failed landing attempt when its endpoint changes. Preserve the disconnected feed error while a replacement is edited in the modal. Co-Authored-By: GPT-6 Codex --- apps/local/src/App.integration.test.tsx | 63 +++++++++++++++++++++++++ apps/local/src/App.tsx | 1 + 2 files changed, 64 insertions(+) diff --git a/apps/local/src/App.integration.test.tsx b/apps/local/src/App.integration.test.tsx index 9143d4606..2959ef6aa 100644 --- a/apps/local/src/App.integration.test.tsx +++ b/apps/local/src/App.integration.test.tsx @@ -838,6 +838,69 @@ describe("local receiver to viewer integration", () => { expect(window.localStorage.getItem(STREAM_STORAGE_KEY)).toBeNull(); }); + test("editing a failed landing clears its stale connection error without reconnecting", async () => { + ControllableEventSource.instances = []; + vi.stubGlobal("EventSource", ControllableEventSource); + renderBareViewer(); + const source = ControllableEventSource.instances[0]!; + await act(async () => source.onerror?.(new Event("error"))); + await screen.findByRole("alert", { name: "Receiver connection error" }); + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: "http://127.0.0.1:8970/stream" }, + }); + expect( + screen.queryByRole("alert", { name: "Receiver connection error" }), + ).toBeNull(); + expect(ControllableEventSource.instances).toHaveLength(1); + await act(async () => source.onerror?.(new Event("error"))); + expect( + screen.queryByRole("alert", { name: "Receiver connection error" }), + ).toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + await openLatestReceiver(); + await screen.findByText("Connected to local receiver"); + }); + + test("editing a replacement keeps the disconnected feed's error after closing the modal", async () => { + ControllableEventSource.instances = []; + vi.stubGlobal("EventSource", ControllableEventSource); + renderBareViewer(); + const source = ControllableEventSource.instances[0]!; + await act(async () => { + source.onopen?.(new Event("open")); + source.dispatchEvent( + new MessageEvent(SENTRY_CONTENT_TYPE, { + data: JSON.stringify([ + {}, + [[{ type: "event" }, { message: "kept event" }]], + ]), + lastEventId: "kept", + }), + ); + source.onerror?.(new Event("error")); + }); + await screen.findByRole("heading", { + name: "Receiver disconnected", + exact: true, + }); + const error = + "Could not connect to the default receiver. Start it with the command below or enter another endpoint."; + expect(screen.getByText(error)).not.toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Add receiver", exact: true }), + ); + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: "http://127.0.0.1:8970/stream" }, + }); + fireEvent.click(screen.getByRole("button", { name: "Close", exact: true })); + expect(screen.getByText(error)).not.toBeNull(); + expect(screen.getByTestId("event-detail").textContent).toContain( + "kept event", + ); + }); + test("keeps endpoint validation visible after a failed receiver has been stopped", async () => { ControllableEventSource.instances = []; vi.stubGlobal("EventSource", ControllableEventSource); diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index 5b4a149fa..c0da3754d 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -1123,6 +1123,7 @@ export default function App() { onEndpointChange: (value: string) => { setDraftEndpoint(value); setReceiverError(undefined); + if (!isEditingReceiver) setConnectionError(undefined); cancelReceiverAttempt(); if ( !isEditingReceiver && From bf766b3b6a4bd0132265c6d1816b826af48b9664 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 16:30:48 -0700 Subject: [PATCH 13/30] fix(local): Preserve scoped sessions when retrying connections Keep the selected run when the landing retries its unchanged receiver address. Cover an initial SSE failure with two real daemon sessions. Co-Authored-By: GPT-6 Codex --- .../src/App.sessions.integration.test.tsx | 44 +++++++++++++++++++ apps/local/src/App.tsx | 9 +++- 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/apps/local/src/App.sessions.integration.test.tsx b/apps/local/src/App.sessions.integration.test.tsx index fcb05ee4e..6de17e6ce 100644 --- a/apps/local/src/App.sessions.integration.test.tsx +++ b/apps/local/src/App.sessions.integration.test.tsx @@ -424,6 +424,50 @@ test("reconnecting a plain receiver after daemon restart never selects a stale d } }, 15_000); +test("retrying a failed CLI-selected stream keeps that session instead of discovering another run", async () => { + const daemon = await startDaemon(() => 1_700_000_000_000); + try { + const web = await daemon.create("web"); + const worker = await daemon.create("worker"); + await daemon.ingest(web, "/retry-web"); + await daemon.ingest(worker, "/retry-worker"); + let failInitialStream = true; + vi.stubGlobal( + "EventSource", + class extends NodeEventSource { + constructor(url: string) { + super(url, { + fetch: (input, init) => { + if ( + failInitialStream && + new URL(url).pathname === new URL(worker.streamUrl).pathname + ) { + failInitialStream = false; + return Promise.resolve(new Response(null, { status: 503 })); + } + return fetch(input, init); + }, + }); + } + }, + ); + renderSession(worker); + await screen.findByRole("alert", { name: "Receiver connection error" }); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + await screen.findAllByText("/retry-worker"); + expect(screen.queryByText("/retry-web")).toBeNull(); + expect( + screen.getByRole("combobox", { name: "Session", exact: true }) + .textContent, + ).toContain("worker"); + } finally { + cleanup(); + await daemon.stop(); + } +}, 15_000); + test("a CLI viewer query link discovers both runs and does not override the selected session after reload", async () => { const daemon = await startDaemon(); try { diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index c0da3754d..2c34022ad 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -1137,7 +1137,14 @@ export default function App() { setConnection("missing"); } }, - onConnect: () => connectReceiver(draftEndpoint), + onConnect: () => + connectReceiver( + // The form hides local session capabilities. Retrying its unchanged + // address must keep the selected run rather than rediscovering one. + !isEditingReceiver && draftEndpoint === receiverAddress(streamUrl) + ? streamUrl + : draftEndpoint, + ), recentConnections, onReconnect: connectReceiver, onForget: (url: string) => From 515ae1e6d10d9a977fcbe536ba5ba5439032df54 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 16:46:08 -0700 Subject: [PATCH 14/30] fix(local): Retry transient daemon ownership reads Handle brief EPERM failures while a stopping daemon removes its owner file. Keep retries bounded and propagate persistent access errors without treating unreadable ownership as absent. Co-Authored-By: GPT-6 Codex --- packages/cli/src/commands/local/daemon.ts | 23 +++++--- .../commands/local/daemon-ownership.test.ts | 59 ++++++++++++++++++- 2 files changed, 74 insertions(+), 8 deletions(-) diff --git a/packages/cli/src/commands/local/daemon.ts b/packages/cli/src/commands/local/daemon.ts index ad5f5350f..05ce39d28 100644 --- a/packages/cli/src/commands/local/daemon.ts +++ b/packages/cli/src/commands/local/daemon.ts @@ -312,13 +312,22 @@ function isProcessRunning(pid: number): boolean { /** Read a lock's owning PID without interpreting an absent file as ownership. */ async function readOwnerPid(path: string): Promise { - try { - return Number(await readFile(path, "utf8")); - } catch (error) { - if (error instanceof Error && "code" in error && error.code === "ENOENT") - return 0; - logger.debug("Could not read Local startup ownership", error); - throw error; + for (let attempt = 0; ; attempt += 1) { + try { + return Number(await readFile(path, "utf8")); + } catch (error) { + if (error instanceof Error && "code" in error) { + if (error.code === "ENOENT") return 0; + // Windows may briefly deny reads while the previous owner removes its + // file. Retry without interpreting an unreadable owner as absent. + if (error.code === "EPERM" && attempt < 4) { + await sleep(125); + continue; + } + } + logger.debug("Could not read Local startup ownership", error); + throw error; + } } } diff --git a/packages/cli/test/commands/local/daemon-ownership.test.ts b/packages/cli/test/commands/local/daemon-ownership.test.ts index 682ed2ded..1d4b66245 100644 --- a/packages/cli/test/commands/local/daemon-ownership.test.ts +++ b/packages/cli/test/commands/local/daemon-ownership.test.ts @@ -2,7 +2,10 @@ import { mkdir, readFile, rm, stat, writeFile } from "node:fs/promises"; import { join } from "node:path"; import { afterEach, describe, expect, test, vi } from "vitest"; import { useTestConfigDir } from "../../helpers.js"; -import { claimDaemonOwnership } from "../../../src/commands/local/daemon.js"; +import { + claimDaemonOwnership, + waitForLocalDaemonShutdown, +} from "../../../src/commands/local/daemon.js"; vi.mock("node:fs/promises", async (importOriginal) => { const fs = await importOriginal(); @@ -168,3 +171,57 @@ describe("Local daemon ownership", () => { expect(await readFile(owner, "utf8")).toBe("42"); }); }); + +describe("Local daemon shutdown ownership reads", () => { + const state = { + host: "127.0.0.1", + port: 8969, + pid: process.pid, + token: "stopping", + version: 1, + }; + + test("retries a transient owner read error while the stopped daemon releases its file", async () => { + const fs = + await vi.importActual( + "node:fs/promises", + ); + const directory = getConfigDir(); + await mkdir(directory, { recursive: true }); + const owner = join(directory, "local-control-plane.owner"); + await writeFile(owner, String(process.pid)); + vi.mocked(readFile) + .mockImplementationOnce(fs.readFile) + .mockImplementationOnce(async () => { + await fs.rm(owner); + throw Object.assign(new Error("owner deletion in progress"), { + code: "EPERM", + }); + }); + await expect(waitForLocalDaemonShutdown(state)).resolves.toBeUndefined(); + }); + + test.each(["EPERM", "EACCES"])( + "preserves an owner when reads remain denied with %s", + async (code) => { + const fs = + await vi.importActual( + "node:fs/promises", + ); + const directory = getConfigDir(); + await mkdir(directory, { recursive: true }); + const owner = join(directory, "local-control-plane.owner"); + await writeFile(owner, String(process.pid)); + const denied = Object.assign(new Error("owner remains unreadable"), { + code, + }); + vi.mocked(readFile).mockRejectedValue(denied); + try { + await expect(waitForLocalDaemonShutdown(state)).rejects.toBe(denied); + expect(await fs.readFile(owner, "utf8")).toBe(String(process.pid)); + } finally { + vi.mocked(readFile).mockImplementation(fs.readFile); + } + }, + ); +}); From 5f9feec3499214bb4fd67930a4f411531d757cfc Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 17:33:56 -0700 Subject: [PATCH 15/30] fix(local): Preserve sessions on unchanged receiver submissions Retry the selected scoped session when Add receiver is submitted without edits. Preserve retained events and workspace selection while explicit endpoint edits still allow rediscovery after a daemon restart. Co-Authored-By: GPT-6 Codex --- apps/local/src/App.integration.test.tsx | 71 +++++++++++++++++++ .../src/App.sessions.integration.test.tsx | 7 ++ apps/local/src/App.tsx | 8 ++- 3 files changed, 85 insertions(+), 1 deletion(-) diff --git a/apps/local/src/App.integration.test.tsx b/apps/local/src/App.integration.test.tsx index 2959ef6aa..45f1035e8 100644 --- a/apps/local/src/App.integration.test.tsx +++ b/apps/local/src/App.integration.test.tsx @@ -863,6 +863,77 @@ describe("local receiver to viewer integration", () => { await screen.findByText("Connected to local receiver"); }); + test("unchanged Add receiver retries a disconnected scoped session without losing its events or selection", async () => { + const stream = + "http://127.0.0.1:8969/_local/v1/sessions/selected-run/stream?cap=session-test"; + const requestedStreams: string[] = []; + ControllableEventSource.instances = []; + vi.stubGlobal( + "EventSource", + class extends ControllableEventSource { + constructor(url: string) { + super(url); + requestedStreams.push(url); + } + }, + ); + window.localStorage.setItem(STREAM_STORAGE_KEY, stream); + renderBareViewer(); + const source = ControllableEventSource.instances[0]!; + await act(async () => { + source.onopen?.(new Event("open")); + source.dispatchEvent( + new MessageEvent(SENTRY_CONTENT_TYPE, { + data: JSON.stringify([ + {}, + [ + [ + { type: "event" }, + { message: "kept scoped event", level: "error" }, + ], + ], + ]), + lastEventId: "kept-scoped", + }), + ); + }); + fireEvent.click( + screen.getByRole("button", { name: "Open errors view", exact: true }), + ); + await screen.findByRole("heading", { name: "Errors", exact: true }); + fireEvent.click(screen.getByRole("tab", { name: "JSON", exact: true })); + await act(async () => source.onerror?.(new Event("error"))); + await screen.findByRole("heading", { + name: "Receiver disconnected", + exact: true, + }); + fireEvent.click( + screen.getByRole("button", { name: "Add receiver", exact: true }), + ); + expect( + (screen.getByLabelText("Receiver endpoint") as HTMLInputElement).value, + ).toBe("http://127.0.0.1:8969/stream"); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + await openLatestReceiver(); + await screen.findByText("Connected to local receiver"); + expect( + screen.getByRole("heading", { name: "Errors", exact: true }), + ).not.toBeNull(); + expect(screen.getByTestId("event-detail").textContent).toContain( + "kept scoped event", + ); + expect( + screen + .getByRole("tab", { name: "JSON", exact: true }) + .getAttribute("aria-selected"), + ).toBe("true"); + const reconnected = new URL(requestedStreams.at(-1)!); + expect(reconnected.pathname).toBe(new URL(stream).pathname); + expect(reconnected.searchParams.get("cap")).toBe("session-test"); + }); + test("editing a replacement keeps the disconnected feed's error after closing the modal", async () => { ControllableEventSource.instances = []; vi.stubGlobal("EventSource", ControllableEventSource); diff --git a/apps/local/src/App.sessions.integration.test.tsx b/apps/local/src/App.sessions.integration.test.tsx index 6de17e6ce..1765afd84 100644 --- a/apps/local/src/App.sessions.integration.test.tsx +++ b/apps/local/src/App.sessions.integration.test.tsx @@ -314,6 +314,10 @@ test("pasting a plain receiver discovers active sessions and waits for newly sta exact: true, }), ); + // The prefilled display address is identical; clear it to make this an explicit edit. + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: "" }, + }); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: stream }, }); @@ -405,6 +409,9 @@ test("reconnecting a plain receiver after daemon restart never selects a stale d exact: true, }), ); + fireEvent.change(screen.getByLabelText("Receiver endpoint"), { + target: { value: "" }, + }); fireEvent.change(screen.getByLabelText("Receiver endpoint"), { target: { value: `http://127.0.0.1:${first.port}/stream` }, }); diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index 2c34022ad..99e2a787d 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -801,6 +801,7 @@ export default function App() { const [draftEndpoint, setDraftEndpoint] = useState(() => receiverAddress(streamUrl), ); + const receiverEndpointEdited = useRef(false); const [recentConnections, setRecentConnections] = useState( readConnectionHistory, ); @@ -857,6 +858,7 @@ export default function App() { const openReceiverDialog = (trigger: HTMLButtonElement) => { receiverTriggerRef.current = trigger; setDraftEndpoint(receiverAddress(streamUrl)); + receiverEndpointEdited.current = false; setReceiverDialogOpen(true); }; useEffect( @@ -1086,6 +1088,7 @@ export default function App() { void workspaceQuery.clearWorkspace(); } setDraftEndpoint(receiverAddress(endpoint.url)); + receiverEndpointEdited.current = false; setStreamUrl(endpoint.url); setConnectionAttempt((attempt) => attempt + 1); setIsConnectionEnabled(true); @@ -1122,6 +1125,7 @@ export default function App() { isConnecting: isConnecting || isAddingReceiver, onEndpointChange: (value: string) => { setDraftEndpoint(value); + receiverEndpointEdited.current = true; setReceiverError(undefined); if (!isEditingReceiver) setConnectionError(undefined); cancelReceiverAttempt(); @@ -1141,7 +1145,9 @@ export default function App() { connectReceiver( // The form hides local session capabilities. Retrying its unchanged // address must keep the selected run rather than rediscovering one. - !isEditingReceiver && draftEndpoint === receiverAddress(streamUrl) + // An explicitly edited address can re-pair after a daemon restart. + !receiverEndpointEdited.current && + draftEndpoint === receiverAddress(streamUrl) ? streamUrl : draftEndpoint, ), From 481b9b241bd0fd2c4d14e277d598372f1d17fff7 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Thu, 15 Oct 2026 18:54:15 -0700 Subject: [PATCH 16/30] fix(local): Make capture and viewer lifecycle actions consistent Freeze closed sessions, replay finite archives, notify every reader on reset and close, and provide explicit disconnection without deleting capture data. Keep the workspace stable during clears and guard stale deliveries. Co-Authored-By: GPT-6 Codex --- apps/local/src/App.integration.test.tsx | 81 +++++-- .../src/App.sessions.integration.test.tsx | 65 ++++++ apps/local/src/App.tsx | 200 ++++++++++++++---- .../src/components/connection-landing.tsx | 43 +--- .../src/components/receiver-controls.test.tsx | 23 ++ .../src/components/receiver-controls.tsx | 12 +- apps/local/src/lib/connection-history.test.ts | 18 ++ apps/local/src/lib/connection-history.ts | 22 ++ docs/cli/local-control-plane.md | 23 +- .../cli/src/commands/local/control-plane.ts | 82 +++++-- .../cli/src/commands/local/session-store.ts | 54 +++-- .../cli/src/commands/local/viewer-protocol.ts | 7 + .../commands/local/session-lifecycle.test.ts | 114 ++++++++++ .../test/commands/local/session-store.test.ts | 6 +- packages/cli/test/e2e/local.test.ts | 45 +++- 15 files changed, 661 insertions(+), 134 deletions(-) create mode 100644 packages/cli/test/commands/local/session-lifecycle.test.ts diff --git a/apps/local/src/App.integration.test.tsx b/apps/local/src/App.integration.test.tsx index 45f1035e8..19766377f 100644 --- a/apps/local/src/App.integration.test.tsx +++ b/apps/local/src/App.integration.test.tsx @@ -71,7 +71,11 @@ function envelope(transaction: string, options: EnvelopeOptions = {}): string { } async function startReceiver() { - return tryListen(buildApp(createSpotlightBuffer(10)), 0, "127.0.0.1"); + return tryListen( + buildApp(createSpotlightBuffer(10), { uiActions: true }), + 0, + "127.0.0.1", + ); } async function stopReceiver( @@ -863,6 +867,54 @@ describe("local receiver to viewer integration", () => { await screen.findByText("Connected to local receiver"); }); + test("clear ignores pre-reset deliveries and reconnects without replacing the workspace shell", async () => { + ControllableEventSource.instances = []; + vi.stubGlobal("EventSource", ControllableEventSource); + window.localStorage.setItem( + STREAM_STORAGE_KEY, + "http://127.0.0.1:8969/_local/v1/sessions/reset-run/stream?cap=reset-test", + ); + let completeReset: ((response: Response) => void) | undefined; + vi.stubGlobal( + "fetch", + vi.fn( + () => + new Promise((resolve) => { + completeReset = resolve; + }), + ), + ); + renderBareViewer(); + const source = ControllableEventSource.instances[0]!; + const deliver = (message: string, id: string) => + source.dispatchEvent( + new MessageEvent(SENTRY_CONTENT_TYPE, { + data: JSON.stringify([{}, [[{ type: "event" }, { message }]]]), + lastEventId: id, + }), + ); + await act(async () => { + source.onopen?.(new Event("open")); + deliver("before reset", "before"); + }); + const shell = screen.getByRole("complementary", { + name: "Workspace navigation", + }); + fireEvent.click( + screen.getByRole("button", { name: "Clear events", exact: true }), + ); + await act(async () => deliver("stale queued event", "stale")); + expect(screen.queryByText("stale queued event")).toBeNull(); + expect( + screen.getByRole("complementary", { name: "Workspace navigation" }), + ).toBe(shell); + await act(async () => completeReset?.(new Response(null, { status: 204 }))); + expect(ControllableEventSource.instances).toHaveLength(2); + expect( + screen.getByRole("complementary", { name: "Workspace navigation" }), + ).toBe(shell); + }); + test("unchanged Add receiver retries a disconnected scoped session without losing its events or selection", async () => { const stream = "http://127.0.0.1:8969/_local/v1/sessions/selected-run/stream?cap=session-test"; @@ -1759,7 +1811,12 @@ describe("local receiver to viewer integration", () => { expect(String(fetchMock.mock.calls[0]?.[0])).toBe( "http://127.0.0.1:8969/_local/v1/sessions/session-1/ui/reset?cap=read-capability", ); - expect(fetchMock.mock.calls[0]?.[1]).toEqual({ method: "POST" }); + expect(fetchMock.mock.calls[0]?.[1]).toEqual( + expect.objectContaining({ + method: "POST", + signal: expect.any(AbortSignal), + }), + ); if (resetStatus !== 204) { await screen.findByText( "Cleared this viewer, but the receiver could not clear its retained session.", @@ -1786,21 +1843,18 @@ describe("local receiver to viewer integration", () => { "Telemetry session closed. Retained events remain available for three hours.", ), ).toBeNull(); + expect(screen.getByLabelText("Workspace navigation")).not.toBeNull(); + expect(screen.queryByLabelText("Receiver endpoint")).toBeNull(); expect( - screen.getByRole("region", { name: "Past connections" }), - ).not.toBeNull(); - expect( - screen.getByRole("button", { name: "Reconnect to session" }), + screen.getByRole("button", { name: "Reload saved events" }), ).not.toBeNull(); fireEvent.click( - screen.getByRole("button", { name: "Reconnect to session" }), + screen.getByRole("button", { name: "Disconnect receiver" }), ); - await openLatestReceiver(); + await screen.findByRole("heading", { name: "Connect a receiver" }); expect( - screen.getByRole("heading", { name: "Session closed" }), + screen.getByRole("region", { name: "Past connections" }), ).not.toBeNull(); - expect(screen.queryByText("Waiting for events")).toBeNull(); - expect(screen.queryByText("Waiting for events")).toBeNull(); expect(screen.getByLabelText("Receiver endpoint")).not.toBeNull(); await waitFor(() => expect( @@ -1924,7 +1978,10 @@ describe("local receiver to viewer integration", () => { screen.queryByRole("button", { name: "Close telemetry session" }), ).toBeNull(); fireEvent.click( - screen.getByRole("button", { name: "Reconnect", exact: true }), + screen.getByRole("button", { + name: "Reload saved events", + exact: true, + }), ); const replay = await openLatestReceiver(); await act(async () => replay.onerror?.(new Event("error"))); diff --git a/apps/local/src/App.sessions.integration.test.tsx b/apps/local/src/App.sessions.integration.test.tsx index 1765afd84..2abe52133 100644 --- a/apps/local/src/App.sessions.integration.test.tsx +++ b/apps/local/src/App.sessions.integration.test.tsx @@ -550,3 +550,68 @@ test("a session lifecycle refresh immediately replaces a stale Running badge wit await daemon.stop(); } }); + +test("close, archive replay, clear and disconnect keep the viewer lifecycle stable", async () => { + const daemon = await startDaemon(); + try { + const web = await daemon.create("web"); + const worker = await daemon.create("worker"); + await daemon.ingest(web, "/archived-web"); + await daemon.ingest(worker, "/running-worker"); + renderSession(web); + await screen.findAllByText("/archived-web"); + daemon.plane.sessionStore.close(web.id); + await screen.findByRole("heading", { name: "Session closed", exact: true }); + expect(screen.queryByRole("alert")).toBeNull(); + await selectSession("worker"); + await screen.findAllByText("/running-worker"); + await selectSession("web"); + await screen.findAllByText("/archived-web"); + await screen.findByRole("heading", { name: "Session closed", exact: true }); + fireEvent.click( + screen.getByRole("button", { name: "Clear events", exact: true }), + ); + await screen.findByRole("heading", { + name: "No saved events displayed", + exact: true, + }); + expect(screen.queryByLabelText("Receiver endpoint")).toBeNull(); + expect( + screen.getByRole("complementary", { name: "Workspace navigation" }), + ).not.toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Reload saved events", exact: true }), + ); + await screen.findAllByText("/archived-web"); + fireEvent.click( + screen.getByRole("button", { name: "Disconnect receiver", exact: true }), + ); + await screen.findByRole("heading", { + name: "Connect a receiver", + exact: true, + }); + expect( + screen.queryByRole("combobox", { name: "Session", exact: true }), + ).toBeNull(); + expect( + daemon.plane.sessionStore.getRetention(web.id).getSettings() + .retainedEnvelopes, + ).toBe(1); + cleanup(); + renderViewer(); + await screen.findByRole("heading", { + name: "Connect a receiver", + exact: true, + }); + expect(screen.queryByText("/archived-web")).toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Connect", exact: true }), + ); + await screen.findAllByText("/archived-web"); + await screen.findByRole("heading", { name: "Session closed", exact: true }); + expect(screen.queryByRole("alert")).toBeNull(); + } finally { + cleanup(); + await daemon.stop(); + } +}, 15_000); diff --git a/apps/local/src/App.tsx b/apps/local/src/App.tsx index 99e2a787d..09897307d 100644 --- a/apps/local/src/App.tsx +++ b/apps/local/src/App.tsx @@ -8,6 +8,8 @@ import { rememberConnection, saveConnectionHistory, receiverAddress, + getInitialDisconnected, + saveDisconnected, } from "./lib/connection-history.ts"; import { SessionSwitcher } from "./components/session-switcher.tsx"; import { @@ -16,7 +18,10 @@ import { saveSessionDirectory, } from "./lib/session-directory.ts"; import { LocalSettings } from "./components/local-settings.tsx"; -import { LOCAL_DIRECTORY_EVENT } from "../../../packages/cli/src/commands/local/viewer-protocol.ts"; +import { + LOCAL_DIRECTORY_EVENT, + LOCAL_SESSION_EVENT, +} from "../../../packages/cli/src/commands/local/viewer-protocol.ts"; import { DEFAULT_MAX_ENVELOPES, isValidMaxEnvelopes, @@ -28,6 +33,7 @@ import { ChevronRight, Copy, Menu, + Unplug, Radio, Settings, Trash2, @@ -524,6 +530,8 @@ type WorkspaceSidebarProps = { snapshot: LocalTelemetrySnapshot; traceCount: number; onClear: () => void; + onDisconnect: () => void; + isClearing: boolean; onCloseSession?: () => void; onChangeReceiver: (trigger: HTMLButtonElement) => void; isClosingSession: boolean; @@ -542,6 +550,8 @@ function WorkspaceSidebar({ snapshot, traceCount, onClear, + onDisconnect, + isClearing, onCloseSession, onChangeReceiver, isClosingSession, @@ -555,7 +565,7 @@ function WorkspaceSidebar({ label: "Clear events", Icon: Trash2, onClick: onClear, - disabled: retainedItemCount === 0, + disabled: retainedItemCount === 0 || isClearing, }, ...(onCloseSession ? [ @@ -563,10 +573,16 @@ function WorkspaceSidebar({ label: "Close telemetry session", Icon: X, onClick: onCloseSession, - disabled: isClosingSession, + disabled: isClosingSession || isClearing, }, ] : []), + { + label: "Disconnect receiver", + Icon: Unplug, + onClick: onDisconnect, + disabled: false, + }, ]; const statusLabel = connection.label.replace(" to local receiver", ""); const statusDotClass = @@ -576,6 +592,12 @@ function WorkspaceSidebar({ ? "bg-amber-500" : "bg-muted-foreground"; + const statusPillClass = + connection.tone === "success" + ? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400" + : connection.tone === "warning" + ? "bg-amber-500/10 text-amber-700 dark:text-amber-400" + : "bg-muted text-muted-foreground"; return (
@@ -1814,6 +1432,10 @@ export default function App() { onOpenChange={setCommandOpen} onQueryChange={setCommandSearchQuery} onSelectItem={selectCommandItem} + currentViewLabel={activeWorkspace.label} + onFilterView={(query) => { + void workspaceQuery.setSearchQuery(query); + }} />
); diff --git a/apps/local/src/components/capture-header.test.tsx b/apps/local/src/components/capture-header.test.tsx new file mode 100644 index 000000000..fb45e37e7 --- /dev/null +++ b/apps/local/src/components/capture-header.test.tsx @@ -0,0 +1,222 @@ +import { + act, + cleanup, + fireEvent, + render, + screen, +} from "@testing-library/react"; +import { afterEach, beforeEach, expect, test, vi } from "vitest"; +import { CaptureHeader } from "./capture-header.tsx"; + +beforeEach(() => { + vi.useFakeTimers(); + vi.setSystemTime(new Date("2026-10-26T10:00:00.000Z")); +}); +afterEach(() => { + cleanup(); + vi.useRealTimers(); +}); +const streamUrl = + "http://127.0.0.1:8969/_local/v1/sessions/web/stream?cap=SECRET"; +const session = { + id: "web", + label: "Web app", + cwd: "/projects/web", + state: "open" as const, + streamUrl, +}; +const props = { + streamUrl, + connection: "connected" as const, + isClosed: false, + session, + onReload: vi.fn(), + isReloading: false, +}; + +test("unifies capture identity with receiver connectivity and the last received time", () => { + render(); + expect(screen.getByRole("heading", { name: "Web app" })).not.toBeNull(); + expect(screen.getByText("/projects/web")).not.toBeNull(); + expect(screen.getByText("Capturing")).not.toBeNull(); + expect(screen.getByText("Connected to local receiver")).not.toBeNull(); + expect(screen.getByText(/Last received/)).not.toBeNull(); + expect(document.querySelector("time")?.getAttribute("dateTime")).toBe( + "2026-10-26T10:30:00.000Z", + ); + expect(document.body.innerHTML).not.toContain("SECRET"); + const address = screen.getByText("http://127.0.0.1:8969"); + expect(address.getAttribute("title")).toBe("http://127.0.0.1:8969"); + expect(document.body.innerHTML).not.toContain("/_local/v1/sessions/"); + fireEvent.click(screen.getByRole("button", { name: "Reload capture" })); + expect(props.onReload).toHaveBeenCalledOnce(); +}); + +test("shows a saved capture independently of a failed receiver and preserves the actual deadline", () => { + render( + , + ); + expect(screen.getByText("Saved capture")).not.toBeNull(); + expect(screen.getByText("Receiver unavailable")).not.toBeNull(); + expect(screen.getByText(/Saved until/)).not.toBeNull(); + expect(screen.getByRole("button", { name: "Reconnect" })).not.toBeNull(); +}); + +test("does not invent expiry or repeat the picker identity", () => { + render( + Web app picker} + />, + ); + expect(screen.getByRole("button", { name: "Web app picker" })).not.toBeNull(); + expect(screen.queryByRole("heading", { name: "Web app" })).toBeNull(); + expect(screen.queryByText(/Saved until/)).toBeNull(); +}); + +test("awaiting a daemon session asks for capture selection without implying capture is active", () => { + render( + , + ); + expect(screen.getByText("Choose a capture")).not.toBeNull(); + expect(screen.queryByText("Capturing")).toBeNull(); + expect(screen.queryByRole("button", { name: "Reload capture" })).toBeNull(); +}); + +test("never displays stale capture identity or URL credentials after changing receiver", () => { + render( + , + ); + expect(screen.queryByText("Web app")).toBeNull(); + expect(screen.queryByText("/projects/web")).toBeNull(); + expect(document.body.textContent).not.toMatch(/SECRET|HIDDEN|token=|cap=/); + expect(screen.getByText("Connection lost")).not.toBeNull(); + expect(screen.getByText("https://receiver.example")).not.toBeNull(); +}); + +test("shows reconnecting state and prevents duplicate reload requests", () => { + const onReload = vi.fn(); + render( + , + ); + expect(screen.getByText("Connecting")).not.toBeNull(); + const reload = screen.getByRole("button", { name: "Reload capture" }); + expect(reload.hasAttribute("disabled")).toBe(true); + expect(reload.getAttribute("aria-busy")).toBe("true"); + fireEvent.click(reload); + expect(onReload).not.toHaveBeenCalled(); +}); + +test("expires at the frozen save deadline despite newer events and preserves capture identity", async () => { + const onReload = vi.fn(); + const expiresAt = Date.now() + 2000; + const { rerender } = render( + , + ); + expect(screen.getByText("Saved capture")).not.toBeNull(); + expect(vi.getTimerCount()).toBe(1); + await act(() => vi.advanceTimersByTime(1000)); + rerender( + , + ); + expect(vi.getTimerCount()).toBe(1); + await act(() => vi.advanceTimersByTime(1000)); + expect(screen.getByText("Saved capture expired")).not.toBeNull(); + expect(screen.getByRole("heading", { name: "Web app" })).not.toBeNull(); + expect( + screen.getByText("Events already loaded in this tab remain available."), + ).not.toBeNull(); + const reload = screen.getByRole("button", { name: "Reload capture" }); + expect(reload.hasAttribute("disabled")).toBe(true); + fireEvent.click(reload); + expect(onReload).not.toHaveBeenCalled(); + expect(vi.getTimerCount()).toBe(0); +}); + +test("never infers or carries forward expiry for an older receiver omitting metadata", async () => { + const { rerender } = render( + , + ); + expect(screen.getByText("Saved capture expired")).not.toBeNull(); + rerender( + , + ); + expect(screen.getByText("Saved capture")).not.toBeNull(); + expect(screen.queryByText(/Saved until/)).toBeNull(); + expect( + screen + .getByRole("button", { name: "Reload capture" }) + .hasAttribute("disabled"), + ).toBe(false); + expect(vi.getTimerCount()).toBe(0); + await act(() => vi.advanceTimersByTime(24 * 60 * 60 * 1000)); + expect(screen.getByText("Saved capture")).not.toBeNull(); +}); + +test("caps expiry timer delays and cleans up the single pending timer on unmount", async () => { + const maxTimeout = 2_147_483_647; + const expiresAt = Date.now() + maxTimeout + 1000; + const { rerender, unmount } = render( + , + ); + expect(vi.getTimerCount()).toBe(1); + await act(() => vi.advanceTimersByTime(maxTimeout)); + expect(screen.getByText("Saved capture")).not.toBeNull(); + expect(vi.getTimerCount()).toBe(1); + await act(() => vi.advanceTimersByTime(1000)); + expect(screen.getByText("Saved capture expired")).not.toBeNull(); + expect(vi.getTimerCount()).toBe(0); + rerender(); + expect(vi.getTimerCount()).toBe(1); + unmount(); + expect(vi.getTimerCount()).toBe(0); +}); + +test("keeps the single reload action with connectivity metadata so capture identity has full width", () => { + render(); + const metadataRow = screen.getByText( + "Connected to local receiver", + ).parentElement; + const reload = screen.getByRole("button", { name: "Reload capture" }); + expect(metadataRow?.contains(reload)).toBe(true); + expect(metadataRow?.textContent).toContain("Last received"); + expect( + screen.getAllByRole("button", { name: "Reload capture" }), + ).toHaveLength(1); +}); diff --git a/apps/local/src/components/capture-header.tsx b/apps/local/src/components/capture-header.tsx new file mode 100644 index 000000000..400baf9a0 --- /dev/null +++ b/apps/local/src/components/capture-header.tsx @@ -0,0 +1,209 @@ +import { LoaderCircle, RefreshCw } from "lucide-react"; +import { type ReactNode, useCallback, useSyncExternalStore } from "react"; +import type { ConnectionState } from "../lib/presentation.ts"; +import type { ViewerSession } from "../lib/session-directory.ts"; +import { parseStreamEndpoint } from "../lib/spotlight.ts"; +import { Badge } from "./ui/badge.tsx"; +import { Button } from "./ui/button.tsx"; + +export type CaptureHeaderProps = { + streamUrl: string | null; + connection: ConnectionState; + isClosed: boolean; + expiresAt?: number; + session?: ViewerSession; + latestEventTime?: number; + sessionPicker?: ReactNode; + onReload: () => void; + isReloading: boolean; + isAwaitingSession?: boolean; +}; + +function validDate(timestamp: number | undefined): Date | undefined { + return typeof timestamp === "number" && + Number.isSafeInteger(timestamp) && + timestamp > 0 && + timestamp <= 8.64e15 + ? new Date(timestamp) + : undefined; +} + +const MAX_TIMEOUT = 2_147_483_647; + +/** A frozen receiver deadline needs one wake-up, with long delays bounded safely. */ +function useCaptureExpired(deadline: number | undefined): boolean { + const subscribe = useCallback( + (notify: () => void) => { + if (deadline === undefined) return () => {}; + let timer: ReturnType | undefined; + const check = () => { + const remaining = deadline - Date.now(); + if (remaining <= 0) { + notify(); + return; + } + timer = setTimeout(check, Math.min(remaining, MAX_TIMEOUT)); + }; + check(); + return () => clearTimeout(timer); + }, + [deadline], + ); + const getSnapshot = useCallback( + () => deadline !== undefined && Date.now() >= deadline, + [deadline], + ); + return useSyncExternalStore(subscribe, getSnapshot, getSnapshot); +} + +const RECEIVER_STATES: Record = { + connected: "Receiver connected", + connecting: "Connecting to receiver", + reconnecting: "Reconnecting to receiver", + failed: "Receiver unavailable", + missing: "Viewer disconnected", + closed: "Receiver replay complete", +}; + +/** Capture lifecycle and viewer transport stay separate, including finite replay. */ +export function CaptureHeader({ + streamUrl, + connection, + isClosed, + expiresAt, + session, + latestEventTime, + sessionPicker, + onReload, + isReloading, + isAwaitingSession = false, +}: CaptureHeaderProps) { + const endpoint = parseStreamEndpoint(streamUrl); + const currentSession = session?.streamUrl === streamUrl ? session : undefined; + const awaiting = isAwaitingSession || !endpoint; + const saved = !awaiting && (isClosed || currentSession?.state === "retained"); + const received = validDate(latestEventTime); + const savedUntil = saved + ? validDate(expiresAt ?? currentSession?.expiresAt) + : undefined; + const expired = useCaptureExpired(savedUntil?.getTime()); + const state = awaiting + ? "Choose a capture" + : saved + ? expired + ? "Saved capture expired" + : "Saved capture" + : connection === "connected" + ? "Capturing" + : connection === "connecting" || connection === "reconnecting" + ? "Connecting" + : "Connection lost"; + const receiverLabel = endpoint ? new URL(endpoint.url).origin : undefined; + const canReload = + !awaiting && + (saved || + connection === "connected" || + connection === "failed" || + connection === "closed" || + isReloading); + const tone = + saved || awaiting + ? "default" + : connection === "connected" + ? "success" + : connection === "failed" + ? "warning" + : "default"; + return ( +
+
+
+
+ {sessionPicker ?? ( +

+ {currentSession?.label ?? + (endpoint?.kind === "remote" + ? "Remote capture" + : "Local capture")} +

+ )} +
+ + + {state} + + +
+ {currentSession?.cwd ? ( +

+ {currentSession.cwd} +

+ ) : null} +
+ + {connection === "connected" + ? endpoint?.kind === "loopback" + ? "Connected to local receiver" + : "Connected to receiver" + : RECEIVER_STATES[connection]} + + {receiverLabel ? ( + + {receiverLabel} + + ) : null} + {received ? ( + + Last received{" "} + + + ) : null} + {savedUntil ? ( + + Saved until{" "} + + + ) : null} + {canReload ? ( + + ) : null} +
+ {expired ? ( +

+ Events already loaded in this tab remain available. +

+ ) : null} +
+
+ ); +} diff --git a/apps/local/src/components/connection-landing.test.tsx b/apps/local/src/components/connection-landing.test.tsx new file mode 100644 index 000000000..4bc414a5c --- /dev/null +++ b/apps/local/src/components/connection-landing.test.tsx @@ -0,0 +1,62 @@ +import { cleanup, fireEvent, render, screen } from "@testing-library/react"; +import { afterEach, expect, test, vi } from "vitest"; +import { ConnectionLanding } from "./connection-landing.tsx"; +import { ReceiverDialog } from "./receiver-dialog.tsx"; + +afterEach(() => { + cleanup(); + vi.restoreAllMocks(); +}); +const form = { + endpoint: "http://localhost:8969/stream", + isConnecting: false, + onConnect: vi.fn(), + onEndpointChange: vi.fn(), + recentConnections: [], + onReconnect: vi.fn(), + onForget: vi.fn(), +}; +test("first run copies a capture command and keeps existing receiver entry secondary", () => { + const writeText = vi.fn().mockResolvedValue(undefined); + Object.defineProperty(navigator, "clipboard", { + configurable: true, + value: { writeText }, + }); + render(); + expect( + screen.getByRole("heading", { name: "Capture a local session" }), + ).not.toBeNull(); + expect(screen.getByText(/Replace /)).not.toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Copy local run command" }), + ); + expect(writeText).toHaveBeenCalledWith( + "sentry local run --session web --open -- ", + ); + const existing = screen.getByText("Connect an existing receiver"); + fireEvent.click(existing); + fireEvent.submit( + screen + .getByRole("button", { name: "Connect", exact: true }) + .closest("form")!, + ); + expect(form.onConnect).toHaveBeenCalledOnce(); +}); + +test("switching receivers preserves the current feed and does not show onboarding", () => { + render( + , + ); + expect( + screen.getByRole("dialog", { name: "Switch receiver" }), + ).not.toBeNull(); + expect(screen.getByText(/current feed stays open/)).not.toBeNull(); + expect( + screen.queryByRole("button", { name: "Copy local run command" }), + ).toBeNull(); +}); diff --git a/apps/local/src/components/connection-landing.tsx b/apps/local/src/components/connection-landing.tsx index 76f217eb9..7eb51a31b 100644 --- a/apps/local/src/components/connection-landing.tsx +++ b/apps/local/src/components/connection-landing.tsx @@ -1,5 +1,5 @@ import { Check, Copy, History, LoaderCircle, Radio, X } from "lucide-react"; -import { type FormEvent, useId, useState } from "react"; +import { type FormEvent, useId } from "react"; import { useCopyToClipboard } from "@uidotdev/usehooks"; import { connectionLabel } from "../lib/connection-history.ts"; import { Button } from "./ui/button.tsx"; @@ -35,8 +35,6 @@ export function ConnectionForm({ }: ConnectionFormProps) { const inputId = useId(); const errorId = useId(); - const [copied, setCopied] = useState(false); - const [, copyToClipboard] = useCopyToClipboard(); const submit = (event: FormEvent) => { event.preventDefault(); if (!isConnecting) onConnect(); @@ -141,28 +139,6 @@ export function ConnectionForm({ ) : null} -
- - sentry local serve --open - - -
); } @@ -175,6 +151,8 @@ export type ConnectionLandingProps = ConnectionFormProps & { export function ConnectionLanding({ phase, ...form }: ConnectionLandingProps) { const titleId = useId(); const isProbing = phase === "probing"; + const [copied, copyToClipboard] = useCopyToClipboard(); + const command = "sentry local run --session web --open -- "; return (

- {isProbing ? "Connecting to receiver" : "Connect a receiver"} + {isProbing ? "Connecting to receiver" : "Capture a local session"}

{isProbing @@ -206,7 +184,35 @@ export function ConnectionLanding({ phase, ...form }: ConnectionLandingProps) {

- +
+

+ Run this in your project to start capturing and open the viewer. + Replace {""} with your app’s development command. +

+ + {command} + + +
+
+

Connect an existing receiver

+ +
); diff --git a/apps/local/src/components/event-command-dialog.test.tsx b/apps/local/src/components/event-command-dialog.test.tsx index 23d592f87..ee977daea 100644 --- a/apps/local/src/components/event-command-dialog.test.tsx +++ b/apps/local/src/components/event-command-dialog.test.tsx @@ -84,7 +84,7 @@ describe("EventCommandDialog", () => { ); expect( - screen.getByRole("dialog", { name: "Search Local events" }), + screen.getByRole("dialog", { name: "Search this session" }), ).not.toBeNull(); expect(screen.getByRole("option", { name: "Traces" })).not.toBeNull(); }); @@ -127,6 +127,7 @@ describe("EventCommandDialog", () => { }); test("offers the current-view filter when a search query is present", () => { + const onFilterView = vi.fn(); render( { navigation={navigation} open query="users" + onFilterView={onFilterView} + currentViewLabel="Logs" onNavigate={vi.fn()} onOpenChange={vi.fn()} onQueryChange={vi.fn()} @@ -141,9 +144,14 @@ describe("EventCommandDialog", () => { />, ); - expect(screen.getByText("Filter current view")).not.toBeNull(); + expect(screen.getByText("Filter Logs")).not.toBeNull(); expect( - screen.getByRole("option", { name: /Filter current view for “users”/ }), + screen.getByRole("option", { name: /Filter Logs for “users”/ }), ).not.toBeNull(); + expect(onFilterView).not.toHaveBeenCalled(); + fireEvent.click( + screen.getByRole("option", { name: /Filter Logs for “users”/ }), + ); + expect(onFilterView).toHaveBeenCalledWith("users"); }); }); diff --git a/apps/local/src/components/event-command-dialog.tsx b/apps/local/src/components/event-command-dialog.tsx index d2b70cc57..3d6e2bc9e 100644 --- a/apps/local/src/components/event-command-dialog.tsx +++ b/apps/local/src/components/event-command-dialog.tsx @@ -29,6 +29,8 @@ type EventCommandDialogProps = { onOpenChange: (open: boolean) => void; onQueryChange: (query: string) => void; onSelectItem: (item: LocalFeedItem) => void; + onFilterView?: (query: string) => void; + currentViewLabel?: string; }; export function EventCommandDialog({ @@ -42,6 +44,8 @@ export function EventCommandDialog({ onOpenChange, onQueryChange, onSelectItem, + onFilterView, + currentViewLabel = "current view", }: EventCommandDialogProps) { useEffect(() => { if (!enabled) { @@ -82,8 +86,8 @@ export function EventCommandDialog({ return ( { if (nextOpen) { onOpenChange(true); @@ -94,6 +98,7 @@ export function EventCommandDialog({ > ))} - {query.trim() ? ( - + {query.trim() && onFilterView ? ( + { + onFilterView(query.trim()); + close(); + }} > diff --git a/apps/local/src/components/event-detail.test.tsx b/apps/local/src/components/event-detail.test.tsx new file mode 100644 index 000000000..13c49802e --- /dev/null +++ b/apps/local/src/components/event-detail.test.tsx @@ -0,0 +1,205 @@ +import { cleanup, fireEvent, render, screen } from "@testing-library/react"; +import { afterEach, expect, test, vi } from "vitest"; +import { decodeEnvelope } from "@/lib/spotlight.ts"; +import { buildTraceGroups } from "@/lib/trace-model.ts"; +import { EventDetail } from "./event-detail.tsx"; + +afterEach(() => { + cleanup(); + vi.unstubAllGlobals(); +}); +function item(type: string, payload: unknown) { + const entry = decodeEnvelope( + JSON.stringify([{}, [[{ type }, payload]]]), + "fixture", + )[0]; + if (!entry) throw new Error("Expected fixture"); + return entry; +} + +test("logs display their message, severity, and structured attributes", () => { + render( + , + ); + expect(screen.getByRole("tabpanel").textContent).toContain("Cache refreshed"); + expect(screen.getByRole("tabpanel").textContent).toContain("info"); + expect( + screen.getByRole("table", { name: "Log attributes" }).textContent, + ).toContain("orders"); + expect(screen.getByRole("button", { name: "Copy Message" })).toBeDefined(); +}); + +test("raw-only SDK payloads default to JSON and reset on a different item", () => { + const { rerender } = render( + , + ); + fireEvent.click(screen.getByRole("tab", { name: "JSON" })); + rerender( + , + ); + expect( + screen.getByRole("tab", { name: "JSON" }).getAttribute("aria-selected"), + ).toBe("true"); + expect(screen.getByTestId("highlighted-json").textContent).toContain( + "sample_rate", + ); + rerender( + , + ); + expect( + screen.getByRole("tab", { name: "Overview" }).getAttribute("aria-selected"), + ).toBe("true"); +}); + +test("arrow navigation wraps between detail tabs and moves keyboard focus", () => { + render(); + const overview = screen.getByRole("tab", { name: "Overview" }); + fireEvent.keyDown(overview, { key: "ArrowLeft" }); + const json = screen.getByRole("tab", { name: "JSON" }); + expect(json.getAttribute("aria-selected")).toBe("true"); + expect(document.activeElement).toBe(json); + fireEvent.keyDown(json, { key: "ArrowRight" }); + expect(overview.getAttribute("aria-selected")).toBe("true"); + expect(document.activeElement).toBe(overview); +}); + +test("raw envelopes retain their recognizable heading and open directly in JSON", () => { + const envelope = { + id: "envelope:1", + type: "envelope", + text: "undecodable source", + payload: "undecodable source", + metadata: { title: "Envelope 1" }, + }; + render(); + expect(screen.getByRole("heading", { name: "Raw envelope" })).toBeDefined(); + expect( + screen.getByRole("tab", { name: "JSON" }).getAttribute("aria-selected"), + ).toBe("true"); + expect(screen.getByTestId("highlighted-json").textContent).toContain( + "undecodable source", + ); +}); + +test("malformed and nested log attributes remain readable inert text", () => { + render( + unsafe()" }, + }, + }, + })} + />, + ); + const attributes = screen.getByRole("table", { name: "Log attributes" }); + expect(attributes.textContent).toContain('"type":"string"'); + expect(attributes.textContent).toContain("null"); + expect(attributes.textContent).toContain("[1,null]"); + expect(attributes.textContent).toContain(""); + expect(attributes.querySelector("script")).toBeNull(); +}); + +test("requests show a compact copyable summary with captured method and URL", () => { + const copied: string[] = []; + vi.stubGlobal("navigator", { + clipboard: { + writeText: async (value: string) => { + copied.push(value); + }, + }, + }); + render( + , + ); + const summary = screen.getByLabelText("Request summary"); + expect(summary.tagName).toBe("DL"); + expect(summary.textContent).toContain("GET"); + expect(summary.textContent).toContain("https://example.test/orders?limit=10"); + expect(summary.textContent).toContain("201"); + expect(summary.textContent).toContain("250ms"); + expect(summary.textContent).toContain("auto.http"); + expect(screen.queryByRole("table", { name: "Event details" })).toBeNull(); + fireEvent.click( + screen.getByRole("button", { name: "Copy Status", description: "201" }), + ); + expect(screen.getByRole("status", { name: "Status copied" })).toBeDefined(); + expect(copied).toEqual(["201"]); +}); + +test("span summaries use captured typed URL attributes without inventing request fields", () => { + render( + , + ); + const summary = screen.getByLabelText("Span summary"); + expect(summary.textContent).toContain("https://example.test/items"); + expect(summary.textContent).toContain("POST"); + expect(summary.textContent).not.toContain("Status"); +}); + +test("repeated parent updates keep one request summary and its waterfall", () => { + const transaction = item("transaction", { + transaction: "GET /orders", + start_timestamp: 1, + timestamp: 2, + request: { status_code: 200 }, + contexts: { trace: { trace_id: "trace", span_id: "root" } }, + }); + const [trace] = buildTraceGroups([transaction]); + const { rerender } = render(); + for (let index = 0; index < 10; index += 1) { + rerender( + undefined} + />, + ); + } + expect(screen.getAllByLabelText("Request summary")).toHaveLength(1); + expect( + screen.getAllByRole("region", { name: "Trace waterfall" }), + ).toHaveLength(1); + expect( + screen.getByRole("button", { name: "Inspect span GET /orders" }), + ).toBeDefined(); +}); diff --git a/apps/local/src/components/event-detail.tsx b/apps/local/src/components/event-detail.tsx new file mode 100644 index 000000000..e5f44f2e0 --- /dev/null +++ b/apps/local/src/components/event-detail.tsx @@ -0,0 +1,249 @@ +import { useCopyToClipboard } from "@uidotdev/usehooks"; +import { useId, useState } from "react"; +import { + attributeFields, + detailRecord, + type DetailField, +} from "./inspector-data.ts"; +import type { LocalFeedItem } from "@/lib/spotlight.ts"; +import { getEventMetadata } from "@/lib/spotlight.ts"; +import { getEventExceptions } from "@/lib/exceptions.ts"; +import type { TraceGroup } from "@/lib/trace-model.ts"; +import { Badge } from "./ui/badge.tsx"; +import { ExceptionOverview } from "./exception-overview.tsx"; +import { TraceWaterfall } from "./trace-waterfall.tsx"; +import { + DetailFields, + InspectorTabs, + RelatedTelemetry, +} from "./span-detail.tsx"; + +type EventDetailProps = { + item: LocalFeedItem; + trace?: TraceGroup; + onSelectSpan?: (traceId: string, spanId: string) => void; + onSelectRelatedItem?: (item: LocalFeedItem) => void; +}; + +function formatTimestamp(timestamp: LocalFeedItem["timestamp"]) { + if (timestamp === undefined) return "unknown time"; + const date = new Date( + typeof timestamp === "number" && timestamp < 1_000_000_000_000 + ? timestamp * 1_000 + : timestamp, + ); + return Number.isNaN(date.getTime()) + ? String(timestamp) + : date.toLocaleTimeString(); +} + +function CompactSummary({ + label, + fields, +}: { + label: string; + fields: DetailField[]; +}) { + const [copiedField, setCopiedField] = useState(); + const [, copy] = useCopyToClipboard(); + const id = useId(); + if (!fields.length) return null; + return ( + <> +
+ {fields.map((field, index) => ( +
+
{field.label}
+
+ +
+
+ ))} +
+ {copiedField ? ( + + {copiedField} copied + + ) : null} + + ); +} + +/** Prefer the useful view for each telemetry type; keep its full original JSON one tab away. */ +export function EventDetail({ + item, + trace, + onSelectSpan, + onSelectRelatedItem, +}: EventDetailProps) { + const metadata = item.metadata ?? getEventMetadata(item.payload, item.type); + const payload = detailRecord(item.payload); + const exceptions = + item.type === "event" ? getEventExceptions(item.payload) : []; + const hasOverview = [ + "event", + "log", + "transaction", + "span", + "feedback", + ].includes(item.type); + const message = + metadata.message ?? + (item.type === "log" + ? typeof payload.body === "string" + ? payload.body + : metadata.title + : undefined); + const fields: DetailField[] = [ + ...(message ? [{ label: "Message", value: message }] : []), + ...(item.type === "log" && metadata.level + ? [{ label: "Level", value: metadata.level }] + : []), + ...(metadata.statusCode === undefined + ? [] + : [{ label: "Status", value: String(metadata.statusCode) }]), + ...(metadata.durationMs === undefined + ? [] + : [ + { + label: "Duration", + value: `${metadata.durationMs.toFixed(metadata.durationMs < 10 ? 2 : 0)}ms`, + }, + ]), + ...(metadata.origin + ? [{ label: "Origin", value: metadata.origin, code: true }] + : []), + ]; + const isRequestOrSpan = item.type === "transaction" || item.type === "span"; + const request = detailRecord(payload.request); + const traceData = detailRecord( + detailRecord(detailRecord(payload.contexts).trace).data, + ); + const data = detailRecord(payload.data); + const urlAttribute = detailRecord(payload.attributes)["url.full"]; + const capturedURL = [ + request.url, + traceData["http.url"], + data["http.url"], + detailRecord(urlAttribute).value, + urlAttribute, + ].find( + (value): value is string => typeof value === "string" && value.length > 0, + ); + const summaryFields: DetailField[] = [ + ...(metadata.method ? [{ label: "Method", value: metadata.method }] : []), + ...fields.filter((field) => field.label !== "Message"), + ...(capturedURL ? [{ label: "URL", value: capturedURL }] : []), + ]; + const detailFields = isRequestOrSpan + ? fields.filter((field) => field.label === "Message") + : fields; + const attributes = attributeFields(payload.attributes); + return ( +
+
+
+ + {item.type === "envelope" + ? "Envelope" + : (metadata.operation ?? item.type)} + +

+ {item.type === "envelope" ? "Raw envelope" : metadata.title} +

+
+ +
+ + {exceptions.length ? ( + + ) : null} + {isRequestOrSpan ? ( + + ) : null} + + {attributes.length ? ( +
+

Attributes

+ +
+ ) : null} + {!fields.length && + !(isRequestOrSpan && summaryFields.length) && + !exceptions.length && + !attributes.length ? ( +

+ No additional event details. +

+ ) : null} + {trace ? ( + <> + onSelectSpan(trace.id, spanId) + : undefined + } + /> + + + ) : null} + + } + /> +
+ ); +} diff --git a/apps/local/src/components/inspector-data.ts b/apps/local/src/components/inspector-data.ts new file mode 100644 index 000000000..6896d5f70 --- /dev/null +++ b/apps/local/src/components/inspector-data.ts @@ -0,0 +1,22 @@ +export type DetailField = { label: string; value: string; code?: boolean }; + +export function detailRecord(value: unknown): Record { + return typeof value === "object" && value !== null && !Array.isArray(value) + ? (value as Record) + : {}; +} + +export function attributeFields(value: unknown): DetailField[] { + return Object.entries(detailRecord(value)).map(([label, attribute]) => { + const record = detailRecord(attribute); + const content = "value" in record ? record.value : attribute; + return { + label, + value: + typeof content === "string" + ? content + : (JSON.stringify(content) ?? String(content)), + code: true, + }; + }); +} diff --git a/apps/local/src/components/local-settings.test.tsx b/apps/local/src/components/local-settings.test.tsx new file mode 100644 index 000000000..e25c893b5 --- /dev/null +++ b/apps/local/src/components/local-settings.test.tsx @@ -0,0 +1,43 @@ +import { cleanup, render, screen } from "@testing-library/react"; +import { afterEach, expect, test, vi } from "vitest"; +import { LocalSettings } from "./local-settings.tsx"; + +afterEach(cleanup); +const props = { + open: true, + onOpenChange: vi.fn(), + triggerRef: { current: null }, + streamUrl: "http://127.0.0.1:8969/stream", + limit: 500, + count: 8, + editable: false, + supported: true, + captureLabel: "Web app", +}; + +test("separates global appearance, capture capacity, and the existing save deadline", () => { + const expiresAt = 1793010600000; + render(); + expect(screen.getByRole("heading", { name: "Appearance" })).not.toBeNull(); + expect(screen.getByText(/Applies to all captures/)).not.toBeNull(); + expect( + screen.getByRole("heading", { name: "History capacity" }), + ).not.toBeNull(); + expect(screen.getByText("For capture: Web app")).not.toBeNull(); + expect( + screen.getByText(/An SDK envelope can contain several events/), + ).not.toBeNull(); + expect(screen.getByText("Saved until")).not.toBeNull(); + expect(document.querySelector("time")?.getAttribute("dateTime")).toBe( + "2026-10-26T10:30:00.000Z", + ); + expect(screen.queryByRole("spinbutton")).toBeNull(); +}); + +test.each([undefined, Number.NaN, Number.POSITIVE_INFINITY])( + "does not invent a saved deadline from %s", + (expiresAt) => { + render(); + expect(screen.queryByText("Saved until")).toBeNull(); + }, +); diff --git a/apps/local/src/components/local-settings.tsx b/apps/local/src/components/local-settings.tsx index 16a43d9fa..e320c05f3 100644 --- a/apps/local/src/components/local-settings.tsx +++ b/apps/local/src/components/local-settings.tsx @@ -27,6 +27,8 @@ type Props = { editable: boolean; supported: boolean; unavailableReason?: string; + captureLabel?: string; + expiresAt?: number; }; export function LocalSettings({ @@ -34,9 +36,18 @@ export function LocalSettings({ onOpenChange, supported, triggerRef, + captureLabel, + expiresAt, ...retention }: Props) { const { theme, resolvedTheme, setTheme } = useTheme(); + const savedUntil = + typeof expiresAt === "number" && + Number.isSafeInteger(expiresAt) && + expiresAt > 0 && + expiresAt <= 8.64e15 + ? new Date(expiresAt) + : undefined; return ( Settings - Appearance and session retention. + App appearance and capture history.
-

Appearance

+

Appearance

{theme === "system" && resolvedTheme ? (

System appearance: {resolvedTheme === "dark" ? "Dark" : "Light"}

) : null}
+

+ Applies to all captures in this viewer. +

-
+
+

History capacity

+

+ For capture: {captureLabel ?? "current receiver"} +

{supported ? ( ) : ( @@ -92,6 +110,16 @@ export function LocalSettings({

)}
+ {savedUntil ? ( +
+
Saved until
+
+ +
+
+ ) : null}
); diff --git a/apps/local/src/components/receiver-controls.test.tsx b/apps/local/src/components/receiver-controls.test.tsx index 720d63b3e..dde094fda 100644 --- a/apps/local/src/components/receiver-controls.test.tsx +++ b/apps/local/src/components/receiver-controls.test.tsx @@ -28,10 +28,10 @@ test("mobile receiver actions dismiss with Escape and restore keyboard focus", a onClear={vi.fn()} />, ); - const trigger = screen.getByRole("button", { name: "Receiver options" }); + const trigger = screen.getByRole("button", { name: "Capture actions" }); fireEvent.click(trigger); const dialog = await screen.findByRole("dialog", { - name: "Receiver actions", + name: "Capture actions", }); fireEvent.keyDown(dialog, { key: "Escape" }); await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull()); @@ -73,13 +73,13 @@ test("mobile Settings opens the shared modal without its closing popover stealin ); } render(); - const trigger = screen.getByRole("button", { name: "Receiver options" }); + const trigger = screen.getByRole("button", { name: "Capture actions" }); fireEvent.click(trigger); fireEvent.click( await screen.findByRole("button", { name: "Settings", exact: true }), ); await screen.findByRole("dialog", { name: "Settings", exact: true }); - expect(screen.queryByRole("dialog", { name: "Receiver actions" })).toBeNull(); + expect(screen.queryByRole("dialog", { name: "Capture actions" })).toBeNull(); await waitFor(() => expect(document.activeElement).toBe( screen.getByRole("button", { name: "Light", exact: true }), @@ -104,12 +104,12 @@ test("mobile actions prevent empty clears and duplicate close requests", async ( onAddReceiver={add} />, ); - const trigger = screen.getByRole("button", { name: "Receiver options" }); + const trigger = screen.getByRole("button", { name: "Capture actions" }); fireEvent.click(trigger); const clearButton = await screen.findByRole("button", { - name: "Clear all events", + name: "Clear view", }); - const closeButton = screen.getByRole("button", { name: "Close session" }); + const closeButton = screen.getByRole("button", { name: "Stop capture" }); expect((clearButton as HTMLButtonElement).disabled).toBe(true); expect((closeButton as HTMLButtonElement).disabled).toBe(true); fireEvent.click(clearButton); @@ -117,7 +117,7 @@ test("mobile actions prevent empty clears and duplicate close requests", async ( expect(clear).not.toHaveBeenCalled(); expect(close).not.toHaveBeenCalled(); fireEvent.click( - screen.getByRole("button", { name: "Add receiver", exact: true }), + screen.getByRole("button", { name: "Switch receiver", exact: true }), ); expect(add).toHaveBeenCalledWith(trigger); await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull()); @@ -136,12 +136,47 @@ test("mobile disconnect returns to connections without clearing or closing", asy onDisconnect={disconnect} />, ); - fireEvent.click(screen.getByRole("button", { name: "Receiver options" })); + fireEvent.click(screen.getByRole("button", { name: "Capture actions" })); fireEvent.click( - await screen.findByRole("button", { name: "Disconnect receiver" }), + await screen.findByRole("button", { name: "Disconnect viewer" }), ); expect(disconnect).toHaveBeenCalledOnce(); expect(clear).not.toHaveBeenCalled(); expect(close).not.toHaveBeenCalled(); await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull()); }); + +test("capture deletion requires its own capability and receives the stable trigger", async () => { + const clear = vi.fn(); + const remove = vi.fn(); + const { rerender } = render( + , + ); + const trigger = screen.getByRole("button", { name: "Capture actions" }); + fireEvent.click(trigger); + expect( + screen.queryByRole("button", { name: "Delete captured events" }), + ).toBeNull(); + fireEvent.click(screen.getByRole("button", { name: "Clear view" })); + expect(clear).toHaveBeenCalledOnce(); + expect(remove).not.toHaveBeenCalled(); + rerender( + , + ); + fireEvent.click(trigger); + fireEvent.click( + await screen.findByRole("button", { name: "Delete captured events" }), + ); + expect(remove).toHaveBeenCalledWith(trigger); + expect(trigger.isConnected).toBe(true); + expect(clear).toHaveBeenCalledOnce(); +}); diff --git a/apps/local/src/components/receiver-controls.tsx b/apps/local/src/components/receiver-controls.tsx index 69f3f2681..cd5299ee0 100644 --- a/apps/local/src/components/receiver-controls.tsx +++ b/apps/local/src/components/receiver-controls.tsx @@ -3,6 +3,7 @@ import { Radio, Settings, Trash2, + Eraser, X, Unplug, type LucideIcon, @@ -16,6 +17,7 @@ type ReceiverControlsProps = { connection: ConnectionPresentation; retainedItemCount: number; onClear: () => void; + onDeleteCapturedEvents?: (trigger: HTMLButtonElement) => void; onDisconnect?: () => void; isClearing?: boolean; onOpenSettings?: (trigger: HTMLButtonElement) => void; @@ -27,10 +29,10 @@ type ReceiverControlsProps = { type ReceiverAction = { label: string; Icon: LucideIcon; - onClick: () => void; + onClick?: () => void; + onOpenDialog?: (trigger: HTMLButtonElement) => void; disabled?: boolean; destructive?: boolean; - opensDialog?: boolean; }; /** Mobile receiver actions share the desktop dialogs and their focus behavior. */ @@ -38,6 +40,7 @@ export function ReceiverControls({ connection, retainedItemCount, onClear, + onDeleteCapturedEvents, onDisconnect, isClearing = false, onOpenSettings, @@ -53,12 +56,9 @@ export function ReceiverControls({ ...(onAddReceiver ? [ { - label: "Add receiver", + label: "Switch receiver", Icon: Radio, - opensDialog: true, - onClick: () => { - if (triggerRef.current) onAddReceiver(triggerRef.current); - }, + onOpenDialog: onAddReceiver, }, ] : []), @@ -67,24 +67,31 @@ export function ReceiverControls({ { label: "Settings", Icon: Settings, - opensDialog: true, - onClick: () => { - if (triggerRef.current) onOpenSettings(triggerRef.current); - }, + onOpenDialog: onOpenSettings, }, ] : []), { - label: "Clear all events", - Icon: Trash2, + label: "Clear view", + Icon: Eraser, onClick: onClear, disabled: retainedItemCount === 0 || isClearing, - destructive: true, }, + ...(onDeleteCapturedEvents + ? [ + { + label: "Delete captured events", + Icon: Trash2, + destructive: true, + disabled: isClearing, + onOpenDialog: onDeleteCapturedEvents, + }, + ] + : []), ...(onCloseSession ? [ { - label: "Close session", + label: "Stop capture", Icon: X, onClick: onCloseSession, disabled: isClosingSession || isClearing, @@ -93,7 +100,7 @@ export function ReceiverControls({ ] : []), ...(onDisconnect - ? [{ label: "Disconnect receiver", Icon: Unplug, onClick: onDisconnect }] + ? [{ label: "Disconnect viewer", Icon: Unplug, onClick: onDisconnect }] : []), ]; const dotClass = @@ -109,23 +116,18 @@ export function ReceiverControls({ ref={triggerRef} type="button" variant="outline" - aria-label="Receiver options" + aria-label="Capture actions" title={connection.label} className="h-8 gap-2 px-2.5" > - + {showStatusRole ? ( + ) : null} + Capture actions