@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/conversations/ConversationUsageBreakdown.tsx

@@ -13,6 +13,16 @@ import {
   totalConversationCost,
 } from "../format";
 import { ShimmerText } from "../components/ShimmerText";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
+import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { liveModelId } from "./ConversationMeta";
 import {
@@ -70,7 +80,7 @@ function tokenTypeParts(
   return parts.length ? parts : undefined;
 }
 
-const CELL = "text-right align-top font-sans tabular-nums";
+const CELL = "px-0 text-right align-top font-sans tabular-nums";
 
 /**
  * One usage table. Every table in the breakdown shares column widths, so the
@@ -85,85 +95,118 @@ function BreakdownTable(props: {
   total?: { cost: string; count: string; label: string };
 }) {
   return (
-    <div className="min-w-0 overflow-x-auto">
-      <table
-        aria-label={props.label}
-        className="w-full min-w-72 table-fixed border-collapse text-xs leading-relaxed"
-      >
-        <colgroup>
-          <col />
-          <col className="w-20" />
-          <col className="w-20" />
-        </colgroup>
-        <thead>
-          <tr className="border-b border-dashboard-border text-dashboard-text-muted">
-            <th scope="col" className="py-2 text-left font-normal">
-              {props.label}
-            </th>
-            <th scope="col" className="py-2 text-right font-normal">
-              {props.countLabel}
-            </th>
-            <th scope="col" className="py-2 text-right font-normal">
-              Cost
-            </th>
-          </tr>
-        </thead>
-        {props.rows.map((row) => (
-          <tbody
+    <Table
+      aria-label={props.label}
+      className="min-w-72 table-fixed text-xs leading-relaxed"
+    >
+      <colgroup>
+        <col />
+        <col className="w-20" />
+        <col className="w-20" />
+      </colgroup>
+      <TableHeader>
+        <TableRow className="border-dashboard-border">
+          <TableHead
+            scope="col"
+            className="px-0 py-2 leading-relaxed font-normal"
+          >
+            {props.label}
+          </TableHead>
+          <TableHead
+            scope="col"
+            className="px-0 py-2 text-right leading-relaxed font-normal"
+          >
+            {props.countLabel}
+          </TableHead>
+          <TableHead
+            scope="col"
+            className="px-0 py-2 text-right leading-relaxed font-normal"
+          >
+            Cost
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      {props.rows.map((row) => {
+        const padding = row.parts ? "pt-2 pb-0.5" : "py-2";
+        return (
+          <TableBody
             className="border-b border-dashboard-border-subtle last-of-type:border-b-0"
             key={row.key}
           >
-            <tr className="text-dashboard-text">
-              <th
+            {/* The tbody draws the group border, so its rows have none. */}
+            <TableRow className="border-0">
+              <TableHead
                 scope="row"
-                className={`pr-3 text-left font-normal ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}
+                className={cn(
+                  "pl-0 pr-3 align-top leading-relaxed font-normal text-dashboard-text",
+                  padding,
+                )}
               >
                 <span className="block truncate">{row.label}</span>
-              </th>
-              <td className={`${CELL} ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}>
-                {row.count}
-              </td>
-              <td className={`${CELL} ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}>
-                {row.cost}
-              </td>
-            </tr>
+              </TableHead>
+              <TableCell className={cn(CELL, padding)}>{row.count}</TableCell>
+              <TableCell className={cn(CELL, padding)}>{row.cost}</TableCell>
+            </TableRow>
             {row.parts?.map((part, index, parts) => {
-              const padding = index === parts.length - 1 ? "pb-2" : "";
+              const partPadding =
+                index === parts.length - 1 ? "pt-0 pb-2" : "py-0";
               return (
-                <tr
-                  className="text-2xs leading-5 text-dashboard-text-faint"
+                <TableRow
+                  className="border-0 text-2xs leading-5"
                   key={part.label}
                 >
-                  <th
+                  <TableHead
                     scope="row"
-                    className={`truncate pl-3 pr-3 text-left font-normal ${padding}`}
+                    className={cn(
+                      "truncate pl-3 pr-3 align-top text-2xs leading-5 font-normal text-dashboard-text-faint",
+                      partPadding,
+                    )}
                   >
                     {part.label}
-                  </th>
-                  <td className={`${CELL} ${padding}`}>{part.count}</td>
-                  <td className={`${CELL} ${padding}`}>{part.cost}</td>
-                </tr>
+                  </TableHead>
+                  <TableCell
+                    className={cn(
+                      CELL,
+                      "text-dashboard-text-faint",
+                      partPadding,
+                    )}
+                  >
+                    {part.count}
+                  </TableCell>
+                  <TableCell
+                    className={cn(
+                      CELL,
+                      "text-dashboard-text-faint",
+                      partPadding,
+                    )}
+                  >
+                    {part.cost}
+                  </TableCell>
+                </TableRow>
               );
             })}
-          </tbody>
-        ))}
-        {props.total ? (
-          <tfoot>
-            <tr className="border-t border-dashboard-border font-semibold text-dashboard-text">
-              <th scope="row" className="py-2 text-left font-semibold">
-                {props.total.label}
-              </th>
-              <td className="py-2 text-right font-sans tabular-nums">
-                {props.total.count}
-              </td>
-              <td className="py-2 text-right font-sans tabular-nums">
-                {props.total.cost}
-              </td>
-            </tr>
-          </tfoot>
-        ) : null}
-      </table>
-    </div>
+          </TableBody>
+        );
+      })}
+      {props.total ? (
+        <TableFooter className="font-semibold">
+          <TableRow>
+            <TableHead
+              scope="row"
+              className="px-0 py-2 leading-relaxed font-semibold text-dashboard-text"
+            >
+              {props.total.label}
+            </TableHead>
+            <TableCell className="px-0 py-2 text-right font-sans tabular-nums">
+              {props.total.count}
+            </TableCell>
+            <TableCell className="px-0 py-2 text-right font-sans tabular-nums">
+              {props.total.cost}
+            </TableCell>
+          </TableRow>
+        </TableFooter>
+      ) : null}
+    </Table>
   );
 }
 

package/src/client/conversations/ConversationWatches.tsx

@@ -0,0 +1,173 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Bot,
+  ChevronRight,
+  CircleDot,
+  Eye,
+  FolderGit2,
+  GitPullRequest,
+  Hash,
+  LockKeyhole,
+  type LucideIcon,
+  Package,
+  Rocket,
+  Tag,
+  Timer,
+  Users,
+} from "lucide-react";
+import { useState, type ReactNode } from "react";
+import {
+  conversationWatchesReportSchema,
+  type ConversationWatch,
+} from "@sentry/junior/api/schema";
+
+import { formatTime } from "../format";
+import { fetchDashboardJson } from "../http";
+import { dashboardDisclosureChevronClass } from "../styles";
+import { DetailsList, DetailsRow } 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: one line per active Watch. A line
+ * expands to show 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 as a single line with its resource. Clicking the line shows
+ * why the Watch exists and which events wake the Conversation. The expiry is
+ * an internal limit, so the row does not show it.
+ */
+function WatchRow(props: { watch: ConversationWatch }) {
+  const { watch } = props;
+  const [expanded, setExpanded] = useState(false);
+  const Icon = watch.redacted
+    ? LockKeyhole
+    : (resourceIcons[watch.resourceType] ?? Eye);
+  const resource = `${watch.namespace} ${watch.resourceType.replaceAll("_", " ")}`;
+  // A timer has one event, and its fire time already says when it wakes.
+  const events = watch.firesAt ? [] : watch.events;
+  const filters = Object.entries(watch.match ?? {});
+  const row = (
+    <DetailsRow
+      expanded={expanded}
+      icon={<Icon aria-hidden="true" className="size-3.5" />}
+      meta={
+        <span className="grid size-5 place-items-center">
+          <ChevronRight
+            aria-hidden="true"
+            className={dashboardDisclosureChevronClass}
+          />
+        </span>
+      }
+      onToggle={() => setExpanded((value) => !value)}
+      title={watch.label ?? `Private ${resource}`}
+    />
+  );
+  if (!expanded) return row;
+
+  return (
+    <>
+      {row}
+      {/* Indent under the title: icon column, column gap, and row padding. */}
+      <div className="grid min-w-0 gap-1.5 pb-2 pl-9 pr-1.5 pt-0.5 text-xs leading-4 text-dashboard-text-muted">
+        {watch.intent ? (
+          <p className="m-0 break-words">{watch.intent}</p>
+        ) : null}
+        {watch.firesAt ? (
+          <p className="m-0">
+            Fires{" "}
+            <time dateTime={watch.firesAt}>
+              {formatTime(watch.firesAt, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              })}
+            </time>
+          </p>
+        ) : null}
+        {events.length > 0 || filters.length > 0 ? (
+          <div className="flex flex-wrap items-center gap-1">
+            {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>
+            ))}
+          </div>
+        ) : null}
+        {watch.childAgent ? (
+          <p className="m-0 flex min-w-0 items-center gap-1">
+            <Bot aria-hidden="true" className="size-3 shrink-0" />
+            <span className="truncate">
+              via {watch.childAgent.name ?? "subagent"}
+            </span>
+          </p>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+/** 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("_", " ");
+}

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,139 @@
+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. 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 a hover fill sits inside the card with an
+    // even inset. The negative margins keep row text on the card padding.
+    <ul className="-mx-1.5 -mb-1.5 -mt-1 grid list-none gap-0.5 p-0">
+      {visible.map((item) => (
+        <li key={props.itemKey(item)}>{props.renderItem(item)}</li>
+      ))}
+      {hidden > 0 ? (
+        <li>
+          <button
+            aria-expanded={expanded}
+            className="group flex min-h-8 w-full items-center gap-2.5 rounded-md px-1.5 py-1.5 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-5 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. A row with `onToggle` is a disclosure button
+ * that shows or hides content the caller renders under it.
+ */
+export function DetailsRow(props: {
+  children?: ReactNode;
+  expanded?: boolean;
+  href?: string;
+  icon: ReactNode;
+  meta?: ReactNode;
+  onToggle?(): void;
+  title: ReactNode;
+  /** Native hover text with detail that the row does not show. */
+  tooltip?: string;
+}) {
+  const interactive = props.href !== undefined || props.onToggle !== undefined;
+  const className = cn(
+    "grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2.5 gap-y-1 rounded-md px-1.5 py-1.5 text-left text-inherit no-underline",
+    interactive &&
+      "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">
+        {props.title}
+      </span>
+      <span className="shrink-0 text-xs leading-5 tabular-nums text-dashboard-text-muted">
+        {props.meta}
+      </span>
+      {props.children}
+    </>
+  );
+  if (props.href) {
+    return (
+      <a
+        className={className}
+        href={props.href}
+        rel="noreferrer"
+        target="_blank"
+        title={props.tooltip}
+      >
+        {content}
+      </a>
+    );
+  }
+  if (props.onToggle) {
+    return (
+      <button
+        aria-expanded={props.expanded ?? false}
+        className={className}
+        onClick={props.onToggle}
+        title={props.tooltip}
+        type="button"
+      >
+        {content}
+      </button>
+    );
+  }
+  return (
+    <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>
   );
 }