@sentry/junior-dashboard 0.234.0 → 0.236.0

package/src/client/App.tsx

@@ -31,6 +31,8 @@ import { ConversationWorkspace } from "./conversations/ConversationWorkspace";
 import { ConversationWorkspaceLoading } from "./conversations/ConversationWorkspaceLoading";
 import { useConversationData } from "./conversations/queries";
 import { ComponentsPage } from "./pages/dev/ComponentsPage";
+import { codeRepositoryTabs } from "./pages/code/codeRepositoryRoutes";
+import { RepositoryPage } from "./pages/code/RepositoryPage";
 import { CodePage } from "./pages/code/CodePage";
 import { LocationDetailPage } from "./pages/locations/LocationDetailPage";
 import { LocationsPage } from "./pages/locations/LocationsPage";
@@ -48,6 +50,7 @@ import { WorkspacesPage } from "./pages/system/WorkspacesPage";
 import { MemoryRouteLoading } from "./pages/memory/MemoryPageLayout";
 import { AutomationExecutionsPage } from "./pages/automations/AutomationExecutionsPage";
 import { AutomationRunsPage } from "./pages/automations/AutomationRunsPage";
+import { AutomationVersionsPage } from "./pages/automations/AutomationVersionsPage";
 import { AutomationsPage } from "./pages/automations/AutomationsPage";
 import {
   AutomationsPageLayout,
@@ -228,6 +231,27 @@ export function DashboardShell() {
             }
             path="/automations/:kind/:automationId/executions"
           />
+          <Route
+            element={
+              loading ? (
+                <AutomationsPageLayout>
+                  <AutomationsRouteLoading
+                    description="Saved settings for this automation, newest first."
+                    label="Loading version history"
+                    title="Version history"
+                    variant="list"
+                  />
+                </AutomationsPageLayout>
+              ) : loggedIn ? (
+                <AutomationsPageLayout>
+                  <AutomationVersionsPage enabled={loggedIn} />
+                </AutomationsPageLayout>
+              ) : (
+                <Navigate replace to="/" />
+              )
+            }
+            path="/automations/:kind/:automationId/versions"
+          />
           <Route
             element={
               loading ? (
@@ -372,6 +396,17 @@ export function DashboardShell() {
             path="/"
           />
           <Route element={<CodePage />} path="/code" />
+          {codeRepositoryTabs.map((tab) => (
+            <Route
+              element={<RepositoryPage tab={tab} />}
+              key={tab}
+              path={
+                tab === "overview"
+                  ? "/code/:repositoryId"
+                  : `/code/:repositoryId/${tab}`
+              }
+            />
+          ))}
           <Route
             element={<Navigate replace to="/" />}
             path="/conversations/new"

package/src/client/api.ts

@@ -6,6 +6,7 @@ import {
   conversationStatsReportSchema,
   codeOverviewReportSchema,
   codePersonReportSchema,
+  codeRepositoryReportSchema,
   statsReportSchema,
 } from "@sentry/junior/api/schema";
 import {
@@ -18,6 +19,7 @@ import {
   automationListSchema,
   automationSummarySchema,
   automationRunListSchema,
+  automationVersionListSchema,
 } from "@sentry/junior/api/schema";
 import {
   pluginOperationalReportFeedSchema,
@@ -115,6 +117,48 @@ export function useCodeOverviewData() {
   });
 }
 
+/** Fetch code activity, recent changes, and Workspaces for one repository. */
+export function useCodeRepositoryData(repositoryId: string | undefined) {
+  return useQuery({
+    enabled: Boolean(repositoryId),
+    queryKey: ["dashboard", "code", "repositories", repositoryId],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        codeRepositoryReportSchema,
+        `/api/code/repositories/${encodeURIComponent(repositoryId!)}`,
+        signal,
+      ),
+    retry: false,
+  });
+}
+
+/** Fetch conversations linked to one repository through its code changes. */
+export function useCodeRepositoryConversationsData(
+  repositoryId: string | undefined,
+  search = "",
+) {
+  return useQuery({
+    enabled: Boolean(repositoryId),
+    queryKey: [
+      "dashboard",
+      "conversations",
+      "code-repository",
+      { repositoryId, search },
+    ],
+    queryFn: ({ signal }) => {
+      const params = new URLSearchParams({ codeRepositoryId: repositoryId! });
+      if (search) params.set("q", search);
+      return fetchDashboardJson(
+        conversationFeedSchema,
+        `/api/conversations?${params.toString()}`,
+        signal,
+      );
+    },
+    placeholderData: keepPreviousData,
+    retry: false,
+  });
+}
+
 /** Fetch the signed-in viewer's scheduled and event automations. */
 export function useAutomationsData(enabled: boolean, search: string) {
   return useQuery({
@@ -180,6 +224,25 @@ export function useAutomationExecutionsData(
   });
 }
 
+/** Fetch saved definitions for one viewer-visible Automation, newest first. */
+export function useAutomationVersionsData(
+  enabled: boolean,
+  kind: "scheduled" | "event" | undefined,
+  automationId: string | undefined,
+) {
+  return useQuery({
+    enabled: enabled && Boolean(kind && automationId),
+    queryKey: ["dashboard", "automations", kind, automationId, "versions"],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationVersionListSchema,
+        `/api/automations/${kind}/${encodeURIComponent(automationId!)}/versions`,
+        signal,
+      ),
+    retry: false,
+  });
+}
+
 /** Fetch the actor directory used by the People dashboard route. */
 export function useActorDirectoryData() {
   return useQuery({

package/src/client/components/README.md

@@ -7,10 +7,14 @@ instead of copying Tailwind blocks.
 
 1. **Primitives** — `Button` / `ToggleButton`, `Field`, `TextInput`,
    `StatusChip`, `StatusDot`, `Notice`, `FormNotice`, `Select`, `Drawer`, `Tooltip`, `Skeleton`,
-   `PageContentSkeleton`, `SegmentedTabs`, and other small reusable controls.
-   Use `SegmentedTabs` for equal-width panel navigation. Pass the selected value,
-   items, change handler, and selected panel content. It owns tab/panel labels
-   and keyboard focus. Keep collection filters in `FilterTabList`. Prefer
+   `PageContentSkeleton`, `SegmentedTabs`, `SegmentedNav`, and other small reusable controls.
+   Use the segmented pill track to pick one of a few siblings. Use
+   `SegmentedTabs` to switch panels in place. Pass the selected value, items,
+   change handler, and selected panel content. It owns tab/panel labels and
+   keyboard focus. Use `SegmentedNav` for links between sibling pages. With
+   `fill`, links share the row width equally while their labels fit. Otherwise
+   each link keeps its label width. Rows that do not fit scroll sideways. Keep
+   collection filters in `FilterTabList`. Prefer
    `ToggleButton` variants (`pill`, `segment`, `text`) over one-off pressed
    styles. Prefer `Field` sizes (`default`, `compact`) over handwritten labels.
    Prefer `StatusDot` for dense table or list status markers and `StatusChip`

package/src/client/components/SegmentedNav.tsx

@@ -0,0 +1,167 @@
+import { useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import { Link, NavLink, useLocation } from "react-router";
+
+import { pathWithSearch } from "../searchParams";
+import {
+  segmentedTabClass,
+  segmentedTabsFrameClass,
+  segmentedTabsInsetClass,
+} from "./SegmentedTabs";
+import { cn } from "../styles";
+
+export type SegmentedNavItem = {
+  end?: boolean;
+  /** Override default NavLink matching when a path family should stay active. */
+  isActive?: (pathname: string) => boolean;
+  label: string;
+  to: string;
+};
+
+/** Link to a sibling page and keep page filters (range, scope, q). */
+export function SiblingPageLink(props: {
+  className: (state: { isActive: boolean }) => string;
+  item: SegmentedNavItem;
+}) {
+  const { className, item } = props;
+  const location = useLocation();
+  const to = pathWithSearch(item.to, location.search);
+  if (item.isActive) {
+    const isActive = item.isActive(location.pathname);
+    return (
+      <Link
+        aria-current={isActive ? "page" : undefined}
+        className={className({ isActive })}
+        to={to}
+      >
+        {item.label}
+      </Link>
+    );
+  }
+
+  return (
+    <NavLink className={className} end={item.end} to={to}>
+      {item.label}
+    </NavLink>
+  );
+}
+
+/** Width of the fade on an edge that hides more links. */
+const EDGE_FADE_PX = 24;
+
+type HiddenEdges = { end: boolean; start: boolean };
+
+function hiddenEdges(row: HTMLElement): HiddenEdges {
+  const maxScroll = row.scrollWidth - row.clientWidth;
+  return {
+    end: row.scrollLeft < maxScroll - 1,
+    start: row.scrollLeft > 1,
+  };
+}
+
+/** Scroll the current page link into view when the row or a fade covers it. */
+function revealCurrentLink(row: HTMLElement) {
+  const link = row.querySelector<HTMLElement>('[aria-current="page"]');
+  if (!link || row.clientWidth === 0) return;
+  const edges = hiddenEdges(row);
+  const visibleStart = row.scrollLeft + (edges.start ? EDGE_FADE_PX : 0);
+  const visibleEnd =
+    row.scrollLeft + row.clientWidth - (edges.end ? EDGE_FADE_PX : 0);
+  const start = link.offsetLeft;
+  const end = start + link.offsetWidth;
+  if (start >= visibleStart && end <= visibleEnd) return;
+  // scrollIntoView can also scroll the page, so set scrollLeft on the row.
+  row.scrollLeft = start - (row.clientWidth - link.offsetWidth) / 2;
+}
+
+/** Fade each edge of the row that hides more links. */
+function edgeFade(edges: HiddenEdges): CSSProperties | undefined {
+  if (!edges.start && !edges.end) return undefined;
+  const fade = `${EDGE_FADE_PX}px`;
+  const start = edges.start ? `transparent, black ${fade}` : "black";
+  const end = edges.end ? `black calc(100% - ${fade}), transparent` : "black";
+  const mask = `linear-gradient(to right, ${start}, ${end})`;
+  return { maskImage: mask, WebkitMaskImage: mask };
+}
+
+/**
+ * Show links between sibling pages in the segmented pill track.
+ *
+ * With `fill`, links share the row width equally while their labels fit.
+ * Otherwise each link keeps its label width. When the links do not fit, the
+ * row scrolls sideways and fades the edge that hides more links.
+ */
+export function SegmentedNav(props: {
+  ariaLabel: string;
+  fill?: boolean;
+  items: readonly SegmentedNavItem[];
+}) {
+  const { pathname } = useLocation();
+  const rowRef = useRef<HTMLDivElement>(null);
+  const [edges, setEdges] = useState<HiddenEdges>({
+    end: false,
+    start: false,
+  });
+
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    if (!row) return;
+    const updateEdges = () => {
+      const { end, start } = hiddenEdges(row);
+      setEdges((previous) =>
+        previous.start === start && previous.end === end
+          ? previous
+          : { end, start },
+      );
+    };
+    // A row hidden at this breakpoint has no width. Reveal the current link
+    // when it gets one.
+    const observer = new ResizeObserver(() => {
+      revealCurrentLink(row);
+      updateEdges();
+    });
+    updateEdges();
+    row.addEventListener("scroll", updateEdges, { passive: true });
+    observer.observe(row);
+    return () => {
+      row.removeEventListener("scroll", updateEdges);
+      observer.disconnect();
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (rowRef.current) revealCurrentLink(rowRef.current);
+  }, [pathname]);
+
+  const linkClass = ({ isActive }: { isActive: boolean }) =>
+    cn(
+      segmentedTabClass(isActive),
+      "flex items-center justify-center whitespace-nowrap no-underline",
+      props.fill ? "min-w-max flex-[1_0_0]" : "shrink-0",
+    );
+
+  return (
+    <nav
+      aria-label={props.ariaLabel}
+      className={cn(
+        segmentedTabsFrameClass,
+        "flex min-w-0 max-w-full",
+        !props.fill && "w-fit",
+      )}
+    >
+      {/* Pad the scrolling row, not the frame, so the last link keeps its
+          padding when the row is scrolled to the end. */}
+      <div
+        className={cn(
+          segmentedTabsInsetClass,
+          "relative flex min-w-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        )}
+        ref={rowRef}
+        style={edgeFade(edges)}
+      >
+        {props.items.map((item) => (
+          <SiblingPageLink className={linkClass} item={item} key={item.to} />
+        ))}
+      </div>
+    </nav>
+  );
+}

package/src/client/components/SegmentedTabs.tsx

@@ -2,6 +2,23 @@ import { useId, type ReactNode } from "react";
 
 import { cn } from "../styles";
 
+/** Style the border and fill of the segmented pill track. */
+export const segmentedTabsFrameClass =
+  "rounded-lg border border-dashboard-border bg-dashboard-surface-panel";
+
+/** Style the spacing inside the segmented pill track. */
+export const segmentedTabsInsetClass = "gap-1 p-1";
+
+/** Style one tab or link in the segmented pill track. */
+export function segmentedTabClass(selected: boolean): string {
+  return cn(
+    "min-h-9 cursor-pointer rounded-md border-0 px-3 py-2 font-sans text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+    selected
+      ? "bg-dashboard-fill-strong text-dashboard-text"
+      : "bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-faint hover:text-dashboard-text",
+  );
+}
+
 /** Switch between related panels with equal-width tabs and keyboard navigation. */
 export function SegmentedTabs<const Value extends string>(props: {
   children: ReactNode;
@@ -16,7 +33,11 @@ export function SegmentedTabs<const Value extends string>(props: {
     <div className="grid min-w-0 gap-4">
       <div
         aria-label={props.label}
-        className="grid auto-cols-fr grid-flow-col gap-1 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-1"
+        className={cn(
+          "grid auto-cols-fr grid-flow-col",
+          segmentedTabsFrameClass,
+          segmentedTabsInsetClass,
+        )}
         role="tablist"
       >
         {props.items.map((item, index) => (
@@ -24,10 +45,8 @@ export function SegmentedTabs<const Value extends string>(props: {
             aria-controls={`${id}-panel`}
             aria-selected={props.value === item.value}
             className={cn(
-              "min-h-9 min-w-0 cursor-pointer rounded-md border-0 px-3 py-2 font-sans text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
-              props.value === item.value
-                ? "bg-dashboard-fill-strong text-dashboard-text"
-                : "bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-faint hover:text-dashboard-text",
+              "min-w-0",
+              segmentedTabClass(props.value === item.value),
             )}
             id={`${id}-${item.value}`}
             key={item.value}

package/src/client/components/layout/SecondaryNavigation.tsx

@@ -1,6 +1,10 @@
-import { Link, NavLink, useLocation } from "react-router";
+import type { ReactNode } from "react";
 
-import { pathWithSearch } from "../../searchParams";
+import {
+  SegmentedNav,
+  SiblingPageLink,
+  type SegmentedNavItem,
+} from "../SegmentedNav";
 import {
   cn,
   dashboardContainerClass,
@@ -8,62 +12,20 @@ import {
 } from "../../styles";
 import { SecondaryNavigationPortal } from "./DashboardChrome";
 
-export type SecondaryNavigationItem = {
-  end?: boolean;
-  /** Override default NavLink matching when a path family should stay active. */
-  isActive?: (pathname: string) => boolean;
-  label: string;
-  to: string;
-};
-
-type LinkClassState = { isActive: boolean };
-
-function SecondaryNavItem(props: {
-  className: (state: LinkClassState) => string;
-  item: SecondaryNavigationItem;
-  pathname: string;
-  search: string;
-}) {
-  const { className, item, pathname, search } = props;
-  // Keep page filters (range, scope, q) when moving across secondary sections.
-  const to = pathWithSearch(item.to, search);
-  if (item.isActive) {
-    const isActive = item.isActive(pathname);
-    return (
-      <Link
-        aria-current={isActive ? "page" : undefined}
-        className={className({ isActive })}
-        to={to}
-      >
-        {item.label}
-      </Link>
-    );
-  }
-
-  return (
-    <NavLink className={className} end={item.end} to={to}>
-      {item.label}
-    </NavLink>
-  );
-}
+export type SecondaryNavigationItem = SegmentedNavItem;
 
-/** Render page navigation in the desktop chrome and mobile drawer. */
+/**
+ * Render page navigation above the page, in the desktop chrome, and in the
+ * mobile menu. On mobile the links sit at the top of the page and scroll with
+ * it. Pass the page as children so the links and the page share one layout
+ * row.
+ */
 export function SecondaryNavigation(props: {
   ariaLabel: string;
+  children: ReactNode;
   items: SecondaryNavigationItem[];
 }) {
-  const location = useLocation();
-  const desktopLinkClass = ({ isActive }: LinkClassState) =>
-    cn(
-      "relative flex h-12 shrink-0 items-center px-3 font-display text-xs font-medium no-underline transition-colors after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:transition-colors sm:text-sm",
-      isActive
-        ? "text-dashboard-text after:bg-cyan-300"
-        : cn(
-            "after:bg-transparent hover:bg-white/[0.025]",
-            dashboardInteractiveTextClass,
-          ),
-    );
-  const mobileLinkClass = ({ isActive }: LinkClassState) =>
+  const menuLinkClass = ({ isActive }: { isActive: boolean }) =>
     cn(
       "rounded-lg px-3 py-3 pl-6 font-mono text-sm font-medium no-underline transition-colors",
       isActive
@@ -72,44 +34,39 @@ export function SecondaryNavigation(props: {
     );
 
   return (
-    <SecondaryNavigationPortal
-      desktop={
-        <div className="border-b border-white/[0.06] bg-white/[0.018]">
+    <div className="min-w-0">
+      <SecondaryNavigationPortal
+        desktop={
+          <div className="border-b border-white/[0.06] bg-white/[0.018]">
+            <div
+              className={cn(
+                dashboardContainerClass,
+                "min-w-0 px-4 py-2 md:px-8",
+              )}
+            >
+              <SegmentedNav ariaLabel={props.ariaLabel} items={props.items} />
+            </div>
+          </div>
+        }
+        mobile={
           <nav
             aria-label={props.ariaLabel}
-            className={cn(
-              dashboardContainerClass,
-              "flex min-w-0 gap-1 overflow-x-auto px-4 [scrollbar-width:none] md:px-8 [&::-webkit-scrollbar]:hidden",
-            )}
+            className="mt-3 grid gap-1 border-t border-white/[0.07] pt-3"
           >
             {props.items.map((item) => (
-              <SecondaryNavItem
-                className={desktopLinkClass}
+              <SiblingPageLink
+                className={menuLinkClass}
                 item={item}
                 key={item.to}
-                pathname={location.pathname}
-                search={location.search}
               />
             ))}
           </nav>
-        </div>
-      }
-      mobile={
-        <nav
-          aria-label={props.ariaLabel}
-          className="mt-3 grid gap-1 border-t border-white/[0.07] pt-3"
-        >
-          {props.items.map((item) => (
-            <SecondaryNavItem
-              className={mobileLinkClass}
-              item={item}
-              key={item.to}
-              pathname={location.pathname}
-              search={location.search}
-            />
-          ))}
-        </nav>
-      }
-    />
+        }
+      />
+      <div className="px-4 pt-4 sm:px-8 md:hidden">
+        <SegmentedNav ariaLabel={props.ariaLabel} fill items={props.items} />
+      </div>
+      {props.children}
+    </div>
   );
 }

package/src/client/conversations/ConversationEventLog.tsx

@@ -1,5 +1,5 @@
 import { ChevronRight } from "lucide-react";
-import { memo, useId, useMemo, useState } from "react";
+import { memo, useEffect, useId, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 import { Drawer } from "../components/Drawer";
@@ -12,18 +12,31 @@ import {
   eventLogUsage,
 } from "./eventLog";
 import { EventDetails } from "./EventDetails";
+import { ForkConversationButton } from "./ForkConversationButton";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 
 const rowClass =
   "grid grid-cols-[12ch_minmax(0,1fr)_1rem] items-center gap-x-3 px-3 @min-[48rem]:grid-cols-[12ch_19ch_minmax(0,1fr)_1rem]";
 
-/** Show every reporting event in sequence order, outside the transcript reducer. */
+/**
+ * Show every reporting event in sequence order, outside the transcript reducer.
+ * Pass `onSelectedSeqChange` to own the open entry, for example in the URL.
+ */
 export const ConversationEventLog = memo(function ConversationEventLog(props: {
   conversation: ConversationTranscript;
+  onSelectedSeqChange?(seq: number | undefined): void;
+  selectedSeq?: number;
 }) {
   const { conversation } = props;
   const search = useTranscriptSearch();
-  const [selectedSeq, setSelectedSeq] = useState<number>();
+  const [localSelectedSeq, setLocalSelectedSeq] = useState<number>();
+  const selectedSeq = props.onSelectedSeqChange
+    ? props.selectedSeq
+    : localSelectedSeq;
+  const setSelectedSeq = props.onSelectedSeqChange ?? setLocalSelectedSeq;
+  const listRef = useRef<HTMLOListElement>(null);
+  // Rows opened by a click are already visible. Scroll only for a linked entry.
+  const revealedSeqRef = useRef<number>(undefined);
   const titleId = useId();
   const events = conversation.events;
   const rows = useMemo(
@@ -50,6 +63,17 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   );
   // Resolve the selection from current data so polling cannot leave stale details.
   const selected = events.find((event) => event.seq === selectedSeq);
+  useEffect(() => {
+    if (selectedSeq === undefined || revealedSeqRef.current === selectedSeq) {
+      return;
+    }
+    const row = listRef.current?.querySelector(
+      `[data-event-seq="${selectedSeq}"]`,
+    );
+    if (!row) return;
+    revealedSeqRef.current = selectedSeq;
+    row.scrollIntoView({ block: "center" });
+  }, [selectedSeq, visibleRows]);
 
   if (conversation.eventHistory.status === "expired") {
     return (
@@ -85,9 +109,10 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
         <ol
           aria-label="Events"
           className="m-0 list-none divide-y divide-dashboard-border-subtle p-0"
+          ref={listRef}
         >
           {visibleRows.map(({ event, summary, model, usage }) => (
-            <li key={event.seq}>
+            <li data-event-seq={event.seq} key={event.seq}>
               <button
                 aria-haspopup="dialog"
                 aria-label={`Event ${event.seq}: ${event.data.type}`}
@@ -96,7 +121,10 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
                   "min-h-11 w-full cursor-pointer border-0 bg-transparent py-2 text-left leading-5 hover:bg-dashboard-fill-hover active:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus @min-[48rem]:min-h-8 @min-[48rem]:py-1",
                   selectedSeq === event.seq && "bg-dashboard-fill-strong",
                 )}
-                onClick={() => setSelectedSeq(event.seq)}
+                onClick={() => {
+                  revealedSeqRef.current = event.seq;
+                  setSelectedSeq(event.seq);
+                }}
                 type="button"
               >
                 <time
@@ -191,6 +219,18 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
               titleId={titleId}
               width="wide"
             >
+              {conversation.canFork &&
+              selected.data.type === "message" &&
+              selected.data.role === "assistant" &&
+              !selected.data.redacted ? (
+                <div className="mb-3 flex items-center gap-2 text-sm">
+                  <ForkConversationButton
+                    conversationId={conversation.conversationId}
+                    messageId={selected.data.messageId}
+                  />
+                  <span>Fork after this reply</span>
+                </div>
+              ) : null}
               <EventDetails key={selected.seq} event={selected} />
             </Drawer>,
             document.body,