@sentry/junior-dashboard 0.234.0 → 0.235.0

package/src/client/api.ts

@@ -6,6 +6,7 @@ import {
   conversationStatsReportSchema,
   codeOverviewReportSchema,
   codePersonReportSchema,
+  codeRepositoryReportSchema,
   statsReportSchema,
 } from "@sentry/junior/api/schema";
 import {
@@ -115,6 +116,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({

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/pages/automations/AutomationDetailsDrawer.tsx

@@ -1,5 +1,11 @@
 import { AutomationLifecycle } from "./AutomationLifecycle";
 import { automationOutcomeLabel } from "./automationOutcomes";
+import {
+  automationEventConditions,
+  automationEventNames,
+  automationScheduleLabel,
+  formatAutomationRunTime,
+} from "./automationFormat";
 import type { AutomationSummary } from "@sentry/junior/api/schema";
 import { Link, useLocation } from "react-router";
 import { Detail, DetailList } from "../../components/DetailList";
@@ -34,26 +40,24 @@ export function AutomationDetailsDrawer(props: {
   ) : (
     automation.createdBy
   );
+  const conditions =
+    automation.kind === "event" ? automationEventConditions(automation) : "";
   const details =
     automation.kind === "scheduled"
       ? [
-          { label: "Schedule", value: automation.schedule },
+          { label: "Schedule", value: automationScheduleLabel(automation) },
           {
             label: "Next run",
             value:
               automation.status === "active" && automation.nextRunAt
-                ? formatRunDate(automation.nextRunAt)
+                ? formatAutomationRunTime(automation.nextRunAt)
                 : "None",
           },
         ]
       : [
           { label: "Watching", value: automation.resource },
-          {
-            label: "Events",
-            value: automation.events
-              .map((event) => event.replaceAll(/[._]/g, " "))
-              .join(", "),
-          },
+          { label: "Events", value: automationEventNames(automation) },
+          ...(conditions ? [{ label: "Conditions", value: conditions }] : []),
         ];
   const titleId = "automation-details-drawer-title";
 
@@ -192,10 +196,10 @@ function AutomationExecutionSummary(props: {
             className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"
             to={conversationPath(automation.lastConversationId)}
           >
-            {formatRunDate(automation.lastRunAt)}
+            {formatAutomationRunTime(automation.lastRunAt)}
           </Link>
         ) : automation.lastRunAt ? (
-          formatRunDate(automation.lastRunAt)
+          formatAutomationRunTime(automation.lastRunAt)
         ) : null}
       </span>
     </div>
@@ -208,14 +212,3 @@ function formatDate(value: string): string {
     timeStyle: "short",
   });
 }
-
-function formatRunDate(value: string): string {
-  return formatTime(value, {
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    timeZoneName: "short",
-    year: "numeric",
-  });
-}

package/src/client/pages/automations/AutomationEditPage.tsx

@@ -52,9 +52,8 @@ export function AutomationEditPage(props: { enabled: boolean }) {
         ? "warning"
         : "neutral";
   return (
-    <>
-      <AutomationsNavigation />
-      <div className="mx-auto w-full min-w-0 max-w-5xl px-5 pt-7 sm:px-8 sm:pt-9">
+    <AutomationsNavigation>
+      <div className="mx-auto w-full min-w-0 max-w-5xl px-4 pt-7 sm:px-8 sm:pt-9">
         <Link
           to={returnPath}
           className="inline-flex min-h-8 items-center gap-2 text-sm text-dashboard-text-muted no-underline hover:text-dashboard-text"
@@ -107,7 +106,7 @@ export function AutomationEditPage(props: { enabled: boolean }) {
           <AutomationReadOnly automation={value} />
         )}
       </div>
-    </>
+    </AutomationsNavigation>
   );
 }
 

package/src/client/pages/automations/AutomationEditor.tsx

@@ -355,7 +355,7 @@ export function AutomationEditor(props: {
       <p className="mb-5 text-xs leading-relaxed text-dashboard-text-muted sm:hidden">
         Changes apply to future work. Saving does not run this automation.
       </p>
-      <div className="sticky bottom-0 z-20 -mx-5 border-t border-dashboard-border-emphasis bg-dashboard-bg px-5 py-4 sm:-mx-8 sm:px-8">
+      <div className="sticky bottom-0 z-20 -mx-4 border-t border-dashboard-border-emphasis bg-dashboard-bg px-4 py-4 sm:-mx-8 sm:px-8">
         <div className="flex items-center justify-between gap-3">
           <div className="min-w-0 flex-1" role="status">
             <p className="m-0 text-xs font-medium sm:text-sm">

package/src/client/pages/automations/AutomationFilters.tsx

@@ -6,6 +6,7 @@ import type {
   AutomationListQuery,
 } from "@sentry/junior/api/schema";
 import { Button, ToggleButton } from "../../components/Button";
+import { DirectorySortSelect } from "../../components/controls/DirectorySortSelect";
 import { FilterGroup } from "../../components/FilterBar";
 import { SearchInput } from "../../components/SearchInput";
 
@@ -25,7 +26,6 @@ export function AutomationFilters(props: {
     Boolean(filters.creator),
     Boolean(filters.destination),
     filters.state !== "all",
-    filters.sort !== "newest",
   ].filter(Boolean).length;
   return (
     <div className="grid gap-3">
@@ -76,12 +76,12 @@ export function AutomationFilters(props: {
       <div
         id={controlsId}
         className={cn(
-          "grid-cols-2 items-end gap-3 lg:grid-cols-4 xl:grid-cols-[auto_repeat(4,minmax(0,1fr))]",
+          "grid-cols-2 items-end gap-3 lg:grid-cols-3 xl:grid-cols-[auto_repeat(3,minmax(0,1fr))]",
           expanded ? "grid" : "hidden",
         )}
       >
         <FilterGroup
-          className="col-span-2 lg:col-span-4 xl:col-span-1"
+          className="col-span-2 lg:col-span-3 xl:col-span-1"
           label="Type"
         >
           {(["all", "scheduled", "event"] as const).map((value) => (
@@ -123,22 +123,30 @@ export function AutomationFilters(props: {
           ]}
           onChange={(value) => onChange("state", value)}
         />
-        <AutomationFilterSelect
-          label="Sort"
-          ariaLabel="Sort automations"
-          value={filters.sort}
-          onChange={(value) => onChange("sort", value)}
-          options={[
-            { value: "newest", label: "Newest first" },
-            { value: "oldest", label: "Oldest first" },
-            { value: "title", label: "Title" },
-          ]}
-        />
       </div>
     </div>
   );
 }
 
+/** Keep list order visible beside the result count instead of inside Filters. */
+export function AutomationSort(props: {
+  value: AutomationListQuery["sort"];
+  onChange(value: string): void;
+}) {
+  return (
+    <DirectorySortSelect
+      ariaLabel="Sort automations"
+      onChange={props.onChange}
+      options={[
+        { value: "newest", label: "Recently created" },
+        { value: "oldest", label: "Oldest created" },
+        { value: "title", label: "Title A–Z" },
+      ]}
+      value={props.value}
+    />
+  );
+}
+
 function AutomationFilterSelect(props: {
   label: string;
   ariaLabel?: string;