@sentry/junior-dashboard 0.264.0 → 0.266.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
+// the timer fire time stays in the future.
+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

@@ -338,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/Skeleton.tsx

@@ -1,17 +0,0 @@
-import type { ElementType } from "react";
-
-import { cn } from "../styles";
-
-/** Hide one content placeholder from assistive technology. */
-export function Skeleton(props: { as?: ElementType; className?: string }) {
-  const Component = props.as ?? "div";
-  return (
-    <Component
-      aria-hidden="true"
-      className={cn(
-        "animate-pulse rounded-md bg-dashboard-fill-soft motion-reduce:animate-none",
-        props.className,
-      )}
-    />
-  );
-}

package/src/client/components/TextInput.tsx

@@ -1,58 +0,0 @@
-import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
-
-import { cn } from "../styles";
-
-const textControlClassName =
-  "block w-full rounded-md border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 font-sans text-sm text-dashboard-text placeholder:text-dashboard-text-muted/70 focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25 aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-50";
-
-export type TextInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size"
-> & {
-  className?: string;
-  size?: "default" | "comfortable";
-};
-
-/** Render the dashboard's standard single-line text control. */
-export function TextInput({
-  className,
-  type = "text",
-  size = "default",
-  ...props
-}: TextInputProps) {
-  return (
-    <input
-      {...props}
-      className={cn(
-        textControlClassName,
-        size === "comfortable" && "min-h-11 text-base sm:min-h-10 sm:text-sm",
-        className,
-      )}
-      type={type}
-    />
-  );
-}
-
-export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  prose?: boolean;
-  className?: string;
-};
-
-/** Render the dashboard's standard multi-line text control. */
-export function TextArea({
-  className,
-  prose = false,
-  ...props
-}: TextAreaProps) {
-  return (
-    <textarea
-      {...props}
-      className={cn(
-        textControlClassName,
-        "min-h-36",
-        prose ? "font-sans leading-relaxed" : "font-mono",
-        className,
-      )}
-    />
-  );
-}