@sentry/junior-dashboard 0.263.0 → 0.265.0

package/src/mock-reporting/watches.ts

@@ -0,0 +1,94 @@
+import type { ConversationWatchesReport } from "@sentry/junior/api/schema";
+import {
+  DASHBOARD_QA_CONVERSATION_ID,
+  readMockConversationDetail,
+} from "./fixtures";
+
+const HOUR_MS = 60 * 60_000;
+const DAY_MS = 24 * HOUR_MS;
+
+// Watch times are relative to the real clock, not the fixed fixture time, so
+// time-left labels stay readable.
+function iso(offsetMs: number): string {
+  return new Date(Date.now() + offsetMs).toISOString();
+}
+
+/**
+ * Return the active Watches of one mock Conversation. The dashboard QA
+ * Conversation has one Watch of each common shape: a pull request with a
+ * match filter, a deployment, a timer, a redacted Watch, and one that a child
+ * agent created.
+ */
+export function readMockConversationWatches(
+  conversationId: string,
+): ConversationWatchesReport | undefined {
+  if (!readMockConversationDetail(conversationId)) return undefined;
+  if (conversationId !== DASHBOARD_QA_CONVERSATION_ID) {
+    return { conversationId, watches: [] };
+  }
+  return {
+    conversationId,
+    watches: [
+      {
+        createdAt: iso(-3 * HOUR_MS),
+        events: [
+          "pull_request.checks.failed",
+          "pull_request.review.changes_requested",
+          "pull_request.merged",
+        ],
+        expiresAt: iso(13 * DAY_MS),
+        id: "watch-pr",
+        intent:
+          "Fix failing checks and address requested changes on the dashboard PR.",
+        label: "getsentry/junior#2383",
+        namespace: "github",
+        resourceType: "pull_request",
+      },
+      {
+        createdAt: iso(-2 * HOUR_MS),
+        events: ["deployment.failed", "deployment.succeeded"],
+        expiresAt: iso(20 * HOUR_MS),
+        id: "watch-deploy",
+        intent: "Report the preview URL, or the build error if it fails.",
+        label: "junior-dashboard preview",
+        match: { target: "preview" },
+        namespace: "vercel",
+        resourceType: "deployment",
+      },
+      {
+        createdAt: iso(-30 * 60_000),
+        events: ["timer.fired"],
+        expiresAt: iso(2 * HOUR_MS + 5 * 60_000),
+        firesAt: iso(2 * HOUR_MS),
+        id: "watch-timer",
+        intent: "Check whether CI recovered after the retry.",
+        label: "Recheck CI",
+        namespace: "junior",
+        resourceType: "timer",
+      },
+      {
+        childAgent: {
+          conversationId: "junior:internal:dashboard-qa:advisor-review",
+          name: "reviewer",
+        },
+        createdAt: iso(-20 * 60_000),
+        events: ["pull_request.review_comment.created"],
+        expiresAt: iso(6 * DAY_MS),
+        id: "watch-child",
+        intent: "Reply to new review comments on the PR.",
+        label: "getsentry/junior#2351",
+        namespace: "github",
+        resourceType: "pull_request",
+      },
+      {
+        createdAt: iso(-10 * 60_000),
+        events: ["message.posted"],
+        expiresAt: iso(3 * DAY_MS),
+        id: "watch-redacted",
+        namespace: "slack",
+        redacted: true,
+        resourceType: "channel",
+      },
+    ],
+  };
+}

package/src/shell.ts

@@ -117,9 +117,8 @@ function dashboardStartUrl(basePath: string): string {
 /** List the browser page paths served by the authenticated dashboard shell. */
 export function dashboardPagePaths(
   basePath: string,
-  options: { componentGallery?: boolean } = {},
 ): Array<{ nested?: boolean; path: string }> {
-  const paths: Array<{ nested?: boolean; path: string }> = [
+  return [
     { path: basePath },
     {
       path: basePath === "/" ? "/admin" : `${basePath}/admin`,
@@ -165,13 +164,6 @@ export function dashboardPagePaths(
       path: basePath === "/" ? "/plugins" : `${basePath}/plugins`,
     },
   ];
-  if (options.componentGallery) {
-    paths.push({
-      nested: true,
-      path: basePath === "/" ? "/dev" : `${basePath}/dev`,
-    });
-  }
-  return paths;
 }
 
 /** Serve the installable web app manifest for the dashboard shell. */
@@ -286,6 +278,9 @@ export function renderDashboard(basePath: string, agentName: string): Response {
           "</pre></section></main>";
       };
       window.addEventListener("error", function (event) {
+        // Browsers report a ResizeObserver loop as an error event with no
+        // error object. Layout continues, so it must not replace the page.
+        if (!event.error && /^ResizeObserver loop/.test(event.message)) return;
         window.__JUNIOR_DASHBOARD_SHOW_ERROR__(event.error || event.message);
       });
       window.addEventListener("unhandledrejection", function (event) {

package/src/tailwind.css

@@ -1,5 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap");
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
 /*
  * Dashboard design tokens. components/README.md explains each role.
@@ -214,6 +216,81 @@
   --color-violet-400: oklch(54.1% 0.281 293.009);
 }
 
+/* shadcn components use the dashboard tokens in both themes. */
+@layer base {
+  :root {
+    --radius: 0.5rem;
+    --background: var(--color-dashboard-bg);
+    --foreground: var(--color-dashboard-text);
+    --card: var(--color-dashboard-surface-panel);
+    --card-foreground: var(--color-dashboard-text);
+    --popover: var(--color-dashboard-bg-elevated);
+    --popover-foreground: var(--color-dashboard-text);
+    --primary: var(--color-dashboard-text-solid);
+    --primary-foreground: var(--color-dashboard-text-inverse);
+    --secondary: var(--color-dashboard-surface-raised);
+    --secondary-foreground: var(--color-dashboard-text);
+    --muted: var(--color-dashboard-surface-raised);
+    --muted-foreground: var(--color-dashboard-text-muted);
+    --accent: var(--color-dashboard-surface-hover);
+    --accent-foreground: var(--color-dashboard-text);
+    --destructive: var(--color-rose-300);
+    --border: var(--color-dashboard-border);
+    --input: var(--color-dashboard-border-emphasis);
+    --ring: var(--color-dashboard-focus);
+    --chart-1: var(--color-violet-400);
+    --chart-2: var(--color-sky-400);
+    --chart-3: var(--color-emerald-400);
+    --chart-4: var(--color-amber-400);
+    --chart-5: var(--color-rose-400);
+    --sidebar: var(--color-dashboard-surface-panel);
+    --sidebar-foreground: var(--color-dashboard-text);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--color-dashboard-text-inverse);
+    --sidebar-accent: var(--color-dashboard-surface-hover);
+    --sidebar-accent-foreground: var(--color-dashboard-text);
+    --sidebar-border: var(--color-dashboard-border);
+    --sidebar-ring: var(--color-dashboard-focus);
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* The dashboard defaults to dark and selects light with data-theme. */
+@custom-variant dark (&:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *));
+
 /* Style one-off values that the token and palette mirror cannot cover. */
 @custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
 
@@ -261,16 +338,6 @@
   }
 }
 
-@keyframes junior-text-shimmer {
-  0% {
-    background-position: 200% 50%;
-  }
-
-  100% {
-    background-position: -200% 50%;
-  }
-}
-
 @keyframes junior-active-indicator {
   0%,
   100% {

package/src/client/components/Button.tsx

@@ -1,118 +0,0 @@
-import type { ButtonHTMLAttributes, Ref } from "react";
-import { Link, type LinkProps } from "react-router";
-
-import { cn } from "../styles";
-
-type ButtonSize = "default" | "icon";
-type ButtonTone = "default" | "danger" | "primary";
-type ToggleButtonVariant = "pill" | "segment" | "text";
-
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  ref?: Ref<HTMLButtonElement>;
-  size?: ButtonSize;
-  tone?: ButtonTone;
-};
-
-export type ToggleButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  pressed: boolean;
-  variant: ToggleButtonVariant;
-};
-
-const buttonClassName =
-  "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised px-3 font-sans text-sm font-medium leading-none text-dashboard-text transition-colors hover:border-dashboard-border-heavy hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus";
-
-const dangerButtonClassName =
-  "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border border-dashboard-border-strong bg-transparent px-3 font-sans text-sm font-medium leading-none text-dashboard-text-muted transition-colors hover:border-rose-300/40 hover:text-rose-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-300/55";
-
-/** Render the dashboard's standard bordered command button surface. */
-export function Button({
-  className,
-  size = "default",
-  tone = "default",
-  type = "button",
-  ...props
-}: ButtonProps) {
-  const isDanger = tone === "danger";
-  return (
-    <button
-      {...props}
-      className={cn(
-        "font-sans transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-        size === "icon"
-          ? cn(
-              "grid size-9 place-items-center rounded-md border-0 bg-transparent p-0 focus-visible:outline-2 focus-visible:outline-offset-1 disabled:hover:!bg-transparent",
-              isDanger
-                ? "text-dashboard-text-muted hover:!bg-rose-300/10 hover:!text-rose-300 focus-visible:outline-rose-300/55 disabled:hover:!text-dashboard-text-muted"
-                : "text-dashboard-text-muted hover:!bg-dashboard-fill-strong hover:!text-dashboard-text focus-visible:outline-dashboard-focus disabled:hover:!text-dashboard-text-muted",
-            )
-          : tone === "primary"
-            ? "inline-flex h-9 items-center justify-center gap-2 rounded-md border border-dashboard-text-solid bg-dashboard-text-solid px-3 font-sans text-sm font-medium leading-none text-dashboard-text-inverse hover:border-dashboard-text-subtle hover:bg-dashboard-text-subtle disabled:hover:border-dashboard-text-solid disabled:hover:bg-dashboard-text-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
-            : isDanger
-              ? cn(
-                  dangerButtonClassName,
-                  "disabled:hover:border-dashboard-border-strong disabled:hover:text-dashboard-text-muted",
-                )
-              : cn(
-                  buttonClassName,
-                  "disabled:hover:border-dashboard-border-emphasis disabled:hover:bg-dashboard-surface-raised disabled:hover:text-dashboard-text",
-                ),
-        props.disabled ? "" : "cursor-pointer",
-        className,
-      )}
-      type={type}
-    />
-  );
-}
-
-/** Render a dashboard navigation link with the standard button surface. */
-export function ButtonLink({ className, ...props }: LinkProps) {
-  return (
-    <Link
-      {...props}
-      className={cn(buttonClassName, "no-underline", className)}
-    />
-  );
-}
-
-/** Render a dashboard toggle button with a consistent pressed-state contract. */
-export function ToggleButton({
-  className,
-  pressed,
-  type = "button",
-  variant,
-  ...props
-}: ToggleButtonProps) {
-  return (
-    <button
-      {...props}
-      aria-pressed={pressed}
-      className={cn(
-        toggleButtonBase[variant],
-        pressed ? toggleButtonPressed[variant] : toggleButtonIdle[variant],
-        className,
-      )}
-      type={type}
-    />
-  );
-}
-
-const toggleButtonBase: Record<ToggleButtonVariant, string> = {
-  pill: "cursor-pointer rounded-md border px-2 py-1 font-sans text-xs font-medium leading-tight transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
-  segment:
-    "inline-flex h-7 min-w-10 cursor-pointer items-center justify-center rounded-md border px-2 font-sans text-xs font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
-  text: "cursor-pointer rounded-sm border-0 bg-transparent px-1.5 py-1 font-sans font-medium underline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
-};
-
-const toggleButtonPressed: Record<ToggleButtonVariant, string> = {
-  pill: "border-dashboard-border-heavy bg-dashboard-text-solid text-dashboard-text-inverse",
-  segment:
-    "border-dashboard-border-interactive bg-dashboard-surface-active text-dashboard-text",
-  text: "text-dashboard-text underline decoration-dashboard-text-solid",
-};
-
-const toggleButtonIdle: Record<ToggleButtonVariant, string> = {
-  pill: "border-dashboard-border-strong bg-dashboard-surface-raised text-dashboard-text-muted hover:border-dashboard-border-interactive hover:bg-dashboard-surface-hover hover:text-dashboard-text",
-  segment:
-    "border-transparent bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-hover hover:text-dashboard-text",
-  text: "text-dashboard-text-muted hover:text-dashboard-text",
-};

package/src/client/components/Field.tsx

@@ -1,53 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../styles";
-
-export type FieldSize = "compact" | "default";
-
-const labelClass: Record<FieldSize, string> = {
-  compact: "font-sans font-medium text-xs text-dashboard-text-muted",
-  default: "text-sm font-semibold text-dashboard-text",
-};
-
-const stackClass: Record<FieldSize, string> = {
-  compact: "grid gap-1.5",
-  default: "grid gap-2",
-};
-
-/** Label a control with optional help text using the shared form stack. */
-export function Field(props: {
-  children: ReactNode;
-  className?: string;
-  help?: ReactNode;
-  error?: string;
-  htmlFor?: string;
-  label: ReactNode;
-  size?: FieldSize;
-}) {
-  const size = props.size ?? "default";
-  return (
-    <div className={cn(stackClass[size], props.className)}>
-      <label className={labelClass[size]} htmlFor={props.htmlFor}>
-        {props.label}
-      </label>
-      {props.children}
-      {props.error ? (
-        <p
-          id={props.htmlFor ? `${props.htmlFor}-error` : undefined}
-          role="alert"
-          className="m-0 text-xs leading-relaxed text-rose-300"
-        >
-          {props.error}
-        </p>
-      ) : null}
-      {props.help ? (
-        <p
-          id={props.htmlFor ? `${props.htmlFor}-help` : undefined}
-          className="m-0 text-xs leading-relaxed text-dashboard-text-muted sm:text-sm"
-        >
-          {props.help}
-        </p>
-      ) : null}
-    </div>
-  );
-}

package/src/client/components/SegmentedTabs.tsx

@@ -1,119 +0,0 @@
-import { useId, type ReactNode } from "react";
-
-import { cn } from "../styles";
-
-/** Style the border and fill of the segmented pill track. */
-const segmentedTabsFrameClass =
-  "rounded-lg border border-dashboard-border bg-dashboard-surface-panel";
-
-/** Style the spacing inside the segmented pill track. */
-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-1.5 py-2 font-sans text-xs 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. Tabs share the row equally on wide screens. */
-export function SegmentedTabs<const Value extends string>(props: {
-  children: ReactNode;
-  label: string;
-  /** Fill the frame with fixed tabs and padded, scrolling content. */
-  scroll?: boolean;
-  /** `count` is the number of entries in the panel. Zero and unknown counts are hidden. */
-  items: readonly { count?: number; label: string; value: Value }[];
-  onChange(value: NoInfer<Value>): void;
-  value: NoInfer<Value>;
-}) {
-  const id = useId();
-
-  return (
-    <div
-      className={cn(
-        "grid min-w-0",
-        props.scroll
-          ? "h-full min-h-0 grid-rows-[auto_minmax(0,1fr)]"
-          : "gap-4",
-      )}
-    >
-      <div
-        aria-label={props.label}
-        className={cn(
-          "flex min-w-0",
-          segmentedTabsFrameClass,
-          segmentedTabsInsetClass,
-          props.scroll && "m-4",
-        )}
-        role="tablist"
-      >
-        {props.items.map((item, index) => (
-          <button
-            aria-controls={`${id}-panel`}
-            aria-selected={props.value === item.value}
-            className={cn(
-              "inline-flex min-w-0 flex-auto items-center justify-center gap-1.5 sm:flex-1",
-              segmentedTabClass(props.value === item.value),
-            )}
-            id={`${id}-${item.value}`}
-            key={item.value}
-            onClick={() => props.onChange(item.value)}
-            onKeyDown={(event) => {
-              let nextIndex: number;
-              const count = props.items.length;
-              switch (event.key) {
-                case "ArrowLeft":
-                  nextIndex = (index + count - 1) % count;
-                  break;
-                case "ArrowRight":
-                  nextIndex = (index + 1) % count;
-                  break;
-                case "Home":
-                  nextIndex = 0;
-                  break;
-                case "End":
-                  nextIndex = count - 1;
-                  break;
-                default:
-                  return;
-              }
-              event.preventDefault();
-              props.onChange(props.items[nextIndex]!.value);
-              event.currentTarget.parentElement
-                ?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
-                [nextIndex]?.focus();
-            }}
-            role="tab"
-            tabIndex={props.value === item.value ? 0 : -1}
-            type="button"
-          >
-            <span className="truncate">{item.label}</span>
-            {item.count ? (
-              <span className="min-w-5 shrink-0 rounded-full bg-dashboard-fill-strong px-1.5 text-center text-xs font-semibold leading-5 tabular-nums">
-                {item.count.toLocaleString("en-US")}
-              </span>
-            ) : null}
-          </button>
-        ))}
-      </div>
-      <div
-        aria-labelledby={`${id}-${props.value}`}
-        className={cn(
-          "min-w-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
-          props.scroll
-            ? "min-h-0 overflow-y-auto overscroll-contain px-4 pb-[max(1rem,env(safe-area-inset-bottom))] focus-visible:-outline-offset-2"
-            : "rounded-md",
-        )}
-        id={`${id}-panel`}
-        role="tabpanel"
-        tabIndex={0}
-      >
-        {props.children}
-      </div>
-    </div>
-  );
-}

package/src/client/components/Select.tsx

@@ -1,52 +0,0 @@
-import type { SelectHTMLAttributes } from "react";
-import { ChevronDown } from "lucide-react";
-import { cn } from "../styles";
-
-const selectClassName = {
-  form: "min-h-11 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink pl-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 sm:min-h-10 sm:text-sm",
-  filter:
-    "h-9 rounded-lg border border-dashboard-border-emphasis bg-dashboard-control pl-2 text-sm text-dashboard-text transition-colors hover:border-dashboard-border-interactive focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25",
-  sort: "h-full bg-dashboard-control pl-2 font-sans text-xs text-dashboard-text-muted outline-none",
-};
-
-/** Keep native choices and position their arrow consistently across the dashboard. */
-export function Select({
-  className,
-  variant = "form",
-  ...props
-}: SelectHTMLAttributes<HTMLSelectElement> & {
-  variant?: keyof typeof selectClassName;
-}) {
-  const showArrow = !props.multiple && (props.size ?? 1) <= 1;
-
-  return (
-    <span
-      className={cn(
-        "relative block w-full min-w-0",
-        variant === "sort" && "h-full",
-      )}
-    >
-      <select
-        {...props}
-        className={cn(
-          "block w-full min-w-0 disabled:cursor-not-allowed disabled:opacity-60 [color-scheme:var(--dashboard-color-scheme,dark)]",
-          selectClassName[variant],
-          showArrow
-            ? "appearance-none pr-9 forced-colors:appearance-auto"
-            : "pr-3",
-          className,
-        )}
-      />
-      {showArrow ? (
-        <ChevronDown
-          aria-hidden="true"
-          className={cn(
-            "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-dashboard-text-muted forced-colors:hidden",
-            props.disabled && "opacity-60",
-          )}
-          size={16}
-        />
-      ) : null}
-    </span>
-  );
-}

package/src/client/components/Sheet.LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 shadcn
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.