@sentry/junior-dashboard 0.263.0 → 0.265.0

package/src/client/conversations/ConversationWatches.tsx

@@ -0,0 +1,165 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Bot,
+  CircleDot,
+  Eye,
+  FolderGit2,
+  GitPullRequest,
+  Hash,
+  LockKeyhole,
+  type LucideIcon,
+  Package,
+  Rocket,
+  Tag,
+  Timer,
+  Users,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import {
+  conversationWatchesReportSchema,
+  type ConversationWatch,
+} from "@sentry/junior/api/schema";
+
+import { formatTime } from "../format";
+import { fetchDashboardJson } from "../http";
+import { DetailsList, DetailsRow, DetailsRowLine } from "./DetailsList";
+
+/** Load the active Watches that one Conversation owns. */
+export function useConversationWatches(conversationId: string) {
+  return useQuery({
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        conversationWatchesReportSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/watches`,
+        signal,
+      ),
+    queryKey: ["conversation", conversationId, "watches"],
+    retry: false,
+  });
+}
+
+/**
+ * Show what can wake this Conversation: each active Watch with the resource,
+ * the reason, and the event types that deliver to it.
+ */
+export function ConversationWatches(props: { watches: ConversationWatch[] }) {
+  return (
+    <DetailsList
+      itemKey={(watch) => watch.id}
+      items={props.watches}
+      renderItem={(watch) => <WatchRow watch={watch} />}
+    />
+  );
+}
+
+const resourceIcons: Partial<Record<string, LucideIcon>> = {
+  channel: Hash,
+  deployment: Rocket,
+  deployment_source: Rocket,
+  issue: CircleDot,
+  pull_request: GitPullRequest,
+  release_source: Tag,
+  repository: FolderGit2,
+  team: Users,
+  timer: Timer,
+  workspace_snapshot: Package,
+};
+
+/**
+ * Show one Watch in up to three short lines: the resource and time left, the
+ * reason it exists, then the event types that wake the Conversation.
+ */
+function WatchRow(props: { watch: ConversationWatch }) {
+  const { watch } = props;
+  const Icon = watch.redacted
+    ? LockKeyhole
+    : (resourceIcons[watch.resourceType] ?? Eye);
+  const isTimer = watch.firesAt !== undefined;
+  const until = watch.firesAt ?? watch.expiresAt;
+  const resource = `${watch.namespace} ${watch.resourceType.replaceAll("_", " ")}`;
+  // A timer has one event, and the time already says when it fires.
+  const events = isTimer ? [] : watch.events;
+  const filters = Object.entries(watch.match ?? {});
+
+  return (
+    <DetailsRow
+      icon={<Icon aria-hidden="true" className="size-3.5" />}
+      meta={
+        <time dateTime={until}>
+          {isTimer
+            ? `in ${formatRemaining(until)}`
+            : `${formatRemaining(until)} left`}
+        </time>
+      }
+      title={watch.label ?? `Private ${resource}`}
+      tooltip={`${isTimer ? "Fires" : "Expires"} ${formatTime(until, {
+        dateStyle: "medium",
+        timeStyle: "short",
+      })}`}
+    >
+      {watch.intent ? (
+        <DetailsRowLine className="line-clamp-2 break-words">
+          {watch.intent}
+        </DetailsRowLine>
+      ) : null}
+      {events.length > 0 || filters.length > 0 || watch.childAgent ? (
+        <DetailsRowLine className="flex flex-wrap items-center gap-1 pt-0.5">
+          {events.map((event) => (
+            <WatchChip key={event}>
+              {watchEventLabel(event, watch.resourceType)}
+            </WatchChip>
+          ))}
+          {filters.map(([key, value]) => (
+            <WatchChip filter key={`match:${key}`}>
+              {key.replaceAll("_", " ")}: {[value].flat().join(", ")}
+            </WatchChip>
+          ))}
+          {watch.childAgent ? (
+            <span className="inline-flex min-w-0 items-center gap-1 px-0.5">
+              <Bot aria-hidden="true" className="size-3 shrink-0" />
+              <span className="truncate">
+                via {watch.childAgent.name ?? "subagent"}
+              </span>
+            </span>
+          ) : null}
+        </DetailsRowLine>
+      ) : null}
+    </DetailsRow>
+  );
+}
+
+/** Label one event type, or a dashed match filter that narrows the events. */
+function WatchChip(props: { children: ReactNode; filter?: boolean }) {
+  return (
+    <span
+      className={
+        props.filter
+          ? "min-w-0 truncate rounded-md border border-dashed border-dashboard-border px-1.5 py-px text-xs leading-4 text-dashboard-text-muted"
+          : "min-w-0 truncate rounded-md bg-dashboard-fill-soft px-1.5 py-px text-xs leading-4 text-dashboard-text-subtle"
+      }
+    >
+      {props.children}
+    </span>
+  );
+}
+
+/**
+ * Turn an event type into a short trigger label. The row already names the
+ * resource, so `pull_request.checks.failed` reads as "checks failed".
+ */
+function watchEventLabel(event: string, resourceType: string): string {
+  const parts = event.split(".");
+  const rest =
+    parts[0] === resourceType && parts.length > 1 ? parts.slice(1) : parts;
+  return rest.join(" ").replaceAll("_", " ");
+}
+
+/** Format the time until a Watch fires or expires as one compact unit. */
+function formatRemaining(value: string): string {
+  const ms = Math.max(0, Date.parse(value) - Date.now());
+  const minutes = Math.round(ms / 60_000);
+  if (minutes < 60) return `${Math.max(1, minutes)}m`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 48) return `${hours}h`;
+  return `${Math.round(hours / 24)}d`;
+}

package/src/client/conversations/ConversationWorkspace.tsx

@@ -5,8 +5,8 @@ import { useNavigate, useParams } from "react-router";
 
 import { useConversationsData } from "../api";
 import { ConversationSidebar } from "./ConversationSidebar";
-import { ToggleButton } from "../components/Button";
 import { SearchInput } from "../components/SearchInput";
+import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
 import { pageCount, pageItems, PagePagination } from "../components/Pagination";
 import { ConversationHomeList } from "./ConversationHomeList";
 import { ConversationComposer } from "./ConversationComposer";
@@ -171,7 +171,6 @@ function NewConversationView(props: {
   ): Promise<void>;
 }) {
   const [visibility, setVisibility] = useState<"private" | "public">("public");
-  const isPublic = visibility === "public";
 
   return (
     <section
@@ -185,32 +184,23 @@ function NewConversationView(props: {
         draftId="new"
         error={props.error}
         footerStart={
-          <div
+          <ToggleGroup
             aria-label="Conversation visibility"
-            className="inline-flex shrink-0 items-center gap-0.5 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-0.5"
-            role="group"
+            className="inline-flex shrink-0 gap-0.5 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-0.5"
+            onValueChange={([next]) => {
+              if (next) setVisibility(next);
+            }}
+            value={[visibility]}
           >
-            <ToggleButton
-              className="min-w-20 gap-1.5"
-              onClick={() => setVisibility("public")}
-              pressed={isPublic}
-              type="button"
-              variant="segment"
-            >
+            <ToggleGroupItem className="min-w-20 gap-1.5" value="public">
               <Globe2 aria-hidden="true" className="size-3" />
               Public
-            </ToggleButton>
-            <ToggleButton
-              className="min-w-20 gap-1.5"
-              onClick={() => setVisibility("private")}
-              pressed={!isPublic}
-              type="button"
-              variant="segment"
-            >
+            </ToggleGroupItem>
+            <ToggleGroupItem className="min-w-20 gap-1.5" value="private">
               <LockKeyhole aria-hidden="true" className="size-3" />
               Private
-            </ToggleButton>
-          </div>
+            </ToggleGroupItem>
+          </ToggleGroup>
         }
         label="Start a conversation"
         restoreDraftOnError

package/src/client/conversations/ConversationWorkspaceLoading.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "../components/Skeleton";
+import { Skeleton } from "../components/ui/skeleton";
 import { dashboardContainerClass, cn } from "../styles";
 import { ChatLayout } from "./ChatLayout";
 import { ConversationHomeListLoading } from "./ConversationHomeList";

package/src/client/conversations/DetailsList.tsx

@@ -0,0 +1,124 @@
+import { ChevronRight } from "lucide-react";
+import { useState, type ReactNode } from "react";
+
+import { cn, dashboardDisclosureChevronClass } from "../styles";
+
+/** Rows a details list shows before the reader asks for the rest. */
+const COLLAPSED_ROW_COUNT = 3;
+
+/**
+ * Show rows in a details card. Rows are split by thin rules. A list with more
+ * than three rows shows the first three and a row that shows the rest.
+ */
+export function DetailsList<T>(props: {
+  items: readonly T[];
+  itemKey(item: T): string;
+  renderItem(item: T): ReactNode;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const hidden = props.items.length - COLLAPSED_ROW_COUNT;
+  const visible =
+    expanded || hidden <= 0
+      ? props.items
+      : props.items.slice(0, COLLAPSED_ROW_COUNT);
+
+  return (
+    // Rows own their padding, so hover fills reach the rules. The negative
+    // margin keeps the first and last text on the card padding.
+    <ul className="-my-2.5 grid list-none p-0">
+      {visible.map((item) => (
+        <li
+          className="border-t border-dashboard-border-subtle first:border-t-0"
+          key={props.itemKey(item)}
+        >
+          {props.renderItem(item)}
+        </li>
+      ))}
+      {hidden > 0 ? (
+        <li className="border-t border-dashboard-border-subtle">
+          <button
+            aria-expanded={expanded}
+            className="group -mx-2 flex min-h-8 items-center gap-2.5 rounded-md px-2 py-2 text-left text-xs font-medium leading-4 text-dashboard-text-muted transition-colors hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+            onClick={() => setExpanded((value) => !value)}
+            type="button"
+          >
+            <span className="grid size-4 shrink-0 place-items-center">
+              <ChevronRight
+                aria-hidden="true"
+                className={dashboardDisclosureChevronClass}
+              />
+            </span>
+            {expanded ? "Show fewer" : `Show ${hidden} more`}
+          </button>
+        </li>
+      ) : null}
+    </ul>
+  );
+}
+
+/**
+ * Lay out one details list row: an icon, a title, and short trailing text on
+ * the first line, then optional lines under the title. A row with `href`
+ * opens that link in a new tab.
+ */
+export function DetailsRow(props: {
+  children?: ReactNode;
+  href?: string;
+  icon: ReactNode;
+  meta?: ReactNode;
+  title: ReactNode;
+  /** Native hover text with detail that the row does not show. */
+  tooltip?: string;
+}) {
+  const className = cn(
+    "-mx-2 grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2.5 gap-y-1 rounded-md px-2 py-2.5 text-inherit no-underline",
+    props.href &&
+      "group transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
+  );
+  const content = (
+    <>
+      <span className="grid size-5 shrink-0 place-items-center text-dashboard-text-muted">
+        {props.icon}
+      </span>
+      <span className="min-w-0 truncate text-sm font-medium leading-5 text-dashboard-text group-hover:underline">
+        {props.title}
+      </span>
+      <span className="shrink-0 text-xs leading-5 tabular-nums text-dashboard-text-muted">
+        {props.meta}
+      </span>
+      {props.children}
+    </>
+  );
+  return props.href ? (
+    <a
+      className={className}
+      href={props.href}
+      rel="noreferrer"
+      target="_blank"
+      title={props.tooltip}
+    >
+      {content}
+    </a>
+  ) : (
+    <div className={className} title={props.tooltip}>
+      {content}
+    </div>
+  );
+}
+
+/** Place one extra line under the title of a `DetailsRow`. */
+export function DetailsRowLine(props: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "col-start-2 col-end-4 min-w-0 text-xs leading-4 text-dashboard-text-muted",
+        props.className,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}

package/src/client/conversations/EventDetails.tsx

@@ -1,5 +1,15 @@
 import type { ConversationReportEvent } from "@sentry/junior/api/schema";
-import type { ReactNode } from "react";
+import { ChevronRight } from "lucide-react";
+import { useState, type ReactNode } from "react";
+
+import { HighlightedCode } from "../code";
+import { CopyButton } from "../components/CopyButton";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../styles";
 
 import { RedactedMarker } from "./TranscriptRedacted";
 import { TranscriptText } from "./TranscriptText";
@@ -178,14 +188,38 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
         </DetailSection>
       ) : null}
       {content}
-      <details className="border-t border-dashboard-border pt-4">
-        <summary className="cursor-pointer text-xs text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-dashboard-focus">
+      <RawEventJson event={event} />
+    </div>
+  );
+}
+
+function RawEventJson({ event }: { event: ConversationReportEvent }) {
+  const [open, setOpen] = useState(false);
+  const json = open ? JSON.stringify(event, null, 2) : "";
+  return (
+    <div className="relative min-w-0 border-t border-dashboard-border pt-4">
+      <Collapsible onOpenChange={setOpen} open={open}>
+        <CollapsibleTrigger className="group flex min-h-9 cursor-pointer items-center gap-1 pr-12 text-xs text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-dashboard-focus">
+          <ChevronRight
+            aria-hidden="true"
+            className={dashboardDisclosureChevronClass}
+          />
           Raw JSON
-        </summary>
-        <pre className="mb-0 mt-3 whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-dashboard-text">
-          {JSON.stringify(event, null, 2)}
-        </pre>
-      </details>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="absolute right-0 top-4">
+            <CopyButton getText={() => json} label="Copy JSON" />
+          </div>
+          <div
+            aria-label="Raw event JSON"
+            className="mt-3 max-h-80 min-w-0 overflow-auto overscroll-contain rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-3 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+            role="region"
+            tabIndex={0}
+          >
+            <HighlightedCode code={json} language="json" />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 }

package/src/client/conversations/ForkConversationButton.tsx

@@ -2,10 +2,15 @@ import { GitFork } from "lucide-react";
 import { useId, useState } from "react";
 import { createPortal } from "react-dom";
 import { useNavigate } from "react-router";
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
+import { Textarea } from "../components/ui/textarea";
+import { Field, FieldLabel } from "../components/ui/field";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { Drawer } from "../components/Drawer";
-import { Field } from "../components/Field";
-import { TextArea } from "../components/TextInput";
 import { DashboardApiError } from "../http";
 import { conversationPath } from "./conversationRoutes";
 import { useForkConversation } from "./queries";
@@ -17,14 +22,20 @@ export function ForkConversationButton(props: ForkTarget) {
   const [open, setOpen] = useState(false);
   return (
     <>
-      <Button
-        size="icon"
-        aria-label="Fork after this message"
-        title="Fork after this message"
-        onClick={() => setOpen(true)}
-      >
-        <GitFork size={14} aria-hidden="true" />
-      </Button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              size="icon"
+              aria-label="Fork after this message"
+              onClick={() => setOpen(true)}
+            >
+              <GitFork size={14} aria-hidden="true" />
+            </Button>
+          }
+        />
+        <TooltipContent size="compact">Fork after this message</TooltipContent>
+      </Tooltip>
       {open
         ? createPortal(
             <ForkConversationDialog
@@ -82,12 +93,12 @@ function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
         <p className="m-0">
           Creates a fork of the conversation from this point.
         </p>
-        <Field htmlFor={inputId} label="Message">
-          <TextArea
+        <Field>
+          <FieldLabel htmlFor={inputId}>Message</FieldLabel>
+          <Textarea
             id={inputId}
-            prose
             autoFocus
-            className="min-h-28"
+            className="min-h-28 leading-relaxed"
             placeholder="Message Junior…"
             value={message}
             disabled={fork.isPending}
@@ -112,7 +123,7 @@ function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
           </p>
         ) : null}
         <Button
-          tone="primary"
+          variant="primary"
           type="submit"
           disabled={!message.trim() || fork.isPending}
         >

package/src/client/conversations/ObjectCard.tsx

@@ -3,10 +3,16 @@ import {
   objectFactFields,
   objectPresentation,
 } from "@sentry/junior-plugin-api";
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRight, ChevronRight } from "lucide-react";
 import { ObjectIcon } from "../components/ObjectIcon";
 import { AutomationCard } from "../components/AutomationCard";
 import { StatusChip } from "../components/StatusChip";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../styles";
 
 /** Show the latest saved annotation. Opening a source is always explicit. */
 export function ObjectCard({ card }: { card: OwnedObjectAnnotation }) {
@@ -78,14 +84,20 @@ export function ObjectCard({ card }: { card: OwnedObjectAnnotation }) {
         )}
         {fields.length > 0 && facts(fields)}
         {card.description && (
-          <details className="min-w-0 border-t border-dashboard-border pt-3">
-            <summary className="cursor-pointer text-xs font-medium text-dashboard-text-muted focus-visible:outline-dashboard-focus">
+          <Collapsible className="min-w-0 border-t border-dashboard-border pt-3">
+            <CollapsibleTrigger className="group flex cursor-pointer items-center gap-1 text-xs font-medium text-dashboard-text-muted focus-visible:outline-dashboard-focus">
+              <ChevronRight
+                aria-hidden="true"
+                className={dashboardDisclosureChevronClass}
+              />
               More details
-            </summary>
-            <p className="mb-0 mt-3 whitespace-pre-wrap break-words text-sm text-dashboard-text-muted">
-              {card.description}
-            </p>
-          </details>
+            </CollapsibleTrigger>
+            <CollapsibleContent hiddenUntilFound>
+              <p className="mb-0 mt-3 whitespace-pre-wrap break-words text-sm text-dashboard-text-muted">
+                {card.description}
+              </p>
+            </CollapsibleContent>
+          </Collapsible>
         )}
         {card.warning && (
           <p className="m-0 break-words text-xs text-amber-500">

package/src/client/conversations/PendingMailboxStack.tsx

@@ -15,7 +15,11 @@ import {
   type LucideIcon,
 } from "lucide-react";
 
-import { Tooltip } from "../components/Tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { actorLabel } from "../format";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
 import {
@@ -44,13 +48,18 @@ function pendingDeliveryMeta(
 
 function PendingMetaIcon(props: { children: ReactElement; label: string }) {
   return (
-    <Tooltip content={props.label} placement="above">
-      <span
-        aria-label={props.label}
-        className="inline-flex text-dashboard-text-muted"
-      >
-        {props.children}
-      </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            aria-label={props.label}
+            className="inline-flex text-dashboard-text-muted"
+          >
+            {props.children}
+          </span>
+        }
+      />
+      <TooltipContent>{props.label}</TooltipContent>
     </Tooltip>
   );
 }
@@ -69,10 +78,15 @@ function PendingMetaIcons(props: {
   return (
     <TranscriptHeadingMeta className="flex min-w-0 items-center justify-end gap-1.5 text-xs leading-none text-dashboard-text-muted">
       {props.showSlack ? (
-        <Tooltip content="Slack" placement="above">
-          <span className="inline-flex text-dashboard-text-muted">
-            <SlackMark className="size-3.5" />
-          </span>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <span className="inline-flex text-dashboard-text-muted">
+                <SlackMark className="size-3.5" />
+              </span>
+            }
+          />
+          <TooltipContent>Slack</TooltipContent>
         </Tooltip>
       ) : null}
       <PendingMetaIcon label={delivery.label}>
@@ -84,28 +98,33 @@ function PendingMetaIcons(props: {
         />
       </PendingMetaIcon>
       {props.onCancel ? (
-        <Tooltip content="Remove queued message" placement="above">
-          <button
-            aria-label={
-              props.cancelError
-                ? "Could not remove. Try again."
-                : "Remove queued message"
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                aria-label={
+                  props.cancelError
+                    ? "Could not remove. Try again."
+                    : "Remove queued message"
+                }
+                className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
+                disabled={props.cancelDisabled}
+                onClick={props.onCancel}
+                type="button"
+              >
+                {props.cancelPending ? (
+                  <LoaderCircle
+                    aria-hidden="true"
+                    className="animate-spin"
+                    size={13}
+                  />
+                ) : (
+                  <X aria-hidden="true" size={14} strokeWidth={2.2} />
+                )}
+              </button>
             }
-            className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
-            disabled={props.cancelDisabled}
-            onClick={props.onCancel}
-            type="button"
-          >
-            {props.cancelPending ? (
-              <LoaderCircle
-                aria-hidden="true"
-                className="animate-spin"
-                size={13}
-              />
-            ) : (
-              <X aria-hidden="true" size={14} strokeWidth={2.2} />
-            )}
-          </button>
+          />
+          <TooltipContent>Remove queued message</TooltipContent>
         </Tooltip>
       ) : null}
     </TranscriptHeadingMeta>