@stainlessdev/docs-xray 0.1.0

package/src/components/XRayPage.tsx

@@ -0,0 +1,1243 @@
+import { useState, useEffect, useRef, useMemo, type MouseEvent } from "react";
+import {
+  createHighlighter,
+  type HighlighterGeneric,
+  type BundledLanguage,
+  type BundledTheme,
+} from "shiki";
+import {
+  TypescriptIcon,
+  PythonIcon,
+  GoIcon,
+  JavaIcon,
+  KotlinIcon,
+  RubyIcon,
+  CSharpIcon,
+} from "@stainless-api/docs-ui/components/icons";
+
+import type {
+  XrayRequestLogDetail,
+  DetailTab,
+  EndpointMap,
+  ParsedUserAgent,
+} from "../types";
+import {
+  parseUserAgent,
+  formatUserAgentSummary,
+  getEndpointInfo,
+  getStatusText,
+  getStatusClass,
+  formatRelativeTime,
+  formatTime,
+  formatDate,
+  saveSeenIdsToStorage,
+  savePendingCountToStorage,
+} from "../utils";
+
+const POLL_INTERVAL = 2000;
+
+type FetchResult = {
+  data: XrayRequestLogDetail[];
+  status: "ok" | "unauthorized" | "error";
+};
+
+async function fetchRecentRequests(xrayApi: string): Promise<FetchResult> {
+  try {
+    const response = await fetch(`${xrayApi}/v1/request_logs`, {
+      credentials: "include",
+    });
+    if (response.status === 401) {
+      return { data: [], status: "unauthorized" };
+    }
+    if (!response.ok) {
+      return { data: [], status: "error" };
+    }
+    const json = await response.json();
+    return { data: json.data ?? [], status: "ok" };
+  } catch {
+    return { data: [], status: "error" };
+  }
+}
+
+async function fetchRequestLogDetail(
+  xrayApi: string,
+  requestId: string,
+): Promise<XrayRequestLogDetail | null> {
+  try {
+    const response = await fetch(`${xrayApi}/v1/request_logs/${requestId}`, {
+      credentials: "include",
+    });
+    if (!response.ok) return null;
+    return await response.json();
+  } catch {
+    return null;
+  }
+}
+
+type SessionUser = {
+  user: {
+    name: string;
+    ip: string;
+  };
+};
+
+type SessionResult = {
+  data: SessionUser | null;
+  status: "ok" | "unauthorized" | "error";
+};
+
+async function fetchSessionUser(xrayApi: string): Promise<SessionResult> {
+  try {
+    const response = await fetch(`${xrayApi}/api/docs-session-user`, {
+      credentials: "include",
+    });
+    if (response.status === 401) {
+      return { data: null, status: "unauthorized" };
+    }
+    if (!response.ok) {
+      return { data: null, status: "error" };
+    }
+    const json = await response.json();
+    return { data: json, status: "ok" };
+  } catch {
+    return { data: null, status: "error" };
+  }
+}
+
+// Shiki highlighter with same theme as docs
+const stainlessDocsJsonTheme = {
+  name: "stainless-docs-json",
+  colors: {
+    "editor.background": "var(--stl-color-background)",
+    "editor.foreground": "var(--stl-color-foreground)",
+  },
+  tokenColors: [
+    {
+      scope: ["comment", "punctuation.definition.comment"],
+      settings: { foreground: "var(--stl-color-foreground-muted)" },
+    },
+    {
+      scope: ["constant.numeric", "constant.language"],
+      settings: { foreground: "var(--stl-color-orange-foreground)" },
+    },
+    {
+      scope: ["string", "string.quoted", "string.template"],
+      settings: { foreground: "var(--stl-color-green-foreground)" },
+    },
+    {
+      scope: ["support.type", "meta"],
+      settings: { foreground: "var(--stl-color-foreground)" },
+    },
+    {
+      scope: ["meta"],
+      settings: { foreground: "var(--stl-color-foreground-muted)" },
+    },
+    {
+      scope: ["support.type.builtin"],
+      settings: { foreground: "var(--stl-color-purple-foreground)" },
+    },
+  ],
+} as const;
+
+let highlighterPromise: Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> | null = null;
+
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: [stainlessDocsJsonTheme],
+      langs: ["json"],
+    });
+  }
+  return highlighterPromise;
+}
+
+function formatJson(body: string): string {
+  try {
+    const parsed = JSON.parse(body);
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return body;
+  }
+}
+
+function HighlightedJson({ body }: { body: string }) {
+  const [highlighted, setHighlighted] = useState<string>("");
+  const formatted = useMemo(() => formatJson(body), [body]);
+
+  useEffect(() => {
+    let cancelled = false;
+    getHighlighter().then((highlighter) => {
+      if (cancelled) return;
+      const html = highlighter.codeToHtml(formatted, {
+        lang: "json",
+        themes: {
+          light: "stainless-docs-json",
+          dark: "stainless-docs-json",
+        },
+      });
+      setHighlighted(html);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [formatted]);
+
+  if (!highlighted) {
+    return (
+      <pre className="xray-page__detail-code">
+        <code>{formatted}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <div
+      className="xray-page__detail-code"
+      dangerouslySetInnerHTML={{ __html: highlighted }}
+    />
+  );
+}
+
+function HeadersList({
+  headers,
+}: {
+  headers: Record<string, string[]> | null;
+}) {
+  if (!headers || Object.keys(headers).length === 0) {
+    return <div className="xray-page__detail-empty">No headers captured.</div>;
+  }
+
+  const canonicalizeHeaderName = (name: string) =>
+    name
+      .split("-")
+      .map((part) =>
+        part ? part[0].toUpperCase() + part.slice(1).toLowerCase() : part,
+      )
+      .join("-");
+  const entries = Object.entries(headers)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([name, values]) => [canonicalizeHeaderName(name), values] as const);
+
+  return (
+    <div className="xray-page__headers">
+      {entries.map(([name, values]) => (
+        <div className="xray-page__header-row" key={name}>
+          <span className="xray-page__header-name">{name}</span>
+          <span className="xray-page__header-value">{values.join(", ")}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Inline SVG icons
+const TerminalIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="4 17 10 11 4 5" />
+    <line x1="12" y1="19" x2="20" y2="19" />
+  </svg>
+);
+
+const GlobeIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="2" y1="12" x2="22" y2="12" />
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+  </svg>
+);
+
+const CopyIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+);
+
+const PanelLeftIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="3" y="4" width="18" height="16" rx="2" />
+    <line x1="9" y1="4" x2="9" y2="20" />
+  </svg>
+);
+
+const PanelRightIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="3" y="4" width="18" height="16" rx="2" />
+    <line x1="15" y1="4" x2="15" y2="20" />
+  </svg>
+);
+
+const QuestionIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+    <line x1="12" y1="17" x2="12.01" y2="17" />
+  </svg>
+);
+
+const CodeIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="16 18 22 12 16 6" />
+    <polyline points="8 6 2 12 8 18" />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+);
+
+const RefreshIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="23 4 23 10 17 10" />
+    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+  </svg>
+);
+
+const MapPinIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="var(--stl-color-accent)"
+    stroke="var(--stl-color-accent)"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+    <circle cx="12" cy="10" r="3" fill="white" stroke="white" />
+  </svg>
+);
+
+function UserAgentIcon({ parsed }: { parsed: ParsedUserAgent }) {
+  if (parsed.type === "curl") {
+    return <TerminalIcon />;
+  }
+  if (parsed.type === "browser") {
+    return <GlobeIcon />;
+  }
+  if (parsed.type === "sdk" && parsed.language) {
+    switch (parsed.language) {
+      case "TypeScript":
+        return <TypescriptIcon className="xray-page__lang-icon" />;
+      case "Python":
+        return <PythonIcon className="xray-page__lang-icon" />;
+      case "Go":
+        return <GoIcon className="xray-page__lang-icon" />;
+      case "Java":
+        return <JavaIcon className="xray-page__lang-icon" />;
+      case "Kotlin":
+        return <KotlinIcon className="xray-page__lang-icon" />;
+      case "Ruby":
+        return <RubyIcon className="xray-page__lang-icon" />;
+      case "C#":
+        return <CSharpIcon className="xray-page__lang-icon" />;
+      default:
+        return <CodeIcon />;
+    }
+  }
+  return <QuestionIcon />;
+}
+
+export type XRayPageProps = {
+  basePath?: string;
+};
+
+export default function XRayPage({ basePath = "/xray" }: XRayPageProps) {
+  const [requests, setRequests] = useState<XrayRequestLogDetail[]>([]);
+  const [pendingRequests, setPendingRequests] = useState<
+    XrayRequestLogDetail[]
+  >([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [selectedRequest, setSelectedRequest] =
+    useState<XrayRequestLogDetail | null>(null);
+  const [isListCollapsed, setIsListCollapsed] = useState(false);
+  const [detailTab, setDetailTab] = useState<DetailTab>("response");
+  const [isRequestHeadersOpen, setIsRequestHeadersOpen] = useState(true);
+  const [isResponseHeadersOpen, setIsResponseHeadersOpen] = useState(true);
+  const [showCopied, setShowCopied] = useState(false);
+  const [payloadCopied, setPayloadCopied] = useState<DetailTab | null>(null);
+  const [hasLoadedInitial, setHasLoadedInitial] = useState(false);
+  const [authState, setAuthState] = useState<
+    "loading" | "authenticated" | "unauthorized"
+  >("loading");
+  const [currentUserIp, setCurrentUserIp] = useState<string | null>(null);
+  const seenRequestIds = useRef<Set<string>>(new Set());
+  const basePathRef = useRef<string>(basePath.replace(/\/$/, "") || "/");
+
+  const handleLoadPendingRequests = () => {
+    if (pendingRequests.length === 0) return;
+    // Mark pending requests as seen when user loads them
+    const newSeenIds = new Set(seenRequestIds.current);
+    pendingRequests.forEach((req) => newSeenIds.add(req.request_id));
+    saveSeenIdsToStorage(newSeenIds);
+
+    setRequests((prev) => [...pendingRequests, ...prev]);
+    setPendingRequests([]);
+  };
+
+  const handleCopyRequestId = (requestId: string) => {
+    navigator.clipboard.writeText(requestId);
+    setShowCopied(true);
+    setTimeout(() => setShowCopied(false), 1500);
+  };
+
+  const handleCopyPayload = (payload: string, tab: DetailTab) => {
+    if (!payload) return;
+    navigator.clipboard.writeText(payload);
+    setPayloadCopied(tab);
+    setTimeout(() => setPayloadCopied(null), 1500);
+  };
+
+  const getRequestIdFromUrl = () => {
+    const params = new URLSearchParams(window.location.search);
+    return params.get("requestId");
+  };
+
+  const updateUrl = (requestId: string | null, replace = false) => {
+    if (typeof window === "undefined") return;
+    const base = basePathRef.current || "/xray";
+    const url = new URL(window.location.href);
+    url.pathname = base;
+    if (requestId) {
+      url.searchParams.set("requestId", requestId);
+    } else {
+      url.searchParams.delete("requestId");
+    }
+    const nextUrl = url.pathname + url.search;
+    if (window.location.pathname + window.location.search === nextUrl) return;
+    const method = replace ? "replaceState" : "pushState";
+    window.history[method]({}, "", nextUrl);
+  };
+
+  const loadRequestById = async (requestId: string, replace = false) => {
+    const xrayApi = window.__XRAY_API__;
+    if (!xrayApi) return;
+
+    setIsSearching(true);
+    setSearchError(null);
+    const detail = await fetchRequestLogDetail(xrayApi, requestId);
+
+    if (detail) {
+      setSelectedRequest(detail);
+      updateUrl(detail.request_id, replace);
+    } else {
+      setSearchError("Request not found");
+      setTimeout(() => setSearchError(null), 3000);
+    }
+
+    setIsSearching(false);
+  };
+
+  // Auto-search if requestId is in URL query params
+  useEffect(() => {
+    const xrayApi = window.__XRAY_API__;
+    if (!xrayApi) return;
+
+    const requestId = getRequestIdFromUrl();
+    if (!requestId) return;
+
+    loadRequestById(requestId, true);
+  }, []);
+
+  useEffect(() => {
+    if (selectedRequest) {
+      setDetailTab("response");
+      setPayloadCopied(null);
+    }
+  }, [selectedRequest?.request_id]);
+
+  useEffect(() => {
+    if (!selectedRequest) {
+      setIsListCollapsed(false);
+    }
+  }, [selectedRequest]);
+
+  // Sync pending count to storage so badge can show it
+  useEffect(() => {
+    savePendingCountToStorage(pendingRequests.length);
+  }, [pendingRequests.length]);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      const requestId = getRequestIdFromUrl();
+      if (!requestId) {
+        setSelectedRequest(null);
+        return;
+      }
+      if (selectedRequest?.request_id === requestId) return;
+      loadRequestById(requestId, true);
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [selectedRequest?.request_id]);
+
+  // Poll for requests
+  useEffect(() => {
+    const xrayApi = window.__XRAY_API__;
+    if (!xrayApi) {
+      setHasLoadedInitial(true);
+      setAuthState("authenticated"); // No API configured, don't show login banner
+      return;
+    }
+
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+    let isUnauthorized = false;
+
+    const poll = async (isInitial = false) => {
+      // Skip polling if tab is not visible (unless initial load)
+      if (!isInitial && document.visibilityState !== "visible") {
+        return;
+      }
+
+      const result = await fetchRecentRequests(xrayApi);
+
+      if (result.status === "unauthorized") {
+        setAuthState("unauthorized");
+        isUnauthorized = true;
+        if (isInitial) {
+          setHasLoadedInitial(true);
+        }
+        // Stop polling on 401
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        return;
+      }
+
+      const allRequests = result.data;
+      const newRequests = allRequests.filter(
+        (req) => !seenRequestIds.current.has(req.request_id),
+      );
+
+      if (newRequests.length > 0) {
+        newRequests.forEach((req) =>
+          seenRequestIds.current.add(req.request_id),
+        );
+        if (isInitial) {
+          // On initial load, show all requests directly and mark as seen
+          setRequests((prev) => [...newRequests, ...prev]);
+          // Mark all initial requests as seen in storage (badge will show 0)
+          saveSeenIdsToStorage(seenRequestIds.current);
+        } else {
+          // After initial load, add to pending (NOT marked as seen yet)
+          // Badge will show these as new when user navigates away
+          setPendingRequests((prev) => [...newRequests, ...prev]);
+        }
+      }
+      if (isInitial) {
+        setHasLoadedInitial(true);
+      }
+    };
+
+    // Poll immediately when tab becomes visible
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible" && !isUnauthorized) {
+        poll();
+      }
+    };
+
+    const startPolling = () => {
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+      poll(true);
+      intervalId = setInterval(poll, POLL_INTERVAL);
+    };
+
+    // First check session, then start polling if authenticated
+    fetchSessionUser(xrayApi).then((sessionResult) => {
+      if (sessionResult.status === "unauthorized") {
+        setAuthState("unauthorized");
+        setHasLoadedInitial(true);
+        isUnauthorized = true;
+        return;
+      }
+
+      if (sessionResult.data?.user?.ip) {
+        setCurrentUserIp(sessionResult.data.user.ip);
+      }
+
+      setAuthState("authenticated");
+      startPolling();
+    });
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);
+
+  const handleSearch = async () => {
+    const requestId = searchQuery.trim();
+    if (!requestId) return;
+
+    const xrayApi = window.__XRAY_API__;
+    if (!xrayApi) return;
+
+    setIsSearching(true);
+    setSearchError(null);
+
+    const detail = await fetchRequestLogDetail(xrayApi, requestId);
+
+    if (detail) {
+      setSelectedRequest(detail);
+      setSearchQuery("");
+      updateUrl(detail.request_id);
+    } else {
+      setSearchError("Request not found");
+      setTimeout(() => setSearchError(null), 3000);
+    }
+
+    setIsSearching(false);
+  };
+
+  const hasSelection = selectedRequest !== null;
+  const isListCollapsedActive = hasSelection && isListCollapsed;
+
+  const getRequestHref = (requestId: string) => {
+    const base = basePathRef.current || "/xray";
+    return `${base}?requestId=${encodeURIComponent(requestId)}`;
+  };
+
+  const baseHref = basePathRef.current || "/xray";
+
+  const isModifiedClick = (event: MouseEvent<HTMLAnchorElement>) =>
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey ||
+    event.button !== 0;
+
+  const handleRequestLinkClick = (
+    event: MouseEvent<HTMLAnchorElement>,
+    req: XrayRequestLogDetail,
+  ) => {
+    if (isModifiedClick(event)) return;
+    event.preventDefault();
+    setSelectedRequest(req);
+    updateUrl(req.request_id);
+  };
+
+  const handleCloseLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (isModifiedClick(event)) return;
+    event.preventDefault();
+    setSelectedRequest(null);
+    setIsListCollapsed(false);
+    updateUrl(null);
+  };
+
+  const detailTabs: { id: DetailTab; label: string }[] = [
+    { id: "request", label: "Request" },
+    { id: "response", label: "Response" },
+  ];
+
+  const renderHeadersBlock = (
+    headers: Record<string, string[]> | null,
+    emptyMessage: string,
+    isOpen: boolean,
+    onToggle: () => void,
+  ) => (
+    <div className="xray-page__detail-block xray-page__detail-block--headers">
+      <button
+        type="button"
+        className="xray-page__detail-block-toggle"
+        aria-expanded={isOpen}
+        onClick={onToggle}
+      >
+        <span className="xray-page__detail-block-label">Headers</span>
+        <span className="xray-page__detail-block-count">
+          {headers ? Object.keys(headers).length : 0}
+        </span>
+        <span
+          className={`xray-page__detail-block-chevron ${isOpen ? "is-open" : ""}`}
+        >
+          <ChevronDownIcon />
+        </span>
+      </button>
+      {isOpen &&
+        (headers && Object.keys(headers).length > 0 ? (
+          <HeadersList headers={headers} />
+        ) : (
+          <div className="xray-page__detail-empty">{emptyMessage}</div>
+        ))}
+    </div>
+  );
+
+  const renderBodyBlock = (
+    body: string,
+    truncated: boolean | null,
+    emptyMessage: string,
+    tab: DetailTab,
+  ) => {
+    const hasBody = body && body.trim().length > 0;
+    return (
+      <div className="xray-page__detail-block xray-page__detail-block--payload">
+        <div className="xray-page__detail-block-header">
+          <span className="xray-page__detail-block-label">Body</span>
+          {truncated && (
+            <span className="xray-page__detail-pill">Truncated</span>
+          )}
+        </div>
+        {hasBody ? (
+          <div className="xray-page__payload">
+            <div className="xray-page__payload-actions">
+              <button
+                className="xray-page__detail-copy"
+                type="button"
+                onClick={() => handleCopyPayload(body, tab)}
+                aria-label="Copy body"
+              >
+                <CopyIcon />
+              </button>
+              {payloadCopied === tab && (
+                <span className="xray-page__detail-copy-toast">Copied</span>
+              )}
+            </div>
+            <HighlightedJson body={body} />
+          </div>
+        ) : (
+          <div className="xray-page__payload xray-page__payload--empty">
+            <div className="xray-page__detail-empty">{emptyMessage}</div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderDetailContent = () => {
+    if (!selectedRequest) return null;
+
+    switch (detailTab) {
+      case "request":
+        return (
+          <div className="xray-page__detail-stack">
+            {renderHeadersBlock(
+              selectedRequest.request_headers,
+              "No request headers captured.",
+              isRequestHeadersOpen,
+              () => setIsRequestHeadersOpen((prev) => !prev),
+            )}
+            {renderBodyBlock(
+              selectedRequest.request_body,
+              selectedRequest.request_body_truncated,
+              "No request body captured.",
+              "request",
+            )}
+          </div>
+        );
+      default:
+        return (
+          <div className="xray-page__detail-stack">
+            {renderHeadersBlock(
+              selectedRequest.response_headers,
+              "No response headers captured.",
+              isResponseHeadersOpen,
+              () => setIsResponseHeadersOpen((prev) => !prev),
+            )}
+            {renderBodyBlock(
+              selectedRequest.response_body,
+              selectedRequest.response_body_truncated,
+              "No response body captured.",
+              "response",
+            )}
+          </div>
+        );
+    }
+  };
+
+  // Show simple login banner when unauthorized
+  if (authState === "unauthorized") {
+    return (
+      <div className="xray-page">
+        <div className="xray-page__login-banner">
+          <p>Sign in to view X-ray</p>
+          <p className="xray-page__login-hint">
+            You need to be signed in to view API request logs.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show loading state
+  if (!hasLoadedInitial) {
+    return (
+      <div className="xray-page">
+        <div className="xray-page__loading">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`xray-page ${hasSelection ? "xray-page--with-detail" : ""} ${
+        isListCollapsedActive ? "xray-page--list-collapsed" : ""
+      }`}
+    >
+      <div className="xray-page__header">
+        <h1 className="xray-page__title">X-ray</h1>
+        <div className="xray-page__search">
+          <div className="xray-page__search-container">
+            <input
+              type="text"
+              className={`xray-page__search-input ${searchError ? "xray-page__search-input--error" : ""}`}
+              placeholder="Search by Request ID..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setSearchError(null);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && searchQuery.trim() && !isSearching) {
+                  e.preventDefault();
+                  handleSearch();
+                }
+              }}
+              disabled={isSearching}
+            />
+            <button
+              className="xray-page__search-btn"
+              onClick={handleSearch}
+              disabled={isSearching || !searchQuery.trim()}
+              aria-label="Search"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+            </button>
+            {searchError && (
+              <div className="xray-page__search-error">{searchError}</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="xray-page__content">
+        <div
+          className="xray-page__list-panel"
+          aria-hidden={isListCollapsedActive}
+        >
+          <div className="xray-page__list-container">
+            <div className="xray-page__list-header">
+              <span className="xray-page__list-title">Requests</span>
+              <div className="xray-page__list-header-actions">
+                {pendingRequests.length > 0 && (
+                  <button
+                    className="xray-page__new-requests-btn"
+                    type="button"
+                    onClick={handleLoadPendingRequests}
+                    aria-label={`Load ${pendingRequests.length} new requests`}
+                  >
+                    <RefreshIcon />
+                    <span>{pendingRequests.length} new</span>
+                  </button>
+                )}
+                <button
+                  className={`xray-page__list-toggle ${hasSelection ? "" : "is-hidden"}`}
+                  type="button"
+                  onClick={() => setIsListCollapsed((prev) => !prev)}
+                  aria-label={isListCollapsedActive ? "Show list" : "Hide list"}
+                  aria-hidden={!hasSelection}
+                  disabled={!hasSelection}
+                  tabIndex={hasSelection ? 0 : -1}
+                >
+                  {isListCollapsedActive ? (
+                    <PanelRightIcon />
+                  ) : (
+                    <PanelLeftIcon />
+                  )}
+                </button>
+              </div>
+            </div>
+            {requests.length === 0 ? (
+              <div className="xray-page__empty">
+                <p>No requests yet.</p>
+                <p className="xray-page__empty-hint">
+                  Make some API requests to your application and they'll appear
+                  here.
+                </p>
+              </div>
+            ) : (
+              <ul className="xray-page__list">
+                {requests.map((req) => (
+                  <li key={req.request_id} className="xray-page__item">
+                    <a
+                      className={`xray-page__item-link ${
+                        selectedRequest?.request_id === req.request_id
+                          ? "xray-page__item-link--selected"
+                          : ""
+                      }`}
+                      href={getRequestHref(req.request_id)}
+                      onClick={(event) => handleRequestLinkClick(event, req)}
+                    >
+                      <span
+                        className={`xray-page__status-badge ${getStatusClass(req.response_status_code)}`}
+                      >
+                        <span className="xray-page__status-dot" />
+                        {req.response_status_code}
+                      </span>
+                      <span className="xray-page__endpoint">
+                        <span className="xray-page__method">
+                          {req.request_method}
+                        </span>
+                        <span className="xray-page__path">
+                          {req.request_path || "/"}
+                        </span>
+                      </span>
+                      <span className="xray-page__time">
+                        {formatRelativeTime(req.timestamp)}
+                      </span>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+
+        <div
+          className="xray-page__detail-panel"
+          data-state={hasSelection ? "open" : "closed"}
+        >
+          {!hasSelection ? (
+            <div className="xray-page__detail-placeholder">
+              <p>Select a request to inspect its details.</p>
+            </div>
+          ) : (
+            <>
+              <div className="xray-page__detail-header">
+                <div className="xray-page__detail-title">
+                  {isListCollapsedActive && (
+                    <button
+                      className="xray-page__detail-toggle"
+                      type="button"
+                      onClick={() => setIsListCollapsed(false)}
+                      aria-label="Show list"
+                    >
+                      <PanelRightIcon />
+                    </button>
+                  )}
+                  <span className="xray-page__method">
+                    {selectedRequest.request_method}
+                  </span>
+                  <span className="xray-page__detail-path">
+                    {selectedRequest.request_path || "/"}
+                  </span>
+                </div>
+                <a
+                  className="xray-page__detail-close"
+                  href={baseHref}
+                  onClick={handleCloseLinkClick}
+                  aria-label="Close"
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </a>
+              </div>
+
+              {(() => {
+                const requestHeaders = selectedRequest.request_headers;
+                const uaValue = requestHeaders
+                  ? Object.entries(requestHeaders).find(
+                      ([k]) => k.toLowerCase() === "user-agent",
+                    )?.[1]
+                  : undefined;
+                const userAgent = Array.isArray(uaValue) ? uaValue[0] : uaValue;
+                const parsed = parseUserAgent(userAgent);
+
+                const responseHeaders = selectedRequest.response_headers;
+                const locationValue = responseHeaders
+                  ? Object.entries(responseHeaders).find(
+                      ([k]) => k.toLowerCase() === "location",
+                    )?.[1]
+                  : undefined;
+                const location = Array.isArray(locationValue)
+                  ? locationValue[0]
+                  : locationValue;
+
+                const endpointMap = window.__XRAY_ENDPOINT_MAP__ as
+                  | EndpointMap
+                  | undefined;
+                const serverBasePaths = window.__XRAY_SERVER_BASE_PATHS__ as
+                  | string[]
+                  | undefined;
+                const endpointInfo = getEndpointInfo(
+                  selectedRequest.request_method,
+                  selectedRequest.request_route,
+                  endpointMap,
+                  serverBasePaths,
+                );
+
+                return (
+                  <div className="xray-page__detail-info">
+                    {endpointInfo && (
+                      <div className="xray-page__detail-row">
+                        <span className="xray-page__detail-row-icon" />
+                        <span className="xray-page__detail-row-label">
+                          Endpoint:
+                        </span>
+                        <a
+                          href={endpointInfo.href}
+                          className="xray-page__detail-row-value xray-page__endpoint-link"
+                        >
+                          {endpointInfo.title}
+                        </a>
+                      </div>
+                    )}
+                    <div className="xray-page__detail-row">
+                      <span
+                        className={`xray-page__detail-row-icon xray-page__status-dot ${getStatusClass(selectedRequest.response_status_code)}`}
+                      />
+                      <span className="xray-page__detail-row-label">
+                        Status:
+                      </span>
+                      <span
+                        className={`xray-page__detail-row-value ${getStatusClass(selectedRequest.response_status_code)}`}
+                      >
+                        {selectedRequest.response_status_code}{" "}
+                        {getStatusText(selectedRequest.response_status_code)}
+                      </span>
+                    </div>
+                    <div className="xray-page__detail-row">
+                      <span className="xray-page__detail-row-icon" />
+                      <span className="xray-page__detail-row-label">
+                        Duration:
+                      </span>
+                      <span className="xray-page__detail-row-value">
+                        {Math.ceil(selectedRequest.duration_us / 1000)}ms
+                      </span>
+                    </div>
+                    <div className="xray-page__detail-row">
+                      <span className="xray-page__detail-row-icon" />
+                      <span className="xray-page__detail-row-label">Time:</span>
+                      <span className="xray-page__detail-row-value">
+                        {formatDate(selectedRequest.timestamp)}{" "}
+                        {formatTime(selectedRequest.timestamp)}
+                      </span>
+                    </div>
+                    {selectedRequest.ip && (
+                      <div className="xray-page__detail-row">
+                        <span className="xray-page__detail-row-icon">
+                          {currentUserIp &&
+                            selectedRequest.ip === currentUserIp && (
+                              <button
+                                type="button"
+                                className="xray-page__current-ip-pin"
+                                aria-label="Your current IP address"
+                              >
+                                <MapPinIcon />
+                              </button>
+                            )}
+                        </span>
+                        <span className="xray-page__detail-row-label">
+                          IP Address:
+                        </span>
+                        <span className="xray-page__detail-row-value">
+                          {selectedRequest.ip}
+                          {currentUserIp &&
+                            selectedRequest.ip === currentUserIp && (
+                              <span className="xray-page__current-ip-badge">
+                                Your current IP address
+                              </span>
+                            )}
+                        </span>
+                      </div>
+                    )}
+                    <div className="xray-page__detail-row">
+                      <span className="xray-page__detail-row-icon" />
+                      <span className="xray-page__detail-row-label">
+                        Request ID:
+                      </span>
+                      <code className="xray-page__detail-row-value xray-page__request-id">
+                        {selectedRequest.request_id}
+                      </code>
+                      <span className="xray-page__copy-wrapper">
+                        <button
+                          className="xray-page__copy-btn"
+                          onClick={() =>
+                            handleCopyRequestId(selectedRequest.request_id)
+                          }
+                          aria-label="Copy request ID"
+                        >
+                          <CopyIcon />
+                        </button>
+                        {showCopied && (
+                          <span className="xray-page__copy-toast">Copied</span>
+                        )}
+                      </span>
+                    </div>
+                    <div className="xray-page__detail-row-group">
+                      <div className="xray-page__detail-row">
+                        <span className="xray-page__detail-row-icon">
+                          <UserAgentIcon parsed={parsed} />
+                        </span>
+                        <span className="xray-page__detail-row-label">
+                          User Agent:
+                        </span>
+                        <span className="xray-page__detail-row-value">
+                          {parsed.type === "sdk"
+                            ? userAgent
+                            : formatUserAgentSummary(parsed)}
+                        </span>
+                      </div>
+                      {parsed.type !== "sdk" && userAgent && (
+                        <div className="xray-page__detail-row-sub">
+                          {userAgent}
+                        </div>
+                      )}
+                    </div>
+                    {location && (
+                      <div className="xray-page__detail-row">
+                        <span className="xray-page__detail-row-icon" />
+                        <span className="xray-page__detail-row-label">
+                          Location:
+                        </span>
+                        <a
+                          href={location}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="xray-page__detail-row-value xray-page__detail-location-link"
+                        >
+                          {location}
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                );
+              })()}
+
+              <div className="xray-page__detail-body">
+                <div
+                  className="xray-page__detail-tabs"
+                  role="tablist"
+                  aria-label="Request details"
+                >
+                  {detailTabs.map((tab) => (
+                    <button
+                      key={tab.id}
+                      type="button"
+                      role="tab"
+                      aria-selected={detailTab === tab.id}
+                      className={`xray-page__detail-tab ${detailTab === tab.id ? "xray-page__detail-tab--active" : ""}`}
+                      onClick={() => setDetailTab(tab.id)}
+                    >
+                      {tab.label}
+                    </button>
+                  ))}
+                </div>
+                <div className="xray-page__detail-panel-body" role="tabpanel">
+                  {renderDetailContent()}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}