+ Events already loaded in this tab remain available.
+
+ ) : null}
+
+
+ );
+}
diff --git a/apps/local/src/components/cli-logo.tsx b/apps/local/src/components/cli-logo.tsx
new file mode 100644
index 000000000..3e1bc1a21
--- /dev/null
+++ b/apps/local/src/components/cli-logo.tsx
@@ -0,0 +1,14 @@
+import logo from "../../../cli-docs/src/assets/logo.svg";
+
+/** The CLI brand asset shared with its documentation site. */
+export function CliLogo() {
+ return (
+
+ );
+}
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 badf85391..7eb51a31b 100644
--- a/apps/local/src/components/connection-landing.tsx
+++ b/apps/local/src/components/connection-landing.tsx
@@ -1,43 +1,164 @@
-import { Check, Copy, LoaderCircle, Radio } from "lucide-react";
-import { type FormEvent, useState } from "react";
+import { Check, Copy, History, LoaderCircle, Radio, X } from "lucide-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";
+import { Input } from "./ui/input.tsx";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "./ui/tooltip.tsx";
-export type ConnectionLandingProps = {
+export type ConnectionFormProps = {
endpoint: string;
error?: string;
isConnecting: boolean;
- phase: "probing" | "failed" | "editing";
onConnect: () => 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) {
- const [copied, setCopied] = useState(false);
- const [, copyToClipboard] = useCopyToClipboard();
- const isProbing = phase === "probing";
-
+ recentConnections,
+ onReconnect,
+ onForget,
+}: ConnectionFormProps) {
+ const inputId = useId();
+ const errorId = useId();
const submit = (event: FormEvent) => {
event.preventDefault();
- if (isConnecting) {
- return;
- }
- onConnect();
+ if (!isConnecting) onConnect();
};
+ return (
+
+
+ {recentConnections.length ? (
+
+
+
+ Past connections
+
+
+
+ {recentConnections.map((url) => (
+
+
+
+
+
+
+ Forget connection
+
+
+ ))}
+
+
+
+ ) : null}
+
+ );
+}
+export type ConnectionLandingProps = ConnectionFormProps & {
+ phase: "probing" | "failed" | "editing";
+};
+
+/** A focused landing when no captured events are available to inspect. */
+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 (
-
+
-
- Sentry Local
-
-
- {isProbing ? "Looking for Sentry Local" : "Connect a receiver"}
+
+ {isProbing ? "Connecting to receiver" : "Capture a local session"}
{isProbing
- ? "Checking the selected receiver."
- : "Connect this read-only viewer to an event stream."}
+ ? "Establishing a connection…"
+ : "Inspect events from your local development sessions."}
-
- {error ? (
-
- {error}
+
+
+ Run this in your project to start capturing and open the viewer.
+ Replace {""} with your app’s development command.
- ) : null}
-
-
-
-
- Defaults to your local receiver. You can paste another local or HTTPS
- stream above.
-
+ App frames: gold · System frames: gray · Select a frame to zoom. Charts
+ show up to 32 levels and 2,500 nodes; the function table includes all
+ parsed frames.
+
+ {profile.sampleCount.toLocaleString()} samples ·{" "}
+ {profile.durationMs === undefined
+ ? "Timing not captured"
+ : `${profile.durationMs.toFixed(2)} ms observed`}
+ . Time uses adjacent samples on the selected thread; the final
+ sample has no inferred duration. Stacks are limited to 256 frames.
+
+ {linked.length ? (
+
+ {linked.map((trace) => (
+
+ ))}
+
+ ) : (
+
+ No associated trace is available in this capture.
+
+ Capacity is measured in SDK envelopes. An SDK envelope can contain
+ several events, such as logs, errors, or a transaction. This limit does
+ not extend how long a saved capture is available.
+
- 
+